2009 » November » Yahoo! User Interface Blog (YUIBlog)

Implementation Focus: OCLC/WorldCat

November 19, 2009 at 10:33 am by Fiz Mohamed | In In the Wild, YUI Implementations | Comments Off

Mohamed Fiz Fiz Mohamed has worked for OCLC since 2004 where he’s a senior UI/UX (accessible) designer/developer for a number of high profile products and is responsible for a UI Cookbook/Library. A wealth of commercial freelance experience since 1993 has resulted in a wide range of technical and graphical skills. He lead the UI design for the launch of Cinema.com and also was the UI/UX designer for the US National Archives & Records Administration ARC project.

YUI TabView on Worldcat.

Here at OCLC — a worldwide non-profit library cooperative that provides web visibility for library catalogues around the world — we initially came across YUI while discussing grid frameworks early in 2008. Later that year the subject of JavaScript toolkits arose, and we recalled YUI as part of the investigation for one of our products. We looked at a number of other popular toolkits, and we tried to approach the toolkits from the point of view of both a developer and designer. While it was a close call between some, I was very impressed with the YUI, especially with the YUI 3 intro at that time which showed that Yahoo’s developers weren’t afraid to make big changes for the better, and had borrowed ideas from other mature toolkits and improved upon them. Even using YUI 2 would save us time with its fully-featured set of interactive widgets. On top of that, YUI was supported both by Yahoo and an active developer community.

YUI Carousel on WorldCat.org

YUI components have since found their way onto OCLC’s WorldCat.org, a site that allows users to search for an item of interest and discover which libraries near them own that item. WorldCat.org has become the Web destination for cross-library searching and uses YUI components in several locations:

