Yahoo News

Using YUI 2 components in the context of YUI 3 implementations is important for some implementers making the transition between YUI 2 and YUI 3. In some cases, we simply want to transition our code in stages, but we want to do so within the context of a YUI 3 implementation pattern. In other cases, we may be relying on high-level components like YUI DataTable that aren’t yet present in YUI 3.

As part of the upcoming 3.1.0 release, Adam has improved the experience of using YUI 2 components from within YUI 3. To this end, he’s added some intelligence to YUI 3’s loader that allows you to load YUI 2 modules directly from your YUI().use() statement:

YUI().use("yui2-button", function(Y) {

	//YAHOO is not a global object; it is sandboxed along
	//with the rest of your YUI 3 functionality.  This line
	//is necessary if you want to use existing implementation
        //code:
	var YAHOO = Y.YUI2;

	//YUI 2 implementation code
	var button = new YAHOO.widget.button("mybutton");

});

You’ll find this functionality in the YUI 3 codeline as of build 1933, and we’ve deployed an experimental YUI 3 build (nominally “yui3.1.0pr2″) and an early build of YUI 2.8.0 functionality wrapped for use in YUI 3.

When you download YUI 3’s latest source from GitHub you’ll find some working examples in sandbox/loader (look for files with the 2in3 prefix). These examples demonstrate the use of a number of YUI 2 modules. We’ve posted a simple live example that shows how to use YUI 2 DataTable within YUI 3, which is one of the most frequently requested transitional features.

Key points about the YUI 2 in 3 effort:

• This work is available in the latest builds of the upcoming 3.1.0 release (build 1933 and later). It is not available in 3.0.0 or in the 3.1.0pr1 preview.
• The project is in an experimental state. Neither the yui3.1.0pr2 build nor the wrapped YUI 2 builds from which it pulls have been extensively tested, although we’ve staged them on the CDN to make it convenient to explore the implementation.
• Download the latest build for examples. You’ll find a few of Adam’s proof-of-concept files in sandbox/loader — other than the simple example above, those are the best code references available until the official 3.1.0 release (which is still about a month out).
• Your feedback in the forums is welcome — and, if you find problems, we’re interested in hearing about them.
• When used this way, YUI 2 does not create a global YAHOO object. YUI 2 components are wrapped in YUI 3 module definitions and they stay contained in the YUI 3 sandbox to which they’re attached. The line from the codesample above, var YAHOO = Y.YUI2;, is needed in order to cut and paste YUI 2-style implementation code — or you can change YAHOO references to Y.YUI2.
• YUI 2 releases are supported back to 2.2.2 — the latest bug-fix release for every minor version is supported (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8.0). You can specify the YUI 2 version to use as follows: YUI({yui2: '2.7.0'}).use('yui2-button', ...). The goal here is to allow you to avoid migrating to 2.8.0 (or later) prior to a YUI 3 migration.

Gallery Is Easier To Use, Too

Adam’s enhancements to YUI 3’s intrinsic loader have improved the experience of working with the rapidly growing YUI 3 Gallery, too. As of 3.1.0, you’ll be able to bring gallery modules into the page from the use() statement without additional configuration — the loader will be able to determine and resolve dependencies for you and will do the right thing with respect to combo’ing the gallery source code with other YUI files. Here’s an example Dav Glass put together for 3.1.0 that demonstrates the use of his YQL Query gallery module in combination with a pre-release build of 3.1.0.

Natively, JavaScript has a very limited set of functions for working with numbers located on the global Math object. Mostly these functions are for working with exponents, trigonometry, and rounding. And while these functions are needed and efficient, the Math API has remained unchanged for years, and probably won’t be improved anytime in the near future. So it is up to the developers of JavaScript libraries to create and maintain a component for working with numbers.

The Number component in the YUI 3 Gallery, derived from work originally used on Mint.com, aims to fill in missing number-related functionality. It provides a light-weight set of static functions for working with numbers. The Number component weighs in at about 1.8kb after minification and before gzip; it’s supported by all A-grade browsers.

One of the features in Number that I use the most is the format() function, which injects a formatted number into a string by evaluating the format of the placeholder number in the string. (Note: This is similar to the formatting support Y.DataType.Number currently provides, but rolls up the separate configuration properties which Y.DataType.Number.format accepts into a single formatting pattern string.) The function works with all symbols, but it formats numbers according to the English standard. Here are a few example of how to use format() from its unit test:

