Yahoo! User Interface Blog (YUIBlog)

YUI Theater — Jonathan LeBlanc: “YQL and YUI”

Earlier we posted video from Douglas Crockford’s talk on JSON at the BayJax meetup on July 27. Next up is Jonathan LeBlanc, a technical evangelist at the Yahoo! Developer Network who spoke about one of Yahoo!’s most intriguing developer offerings, YQL (the Yahoo! Query Language).

In this 24-minute session, Jonathan provides an introduction to YQL and then goes on to show how it can be used in combination with the YUI Library in the rapid creation of dynamic, data-driven interfaces where the data comes from hetereogeneous sources across the web. I suspect you’ll be surprised and intrigued, to say the least, if this is your first introduction to YQL; it’s the kind of service that makes you want to clear your calendar for a couple of days’ worth of uninterrupted hacking.

Thanks again to the Bayjax team and to Gonzalo Cordero for helping to bring the event to Yahoo!.

• Download video (m4v)
• Slides/content
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Douglas Crockford: The JSON Saga
• Satyen Desai: YUI3: Design Goals and Architecture
• Todd Kloots: Developing an Accessible Web 2.0 Widget Framework
• Charles McCathieNevile: Opera Dragonfly

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 Theater — Douglas Crockford: “The JSON Saga”

At the July 27 meeting of the Bayjax group, hosted here at Yahoo!, we had a lineup of terrific speakers. The first of the Bayjax talks — Douglas Crockford’s “The JSON Saga” — is now available on YUI Theater, embedded below and available in high definition with a full transcript on the YUI Theater site.

Here’s a taste of what Douglas has to say in this new talk, which covers the invention of JavaScript Object Notation as a data format and its popularization and standardization.

We found [JSON] worked really well. It was extremely effective for the thing that we invented it for — being browser server communication — but we also used it a lot for inter-server communication. Our platform scaled hugely, so we could have lots and lots of boxes, and they needed to be kept in sync, and we found JSON was perfect for sending messages between the servers. We also used JSON to implement a simple database, so we just have keys, and for each key we’d store some JSON data. It made it really efficient for storing stuff and getting it back. We liked it a lot, and we tried to convince our customers that it was good. Our customers said: well, we hate it, because we’ve never heard of it. Some of our customers said: oh, I wish you’d told us this six months ago, because we just decided to go with XML, so we can’t consider anything else now. And some of the people we talked to said: it’s not a standard, so we can’t use it. I said: it is a standard, it’s a subset of ECMA 262. They said: no, that’s not a standard. OK. So in order to use this, I had to declare that this is a standard. So that’s what I did. I decided it’s going to be a standard from now on. So I bought JSON.org.

It’s a great story, and of course Douglas is a fantastic storyteller, so consider it to be an hour well spent.

Thanks again to the Bayjax team and to Gonzalo Cordero for helping to bring the event to Yahoo!.

• 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:

• Jonathan LeBlanc: YQL and YUI
• Satyen Desai: YUI3: Design Goals and Architecture
• Todd Kloots: Developing an Accessible Web 2.0 Widget Framework
• Charles McCathieNevile: Opera Dragonfly

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!

In the Wild for August 10, 2009

News and notes from the YUI community over the past few weeks; let us know what we missed in the comments section.

• YUI on Gatorade.com: Reader LNR wrote in to tell us about the Gatorade.com Player of the Year site, which is making extensive use of YUI.  “It uses the drag/drop library for custom scrollbars, the Container library for lightbox-style overlays, the Event library to fire several events on window resize, the Element library, and of course the Dom library.” (Original source.)
  
• Adding a Library Class to YUI 3: YUI contributor Matt Snider blogs about adding new modules to YUI 3.  ”The upcoming release of YUI 3 is going to change the way we develop using the YUI framework. Instead of namespacing the library behind the YAHOO object, as was done in YUI 2, in YUI 3 the library will be referenced in isolated functional contexts by calling YUI().use. Thus developers need to modify their code to wrap everything that uses the YUI library with a YUI().use call.”  His post goes through the add and use methods and how to use a module that you’ve added to YUI 3.
  
• Sam Stephenson’s Ruby-YUI Compressor Project Up on GitHub: Sam Stephenson of 37Signals has a Ruby interface to YUI Compressor up on GitHub. Ruby-YUI Compressor is distributed as a Ruby Gem and can be installed via the Rip package manager.
  
• Arun Gupta’s YUI Charts Application Charts Your Running Miles: Arun Gupta has published a blog entry on his blog at Sun.com, “Track your running miles using JRuby, Ruby-on-Rails, GlassFish, NetBeans, MySQL, and YUI Charts.” He has a screencast up on how to use the app.
  
  (Original source.)
  
• YUI on Opinion-sharing Site SodaHead.com: SodaHead is an idea-and-opinion sharing site that makes heavy use of YUI (11 separate components in use).  SodaHead provides “a community that offers a free and dynamic environment to share and gather opinions and meet friends – a place to ask questions, express ideas, and connect with like and not-so-like friends… SodaHeads, as we call them.” (Original source.)
  
• YUI Slideshow Using YUI 3 from Josh Lizarraga at FreshCutSD: The YUI Slideshow module by Josh Lizarraga from FreshCutSD in San Diego is a slick-looking player with a nice feature set; it’s based on the jQuery Cycle project.  There are several demos available, and you can download the code from Josh’s blog post.
  
• Menu-button with Icon Example from Dav Glass: Dav has added to his extensive example repository a new demo showing how to add icons to your Menu Buttons in YUI.
• YUI on WAMU.org: WAMU (American University Radio) has a nice Google Maps mashup using YUI Buttons.
  
