Archive for February, 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.

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.

GWT 2.0.3 has been released and is available for download here:

http://code.google.com/webtoolkit/download.html

This was a minor release that includes the following fixes:

• Using a PopupPanel in Internet Explorer without a history IFrame throws a NullPointerException (#4584)
• Opera support for History is not working (#3956)

This post discusses some of the work we’re doing on the IE team to fulfill our commitment to document our support of web standards. A good starting point is Microsoft’s interoperability principles, something we’ve written about here on this blog before, and a principle that’s easy to see in action in our products, like IE8.

The essence of interoperability in this context is that the same web page markup works the same way across different browsers. There are many challenges in getting to this goal. Even with the best intentions, as an industry we are still learning and working through how to do this well. You can look at how different tests run even today in modern browsers (for example here at 19:57). You can look at how standards evolve, like how quickly CSS2 became CSS 2.1, or the process to finish CSS 2.1 and make it a final Recommendation, or what happened between XHTML and HTML5. You can look at the challenge of delivering interoperable products while specifications are under construction (as in the case of 802.11 wireless). There are many challenges, and the web standards process, primarily at the W3C and similar organizations, is an important means to get the different communities involved to a consensus agreement.

The work in developing a public CSS 2.1 test suite and contributing it to the W3C, our recent work on different aspects of HTML5, and the improvements in IE9’s interoperability we showed at PDC are all examples of our principles in action. You can try out some of the tests yourself, in different browsers and on different operating systems.

As part of our commitment to interoperability, we’re going to make more interoperability information available about IE and keep it up-to-date. Today we’re publishing the first pieces of documentation here. These documents are drafts, and are not final. We will post more here on the IE blog about interoperability documentation (e.g. how we engineered creating this documentation, the process for keeping the documentation up to date).

Thanks –
Dean Hachamovitch

We have spent the last few months focusing on three things: quality, quality, and quality! For those of you with the Google voice and video chat plugin installed, you have recently received an automatic update that contains:

• A fix that reduces crashes on newer macs (Mac OS X v10.6.2 specifically)
• A fix for webcam compatibility on Windows (including HP webcams)
• Several fixes to increase plugin stability
• Several fixes to the infrastructure used to set up and connect your video calls.

From users who have chosen to “Report quality statistics” in their chat settings, we can see a substantial increase in call connection rates and a big decrease in the call drop rate (see chart below). We hope that this will result in more enjoyable conversations with our software.

As with all software, working on improving quality is a never ending process, so we hope that you will continue to report any issues you have in our user forum, and we will continue to work on improving connection rates and call quality.

Thanks to all of you who use our service -- and especially those of you who report issues!

Posted by Jessan Hutchison-Quillian and Mikael Drugge
Software engineers

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

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!

In addition to our engagement in the SVG Working Group, Doug Schepers, W3C Team Contact for the SVG Working Group, and I are going to be presenting SVG: The Past, Present and Future of Vector Graphics for the Web, at MIX 2010 in Las Vegas this coming March to share help developers understand where SVG is headed.  At Microsoft we have been investigating how SVG can deliver graphics for the next generation of the Web Development. Its inclusion in HTML5 promises many opportunities for developers to enhance their sites. We will provide an overview of SVG and how the standard is evolving to support a broader range of applications on the Web.

Patrick Dengler
Senior Program Manager