ALA and JavaScript - five months later

In November 2003 I mercilessly attacked A List Apart for publishing "JavaScript Image Replacement", which was in my opinion a pretty bad script. ALA reacted by adding J. David Eisenberg to its editorial board as technical advisor on JavaScript matters.

Pretty soon after I published my earlier article I decided to do an evaluation later on, to see if my comments were heeded. Last week I received two mails from readers who asked me to rate Caio Chassot's Popup article, so the time for the evaluation had definitely come.

In total ALA has published 24 articles between "JavaScript Image Replacement" (21 November 2003) and the writing of this evaluation (18 April 2004). Of these 24 articles 6, one quarter, have JavaScript as their subject.

Has JavaScript article quality improved? Overall, Yes. Of the six discussed articles, only one is so bad that I feel it shouldn't have been published. One is excellent, three others good, and one is problematical though not outright bad.

Every single article gets the maximum score for Accessibility, which is heartening. On the other hand, only two articles get the maximum score for Browser compatibility, and two articles don't bother with Object detection at all. Originality also remains a problem; I hope that future authors will present new effects instead of rehashing the same old functionality.

Criteria

I judge every article on eight points:

Originality:
In the second half of 2003, web logs were jammed to overflowing with links to moderate or outright bad CSS examples which mindlessly repeated everything earlier CSS examples had done. When I saw the 1,754th example of how the :hover selector could be used for dropdowns or tab-like structures, I gave up in exasperation. Fortunately bloggers stopped publishing such nonsense examples pretty soon afterwards.
I wish to avoid such a boring repetition in JavaScript.
A script should be original. There are countless ways in which JavaScript can enhance a page, and JavaScript authors should look for new ones, and not rehash the same old functionalities over and over again. Chances are that an author who can only copy functionality invented by others isn't such a good JavaScripter, either.
On the other hand, if an author uses an old idea but his script is far superior to any other, his Originality score goes up again.

Theory:
Does the author explain the theory behind his script? Why is this effect useful? How does it relate to the XHTML structure layer and the CSS presentation layer?

Overall script quality (double score):
The purpose of a JavaScript article is presenting a well-written script. Therefore this criterium is worth a double score.

Object detection:
How does the author make sure that browsers that can't handle the script don't try to execute it?

Accessibility:
If the script doesn't work, does the page remain accessible?

Separating behavior and structure:
Does the author properly separate behavior and structure?

Browser compatibility:
Does the script work in all browsers? If not, does the author specify why not?

Explanation:
Does the author explain the script line by line? This is a very important feature in any JavaScript article. Not all readers will understand all the ins and outs of the W3C DOM, so a bit of explanation is always welcome. Besides, a script is seldom applied in the exact situation the author envisioned while writing the article. Therefore even beginning scripters should be able to identify the line of script they should tweak, which is very difficult without a proper explanation.

Score

I award a score of Excellent (3 points), Good (2 points), Mediocre (1 point) or Bad (0 points) for each of these criteria.

There are eight criteria, and the "Overall script quality" scores double. Therefore an article can score a maximum of 27 points.

My final scores are:

  1. 26 points: Exploring Footers, by Bobby van der Sluis
  2. 23 points: The Table Ruler, by Christian Heilmann
  3. 19 points: JavaScript Image Gallery, by Jeremy Keith
    19 points: Let Them Eat Cake, by Aaron Gustafson
  4. 14 points: Accessible Pop-up Links, by Caio Chassot
  5. 9 points: Zebra Tables, by David F. Miller

Let's review the articles in detail, in order of appearance.

JavaScript Image Gallery, by Jeremy Keith (19 points)

The idea is not new, but, contrary to any other script, Keith's is accessible. In fact, this article is an almost perfect example of how simple, accessible scripting should work. Unfortunately Keith doesn't treat theory at all.

Read article.

Originality: Good (2 points)

The idea is not new, see for instance this dynamic drive script, but Keith's script is clearly superior.

Theory: Mediocre (1 point)

From a theoretical perspective Keith's article and script are nearly perfect. Unfortunately he hardly explains what he's doing and why. He doesn't even say "The image gallery remains perfectly accessible", even though that's one of the most important advantages of his script.

Overall script quality: Excellent (6 points)

This is a simple, efficient script.

Object detection: Mediocre (1 point)

Keith's object detection is not quite on the mark. He is satisfied with a simple

if (document.getElementById)

This is not enough for a full W3C DOM check. Opera 6, for instance, supports this method but not the W3C DOM as a whole. Therefore this object detection would fail to exclude it.

Accessibility: Excellent (3 points)

Keith uses links that lead to the desired image, and then uses JavaScript to cancel normal link behavior. This is an excellent example of progressive enhancement. Try to use a nifty script, but fall back on traditional hyperlinks if it doesn't work.

Separating behavior and structure: Bad (0 points)

