Gadgetopia

I’m going to kick off a new weekly series this week I’m calling “The Basics”; Here’s the idea:

Every time I need to write some JavaScript for feature X on a new site I’m building, I always just go back to the last site I remember writing feature X for, pull off the code, make some tweaks, and incorporate it into the new site. This works fine, but it takes a little work each time, and I wind up with twenty copies of feature X floating around.

Over time, I might pick up a new technique that helps me solve feature X in a better way, but I’m not going to go back over twenty different sites and figure out how to massage the improvement into each one’s code.

So, the idea behind The Basics is that, once a week, I’ll take one of these common tasks, bundle it up into a reusable script, and put it here for everyone to use. Over time, we’ll build up a handy little javascript library.

There are lots of javascript libraries to take care of most of these, but many of them either don’t work cross-platform, are poorly documented, degrade poorly, or are hard to modify. So here are the ground rules for these scripts:

• Maximize separation of behavior, presentation, and markup.
  As little javascript or extra markup as possible on the page, nothing hinky required with the HTML.
• Work across as many browsers as possible.
• Degrade gracefully.
  The page should still work and be readable if CSS, javascript, or any combination of the two is turned off or not available.
• Play well with others.
  I should be able to add all of the scripts to the same page, or to pages with other javascript, without needing to rewrite anything or deal with conflicts. Each script should handle it’s own task without making a mess.
• Minimize configuration.
  I should be able to just drop the script on the page and watch it work. Binding will be handled via CSS classes in much the same way that presentation is applied.

For the first week, I’m starting off with an easy one, but one that gets used all the time: image rollovers. We’ve been doing these since M.C. Hammer was cool and Netscape roamed the earth, but here’s the no-fuss 2006 approach.