Yahoo! User Interface Blog (YUIBlog)

Andrew Bialecki Wins the YUI 3 Gallery Contest 2010 with Effects Module

Congratulations to Andrew Bialecki (@abialecki on Twitter), whose Scriptaculous-inspired Effects module won the YUI 3 Gallery Contest 2010.

Andrew, who lives in the D.C. area, will be attending JSConf 2010 next month with a complimentary ticket from the Yahoo! Developer Network. (Thanks, @ydn!)

The Winning Entry: Effects

Andrew’s project builds on the YUI 3 Animation component, adding to it a sugar layer inspired by the Scriptaculous API. The idea will be a familiar (and welcome) one for anyone used to this sort of syntax:

Y.one("#main_demo").move({ x: 300 }).fade();

The judges appreciated the utility and desirability of this package. Developers will appreciate the conciseness of the syntax and the discoverability of the effects, especially if they have experience working with it in other libraries.

We also admired the professionalism of the documentation Andrew provided for the module. Documentation is never an easy task, but it is the implementer’s first touchpoint with your code, and thoroughly documenting the project tells your audience that you’re taking its needs seriously. Andrew easily cleared that bar for us.

We can see gallery-effects showing up in a lot of use() statements in the future, and that was one of the deciding factors. Useful, expressive, and convincingly documented — in this case, a winning combination.

Thanks to Andrew for his submission. Check out all of Andrew’s gallery contributions on YUILibrary.com.

Honorable Mentions

The quality of modules we judged for the competition made this a difficult choice — there is a lot of interesting work in this group. We singled out a few other notable entries worthy of particular praise:

• Usefulness: YUI Slideshow — Josh Lizarraga’s YUI Slideshow module (inspired by the jQuery Cycle plugin) is clean, elegant, and well documented. This is a strong contender if you’re looking for an image cycler based on YUI 3.
• Uniqueness: Radial Menu — Matt Snider’s Radial Menu is a novel approach to looking at a portfolio of thumbnail- or medium-sized objects. The use case for this component is arguably narrower than for some UI widgets, but deployed in the correct context it could be quite impactful and distinctive.
• Code Quality: Component Manager — Eric Ferraiuolo’s Component Manager struck us as being well written and as being a project that helps developers manage their own code structure. While it won’t make your page shiny, it might help make your application work better, and that’s worthy of an honorable mention in our book.
• Documentation: YUISand — Lauren Smith’s YUISand module, which is a slick implementation inspired by Quicksand for jQuery, was both well documented and interesting. It shared high marks in the documentation category with James Punteney’s commendable and modular Slideshow Base/Slideshow Animated tandem, Josh’s cycle-style Slideshow, and several others.

16 Modules in 17 Days

This was a short-running contest, but despite the narrow window there were 16 eligible modules submitted, and none of them disappointed. In fact, many of them may end up making a compelling contribution to one of your future YUI 3 applications. There was an image magnifier, two video modules, a wrapper for YUI 3 DataSource to make it work with YUI 2 components, a carousel widget, and a DOM-creation sugar module, and more.

With these recent arrivals (along with several others from the past few weeks that were not contest-eligible), YUI 3 Gallery is up to 82 modules. They range from the foundational to the whimsical, but the resource itself is already one of the most valuable aspects of the YUI 3 developer portfolio. (And it may get even more valuable quite soon.) Remember, as of the coming 3.1 release (just a few weeks away) you’ll be able to use all of these modules directly from your use() statement with no additional configuration or overhead.

Thanks to everyone who submitted modules. Andrew, have fun at JSConf!

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!