var n = 1111.11,
	formatDollars = "$0,0.00'" // use comma and decimal when formatting
	formatPercent = "0.00%", // use decimal when formatting
	formatRound = "0,000", // use comma when formatting
	formatText = "Please add the $0,0.00 to my tab!";

Y.Assert.areEqual("$1,111.11", Y.Number.format(n, formatDollars));
Y.Assert.areEqual("1111.11%", Y.Number.format(n, formatPercent));
Y.Assert.areEqual("1,111", Y.Number.format(n, formatRound));
Y.Assert.areEqual("Please add the $1,111.11 to my tab!", Y.Number.format(n, formatText));

Other useful functions include:

• random(): provides an easy API for getting random whole numbers;
• isBetween()/isNotBetween(): simplifies the evaluation of number ranges;
• radian()/degrees(): when working with the Math trigonometry functions (such as Math.cos()), which expect radians instead of degrees, both radian() and degrees() are useful for converting values.

To use the Number Gallery component, first include the script:

<script
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js"></script>

Then include 'gallery-number' in your use() function, to get the following functions:

YUI().use('gallery-number', function(Y) {
	Y.Number = {
		degrees(number),
		format(number, format),
		getPrecision(number),
		isNotBetween(number, number, number, boolean),
		isBetween(number, number, number, boolean),
		isPrime(number),
		radians(number),
		random(number, number),
		roundToPrecision(number, number)
	};
});

These functions were modeled after the native Math functions and, like the Math functions, the functions on Y.Number return NaN if the value provided is not a number. If you would like to contribute to the development of or require new features added to Number, please leave a message on the Forum.

Child safety seats. Toyota cars. Pringles potato chips. All three have been the subject of recent recalls because of concerns about consumer safety. But if you hadn’t watched the news to learn about the Pringles recall, how would you know whether the snacks in your pantry might make you sick? 

Fortunately you can subscribe to feeds from various consumer watchdogs and monitor them on your My Yahoo! page. Here are some good examples to consider:

• The Food and Drug Administration — Recalls/Safety Alerts: This information from the U.S. government keeps you current on a wide range of possible food safety issues.
• Safercar.gov — Vehicle Recalls: This roundup from the National Highway Transportation Safety Administration includes announcements about specific car models and components that may have safety concerns.
• Justia’s Auto Recalls Homepage: You can actually browse and select an RSS feed that is specific to your vehicle’s manufacturer by going directly to the website.
• Household Product-Related Recalls: This feed from the U.S. Consumer Product Safety Commission covers possible safety issues on everything from window shades to tea kettles.

You can also explore the sites above for specific recall updates on drugs, dietary supplements, or children’s products, among others.  Subscribing to any of the above feeds will make it much easier to keep tabs on safety information for everyone in your household.
 
Apps mentioned in this post:

• Add Food and Drug Administration — Recalls/Safety Alerts
• Add Safercar.gov — Vehicle Recalls
• Add Justia’s Auto recalls Homepage
• Add Household Product-Related Recalls

Tom
- My Yahoo! Editorial

Last week, Yahoo! JavaScript architect Douglas Crockford delivered the fourth installment of his Crockford on JavaScript series:

1. Volume One: The Early Years
2. Chapter 2: And Then There Was JavaScript
3. Act III: Function the Ultimate
4. Episode IV: The Metamorphosis of Ajax
5. Part V: The End of All Things (March 31 — RSVP)

In this session, Douglas tackles the DOM. On the one hand there was JavaScript, he says, and JavaScript is “what made the browser work.”

On the other hand, there was the Document Object Model, also known affectionately as the DOM. It is what most people hate when they say they hate JavaScript. Most of the people who say they hate JavaScript don’t know JavaScript, might have never seen JavaScript, but they’ve felt the DOM alright. If you don’t know what the difference is and you say, “JavaScript is the stupidest thing I’ve ever seen,” you’re not talking about JavaScript, you’re talking about the DOM. The DOM is the browser’s API. It is the interface. It provides JavaScript for manipulating documents.

The DOM may be imperfect, but it’s nonetheless crucial to what frontend engineers do when they write web applications. In this talk, Douglas provides an overview, situated historically, of where the DOM came from, how it achieved ascendance with Ajax, and what the future might hold. In Douglas’s inimitable fashion, this history starts with Sir John Harrington and takes us up to the present day. A few choice words for CSS are among the many applause lines for veteran developers:

