• Reported by Alessandro

I was thinking about how javascript has evolved in recent times. The subject is really wide, so consider this post as a links-article: instead of repeating or summarizing what others have said, I'll use links as if they were concepts trying to maintain a logical thread. So, at least for the first reading, I'll suggest you to not jump on links, since most of them have a title.

In this article I'm sharing some of my reflections; I ask you to not consider them an absolute truth, but rather, my personal and modest point of view supported by some must-read articles and recent ground-breaking techniques. I hope that this will be both a resource to modern coding and an inspiration for further thinking.

It was said in the beginning of the year that 2005 is the year of DOM, and I fully agree. Those not in favor of javascript should realize that it's not the devil's plaything and that there's an easy way to write modern and accessible javascript.

I won't talk about Ajax: while it could certainly be revolutionary technology in web development, I'm referring to how some recent and interesting techniques are changing the way we do web design. Let's take a big step back four or five years ago, when CSS layout was spreading around. The times when the first CSS layouts came out on bluerobot, glish and box lessons. Since then, we have learned that we should provide proper structure for the meaning of our content, we shouldn't use tables for layout, but CSS for presentation, and finally we should separate content and structure from presentation.

Then javascript, and DOM in particular, was invited to the party we call now web standards. To javascript was given another layer of abstraction: the behaviour layer. While now we have concrete ways to use proper structure and presentation and to keep them well separated, but we're still just discovering the real possibilities of javascript.

Content, structure and presentation are now precisely defined, but I believe that the behaviour layer is too tight for javascript, javascript is not only about events, and separation is not good for the evolution of javascript. Modern javascript is in fact breaking the layer-model we thought was correct. I believe it's perfectly logical to have presentational javascript which can go throughout structure and presentation.

So, instead of asking ourselves how to keep javascript seperate from content, structure or presentation, we should realize that a separate-layers model is perhaps not adequate when dealing with javascript.

Apart from adding behaviour, Javascript in fact can change content, manipulate content, embed content, bring interaction to content, add visual emphasis to content, provide content to improve presentation, change presentation, enhance presentation, provide both extra structure and presentation, and even transform structure. Javascript surely can improve usability and perhaps improve accessibility.

Still convinced that javascript is only for behaviour? Most of the scripts, articles and techniques I've just linked were written in the last year.

So, what's next? Instead of asking what we can do perhaps we should try to define what javascript is and isn't, the possibilities are growing faster and are almost endless.

In my opinion, javascript should always be considered as an enhancement. It should not be thought of as a layer anymore, and the only separation needed is between markup and javascript. No more embedded event handler or functional links, please. The ideal place for javascript is in the head section.

Modern javascript should be made up mostly of DOM, and browser detection should be avoided save execeptional cases.

We should never provide core content or structure with javascript, while we can improve upon them. Javascript with the aid of DOM is an excellent medium to add non-semantical or presentational elements. Javascript with CSS is also, in my opinion, a very powerful mixture.

Javascript surely can enhance usability, but in my opinion, since it's an extra, in the end, it should not pretend to improve accessibility. Besides, Javascript (and also CSS) should leave accessibility of content and structure intact.

Our pages with Javascript should remain accessible to old browsers, users with Javascript turned off, and alternative browsers such as screen readers.

Finally, I'm beginning to think that in the end the most critical and dangerous use of javascript is for behaviour. Beware of this when, for instance, a badly coded dropdown would prevent some user to navigate your website (with no alternate navigation).

Well, after so many links, concepts and techniques perhaps your head is spinning. Just take your time to read and think. Here's the linkography:

Markup, CSS, separation and Web Standards

A small note: perhaps the CSS layout links are quite outdated, but I think that they contributed for the most part to the way we develop now, and I cited them for historical reasons.

• Semantics, HTML, XHTML, and Structure by Shirley Kaser
• CSS Layout Techniques: for Fun and Profit on glish.com
• Box Lessons by Owen Briggs
• The Layout Reservoir on bluerobot.com
• Practical CSS Layout Tips, Tricks, & Techniques by Mark Newhouse
• Why tables for layout is stupid by Bill Merikallio and Adam Pratt
• Separation: The Web Designer s Dilemma by Michael Cohen
• Developing with Web Standards by Roger Johannson

Javascript articles and tutorials

• 2005: the year of DOM by Simon Willison
• Javascript is not the devil's plaything by Cameron Adams
• Ten good practices for writing JavaScript in 2005 by Bobby van der Sluis
• Creating Accessible Javascript on WebAim.org
• Ajax: A New Approach to Web Applications by Jesse James Garrett
• Introduction to the Document Object Model by Mike Hall
• The Behavior Layer by Peter-Paul Koch
• The DOM Event Model by Mike Hall
• Presentational Javascript by Bobby Van Ders Luis
• Unobtrusive Javascript by Christian Heillman
• Simple tricks for more usable forms by Simon Willison

Javascript techniques

• DOM Image Replacement by Peter-Paul Koch
• Direct Manipulation Using JavaScript and CSS by Tim Taylor
• Proper Flash embedding: FlashObject Best Practices by Geoff Stearns
• S5: A Simple Standards-Based Slide Show System by Eric Meyer
• Yellow Fade Technique by Nick Chapman
• sIFR 2.0: Rich Accessible Typography for the Masses by Mike Davidson & Co.
• Invasion of the Body Switchers by Malarkey and BrotherCake
• ARC - Adam s Radio/Checkbox customisation by Adam Burmister
• Nifty Corners by Alessandro Fulciniti
• TILT: Table Injection for Layout Technique by Dimitri Glazkov
• JavaScript-enhanced image replacement by Richard Rutter