I generally consider myself a back-end guy, preferring to program in languages like PHP to generate dynamic web pages. The front end and the user experience is still important, but that is the area that I, admittedly, give the least thought. I do make every effort on the server side to ensure usability and accessibility of my pages, but that’s generally where I stop. I’ve never been a fan of using JavaScript simply because a) you can never be sure that it will work in the user’s browser, b) every browser does it differently, and c) having JavaScript “widgets” on a page in a non-JavaScript browser generally means that there are things on the page that are not accessible–a big no no in my book.
My thoughts, however, are starting to change. Several months ago I discovered the YAHOO! User Interface library (or YUI for short), the same JavaScript library that adds all the dynamic eye candy you find on YAHOO! owned sites like Flickr and Upcoming.org. Like so many others probably have, I downloaded a copy of the YUI library, extracted the files, and played with the examples. Then, of course, I stopped and moved on to other things.
Last week I had a sudden renewed interest in the YUI. I downloaded a new copy and started playing with the examples again. This time I actually started looking at the code and the docs and started doing stuff with it. In my experimentation I discovered that the YAHOO.util.Event object is a really powerful piece of code, giving developers consistent event handling across browser platforms. In addition its onAvailable() and onContentReady() methods allow you to register event handlers that will fire as soon as an element is detected in the DOM, but before the page loads. This gives you the ability to add content to a page dynamically AFTER the page has left the server, but before the page’s onload event fires, making it possible to add JavaScript-required features to a page once you’ve determined that the browser supports them. Non-JS users will just get the page as is from the server–they’ll miss out on the “bells and whistles,” but they won’t lose any accessibility either (assuming the page coming from the server is accessible, of course).
So far I have created one custom widget: a popup date picker object based on YUI’s calendar component. It exists in a custom namespace (IB.datepicker) so that it can be dropped in to most any page without worry of naming conflicts. All you need to do is call its initialize() method to set it up on the page and attach() it to as many text input objects as you’d like. I plan to release it (under BSD license) once I do some more testing, but if anyone is interested in beta testing it, just leave me a comment and I’ll hook you up.