TabView: One the homepage, tabs built on YUI TabView let a user click between a default search of all formats and one of several narrowed, format-specific searches, including books, DVDs and articles. TabView is also used on library profile pages (such as http://www.worldcat.org/libraries/14229), where users can tab through recently-catalogued items by genre.
Carousel: The WorldCat.org detailed record page provides a host of evaluative information about an item plus links to related items. Record pages on OCLC’s “WorldCat Local” service, a locally-branded and focused instance of WorldCat.org that serves as a library’s online catalog, uses the YUI Carousel to present a scrollable assortment of similar works by the same author or about the same subject. (See page bottom of http://ucsd.worldcat.org/oclc/3952807&referer=brief_results for an example.)
Reset/Fonts/Grids CSS: We use the complete YUI Reset package on the detailed record page, our most complex layout and most important page since it connects users to the local catalogs of our member libraries. The CSS package helps us maintain a consistent presentation across supported browsers, especially with user adjustment of font sizes — a key to making the page accessible for library users with limited sight.
Menu: WorldCat.org will soon use YUI Menu to create its main navigation and user-account menubar. We liked the better support for keyboard and mouse navigation over our current third-party utility.

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

YUI Theater — Reid Burke: “Building YAP Applications with YUI”

November 19, 2009 at 9:40 am by Eric Miraglia | In YUI Theater | Comments Off

The Yahoo! Application Platform (YAP) allows you to write programs that run on the Yahoo! network — on the Yahoo! home page, My Yahoo!, and beyond. Reid Burke (@reid) of the YAP team came to YUICONF 2009 to talk not only about YAP but about how you can use YUI 2 within your YAP applications (we wrote about this on YUIBlog not long ago).

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater; the downloadable version is much smaller, optimized as it is for iPods, iPhones, and other handheld devices.

Subscribing to YUI Theater:

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

YUI Theater — Todd Kloots: “YUI 3 Sugar”

November 18, 2009 at 6:38 pm by Eric Miraglia | In YUI Theater | Comments Off

Todd Kloots (@toddkloots) gave two talks at YUICONF 2009. In this session, he explores what he regards as the hidden gems of YUI 3 — the useful methods and properties found throughout the library’s core modules that help your write fast, stable, terse code. If you use YUI 3, you owe it to yourself to make time to take in this session…you’ll be glad you did.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater; the downloadable version is much smaller, optimized as it is for iPods, iPhones, and other handheld devices.

Subscribing to YUI Theater:

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

YUI Theater — Allen Rabinovich: “YUI 3 Infographics”

November 18, 2009 at 1:51 pm by Eric Miraglia | In YUI Theater | 3 Comments

Allen Rabinovich spoke at YUICONF 2009 last month about the future of the YUI Charts project. He and colleague Tripp Bridges are hard at work on the next generation of the product, and in this session Allen talks through the thinking behind the new architecture and what we can expect as the YUI 3 version comes to fruition.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater; the downloadable version is much smaller, optimized as it is for iPods, iPhones, and other handheld devices.

Subscribing to YUI Theater:

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

Angela Sabas Speaking on YUI 3 at Open Hack Day in Indonesia on November 21

November 17, 2009 at 11:17 pm by Eric Miraglia | In YUI Events | Comments Off

The only thing that’s not awesome about Yahoo! having an Open Hack Day in Indonesia this weekend is that it’s too far away for many of us in California to make the trip. Fortunately, an excellent group of international Yahoo!s will be carrying the purple flag — and talking about projects ranging from YQL to YUI.

Speaking about YUI to the hackers in Jakarta will be Angela Sabas from Yahoo! Singapore. Angela has been a frontend engineer with Yahoo! for two years, most recently working with Yahoo! 360plus, the blogging product for Vietnam, as well as other offerings such as the iCafe initiative, Mash, and News. Angela will be providing a hacker-oriented introduction to YUI 3; she’s speaking at 11 a.m. on Saturday. If you’re going to be in Jakarta, head over to the event website to sign up.

If you’re considering a YUI 3-based hack for the event, you can do some carbo-loading on YUI Theater, where we’ve been compiling an assortment of talks from last month’s YUICONF 2009 in Sunnyvale. Contributing a YUI 3 Gallery item is a great way to impress your hack-day judges…

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

Event Delegation With YUI 3

November 13, 2009 at 2:31 pm by Caridy Patino | In Development | 6 Comments

More and more web applications are loading content on demand with AJAX or injecting DOM fragments into elements to update old content with new content. If the new content includes certain JavaScript functionality — for example, links that trigger popup overlays — we need to add event handlers after the content gets inserted and remove them just before newer content comes in, in order to avoid memory leaks in IE. These are situations where “event delegation” plays an important role for web applications.

A Use Case

Consider a widget that displays the latest tweets from YUI Developers. The list is represented by a ul element, and each tweet is represented by a li element.

The list is refreshed every 2 minutes using AJAX and the user can filter the list using the search box. If a user clicks on an avatar image or a profile link, we want to display more information in a YUI Overlay.

Simple Solution

With YUI 3, it is simple to add event listeners to the elements directly, as soon as they become available:

Y.on("click", handleClick, "a.profile");

As you can see, this is pretty simple. But, we would have to do this every time the content changes, which adds overhead to our code, not to mention the need to remove each of the listeners with Y.detach() before replacing older content.

The Bubbling Technique

Taking advantage of event bubbling, we can add a listener to a container element, or even to the document, to catch an event on its way up the bubble chain. In the callback function, we’d analyze the event target to identify if it’s what we’re expecting (by classname or id) before executing our overlay code.

This technique reduces the DOM overhead of adding event listeners to each individual element, but we still need to analyze every single click in the container and filter for the proper targets within our callback function. I wrote an article about this technique a while ago, explaining in detail how the Bubbling Library YUI Extension works.

But this is not new and already a widely used concept. So, what is new in YUI 3?

Introducing `Y.delegate()`

YUI 3 introduces a new method called delegate() which is based off the event delegation principle and adopts a familiar syntax:

// Defining simple listeners on each element:
Y.on("click", handleClick,
  "#container ul li a.profile");

// Defining listener on a container using the delegate() method:
Y.delegate('click', handleClick,
  '#container', 'ul li a.profile');

The difference here is that delegate() takes advantage of event bubbling and applies a listener on a container element ('#container'), but it doesn’t stop there. When the event fires, each target is matched against the given selector ('ul li a.profile') before the callback is executed. As you can see, the function definition for the callback function handleClick() can be the same for both techniques. From the callback’s point of view, the differences are normalized by the Event utility. Here is the visual description of this:

// Markup
<div id="container">

  <ul>
    <li><a href="avatar1.html" class="profile"><img src="1.jpg"/></a> <a href="username1.html" class="username">Name 1</a></li>
    <li><a href="avatar2.html" class="profile"><img src="2.jpg" /></a> <a href="username1.html" class="username">Name 1</a></li></li>
    <li><a href="avatar3.html" class="profile"><img src="3.jpg" /></a> <a href="username1.html" class="username">Name 1</a></li></li>
  </ul>

</div>

If we click on the second avatar image (ul li a img), the event bubbles up the DOM tree to the a link with the classname "profile", and the callback method handleClick() is called. Regardless of the technique used, it receives the same Event Facade structure:

// Markup
var handleClick = Function (e) {
   // e.target -> img: the actual click target
   // e.currentTarget -> anchor: the element the
   //                    listener was attached to (on:click),
   //                    or the element that matched
   //                    the delegation specification (delegate:click).
};

Performance Gains

This new feature allow us to improve performance drastically, particularly in two areas:

Decreasing initial load time when multiple child elements require event handling
Decreasing run time of dynamic injections caused by user interaction

In both cases, improvements are gained by reducing the number of DOM interactions. As JavaScript engines get faster, the reality of the DOM bottleneck remains. Event delegation in YUI 3 moves the overhead of walking the DOM tree from the loading process to the point of user interaction, and decreases complexity by removing the need to match target elements within the callback. Instead, delegate() tests the event target (e.target) against the selector ('ul li a.profile') after the event is fired but before the callback is executed, which is especially useful in complex DOM structures.

The true beauty behind this implementation, as I mentioned before, is that the callback signature is exactly the same. We don’t need to change the code to introduce delegate() to our code. We just need to change how the listeners are defined and YUI 3 will do the rest.

Adding Functionality

If we also want to display the profile overlay when a user clicks on the Twitter username, which is an anchor with class "username", we just need to add one more selector to the final argument:

Y.delegate('click', function(e) {
   // e.target -> target node
   // e.currentTarget -> matching node
   // e.container -> container node (in this case "#container")
   // e.currentTarget.get('className') -> "profile" or "username"
   e.halt(); // shorthand for stopPropagation() and preventDefault()
}, '#container', 'ul li a.profile, ul li a.username');

The event delegation callback is similar to a simple listener callback, but it also provides additional information through the Event Facade object, like e.container which represents the element where the event was caught.

Delegate as a Node Plugin

In the same way that on() is available not only from the Y instance, but also at the YUI Node instance level, delegate() is also available as a Node plugin. Here is an example:

// using YUI3 Node Delegate Plugin:
Y.one('#container').delegate('click', handleClick, 'ul li a.profile');

Just make sure to include in your use() statement either "node" or "node-event-delegate", and the feature will be loaded for use in your sandbox. Also note that delegate() can be used with other events that bubble up in the DOM and even for those that are emulated by YUI Event Utility, like focus and blur.

Conclusion

Event delegation with delegate() is a really cool feature, especially for those who want to create complex applications with a lot of user interaction and AJAX features. This is also something that you can introduce later in your application without any overhead or extra complexity in your code, for example, during a performance optimization process. And finally, you should know that most of the upcoming widgets in YUI 3 will be sure to take advantage this technique from the start.

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

In the Wild for November 13, 2009

November 13, 2009 at 7:17 am by Eric Miraglia | In In the Wild | 1 Comment

Do you have some YUI-related news or an implementation you’d like to share? Let us know in the comments.

@ara_p’s Tool for Graphing YUI Animation Easing Methods: Newly-minted Yahoo! Mail engineer Ara Pehlivanian posted a nifty tool that helps you visualize the various choices afforded you by the easing library in the YUI 2 Animation Utility. (Original source.)
Kissy Editor, a Simple YUI-based Text Editor Specializing in Chinese Text: Xiaoma, the lead F2E at Taobao.com in China, wrote to tell us about a Taobao project called Kissy Editor. Kissy Editor is a simple Chinese-language text editor based on YUI 2 Yahoo, Dom and Event. It’s open-source and hosted on Google Code; if you’re interested in collaborating on the project, get in touch through the Kissy project site.
YUI in Use at Playground-focused Non-profit KaBOOM.org: Elliot Laster, web developer at KaBOOM, wrote in to tell us about the work his team is doing with YUI 2. YUI 2 is used throughout the site, as is jQuery, and is used extensively in the projects section, where you can learn about the playground projects that that KaBOOM is tracking in your area (like this one in San Francisco’s Guerrero Park). KaBOOM is “a national non-profit dedicated to bringing play back into the lives of our children. We passionately believe that play has purpose. We are driven to create a movement in support of this belief.” (Original source.)
YUI Helping to Power WhatPercent.com: Writes Sean from WhatPercent.com: “YUI has really helped us get our site where we wanted it to be fast! Our site is a social media site that let’s users check out what the latest online talk is, create personal polls, product reviews, etc, in a quick clean environment supported by YUI’s awesome tooltip component and a number of others. Also very exciting was the lack of cross browser compliancy nightmares as we used YUI Reset CSS and YUI Buttons.” (Original source.)
YUI DataTable, TabView, Dialogs and More on DomainSuperstar.com: @domainsuperstar tweeted recently about their YUI-intensive interface. It makes use of a host of YUI 2 components to drive a comprehensive suite of domain research and management tools. (Original source.)
Jeff Craig’s Chromahash is the First YUI 3 Gallery Item on Reddit Programming: As we start the second week of the YUI 3 Gallery, Jeff Craig (@foxxtrot) has hit a quick milestone, registering the first YUI 3 Gallery item to hit Reddit’s Programming page. GitHub example is here; YUI 3 Gallery module is here. Congratulations, Jeff!
Anthony Super’s Row Grouping for YUI DataTable: We missed this in August when he released it, but Anthony Super has a row-grouping add-on for YUI DataTable that others in the forums have picked up on. If row grouping is a feature you’ve been looking for, it’s worth checking out. Mark Mansour has a video up of how he’s using this functionality on his own site:
Andrew Wooldridge — YUI 3 Gallery is Prometheus for JS Developers: Writes Andrew: “Just like Prometheus brought fire down from the heavens for mankind, the YUI team has made it possible for you to harness the power of YUI as well as become a part of the YUI ‘family’ yourself. If you build some set of code using YUI, you can have it show up on the gallery. Nothing special right? Well, if you jump through a few other hoops (clone their repo on github, and agree to their licensing) you can have your own lib code served through their CDN. Yes, you heard that right, the same CDN that Yahoo uses to push code out to their edge servers to make it fast and ‘local’ to the machines and browsers that need it will be hosting your code as well. You might also someday get a ‘golden ticket; and be allowed to be part of YUI itself. This is a pretty unprecedented level of openness in a js library.” Read his full post here. (Original source.)
LA Public Library Using YUI: Stoyan noted recently that the Los Angeles Public Library is using YUI on its book details page, using Adam Moore’s TreeView Control to expose information about which branches have copies of a book in circulation and whether those copies are available or checked out. (Original source.)
Erik Eldridge’s Summary of Cardy Patiño Mayea’s “Custom YUI 3 Modules” Talk at YUICONF: Erik Eldridge from the Yahoo! Developer Network has a great summary of Caridy Patiño Mayea’s talk on YUI 3 custom modules from YUICONF 2009.
Philip Tellis’s Review of Matt Snider’s Storage Utility Talk at #YUICONF: Philip Tellis journaled Matt Snider’s talk from YUICONF on the Yahoo! Developer Network blog. Writes Philip: “The first thing that struck me during the talk was how easy it is to use this utility. The storage utility allows web developers to store far more data on the client side than is possible through the use of cookies and it cleanly abstracts out the details of the specific storage engine used. It currently supports HTML5, Google Gears, and Flash storage engines, but is easily extensible to handle more engines in future.”