Yahoo! User Interface Blog (YUIBlog)

In the Wild for April 9, 2009

News and notes from the YUI community over the past few weeks. Please let us know what we missed in the comments.

• Vanguard.com Using YUI Core Plus Animation, Drag and Drop: Samantha wrote in to let us know that Vanguard.com is among the financial sites using YUI.  The login page uses YUI Core (Yahoo, Dom and Event) in addition to YUI Loader.  Animation and Drag and Drop are included on pages beyond the login. (Original source.)
  
• Caterina Fake’s New Startup Hunch Using YUI: YUI Core and Jenny Donnelly’s YUI AutoComplete Control are among the components used on the Hunch beta.  Caterina’s previous startup (Flickr) is also a big YUI user.
  
• Special Masters-eve YUI Sighting — YUI on Golf.com: Not that we are golf fans or anything (here’s YUI project manager George Puckett showing off her swing; and here’s Jenny Donnelly and Luke Smith…), but on Masters’ eve we’re happy to take note of Golf.com using YUI TabView, Connection Manager, and Carousel.  Bonus picture: YUI founder Thomas Sha gripping and ripping.  It’s a travesty none of us were invited to the Masters this year…
  
• YUI-based Archivd Launched, “Simple Research Tools for Teams”: Carlos Bueno wrote in to tell us about his new project Archivd, a collaborative research portal for teams.  Archivd uses a wide swath of the YUI utilities and widgets in its interface, including DataTable, Button, Menu, Carousel and Panel.
  
• Smart Polling from Eric Ferraiuolo, Built for YUI 3: Eric Ferraiuolo has launched a Smart Polling component based on the YUI 3 preview release.  Smart Polling is a strategy for checking the server for fresh content.  Here’s Eric’s description of how it works:  “Internally the Poller class is using conditional XHR GET requests. When polling is first kicked off (i.e. start() is called) the Etag and Last-Modified header values are cached. As subsequent polling requests are sent to the server the cached Etag is set for the If-None-Match HTTP request header, if no Etag was cached (i.e. the server doesn’t send Etags) then the cached Last-Modified date is set as the If-Modified-Since header. If a server doesn’t support conditional GET requests at all, sending neither an Etag nor a Last-Modified date, the Poller class will fire the modified event with every response.”  Check out his blog post for more details and to grab the source code. (Original source.)
• Balsamiq Mockups for YUI Grids: We wrote last month about Balsamiq mockups for a variety of YUI components.  Mockups-to-Go now has an entry for YUI Grids as well.
  
• Les Green, “Scope Correction and YUI”: Writes Les: “The more I use the Yahoo User Interface Library (YUI), the more I am impressed with it. I have been converting my JQuery imValidateForm plugin to a YUI widget for a project that I am working on. I ran into a scope issue when a button was clicked. I have dealt with Javascript scope issues in the past, but I did not know how to fix it using YUI.”  He documents his learnings in a new blog post. (Original source.)
• Les Green, “YUI Selector Utility: CSS3 Attribute Selectors and Pseudo-classes”: Les has another article out in which he demonstrates how he baked 8 lines of code down to a single line using the pseudo-class support in Matt Sweeney’s YUI Selector.
• YUI Compressor TextMate Bundle: According to its author, “The YUI Compressor Bundle enables easy compression of JavaScript and CSS files using the YUI Compressor, right from within TextMate.”  Nice. (Original source.)
• Jeffrey Cobb, “Creating a FIXED Element with Re-size and Scroll Detection Using YUI Dom and Event”: Jeffrey writes on his YUICoder blog: “We have all see them and some of us love them. It’s those elements that seem to float on the page like hovering little angels. Ok enough with the sappy crap…down to business. So you need to create a browser independent simple script to position an element on a page. I put together a simple script that will handle such a task and is flexible enough for even a newbie to configure.”  Check out his post for full details.
• Graffletopia — OmniGraffle Design Stencils for YUI: Graffletopia has a bunch of design stencils up for YUI controls — fantastic for rapid prototyping.  See also the versions for Balsamiq on MockupsToGo. (Original source.)
  
• Brian Love, “YUI and the DOM”: Brian Love has a new blog post up about using YUI’s Dom and Element components to interact with the DOM. (Original source.)
• YUI Sighting — Power-One.com Using Menu, Animation, and More: Reader Brad Bauer wrote in to tell us about Power One, whose website makes use of YUI Reset, Fonts, Animation and Menu. (Original source.)
  
• YUI TabView on ChartBeat.com: ChartBeat is a new realtime web analytics solution that employes a very active user interface to keep you abreast of what’s happening on your site and around the web.  One of those active pieces is a prominent use of Matt Sweeney’s YUI TabView Control, used to toggle between realtime and historical data views.
  
• Milo Timbol Combins 3D Flash with YUI Elements: Milo Timbol’s site combines the use of 15 YUI modules with extensive use of 3D elements in Flash.  It’s a personal/portfolio site, and it definitely stands out from the crowd.
  
• PHP, MySql and the YUI Charts Control: Hubpages has a new tutorial out that brings together PHP, MySQL and the YUI Charts Control.
• Sanjay Ginde’s LazyLoadDataSource: Sanjay Ginde published his variation on YUI DataSource’s XHRDataSource class.  Writes Sanjay: “While working on some auto-completing features for a project I realized that there was a remote retrieval mechanism missing. I had small datasets that I wanted to retrieve on demand in a single request. I thought to use the XHRDataSource at first, but there would continue to be multiple requests with each letter I typed.  To solve my requirement for a lazy, single-request data source, I created the (obviously named) LazyLoadDataSource. It’s much like the XHRDataSource, except it expects to retrieve all the data in a single request. Now I can create more efficient auto-completes that can retrieve data on demand while keeping requests to the server at an absolute minimum.”  The core use case here is that you have a small dataset, but you don’t want to load that data into the page until it’s needed; however, the dataset is small enough that, once it’s needed, you want to load it all at once. (Original source.)

Find conversations: bloglines | technorati

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