Ten Things Yahoo! Is Already Doing with the YUI Library

By Eric MiragliaJuly 18th, 2006

Since the YUI Library was released under an open-source BSD licence in February, we’ve gotten a lot of questions about YUI. One of the questions we’ve fielded more than any other, though, is also one of the best and most relevant: Who at Yahoo! is putting this stuff out into production? The answer is that almost everyone at Yahoo! is using YUI to some degree, including some of our most highly trafficked and high-profile sites. There are some notable exceptions — the Yahoo! Mail Beta and the new Yahoo! Photos, for example, are projects that started before YUI was available and work their DHTML magic using solutions crafted by their own engineering teams. But, increasingly, what we’re seeing is that most new projects at Yahoo! are relying on YUI to serve as a foundation.

Inspired by our own Dustin Diaz‘s recent post (“15 Things You Can Do with Yahoo UI“) on the new frontend-developer journal Vitamin, we wanted to share with you ten things Yahoo! is already doing with YUI. This list isn’t exhaustive, nor does it suggest that these are the ten most important implementations; rather, these are ten that represent some of the breadth and depth with which YUI is being used within the Yahoo! family.

1. Front Page’s Personal Assistant

The new Yahoo! Front PageYahoo’s Front Page redesign, recently out of preview and available at http://www.yahoo.com, uses YUI extensively in its Personal Assistant module toward the top right corner of the page. Event Utility is used to listen for mouse events when interacting with the module; Connection Manager retrieves data on demand from the Personal Assistant’s six services; and the Animation Utility powers the smooth transitions as you move from module to module.

2. My Yahoo! Drag & Drop Portal

My Yahoo!

My Yahoo! was one of the first major consumer sites to embrace RSS and allow users to fully experience the "Come To Me" web — the web in which information you care about, whether from Yahoo! or from any site with an RSS feed, is aggregated and arranged to your liking. In January, arranging that information got a whole lot easier when My Yahoo!’s developers gave the site a major infusion of YUI — Event Utility, Connection Manager, Drag and Drop Utility, Animation Utility, and the Dom Collection. The result: A personalized portal in which you can drag your content modules around on the page to reorder them. Note the use of the Animation Utility to soften the transition when you drop a module in a new location.

3. AllTheWeb.com LiveSearch

No picture is provided for this example, because the only way to fully appreciate the responsiveness of this Search interface is to experience it yourself. AllTheWeb’s LiveSearch provides an alternative interface to the Yahoo! Search platform and drives intense XHR-mediated traffic via Connection Manager, exploring the deep integration of client- and server-side application logic. (Note: This implementation imposes some browser restrictions at present; these restrictions are not intrinsic to YUI Library code, which is designed to work in all A-Grade browsers.)

4. Yahoo! Tech — Animated Page-Width Resizing (and More)

The new Yahoo! TechYahoo! Tech is the first major Yahoo! product launched in the YUI era, and it takes full advantage of the library. One of the more unique uses of YUI on Tech is its implementation of a configurable content width control. This feature allows you to show and hide the secondary content column on the fly, and it employs the Animation Utility to gradualize the transition for good measure — an innovative approach to handling the variety of screen sizes and browser viewport sizes with which users view Tech’s content-rich pages.

5. Yahoo! Finance CSS Reset, Fonts, & Grids

Yahoo! Finance employs the YUI CSS platform.

Yahoo! Finance takes advantage of one of the newer components of the YUI Library, the CSS Reset, Fonts and Grids packages. Try visiting Finance and zooming your text size — notice that the page’s wireframe zooms right along with the text, keeping the integrity of the design intact at the larger size. This is just one benefit of these infrastructure CSS components that provide a stable, flexible, and future-friendly foundation for your web site.

6. Yahoo! Search Y!Q Drag and Drop Contextual Search Module

Y!Q Contextual SearchDrag and Drop implementations can be complicated, but some of the best implementations are quite simple. When you click on a Y!Q contextual search link on any site that implements it (like Yahoo! News, or even many non-Yahoo sites via the Y!Q API), a small window pops up with search results for the linked term. That window can be moved around using a simple implementation of the YUI Drag and Drop Utility, allowing you to position it on the page as desired, out of the way of anything it may be obscuring.