I find within the community of people who use CSS great affection for it. They’re totally invested in CSS, they love it. They can’t imagine any other way of doing formatting in a document. It’s it. It’s sort of like watching an episode of Cops where the cops come in and break up the family dispute, and there’s this “CSS ain’t bad, you just don’t understand it like I do. I know it hurts me, but I make mistakes, I’m wrong.” CSS is awful, and it amazes me the way people get invested in it. It’s like once you figure it out, kind of go “oh, OK, I see how I might be able to make it work,” then you flip from hating it to loving it, and despising anybody who hasn’t gone through what you’ve gone through. It doesn’t make sense to me.

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.

• Download HD video (480p ~720MB)
• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. ‘Functions are the very best part of JavaScript,’ Crockford says. ‘It’s where the power is, it’s where the beauty is.’ Watch the video to learn why.
• Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
• Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
• Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network’s international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI).

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

We’re pleased to announce the YUI 3 Gallery Contest 2010. Thanks to our friends at the Yahoo! Developer Network, we have a conference pass to the sold-out JSConf 2010 to offer. We’re pairing that with a $500 gift certificate to Expedia.com to help the prize winner get back and forth to Virginia for the conference.

The prize will go to the person who authors the best new YUI 3 Gallery module between March 5 and March 22 and submits it for community use under YUI’s BSD license. As with any contest, there are lots of rules. We’ve noted some of the big ones on the contest page and you can read the full legal writeup here.

We’re thrilled with what we all as a community have done since late 2009 to make the Gallery a hotbed for YUI 3 growth and innovation. Greg Hinch’s Form module (submitted hours after the Gallery opened), Ryan Grove’s excellent Storage and History modules, Ilyan Peychev’s über-popular Accordion, Julien Lecomte’s SimpleMenu, Stephen Woods’s Timepicker, Adam Moore’s TreeView, Jeff Craig’s Chromahash, Dav’s own YQL module…and dozens more.

We hope you’ll consider doing some YUI 3 hacking over the next few weeks to add to this collection. We’ve listed some resources on the contest page, and there’s a forum thread going with ideas for new modules (please weigh in there even if you’re not going to be writing a module for the contest yourself). And, of course, the current Gallery is a good source of inspiration.

Happy hacking, and we’re looking forward to seeing a YUI Gallery author head out to JSConf next month!

Our friends over at JSMag are celebrating their first birthday. If you haven’t read JSMag it’s a monthly PDF magazine that covers news on hot JavaScript topics and provides practical tutorials.

JSMag are giving away a free issue from their first year. Simply log into your JSMag account and use the code ‘oneyear’ to get a free issue.

When selecting your free issue, you may want to seek out the articles in JSMag written by Yahoos frontend engineers or about YUI over the last 12 months:

• March 2009
  • Matt Henry on unit testing with YUI
• April 2009
  • Yours truly on Profiling your JavaScript
• June 2009
  • Yours truly on Build Scripts
• July 2009
  • Stoyan Stefanov on Function Patterns
• August 2009
  • Jon LeBlanc on YQL and browser MVC
• August 2009
  • Stoyan Stefanov on function patterns
• September 2009
  • Chistian Tiberg on using administration system with YUI
  • Stoyan Stefanov on more function patterns
• October 2009
  • Chistian Tiberg on inline editing with YUI
  • Stoyan Stefanov on more constructor patterns
• November 2009
  • Yours truly on Enhancing YQL with server-side JavaScript
  • Stoyan Stefanov on more inheritance patterns
• December 2009
  • Christian Tiberg on using the YUI2 datatable and chart
    components
  • Stoyan Stefanov on more reuse patterns
• January 2010
  • Christian Tiberg on using YUI to build desktop gadgets for Windows
  • Stoyan Stefanov on the sandbox pattern
• February 2010
  • Stoyan Stefanov on the private members pattern
• March 2010
  • Yours truly with an overview of server-side JavaScript
  • Stoyan Stefanov on currying

Happy Birthday, JSMag!

I was working on an internal product here at Yahoo! that required users to input time-of-day in a specific format. I decided that rather than force users to type exactly the right format it would be easier just to provide a UI widget for time input. I’ve always liked the jQuery timepicker; it’s a simple and fast way to input time and meets my use case perfectly. Of course, we were using YUI 3, so I decided to recreate the widget with YUI 3. (This is quick and easy with the YUI 3 Widget foundation.) I thought it might be useful to others working with YUI, so I decided to give it right back to the community for use in your own projects.

Using the picker should be pretty simple for you if you are familiar with the basics of YUI 3. (see a live version here).

