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.
Further down in the article the author covers jQuery’s infamous "$(document).ready()" wrapper but unfortunately the author fails to outline the key benefit of this over various ‘onLoad’ techniques:
jQuery provides us with a special utility on the document object, called “ready”, allowing us to execute code ONLY after the DOM has completely finished loading. This is the key to unobtrusive DOM scripting, as it allows us to completely separate our Javascript code from our markup.
The author is saying that jQuery’s ready() wrapper lends itself to unobtrusive coding whereas the previously popular ‘onload’ solution does not. The author seems to think that the only way to attach an ‘onload’ event handler is obtrusively:
<body onload="doStuff()">Again, the author is wrong; adding an onload event handler can be equally as "unobtrusive" as any new alternative that jQuery offers:
elem.onload = function(){...}
The real benefit of using a DOM ready wrapper, such as the one included in the jQuery library, is that it waits for the DOM to be ready for manipulation instead of waiting for all images, scripts, stylesheets and frames to load like the ‘onload’ event does.
At the end of the article the author states that he/she has covered "Why jQuery is the natural choice to implement unobtrusive DOM scripting effects" – I saw no such discussion in the article and no alternatives (MooTools, YUI, Prototypejs, Dojo etc.) were even mentioned.
POST: "10 Useful Techniques To Improve Your User Interface Designs"
This article is quite a goodie but I found one tiny thing which might suggest SM doesn’t follow its own advice:
<body onLoad="document.forms.form_name.form_field.focus()">There are two reasons why you shouldn’t use the above snippet of code to focus an input element for the user.
- It’s making use of the onLoad attribute of the body element when the correct way would be to register the handler unobtrusively, you know, like how SM demonstrated in one of it’s other subpar articles.
- If you’re going to focus a user input field then don’t wait for the onLoad event to fire. A user may have already filled out the input field by the time the event fires and so will be annoyed and confused when focus suddenly goes back to the input field. If you insist on doing this then attach it to a sooner event such as ‘DOMContentLoaded’.
POST: "80+ AJAX-Solutions For Professional Coding"
What rubbish! – Only 50% of the mentioned "solutions" were even using Ajax. The rest were just basic JavaScript techniques (no XHR).
Why am I bothering with this post?
I’m sick of these high-flying blogs serving up crap content! Many novices will take these words as gospel and because of the continual innaccruacy of Smashing Magazine’s technical articles I doubt these novices will have a solid foundation.
It’s not just the JavaScript articles either. Various articles covering PHP and WordPress have also been criticized for inaccuracy.
What do I hate more than SM’s technical articles? The comments!
“I’m sick of these high-flying blogs serving up crap content! Many novices will take these words as gospel and because of the continual innaccruacy of Smashing Magazine’s technical articles I doubt these novices will have a solid foundation.”
That is sooo true.
Anyways, have subscribed to your blog to stay tuned with your posts
I have grown sick of websites which post lists of tutorials, it seems asif they look to get the greatest number of items rather than quality, and it’s often just a cop out for writing their own content. Also when developing websites and web apps I believe it you should be researching “How do I create feature X best?” rather than “Where can I use this new technology I discovered recently?” which often ends in superfluous AJAX and JavaScript effects.
I agree with your AJAX-Solutions comment. It seems that AJAX is now the moniker formerly known as DHTML (yuk!).
One of the Internet’s greatest strengths – that for most people, publishing content is very easy and unregulated, means that the accuracy of that content is sometimes questionable.
Was the spelling of inaccuracy (innaccruacy) in the final comment a bit of British irony, or an embarrassing faux pas?
That last sentence was a bit of British humour, not a dig
Farrhad, thanks for subscribing!
Ryan, yeh I totally agree! It seems the “top 10″ type posts are becoming more and more popular, even I have succumbed to it on my other blog, which, because of a lack of inspiration I’ve pretty much abandoned! The popularity of these types of posts are probably a reflection of the fast-moving nature of this industry – everyone is in a rush!
Shane, Oops! It was a bit of a faux pas, but I’ll leave it in there, I enjoy the irony!
I also think that a list is easier to write than an in-depth article. It’s simply pointers to other blog posts where the real hard work has been done.
What gets me about the “Top 10″ posts (which are more frequently “Top 50!!” and “Top 75!!!!1!”) is the information overload. I can filter through what I need/want/think-is-quality pretty well, but am annoyed when hammered with too much information at once. These could be real time-wasting traps for people. Might be fine for beginners and students, or people with dozens of other higher priority tasks they should be working on, but it’s a pain in my clock.
Regarding your first complaint about SM’s use of a function named doSomething(), I think we can give them the benefit of the doubt here. The non-descriptive name is just a generic placeholder, not a suggestion: that section of the article is about unobtrusive code, not semantics. This doesn’t invalidate your point about choosing smart function/class names, which is good for beginners and veterans alike to heed, but I think we should give SM the benefit of the doubt on this one, as out of scope and just an innocent use of generic placeholder.
Call me old fashioned but I think it lies in the nature of the medium. Most popular blogs are simply an aggregate of popular items– not necessarily /good items/.