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!

Tom Hughes-Croucher is an evangelist for the Yahoo! Developer Network.

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!

Stephen Woods works on frontend platforms at Yahoo! and has been working closely with YUI 3 and technologies related to the Yahoo! Home Page during the past year. You can find him at @ysaw and at stephenwoods.net

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.

About the Author: Philippe Bernou is the founder and CEO of the French startup EtreProprio.com, a real estate website for individuals. After working for four years in Luxemburg on IBM technologies, he launched EtreProprio.com in 2008 with Aurélie Eav.

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.

John Lindal (@jafl5272 on twitter) is one of the lead engineers working on the foundation on which Yahoo! APT is built. Previously, he worked on the Yahoo! Publisher Network.

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!

It’s been an exciting couple of weeks in the YUI community with some great new gallery modules (Storage Lite, Simple Menu, and more good ones coming). Here’s some other recent news, featuring two nice YUI demos from the prolific Christian Heilmann (who was recently on YUI Theater talking about how to be prolific about building great demos) and YUI-related gems from Carlos Bueno and Vincent Hardy. Use the comments below or find us at @YUILibrary to let us know what we missed.

• “Accent Folding” in YUI AutoComplete by Carlos Bueno on @alistapart: One of our favorite writers in the world of F2E is Carlos Bueno, and he has another excellent, timely article out — this time on the challenges of writing good autocomplete implementations using international character sets. Here’s how Carlos describes the problem:
  Consider this address book:
  • Fulanito López
  • Erik Lørgensen
  • Lorena Smith
  • James Lö

  If I compose a new message and type “lo” in the To: field, what should happen? In many applications only Lorena will show up. These applications “support Unicode,” in the sense that they don’t corrupt or barf on it, but that’s all.

  Carlos goes on to show an approach to the problem and illustrates that approach using Jenny Donnelly’s YUI 2 AutoComplete Control. The approach is called “accent folding.” “An accent-folding function essentially maps Unicode characters to ASCII equivalents. Anywhere you apply case-folding, you should consider accent-folding, and for exactly the same reasons. With accent-folding, it doesn’t matter whether users search for cafe, café or even çåFé; the results will be the same.” Check out the full article, including copy-paste examples, for much more. I’ve put up a functioning version of the example code if you’d like to try it out.
  

• GeoPlanet Explorer — a New YQL/YUI Hack from @codepo8: Writes Christian: “A few days ago Gary Gale pinged me on messenger and subsequently carried a cup of coffee to my desk to pester me with another challenge. This time he talked about just how rich and cool the GeoPlanet data is and that it is tough to show people this in a simple interface. Internally we have a few pretty cool tools for testing and analyzing the data but most of them are too loaded with information only understandable for the geo folk out there. So in essence, the benevolent overlord of geo technologies in Yahoo was asking to build a simple interface to navigate the GeoPlanet data.”
  
• Vincent Hardy’s SVG Demos with YUI Animation: Vincent Hardy and his colleagues have been working hard for awhile on SVG in the browser, and they’ve released a number of proofs-of-concept on a new site, http://svg-wow.org/.  Many of the demos, including the light table pictured above and the lyrics demo, use the animation library from YUI 3 under the hood.
  
• YQL + YUI + Christian Heilmann + Olympics on TV = Winterolympicsmedals.com: We noted Christian Heilmann’s first YUI 3-based hack in the last “In the Wild”, and we didn’t have to wait long for his second: WinterOlympicsMedals.com.  This one uses a YQL backend to organize data about the Winter Olympics by year, by country, by event, and more.  Both YUI 3 and YUI 2 (for DataTable) are harnessed here.
  