To use the picker in your own project include the script:

	<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.25-22/build/gallery-timepicker/gallery-timepicker-min.js"></script>

Then instantiate and render the widget:

YUI().use('gallery-timepicker', function(Y){
	//Pass a configuration object to the timepicker
       var picker = new Y.Saw.Timepicker(
           {
			   //an element that will contain the timepicker
               contentBox: 'div.foo', 

			   /the initial time
               time:{
                   hour:0,
                   minute:0
               },
               strings:{
                   am:'AM',
                   pm:'PM',
                   seperator:':'
               },
               delay:5 //delay before selecting a box on mouseover
           }
       );
      picker.render();
});

Like all YUI 3 widgets the timepicker constructor takes a configuration object to control the initial display of the widget. Manipulating the widget is then done via the widget methods render, hide and show. The render method is where the actual DOM elements are created. hide and show simply add and remove the class yui-timepicker-hidden to the elements bounding box. This class (and the additional css classes for the widget) must be implemented for the widget to behave properly. For simplicity’s sake, here are the styles I am using on the running example:

	/* yui reset assumed */
	.yui-timepicker{
        display: block;
        margin: 5px;
        left: 0;
        position: relative;
        background: transparent;
    }

    /* standard for widgets, in this case just pushing the hidden one off the screen*/
    .yui-timepicker-hidden{
        left: -9999em;
        position: absolute;
    }

    .yui-timepicker{
        color: #000;
        font-family: verdana;
        text-align: left;
    }

/* the picker is actually two ordered lists */
    .yui-timepicker ol{
        display: block;
        position: relative;
        left: 0;
        .left: 5px;
        margin: 0px;
        padding: 0px;
        height: 24px;
        text-align: left;
        -webkit-transition: left .1s ease-in;
    }

    .yui-timepicker li{
        list-style: none;
        display: block;
        float: left;
        position: relative;
        left: 0;
        overflow: hidden;
        width: 19px;
        padding: 1px;
        margin: 0 2px 0 0;
        border: 1px solid #999;
        text-align: center;
    }

    .yui-timepicker li{
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    }

	/* highlight the selected times */
    .yui-timepicker li.yui-timepicker-active{
        background: #000;
        color: #fff;
        -moz-box-shadow: 2px 2px 2px #ccc;
        -webkit-box-shadow: 2px 2px 2px #ccc;
    }

I’m using webkit animations just for style; for your project, customize these styles as you see fit. For most purposes you will want to hide the picker initially. Calling the hide method just adds the yui-timepicker-hidden style to the widget’s bounding box. I’ve added a click handler to my wrapper element so that a click on the element with the id time will cause the widget to appear/disappear:

	 picker.hide();
     Y.get('#main').on('click', function(e){
         var target =e.target;
         if(target.test('#time')){
             picker.toggle();
         }
     });

To make the picker actually useful I will listen to the

timeset

event, which returns an object with information about the selected time, I’m going to use the “s24hour” member of the object passed to the handler. That’s a string representation of the time in 24 hour format. (also available are hour, minute, ampm and s12hour):

	picker.subscribe('timeset', function(e){
        //timeset is a custom event that fires when the time is *set*
        //use this rather than timeChange
        Y.get('#time').set('value',e.s24hour);
    });

//add a handler to "cell click" to hide the picker when the user clicks on a cell
    picker.subscribe('cellclick', function(e){
       this.hide();
    },picker);

That’s all there is to it! Enjoy.

Continuing the Crockford on JavaScript lecture series (Videos: Part One, Part Two, Part Three), Douglas will be presenting Wednesday at Yahoo! headquarters in Sunnyvale, CA. Attendance is free, but seating is limited (a few tickets remain for each of the final shows) — a full schedule including links to RSVP is available on the event website.

Wednesday’s session is entitled “Episode IV: The Metamorphosis of Ajax.” We hope to see you there.

Thanks to YUI engineer Allen Rabinovich for the poster design.

EtreProprio.com aims to provide high quality classifieds for free (see an example of a listing here). There are currently more than five thousand property owners selling their houses on EtreProprio.com. We wanted to provide a simple but powerful interface, and we needed a lot of front-end logic. After a little experimentation, we chose YUI which struck us as powerful, robust, very well documented and highly customizable. As a consequence, EtreProprio.com is using YUI (2.8.0) heavily for its front-end.

The following modules are used:

• CSS: Reset, Base
• Utilities: Animation, Connection Manager, Cookie, Datasource, Drag and Drop, JSON
• Widgets: AutoComplete, Button, Calendar, Container, DataTable, RTE, Slider, TabView, Uploader

