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!