In the Wild for October 30, 2008

By Eric MiragliaOctober 30th, 2008

Here’s a quick review of YUI-related news from the past six weeks. As always, please use the comments section to let me know what I’ve missed.

  • SliderWindow: SliderWindow is a solution that might appeal to you if you’ve been thinking about how to implement a Growl-style messaging system across your site. The author at Eaktion.com has a lengthy explanation and analysis of the use cases where this might be appropriate, as well as a number of examples of the tool in action. (Original source.)
  • Blind Up/Down Using YUI Animation: The prolific Matt Snider offers up another free, YUI-based implementation — a blind up/down animation that runs on the the YUI Animation Utility.
  • V3ggie.com — a Vegetarian Search Engine: V3ggie.com is a Yahoo! BOSS-powered search engine that uses YUI CSS and JavaScript on the frontend. Nice! Sitting here in my vegetarian Birkenstocks, I could not possibly be happier. (Original source.)
  • Using Reset Stylesheets: WebMonkey has a nice post out on the need for and use of “reset” stylesheets (like YUI’s Reset CSS). From WebMonkey:
    Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It’s true — measure your page elements in Firefox, Safari and Opera with a ruler and you’ll see each renders them in their own subtly different ways. For example, the default margin for paragraph tags in Safari is smaller than it is in Firefox. And what about the fact that most browsers automatically add bullets to your unordered list tags? Or that headlines appear bold? Web designers have been struggling to cope with these differences since the dawn of history (about 1993).

  • DataTable with Tooltips: Satyam (Daniel Barreiro) has a new DataTable example out illustrating the use of DataTable with Tooltip. A single Tooltip is reused throughout the table to improve performance.
  • AJAX Image Cropper with YUI and PHP: Asvin Balloo has written up a tutorial on using Dav Glass’s ImageCropper Control with a PHP backend to support full AJAX-style image-cropping.
  • Dynamic Tabbed Interface with YUI: Jim Mock wanted to clean up his blog’s sidebar, and he turned to the YUI TabView Control to do it. Check out his solution on his blog, soupnazi dot org.
  • JQuery Like GetElement Method in YUI: While YUI has a Selector Utility written by Matt Sweeney, we haven’t done as much as other libraries to integrate selector syntax into the core of the library. (Of course, this changes with YUI 3.x.) For those of you looking to add a lightweight element retrieval function to your YUI 2.x implementation — something more robust than YAHOO.util.Dom.get but not as full-featured as the still-in-beta Selector Utility — take a look at Matt Snider’s getElements function. Writes Matt: “One of the many features that I like about jQuery is the ability to pass in CSS selectors and HTML attributes into the jQuery for retrieving DOM nodes. YUI has methods for fetching elements by their ‘className’, but not by their HTML attributes, such as ‘type’ or ‘name’. Today, we’ll cover a method I wrote that supports fetching elements by tagName, className, and/or a collection of attributes. The method ‘getElements’ returns all nodes that match any of the tagNames and any of the classNames and every type of attribute (you can have multiple attribute types, such as ‘name’ and ‘type’) provided.”
  • Making Flash Messages Disapear, with YUI: The problem Duncan Brown addresses in this post, he says, is this: “Ok, so we all know how useful those flash messages are that cakePHP throw at us, ‘you’ve done it wrong, try again’. Well as much as I like them I don’t want to be reminded of my error until I go to a different page. The answer is to make them disapear.” And that’s what he shows you how to do, using the YUI Animation Utility.
  • Javascript Libs: Dojo ‘v’ Ext ‘v’ JQuery ‘v’ YUI: Developer Ron Savage takes a look at four major JavaScript libraries and describes his rationale for choosing YUI from among them.
  • Dynamic Data – Experimenting with YUI’s DataTable and DataSource Controls: Matt Berseth is back with a new .Net demo, this time using Jenny Han Donnelly’s YUI DataTable:
    I spent a few hours putting together a Dynamic Data web site using the YUI DataTable and DataSource components.  I mostly just did this out of curiosity to see how easy or difficult it would be to use the DD API with other components besides the GridView and DetailsView controls.  So I created a DD web site that provides read-only access to Northwind’s Customer, Employee and Supplier tables, but I am not using ASP.NET’s GridView, DataSource and UpdatePanel controls to render the grid.  Instead I have replaced these components with YUI’s client side DataTable and DataSource and serve the data using a web service (paging included!).  Below are a few of the highlights, and don’t forget to download the sample and try it out for yourself.  Its experimental, but if you are new to DD or YUI you might find it interesting.

    The live demo was throwing a data retrieval error when I last looked, but the demo code is still of interest if you’re working with tabular data in .Net.

  • FreeCell: This has been around for awhile, but I only noticed it recently — a full-blooded FreeCell implementation based on YUI. (Of course, we can never mention YUI and card games without also mentioning Robert Schultz’s incomporable World of Solitaire site.)
  • Compressing CSS and Javascript with Y!UI Compressor: Nick Skelton of beardscratchers.com has written up a nice tutorial on the use of one of YUI’s most popular developer tools, Julien Lecomte’s YUI Compressor.
  • Creating an Autotagger with Yahoo’s Term Extraction Service and YUI: James Long wired the Yahoo Term Extractor API to a YUI Rich Text Editor to create an autotagging service. The autotagger automatically distills tags from what you’ve written. This shortens a tedious step in user-generated content and helps users make higher-quality tags with less effort. Nice. You can try it out here.
  • YUI 2.6 Now Available for Aptana Studio: As we’ve mentioned previously, Lori Hylan-Cho and the Aptana team have YUI 2.6.0 support readied for Aptana Studio. This is great news for YUI developers and for the Aptana user community.
  • Animation Comparison of 3 Top Libraries: Matt Snider of Mint wanted to take a closer look at how animation libraries vary across the top JavaScript libraries. From Matt:
    Many of you probably know that there are a number of issues affecting how well an animation works in JavaScript: how busy the client machine is, how much CPU/memory your browser dedicates to JavaScript, how much JavaScript is needed to run a given page, and how much work the JavaScript is already doing; to name a few. Also, animation libraries use a combination of the ‘setTimeout’ or ‘setInterval’ methods of JavaScript, which are notoriously inaccurate (+/- 15ms), and/or (new Date()).milliseconds() to attempt to smooth animation, but it is fairly easy for an entire step in the animation to be skipped. The summary is that the more complex a page gets the less consistent that animations become.

    Check out Matt’s blog for his comparison and analysis.

  • Getting Resources with YUI Get: YUI author Dan Wellman has a new article out on Adam Moore’s YUI Get Utility. The article, which you can get for $3.20 from DMXZone, explores the many uses of Get. Dan writes: “The YUI Get utility is a relatively recent addition to the growing suite of developer tools that come under the YUI family. Its only purpose is to allow us to dynamically add new CSS or script resources after a page has loaded. Why would we want to do this? There are many reasons, but the most prominent would probably include Progressive Enhancement, Lazy Loading, Cross Domain Data Resources.”
  • EBay Motors Mashup Using YUI: I found a sweet deal on a Buick Century in Mishawaka, Indiana, on FindYourAuto.net, a site that mashes up a bunch of web services and then lets you crunch through the results using some YUI sugar (including DataTable and Slider).
  • Display XML Data with YUI DataTable Control: Brad Melendy offers some tips on working with Jenny Han Donnelly’s YUI DataTable Control in conjunction with XML data.
  • YUI Compressor TextMate Bundle: ExperienceInternet has a new TextMate bundle out that enables you to compress your files using YUI Compressor right within TextMate. Check out their 4 minute screencast to get an idea of how to operate this handy bundle.
  • Web Analytics Conversations: St�phane Hamel writes: “I’m introducing the Web Analytics Conversations, a Technorati and Google Blog Search mashup of over 150 web analytics blogs. Not only does it automatically rank blogs by Authority, Freshness and level of Activity, it also shows blog title, description and latest posts. The interface makes it very easy to sort blogs by any of those criteria, plus another one, called WAC ranking!” WAC is a nice interface built on top of the YUI DataTable, with custom visualizations and skinning for the pagination controls. This is a good example of what DataTable can do in the wild — and a great site if you’re interested in Web Analytics blogs. (Original source.)
  • YUI 3 in the Wild: While YUI 3.0PR1 is strictly a preview release and not recommended for production use, some YUIers have been eager to dive in and put the new code to use. Here’s one site we noticed recently…I’m sure there are many more to come as YUI 3 matures toward beta and GA. (Original source.)
  • AJAX Tabs Content Script for VBulletin 3.7+: vBulletin, which has long implemented YUI and even makes it easy for you to serve YUI from Yahoo’s CDN, now has a terrific new plugin for tabbed content based on Matt Sweeney’s YUI TabView Control.
  • YUI-based Alert Box – Replace Your Ugly Javascript Alert Box: We return to Asvin Balloo’s blog for a quick tutorial on leveraging Adam Moore’s YUI Loader and Satyen Desai’s Container components to dress up alert-boxes for web applications.
  • Simplifying and Enhancing YUI Test: If you find it cumbersome to deal with the boilerplate code and CSS involved in using Nicholas Zakas’s YUI Test tool, you may be interested in these helper files from grink that simplify the framing of your YUI Test scripts.
  • Ee-yui — a YUI Rich Text Editor for Expression Engine: ee-yui is a plugin that enables the use of YUI’s Rich Text Editor (including the light Simple Editor variant) into the Expression Engine CMS.

7 Comments

  1. Eric,

    I’m glad you are finding my work useful and linking to it here. I am always looking for good topics to investigate and blog about. Let me know if there is anything you would like to see.

    -matt

  2. Very useful!

  3. Here’s a very simple game that uses YUI’s drag and drop utility: bookquiz.simplewind.com/

  4. @Jackson — Thanks — I like it!! I’ve got you queued up for the next “In the Wild” post in a month or so. -Eric

  5. Thanks for listing my site Eric. You guys make great tools and made it easy for me to convert my vision to reality.
    Project #2 beckons.

  6. [...] quiz asking you to match up famous (and some not-so-famous) authors with titles from their oeuvre. (Original source.)Page Inlink Analyzer Using YUI and Site Explorer: Eric cooked up a quick YUI-based UI that provides [...]

  7. Holy Crap! Bobster’s tabs are on here. You should watch out for his other modification: Tabbed Forum Home. I could also give you 2 other modifications that will be based around YUI soon. :P TFH and the other two are both co written by me. :P I’m a geek. *sigh*