Let’s go deeper on three implementations: Advanced Search, Photo Uploader and TabView.

Advanced Search

The form used to find properties is developed on top of AutoComplete and Dual Slider. The labels above slider thumbs are positioned by listening to change event. Then, they are repositioned if a collision occurs between min and max labels. The AutoComplete implementation can display mixed elements such as cities, postal codes or regions. Each element has its own display format.

Try it live.

Photo Uploader + Management

We used YUI’s Uploader, DataTable and Drag and Drop modules in order to create simple form for photo uploading. First, the user selects the photos on his computer. Then he clicks “Send all” and as the photos are sent, a table below is populated with the photos and details. Drag and drop is applied to the rows of the table, it allowing users to easily reorder the photos. The description of each photo can be modified using a simple text input and YUI’s XMLHttpRequest utility, Connection Manager.

See the video below for a demonstration:

TabView

As there is a lot of information to display in a classified detail, we used TabView to design the page. The CSS personalization capabilities of TabView allow us to integrate it perfectly with the rest of the page from a design perspective. Tabview also saves us bandwidth as only interested users click on all the tabs — TabView has support for lazyloading Tab content, and that pattern works well for us here.

Checkboxes and radio buttons are well known patterns for choosing from a small set of items. The former lets you choose any subset of items (including none), while the latter requires exactly one selection.

But what if you need a different behavior? The Checkbox Groups module in the YUI 3 Gallery implements three common cases and a foundation for constructing others. The module is based on checkboxes because, by default, they do not enforce any restrictions, which makes them an ideal foundation on which to build.

The first behavior provided by the module is Y.AtLeastOneCheckboxGroup. This enforces that at least one item must be selected. More than one selection is permitted, but deselecting all items is prevented. This implemented using the “drop of mercury” algorithm discussed in Tog on Interface: Whenever you try to deselect the last item, the selection slides out from under the cursor. You can play with it here.

The second example (Y.AtMostOneCheckboxGroup) allows no selection, but more than one selection is not permitted. Note that you cannot use radio buttons for this, because then it is not possible to unselect the current item. This is demonstrated in the second example on this page.

The final example (Y.SelectAllCheckboxGroup) implements a “select all” behavior using an extra checkbox. Selecting the “Select All” checkbox selects all the other items. Deselecting it deselects all other items. Selecting or deselecting any item updates the state of the “Select All” checkbox. You can try it out by playing with the third example on this page.

The possiblities are endless. You can build your own custom behavior quickly by extending the base class used by all the above examples: Y.CheckboxGroup. This takes care of all the bureaucracy, so all you have to do is implement enforceConstraints(). The function is invoked with the list of managed checkboxes and the index of the checkbox that has just been changed. You can then inspect and update the state of all the checkboxes to enforce your custom constraints.

In many cases, all you need are the checkboxes themselves, e.g., Y.AtLeastOneCheckboxGroup and Y.AtMostOneCheckboxGroup. For this, your constructor can be pass-through, since the base class Y.CheckboxGroup will manage the list for you. If you need additional controls, e.g., Y.SelectAllCheckboxGroup, your constructor should require references to these controls, and you will need to store them so you can access their state inside enforceConstraints().

To use the Checkbox Groups module, include the following script on your page:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2009.12.08-22/build/gallery-checkboxgroups/gallery-checkboxgroups-min.js"></script>

The provided behaviors are all install-and-forget:

YUI().use('gallery-checkboxgroups', function(Y)
{
	// attaches behavior to all checkboxes with CSS class "my-at-least-one-checkbox-group"
	new Y.AtLeastOneCheckboxGroup('.my-at-least-one-checkbox-group');

	// attaches behavior to all checkboxes with CSS class "my-at-most-one-checkbox-group"
	new Y.AtMostOneCheckboxGroup('.my-at-most-one-checkbox-group');

	// attaches behavior to all checkboxes with CSS class "my-select-all-checkbox-group",
	// controlled by the checkbox with id "my-select-all-checkbox"
	new Y.SelectAllCheckboxGroup('#my-select-all-checkbox', '.my-select-all-checkbox-group');
});

One final note: Ideally, checkboxes with custom behavior should be styled differently, so the user has some indication that they are not just plain checkboxes. For example, Tog suggests using diamonds for Y.AtLeastOneCheckboxGroup. In practice, however, you must also ensure that people can figure out that your controls are to be used for selecting items. So be clever, just not too clever!