Keith doesn't separate behavior and structure at all:

<li><a onclick="return showPic(this)" href="images/bananas.jpg"
	title="A bunch of bananas on a table">some bananas</a></li>
Browser compatibility: Excellent (3 points)

The script works in all modern browsers. Keith even says so, but curiously omits Opera, which supports the script perfectly.

Explanation: Excellent (3 points)

The script is explained line by line.

Exploring Footers, by Bobby van der Sluis (26 points)

This is the best article overall. It addresses an important problem and Van der Sluis explains everything he needs to explain, both theory and practice, though the subject is anything but simple.

Read article.

Originality: Excellent (3 points)

Van der Sluis's script adresses an important failing of CSS: lack of vertical positioning.

Theory: Excellent (3 points)

This article has an excellent theoretical treatment. Van der Sluis exactly explains the problem, the solution, and possible problems. I especially like his bit about the non-standardization of viewport properties, since he sees the same problems as I do. In fact, I suspect him of having read my page.

Overall script quality: Excellent (6 points)

The script does what it needs to do without fuss.

Object detection: Excellent (3 points)

Perfect object detection when he works with complicated viewport properties.

Accessibility: Excellent (3 points)

Van der Sluis carefully notes what happens when the script doesn't work.

Separating behavior and structure: Excellent (3 points)

Excellent. The only remark I have is that this

window.onload = setFooter;
window.onresize = setFooter;

would work, too.

Browser compatibility: Good (2 points)

The script doesn't fire in Explorer Mac onresize. More importantly, Van der Sluis doesn't mention this fact.

Explanation: Excellent (3 points)

Van der Sluis carefully dissects his main function, and for his function to calculate the window height he refers to a site that does.

Zebra Tables, by David F. Miller (9 points)

This is the only article that I feel shouldn't have been published on ALA. The script is just too badly written.

Read article.

Originality: Good (2 points)

One doesn't expect this idea to be new, but to my surprise I found only one script that does the same. This article is therefore more original than I thought, though I must admit the basic concept doesn't excite me.

Theory: Excellent (3 points)

Miller clearly explains what he's going to do and why.

Overall script quality: Bad (0 points)

Unfortunately the script iself is not very well written. It doesn't contain any object detection and gives avoidable error messages in Explorer 5 Windows.

Worse, the actual workhorse of the script is badly thought out. Miller uses a simple and efficient bit of CSS for styling alternate rows, but he fails to hook his script to these existing style declarations.

Instead, he directly assigns styles to the tds and determines the colour codes in JavaScript. Now both the script and the style sheet contain a few style definitions, and the row styles cannot be maintained from one central point.

In my opinion he should have assigned classes to the trs instead, and used pure CSS to determine how these trs are presented. I suppose he wanted to keep open the option of using other classes on the trs, but he could easily have used multiple classes.

Object detection: Bad (0 points)

Miller doesn't pay any attention to object detection, with the predictable result that old browsers give error messages.

Accessibility: Excellent (3 points)

No accessibility issues. Obviously, without JavaScript the table won't be striped, but that's no disaster.

Separating behavior and structure: Bad (0 points)

Miller doesn't explain at all how to call his script. The test page uses an inline event handler.

Browser compatibility: Bad (0 points)

This script causes error messages in Explorer 5 on Windows. Worse, Miller's error is an avoidable one, meaning he hasn't done his homework.

This method doesn't work in Explorer 5 Windows

