Simon Willison’s Weblog

Yahoo! UI JavaScript treats

The Yahoo! Developer Network was updated yesterday with a veritable gold-mine of Exciting New Stuff, coinciding with the launch of the brand new Yahoo! User Interface Blog.

Here are some of the highlights:

• Mature, extensively tested cross-browser JavaScript libraries for animation, event handling, DOM wrangling, XMLHttpRequest and Drag and Drop.

• CSS-skinnable UI controls built on those libraries: Calendar, Slider and TreeView.

• A library of documented design patterns for modern web applications.

• A description of Yahoo!’s Graded Browser Support policy, which should be of great interest to anyone who cares about Web Standards, semantic HTML, accessibility, progressive enhancement and unobtrusive JavaScript.

The code is all under a BSD Open Source license, which means you can use it freely in your own projects, including for commercial development.

This release represents the culmination of more than 9 months of work by an incredibly talented team. Eric Miraglia provides some behind-the-scenes insight in to the work that has gone in to the code.

I’ve been playing with this internally quite a bit over the past few months and I keep finding new useful bits and pieces. Here are some of my favourite details:

• The Event library normalises the event model across multiple browsers, including workarounds for many of the weird frustrations faced when dealing with Safari. It cleans up events when the page is unloaded, which guards against a whole swathe of memory leak problems in IE. Best of all, if you assign an event to the DOM ID of an element that has not yet been loaded, the library keeps trying to attach the event (polling) until it succeeds or the page finishes loading.

• The CustomEvent library implements the publish-subscribe/listener pattern for you to use within your own scripts.

• The Dom library’s getStyle and setStyle methods include cross-browser support for the CSS 3 opacity property.

• The Animation library uses a global Animation Manager object to oversee all animations on the page. This means it can adjust the frame-rate depending on how much stuff is happening—so if you tell a block to move across the screen in 1 second it will happen in one second no matter how much other stuff is going on at the same time.

• Here’s a surprisingly tricky question: when does a drag start? When the user presses down on the mouse they might be starting a click rather than a drag. The Drag and Drop library defaults to starting a drag after a user either clicks and moves 3 pixels or more, or holds the mouse down for over a second.

• The Drag library also makes it easy to have elements “grouped” so that they can only interact with other elements in the same group—see this demo for an example.

And finally, I couldn’t resist quoting this bit of code from one of the Animation examples:

var attributes = {
   width: { to: 100 },
   height: { to: 100 },
   fontSize: { from: 100, to: 50, unit: '%' },
   opacity: { to: 0.5 }
}
var anim = new YAHOO.util.Anim('size', attributes, 1,
  YAHOO.util.Easing.easeOut);

A big thanks to the team that put this all together.