In the Wild for January 6, 2009

By YUI TeamJanuary 6, 2009

Happy New Year from all of us here at Yahoo. Here's a digest of YUI-related news from the holiday season. As always, we invite you to let us know what we've missed by adding a comment below.

  • YUI Sightings — MojoPortal: mojoPortal's author Joe Audette suggests that you "think of mojoPortal as a Starter Kit for Advanced ASP.NET Web Sites and Portals".  It's a flexible, attractive CMS that leverages the power of both YUI and jQuery.  An introductory video is available for those interested in learning more about mojoPortal's capabilities.
    (Original source.)
  • YUI Sightings — The Photo Stream: Scroll through the news of the day in a rich visual lightbox — and become a contributor or editor while you're at it.  The Photo Stream is one of many sites exploring what the presentation of news will become as the web gets richer and more interactive.  The site uses several YUI components, including nice animation effects when you scroll the image canvas left or right.
  • YUI Sightings — Bulgarian Maps Site is a mapping site for Bulgaria built by Iliyan Peychev, Atanas Himchev, and Todor Todorov using nearly 20 components in the YUI family.  All of the core and utility components are present, and rich YUI controls like Layout Manager, TreeView, AutoComplete, Button, Panel and Slider play a prominent role here as well.   (Via Stoyan Stefanov.)
  • YUI Sightings — Do It, Do It, Done! Tasklist Management Site: Glenn wrote in to tell us about his site, Do It, Do It, Done!  Here's how he describes it: "Finally, a to-do list app with style and flair! We’ve created a simple web-app for making lists - and the YUI library plays a huge role in it! We use it everywhere!  We leverage the YUILoader Utility to bring pieces in as we need them and keep the initial load small!  One of the great things about it was, after our initial development, when testing on older platforms such as IE6, some aspects of our layout got broken, etc., but the YUI stuff all simply worked perfectly.  Thanks a bunch YUI Team! We are now working on our next project - and it’s YUI all the way!"  Thanks for the tip, Glenn, and congrats on the launch. (Original source.)
  • YUI Sightings — ThrillCall, a New Concert-tracking Site: Reader Jason wrote in with the following "In the Wild" tip: "Hi, I’m a former Yahoo who has been working at the startup ThrillCall ( I did all of the frontend work and use YUI everywhere on the site. You will notice many of the widgets including Modal, Overlay, Tooltip, Slider, etc. are used throughout the site. I extended the base classes and added additional functionality unique to our site." ThrillCall looks like a fantastic site for tracking nearby concerts and staying on top of the touring schedules of your favorite artists; thanks for the tip, Jason! (Original source.)
  • Christian Romney's Functional Method Collection for YUI: Gabe Moothart has updated Christian Romney's YUI-Functional method collection, which is up on GitHub.  The collection includes each, collect, inject, indexOf, detect, select, reject, grep, partition, and zip functions. Gabe's update brings the collection up-to-date for YUI 2.6.0.  Christian has licensed YUI-Functional under a BSD license, matching that of YUI.
  • YUI Sightings — Romanian Social Site Commenter laura wrote in to tell us about, a "Facebook-meets-LinkedIn" site for the Romanian market.  The authors are implementing a variety of YUI building blocks including Animation, Drag&Drop, Buttons, Containers and more.
    (Original source.)
  • Web Interface for YUI Compressor: has put up a web interface for YUI Compressor — this is convenient if you just need to use it periodically and don't want to download and setup the app yourself.  Check it out here. (Original source.)
  • Using YUI Widgets in Dreamweaver CS4: Roman Villarreal of the Adobe Developer center has posted a new tutorial on using Dreamweaver CS4's support for YUI: "One of the strengths of Dreamweaver CS4 is its extensibility. Yahoo! User interface (YUI) widgets are a set of extensions that you can use in Dreamweaver CS4 to easily add Ajax and JavaScript functionality to a web page. These widgets are supported by the robust Yahoo! User Interface (YUI) framework and well documented (with examples). Using key new features in Dreamweaver CS4, you can easily edit and test the JavaScript and CSS files of these widgets until they fit the design and functionality of your pages. In this article, I show you how to work efficiently with YUI widgets in Dreamweaver CS4, using the Insert panel, Related Files bar, Live view, and Code Navigator."
  • YUI Sightings — Asvin Balloo of HTMLBlog created a new Twitter app called TwiTree that revisualizes your Twitter followers in a recursive tree structure.  "I am happy to announce the launch of," Asvin writes.  "It's a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded... The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc... Stay tuned for further information." (Original source.)
  • Popular JavaScript Framework Libraries Compared by Rob Gravelle posted a comparison of three of the major open-source frontend libraries on, looking at YUI, MochiKit, and jQuery.  He takes a much closer look at the libraries than most authors of comparo articles do, so if you're curious about how Mochi or jQuery differ from YUI this is worth reading.  About YUI, Rob writes: "Perhaps the most impressive part of the YUI Framework is the collection of configurable control/widgets. Not only are they extremely versatile and useable, but they can also be given a cohesive, visual look and feel."
  • "The Best JavaScript Library": The ongoing debate over which JavaScript/CSS library is "the best" has been an entertaining one. Emad Ibrahim has documented his own process of thinking this question through. "When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This led to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look&feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision..."  Emad discusses his pros and cons for three major libraries (YUI, Prototype and jQuery) and there is further discussion in the comments section.
  • YUI-based Table Striper: Asvin Balloo is back with a new YUI-based helper script for striping the color on table rows.
  • How to Use the YUI Compressor: Writes Chris Barr: "Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there's others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it won't obfuscate your code."  His blog post offers a tutorial on using YUI to compress jQuery. (Original source.)
  • Patterns for Widget Development: Brad Harris has a tutorial up on his selfcontained blog treating the subject of widget development patterns for JavaScript: "Recently I’ve been doing some work setting up some standard javascript widgets for a web application I am working on. By widget, I’m referring to items such as javascript date pickers, tooltips, autocomplete inputs, etc. I’m building on top of YUI for this approach, but the principles I’d like to discuss are applicable to any library. YUI provides a fantastic javascript library, and a collection of widgets right out of the box. More than likely, as you add them to your application, you’ll want to wrap or extend them in your own javascript implementations to get them functioning as desired. To accomplish this, I typically have taken one of two approaches, and these are the topic I’d like to cover. To provide a working example, I’ll use a simple wrapper for a YUI Calendar widget that is linked to a text input, and opens by clicking a calendar icon."  Check out his post for the full deep dive on the subject.
  • FireUnit Extension for YUI Test: YUI Test author Nicholas C. Zakas has released an experimental hookup between YUI Test and the new FireUnit Firebug extension on his personal blog: "When I wrote YUI Test, I made sure that the TestRunner object was completely event-driven so that test results could be output in any way that made sense. To prove how easy it is to create your own visualization for YUI Test results, I created a FireUnit extension for YUI Test. The extension is nothing exciting, just a simple JavaScript object that subscribes to the various TestRunner events and then marshals them to the appropriate FireUnit API calls. All you need to do is load the file and include the following line of code: YAHOO.tool.FireUnit.attach();. That’s it! All the results will be output to the Test tab in Firebug. (Original source.)
  • Dynamic DOM Search Experiment: Matt Snider has another utility to add to his growing list of YUI extensions -- this time, it's a method for dynamically defining the relationship between nodes. Writes Matt:  "Today’s article illustrates an experimental function that parses a string, containing instructions for searching the DOM relative to a node. This method was inspired by a desire to allow a separate design team to specify the relative location of other DOM nodes. This way, parts of the JavaScript that handle user triggered events (such as ‘click’) need not hardcode relative nodes.  For example, suppose when the user clicks on an anchor, a relative node is made visible and the design team frequently changes the location of that node. An ID could be used, but that doesn’t work as well with dynamically generated content..."  Check out Matt's blog for source code and further ruminations.
  • Enhancing Search Boxes With YUI: Karthik Viswanathan wrote a YUI AutoComplete implementation tutorial on Lateral Code.  Writes Karthik: "earch boxes enable users to find what they need quickly and efficiently. By adding an auto complete (or search assist) effect to these boxes, web designers further aid their users by expressing their site’s content through suggested search terms."  Check out the full blog post for the tutorial and demo.
  • YUI Sightings — Wordcraft, a New, Lightweight Blogging Platform: Brian Moon has created Wordcraft, a new blogging platform aiming for light weight and simplicity.  Brian implemented YUI to drive the admin portion of the platform.  Wordcraft is open source and you can find the source on Google Code. (Original source.)
  • Preserving Tab State with TabView and Grails: Writes Keith Cochran:  "I use RichUI for my tabs in a Grails application.  The tabs look good, and it works well, except for one problem.  When you refresh the page, the tab reverts back to the first tab.  So, if you do cool stuff like adding in something with a modal or dialog, and you go back to your page, it reverts back to the first tab." He took an existing solution using cookies to preserve Tab state and adapted it to Grails; he posted his solution on his blog.  (Note: RichUI, a Grails plugin, draws from several JavaScript libraries; many of the controls, including TabView, are from YUI.) (Original source.)
  • Consuming Flickr's API with YUI's Get Utility: offer's up a script to pull in data from the powerful Flickr API using YUI's Get Utility, obviating the need for a server-side proxy.