In the Wild for January 26, 2009

By YUI TeamJanuary 26, 2009

Here's the digest of YUI "In the Wild" entries since January 6. Note that you can get these in realtime on the YUI Library Twitter feed, along with any other breaking news and announcements. Please let us know in the comments if we've missed something.

  • Using Code to Change/Show Tabs: Bret Levy has added to his YUI Help site a new tutorial on how to change tabs and respond to tab changes in Matt Sweeney's YUI TabView Control.
  • YUI3 on the Roadmap for Launchpad: Our friends at Canonical have chosen YUI 3 as the Ajax framework for Launchpad. Writes Mark Shuttleworth: "We picked YUI 3, the next version of Yahoo’s UI toolkit for the web, as a foundational layer for this AJAX effort, and we wanted to bring everyone up to speed on the processes for designing, building and testing web client apps. It was a lot of fun. In particular, we wanted to unify the web service APIs that we already publish with this AJAX work, so that it would be easy to write web browser code that could talk to the exact same API’s we publish for developers who are integrating with Launchpad. That’s now possible, which means that any API we use for AJAX work will also be available to developers writing their own tools to access Launchpad directly through the web services. Thanks to the awesomeness of YUI 3, the team is now hard at work turning those ideas into reality."  We're thrilled to have this savvy team building on YUI 3 and we're looking forward to the great feedback that will result from that process.
  • Satyam's Progress Bar Widget Updated for 3.0.0PR2 (and 2.6.0): Satyam's excellent Progress Bar widget has been updated for 3.0.0PR2 (and there is a 2.x version as well).  He's added YUI Doc-generated documentation and there are numerous styles to choose from.  Because this is Satyam, you would expect there to be impeccable documentation, and you won't be disappointed.
  • David Cilley on Converting YUI ButtonGroups into Image Buttons: Writes David: "ButtonGroups in YUI are fairly quick to implement, have a nice look, and act the way most people expect.  I’ve been surprised to find out that there are no options available to use images in place of the text on the Buttons inside the ButtonGroup.  In our most recent AJAX Photo Viewer Demo, I decided to use a ButtonGroup for the main mouse tool controls, and Bill Bither suggested that I use icons instead of text. I didn’t want to throw away what I’d done so far, since the demo was pretty much done at that point.  I poked around YUI’s documentation a bit and came up with simple function that can convert a YUI Button into an image only button, much like a button on a tool bar.  These converted YUI Buttons still maintain the same original properties internally, so you can use them interchangeably."  As usual, David provides full code source in his post, along with a live conversion demo.
  • YUI Engineer Dav Glass on Browser-sniffing Vs. Feature Detection: Dav provides a look inside the thought process of one of YUI's most pivotal and prolific engineers: "While developing the YUI Rich Text Editor I learned that browser sniffing is, indeed, quite needed. Now, YUI does browser sniffing a little different. We try to detect the different rendering engines, so there is no firefox, mozilla, safari or chrome. It’s gecko, webkit, ie, etc.. The main reason that sniffing is needed in the Editor is because of the execCommand method. All of the A-Grade browsers support the method. The method is there to detect, but they all don’t do the same thing when executed. So how am I to tell what I am supposed to do? I have to rely on sniffing in order to make the browsers behave the way I want them to."  You can read the full entry on Dav's blog.
  • YUI Sightings — YUI Carousel on Ben Weiner wrote emailed to let us know that he'd deployed Gopal Venkatesan's YUI Carousel Control on to good effect.  You can see the custom-styled Carousel implementations both on the homepage and on the forums page.
  • YUI Timeline on User kejun has put up a timeline of all YUI releases since 2006 up on — a nice visualization of how far the library has come and a reminder of all the steps along the way. (Original source.)
  • Nicholas C. Zakas on 'the YUI 3 Revolution': Nicholas is part of the extended YUI family, so we're not reaching far afield for this, but it's worth sharing his thoughts on YUI 3 -- after all, he led the team that built the next-generation Yahoo home page around our early YUI 3 versions.   Writes Nicholas: "I’ve heard some people complain that YUI 3 is too different from YUI 2, and that making such a different library is a mistake. I actually believe that this was exactly the right move at exactly the right time and give the YUI team a lot of credit for having the guts to do it. In a world where evolutionary programming is the preferred approach, YUI decided for a revolutionary approach." Read the full essay here.
  • Nicholas Zakas's YUI3/Yahoo Home Page Talk on SlideShare: Nicholas blogged not too long ago about the choice he and his Yahoo Front Page engineers made to use YUI 3.0 preview releases to underpin the frontend framework for the next generation of Yahoo's iconic homepage.  He gave a talk on this subject at a San Francisco JavaScript meetup, and the slides are now up on SlideShare.
  • Open-source PrimeFaces Project Marries JSF and YUI: From the website: "PrimeFaces is an open source library for Java Server Faces Web framework. Main goal of PrimeFaces is to create a component suite containing a rich set of components and provide non-rendering JSF extensions to ease development with JSF. PrimeFaces has three modules each focusing on different aspects of JSF."  Numerous YUI components are included in the UI leg of the PrimeFaces project. (Original source.)
  • Ian McCracken on Using YUI DataSource with Dynamic ORequest: Ian McCracken wrote up a technique he came up with while using Jenny Donnelly's YUI DataSource Utility:  "YUI (which I love) has an excellent abstract DataSource component that normalizes requests for data to something compatible with all their widgets. I find it generally useful as well, even when I'm not using, for example, a YUI DataTable to display data.  Last weekend I wrote a UI notification subsystem for Zenoss, based on YUI and Yowl. I used a DataSource to handle communication with the server."  Check out Ian's blog post for a full description of the technique.
  • Another Web-based Interface for YUI Compressor, from We've noted web interfaces for Julien Lecomte's YUI Compressor in the past -- and we have a new one for you this week.  This one is from, and it provides another option for you in those cases where you need to compress a file and you don't have access to your command line.
  • YUI Compressor-based Utility for Compressing by Directory: jquery.sheet has released a Windows app that leverages Julien Lecomte's YUI Compressor to compress all the JS/CSS files in one directory and move them to a new directory.  Writes the author: "I found Yahoo's YUI Compressor to do a wonderful job of compressing and is my compressor of choice; but it lacked multi-file compression for those of us that need to keep source, and release compressed js/css files. And also for those of us that are impatient..."  If you don't want to script your build process, this is a handy tool for crunching by directory.
  • Podcast: Christian Heilmann, "YUI for Control Freaks": This is a podcast of Christian's Ajax Experience talk: "The hidden quality of the YUI Library is the ability to control and test what you are doing at any point in the process. This session breaks down the internal events of YUI, how to control animations, and what you need to know about the browser instance you apply your code to. With the classic 'Web site' dying out more and more, we need to make sure our scripts and widgets are as open as possible to outside applications. This talk shows you how YUI is built to allow for integration with other scripts."
  • Agimatec's Notes on Using YUI Loader: The engineers at Agimatec have written up a detailed blog post on how they're using YUI Loader to bring on-demand functionality into the page: "Using the portlets standard (JSR-168), we are able to meet our customer’s needs in a way we never could have done when developing traditional, monolithic web applications. But this flexibility comes at a price: we do not know which apps are on a page when it gets loaded; further, we want to be able to add new portlets to each page at any time. From a Javascript perspective, this means that traditional 'just put script tags into the header'-style Javascript coding will lead to a very bad user experience, since every page would be bloated with stuff the user will never use and - even more important- the user experience will degrade as we are adding new features to our product, even if our customer does not need or want the new features."  Check out their post for full details and sample code.
  • The New, More Accessible Yahoo Currency Converter: Dirk Ginader writes on the YDN Blog about his team's work making the Yahoo! Currency Converter (which uses the YUI AutoComplete Control) more accessible. The team focused on the following goals:
    • make it as easy as possible to use
    • make it work without page reloads
    • make it fast
    • make it accessible to everyone
    If you've been following Todd Kloots's accessibility work on YUIBlog, you'll definitely want to check out Dirk's report as well.
  • Brian Love on "Getting Started with YUI": Writes Brian: "So, why use YUI?  Because you can easily create a great looking web application that works seamlessly without needing additional JS libraries and plugins.  Almost all the functionality you are looking to include in your next generation web application is right there.  No need to go looking on Google for a Grid plugin, or a calendar widget — everything is included, and works together beautifully."  I'm sure he meant to search for that Grid plugin on <cough>Yahoo! Search</cough>.
  • Karthik Viswanathan on Enhancing Search Boxes with YUI: Karthik Viswanathan writes on the Lateral Code blog: "Search 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. Hand coding an auto complete system can be tough and unappealing. Luckily, the Yahoo! User Interface Library (YUI) makes this much easier with it’s AutoComplete control."  Click through for the full article, including demos and sample code. (Original source.)
  • Byuic from Chad Auld -- Bash/python Tool for YUI Compressor: Chad Auld (of Yahoo, MiaCMS and Brilaps) has a build-time utility for bash and python that facilitates use of YUI Compressor.  Writes Chad: "The goal of [byuic] is to create a set of commandline scripts that recursively find, compress, and possibly obfuscate all the JavaScript and CSS files in a given directory structure with the YUI Compressor. Using the byuic wrapper scripts one can easily integrate compression as a standard part of a projects normal production build process."
  • YUI Among Antonio Lupetti's "10 Beautiful Web UI Libraries": We've seen a lot of lists of JavaScript/CSS libraries over the years, but we haven't yet seen one like the one Roman blogger Antonio Lupetti put together — based on aesthetics.  YUI makes the list, but many of the others are less commonly cited in such comparisons.
  • RockstarApps’ Web Optimization Plugins for Eclipse and Aptana Use YUI Compressor: From Ajaxian: "This week RockstarApps released a beta version of jsLex 1.2. The goal of project is to 'codify' all the research that has been done in Web Optimization by people like Steve Souders and his 13+ Web Optimization Techniques, plus others. Making it possible for everyone to create highly optimized Web application with little or no impact on the how developers build and test their applications."  YUI Compressor is one of several strategies these plugins use for driving up your YSlow grade.