Yahoo! User Interface Blog (YUIBlog)

Rey Bango of Ajaxian Interviews YUI Developers Adam Moore, Satyen Desai, and Luke Smith

Rey Bango of Ajaxian (and Microsoft) visited Yahoo! last week, and he has posted his interview of YUI core team members Adam Moore, Satyen Desai, and Luke Smith. Check it out on his blog or in the embed below.

Find conversations: bloglines | technorati

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

In the YUI 3 Gallery: Peter Peterson’s Ratings Widget

I wanted to get my feet wet with the finalized widget infrastructure presented in YUI 3.1.0, and I’ve always felt the best way to do that is to write some code. I wanted something easy, and I found that in a CSS ratings implementation I found on Komodo Media. The resulting widget is the YUI3 Ratings Widget (demo). The bulk of the work of the widget is handled by CSS and is described well in the Komodo Media article. The only trouble with that widget, was once a rating was chosen, nothing really happened unless the page was reloaded, and when the widget lost focus, it lost its rating. This is where the YUI 3 Gallery Ratings widget comes in.

My goals for the project were:

• The code for the widget should be just enough to touch on the basics for how to create a YUI 3 widget
• The widget would progressively enhance the page
• The user’s interaction with the widget is easily captured
• Add a clear rating button which does not exist in the original design
• The widget should be accessible for people using screen readers
• Make the instantiation and interaction with the widget dead simple with as little code as possible.

It is easy to add the ratings widget to your page using the YUI loader:

YUI({
    gallery: 'gallery-2010.04.14-19-47'
}).use('gallery-ratings','event', function(Y) {
    // Program logic...
});

You’ll also need the image assets and CSS file located located at github or from your own copy of the gallery.

Simply add a node in your source that contains the current rating (any number between 0 – 5) or is empty.

<span id="myWidget">2.5</span>

You can then instantiate the widget with the following code in your sandbox:

var myRating = new Y.Ratings({ srcNode: "#myWidget" });
myRating.render();

I felt that it was important to make this widget easy to customize and so I added some configuration to the constructor. inline when set to true will display the rating inline with text on the page (defaults to false). skin can be set to “small” to decrease the size of the widget ( Example: )

On its own, the ratings widget does little more that set up the rating interaction for the user. A little more work needs to be done to actually use the value. I’m leaving that up to the implementer to consider; whether to add a callback to the event fired when the rating changes, or to supply a plugin to the widget to handle it automatically. To get you started, whenever a rating is changed the ratingChange event fires. It is easy to set up an event listener to catch the ratingChange event for all the widgets on the page. In this example, I log the Rating Widget srcNode’s id, the previous rating, and the new rating for any rating widget on the page when the rating changes:

Y.on("ratings:ratingChange",function(e){
  var id = e.target.get("contentBox").get("id");
  Y.log(id+" New Value: "+e.newVal+" was: "+e.prevVal);
});  

Future ideas for the project:

• Progressively enhance form elements
• Make the clear rating button optional
• Make the rating range configurable
• More skins, and combination of the CSS sprites
• Internationalization

Find conversations: bloglines | technorati

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

Cinco de NodeJS — May’s BayJax Celebrates Server-Side JavaScript with Ryan Dahl, Elijah Insua, and Dav Glass

BayJax organizer Gonzalo Cordero has announced that it’s time for another BayJax, and this time we’ll be celebrating the explosion of server-side JavaScript with Cinco de Node.js at Yahoo!. We have three fantastic speakers: Ryan Dahl, creator of Node.js; Elijah Insua, creator of one of the major DOM abstractions for Node; and Dav Glass, a YUI engineer who has been blogging about his work getting YUI 3 running under Node.

Please join us on May 5th @Yahoo! HQ from 5:30pm to 9:00 p.m. As Gonzalo puts it: “Sombreros, ponchos and luchador outfits are encouraged.” RSVP on the BayJax Meetup page.

Ryan describes his talk this way:

It is well known that event loops rather than threads are required for high-performance servers. Javascript is a language unencumbered of threads and designed specifically to be used with asynchronous evented I/O, making it an attractive means of programming server software. Node.js ties together the V8 Javascript compiler with an event loop, a thread pool for making blocking system calls, and a carefully designed HTTP parser to provide a browser-like interface to creating fast server-side software. This talk will explain Node’s design and how to get started with it.”

Elijah, who will be Skyping in from New York, will talk about his project, jsdom, which provides the essential DOM abstractions that allow client-side, DOM-dependent JavaScript to run under Node.js. This is an important part of the paradigm shift, enabling levels of server- and client-side code reuse never possible before and allowing progressive enhancement to be a natural, efficient outgrowth of our development environment.

Dav will carry this theme forward, showing in practical terms how the foundation of Node.js, the abstractions in jsdom, and Dav’s own work to add BOM features to jsdom enable a full implementation like YUI to illustrate some of the enormous promise of this kind of development. You can read about Dav’s work here on YUIBlog (Part 1; Part 2).

Catch Up On Past BayJax Meetups

Gonzalo has organized a great series of BayJax events of late. Did you miss any? Here are the YUI Theater links for the latest in the series:

• Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript — Five contributors to O’Reilly’s High Performance JavaScript discuss advanced JavaScript and DOM scripting optimizations at the April 2010 BayJax meetup at Yahoo.
• John Resig: Testing, Performance Analysis, and jQuery 1.4 — John Resig of Mozilla, creator of the popular jQuery JavaScript library, reviews options for testing and performance analysis in JavaScript and previews the significant changes coming soon in jQuery 1.4.
• Brad Neuberg: Introduction to HTML5 — Brad Neuberg of Google provides a wide-ranging introduction to HTML5 as it’s being implemented in modern browsers, including features such as SVG/Canvas, the video tag, database storage, app-cache, and more.

Find conversations: bloglines | technorati

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

In the Wild for April 24, 2010

After another nice edition of YUI: Open Hours on Friday, we’ll round out this week with just a few notes recent notes and implementations from the YUI development community:

• YUI 2 on Discovery.com: Discovery Channel’s media-rich site makes use of YUI 2.8.0 Animation and Connection Manager, among other components.
  
• YUI 3/Node.js Work Reviewed by @dalmaer: “Oh, and YUI 3 is Looking Really Nice These Days”: Dion Almaer takes a look at Dav Glass’s YUI 3/Node.js work in Ajaxian.  Write’s Dion: “Oh, and YUI3 is looking really nice these days. A nice balance between a nice API + really nice looking widgets + a Crockford’s-worth of security care.”
  
• YUI 2 on RealCyclist.com: At my age, when the road gets steep you start looking for a lighter bike.  (Eating less may be less expensive, but it’s less fun.) And if you look on RealCyclist.com, you can shop on a site powered by a wide range of YUI 2 components.  On a related topic, BonkTown — a bargain site for cyclists — is also YUI-powered, and you can pick up items like shoe covers that make your feet more aerodynamic in a time trial.
  
• Free Test-tracker Cuanto Using YUI 2 DataTable, Tabs, Containers: Todd Wells wrote in to tell us about Cuanto: “Cuanto is a free tool for storing automated and manual test results, organizing them into logical groups, analyzing the nature of individual test failures, and using the resulting data to provide useful statistics. It uses the YUI 2 library extensively, including Container, Event, DataTable, Button and TabView.” (Original source.)
  
• Run a PHP Script in the Background Using AJAX [and YUI]: Mindraven has a post sketching out how to start PHP background tasks using Thomas Sha’s YUI Connection Manager.
  
• Spanish Language Introductions to YUI on DesarrolloWeb.com: The team at DesarrolloWeb.com have put together a series of four Spanish-language articles introducting web developers to YUI, YUI 3, simple events, and adding/removing CSS classes in YUI.  Their YUI manual “pretende ofrecer una serie de artículos teóricos y prácticos de las librerías YUI, un framework Javascript y CSS.”
• Y! Search Engineer @bretts Writes About His Outside Events Gallery Module: Brett Stimmerman of Yahoo! Search dicsusses his new Outside Events module for the YUI 3 Gallery.  Outside Events “allows elements to subscribe to DOM events that occur outside of them. An event occurs outside the subscriber if the target it is not the subscriber itself, or any of the subscriber’s ancestors.” (Original source.)
  

