Writing half-way decent jQuery code

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. 2. Use closures. Closures seem hard to understand if you've never programmed in a functional language (my first language was Scheme, a dialect of LISP and I'm still alive - barely). The skinny of why you'd want to use closures in JavaScript is that when you define functions within functions, you get locally scoped variables and that gets out of a lot of the scoping pains associated with the JavaScript language. jQuery developers seem to be very good about using closures. You have to in order to have a workable JavaScript framework. 3. Lastly, and most importantly, think in jQuery terms, which is more than just JavaScript best practices. jQuery development requires a different perspective than developing in most other languages and APIs. jQuery development can be boiled down to doing just two things a.) "select something" and b.) "do something" on the DOM. "Doing something" will typically involve binding events, setting animations and manipulating the DOM.