• Matt Woodward, “Resolving CSS Issues With Grails UI Plugin”: Write’s Matt: “I’m working on another Grails application and am using the fantastic Grails UI plugin for a lot of the UI controls. Grails UI is a really nice Grails-friendly wrapper around the YUI components and includes things like a dialog box, calendar controls, a rich text editor, and a whole lot more. This was my first real foray into using this plugin, so I started with a simple modal dialog box that would show the contact information details for people in a simple list. The main point of this post is to outline the simple resolution to the CSS issues I was seeing because it took me a while to figure out what was going on, but I thought I’d outline some Grails and Grails UI magic along the way.”  Check out his full article for more.
• Photo Callout Editor for ASP.NET Using YUI 2: Neodynamics has posted a demo that “lets users to upload a photo and then add a callout or speech bubble which can be dragged and resized on the image for positioning. Thanks to YUI it is possible to provide handlers for the callout parts which include an arrow tip as well as the size of the bubble. ImageDraw is responsible of generating the callout shape from the server side while the user interacts with the editor.”
  
• Aaron K. Jackson’s NAnt Script for YUI Compressor: If you’re using the free .NET build tool NAnt and you want to use YUI Compressor to minify your JS and CSS, check out Aaron K. Jackson’s YUI Compressor NAnt script.

Philippe Le Hégaret, who heads the W3C Interaction Domain, stopped by Yahoo! recently to give a talk about HTML5. While the HTML5 specification itself does actually not contain many new features, the new Web platform, often labeled as HTML5, does come with many new features. These range from HTML video to SVG to CSS animations or Web sockets. Philippe’s talk gives an overview of what’s ahead of us, using concrete demonstrations in latest generation Web browsers. Our thanks to Philippe for the visit and for permission to share the video on YUI Theater.

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.

Notice: Undefined index: hd in /Sites/theater/blog.php on line 29

• 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

If working alongside people like Douglas Crockford and on the team that created YUI (Matt Sweeney, Adam Moore, Dav Glass, Jenny Donnelly, Luke Smith, Tripp Bridges, Allen Rabinovich, Satyen Desai, and others) sounds like a good way to spend your time, read on: We’re hiring.

We’re looking for a great engineer to help us with every facet of the YUI project. (Note: This role is in addition to the build/CI position we announced a few weeks ago). This may be a great job for you if you are:

• familiar with best practices in frontend engineering (e.g., this video should resonate for you);
• an unabashed JavaScript geek (e.g., this video and this video should be the kind of thing you get excited to download and watch on the big screen in HD);
• someone who thinks making web applications screamingly fast is a moral obligation;
• someone who thinks APIs should be easy to use while solving hard problems, and someone who knows how to create that kind of API;
• someone who thinks about how users will interact with your work if they aren’t adept with a mouse or can’t visually read the computer screen;
• a passionate communicator as well as a passionate developer.
• Read the full job description for more details.

The best part of any job in technology is having the chance to do influential work in an environment that both challenges and supports your growth. The YUI team provides just that confluence of characteristics: a huge, engaged community of users and developers and a team of brilliant engineers collaborating every day to improve the project.

If this sounds like your dream job, and if the people I mentioned above sound like people you’d want to work with every day, I’d love to hear from you. Tell me why you’re the right person for this role, including a link to your resume and professional portfolio, by emailing yui [dash] jobs [at] yahoo-inc.com. (Principals only; no recruiters.)

Note: A work visa for the United States is required for this position; Yahoo! cannot sponsor a new H-1B during this hiring cycle.

The third installment of the Crockford on JavaScript series provides a deep-dive on functions in JavaScript. Douglas begins the talk this way:

We’re going to be talking about functions tonight. Functions are the very best part of JavaScript. It’s where most of the power is, it’s where the beauty is. Like everything else in JavaScript, they’re not quite right, but you can work around that, and there’s a lot of good stuff here.

73 minutes later, you’ll have a better understanding of functions — and a deeper understanding of what makes JavaScript both unique and powerful. If you missed either of the first two lectures in the series, or if you want to attend one of the two remaining, visit the Crockford on JavaScript series page.

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 ~540MB)
• 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 — 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).
• Christian Heilmann: Bausteine fürs web — Christian Heilmann ‘International Evangelist’ des Yahoo Developer Network erklaert seine Philosophie und zeigt Tipps und Tricks wie man Web Applikationen ganz einfach und schnell erstellt indem man auf Bausteinen wie die Yahoo Query Language (YQL) und der Yahoo User Interface Library (YUI) aufbaut.
• 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 in jQuery 1.4.

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Ryan Grove (@yaypie on Twitter) is a web developer and pie connoisseur (the former for Yahoo! Search and the latter for fun). He has worked on features like Search Assist, Search Pad, and the recent Search redesign, and is currently helping migrate Yahoo! Search from YUI 2 to YUI 3.

