Yahoo! User Interface Blog (YUIBlog)

In the Wild for March 25, 2009

News and notes from the YUI community in the past few weeks. Let us know in the comments what we missed, and we’ll get it next time:

• Ross Harmes on YUI AutoComplete and the Flickr People Finder: Flickr’s Ross Harmes has an interesting piece up on the Flickr Code blog about doing super-fast search suggest in the creation of the Flickr People Finder feature.  Ross discusses in detail the process he uses to process contact lists quickly on the client, getting them into JavaScript.  From there, he turned to Jenny Donnelly’s YUI AutoComplete: “[With the] array of contacts in JavaScript, we needed a way to search through them and select one. For this, we used YUI’s excellent AutoComplete widget. To get the data into the widget, we created a DataSource object that would execute a function to get results. This function simply looped through our contact array and matched the given query against four different properties of each contact, using a regular expression (RegExp objects turned out to be extremely well-suited for this, with the average search time for the 10,000 contacts case coming in under 38ms). After the results were collected, the AutoComplete widget took care of everything else, including caching the results.”
  
• W3C Beta Site Using YUI Reset and Fonts: Nicole Sullivan wrote in to tell us that YUI Reset and Fonts are part of the new W3C site redesign, which you can preview here.  The site also uses Nicole’s OOCS work. 
  
• Kellogg’s Brazil Site Built with YUI Connection, Animation, and More: Kellogg’s Brazil web site implements a variety of YUI components.  We noticed Connection Manager, Animation, Get, and more, all coming down via a single combo-handled URL from yahooapis.com.  Nice. (Original source.)
  
• YUI Sighting — Greenbookings.com, Sustainable Travel Site: Yvo Schaap wrote in to tell us about Greenbookings.com, a recently-launched travel site that focuses on the emerging world of sustainable travel.  When you book through Greenbookings, they will caclulate and allow you to offset the carbon footprint generated by your travels.  Writes Yvo: “I’ve been working with the YUI framework for a long time and yesterday released my new website greenbookings.com that has almost every module of the framework in use: calendar, tabs, datatable, history + interval calendar, grids, autocomplete, and many more. Also much effort has been spend on a very quick page load by removing all javascript from the header to the bottom of the page.”  We love the site and the use of John Peloquin’s contribution to YUI, the Interval Calendar for date selection.
  
• YUI Sighting — Infinite Crossword Game Site: Marco Egli wrote in to tell us about a new release of Infinite Crossword, a game site using a wide array of YUI utilities and widgets.  “Last Friday a new version of Infinite Crossword was released. It’s the first version that is available in English. It is an infinite crossword puzzle that runs completely in the browser. Several different YUI components were used to development, including Animation, Button, Connection Manager, Datatable, Json, Menu and more. The game aims at the development of the largest crossword puzzle in the world. Users can play and add their own questions. It’s a mixture of crossword and scrabble.”  Check out the game here; be sure to log in and then use the menus at the bottom of the screen to add your own questions.
• DevX, “Yahoo’s Rich Web UIs for Java Developers”: DevX has a new article up for Java developers interested in YUI.  Writes Narayanan A.R.: “This is the first article in a three-part series that primarily targets Java developers who are not JavaScript experts, but are developing web applications with server-side frameworks (such as JavaServer Pages, Struts, or Spring). In this installment, JavaScript novices will see how to use YUI for setup and design , and should learn a good deal about object-oriented JavaScript programming. For developers already expert in JavaScript, this article series serves as an introduction to the YUI library.”
• Video: “YUI for Control Freaks” with Christian Heilmann: The Ajaxian team has Christian Heilmann’s YUI talk up on video; check it out here or in the embedded player below.
  
• YUI AutoComplete and Calendar on Turkish Airlines Site: Cagatay Civici wrote in to tell us about the Turkish Airlines site’s usage of YUI AutoComplete and Calendar on its booking tool.  Many travel sites have used this combination over the years; Southwest.com was one of the first adopters of the YUI Calendar and continues to use one of the original releases of Calendar on its current booking site.  Yahoo’s own travel site is another good example of how these widgets can be used together — it was implemented by YUI ImageLoader author Matt Mlinac. (Original source.)
• Caridy Patino Mayea: “YUI3: Controlling Key Strokes Events (keyup, Keydown, Keypress)”: Caridy (author of the popular Bubbling Library extensions to YUI) has a new blog post up on handling key events in YUI 3. (Original source.)
• Balsamiq Mockups for YUI Components: The Mockups to Go blog has several YUI components mocked up using the Balsamiq interface, including Menus and Buttons, Calendars, and Carousels. (Original source.)
  
• More from Matt Snider on YUI-EXT-MVC: Matt has been continuing work on his YUI-EXT-MVC project.  According to Matt, “the benefit of using the Controller classes’ AJAX system is that it simplifies YUI Connection Manager and a developer can pre-register callbacks, ensuring the type of the expected response. It is available at http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js. In the future I will be adding command pattern logic for fetching JSON and HTML data from the server.”
  
• Paul Tarjan’s Geo Explorer with YQL and YUI: SearchMonkey engineer Paul Tarjan has an interesting demo up using YUI TabView and the Yahoo Maps Ajax API to display the results of a YQL geo search.  The interface allows you to input a place name and then search for that location, that location’s siblings, that location’s ancestors, etc.  For the larger context and why this is interesting, see PHP inventor Rasmus Lerdorff’s blog post on the subject. (Original source.)
• Meg Smitley – “Dynamically Load YUI Dependencies”: Meg writes (on Meglog): “I’ve been using YUI Grids and LayoutManager for the backbone of my app’s interface since the end of last year. It’s been a steep learning curve and I still consider myself very much novice and, indeed, only noticed this week the ‘dynamic loading’ tab on the YUI Configurator. Rather than statically including the required YUI CSS and JavaScript resources, it is possible to use YUILoader to dynamically import them on load. While I appreciate that YUI-experts will not be impressed by my YUILoader-epiphany, this approach has helped me to slim down my app’s JS files while decreasing maintenance concerns and so I feel is worth mentioning for the benefit of other noobs.”  Check out her article for more details.
• Using Carousel with SugarCRM: Roger Smith has a tutorial up on the SugarCRM developer blog that provides “a quick and simple ListView customization which leverages the Carousel widget from the Yahoo UI (YUI) library. This customization completely changes the look and feel of the Contact ListView from a ‘rows and columns’ view of your search results to a Yahoo UI Carousel view. The YUI library is included in SugarCRM and provides a ton of UI features beyond what we use in the core application.”
  

Find conversations: bloglines | technorati

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