Yahoo! User Interface Blog (YUIBlog)

In the Wild for February 26, 2010

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.

Find conversations: bloglines | technorati

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

YUI Theater — Philippe Le Hégaret: “The Next Open Web Platform” (52 min.)

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

Find conversations: bloglines | technorati

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

Frontend Engineering Job on the YUI Team

Note: We have now hired for this position. Please check the YUI jobs page for additional YUI related jobs at Yahoo!

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.

Find conversations: bloglines | technorati

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

YUI Theater — Douglas Crockford: “Crockford on JavaScript — Act III: Function the Ultimate (73 min.)”

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

Find conversations: bloglines | technorati

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

In the YUI 3 Gallery: Ryan Grove’s Storage Lite Cross-Browser Storage Library

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.

Find conversations: bloglines | technorati

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

Three new navigation design patterns

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!

Find conversations: bloglines | technorati

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

YUI Team Internship, Summer 2010

Note: This position has been filled. Thanks to all who applied. -Eric

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;
• you’re a full-time student at an accredited college or university.

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.

Find conversations: bloglines | technorati

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