With more and more browsers adding support for the
HTML5 Web Storage API,
the future is looking good for web applications that need persistent
client-side data storage. Unfortunately, maintaining compatibility with
older browsers that don’t yet support Web Storage can be a challenge, and
dropping support for older browsers is rarely an acceptable option.

The Storage Lite
YUI 3 Gallery module, which was developed for use on
Yahoo! Search, aims to solve this
problem by providing a simple, lightweight API wrapper for a variety of
persistent client-side storage mechanisms with no external plugin
dependencies of any kind (not even Flash). It weighs in at about 2.6KB after
minification and before gzip, is similar to the HTML5 localStorage API, and
works in IE6+, Firefox 2+, Safari 3.1+, Chrome 4+, and Opera 10.5+.

Apart from being based on YUI 3, Storage Lite differs from the existing
YUI 2 Storage Utility
in several ways. YUI 2 Storage is a robust and extensible implementation
that stays more faithful to the HTML5 localStorage and sessionStorage APIs
(for example, it provides a change event and a key() method,
which Storage Lite does not). YUI 2 Storage also falls back on Flash or
Gears storage for older browsers, which can in some cases provide better
persistence and more storage capacity. Storage Lite trades extensibility and
plugin-based fallbacks for lighter weight and better performance, and
specifically focuses on emulating only localStorage.

Take a look at this
persistent notepad example to see Storage Lite in action, or read through
the following non-interactive code sample for a quick tour of the API.

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-storage-lite/gallery-storage-lite-min.js"></script>

In your implementation code, listen for the storage-lite:ready
event, which is fired when the storage mechanism is ready for use. After the
storage mechanism is ready, you can use the API:

YUI().use('gallery-storage-lite', function (Y) {

    // For full compatibility with IE 6-7 and Safari 3.x, listen for the
    // storage-lite:ready event before making storage calls. If you're not
    // targeting those browsers, you can safely ignore this step.
    Y.StorageLite.on('storage-lite:ready', function () {

        // To store an item, pass a key and a value (both strings) to setItem().
        Y.StorageLite.setItem('kittens', 'fluffy and cute');

        // If you set the optional third parameter to true, you can use any
        // serializable object as the value and it will automatically be stored
        // as a JSON string.
        Y.StorageLite.setItem('pies', ['apple', 'pumpkin', 'pecan'], true);

        // To retrieve an item, pass the key to getItem().
        Y.StorageLite.getItem('kittens');    // => 'fluffy and cute'

        // To retrieve and automatically parse a JSON value, set the optional
        // second parameter to true.
        Y.StorageLite.getItem('pies', true); // => ['apple', 'pumpkin', 'pecan']

        // The length() method returns a count of how many items are currently
        // stored.
        Y.StorageLite.length(); // => 2

        // To remove a single item, pass its key to removeItem().
        Y.StorageLite.removeItem('kittens');

        // To remove all items in storage, call clear().
        Y.StorageLite.clear();

    });

});

Data stored using Storage Lite is persisted across pageviews and browser
restarts*, and is accessible only from the same domain in which
it was stored. Behind the scenes, Storage Lite uses the following storage
mechanisms, automatically choosing the best one that’s supported:

• Firefox 3.5+, Chrome 4+, Safari 4+, IE8, Opera 10.5+: HTML5 localStorage — these modern browsers all support the core localStorage functionality defined in the HTML5 draft.
• Firefox 2.x and 3.0.x: Gecko globalStorage, an early API similar to HTML5’s localStorage.
• Safari 3.1 and 3.2: HTML5 Database Storage, because Safari 3.1 and 3.2 don’t support HTML5 localStorage.
• IE6, IE7: userData persistence, a rarely used IE feature for associating string data with an element on a web page and persisting it between pageviews.

