Yahoo! User Interface Blog (YUIBlog)

In the YUI 3 Gallery: The Preload Module

A few weeks ago, Stoyan Stefanov (@stoyanstefanov) published the result of his research about preloading components in advance without executing them. This technique can help improve the performance of successive pages that make use of the cached resources.

To leverage these results, we decided to port it to YUI 3 with a new module called "gallery-preload", which is now available through the YUI Loader.

Let’s see a preload example:

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.05-19-39'
}).use('gallery-preload', function(Y) {
  Y.preload ([
    'http://tools.w3clubs.com/pagr2/1.sleep.expires.png',
    'http://tools.w3clubs.com/pagr2/1.sleep.expires.js',
    'http://tools.w3clubs.com/pagr2/1.sleep.expires.css'
  ]);
});

How does this module improve the user experience?

Nowadays, web applications have a large footprint in terms of JavaScript, CSS and images. Most of files in each of these categories are static and can be served through a CDN for cacheability. Once any of these files gets downloaded and cached, the browser doesn’t need to download the same file in successive requests for the same page. But still, we have a big impact in the initial page request.

Recent studies suggest that 0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously; more than that will make the user impatient (Jakob Nielsen). The same is true for the loading process. We need or make our applications run fast in order to stay ahead of our user’s expectations.

With web applications like Facebook or Gmail, the user usually has to log-in first. This is a classic scenario in which “preloading” makes sense. We can estimate that every user will spend between 5 and 10 seconds interacting with a form. During this time, our application is doing nothing. If we can use this time to load cacheable files in background, those files will be available in cache when the user completes the login process — because we know where s/he is going next, we know exactly what s/he will need. In general, any web application with predictable user paths (including form workflows) can leverage this technique.

This technique is not a new one, but, as Stoyan pointed out, it’s hard to do it without executing the scripts or injecting the CSS or displaying the images themselves; there is a cost associated with these post-load steps, and we should avoid paying that cost. Also, in some cases, these files will not play nicely with the initial page. In order to avoid conflicts and minimize the time to put a solution in place, we would need to guarantee that these files get included in the cache without using them in the current page.

This process needs to be completely harmless, and even if the user navigates or stops the loading process before the files get downloaded and cached, the fallback is always in place — the destination page will try to load the file directly.

The following code shows how to implement this approach using the gallery-preload module:

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.05-19-39'
}).use('event-focus', 'gallery-preload', function(Y) {
  // waiting until the user focuses on an input element to start loading assets
  Y.on("focus", function() {
    Y.preload ([
      'http://tools.w3clubs.com/pagr2/2.sleep.expires.png',
      'http://tools.w3clubs.com/pagr2/2.sleep.expires.js',
      'http://tools.w3clubs.com/pagr2/2.sleep.expires.css'
    ]);
  }, ".myform input.query");
});

In this example, the script waits until the user focuses on one of the form input elements to start loading assets that will be used in the form’s target page. This will improve the loading time of the page once the user submits the form.

Check the differences between accessing a page directly, and preloading a set of YUI 2/YUI 3 components ahead of time:

Including few lines of codes to preload this set of components allows this page to load four times faster. No changes are required in the logic of your application, and no change is required in the target page…an inexpensive and effective performance tweak.

One more feature:

We also included a more advanced feature for those who want to be less aggressive. The module includes a built-in integration with Nicholas Zakas’ Idle Timer module; Idle Timer allows us to preload files only if the user is inactive for a given period of time. Here is an example:

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.05-19-39'
}).use('gallery-preload', function(Y) {
  // preload files only when the user is idle for at least 100ms
  Y.preloadOnIdle ([
    'http://tools.w3clubs.com/pagr2/3.sleep.expires.png',
    'http://tools.w3clubs.com/pagr2/3.sleep.expires.js',
    'http://tools.w3clubs.com/pagr2/3.sleep.expires.css'
  ], 100);
});

Conclusions:

It’s important to be ahead of our users. Knowing the workflow of our web applications, and leveraging this preloading technique will help us improve overall user experience. It’s also important to do it without increasing the complexity of our applications. This new component (gallery-preload) delivers on both of these goals.

Find conversations: bloglines | technorati

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

Join Us for BayJax on June 15 with a Special Focus on Accessibility

June BayJax is is almost here, so mark your calendars for June 15 at 5:30 p.m. For this occasion, we’ve invited three industry experts on accessibility to share their experiences with us. Nicholas Zakas and Victor Tsaran will give us an insider’s view into the work they’ve done for the newest Yahoo! homepage, while Dirk Ginader will be talking about “The Five Layers of Web Accessibility.”