• YUI Carousel Value-adds from ErisDS: Blogger ErisDS has posted two parts of what will be a three-part series on implementing custom navigation with the YUI Carousel Control.  Check out both Part One and Part Two.
  
• Narayanan A.R., “JSON Interactions Between Server-Side Java and Client-Side YUI”: Writes Narayanan on DevX.com: “Because it facilitates communication via an interoperable format, JavaScript Object Notation (JSON), the Yahoo! User Interface library (YUI) allows you to implement the server side in any technology. The server will render JSON text for a given request, and YUI parses the JSON response to create JavaScript variables for use in UI widgets.”  Check out the full article here.
• Quick YUI Animation Tutorial from CSSTemplatesWeb: The folks at CSSTemplatesWeb have posted a brief introduction to the YUI Animation Utility, including a set of examples.
  
• Asvin Ballou’s Pixidou — Image Editor Made with YUI and PHP: We missed this one awhile back when it came out, but it’s interesting and worth a look.  Asvin Balloo has created Pixidou, the foundations for a web-based image editing interface using PHP and YUI.  There’s a demo, and the code can be found on Asvin’s GitHub account.
  
• Jim Driscoll, “Using the YUI Calendar Widget with JSF 2″: Writes Jim: “If you’re not developing JSF with third party component libraries, you’re really missing out on the best part of JSF. But there’s lots of Ajax widgets out there, which contain all kinds of useful functionality. Wouldn’t it be useful to use those within your JSF pages? The Yahoo UI library is pretty nifty stuff, and the Calendar widget is useful, pretty, and powerful. Let’s wire it into a JSF page, and bind the return of that widget to the property of a bean. How hard could it be? 71 lines, of which about 45 or so are non-boilerplate.”  Check out all 71 lines on his blog.

Find conversations: bloglines | technorati

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

ARIA Made Easier With YUI 3

As mentioned in my talk Developing an Accessible Web 2.0 Widget Framework, one of the goals of YUI 3 is to make it easier for developers to build accessible user interfaces. To that end we’ve taken accessibility into consideration from the very start while building YUI 3, and the recent YUI 3.0.0 beta 1 release introduces several new additions that make it easier for developers to build ARIA-enabled widgets.

ARIA Attribute Support Added to Node

The Node Utility is YUI 3’s primary interface for interacting with the DOM, and it provides not only an abstraction model but built-in support for CSS Selector queries as a means of accessing HTML elements. Support for ARIA attributes has been added to the Node interface in the YUI 3.0.0 beta 1 release, allowing developers to use the expressive power of CSS Selector queries to apply and manage an element’s ARIA roles and states and properties.

Apply any of the ARIA attributes via Node’s set method. For example, to apply the role of toolbar to a <div> with an id of “toolbar”:

YUI().use('node', function(Y) {
    var node = Y.get('#toolbar').set('role', 'toolbar');
});

In addition to Node’s built-in support for CSS selector queries, it also supports chaining and the ability to set multiple attributes on a single Node. When used together, these features of Node make it especially easy to apply the ARIA roles, states, and properties when building DHTML widgets with a large subtree.

For example, when building a menubar widget it is necessary to apply a role of menubar to the root DOM element containing the menubar, and the role of menu to the root DOM element containing each submenu. Additionally, as each submenu is hidden by default, the aria-hidden state will need to be applied to each submenu as well. The Node interface makes it possible to do all of this in one line of code:

YUI().use('node', function(Y) {
    Y.get('#rootmenu').set('role', 'menubar').queryAll('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
});

Keyboard Support with the New Focus Manager Node Plugin

To work, ARIA requires developers provide keyboard access for widgets, since users of screen readers rely on the keyboard to navigate web sites and applications. As outlined in the ARIA specification and corresponding Best Practices document, providing keyboard access requires, in part, that each widget has one tab stop by default and is responsible for discretely managing focus for its descendants. Following these guidelines enables users to quickly navigate a page or application by using the tab key to move between widgets. Once a user has tabbed into a widget, they can then use other keys (the arrow keys for example) to move focus amongst the widget’s descendants.

The Focus Manager Node Plugin, which is available as of the YUI 3.0.0 beta 1 release, makes it easy to define a Node’s focusable descendants, define which descendant should be in the default tab flow, and define the keys that move focus among each descendant. Additionally, since the CSS pseudo class :focus is not supported on all elements in all A-Grade browsers, the Focus Manager Node Plugin provides an easy, cross-browser means of styling focus.

New ARIA Examples

For YUI 3.0.0 beta 1 we’ve also added a handful of examples that demonstrate the power of the Focus Manager Node Plugin to implement keyboard support to existing widgets and exercise Node’s new ARIA-related APIs.

• ARIA-Enabled Toolbar
• ARIA-Enabled TabView
• ARIA-Enabled Menu Button

Developers wishing to experience the benefits that ARIA provides can download the open-source NVDA Screen Reader and Firefox to test each example themselves. Alternatively, I’ve made screencasts of each example running with NVDA and Firefox.

YUI 3 Beta 1 ARIA Toolbar Video

YUI 3 Beta 1 Menu Button Video

YUI 3 Beta 1 ARIA Tabview Video

The Road Ahead

While YUI 3 is presently composed mostly of utilities, we are hard at work polishing our widget infrastructure and will soon begin building out widgets. With YUI 3 our goal is to make it as easy as possible to build accessible user interfaces, whether you are building a widget from scratch, or implementing one of ours. We think we’re off to a good start with ARIA support incorporated into the Node interface and the Focus Manager Node Plugin. So, I want to encourage developers to start using these interfaces, and to let us know what’s missing, what’s not working, and what it is.

Additional Resources

• Developing Accessible Widgets Using ARIA
• Improving Accessibility Through Focus Management
• Configuring Your Machine For Testing With A Screen Reader

Find conversations: bloglines | technorati

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