In the Wild for November 26, 2008

By YUI TeamNovember 26, 2008

Needless to say, one thing all of us here at YUI headquarters are thankful for is the chance to work with all of you who have made the YUI community such a vibrant, challenging, inspiring place over the last three years. So, thanks from us. We hope your holidays are peaceful and full of happiness.

Here are some of the things we've seen in just the last week or so that have reminded us how much we love working on YUI:

  • Matt Snider's Element Editor Class: Writes Matt: "The ultimate goal of the project is to develop a widget that can be used to dynamically update the content of any DOM node, by inserting an editable form field (input, textarea, select, etc.). In version 1, 'Element Editor' can replace a DOM node with a textarea or an input, allowing a client to replace the text inside of the DOM node. The widget contains a singleton Custom Event (1 Custom Event shared by all ‘ElementEditor’ instances), which can be subscribed to, that fires each time a user changes the DOM node content."
  • YUI-based "Lava Lamp Menu" from This is a really nice implementation of a nav menu that may be appropriate for sites that are looking for a smooth, richly finished feel.  Calling it a lava-lamp menu may be a little extreme -- what it really does is animate the mouseover effect from one nav item to the next in a smooth, graceful way.  Not right for every site, but a sweet addition to the YUI Menu Control for sites where this kind of animation suits your design ethos. (Original source.)
  • Google Support for YUI on As we announced on YUIBlog on November 19, Google is now hosting YUI files on its content distribution network (CDN), adding a second worldwide CDN from which to choose if you want to offload your YUI bandwidth and improve performance.  Better still, Google's CDN provides SSL support, which means those of you hosting your own YUI implementations to run in secure environments can now move to a CDN solution if you wish.  Currently, combo-handling remains a Yahoo CDN-only optimization.  Head over to the Dependency Configurator if you'd like to set up an implementation drawn from Google's network, or check out the Google Ajax Search API Blog's writeup. (The Google Inside blog has an upbeat take on this development as well.)
  • Event Simulation Using YUI: More from Matt Snider: "Some browsers have begun to support event emulation allowing engineers to trigger client events, but most are incomplete and there is no standard x-browser way to simulate events. Fortunately, JavaScript Frameworks have come to the rescue, allowing us to simulate client events. YUI has the YUI Test Utility, which allows for the emulation of 7 mouse events and 3 keyboard events: click, dblclick, mousemove, mousedown, mouseup, mouseover, mouseout, keydown, keyup, and keypress. So by using YUI there actually is a standard, x-browser way to emulate events."
  • YUI Sightings — Globber: There's not much we don't like about Globber, which is a slick portlet based on YUI.  It's cute, well-designed, has sheep in the header, and shows a light-hearted, well-implemented take on the My Yahoo/Google IG genre.  If you're looking for some inspiration for your YUI Drag and Drop based app, here's a good place to start.
  • Asvin Balloo's Event Delegation/Bubble Menu Exploration: Asvin Balloo (on his newly redesigned HTML Blog) writes: "Event delegation refers to the use of a single event listener on a parent object to listen for events happening on its children (or deeper descendants). Event delegation allows developers to be sparse in their application of event listeners while still reacting to events as they happen on highly specific targets. This proves to be a key strategy for maintaining high performance in event-rich web projects, where the creation of hundreds of event listeners can quickly degrade performance....This post illustrates the use of event delegation to create a "bubble" menu, inspired by Bedrich Rios' post on Nettuts.
  • YUI Carousel, Simple Pie for Blog Aggregation: Veeru makes another "In the Wild" appearance with a nice implementation of Gopal Venkatesan's YUI Carousel Control: "Recently was looking at aggregating a few blogs -- basically the need is to show all the latest posts from a list of pre-defined blogs -- mostly food related. I started with zero knowledge on this one, but fortunately was able to figure out how to do it. This is what I have used: YUI Carousel to display the blog elements in a decent way, Simple Pie to read contents from atom feeds and rss feeds."  Check out the example here.
  • Fresh Baked Goodness with the YUI Cookie Utility: Dan Wellman has posted another excellent tutorial on DMXZone, this one treating Nicholas C. Zakas's YUI Cookie Utility.  Writes Dan: "The YUI provides us with an easy way of setting and getting cookie data, which abstracts away the strict syntax and dramatically shortens our scripts – which is a very good thing considering even the most basic functions for getting and setting cookie data are often in excess of 20 lines of plain-vanilla JavaScript, even without error checking that prevents an error being thrown if document.cookie is empty.  Throughout this tutorial I’m going to be assuming that you’ve worked with cookies before the old fashioned way and understand the principles behind their use. Even if you’ve never worked directly with cookies before however you should still be able to use the YUI Cookie Utility without any difficulties."  You can download the full resource for $3.20 here.
  • YUI Sightings — Washginton State University Course Catalog: Go Cougs!  Jeff Craig, working among the beautiful rolling hills of Eastern Washington's Palouse country in Pullman, Washington, has remade the WSU Catalog using YUI.  You'll find ten YUI components being leveraged in Jeff's implementation.
  • Sun Releases NetBeans 6.5 with Improved YUI Support: From the blog post: "We did a lot of work in NetBeans 6.5 around formalizing how we include various community-supported JavaScript libraries and toolkits. We bundle many of the popular ones, including JQuery, YUI,, and Dojo. Those are now easily consumable right form within the IDE: You can just start using those inside a project. If you have your own JavaScript library, it’s very easy to add that through the library manager to create a library reference, pointing to your library. Once you pull a library into a project, all of the JavaScript editor features become available to you."
  • YUI Sightings — The Consumerist: We've mentioned before the adoption YUI has seen among media sites.  It's good to know in these difficult economic times that you can find YUI under the hood, too, at The Consumerist, so you can get some YUI goodness with your economic doom and gloom.
  • A Drap & Drop Example Using YUI Drag & Drop's Ineraction Groups: Jorge at "A Developer's Journal" writes: "I recently explored the drag-and-drop features of the YUI JavaScript library. I particularly liked the Interaction Groups example. While trying out the example, it occurred to me how perfectly suited it is for the user interface of a web-based board game. To test this idea, I created a proof of concept board game using YUI." Check out the code and the game on his blog.
  • CSS Tip #1: Resetting Your Styles with CSS Reset: 6 Revisions, one of the most popular web-design blogs, has a detailed article out from Nov. 18 about the importance of CSS reset resources (like Nate Koechley's YUI Reset CSS).  Writes Jacob Gube: "Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately - setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser."
  • YUI Sightings — Tagz: Tagz is a new social-bookmarking site from India which, according to its authors, "also borrows voting and commenting from social news sites. Tagz was inspired by delicious and reddit."  Major YUI usage can be found under the hood, including a dozen distinct components.
  • YUI Sightings — ConPA Financial Tool: ConPA is a nifty financial tool that is also a nice proof-of-concept of what you can do tying lots of YUI components together.  This tool, which helps you optimize your portfolio balance based on a set of stocks, leverages DataTable, Charts, AutoComplete and more than a dozen other YUI components.
  • YUI Wrapper for Yahoo Search Term Extraction API: Eric put together a simple 1KB script that, in combination with a server-side proxy, provides a JavaScript interface to the Yahoo! Search Term Extraction web service that pulls key terms out of any block of content.  Check out the blog post, the functional example, or the API docs for more details.
  • MiaCMS Updated with YUI 2.6.0 Support: Chad Auld and the Mia team recently released MiaCMS 4.8 with support for the latest version of YUI (2.6.0). (Original source.)
  • YUI Sightings — Interfete Web Club: The Interfete Web Club is a new site based on the e107 CMS that makes heavy use of YUI CSS and JavaScript. (Original source.)
  • YUI Sightings — IProtein: The iProtein site makes beautiful use of Todd Kloots's Menu Buttons, among many other YUI components, in its new interface. (Original source.)
  • YUI Sightings — Footprints MySpace App: Navaneeth Krishnan's Footprints is a collaborative geo-tagging application available on Myspace that makes use of YUI TabView and other controls in a Google Maps mashup. (Original source.)
  • YUI Sightings — Semmel, a YUI-based Interactive Community Engine: Semmels are community spaces that are easy for community members to manipulate and customize.  The richly interactive framework makes heavy use of YUI under the hood. (Original source.)
  • YUI Sightings — and Search Engines: Eric Powers contributed Viewies to the Yahoo! Gallery, combining YUI with the Yahoo Search APIs.  Writes Eric: " is a Web Search Portal with Instant Search Views. [You can] nstantly view search results as full pages."  This is a pretty cool take on one of the directions search interfaces can explore. A more traditional take on search is, a search engine that combines human edited results with search engine results in an attempt to improve the user interface. DuckDuckGo uses several YUI components, inlcuding Matt Mlinac's YUI ImageLoader to improve performance. (Original source.)
  • YUI Sightings — Real Estate Tours: uses a variety of YUI components to provide in-page exploration of real-estate virtual tour information. (Original source.)

That's a lot, but we're sure we missed some great YUI implementations and discussions — please let us know what we missed in the comments.