Head over to the Meetup page to RSVP.

Accessibility on the Yahoo! Homepage by Nicholas Zakas and Victor Tsaran

Accessibility isn’t hard and, contrary to popular belief, it doesn’t take a lot of extra effort. Learn how the Yahoo! homepage team built accessibility into the product development cycle with the goal of providing the best possible user experience to everyone. Using a combination of progressive enhancement, ARIA, and a little ingenuity, even the most complex and dynamic features on the new Yahoo! homepage are available to everyone in interesting and fun ways.

The Five Layers of Web Accessibility by Dirk Ginader

Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility.” He extends the traditional three-layer web development model (HTML, CSS and JavaScript) with two new layers for accessibility. He shows how easy it can be to make a website or web application more accessible by following a set of simple rules.

Details:

Agenda:

• 5:30pm-6:00pm: Pizza, Drinks, Networking
• 6:00pm-8:00pm: Talks on Accessibility

When: June 15

Where: Yahoo! HQ (URLs Café, Building C), 701 1st Ave, Sunnyvale, California 94089

Find conversations: bloglines | technorati

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

Implementation Focus: Demeter

    <div id="datatable-ux">
		<div id="datatable-ux-hd"></div>

		<div id="datatable-ux-bd">
			<div id="node-depths" style="display: none">root  > Testing  > 5_Dev Testing BA  > 80000_1010</div>

			<div id="output"></div>
			<div id="yui-datatable" class="yui-dt">
			  <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" /> loading data...
			</div>
		</div>

		<div id="datatable-ux-ft"></div>
    </div>

	<div id="node-apply-wrap" style="display: none;">
		<fieldset>
			<legend>Apply to</legend>

			<input type="radio" name="node-apply" checked="checked" />Current node only<br />
			<input type="radio" name="node-apply" />Current node and child nodes<br />
			<input type="radio" name="node-apply" />Child nodes only
		</fieldset>
	</div>

   // simple example to extend the CellEditor Classes
   // short alias
   var lang = YAHOO.lang,
	  util = YAHOO.util,
	  widget = YAHOO.widget,
	  Dom = util.Dom,
	  Event = util.Event;

   // extend TextboxCellEditor
   Gcc.admin.TextboxCellEditor = function(config) {
	   Gcc.admin.TextboxCellEditor.superclass.constructor.call(this, config);
   };
   lang.extend(Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {
	   renderForm : function() {
		   Gcc.admin.TextboxCellEditor.superclass.renderForm.call(this);

		   var oHd = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oHd, this.textbox);
		   oHd.id = container.id + '-admin-editor-head';
		   Dom.addClass(oHd, 'admin-editor-hd');

		   var oCurrNode = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oCurrNode, this.textbox);
		   oCurrNode.innerHTML = 'Current node: ' + Dom.get('node-depths').innerHTML;
		   Dom.addClass(oCurrNode, 'admin-editor-pd');

		   var oApply = document.createElement('DIV');
		   this.getContainerEl().appendChild(oApply);
		   oApply.innerHTML = Dom.get('node-apply-wrap').innerHTML;
		   Dom.addClass(oApply, 'admin-editor-fieldset');
	   },

	   move : function() {
		   Gcc.admin.TextboxCellEditor.superclass.move.call(this);
		   Dom.addClass(this.textbox, 'admin-editor-pd');
	   }
   });

<%@ page pageEncoding="UTF-8" contentType="application/json; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
{"PropertySet":{
"Property":[
<s:iterator value="displayPropertyResultList" status="index">;
    {
    "Id":"<s:property value="id" />",
    "Name":"<s:property value="name" />",
    "Type":"<s:property value="type" />",
    "Value":"<s:if test="%{value != null}"><s:property value="value" /></s:if>",
    "ApplyFrom":"<s:property value="applyFrom" />",
    "ApplyTo":"<s:property value="applyTo" />",
    "Readable":"<s:property value="readable" />",
    "Writable":"<s:property value="writable" />"
    }
    <s:if test="%{!#index.last}">,</s:if>

</s:iterator>
]}
}

Find conversations: bloglines | technorati

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

In the Wild for June 4, 2010

We may be in the midst of the NBA finals, but In the Wild leads off this week with an item that gets us thinking about August. And football, in turn, gets us thinking about marriage, and in particular about the first known use of YUI in a marriage proposal. Let us know in the comments or on Twitter if we missed anything important.