7. Yahoo! Sports Torino Olympics AutoComplete Content Navigator

AutoComplete powering site-wide search on the Yahoo! Winter Olympics site.Yahoo! Sports designers wanted to do something special for the 2006 Winter Olympics in Turin, something that would make it easier to navigate to check on the action for individual athletes, sports and countries. So they took the YUI AutoComplete Control and put it to work, developing a slick navigator that augments directory-style navigation with something much faster and more powerful. Typing a few characters in the search box and arrowing to your selection allows you to get to your destination in world-record time.

8. Yahoo! News Animated SuperTicker

Yahoo! News employs the YUI Animation Utility to promote top stories and features in its SuperTicker.

Yahoo! News takes the ticker idea to a new plateau with its smooth-scrolling SuperTicker. This module, which promotes major features toward the top of the main News page, overloads a <div> horizontally and uses the YUI Animation Utility‘s Scroll subclass to slide the content back and forth — automatically via a timer or as a navigation control when the user clicks on the arrows at the module’s lower corners.

9. Yahoo! Health Refresh Content Scroller

Yahoo! Health implements the YUI Slider Control to create a customized scrollbar.

Yahoo! Health has its own take on the horizontally-scrolling ticker, employing YUI components including the Slider Control and the Animation Utility to provide a Health Expert Advice module loaded with content in a compact space. Note the highly customized implementation of the Slider Control along the bottom of the module.

10. Yahoo! Groups Advanced Message Search

The YUI Calendar Control makes date-selection a snap. The Yahoo! Groups implementation of this is a nice one. Go to the Advanced Search page in the Messages section of one of your groups, and use the select menu for Dates to search for messages between two dates. The standard interaction model presents itself — three select menus for each date (month, day, and year), requiring six mouse clicks (or three long click-and-holds) to choose each date. But a single click on the calendar icon next to the select menus summons up the Calendar Control, and another click selects your date, giving you the same result with one-third as many clicks. Sometimes it’s the little things that matter most.

Yahoo! Groups uses the YUI Calendar Control to reduce the mousing load on date selection by as much as 66%.

What Are You Doing with YUI?

These are just ten examples of how Yahoo! is deploying the YUI Library today. These projects, and the dozens of others we’re tracking, leverage the a la carte nature of YUI, a characteristic that is allowing properties to enrich their interfaces gradually and incrementally. There are exciting things afoot in frontend engineering at Yahoo! beyond just YUI — see Yahoo! Finance’s new Flash-based charting for one example — but YUI is playing an important role in the evolution of theYahoo! product family.

Now it’s your turn: What are you doing with the YUI Library? If you’re using YUI in your own work, we’d love to hear from you and to make your project available to the larger YUI community on the YDN-JavaScript Yahoo! Group. Please share the url and a project description in the YUI application gallery and/or in the comments below.