For more details, see the
Storage Lite GitHub project
and the API
reference.

* Caveat: IE6 and IE7 persist data across pageviews, but not across
browser restarts.

Over the past few months I conducted an audit of the patterns in Yahoo!’s internal design pattern library, with an eye toward publishing as many of them as possible in the open library at YDN. Why? Well, for one thing, to get more eyeballs on them, to gather more feedback and keep improving the patterns. Also, since very few patterns in the library contain Yahoo!-specific information, and an alternative process is now in place for vetting requirements specific to the Yahoo! network and brand components, the design pattern collection can now more easily focus on (relatively) universal design principles for web implementations.

I completed the audit before the end of last year and expect to release new patterns in batches over the next few months. Some patterns will be mature and provide a solid foundation for site design. A few will be published as beta patterns which may undergo significant changes in subsequent updates based on feedback received. Regardless of their status, we hope you’ll get involved and review and provide feedback on the patterns provided.

The first batch of patterns to come out from the audit relates to navigation bars. There are three patterns so far in this grouping: Top Navigation, Left Navigation, and Progress Bar. One legitimate question is whether top and left nav bars are still the best or most current way to navigate a site and find content? We still find many examples of them across the web and in use at Yahoo! so for now I’ll say yes, but it’s worth thinking about.

Wherever possible I try to link patterns back to the YUI Library and, where appropriate, to other code and implementation solutions. YUI has great support for navbars and menu examples. Probably the best place to start is the menu widget.

One interesting nomenclature issue we studied was the distinction between a stepwise progress indicator (which is what the pattern is about) and a continuous progress bar (for which there’s a great YUI example). These two things are often referred to with similar names, but perform different functions. Suggestions for more appropriate terminology are welcome.

Please check out these new patterns and let us know what you think!

The YUI team has an opened a position for a summer intern (full details on the Yahoo! internship program are available here). If you’re a college student working toward a CS degree and the idea of spending the summer working on JavaScript/CSS projects alongside people like Douglas Crockford and on the team that created YUI (Matt Sweeney, Adam Moore, Dav Glass, Jenny Donnelly, Luke Smith, Tripp Bridges, Allen Rabinovich, Alaric Cole, Satyen Desai and others) sounds like fun, this may be the opportunity for you.

The YUI team is responsible for development and maintenance of the YUI Library, a collection of JavaScript and CSS components that help frontend engineers create Yahoo-scale web applications quickly. We also build out other parts of the professional frontend engineer’s toolchain — tools like YUI Compressor, YUI Doc, YUI Test, and YUI PHP Loader.

We’re looking for an intern who has completed at least one year of formal coursework toward a CS degree and who has a track record of creating innovative browser-based applications. Both undergrads and graduate students are welcome to apply. This may be a good fit for you if:

• you’re familiar with best practices in frontend engineering (e.g., this video should make good sense to you);
• you love JavaScript (ie, downloading and watching these videos sounds like a good time);
• you learn fast;
• you’re not afraid of big challenges.

If this sounds like you, we’d love to hear from you. Email a cover letter, resume, and link to your portfolio to yui-jobs@yahoo-inc.com. Be sure to mention your dates of summer availability.

As the YUI Team wraps up work on the core widget foundation for YUI 3, one of the things we’re seeing in the YUI 3 Gallery is transitional solutions that help flesh out YUI 3 implementations. Some of these, like Julien Lecomte’s SimpleMenu, are pure YUI 3, and others, like Adam Moore’s TreeView module, help bridge the gap between YUI 2 and 3 and will likely be replaced by other gallery modules or shipping YUI 3 widgets down the road.

Adam’s TreeView port is a conversion of the popular TreeView Control from YUI 2. The YUI 3 Gallery version runs on the YUI 3 foundation and makes use of Dav Glass’s gallery-port module to bridge some of the API changes. Not all of the features in the YUI 2 version are supported (date editing and animation, for example, aren’t included), but it’s trivial to get a standard TreeView running with this gallery module. All of the code comes off the CDN and can be combo-handled.

And here’s some sample code. Script and CSS file inclusion:

