In a case demonstrating that you can’t be sure your Ajax/DHTML website will truly be cross-browser just by including one of the toolkits that are known themselves to be fully so. From my own experience, even if you use Prototype, you’re likely to pick up a few odd JavaScripts along the way to include in your site. Or, you might take a stab at writing a function out of the blue. Either of the latter two steps can get you in trouble if you’re not careful.

Today’s case is an Ajax/DHTML “tutorial” which has been advertised on a couple of websites that a lot of folks in the Ajax community rely on for good tips and pointers. Unfortunately, the only thing the script is a good example of is cross-browser carelessness, or perhaps simply cross-browser “couldn’t care less”-ness on the part of the developer.

In mid-April, Max Kiesler blogged about a Wordpress “shelf” script that he described as a “nice tutorial on how to build a sliding shelf in Wordpress,” with a pointer to the website. Naturally, since I’m a WordPress guy myself, I thought this could be useful! Much to my amazement and dismay, on arriving at the suggested site I realized that this “shelf” is totally out of order for WebKit-based browsers (the most prominent of which is Safari for Mac OS X). I blogged a brief complaint and noted that a reader had already left a comment with the Asymptomatic.com owner letting him know it wasn’t working in Safari. I’m pretty sure I also wrote a note to Max Kiesler, but it was through his online form, and I never heard back about it.

Click on the screenshot thumbnails if you want to see how the “sliding shelves” look in Safari and WebKit.

Kiesler subsequently included this guy’s tutorial twice in his continuing roundup of Ajax Tutorials, the concept of which is great, but the execution of which needs a little more editorial oversight to ensure that only Ajax representing industry best practices are promoted. From the feedback I’ve received to my own article grading 50 or so Ajax/DHTML toolkits on their adherence to a cross-browser, standards-based approach, I’m pretty sure most developers believe we should be writing standards-based code these days.

The terrific Ajax-themed website Ajaxian.com promptly picked up both of Kiesler’s “tutorials lists” that had pointers to the Symptomatic’s problematic WordPress script, so I’m sure with the popularity of WordPress, that script has been passed around far and wide by now.

In the meantime (about a month), has the script’s author attempted to fix the problem? Unfortunately, no. I tried again today, and just as before, the sliding “windows” are simply static content in Safari. They’re weirdly nonfunctional in the latest WebKit nightly build as well.

Looking at his code, I see he’s using Prototype, along with moo.fx, which he talks about at length in the tutorial. Both of these are A-graded JavaScript toolkit, and I use Prototype myself… a lot. But Prototype alone won’t save you, my friend. Not when you also include a half-dozen third-party scripts and a dollop of homemade code that isn’t anywhere near Prototype. I can only assume that those other scripts are what’s making these “shelves” stick so.

You know, Tim Berners-Lee blogged recently in support of a standards-based Web. Quite eloquently, I thought. When I wrote in an earlier article that the web was built by folks who believed in open communications and complete interoperability between different OS’s and browser platforms, I didn’t have a good quote to back me up. Now I do. From the guy who actually wrote the World Wide Web software–on a NeXT machine (from which Mac OS X is descended, by the way)–here are some thoughts I hope we can all try to live by as Web 2.0 matures:

When, seventeen years ago, I designed the Web, I did not have to ask anyone’s permission… The new application rolled out over the existing Internet without modifying it. I tried then, and many people still work very hard still, to make the Web technology, in turn, a universal, neutral, platform. It must not discriminate against particular hardware, software, underlying network, language, culture, disability, or against particular types of data…

It is of the utmost importance that, if I connect to the Internet, and you connect to the Internet, that we can then run any Internet application we want, without discrimination as to who we are or what we are doing… The Internet is increasingly becoming the dominant medium binding us. The neutral communications medium is essential to our society. It is the basis of a fair competitive market economy. It is the basis of democracy, by which a community should decide what to do. It is the basis of science, by which humankind should decide what is true.

Let us protect the neutrality of the net.

Those of you who are devoted to promoting best practices for Ajax and Dynamic HTML (DOM Scripting, nowadays), please keep this in mind, and try to make sure the scripts you are offering for others to emulate are truly worth of that trust. Unfortunately, as cool as WordPress Shelves look in IE, Opera, and Firefox, they leave a large majority of the Mac OS X user community out in the cold. And for no good reason.

The script’s author points as his inspiration to another example of sliding shelves, from Shaun Inman. Those work beautifully in all browsers, but it looks to me like he’s using MovableType instead of WordPress. Otherwise, perhaps Shaun would be willing to prepare a WordPress plugin for sliding shelves. Failing that, whoever is promoting scripts like this needs to take the time to make sure they work. Otherwise, bad scripts like this become a building block to a really bad, balkanized Web 2.0.

And I don’t think anybody involved in this exciting technology wants that.