Yahoo! User Interface Blog

In the Wild for August 21, 2008

It’s been a busy July and August for the YUI team, working on a preview release of YUI’s next-generation 3.x codeline and ramping up for the next release in the 2.x codeline — a release in which we’re focusing on bringing DataTable and RTE out of beta, adding a new Carousel Control (based on Bill Scott’s popular YUI-based Carousel), and more. In the meantime, there’s been a lot of YUI news out there…

• Satyam’s YUI Progress Bar: YUI superhero Satyam has a new Progress Bar implementation built on YUI. To know Satyam is to know that this thing is thoughtful and elegantly documented. You probably won’t be surprised to hear, either, that his YUI 3.x version is already in the works. (If you haven’t visited lately, you should also check out Satyam’s overview of his YUI resources.)
• Idea Pool’s Twitter Stream: Some good, healthy, gratuitious, animated fun using YUI and the Twitter API.
  
• Tim Fletcher on Customizing YUI Grids: We caught Tim’s Twitter about his new CSS Grids tutorial on dream.adeli.ca. If you’ve been thinking about Grids and how to customize page and block widths, you’ll find some good ideas here.
• Ajax-Alexa-Thumbnails from Eric Ferraiuolo: Eric has bottled up Alexa’s neat thumbnail web service that provides a mini-screenshot of a website based on its URL. If you have PHP and an Amazon Web Services account (and you’re willing to shoehorn just 1.4KB [minified] of Eric’s JavaScript onto your page), you can add lookahead link previews, as in this example from Eric’s resume.
• Somewhat Simple Image Viewer: It’s a rare "in the wild" post that doesn’t feature Matt Snider’s work — in this case, his Somewhat Simple Image Viewer script. In between doing lead F2E work on Mint.com (congrats on the gorgeous redesign, Matt), he continues to offer up gems on his blog, including this revision to his Super Simple Image Viewer.
• Chris Nielsen’s JSON Visualizer: This tool leverages the YUI JSON Utility to help you visualize and debug your JSON structures.
• Brad Harris’s EventMediator for Custom Events: If you’re building complex YUI Custom Event-driven applications, check out Brad Harris’s EventMediator script. Writes Brad:

  A large enterprise sized project I work on uses the YUI library extensively, and events are a huge part of the rich front end we’re developing. What you start to learn quickly about UI events, is that dependencies between different events start to get very complicated very fast. When A depends on B, but B needs to wait for C and D and E to finish, but E needs to wait for F to finish, you have a complex situation on your hands. Up until recently we were able to rely mostly on just using CustomEvents in YUI to handle this for us. Where that starts to break down is when you have one event, A, that is dependent on multiple other events, B, C, D. You now have to manually keep track of what has fired, and make sure you don’t fire that A until B, C and D have all fired. With very little code, here is a simple class that can be used in conjunction with YIU CustomEvents. It will handle the ‘book-keeping’ of firing what you want when all the events you have designated fire.

• Shifter Theme for WordPress: Shifter is a WordPress plugin using YUI Grids that allows users to switch between right-nav and left-nav layouts; in the admin settings, you can set your page layout using any of the major YUI Grids document widths. The developers have a helpful video to get you oriented to all the plugin’s capabilities.
• Yolk, a New WordPresss Theme Using YUI CSS: Ke Cai took the wraps off Yolk, his new theme for WordPress, leveraging YUI’s most popular component: Grids CSS.
• Baduin Raphael’s YUI-based slideshow: Updated and improved, with documentation and demos.
• YUI-based expand/collapse menu script: On HTMLBlog.net, Asvin Balloo writes in to "show you how to create an expanding/collapsing menu like Slashdot left menu used to be, using the YUI library and Dav Glass’s YUI effects widget.”
• 4HourSearch: This isn’t really "in the wild" — it came from Yahoo engineering VP Sam Pullara. It started life as "YUIL", which was a response to the much-discussed launch of the new search engine Cuil. It’s built using YUI and BOSS, and it’s a great demonstraton of how quickly you can move from idea to implementation using these tools. Here are 4HourSearch results for Yosemite.
• Ajax: Shaken, not Stirred: Also from a fellow Yahoo, this tutorial from Klaus Komenda is an entertaining introduction to YUI’s Ajax component, Connection Manager.
• Prefiero mis menús en Español, por favor: Librosweb.es posted "Menú desplegable," a lovely Spanish-language tutorial on YUI’s Menu Control.

Using YUI:

• Mozilla’s Firefox page. (We know Mozilla mostly uses jQuery, but it’s nice to see some YUI there, too!)
  

Some of the new YUI-based apps in Yahoo Gallery:

• UGotBling MySpace Profile Editor: The UGotBling profile editor for MySpace "is a full layout generator with real time preview. It’s easy to use and you can see right away what your Myspace layout looks like even without embedding the code on your Myspace profile yet." The new version is full of YUI goodness and some nice integration with web services from Google, Yahoo and Flickr.
• Smart image mouseovers from Punteney.com: Punteney.com’s image rollover script preloads your images and doesn’t try to swap in images that haven’t loaded yet — a little smarter than your average rollover script. Built on the YUI Core (Yahoo, Dom, and Event) and BSD-licensed, with examples.
• Polka Networks Emergency Card: This little web app makes it easy to create a PDF version of an emergency card that you can put in your wallet, listing common data that emergency personnel might find useful.

What did we miss?

Let us know in the comments.

Find conversations: bloglines | technorati

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