• YUI 3.1.1 on NFL.com: NFL.com’s fantasy portal employs YUI 3.1.1 Overlay, Anim, History, and more.
  
• Free CMS Onpub Built with YUI 2: “Onpub is a PHP/MySQL web content management system. Onpub tightly bundles [the] Yahoo! User Interface Library [YUI 2] and CKEditor to enable the creation of standards-compliant, cross-browser, dynamic HTML websites. Onpub is designed to provide a base of well integrated components that have a proven track-record for helping web developers build websites that are easy to update, reliable and good looking.” (Original source.)
  
• The Big Question (with YUI CSS Reset): Paul Irish asked on Twitter if this was the first marriage proposal aided by YUI?  I’m not sure, but on some level having a reset of all quirky, inherited, upstream style rules seems like a good metaphor for what you do when you tie the knot.  Congrats to the couple; I’m assuming that Carrie said yes! (Original source.)
• Juego De Snake Built with YUI 3 by @jldorta: Caridy pointed out this nice snake game built on YUI 3.  Note the Twitter status rotator at the top of the page, also built with custom YUI controls (on the YUI 2 codeline). (Original source.)
  
• Matt Snider’s Mac-style Radio Button Preferences As a YUI 3 Module: Writes Matt: “One of my favorite UI features of the Mac OS, both OSX and the iPhone, is the way it handles radio inputs. Instead of having small, hard to click little round circle (like the web), there are large buttons that are obviously grouped by use of a connecting bar. The best place to see this is in the system preferences on OSX. Today’s article, introduces a widget that will do the same, by converting existing radio buttons into a Mac Preference Radio.”
  
• New Landscapes and Interiors Site Built by @joedag32 with YUI 2 JS and CSS Tools: Writes developer joedag32: “We…relied on the Yahoo! YUI Library to build the site as well. The site makes use of the following YUI components: CSS Reset, CSS Fonts, CSS Grids, Yahoo Global Object, DOM Collection, [and] Event Utility.  YUI really helped us to work faster and knowing that their library is used and tested by Yahoo! for A-Grade Browser support is a real time saver.” (Original source.)
  
• Bryon Wyly on Secure (YUI 2-based) Pie Charts for SharePoint: Bryon Wyly writes on endusersharepoint.com: ‘I have done several blogs on how to use the google apis to create dynamic pie charts of lists in SharePoint based on code written by Claudio Cabaleyro and published at endusersharepoint.com. Perhaps the biggest request I have heard is, “How can I use these charts on my secure intranet?” Since Google Apps is an image that is shipped back to you after sending the required data and since SSL is not an option, Google Apps are useless for lists that use secure and sensitive data…  A recent comment on my blog suggested I look at…YUI as a possible solution. After a few hours work, I was able to marry a YUI pie chart with the JQuerry SharePoint List parser and create a Pie Chart generated by your SharePoint List, that does NOT send you data outside the network.’  Check out his post for full details.
• Integrating YUI with Wicket: Mo Hammer has written up a tutorial on using the YUI Rich Text Editor with Wicket: “I was searching for a good rich-text editor for a Wicket project for some time, and eventually decided to use the YUI editor. It looks fairly nice, and can be configured quite well. Here, I’ll demonstrate how to use it with an HTML code editing button, as described in this example.”
  
• Selenium and YUI Buttons (by @adamgoucher): Adam Goucher has written a tutorial on how to work with YUI 2 Buttons in the context of Selenium tests.
• Nagare IDE Using YUI 2 (via @jlcarre): From the Nagare wiki: “Nagare IDE is a pure Web Integrated Development Environment dedicated to the Nagare Web framework. Using YUI, the Bespin editor, ajax and comet communications, it offers the browsing of your projects, the edition of the sources, the debugging of the raised exceptions and the consultation in real-time of the applications logs.” Nagare is “an Open-Source Python framework dedicated to web applications development. Its set of advanced features as continuation, direct callbacks registration, programmatic HTML generation, combined with its strong components model allow [you] to quickly and easily build highly complex and reusable applications.” (Original source.)
  
• Free YUI 2.x API Documentation Dictionary for Mac OS X 10.5 Users: (Note: I haven’t confirmed whether this works on more recent versions of Mac OS X.) From the product page: “In addition to using Dictionary.app it is also possible to find a definition through the ‘Look up in Dictionary’ context menu shortcut (works in Safari, Mail.app and any other application that supports it) or even from a Dashboard widget for Dictionary.”

Find conversations: bloglines | technorati

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