tag:blogger.com,1999:blog-84219036152863769782024-02-21T07:18:18.234+00:00Web Interface DevelopmentThis is where you can find out all about interface development.<br>
Whats good, whats not good and most importantly, why!?James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.comBlogger69125tag:blogger.com,1999:blog-8421903615286376978.post-10772233459691923462009-11-19T14:32:00.002+00:002009-11-19T14:44:40.221+00:00Building websites - how do you do it?From reading the title of this post you might assume that I am about to talk about what I do every day and have always done. You are only partly right.<br /><br />The specific topic I am interested in is the building of completely flat websites. That is to say the type of delivery to a client which is made up of HTML, CSS and JavaScript that will never be integrated into a back-end, never have any other coding wrapped around it but will be kept as a series of flat pages.<br /><br />This is something I have had to do recently for the first time in some time and the question of how to achieve such a thing in an elegant manner keeping the trials of development to a minimum occupies some of my time now.<br /><br />What I did in this instance was use server side includes to include all the common components of each page from a central resource - this includes things like global navigation, a footer etc etc. When it came time to send the code to the client, I then ran an ANT script (as supplied by the esteemed Mr Alexander, once more a colleague) to output the flat pages.<br /><br />This seemed to work well for me. However, I was not happy with the way this worked for the CSS and JavaScript code.<br /><br />During development, I wanted the CSS and JavaScript code broken down into many files to help me find where code was, organise new code and bug fix. I wanted the convenience of loading Firebug and being able to see exactly where my style declarations came from on any particular node.<br /><br />For the final delivery, I wanted one CSS file and just a few JavaScript files. But how to make that happen without breaking my ideals during development? Well, I could end up using ANT to piece it all together just like the HTML code. But that felt a bit messy and frankly, hand crafting XML is about the worst thing I can think of doing.<br /><br />This is where I stop providing solutions and pose a question. How would you have prepared your build? How would you have made sure that during development you could pull in only the bits of JavaScript that should have been on each page and then built the flat files correctly? Its more complex than it at first appears....James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com9tag:blogger.com,1999:blog-8421903615286376978.post-65827188636777337092009-09-22T12:20:00.003+01:002009-09-22T13:49:02.128+01:00Reflecting on a return to actionI have now been with my new employer - EMC Consulting - for four weeks and to be frank, I now have a lot more of interest to discuss on this blog. So, I thought I would re start my posting here with some thoughts on these first four weeks.<br /><br />I have spent the last fourteen months working almost exclusively on a large and complex JavaScript application and I wont deny that I did learn quite a little bit during that time. But I still find myself glad to be back working with all of my skills in a more balanced fashion. Its been refreshing to see how much people care about UX and accessibility and it is a pleasure to be able to combine that with my passion for high quality and minimal CSS and HTML code.<br /><br />Already, pragmatism has reared its friendly head and is guiding my path. This is something I have to reacquaint myself with and I am enjoying that process. There is little to rival the feeling of writing code to fulfil a purpose, getting it done and working and moving on.<br /><br />Yes, I now have to fix IE6 bugs again, but at least I am able to do so in the shadow of Borough Market and the delights that can be found within!James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-46639646114503294142009-08-10T13:48:00.004+01:002009-08-10T14:11:24.792+01:00jQuery browser history managerDespite being the creator of <a href="http://www.jsquaredjavascript.com">JSquared</a>, I have recently had cause to use jQuery.<br /><br />For the project where it is in use, I needed a browser history manager and after a very rapid cursory search, none came up that caught my eye. So, I decided to port my browser history manager from JSquared to jQuery and I woule like to make it available for you to use as well.<br /><br />It works like all other browser history managers, appending named items with a value onto the hash portion of the URL in a QueryString like format.<br /><br />The port is based on the new browser history manager that will be part of the next version of JSquared and it extends the jQuery object. You can <a href="http://jsquared.googlecode.com/files/browserhistorymanager.js">download it here</a>.<br /><br />Using it could not be simpler. You set up named items you wish to listen for changes on and provide a callback function for when the change occurs. You can also update the value of an item as well.<br /><br />To listen for changes, simply do the following:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding: 10px;"><pre style="margin: 0px;">$.url.listen( <span style="color: #a31515;">"myItemName"</span>, <span style="color: blue;">function</span>(e, itemValue, itemName) {</pre><pre style="margin: 0px;"> <span style="color: green;">//perform some actions</span></pre><pre style="margin: 0px;">});</pre></div><br /><br />Your callback function will be called when the user goes back and forwards and the value of your named item changes. The callback function will also get called if the user comes to your site from a bookmark and your item has a value.<br /><br />To update the value of an item and create an entry in the users history, just do the following:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding: 10px;"><pre style="margin: 0px;">$.url.update( <span style="color: #a31515;">"myItemName"</span>, <span style="color: #a31515;">"myNewValue"</span>, <span style="color: blue;">false</span>);</pre></div><br /><br />The third parameter to the update method is called "dontUpdateUrl". When set to true, the value shown to the user in the URL will not change, but the value internally within the browser history manager will. This is useful is you are updating many items and only wish to create one history point.<br /><br />The new value can be any string and the object does not check that the length of the URL is safe - most browsers restrict URL's to around 2000 characters.<br /><br />Please do feedback on whether this is working well for you.James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-26087927128884836342009-07-17T11:34:00.003+01:002009-07-17T12:07:22.045+01:00position:fixedWell well, I have learnt something new this morning. I think this new thing comes under the category of "how did I not already know this" but equally there is always the category of "kill IE6, please!".<br /><br />I suspect that had IE6 dies off a good few years ago, I would already know this new technique as it is not supported in IE6. But I am very much of the opinion that we no longer need to support IE6 perfectly. I do not want to go into detail about browser support, I have spoken often enough about my thoughts on the matter.<br /><br />So, onto the interesting part. Have you ever wanted to create a layout with an element which has a height of 100% minus some pixels? Or an equivalent for the width of an element? I know that I have on many occasions. Each time, I have had to either accept it cant be done or utilise some seemingly clever JavaScript to achieve my goal.<br /><br />But, no more! position:fixed can now be our saviour. Picture the situation where you have a two column layout with your navigation in the left column and content in the right column. You want the left column to have a solid background colour and be 100% in height but leave a 50 pixel space at the top of the column. You might use the following markup:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding: 10px;"><pre style="margin: 0px;"><span style="color: blue;"><!</span><span style="color: #a31515;">DOCTYPE</span> <span style="color: red;">html</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"><span style="color: blue;"><</span><span style="color: #a31515;">html</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"><span style="color: blue;"><</span><span style="color: #a31515;">body</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"> </pre><pre style="margin: 0px;"><span style="color: blue;"><</span><span style="color: #a31515;">div</span> <span style="color: red;">id</span><span style="color: blue;">="LeftNavigation"></span></pre><pre style="margin: 0px;"> <span style="color: blue;"><</span><span style="color: #a31515;">ul</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"> ....a series of links</pre><pre style="margin: 0px;"> <span style="color: blue;"></</span><span style="color: #a31515;">ul</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"><span style="color: blue;"></</span><span style="color: #a31515;">div</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"> </pre><pre style="margin: 0px;"><span style="color: blue;"><</span><span style="color: #a31515;">div</span> <span style="color: red;">id</span><span style="color: blue;">="Content"></span></pre><pre style="margin: 0px;"> ....some content</pre><pre style="margin: 0px;"><span style="color: blue;"></</span><span style="color: #a31515;">div</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"> </pre><pre style="margin: 0px;"><span style="color: blue;"></</span><span style="color: #a31515;">body</span><span style="color: blue;">></span></pre><pre style="margin: 0px;"><span style="color: blue;"></</span><span style="color: #a31515;">html</span><span style="color: blue;">></span></pre></div><br /><br />Now if you apply the following CSS:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding: 10px;"><pre style="margin: 0px;"><span style="color: #a31515;">#LeftNavigation</span> {</pre><pre style="margin: 0px;"> <span style="color: red;">position</span>:<span style="color: blue;">fixed</span>;</pre><pre style="margin: 0px;"> <span style="color: red;">top</span>:<span style="color: blue;">50px</span>;</pre><pre style="margin: 0px;"> <span style="color: red;">bottom</span>:<span style="color: blue;">0</span>;</pre><pre style="margin: 0px;"> <span style="color: red;">background</span>:<span style="color: blue;">#cccccc</span>;</pre><pre style="margin: 0px;"> <span style="color: red;">overflow</span>:<span style="color: blue;">scroll</span>;</pre><pre style="margin: 0px;">}</pre><pre style="margin: 0px;"><span style="color: #a31515;">#Content</span> {</pre><pre style="margin: 0px;"> <span style="color: red;">margin-left</span>:<span style="color: blue;">310px</span>;</pre><pre style="margin: 0px;">}</pre></div><br /><br />You should see things exactly as I described above. The key styles are on the LeftNavigation DIV, the position, top and bottom styles. You should be aware that this is not supported in IE6 but I have found it works in all the browsers I have tried.<br /><br />If this is also new to you, have a little play - it has certainly brightened my day!James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-12956417870346647862009-07-03T08:42:00.004+01:002009-07-03T08:46:37.800+01:00Jamesnorton.comI have launched my all new website at <a href="http://www.jamesnorton.com ">http://www.jamesnorton.com</a>.<br /><br />I wanted to get something out there to represent me and who I am and what I do, but the site is not complete. It will move forwards and change and be enhanced over time.<br /><br />One thing you can all help me with is a potential Webkit bug particularly prevalent in Chrome but also an issue in Safari which I just cannot get to the bottom of. If you view the site in a Webkit browser and you get weird large white patches at the bottom of the screen, please do reply to this post with details of which browser you are using.<br /><br />Otherwise, enjoy the site and feel free to provide any feedback you like.James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com5tag:blogger.com,1999:blog-8421903615286376978.post-10011685233927499462009-07-03T08:37:00.002+01:002009-07-03T08:42:10.510+01:00Macro to micro bloggingYou will obviously have noticed the quiet on this blog over the past 6 weeks.<br /><br />Yes, its true, I have moved most of my activity onto Twitter now.<br /><br />I have neglected my blog. I have found that I have a little less to say on here than I would like because I now only talk in units of 140 characters! I would encourage you to <a href="http://twitter.com/nortools">follow me on Twitter</a> and that way you wont miss out!<br /><br />I will endeavour to make more updates to my blog, but I will always keep updating Twitter...James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-29690160314290946012009-05-14T22:12:00.003+01:002009-05-15T16:48:08.155+01:00ProcessThere is nothing like a discussion about process. Everyone has their own ideas, every company works differently.<br /><br />I have recently taken a lot more interest in process. Last month I became a Certified Scrum Master and those who know me will know that I am a Scrum advocate. I think its a fantastic process. I have worked on a couple of projects that used Scrum and it has proven itself to be very successful.<br /><br />Its a deceptively simple process which is far too often badly implemented. A poor implementation of Scrum is more damaging than not using Scrum in my experience.<br /><br />I am not going to attempt to explain how Scrum works, I will leave that to the <a href="http://en.wikipedia.org/wiki/Scrum_(development)">Wikipedia</a>. Whilst not the best explanation, it will suffice. I personally enjoy using Scrum as it involves doing lots of small pieces of work which are well understood and can be fairly accurately estimated leading to reasonable expectations from clients and higher quality end product. I also believe that the speed with which issues can be surfaced is a massive benefit.<br /><br />Doing Scrum badly will lead to more problems than if you were not doing Scrum at all. It is for this reason that most Scrum trainers will suggest that until you are experienced at using Scrum and implementing it well, you should follow the Scrum process pretty much to the letter.<br /><br />A bad implementation of Scrum can force issues down and stop them being surfaced, can lead to inefficiencies as everyone attempts to work out what is going wrong and instead of opening up the process for all to see, it closes down the Scrum team and cloaks the detail in useless rhetoric.<br /><br />I want to work on projects using Agile with Scrum. I do not want to be agile when I should be Agile nor vice-versa. I make a distinction between agile and Agile and its an important one.<br /><br />When talking about agile with a lower case "a" I mean that I will show a more literal agility - responding to change, trying to prototype quickly and generally being flexible. This is great for a client but dangerous. Too much agility will lead to timelines slipping or the dreaded overtime!<br /><br />Agile with a capital "A" on the other hand is a process and a set of techniques including but not limited to Scrum and XP. When I am being Agile, I will not respond to change in the same way, the person requesting the change has to follow a specific process, a simple process and one which is totally transparent. I have never heard a client complain about having to do that when the result turns out to be a better product. The process protects me and my Scrum team from being distracted, allowing quality to rise whilst also forcing the clients priorities to be my priorities.<br /><br />From this realisation I have chosen to be Agile not agile.James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-47692867971985188082009-05-14T12:58:00.002+01:002009-05-22T11:19:23.339+01:00JSquared 2.1I am very pleased to announce that JSquared 2.1 has been released as of this morning.<br /><br />Check out <a href="http://www.jsquaredjavascript.com">the website</a> for yourself, follow the <a href="http://blog.jsquaredjavascript.com">JSquared blog</a>, <a href="http://www.jsquaredjavascript.com/downloads.html">download the code</a> and <a href="http://www.jsquaredjavascript.com/docs/index.html">read the docs</a>.James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-73718722124796981782009-04-24T22:48:00.002+01:002009-04-24T22:55:02.953+01:00Recent timesI am sure you will have noticed that posting has been light on here the last few weeks and I thought it might be interesting to talk a little about what I have been doing.<div><br /></div><div>I have spent most of my spare time working on JSquared. The code base is coming on nicely now. I have completely re-written some parts of it even since the latest release and I am getting close to being code complete for the next version. Some more demos will come soon as well, but you can get more information on that over on the JSquared blog over the coming week or two.</div><div><br /></div><div>Recently I have achieved the status of Certified Scrum Master. This is something about which I am very excited. I believe that Agile with Scrum is a fantastic engineering process. I have seen it in action myself whilst I worked at LBi and I am actively looking to assist Betfair in making the transition to this process. It can be painful and without doubt we are not yet getting it right, but with time, I am sure we will.</div><div><br /></div><div>Now that I am officially certified, I feel more able to push things forward with Betfair and I have gained a great understanding of the process. I even think that I might bring some of the principles to my "normal" life, though I am not sure my wife will like a daily scrum meeting!</div><div><br /></div><div>Hopefully I should be able to work on some more exciting things over the coming months than in the last few and I will be sure to blog about any and all the exciting happenings in the world of Betfair. For now, it seems I am far more an observer than participant in this great interface development world in which I live and work.</div>James Nortonhttp://www.blogger.com/profile/04054375264545036477noreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-7755303206710166332009-04-05T18:12:00.003+01:002009-04-05T18:18:15.136+01:00JSquared 2.0For those of you that might have missed the news, I released JSquared 2.0 today, April 5 2009.<br /><br />This version represents a massive step forwards for the library. There is a whole new website to go along with the massively revamped code base. The documentation has become much more extensive and the website now features demos of how some of the library works.<br /><br />The best thing to do is to check out <a href="http://www.jsquaredjavascript.com">the website</a> for yourself, follow the <a href="http://blog.jsquaredjavascript.com">JSquared blog</a>, <a href="http://www.jsquaredjavascript.com/downloads.html">download the code</a> and <a href="http://www.jsquaredjavascript.com/docs/index.html">read the docs</a>.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-22838385996297846832009-04-02T12:56:00.003+01:002009-04-02T13:26:11.877+01:00IE6IE6 is a browser that all web developers hate. Or at least that is the case if you tow the line. <br /><br />IE6 used to be by far the most common browser and once was the most advanced. However, things have moved on since 2001. Web developers hate IE6 for its poor implementation of standards. Web developers hate the vagaries of the IE6 rendering engine and the performance of its JavaScript engine. These problems are well documented elsewhere.<br /><br />However, the important people, the ones who matter, the ones who web developers do all their hard work for - the users - they don't seem to care nearly as much. This can be evidenced by the proportion of users who still use IE6. Even today, 8 years after its launch, over 15% of users typically visit a website with IE6. If I were Microsoft, I might just be congratulating myself for making a product so beloved of its users. Of course, where I to do that then I would naively be ignoring the massive proportion of users who have no idea what browser they are using, that there are other browers out there or how to switch.<br /><br />We as web developers must also not ignore this set of users. There have been a lot of campaigns started recently to end IE6 support. Some have gone even further such as <a href="http://www.wait-till-i.com/2009/04/02/easing-the-transition-from-ie6-to-using-newer-browsers/">this one I just came across</a>. I support the idea of getting our users using a more modern browser, but its up to them not us.<br /><br />I don't get the big deal here. I stopped treating IE6 as a "fully supported browser" about 2 years ago. I think the problem here is this idea that a website must look identical in all supported browsers. What is wrong with a website looking subtly different in different browsers? <br /><br />Of all the websites I have built from scratch in the last 2 years, not one has looked identical in different browsers unless it has been demanded from the client. They all worked in an identical way, but they looked subtly different - generally because browsers have different default rendering styles.<br /><br />These differences have never been an issue. In IE6 you might get simpler button styles, you might get a more linear visual layout or you might find text looking slightly different. When I have shown them to a client and explained why they are different, the client does not care either - in fact they are thankful for the money and time saved!<br /><br />I have only had problems with IE6 when I have been maintaining a site where the client has it in writing that browser support will include IE6 and that the site will be identical in all browsers. <br /><br />In the many many demonstrations to clients that I have made in the last 2 years, I have never once been asked to use any browser other than the one I picked for the demo. <br /><br />So, I just don't get the big deal with IE6 these days. Lets make a big deal about why we need to make websites look identical in different browsers on different platforms. Lets make a big deal about making websites more accessible. Lets make a big deal about building standards compliant websites with the simplest possible code. <br /><br />If we spend our energies doing this, then we are more likely to have built-in zero cost support for many many browsers including mobile browsers, not just a narrow set often defined well before the release of a website and therefore out of date at its release.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-8421903615286376978.post-78772665131878377012009-04-01T23:16:00.004+01:002009-04-02T10:03:49.354+01:00CSS Selector EnginesCSS selectors are a great way to pick DOM nodes off a page and many JavaScript libraries use them extensively.<br /><br />For those that have used JSquared, you will know that there is no CSS selector engine built in. Some people have asked why and I have always said that I think its simpler, faster, easier and makes a better performing application to use standard DOM methods to pick elements.<br /><br />Well, yesterday I saw <a href="http://dante.dojotoolkit.org/taskspeed/">TaskSpeed</a> and it got me thinking. I was about to start making a JSquared version of the tests in order to see what the performance was when I cam across <a href="http://webreflection.blogspot.com/2009/04/taskspeed-dom-vs-libraries.html">this post</a> which proved the point I wanted to make without me having to do any work!<br /><br />Andrea shows that using native DOM methods is by far and away the fastest way to complete the tests. Whilst this isn't totally related to a CSS selector engine, it does show that native methods are the best and that certainly holds true for the few parts of the test where a selector engine would be used it it existed.<br /><br />Of course, once all browsers in use support the Selectors API, all will be much improved,Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8421903615286376978.post-27240024954781395742009-03-31T22:54:00.002+01:002009-03-31T22:59:19.356+01:00What do you use?Every now and then I like to play with some new tools. Try a few Firefox plugins, maybe a new dev environment. This week is one of those times.<br /><br />So make your recommendations, what do you use that is cool and why?<br /><br />Just to get things started and to pre-emptively give something back, I have recently been playing with <a href="https://www.spotify.com/">Spotify</a> which I can recommend as a great way to listen to some new and old music. <br /><br />I have also been playing with <a href="https://addons.mozilla.org/en-US/firefox/addon/9954">XUL Profiler</a> which is a pretty cool Firefox plugin (a nightly of Minefield works best with it I believe) for profiling your JavaScript and analysing how much work the browser is doing to render your page.<br /><br />Now its your turn...Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-91070396741590227932009-03-25T11:27:00.003+00:002009-03-25T11:29:02.849+00:00TwitterTwitter is something I never looked at until very recently and for some reason I have suddenly decided to use!<br /><br />So rather excitingly, I am now on Twitter and you can follow my antics (or whatever I bother to say on there) at <a href="http://twitter.com/nortools">http://twitter.com/nortools</a>.<br /><br />I hope you have as much as fun reading as I do writing.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-40561776014371226012009-03-17T09:25:00.004+00:002009-03-17T09:40:05.408+00:00IE8 - right, wrong or something else...?For those that don't know I was recently struck down by a rather severe bout of bronchitis which has laid me low for 3 full weeks. I am delighted to say that I am almost fully recovered. Though just to be sure, I am still "taking the pills" - a form of prevention as much as cure.<br /><br />Its amazing how similar that situation is when compared to Internet Explorer.<br /><br />For many years, IE was suffering from an infection - non-standards compliance. There was a lack of anti-bodies to kill it off. But Microsoft finally took its sick child to the doctor who prescribed a welcome initial course of anti-biotics and so IE7 was born. But all was not fully well, so a second course was required.<br /><br />As Microsoft now force-feeds its child the last dose of that medicine, we see IE8 emerge. Standards compliant, much improved performance and an all round more open approach to development.<br /><br />But the virus remains, dormant for some but nonetheless very real and there. It has mutated into compatibility mode. Luckily there is a vaccination, a form of prevention, and that is a valid doctype and standards compliance.<br /><br />Of course, you could stop reading the drivel I am writing and <a href="http://www.theregister.co.uk/2009/03/17/opera_ceo_microsoft/">read about what Jon von Tetzchner from Opera thinks of IE8</a>.<br /><br />Whatever you think of Microsoft and IE, you have to acknowledge that they are trying. They cannot please everyone and certainly the remaining prevalence of IE6 does not please me, but I do believe they are trying. Now if only they could speed up their release schedules, I could finally breathe easy.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8421903615286376978.post-37626153068983784782009-03-16T17:21:00.003+00:002009-03-16T17:29:35.783+00:00Standards - againAs if to reinforce what <a href="http://nortools.blogspot.com/2008/11/standards.html">I was saying 4 months</a>, the unique and unparalleled Douglas Crockford has articulated in part my own thoughts about HTML 5 in <a href="http://blog.360.yahoo.com/blog-TBPekxc1dLNy5DOloPfzVvFIVOWMB0li?p=978">this blog post</a>.<br /><br />As I said back in November:<br /><q>I want to see greater interoperability between the various browsers and as such I believe simplification would be better.</q>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-28212918898471817022009-02-16T22:47:00.002+00:002009-02-16T23:08:50.729+00:00Changing style regarding changing styleI was having a conversation with the esteemed Mr Alexander today about changing CSS styles based on whether JavaScript is enabled in the users browser.<br /><br />This problem had consumed some of my thoughts in the past and eventually I chose to use the technique I termed progressive degradation, something I have blogged about in a <a href="http://nortools.blogspot.com/2008/03/progressive-degradation.html">previous post</a>.<br /><br />Progressive degradation involves writing your CSS with the assumption that JavaScript is enabled. You then include an additional style sheet in this way:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding:10px;"><p style="margin: 0px; margin: 0;"><span style="color: blue;"><</span><span style="color: #a31515;">noscript</span><span style="color: blue;">></span></p><p style="margin: 0px; margin: 0;"> <span style="color: blue;"><</span><span style="color: #a31515;">link</span> <span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span> <span style="color: red;">href</span><span style="color: blue;">="noscript.css"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: red;">media</span><span style="color: blue;">="screen"</span> <span style="color: blue;">/></span></p><p style="margin: 0px; margin: 0;"><span style="color: blue;"></</span><span style="color: #a31515;">noscript</span><span style="color: blue;">></span></p></div><br /><br />This has generally worked well for me with the one caveat that this is invalid HTML. This has concerned me a little. The argument which both myself and Mr Alexander have used is that this is easily the simplest way to adjust styles depending on whether JavaScript is enabled or not.<br /><br />I prefer to write my CSS with the assumption that the best possible experience is available and then include CSS to enhance the experience for those users with a less capable user agent as required.<br /><br />Mr Alexander proposed another potentially neat solution:<br /><br /><div style="font-family: Consolas; font-size: 10pt; color: black; background: #e1e1e1; padding:10px;"><p style="margin: 0px; margin: 0;"><span style="color: blue;"><</span><span style="color: #a31515;">link</span> <span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span> <span style="color: red;">href</span><span style="color: blue;">="noscript.css"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: red;">media</span><span style="color: blue;">="screen"</span> <span style="color: red;">id</span><span style="color: blue;">="noScriptCSS"</span> <span style="color: blue;">/></span></p><p style="margin: 0px; margin: 0;"><span style="color: blue;"><</span><span style="color: #a31515;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span></p><p style="margin: 0px; margin: 0;"> <span style="color: blue;">var</span> noScriptCSS = document.getElementById(<span style="color: #a31515;">"noScriptCSS"</span>);</p><p style="margin: 0px; margin: 0;"> noScriptCSS.parentNode.removeChild(noScriptCSS);</p><p style="margin: 0px; margin: 0;"><span style="color: blue;"></</span><span style="color: #a31515;">script</span><span style="color: blue;">></span></p></div><br /><br />In this example, the noscript CSS file is always in the document and it is then removed using JavaScript immediately. I haven't tested this, but my first thought was that I would need to investigate if there would be a flicker on the screen as the page is reflowed, affecting the rendering performance of the page. My second thought is that this technique involves an additional HTTP request for all users not only those who need it.<br /><br />There is another well known technique which involves writing your CSS assuming that JavaScript is not available and then including a script enabled CSS file using JavaScript as the page is being rendered. I am not a fan of this technique as I prefer not to write my CSS in this way. <br /><br />There are a variety of other techniques as well such as changing a class on the BODY tag using JavaScript and cascading your selectors from that. If using this technique I would always have a noscript class on the BODY and then remove that (again, it fits better with the way I like to write my CSS).<br /><br />This issue often raises its head and frankly I am now not fully satisfied with any of these techniques. So what do you think? What is the best way of handling this issue?Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8421903615286376978.post-48970374839661441582009-01-20T14:56:00.002+00:002009-01-20T15:08:08.363+00:00Browser detectionI am not a fan of user agent sniffing. I think it is a wholly inappropriate way to find out the capabilities of a user agent accessing your website.<br /><br />However, it has its uses. Steve Souders built <a href="http://stevesouders.com/ua/">UA Profiler</a>, for gathering browser performance characteristics. This is undoubtedly an important and intriguing project. In order to detect which browser you are using, he has written his own user agent sniffing code as he describes in <a href="http://www.stevesouders.com/blog/2009/01/18/user-agents-in-the-morning/">his latest blog post</a>.<br /><br />He also offers to make this code available through a web service. This is an intriguing possibility. My first reaction was to think that this was an excellent move. A high quality user agent sniffer, improved upon by the community and its breadth of use that we could all access via a web service meaning we would not have to ask our users to download the code to do the detection.<br /><br />Having calmed down slightly, I started to think more clearly. Overall, I am not convinced this is the best idea. Generally I feel that detecting a user agent from its user agent string is dangerous. This makes the assumption that no user agent spoofing is taking place, that your detection is granular and perfect enough and that browser features and support will not change. None of these are necessarily true.<br /><br />I prefer to use feature detection. If I want to know whether the browser I am using is capable of applying a particular method, does that method exist?<br /><br />The only reliable way I have found to detect a browser is for Internet Explorer only using conditional comments, both in HTML (useful for including CSS and JavaScript files for specific versions of IE) and in the JavaScript itself.<br /><br />I notice that the latest version of jQuery (1.3) is deprecating its user agent sniffing. This decision is to be applauded.<br /><br />I also realised that the next version of JSquared will actually add the ability to determine if the browser you are using is IE and if it is version 6 or another version. Whilst I might be adding a limited set of user agent support to my library, I am trying to do it in a fail-safe way.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-11762641537306563222009-01-07T12:40:00.003+00:002009-01-08T14:25:20.050+00:00Using CSS3Despite ones personal feelings about it, I am really keen to start using CSS3. There are a number of browsers with support for some of the interesting parts of CSS3 and I think there is a new opportunity to use our skills of progressive enhancement to create some really exciting new effects.<br /><br />If we wisely apply the appropriate properties, we can enhance the user experience for some users - and an increasing number of users - whilst offering a more than acceptable experience for the remainder of our users.<br /><br />There may be a useful side effect here as well. When people see a site enhanced by the latest web browsers, we may get more users switching from older and less standards compliant browsers to the more modern and better newer browsers.<br /><br />We may have to use vendor specific prefixes to get some effects to work, but I think that is a small price to pay to help push forwards the use of the good parts of CSS3.<br /><br />The best part of all this is that as new browsers are released and used, our websites will look better and a good level of support is on the horizon. Safari 3 already has a good level of support, IE8 will have some and Firefox 3.1 will have a good level of support. With Safari having decent support for CSS3, it means all modern Webkit browsers should as well - read Chrome and the iPhone browser in particular!<br /><br />So which properties might be able to be used in this way? Here are a few select ones that I think could be useful:<br /><br /><span style="font-weight:bold;">box-shadow</span><br />With this effect, we can create drop shadows around boxes. When this property is not understood, there is no detrimental effect and when it is recognised, a nice enhancement can be achieved.<br /><br /><span style="font-weight:bold;">border-radius</span><br />This effect allows us to create rounded corners using only CSS. I think this is useful as its simpler than any other technique and support can be achieved for IE by using conditional comments to include other stylesheets. Firefox 3 and Safari 3 already have support for this property - definitely one of the most useful to start implementing.<br /><br /><span style="font-weight:bold;">text-shadow</span><br />Similar to box-shadow, this effect will create a drop shadow effect around text. Another nice enhancement. Not strictly a new addition in CSS3, but support seems to be coming with CSS3 support.<br /><br />There are other interesting effects coming, but I think these are the most potentially useful when applied using the principles of progressive enhancement. There are also a couple of useful new selectors coming, but its hard to see how one could use them with the principles of progressive enhancement.<br /><br />I am excited about some of the new features of CSS3 and its great to be able to start using some. Indeed, the new JSquared website will feature some new CSS3 effects applied in this way.<br /><br />What we do need to be cautious of though is creating a complete maintenance headache. Lets start using new features, but sparingly at first. We dont want to make development even harder with yet another class of browser to support.Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-8421903615286376978.post-76335560355321132382009-01-07T12:34:00.002+00:002009-01-07T12:40:13.798+00:00Happy new yearI wish you all a (slightly) belated happy new year.<br /><br />2008 was a tough but amazing year. Some of its highlights for me included getting married, having an amazing honeymoon and having 3 different jobs!<br /><br />Some of the less good parts included having 3 different jobs! I am working harder than ever now at home and at work and have had much less time in the last 6 months to blog or work on <a href="http://www.j-squared.info">JSquared</a> than I would have liked.<br /><br />But things can change for 2009 and so I hope to only have 1 job this year, not get married again (as amazing as that was) and give a bit more time to blogging here.<br /><br />As you can see on the <a href="http://blog.j-squared.info/">JSquared blog</a>, work has resumed on the project after a period of quiet and I have a new team member on board to make the project even better and an even bigger success.<br /><br />This is hardly going to be a quiet year though as I hope to move house - here's hoping Mrs N and myself can find the right place!<br /><br />I hope you all have a happy, healthy and successful year and keep reading....Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-9948252025424823072008-11-18T14:25:00.005+00:002008-11-18T14:44:40.288+00:00A rantI have tried hard not to fill this blog with random off-topic rants. I am about to break that rule. If you do not wish to read my rant, please move on - normal service will be resumed shortly.<br /><br />There is some (tenuous) relevancy about this rant. I will mention user interfaces!<br /><br />My rant is about iPod's. No no, sorry, its about iPod users and iPod headphones.<br /><br />I use an iPod. I use it because it was given to me and is 8Gb whereas my MP3 player of choice (a Creative Zen Stone Plus) is only 4Gb. It is a 3rd gen nano and is truly wondrous to hold and behold. I find the sound quality lacking in comparison to the two Creative players I have had, but it serves my needs adequately.<br /><br />I am not such a fan of using the iPod. I often find myself getting frustrated at the imprecise and slow controls - I just want to move to a position within a track and change volume without waiting for the interface to allow me!<br /><br />Anyway, I was sitting on the train this morning - not listening to my iPod - and the woman sitting next to me was listening to hers with the rather poor, but iconic iPod headphones. <br /><br />She felt she had to have the volume turned to maximum just to be able to hear her music through those rubbish and very leaky headphones! This resulted in the whole carriage "enjoying" her music along with her. And I got the brunt of it.<br /><br />In short - if you have an iPod, buy some decent headphones!<br /><br /><span style="font-size:75%"></rant></span>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-2715357795736967952008-11-03T17:16:00.003+00:002008-11-03T17:21:55.208+00:00Browser warsTo finish up this little series of posts about browser standards, I wanted to refer to the browser wars and ask this simple question:<br /><br /><span style="font-weight: bold;font-size:150%;" >Do we need another browser war?</span><br /><br />Well? What do you think?<br /><br />I think we cannot have another browser war in quite the same way. When it was Netscape vs Internet Explorer, every user spoke (or perhaps didn't speak) and chose (or perhaps was simply given) Internet Explorer. What then happened is that all the proprietary features of IE could be safely used whilst knowing there was a very high support rate.<br /><br />Since IE6 came out and the browser war ended, there was a little stagnation but really what happened was that people got a bit bored and wanted more. So Firefox came along as a viable competitor. That was the time to have a browser war. The moment has passed. <br /><br />Right now there is too much competition (or maybe none - its hard to tell) between the browser vendors. The market is too segmented. We now need the vendors to follow a standard spec. And so we get into the sordid world of the W3C and standards.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-91948087815363479882008-11-03T16:56:00.003+00:002008-11-03T17:16:06.593+00:00Standards?Yesterday, I posted about <a href="http://nortools.blogspot.com/2008/10/standard-nonsense.html">some of my thoughts on web standards</a>. It raised some questions for me. It was a post I was reluctant to make but only because I could not reasonably say in one post how I feel and what I think about the current state of affairs. I don't want this blog to descend into a series of rants about the W3C and standards etc etc.<br /><br />I will attempt now to clarify my thoughts on where we should go from here.<br /><br />Firstly, I think we do need to make progress. We need to move things forwards. We cannot stagnate. We must find ways to innovate. However, I don't think we have even scratched the surface of what is commercially possible and viable given today's technology. The browser has proven itself to be a remarkable platform capable of producing almost any sort of UI.<br /><br />So here are some thoughts for each proposed standard:<br /><br /><ol><br /><li>HTML 5<br />I am unconvinced by large parts of the spec and I think it is far too large a specification. I want to see greater interoperability between the various browsers and as such I believe simplification would be better. I also strongly believe that the next spec should enforce an XML type syntax. Its easier to maintain and easier to find errors. I would encourage the browser vendors to simplify their parsing engines, not force them into more complicated solutions.<br /></li><br /><li>CSS 3<br />The power of CSS is in its expressive simplicity. This will not be lost within CSS 3, but do we really need much more on top of CSS 2.1? Do we need to have 4 rendering engines in wide use which are trying to implement a load of new CSS properties that will not be widely used? Are we not better off getting the current specs properly implemented with perhaps a few additions (multiple background images comes to mind) which can be progressively applied using the principles of progressive enhancement?<br /></li><br /><li>JavaScript 2<br />I do not think JavaScript should gain classes and I do not think the language should be greatly extended. Interfaces may be a useful addition, but generally I just think a little tidying is needed. Its in the DOM that work is required. Lets get the DOM objects of the various browsers to be more closely aligned with each other.<br /></li><br /></ol><br /><br />What I am generally advocating is a simplification of the specs to make them manageable for browser vendors. Lets give the browser vendors an easier task to get themselves up to scratch and then lets ask them to add new features. As always these new features should be able to be applied using the principles of progressive enhancement.<br /><br />The savior for us all could be JavaScript libraries. They transcend the browser differences hiding them conveniently. Of course that creates a level of ignorance about those issues amongst some, but they are undeniably popular and successful.<br /><br />But the world of JavaScript libraries is amazingly similar to the early world of the browser. They all do basically the same things but in quite different ways. Some libraries do some things well, others do other things well. Funnily enough, libraries need to converge on something of a unified API. Just like the browsers.<br /><br />So for the foreseeable future, the web developer will continue to bridge the gap with ingenuity, cunning, blood, sweat and tears. Its OK for me, but will it still be OK in 10 years time? Will we still be in the same situation in 10 years time? Sadly, I think yes. Does this dull my passion for my job? Absolutely not! I enjoy dealing with these vagaries and having to think on my feet every day!<br /><br />Surely though, we can sort this out, one way or another...Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8421903615286376978.post-49454716736992061682008-10-31T15:47:00.008+00:002008-10-31T17:04:23.448+00:00Standard nonsenseMy thoughts on web standards change on an almost weekly basis. I now consider myself a sceptical evangelist! I believe in web standards as an end but I do not agree with the means by which we seem to be getting there. I think we should be using web standards, but I live and work in the real world where web standards remain nothing more than a laudable goal and an occasional convenient excuse.<br /><br />Currently, we have HTML 5 and CSS 3 and JavaScript 2 as the shining examples of where we are heading with web standards. I am aware that JavaScript 2 is no more (the end of a great folly in my opinion), however, these three serve to demonstrate my point.<br /><br />The vast majority of users on the web, and surely its the users who are most important - not us developers, are using Internet Explorer as their primary web browser. IE is a fine product for browsing the web today and I suspect it fulfills the needs of those users in the vast majority of cases. <br /><br />A good proportion of users are using Firefox with many using Firefox 3. This too is a fine browser. As is Safari which dominates the remaining small proportion of users.<br /><br />At this point, others may launch into a diatribe about how users should switch browsers. Some may wish to analyse the statistics on a deeper level. But I wish to just re-iterate that for users, their current browser works fine! Why are we - the developers - getting so upset about users not changing their browser?<br /><br />HTML 5, CSS 3 and JavaScript 2 are (or were) all meant to be innovations and additions to the interface developers toolkit, allowing us to do exciting new and innovative things. Creating new types of web pages, allowing the user to interact in new and exciting ways. Hmm. Writing that makes me think of AJAX. AJAX was meant to be an innovation and an addition to the interface developers toolkit allowing us to do exciting new and innovative things. AJAX was meant to allow us to create new types of web pages, allowing the user to interact in new and exciting ways.<br /><br />Why did it work with AJAX? Its because support was already in the users browser. When AJAX started to become popular, there were some older browsers in use almost as much as Firefox 2 is in use today. Well, those older browsers disappeared as users could not access the websites that used advanced AJAX techniques. The other very helpful factor for AJAX was that computers became very cheap and very powerful and so users were upgrading more easily and more frequently. Most users only change browser when they change computer.<br /><br />I believe there are the following 3 main reasons that HTML 5 and CSS 3 are not in common use today and will not be for at least 5 years from now:<br /><ol><br /><li>The W3C<br />A large slow moving organisation that seemingly cannot decide in which direction to lumber. There has been some progress over the last year, but they have absolutely set the pace. The gap between HTML 4 and HTML 5 being proper standards will be mirrored by the gap between users using browsers which implement those standards.<br /></li><br /><li>The browser vendors<br />More slow moving organisations. The era of co-operation never began and never will be. There seems to be more effort being made to improve the performance of existing browser features rather than in implementing anything new. This in itself is a positive, but it does not really move the game forwards. This is the vendors playing catch-up so the websites we already build can run in a more reasonable fashion.<br /><br />There appears to be so little real competition in this market that vendor specific features are becoming acceptable again within the web development community. As developers we just want something shiny and new to play with!<br /></li><br /><li>The Users<br />The only group that should really matter. Users have not been given any real incentive to change browsers or to support those vendors attempting to implement and push forwards new standards. Users will only shift their position on this in response to catastrophic security issues or a family member who knows better and has a convincing voice.<br /><br />Users still use older browsers such as IE 6 and Firefox 2 because there is nothing that the newer browsers offer which is compelling enough to make the change. Users are not technically savvy and nor should they have to be. Users only demand reliability, usable performance and security - even IE 6 can provide that.<br /></li></ol><br />Ultimately, there is no business case for building a website implementing new standards. Indeed, the opposite is true - it is better for businesses to ensure their websites work on the widest cross-section of browsers out there which means implementing old standards.<br /><br />So is this all a cause for depression? Absolutely not. Do we need new standards? Not really! Wow, that was a controversial statement. I would like new and more appropriate standards, I would like those standards to be adhered to so I don't have to deal with cross browser issues. But, I am still doing really exciting and innovative work, I still find new bugs and issues with the browsers and I am yet to see a design or specification for a website which I could not build with today's existing technologies.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8421903615286376978.post-41729062052934908742008-10-30T16:15:00.004+00:002008-10-30T16:30:44.465+00:00The QuietIts been pretty quiet on this blog for the last 6 weeks or so. I have been very busy working on an interesting, fairly complex and fairly large JavaScript application during the day and then recovering from it at night! I also had the pleasure of a lovely week away in this period of quiet.<br /><br />I have also recently got my hands on a rather sexy new phone - an HTC Touch Diamond - and have spent a lot of time playing with that. Its a Windows Mobile PocketPC and its been an interesting experience, particularly Opera 9.5 Mobile which is the default browser.<br /><br />Browsing on a handheld device has been a new experience for me. My phone comes with Pocket IE installed as well, but that is rather archaic. I have done all I can to avoid using it.<br /><br />Opera Mobile however is a fantastic browser. Its fairly fast, pretty standards compliant and renders most pages rather well. It has also given me a useful insight into a different type of user agent for browsing the web. Its quite a different experience and its easy to see which sites are well designed and which are not.<br /><br />I have taken away a couple of important lessons from my experience. Firstly, clear interface design is very important on this type of device. The browser can zoom into pages but when a page loads, it is zoomed out and most text cannot be read clearly at all. However, a site with good design is very usable as I can zoom in on just the right area. Clearly defined navigation really helps with browsing on a mobile device.<br /><br />The second lesson I have learnt is that the easiest sites to use employ a liquid or semi-liquid layout. My phone has a resolution of 480x640 and if a site can flow its content to fit into either of those widths, that helps greatly. If I were designing a website today, I would definitely ensure it works in a browser width of 640 pixels!<br /><br />The final lesson I have taken with me thus far is that the size of elements on screen really matters. I use my finger to navigate a website and having links tightly packed together with a small font size makes life very difficult. Having small form fields or form fields with a small font size and another link right next to or just underneath the form field can make it difficult to select the element I want to interact with. Finally, having heavily styled buttons, especially image buttons makes submitting a form harder than it needs to be, particularly if pressing enter on the keyboard does not work.<br /><br />For me, the most noteworthy new aspect of interface development that I will carry with me is the importance of keyboard interaction with a form - never ever stop a form being submitted with the enter key!<br /><br />There is much more to say about this phone and browsing the web using Opera, but at least for now, the quiet is no more!Unknownnoreply@blogger.com0