<link type="text/css" rel="stylesheet"
href="http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam
     /gallery-treeview.css" />
<script type="text/javascript"
     src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
     gallery-2009.11.02-20/build/gallery-port/gallery-port-min.js&
     gallery-2009.11.19-20/build/gallery-treeview/gallery-treeview-min.js"></script>

Markup:

<div id="treeView"></div>

Implementation script:

<script language="javascript">

//Create a YUI instance that uses the treeview gallery module
YUI().use('gallery-treeview', function(Y) {

//Associate the YAHOO variable with and instance of Dav Glass's
//Port utility:
var YAHOO = Y.Port();

//Instantiate the Tree using standard YUI 2 syntax:
var tree = new YAHOO.widget.TreeView("treeView", [
	{type:'Text', label:'Cars',expanded:true, children:[
			'Aston Martin',
			'Bugatti',
			{type: 'Text', label:'GM', href:"http://gm.com", expanded:false, children:[
				'Buick',
				'Cadillac',
				'Chevrolet',
				'GMC'
			]},
			'Renault',
			'Toyota',
			'Volkswagon'
		]
	},
	{type:'Text', label:'Computers', editable:true, children: [
			'Acer',
			'Apple',
			'HP',
			'Dell'
		]
	}
]);

// Render the tree:
tree.render();

});
</script>

Click through for a working version of this example.

Today, we checked in our work-to-date on the next generation of YUI Charts. You can find this pre-alpha code, along with some examples, in the sandbox directory of the YUI 3 head on GitHub. This initial release is a preview of where we’re going with YUI Charts; no aspect of this implementation is complete, and it’s not suitable for production use at this point, but it does give a sense of where we’re heading — and it’s a chance for us to check in with interested developers and share our progress. (If you need a production-ready charts solution today, check out YUI 2 Charts.)

For this release, we have created a solid foundation to build up the functionality of the Charts, and we’ve included one simple chart type to demonstrate the flexibility of our architecture. In particular:

• YUI 3 Charts are now fully modular. Individual subcomponents of a Chart, like an Axis, or a LineGraph, are now their own classes that you can manage and update individually.
• The modularity of the Charts component within the Flash Player (our current rendering engine of choice) is fully paralleled in its JavaScript wrapper. From the JS developer’s point of view, you are working with a set of JS components, with all method calls, display list changes and property assignments seamlessly transmitted to Flash and back. (This abstraction will be even more crucial when we move beyond a single rendering engine.)
• The Charts now support styling every single element — from label rotation and font faces (no need for embedded fonts!), to the color and number of tick marks.
• Because of the new modularity, features like multiple axes and multiple independent graphs are now included.
• In addition to the very advanced Chart, we’ve drafted a sugar wrapper called SimpleChart, which allows you to quickly build Charts with two lines of code.

Now that the foundation is in place, our next step is to continue building up the Charts functionality. If you are interested in what that will be, take a look at our talk from YUIConf 2009, where we described our grand plans for the architecture and features of the Charts package.

You can start playing with Charts immediately: the component, along with a few very informative examples, is located in the YUI 3 sandbox. To get started, download the latest YUI 3 build from GitHub, drop it in your web root, and navigate to the sandbox/chart/tests directory. Keep in mind that this is not a packaged release. For that reason, the API we use is just a sketch of what the final API will be and is therefore sure to change, but we’d love to hear your thoughts and feedback on where the project is headed.

We’ve posted the current example set on YUIBlog as well (running build 1828) — feel free to click through if you’re interested in seeing the current work in action:

• Simple Chart
• Customized Simple Chart
• String Formatting
• Advanced Usage

—Tripp Bridges and Allen Rabinovich, YUI Team engineers

