The Best jQuery Plugins

These are my notes from the session titled "Learning From the Best jQuery Plugins" by Marc Grabanski. It was given at the 2010 jQuery Conference in Mountain View, California.

Marc covered a lot of different plugins; I only included the ones that he talked about in depth, and only as fast as my fingers allowed!

BBQ: Back Button and Query Library

When talking about jQuery BBQ, Ben Alman says,

it started out as a little snippet of code that almost every web developer, at one point or another, has written.

You can read Ben's story on his blog.

ColorBox: LightBox

Jack Moore realized that he often chose plugins based on their look and feel. He wrote a themeable Lightbox plugin that could be customized to each site. He posted it to jQuery and Reddit, and the bloggers publicized it from there.

Cookie

The cookie plugin shows that the demos are really all that people read when choosing a plugin. They don't look at the documentation or support.

Flip

Here's a short demo about a plugin that you can use for transitions.

Form

Mike decided to aggregate a collaborative effort on the mailing list, and contribute it as a plugin. When you include the jQuery Form plugin, you can Ajax upload your files. It's pretty great to be able to do that yourself.

Flot

A great charting algorithm with a collection of diverse demos. The developer build this because he couldn't find the flexibility he needed in other JavaScript charting solutions. A recurring theme is that a developer of a plugin is "scratching their own itch."

As far as feature adding after uploading it, you have to weigh the usefulness of new features.

Hotkeys

Provides keyboard inputs, pretty interesting in its own right.

Masked Input

This developer needed masked input; he created this plugin and posted it to the jQuery mailing list, and the community took it from there. In the commercial world, you need to market your own stuff. With open source, people can do that for you.

jCarousel

Tons of demos. It's a recurring theme for popular plugins. When you have all these demos, there's no hiding "does-this-do-this-or-doesnt-it." You take out that whole gap of people searching through your documentation. If I just put up a demo, there's no questions and people don't have to look.

Jcrop

Nice visual component that people can leverage in their application. Often people make their decision about plugins based on how it looks, which differentiates how people choose plugins from how they choose a framework, for example.

Thanks to Marc for the talk. The full list of plugins is located on Marc's blog here.

jEditable

Just used to edit in place.

jGrowl

This developer needed a messaging system, and he was familiar with how growl worked and wanted to replicate that.

jqGrid

This plugin goes deep into the documentation, but it has the demos there to support it.

I really try to extract the essence from the user requests.

jQuery JSON Utility

Takes JSON and string-ifies it.

jsTree

This is the only tree that I've tried that just works. Trees have always been this impossible thing, and this guy really solved it. He was building it for a CMS, but it satisfies a real-world need for most people.

MarkItUp

This is a great WYSIWYG editor; it's not bloated, it feels lightweight and it's not taking over your application.

No Swf Upload

Allows you to upload multiple files using HTML5, a nice flash alternatives. Degrades to a single file upload rather nicely.

Popeye Inline Gallery

This was written as an alternative to Lightbox. It allows you to display a gallery inline with the content. It's an alternative at this point but it could really catch on.

I posted a link to dzone and digg and watched it from there.

Quicksand: Animated Filtering

Pretty cool, I'll show a demo. Nice sorting and animations for filtering lists of items. The developer partnered with a designer to make a really nice looking plugin. You can really tell that's what set this particular plugin apart, and made people pay attention: the design and the way it's presented.

scrollTo

Inspired by an article. Notification was posted to jquery-en mailing list, but not much publicity after that.

Spell Check

Star Rating

Timepickr

For fun, he looked at the date pickers and realized there was nothing common for time picking. He made a prototype that turned into a really nice plugin. You can choose AM/PM and then the hour and minute.

Tooltip

jQuery UI

The ThemeRoller on top of jQuery UI: this single thing is what really propelled the library forward. You can create a stylesheet dynamically, and use that to style your whole website, as well as all these components, and try them right on the screen.

Uniform

We all have designers that have told them they want a custom select box; now we actually can!

Uploadify

Another plugin to allow uploads of multiple files.

Validate

A bunch of different validation formats that you can put right into your markup, and it adds it automatically client-side.

Thanks to Marc for the great talk. You can find his full list of plugins on his blog.

Did you enjoy this post? Please spread the word.