18 Comments

  1. We’re making extensive use of the YUI in our next release. I don’t visit the Yahoo! Group so I don’t know the active projects but I’m going to guess that this will be one of the larger distrubutions and implementations of YUI.

    I’d be glad to give anybody a demo of what we’ve done. Email me :) Beta release is coming very soon.

  2. [...] Ten Things Yahoo! Is Already Doing with the YUI Library Front Page’s Personal Assistant, My Y! Drag & Drop Portal, AllTheWeb.com LiveSearch, Yahoo’s Tech, Finance, Search, Sports, News, Health, and Groups all have updates. (tags: YUI) [...]

  3. My last client is using YUI extensively and it is saving an incredible amount of time, not only in raw coding time, but also in allowing us to think a little higher level. We are using it in developing a scheduling application for a service provider. I think that’s about as specific I can be on here, and unfortunately the application is not public yet, so I cannot provide a URL. When I can, I certainly will share it with the YUI community.

    Thanks for sharing how Yahoo is using YUI. It’s especially interesting to see the different customizations of Slider. Keep up the good work.

  4. To learn some YUI libraries (mostly Animation) I originally did a little photo project:

    http://dimitry.arthero.com/photo/

    Now looking back at it and the source, I would have so many things differently, but at the same time, it was a fun learning experience.

    Dimitry

  5. we have recently decided to exclusively work with YUI for our javascript driven interactivity. we are developing knowledge intensive, multimedia meetingpoints for small to medium sized groups of people to cooperate.

    thanks for sharing this wonderfull collection of toold and utilities.

    i’ve been busy some time to create something that resembles your example nr 1. the problems i encountered are that event handling (or event firing) are different for some browsers. and that i found that hiding an element does not allways hides it’s contents.

    if you could do an article explaining how you solved these issues in building the ‘personal assistent’ that would be great.

  6. [...] Jetzt ist es natürlich interessant was genau mit Ajax und der YUI Library auf der neuen Yahoo! Seite implementiert wurde. Zum einen erhält man bei dem ersten Besuch der Webseite eine kleine Einführung der neuen Portal Elemente und zum anderen fallen einem ein paar Kleinigkeiten beim herumklicken auf. Aber für detailliertere Beispiele ist der letzte Nacht veröffentlichte Artikel “Ten Things Yahoo! Is Already Doing with the YUI Library” interessant, der eben zehn Anwendungsfälle beschreibt. [...]

  7. We are starting to use the YUI to improve our user interaction. The first step in this has been to extend to TreeView widget to create a directory browser style interface. Overall, its been a pleasant process, as much as that can be said about a javascript component.

    Great work guys, very much appreciated!

    -Daniel

  8. On the Ajaxification of Yahoo!…

    Jeffrey Veen, echoing what Mike Arrington said (“Millions of people may have their first interaction with Ajax in the coming days.”), asked Is Ajax ready for prime time? This feels like a relatively big step in the evolution of what is possible to ac…

  9. Now I am getting lots of ideas how Yahoo UI library can be used in my web apps… thanks :)


    Balakumar Muthu
    http://i5bala.blogspot.com

  10. [...] Ten Things Yahoo! Is Already Doing with the YUI Library » Yahoo! User Interface Blog (tags: Tech Yahoo YUI JavaScript WebDev) [...]

  11. OSCON Wrap-Up: Talks, People, Shirts, and YUI…

    Last week several members of the YDN team (myself included) spent some time up in Portland at the annual O’Reilly Open Source Convention. I always enjoy attending OSCON (I’ve been to all of them–scary!), and this year was no exception…….

  12. [...] Recently I posted some examples of how YUI is being put to use within Yahoo. Another point of interest for those of us involved with the YUI Library and community is how the library is being used outside of Yahoo. Members of the Yahoo! Group YDN-JavaScript, which is the YUI community’s key forum, have shared some great examples of applications using YUI. Occasionally, we’ll explore some of those examples here as well to illustrate the kinds of projects for which YUI is being tapped. [...]

  13. Victor Erazo said:
    August 8, 2006 at 8:08 am

    I`m very impressed with this library, I am really excited to apply this futures in my work..

    I will apply this library in a newspaper site, I think that it would be nice that our readers could personalyze their own newspaper layout.

    Thanks Yahoo for sharing it..

  14. [...] Cette stratégie s’applique aussi aux composants comme YUI qu’il utilise pour lui et offre en parallèle à la communauté du logiciel libre. [...]

  15. [...] Ten Things Yahoo! Is Already Doing with the YUI Library [...]

  16. [...] Photos site was well underway before YUI was released, and is therefore a notable exception as we mentioned earlier. (It does, however, use YUI’s Connection Manager.) This post is guest-written by one of [...]

  17. YUI has enabled EmailDirect to simplify a number of processes and add value to our product. Here is an example of how we utilized the YUI to break up a the process of editing html into smaller chunks for our clients:

    http://ez.emaildirect.com

  18. [...] Ten Things Yahoo! Is Already Doing with the YUI Library [...]