#graded-browsers {} #graded-browsers table {margin-bottom:1em;margin-top:1em;} #graded-browsers caption {margin:1em;} #graded-browsers th,#graded-browsers td {padding:.6em;border:1px solid #fff;font-family:verdana;font-size:11px;} #graded-browsers th, #graded-browsers th abbr {color:#000;} #graded-browsers th {background-color:#ddd;font-family:verdana;font-size:11px;} #graded-browsers th, #graded-browsers td {border-width:0 1px 1px 0;border-collapse:collapse;} #graded-browsers td.†grade {color:#555;background-color:#FFFBCF;} #graded-browsers td.cgrade {color:#555;background-color:#FFBFBF} #graded-browsers td.na {color:#AAA;} #graded-browsers td.agrade {background-color:#CFC;} #graded-browsers tr.first th {text-align:center;} #graded-browsers tr th {text-align:right;} #graded-browsers abbr {cursor:help;} #graded-browsers p.gbs-dagger-note {font-size:11px;font-family:verdana;}

This post announces an update to Graded Browser Support. The GBS page on the YUI site always has the most current GBS table. This post includes:

• a list of changes;
• an updated chart of browsers that receive A-grade support;
• our GBS forecast, indicating the changes we expect to make in Q2 2010;
• and a discussion section that lays out some of the strategy behind the current GBS update.

GBS Changes for Q1 2010

Specific changes for Q1 2010 include:

• Initiated A-Grade support for Chrome 4.0.† on Windows XP
• Replaced Windows Vista with Windows 7 in the testing matrix (dropping IE7 from that platform while retaining it on XP)
• Moved Opera 10.† to X-Grade from A-Grade
• Replaced Firefox 3.5.† with Firefox 3.6.† in the testing matrix

Win XP Win 7 Mac 10.5.† Mac 10.6.† Firefox 3.0.† A-grade Firefox 3.6.† A-grade A-grade A-grade Chrome 4.0.† A-grade IE 8.0 A-grade A-grade IE 7.0 A-grade IE 6.0 A-grade Safari 4.0.† A-grade A-grade

Notes:

• The dagger symbol (as in “Firefox 3.6.†”) indicates that the most-current non-beta version at that branch level receives support.
• Code that may be used on pages with unknown doctypes should be tested in IE7 quirks mode.
• Code that may appear in IE8’s "compatibility mode," which emulates but is not identical to IE7, should be tested explicitly in compatibility mode.

GBS Forecast

We expect to make the following changes in the Q2 2010 GBS update:

• Discontinue A-grade for Firefox 3.0.†, moving it to X-grade.

Discussion

This update implements the guidance we provided in Q4 2009. That update generated significant discussion, and high-quality input from Opera is included in the comments thread; I encourage you to refer to that update for more details. Of interest in this update:

1. Chrome: Chrome’s continued growth argues compellingly for its inclusion in the A-Grade. Discussion among members of the GBS committee focused around when, not if, Chrome would be promoted into the testing matrix, and there was a strong consensus that it belongs there today.
2. Opera: Refer to the Q4 2009 GBS update for a discussion of the decision to move Opera to X-Grade. Worth noting here is that YUI specifically and Yahoo more broadly continue to support Opera — just as we continue to support X-Grade browsers in general. The GBS provides guidance for formulating QA testing matrices, and our recommendation as of Q1 2010 is that Opera be grouped in the X-Grade along with other high-quality, low-marketshare browsers. Opera is an excellent browser — we expect Opera users to have a good experience on Yahoo! sites and YUI-based sites, and we’ll continue to investigate bugs related to Opera as they are identified.
3. Windows Vista and Windows 7: By volume, client-side defects that are specific to a single version of Windows (as opposed to a version of Internet Explorer) are relatively low. Our experience has been that Vista-specific testing has not led to a significantly differentiated set of bugs compared with testing on XP. With that in mind, we’ve decided to replace Vista in the testing matrix with the newer and ascendant Windows 7 platform, keeping the testing surface to 4 unique platforms while bracketing the Windows continuum with the evergreen XP and the newer Windows 7. While Vista remains a popular operating system, and QA engineers and developers should retain access to Vista environments to investigate bugs when reported, we advise QA departments to begin migrating their automated testing platforms to Windows 7 at this point.

