Web Info & Tutorials

History repeats itself, first as tragedy, second as farce. — Karl Marx

I can remember the day, back in 1994, when I abandoned the Mac for Windows. It was a gloomy, overcast day when I made that bittersweet decision — I was a Mac and Unix nerd all through college — but after my twelfth or thirteenth crash of the day, I had had enough. Photoshop, Netscape, Secure Shell and Word were just not meant to run more than one at a time on Mac OS 7. Had I stayed with Apple through that rough patch I’m sure I would have been slimmer, sexier and happier, but NT 3.51 only crashed twice a day, so my hand was forced. I ran out and bought a PC that very day.

Now I fear history may be repeating itself. Yesterday, I had Firefox 2 for linux crash 5 times, and IE7 for XP crash 7 times. The cause? Too many fat Ajax applications. Zimbra, the whole Google bestiary of applications, Yahoo Mail, etc.. These are all long running applications that I keep open for most of the day. Then all of a sudden the Browser is gone and I have to relaunch and login all over again.

I’m not alone in this. Colleagues and friends report similar problems with Safari/Mac, IE7/Vista, Firefox/Mac. I’ve even checked with a friend that runs the helpdesk for a large firm: reported problems with browsers are up. The only one who seems blissfully unaffected is the lone Opera nerd in my office. He just keeps chugging along with what seem like 200 open tabs.

The cause should be evident to everyone. We’ve taken what was first called LiveScript — a crufty embedding just good enough to validate a form or two — and we’ve abused it into being the foundation for a whole new kind of application platform. The browsers have just not kept up and the situation will only get worse with the accelerated proliferation of Web 2.0 apps.

Help is on the way, in the form of bytecode interpreters and vm’s for Safari and Mozilla, though the future of IE is still cloudy (still, there is a plan to bring Tamarin to IE). But if the new Browser version don’t arrive quickly enough, or if they don’t fully solve the problem of browsers crashing once an hour, then a mass migration to Opera may be the best we can hope for. At worst, content and application producers will opt for more stable non-Ajax alternatives such as Flash or Silverlight.

Ajax and the browsers it depends on are running out of time. If the notion spreads that it isn’t reliable, it will be as dead as the Java Applet, never to be heard from again.

From what I’ve seen, it appears that many developers, especially those new to the JS space are somewhat confused by the reasons for developing JS in an unobtrusive fashion. Typical arguments that I’ve heard are:

• It takes too long to develop
• If they don’t have JavasScript, then they’re out of luck
• We shouldn’t have to code for the 5% that don’t want to use an up-to-date browser

I’m sure many of you have heard similar comments and had many debates over the semantics of this topic.

Which leads me to a new blog post that tackles unobtruse JS and provides excellent feedback into the subject. Christian Heilmann continues his advocacy of writing JavaScript in unobtrusive ways in his most recent blog posting, The seven rules of Unobtrusive JavaScript.

Christian’s posting not only provides the reasons why it’s important but also includes example code that drives the idea home. Right off the bat, he makes several points that really make sense:

Probably the most important feature of unobtrusive JavaScript is that you stop making assumptions:

• You don’t expect JavaScript to be available but make it a nice-to-have rather than a dependency
• You don’t expect browsers to support certain methods and have the correct properties but you test for them before you access them
• You don’t expect the correct HTML to be at your disposal, but check for it and do nothing when it is not available
• You keep your functionality independent of input device
• You expect other scripts to try to interfere with your functionality and keep the scope of your scripts as secure as possible.

I conducted a brief interview with Christian via email and here’s what he had to say:

What are the biggest challenges, in terms of unobtrusive JS, that you’re seeing in your work? Are you limited in what you can provide to
your audience?

The biggest challenges are that JavaScript is still considered a thing to bolt on or something that comes from a library/framework. Hardly anyone really plans interfaces in two states: one without scripting and one with scripting. A lot of frameworks tell implementers that they do the checking automatically for them, but in reality this is hardly ever the case. Of course you can say you limit yourself to a less interesting interface when you build it unobtrusively, but you also build interfaces that work for everyone. Just because we can totally change the way browsers interact with users with JavaScript that does not necessarily mean we should. Ajax and JavaScript enhanced interfaces should be planned out by developers and user interface designers / IA / Usability / Accessibility experts. As it is a “brave new world” thing this doesn’t happen a lot, instead we believe in truisms (this is how drag and drop works, believe us).