if (obj.getAttributeNode("class") != null) {

However, this line

if (!obj.className) {

works perfectly in all browsers. There is absolutely no reason for messing around with attribute nodes when a basic check will do.

Explanation: Mediocre (1 point)

Miller doesn't give a single line of JavaScript code in his article, but instead links to a .js file which is annotated with comments. Although the comments themselves aren't bad, the article explains the script far too little.

Accessible Pop-up Links, by Caio Chassot (14 points)

This article is hard to rate. The theoretical treatment is superior, but this subject has already been excellently explained. Because Chassot tries to plug into a library he has written the actual script becomes confusing for newbies. The article doesn't contain readily copy-pastable code examples.

In general the theoretical part of this article is well worth a read, but you shouldn't use Chassot's scripts.

Read article.

Originality: Mediocre (1 point)

The subject of this article is not really new. In fact, Jeff Howden's age-old Links & JavaScript Living Together in Harmony has treated this subject exhaustively.

Theory: Excellent (3 points)

Chassot decisively treats all relevant theory.

Overall script quality: Mediocre (2 points)

Chassot's general advice is excellent, and he knows exactly what he's talking about, but you shouldn't actually use his scripts because they're too complicated.

A script along the lines he sets out can be written in, say, 10 lines, but Chassot doesn't do so. Instead, he uses a JavaScript library. It isn't large, it doesn't create tons of objects, but it contains oddities like

function getBody() {
	return document.getElementsByTagName('body')[0];
}

where a simple document.body will do. It complicates things for the sake of making them complicated.

Worse, the library doesn't work in Explorer Mac, a fact that the article doesn't mention.

Object detection: Bad (0 points)

I studied Chassot's library but didn't find any object detection.

Accessibility: Excellent (3 points)

Chassot treats the accessibility issues surrounding popups in an exemplary way. As long as you follow his general advice, but not his scripts, you shouldn't encounter any problems.

Separating behavior and structure: Excellent (3 points)

Chassot mightily surprised me with his "Separate logic and presentation" heading. I had just submitted my Separating behavior and structure column, and I was very interested in another author advocating the same idea. Unfortunately Chassot doesn't quite get it right: I can accept "logic" for "behavior", but not "presentation" for "structure".

Chassot offers a solution for the separation, but it isn't very good. He relies on ids to indicate popups, but that would quickly lead to maintenance problems if one page uses a lot of popups.

Browser compatibility: Good (2 points)

Chassot's library doesn't work in Explorer on Mac, because this browser supports neither addEventListener() nor attachEvent(). The article doesn't mention this fact.

Explanation: Bad (0 points)

This is by far the weakest point of the article. You can't just cut and paste the code examples because they need a library, there is no example script that you can study the source of, and Chassot constantly refers back to his library, which makes it nearly impossible for the novice scripter to follow what's going on.

The Table Ruler, by Christian Heilmann (23 points)

A good article overall. Could have used some more theory.

Read article.

Originality: Good (2 points)

This useful effect is not exactly a novel thought. It has been described many times. Nonetheless Heilmann's script is clearly superior to any other I found.

Theory: Good (2 points)

This script hardly needs an elaborate theoretical background, but nonetheless I feel Heilmann could have at least mentioned that setting event handlers through a script instead of manually and using CSS to define the exact style change is generally desirable.

Overall script quality: Excellent (6 points)

Simple script that moves straight towards its goal.

The only minor oddity is this check:

if(trs[j].parentNode.nodeName=='TBODY'
      && trs[j].parentNode.nodeName!='TFOOT')

If the parentNode.nodeName is TBODY, it never is TFOOT by definition, so the second check is useless (though not dangerous).

Object detection: Excellent (3 points)

Simple, sensible W3C DOM detection.

Accessibility: Excellent (3 points)

No effect without the script, but so what? It's only a nice extra.

Separating behavior and structure: Good (2 points)

Heilmann doesn't give instructions for calling his script. Nonetheless he implicitly refuses to use inline event handlers, which counts for something.

Browser compatibility: Good (2 points)

Odd behavior in Opera 7.50 . Heilmann doesn't mention this problem.

Explanation: Excellent (3 points)

Simple, efficient explanation.

Let Them Eat Cake, by Aaron Gustafson (19 points)

Also a difficult article. The theoretical treatment is excellent. The script doesn't actually fail any check, but the problem is that a far better script has been published recently. That makes Gustafson's article something of an unnecessary repetition.

Read article.

Originality: Bad (0 points)

The problem with this article is that Simon Willison has written a far better one on the same subject quite recently.

Theory: Excellent (3 points)

Gustafson's opening paragraphs warm my heart: he has clearly read my Accessibility and usability column. The remainder of the article shows that he knows what he's talking about.

Overall script quality: Mediocre (2 points)

Though the script works, there are just too many tiny things wrong with it. Gustafson has serious trouble connecting the script to the XHTML structure. Instead of reading out the divs to be closed from the links, he builds a very complicated and non-portable function that closes all divs except for specifically named ones.

Worse, when he changes the links that should open a new div, he doesn't assign a light and useful onclick event handler, but instead does

var index = href.indexOf("#") + 1;
href = "javascript:show('" + href.substring(index) + "');";
a.setAttribute("href",href);

This combines unnecessary use of the setAttribute() method, one of my pet peeves, with a hitherto unknown vice (which, as far as I'm concerned, should have remained unused until the end of time): setting a href to a javascript: protocol value!

Finally, his function for showing divs is efficient, but if he wants to close any previously opened divs, he again loops through all divs on the page, instead of storing the id of the div to be closed in a handy variable.

Object detection: Excellent (3 points)

A bit ponderous, but perfectly workable.

if (!document.getElementsByTagName) {
	return null;
}
Accessibility: Excellent (3 points)

Gustafson's explicitly states that he wants to make a page more usable without sacrificing accessibility. He succeeds perfectly.

Separating behavior and structure: Excellent (3 points)

Gustafson keeps the behavior well apart from the structure.

Browser compatibility: Excellent (3 points)

Works in all modern browsers.

Explanation: Good (2 points)

Although Gustafson clearly explains what he's doing and why, at the end of the article he suddenly adds functionality to his scripts, and repeats all of them. This could be quite confusing to newbies. Besides, why not put the functionality in the first version of the script?