Our quarterly reminder: Graded Browser Support is a QA philosophy, not a report card on the quality of popular browsers. It’s designed to provide guidance for QA teams about how best to use their limited testing resources (and to frontend engineers about how to sanely cross-check work across a finite set of browsers). The goal is to be conservative and calculating: We want to test the smallest possible subset of browser/platform combinations, leveraging implicit coverage by testing the most commonly shared core browser engines.

The GBS Archive

• GBS Update, 2009-10-16
• GBS Update, 2009-07-02
• GBS Update, 2009-01-28
• GBS Update, 2008-07-03
• GBS Update, 2008-02-19

Some recent news and notes from the YUI community follows. What did we miss? Let us know in the comments or @yuilibrary on Twitter.

• Matt Snider’s YUI 3-based Radial Menus: Matt Snider’s most recent project was inspired by Bioware’s designers: “Today’s article is inspired by the Radial Menu found in many of Bioware’s RPGs, such as Dragon Age. At the press of a button, the menu appears on the screen (usually pausing the game), and allows players to choose common commands. The same type of menu is possible on the web, and may even be more useful than the traditional navigation. We will use JavaScript, CSS, and YUI3 to build flexible Radial Menu widget that appears in the center of the page and responds to end-user clicks.” Check out the article and the example for full details.
  
• Twitsteps — Twitter- and YUI-powered Microforums for Any Site: Twitsteps is an easy-to-install and extremely attractive widget based on YUI 2 that adds Twitter-driven discussions to any site.  Very slick implementation. (Original source.)
  
• EtreProprio — a YUI-based Real Estate Website for Individuals in France: Philippe Bernou, CEO of EtreProprio.com, wrote in to tell us about his site, which provides attractive classified property listings for individuals selling their own properties.  EtreProprio caters to the French market.  The site makes terrific use of YUI 2, including a wide range of utilities and widgets.
  
• Chris Heilmann’s First YUI 3 Hack, “Flickr Collector”: The Yahoo! Developer Network’s Christian Heilmann, author of numerous YUI-based hacks over the years, has is first YUI 3 app up: “Flickr Collector is a simple interface to collect photos from Flickr and copy and paste the HTML to embed them into web sites. Click any of the photos below to see its details. Below the photo you will get the HTML code to copy and paste.You can drag photos into the collection below the thumbnails and remove them from the bin by dragging them into the removal box. Once you are done, hit the ‘See all code’ button to get the HTML of all the photos in your collection box.”
  
• Rich Text Editor Review on Six Revisions: Jeff Starr of Perishable Press reviews Rich Text Editor widgets for Jacob Gube’s Six Revisions blog.  Here’s what he has to say about Dav Glass’s YUI Rich Text Editor: “The YUI Editor is included as part of the extensive Yahoo User-Interface Library (YUI). YUI Editor features valid XHTML, a growing number of plugins, decent documentation, great support for mobile devices, and even drag-n-drop inclusion and sizing of images. Plus, the YUI Editor’s toolbar is easily extensible for advanced and highly customized implementations.”
  
• KQED Making Broad Use of YUI 2.8.0 Utilities and Widgets: We noted not too long ago that KQED public radio was using some YUI, but the usage is now broad and extensive.  The main KQED page is now using the utilities rollup plus Cookie, TabView, and Container.  All things consdered, we’re thrilled to see YUI on the site!
  
• Video: Philip Tellis’s Overview of YUI Flot Charting from FOSDEM: YUI contributor (and Yahoo! performance engineer) Philip Tellis ported the popular Flot charting library to YUI 2, and he spoke about the work at FOSDEM in Brussels earlier this month.  The FOSDEM team has the 44 minute talk up on YouTube.
  
• Eric Ferraiuolo on “Auto-Building YUI 3 Custom Modules”: Eric Ferraiuolo has a new post up on his 925html blog: “YUI 3’s modularity and instance sandboxing invite developers to create their own custom modules, breaking apart their specific application logic.  Having developed over 30 Custom YUI 3 Modules in the last year I quickly realized I needed a sane way to go from writing code to running it in the browser. So, I set out to connect the YUI Builder with my IDE.”  Read on for more details about Eric’s approach.  And, in case you missed it, check out Eric’s presentation on custom modules from YUICONF 2009.
• Sitepoint Calls YUI Grids Builder a “big Time-saving Tool”: Writes Meitar Moscovitz: “The YUI Grid Builder is an elegant, visual way to create robust CSS-based layouts from scratch. All you need to do is punch in your desired layout, specifying the page’s width (fixed or fluid), the number of columns you want, and how wide each of them should be. You can even split a section into two or more subsections, creating nested column layouts with ease.”  The Grid Builder is a visual tool that works with YUI 2’s CSS Grids.
  
