jQuery UI and the UX of Demos

jQuery has announced a new user interface components package called jQuery UI. It is a pretty impressive set of widgets and components to make a rich user interface. It also consolidates alot of various plugins for a consistent development effort. I think it’s an awesome start and will continue to get better.

Looking at the UI Homepage, it’s very cool, but I noticed something interesting. There is this tendency of developers to show lots of examples/demos on one page. It shows an end user many different implementations and choices. However, it also makes cutting and pasting the example into your own editor much harder. I am a big fan of “View Source” as a way of learning. It’s how I learned HTML, CSS and JavaScript. The tendency to put multiple examples on one page with dynamic tabs and fancy widgets, and maybe Ajax calls to get the source of a demo makes View Source all but impossible.

I am a fan of single serving demos. I think each example, each implementation, each demo should be shown in a barebones page. The main software page just has a series of links to the barebones examples. It’s much easier to tell what is going on or to link to a specific example. That’s why all of my examples are single-serving this way. Too much detail or options gets in the way. Sometimes, I find myself breaking this rule, but I try not to.

This is the way I would like to browse the jQuery API. I am still working on that. Need to make more progress.

Whatya think?