Yahoo! User Interface Blog (YUIBlog)

In the Wild for June 29, 2009

The big news from the YUI team last week was the release of YUI 3.0.0 beta 1, moving YUI 3 one important step closer to GA. What follows is some of the other news coming from the YUI community over the past few weeks. As always, please use the comments section to let us know what we’ve missed.

• Timr — a New Timetracking Web-app with Significant YUI Elements: Thomas Einwaller wrote in to tell us about Timr, a new time-tracking web application with a slick, rich, YUI-intensive interface including Panels, DataTables and much more. If your job requires you to track time-on-tasks, and you want a web-based system with support for mobile, check out Thomas’s project at Timr.com.
  
• How Happy is Dav? Harley-Davidson Using YUI: If you know YUI engineer Dav Glass, it will not surprise you to learn that he’s the one who discovered that YUI is in use on the Harley-Davidson website.  Check out their Harley-themed YUI AutoComplete in the main search box at the top of the page.
  
• Ara Pehlivanian on YUI 3 — New SitePoint Article: Ara, coauthor of a couple of excellent JS tomes, provides a nice introduction to YUI 3 and his take on why it might be of interest to developers.  His conclusion: “YUI 3 is a completely different animal than its predecessor. Along with a new syntax, you gain a faster, lighter, easier, and more flexible library—ready to take on your most ambitious web projects.”  Check out the full article for more.
  
• IBM DeveloperWorks: “Weaving a Better Web Page with YUI CSS”: From Martin Streicher, writing for IBM DeveloperWorks, who covers both Blueprint and YUI in this article: “YUI Grids provide CSS for both fixed-width pages and fluid-width pages, and it provides for arbitrarily deep nesting of columns. You can also position and move columns arbitrarily, so you can quickly and simply reorder the content on the page with CSS. For instance, you can move navigation from left to right with one CSS change. Further, you can augment YUI Grids with Yahoo’s own JavaScript library to add interactivity. You can read more about the YUI JavaScript library separately. This article focuses on Grids’ stylesheets, which can work independent of a JavaScript library.”  The article is free online and available as a PDF.
• Dav Glass’s “y’all Getter Done” T-shirts for YUI 3: File this one in the “just for fun” category… Dav, who is a YUI engineer by day, has branched off into t-shirt design with a YUI shirt available on Zazzle. Pictured is Dav wearing the shirt, which is a reference to Larry the Cable Guy and reads “y’all, getter done”.  Note that “redneck” is not an actual YUI 3 module, so this code won’t really run in a standard YUI 3 implementation.  But it’s funny nonetheless.
• Detecting if the User is Idle with JavaScript and YUI 3: From YUI contributor Nicholas C. Zakas: “Web developers have been interested in whether or not a user is idle since the Ajax explosion hit. With the introduction of more dynamic, highly interactive web interfaces came the desire to know if the user was actually doing anything at any point in time. Thus, the quest for determining if the user is idle began.”  Read on for full details on his blog. (Original source.)
• Cerberus Helpdesk 4.2 Using YUI Charts, TabView, and More: Cerberus Helpdesk is a CRM application offering both paid and free versions.  It’s UI features a variety of YUI components, from Panels to TabViews to reports enhanced by YUI Charts.
  
• Matt Snider on Using YUI EventProvider and Custom Events: Matt Snider, lead frontend on Mint.com and author of the upcoming YUI Storage Utility, blogs about Adam Moore’s YUI Event Utility components including Custom Events and EventProvider: “By using [the EventProvider] interface, developers no longer need to worry about whether or not a given CustomEvent exists when subscribing to it. Thereby, making coding easier, while allowing a developer the opportunity to not create CustomEvents that never fire. Additionally, EventProvider normalizes interactions with CustomEvents attached to objects, since the same methods will be attached to each object. Lastly, the events are bound to the augmented object, so although you might instantiate hundreds of EventProvider augmented object, each sharing an event named ‘update’, only the callback functions subscribed to the current object will execute when the ‘fireEvent’ function of that object is called. In summary, when using EventProvider the event names need only be unique on a single object, not across all objects (as with CustomEvent).” The full article is on Matt’s blog.
• Screencast of YUI DataTable Use on ResumeBucket: We mentioned ResumeBucket in a previous “In the Wild”, but they’ve posted a screencast that does a nice job of showing off Jenny Donnelly’s YUI DataTable in use in their messaging center.  Check out DataTable being used for user-managed tabular data here.
  (Original source.)
• Eric Ferraiuolo’s Facebook-style Overlay in YUI 3 & CSS 3: Writes Eric: “While wandering-around the Internet looking for examples of overlays in web application interfaces I thought of a challenge: create a working Facebook–styled overlay. I’m in the process of creating an application-wide design for overlays and needed some inspiration. Facebook uses overlays extensively and they have a distinct style [that others imitate, maybe even me  ]; I set-out to re-create this style.  Not wanting to mess around — I whipped up a working example of Facebook-styled overlays using only YUI 3 and CSS 3; things are nice and easy to do when you use the latest technologies.”  Check out his blog post for the full story. (Original source.)
  
• Dayshift’s Wrapper for YUI Charts: From the article: “If you use YUI Charts as suggested in many examples you’ll need configuration code for each individual chart which, if you have more than 2 or 3 charts on a page, can make your code appear cluttered. With the ChartsAjax class, all the chart options can be set with JSON data built dynamically on the server and retrieved from one AJAX call. This includes not only data for the datastore but also styling and column definitions.”  Check out the blogpost on Dayshift for the full example code.
• Using YUICompressor with Capistrano and Rails 2.3+: Tony Perrie wrote up some notes on using YUI with Capistrano and Rails; check out his tutorial here.

Find conversations: bloglines | technorati

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