Sorry folks, I just don't feel like blogging right now. Rest assured, I'll be back after I've refreshed myself. Enjoy the archives. -Adam

Failsafe JavaScript: Part 1

You have to destroy before you rebuild. We destroyed the way web design was done; now, we've begun to rebuild.

In Phase 1 of this process we redefined the way we approached structure and presentation by building semantically rich, standards compliant, and fully accessible websites. Now, with the popularity of second generation web applications like Gmail, Flickr, and Tada we find ourselves deep into Phase 2 — redefining the way our websites work.

Designers and developers alike are once again embracing JavaScript and the DOM as a means to improve both functionality and usability. However, before we get ahead of ourselves, we need to remember a basic principle of defensive design: “make mistakes well”.

Your JavaScript should degrade gracefully if a problem is encountered. Similarly, your accessible website should work with or without JavaScript enabled.

In this series of examples I'll discuss a few easy rules that can, in most instances, help your website make better mistakes.

Lose the Pounds, Bridge the Gap, and Clear the Void

All too often we find that the value of the href attribute in links with associated JavaScript actions is the lonely '#' — the pound. Worse, you'll occasionally find the pound supplemented with a null value, or a JavaScript void.

What does the browser do with an href of pound, null, or void? Nothing.

By using meaningless href values you make the mistake of assuming everything is going to be ok. You assume JavaScript is enabled, and you assume your script is going to execute successfully.

And well, we all know what they say about assumptions.

A Real World Exercise

This past Sunday, Neubix Studios launched The Big Noob — a beautifully designed and cleverly themed weblog about, you guessed it, themselves.

The Big Noob implements a nifty little feature that expands or collapses the main story on their home page between summary and full view.

This feature improves the readability and cleanliness of their home page. Unfortunately, if you do not have JavaScript enabled, nothing happens when you click “Continue Reading”.

For The Big Noob, this could be an easy fix…

<a href="javascript:void(0);" class="green" onclick="javascript:showLog();">
( CONTINUE READING )
</a>

…could be replaced with…

<a href="/link/to/permanent/post" class="green" onclick="javascript:showLog();">
( CONTINUE READING )
</a>

The associated JavaScript function would only need the following addition...

function showLog() {
// existing expand/collapse routine
return false;
}

By returning false within the showLog function, the browser will cancel navigation to the HREF when JavaScript is enabled.

Stepping back to Phase 1 of rebuilding the web, we could easily separate The Big Noob's behavior from their structure by replacing the “Continue Reading” link with…

<a href="/link/to/permanent/post" class="green" id="showLog">
( CONTINUE READING )
</a>

…and appending something like the following to their external JavaScript file…

window.onload = function() {
var o = document.getElementById("showLog");
if (o) o.onclick = showLog;
}

With these techniques in place, The Big Noob's non-JavaScript users would be casually directed to the existing full text version of their main story.

Next: Return True when False

Tomorrow, in Part 2 of Failsafe JavaScript, I'll explain how returning true when things are false can improve the accessibility of your application and I'll offer an example of how this technique can be applied specifically to Ajax-based websites.