Has awareness grown? Do you see more developers actually understanding how to write unobtrusive JS and using it in practice?

Yes it has, the hits I get on the article and especially this new one show that. However whenever you talk about JavaScript, there are a lot of “experts” who love to bring their own agenda in. It is good though to see other people than me stating why things make sense. The thread on reddit http://programming.reddit.com/info/60gtv/comments/ is pretty cool in that way.

With so many libraries out there at the moment, it’s natural for beginners to look for some help by using them. Has this impacted, negatively or positively, the application of unobtrusive JS techniques?

Neither nor I’d say. It depends on the library. I’ve been adamant to change some of the examples that come with the YUI to be unobtrusive, and I am in contact with other library developers to do the same. Whenever I’ve covered the topic of libraries in my books I also made sure the examples show how you can do things unobtrusively. It is a bit of a shame that a lot of libraries don’t wear that idea on their sleeves though, this is something I’d love to see. The release that made me the happiest was Dan Webb’s unobtrusive plugin for Ruby on Rails: http://www.ujs4rails.com/. It is up to people to start advertising the unobtrusive use of libraries more. I am currently doing that with an article series on dev.opera.com, and every publisher I am in contact with is crying out for books about using libraries. So if you are inclined to write, this is the time.

You can read more about Christian’s views on unobtrusive JavaScript at his blog post: The seven rules of Unobtrusive JavaScript

Jan Wolter has finished the grotesque impact of testing keyboard circumstance handling crossways platforms and browses. He has a test script that you crapper separate yourself.

You intend to feature most artful variations:

If a key is held downbound daylong sufficiency it typically auto-repeats. (Note that factor keys never auto-repeat.) In every browsers, apiece auto-repeat triggers more events. In most browsers, an autorepeat is reasonably aerated as a case event, but not a key event, so it triggers a keypress but not a keydown or keyup. But, of course, there is whatever variation

And you intend the conclusion:

It’s truely awesome what an resigned hash has been prefabricated of a ultimate thing
like recognizing a key pressed on the keyboard.
You’d conceive machine profession would hit modern farther sufficiency by today to
have this every worked discover better.

The keypress events are mostly the easiest to work
with. Except for whatever fault with mark keys, it’s commonly cushy to
identify which key was pressed. You crapper intend the case written by doing:

     String.fromCharCode(event.charCode ? event.charCode : event.keyCode);

For keydown and keyup events, you
can refer most ordinary keys (letters, numbers, and a some others)
by meet hunting at the event.keyCode and more or less
pretending that it is an cipher code.
However, it isn’t really,
and the some Javascript manuals that feature it crapper be regenerate to
a case by doing “String.fromCharCode(event.keyCode)“
are wrong. On keydown and keyup events,
the key codes are not case codes,
and this transmutation module provide disorderly results for some keys.
There is no generalized takeout artefact to modify keycodes to characters.
You pretty such hit to significance the application identify and humble the key function on
that.

Because of bugs, some keys cannot be important on keydown
and keyup in Macintosh Gecko and mark keys cannot be
distinguished on keypress events in Windows Safari.

Hope for saneness exists, with DOM3, but it has not still arrived.

The Yahoo! UI team have "posted four new examples that step through some of the most important methods in the YUI Library — particularly YAHOO.lang.extend, YAHOO.lang.augmentObject, and YAHOO.lang.augmentProto. These methods are used internally in the library to manage inheritance and composition, and we think you’ll find them useful in your own code, too."

• Creating Class Hierarchies with YAHOO.lang.extend — explores the use of YAHOO.lang.extend to build traditional class-style hierarchies in JavaScript;
• Creating a Composition-Based Class Structure Using YAHOO.lang.augmentProto — as Luke puts it, "the intent of augmentProto is to aid in extracting nonessential behaviors or behaviors shared by many classes, allowing for a composition-style class architecture"; in this example, he shows you how to do that by applying the YUI Event Utility’s EventProvider functionality using augmentProto;
• Add Behavior to Objects or Static Classes with YAHOO.lang.augmentObject — augmentObject provides functionality similar to that of augmentProto, but is designed for work with static classes where you want to confine your augmentation to the target object (rather than its prototype);
• Combining Simple Data Sets with YAHOO.lang.merge — in a different category, YAHOO.lang.merge allows you to combine two objects together, outputting a third (new) object.