How much did we miss? Let us know via @yuilibrary or in the comments below (if you’re feeling retro).

Stay tuned: Rey Bango from Ajaxian stopped by Yahoo yesterday and recorded a video interview with YUI engineers Luke Smith, Satyen Desai and Adam Moore. That session, plus a talk with BayJax event organizer Gonzalo Cordero, should be running on Ajaxian in the coming week.

Find conversations: bloglines | technorati

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

YUI Theater — Adam Granicz: “Robust and Rapid Web Development with WebSharper” (57 min.)

Adam Granicz stopped by Yahoo! earlier this week to talk about the F# programming language and its use in web application development.

Granicz’s company, Intellifactory, produces the WebSharper platform. WebSharper fills the role in the F# community that GWT and similar tools fill in the Java community, promising a strongly typed, fast, tightly integrated development experience with deployment to rich web applications. As Fybit’s Riatrax4JS and yui4java do for Java developers, WebSharper brings the power of YUI 2 to F# developers, making a wide range of YUI widgets available.

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 ~572MB)
• Download video (m4v)

Other Recent YUI Theater Videos:

• Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript — Five contributors to O’Reilly’s High Performance JavaScript discuss advanced JavaScript and DOM scripting optimizations at the April 2010 BayJax meetup at Yahoo.
• Douglas Crockford: Crockford on JavaScript — Part 5: The End of All Things — Yahoo!’s JavaScript architect Douglas Crockford concludes his five-part lecture series on the JavaScript programming language with a review of issues related to security and performance in JavaScript.
• Douglas Crockford: Crockford on JavaScript — Episode IV: The Metamorphosis of Ajax — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with an analysis of the Document Object Model (DOM) and an exploration of Ajax.
• 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.

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

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

YUI: Open Hours for Friday, April 23rd

The next installment of YUI: Open Hours is tomorrow, Friday the 23rd!

The first Open Hours was a huge success, with about 30 people joining in and some great conversation and feedback for both Lauren Smith’s YUISand Gallery module as well as for YUI.

The time will be the same as before, 10am – 12pm PDT. The primary agenda item for this week will be an introduction and code review of Eric Ferraiuolo’s Component Manager Gallery module. I’m also going to start opening the conversations with a "YUI 3 tip or trick" of sorts.

This week, we’ll be joined by fellow YUIer Satyen Desai (@dezziness), the lead architect behind the Attribute, Base, and Widget infrastructure pieces in YUI 3. (If you’d like to meet Satyen before the event, you can do that on YUI Theater.)

Like before, the plan is to use Adobe Connect for screen sharing and do voice over a conference bridge. This is the info for joining in:

1. Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
2. Enter the attendee code 47188953
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as mentioned with the first YUI: Open Hours, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar.

If this is the first you’ve read about YUI: Open Hours, it’s an open forum with myself and other YUI team members and some great minds from the YUI community. You can read more about it here.

Hope to see you there!

Find conversations: bloglines | technorati

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

YUI Theater — Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: “High Performance JavaScript” (92 min.)

The April 2010 edition of the BayJax meetup at Yahoo! featured five speakers, all of whom are co-authors on the new High Performance JavaScript volume from O’Reilly (free chapter available here). There were about 200 attendees filling the URLs Cafe in the heart of Yahoo!, and they heard five distinctly interesting takes on web-app performance.

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 ~572MB)
• Download video (m4v)

Other Recent YUI Theater Videos:

• Douglas Crockford: Crockford on JavaScript — Part 5: The End of All Things — Yahoo!’s JavaScript architect Douglas Crockford concludes his five-part lecture series on the JavaScript programming language with a review of issues related to security and performance in JavaScript.
• Douglas Crockford: Crockford on JavaScript — Episode IV: The Metamorphosis of Ajax — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with an analysis of the Document Object Model (DOM) and an exploration of Ajax.
• 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.

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

[Photos by Nicole Sullivan; used by kind permission.]

Find conversations: bloglines | technorati

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