Eric’s comments regarding the use of 3rd party libraries and my response got me thinking that I should post a few examples of what we’ve been doing at Download.com. My only caveat is that I’m probably the person most responsible for this policy as I push for functionality that necessitates their use.

Overlib (http://www.bosrup.com/web/overlib/)

Overlib is a tooltip popup library that is fairly useful at non-intrusive messaging. It works in almost every browser that’s not 10 years old and once you start using it you think a little differently about how best to communicate things.

We use a souped up version of overlib called overlibmws (http://www.macridesweb.com/oltest/) that lets you include additional libraries for drop shadows, dragability, etc. It’s more configurable (but it’s a bigger library). An example of how we use this can be found on Download.com Music.

Open up http://music.download.com and scroll down to the charts at the bottom of the page. Click on “sample” next to an artist image and a little layer with our sample player will load. Another use can be found at the top of the page. Click on “preferences” at the top right and a little layer opens with various site preferences. We also use overlib to display descriptions of the charted artists when you mouse-over thier images. This can be turned off in your preferences.

moo.fx (http://moofx.mad4milk.net/)
prototype (library, documentation)
behaviour.js (http://bennolan.com/behaviour/)

The moo.fx library is a new addition to our bag of tricks and I’m in love with it. We’re using it in various places in our watch list application that launches today (update: this is live now).
Go to a software product page and click “add this to my watch list” in the upper right. This is an ajax call using prototype to add something to your list.

Now go to another product and download it. The post download page will automatically add the download to your watch list. You can turn that preference off right there in the page, and you can also remove that item from your list there, too. The preference is just changing a cookie setting, while removing or adding an item is an ajax call via prototype.

Add a few more titles to your list. Now visit your profile (click on your name at the top). This page makes use of moo.fx for the animations and fade ins/outs, behaviour.js to apply all the various javascript callbacks to all the html, and prototype to make server calls back and forth.

---

A lot of this stuff isn’t exactly neccessary. You could have all your javascript in-line and not use Behaviour, but especially now with ajax constructing the page as the user interacts with it, your code would get very scattered throughout the various tiles. moo.fx is pure vanity, but it makes the page fun to use and not as jarring when a box changes size or gets replaced with other content. Prototype is certainly something you could slim down (see the mad4milk guys’ version of moo.ajax and thier “prototype lite“).Using these libraries has made it easier for our development team to move quickly with the application work we’re doing. Things like Behaviour.js make it easy for the code to stay out of the templates. Prototype makes it easy for us to implement ajax actions. Moo.fx, well, that just makes our designer happy.