Aarron Walter

It occurred to me as I while helping some of my students with their Interactive Design projects that it would be really great to have a comprehensive list of the most useful JavaScript libraries and utilities that would make building advanced interfaces a snap. So here are my personal favorites. There are many more great libraries and tool out there I am not listing, either because I just overlooked them, or because I think there is a better alternative. If you feel I’ve missed something here, I’d love to hear your suggestions.

The Essentials

• Prototype: First on the list for good reason. It’s a staple library on which so many other libraries are built. Development utilities and nice Ajax handling
• Scriptaculous: Effects galore. A bit on the heavy side, but can be worth it for the right use. A piece of cake to use lots of powerful features.
• Lightbox: A simple way of presenting photos and HTML chunks in modal windows, dimming the background of the page.
• Really easy field validation with Prototype: The name says it all
• Tabifier: A JavaScript implementation of the card stack design pattern. Show and hide divs, packing a lot of information into a relatively small area with comfort.
• Fade Anything Technique: Popularized by 37signals, a great way to tell users about errors or other critical feedback.
• New Window Link: A nice way to offer users the ability to launch a link in the same window, or spawn a new window.
• Sweet Titles: A beautiful, souped up alternative to the plain ol’ title attribute display.
• SWFObject: Detect the Flash player then embed a SWF in your page following web standards
• Tiny MCE: Turn any textarea into a WYSIWYG editor. Perfect for your next CMS or web app

The Runners Up

• Yahoo! UI Library: Many handy utilities for some advanced interface design patterns like accordion menus.
• Moo.fx: This may soon replace Scriptaculous as the de facto effects library because of its slim file size, it just hasn’t quite caught up with the documentation yet.

Did I miss any?