Smashing Magazine is probably the most popular web design blog of 2008, it has over 100,000 subscribers and publishes about 6/7 posts per week. I’m sure many web designers and developers think of it as the ‘goto’ resource for tips, tricks and advice but unfortunately it’s probably only a small handful of these people who are able to separate the good content from the not-so-good content. By "not-so-good" I either mean outdated or simple incorrect.
The purpose of this post is not only to weed out some of the not-so-good content but also to offer more modern solutions.
I want to have this post finished before lunch so I’ll only be covering a couple of the JavaScript follies of which there are quite a few:
POST: "jQuery and JavaScript Coding: Examples and Best Practices"
"This post was quite a good one actually, it covered many important features of the jQuery JavaScript library and touched on a few basic but essential good practices such as unobtrusive coding, degradability and accessibility." – this would’ve been my review if I was at least a tiny bit satisfied!
Rule #1 under the "Unobtrusive DOM scripting" section of this post dictates that you should separate JavaScript functionality. This is the central theme of unobtrusive coding – to make sure the content (HTML), the CSS (presentation) and the JavaScript (behaviour) are all separated and that the only line of dependency is backwards. By this I mean that the content should not depend on JavaScript and neither should the presentation but the JavaScript can depend on the content and the presentation. This SM article illustrated this practice with a code snippet:
BAD: <a onclick="doSomething()" href="#">Click!</a> GOOD: <a href="backuplink.html" class="doSomething">Click!</a>
The ‘good’ alternative may seem suitably unobtrusive at first but the chosen class name is definitely not! All elements should be named according to their content/meaning – giving an element a class of ‘doSomething’ is just as bad as giving it a class of ‘Button2pxBorderWhite’. HTML content should reside quite suitably on it’s own – when you add your JavaScript enhancements, ideally, you shouldn’t have to touch the HTML, even to add ‘hooks’. Fortunately the DOM API and the various JavaScript libraries available make DOM traversal incredibly simple, so adding ‘hooks’ (IDs/classes etc.) just for the benefit of the behavioural layer is not necessary and is somewhat obtrusive.
