Earlier this week, Stephanie put together a really cool design for our portfolio section on the LevelTenDesign.com Web site. It was based off of a jQuery snippet she found that emulates the Coda slider (http://www.panic.com/coda/).
When done correctly, jQuery code, specifically jQuery plugins are extremely easy to integrate into a site. jQuery's selectors are so powerful that you can almost always implement a plugin without ever having to change the structure of your document. Being able to implement all sorts of cool UI effects like carousels, accordions, sliders, fisheye effects (OS X Dock), draggables, droppables, etc., is just cool. For the most part, plugins just work.
However, in this case, getting the Coda emulating jQuery code to work was a pain.
The developer did all sorts of things that resulted in extra work in implementing the feature on our site. It was implemented as .ready() code when it should have been an extensible plugin. CSS style attributes were hard coded. DOM structure, ids and classnames were assumed. Named helper functions and variables were used. It was well documented and otherwise sensible code. It just wasn't developed in the jQuery way. As a result, it took a bit of massaging to get it to work. With most jQuery plugins, I never have a need to view or modify the source.
So I have come up with a few high level rules for developing in jQuery:
1. Obsessively manage your namespace! This is critically important for any JS work. jQuery is good about not cluttering up the global namespace. When you write jQuery code, extend the jQuery object whenever you do something neat.