• Cory O’Daniel Releases Simpler Ruby Wrapper for YUI Compressor: Cory O’Daniel continues to work on his Ruby wrapper for YUI Compressor, releasing a simpler, ~50 line version: “On a new project I’m working on *I just need a inline YUI compressor* and I dont give a [darn] about anything else like bundling, globbing or whatever. So I ended up throwing together this little (~50 lines less comments) Ruby YUI Compressor to do my dirty work.”  Check out the implementation here.

Julien Lecomte wrote the SimpleMenu module for use on Yahoo! Search (the “More” link uses this code). It’s superbly light — a 1.3KB minified script leveraging the YUI 3 core, plugin architecture, and keyboard/focus management utilities. Moreover, it’s simple to use. He’s shared it in the YUI 3 Gallery — you can use it under YUI’s BSD license or you can grab the source from GitHub and use Julien’s code as starting point for your own project.

Julien hasn’t had time to document the widget fully, so I wrote up a common use case.

Take a simple piece of markup:

<!--menu activator-->
<a href="http://developer.yahoo.com/yui/" id="optionsmenu">YUI-Related Links</a>

<!--menu contents-->
<div id="optionsmenucontainer" class="yui-cssreset">
<ul>
<li><a href="http://developer.yahoo.com/yui/">YUI documentation</a></li>
<li><a href="http://yuilibrary.com">YUI project site</a></li>
<li><a href="http://yuilibrary.com/forum/">YUI discussion forums</a></li>
<li><a href="http://yuiblog.com">YUIBlog</a></li>
<li><a href="http://developer.yahoo.com/yui/theater/">YUI Theater</a></li>
<li><a href="http://yuilibrary.com/gallery/">YUI 3 Gallery</a></li>
<li><a href="http://twitter.com/yuilibrary">@YUILibrary on Twitter</a></li>
<li><a href="http://twitter.com/miraglia/yui/members">@YUILibrary developers on Twitter</a></li>
</ul>
</div>

And the following script:

<script type="text/javascript"
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.10-01/
build/gallery-simple-menu/gallery-simple-menu-min.js"></script>

<script language="javascript">
YUI().use('gallery-simple-menu', function(Y) {
    Y.one('#optionsmenu').plug(Y.Plugin.SimpleMenu);
});
</script>

What remains is simply some CSS styling. Julien’s widget applies the .menu-visible class when the menu is activated; a simple approach is to set the menu container’s default position to absolute and move it off-screen. Then, in your .menu-visible declaration, remove the offset and allow the widget to position the container under its activator element:

#optionsmenucontainer {
    left:-4500px;
    position:absolute;
}

#optionsmenucontainer.menu-visible {
    left:auto;
}

Click through to try this example in action.

YDN’s international evangelist Christian Heilmann, who works out of Yahoo!’s London office, was in Sunnyvale last week and gave an internal talk on the creation of effective demo applications using technologies like YQL and YUI. While the talk is tailored for a Yahoo audience, the content is of general interest — and the advice about how best to create impactful demos is applicable for anyone who cares about illustrating the use of a given technology.

I asked Chris to repeat the talk in German; you’ll find both the English and German versions below.

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 German version is here).

• Download HD video (480p ~357MB)
• Download video (m4v)
• Download slides

German Version

• Download HD video in German (480p ~314MB)
• Download video in German (m4v)
• Download slides (German)

Other Recent YUI Theater Videos:

• 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.
• 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.
• Luke Smith: Events Evolved — YUI engineer Luke Smith provides a deep introduction to the YUI 3 event system including its support for DOM events, event delegation, synthetic events, and custom events.

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes