Author Archive

This will be our last “In the Wild” post for 2008. It’s been a fun year, filled with a lot of exciting implementations and other developments in the YUI world. Here are the once we’ve noted lately:

• YUI Sightings — PulpTunes: Here’s the elevator pitch for PulpTunes: “You’ve got a huge music collection in your iTunes at home.  You want to access that music from the office, at a friend’s party, or let other people hear it from anywhere in the world.  Install PulpTunes and access your music from anywhere, through a web browser.”  Check out the demo (filled with Creative Commons-licensed tunes) and see what a fantastic job Alejandro Pedraza has done in making a web-based jukebox app powered by a variety of YUI components.
  
• Visual Event for YUI and JQuery: Visual Event is the brainchild of Allan Jardine.  Here’s how he describes it: “When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.  It is due to this I’ve put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.”  Visual Event supports jQuery and YUI (version 2.6.0 has been tested, but others work as well).
  
• YUI Sighting — G-Snap!: G-Snap is a new service that let’s you tap into ad-hoc communities that form around real-time events — say, an NFL game or a political rally.  Events are called snapcasts, and you can join them or create them on the fly, from your desktop or by phone.  The snapcast UI relies heavily on YUI, incorporating most of the utility foundation and several widgets.
  
• Music Startup Bandcamp Using YUI: Oddpost co-founder Ethan Diamond has created Bandcamp as a means of providing bands with a means of distributing and promoting their music.
• A Review of (and Tutorial For) YUITest: Fredrik Kalseth recently published on his blog an entry titled JavaScript is Code Too: Test It!. It’s well worth a read. After quickly summarizing why unit testing is important he walks through the steps necessary to create a unit test for a simple edit-in-place behavior. (Note that his edit-in-place code is written in jQuery; YUITest will test any type of JavaScript - the JS to be tested need not be written using YUI.) He concludes with his overall impressions of YUITest. Full source code for his demo test is available for download.
• New YUI Controls Added at YUIAsp.Net: The YUIAsp.Net project has released another batch of YUI controls into the mix.  It now supports: AutoComplete, Button, Calendar, Charts, ColorPicker, DataTable, Editor, Logger, Menu, Paginator, Slider, TabView, and TreeView.  It’s now easier than ever to use YUI in your .Net projects.
• YUI Sightings — WishAHome.com, Indian Real Estate Site: WishAHome.com is a real estate portal, according to its authors, that targets “Indian users [and] that tries to provide property listings in a unique and innovative way. The information provided by the site is to-the-point and extra care has been taken to ensure that the information posted by users is accurate.”  The site makes extensive use of YUI, including a nicely-skinned implementation of Matt Sweeney’s YUI TabView Control on the home page.
  
• Creating a TextBox Calendar with YUI: Ryan Moore of Toolbox.com has been exploring YUI, and he’s posted one of the fruits of his early exploration — an adaptation of the YUI Calendar Control.  Writes Ryan: “This class is based on code posted by DavGlass, which was for YUI .12 - it allows you to pop up a YUI Calendar Control when you click on a text box, and then populate the text box with the calendar’s value when a date is selected.”
• Todd Kloots on CodeTalks ARIA Theatre: The fantastic CodeTalks site, dedicated to web accessibility, has an ARIA Theatre section to which YUI accessibility specialist Todd Kloots’s recent video has been added.  This video archive should become a valuable resource for front-end engineers as it aggregates tech talks on the art and science of building accessible web applications.
• BlueGriffon Adds Support for YUI CSS Grids-based Layouts: Daniel Glazman from the BlueGriffon project has added support for Nate Koechley’s YUI CSS Grids.  BlueGriffon is a web page editor based on the Gecko rendering engine that powers Firefox.
• Text Area Character Throttle: Some people (I’m not naming names, although “Miraglia” is a long name) tend to run on and on if you give them an open text field, so it’s sometimes necessary to throttle their otherwise undisciplined input in hopes that they’ll remove redundant, repetitive adjectives before submitting your form.  Lustr.nl has a YUI-based solution for you with its textarea character throttle.
• YUI in DreamWeaver CS4: YUI founder Thomas Sha has been working with Adobe to improve YUI support in the new DreamWeaver CS4.  He’ll have more to say about this soon on the blog, but the question came up in the forums and we wanted to point you to Thomas’s response.  If you’re already using CS4, check out Thomas’s notes on how to get started with the new YUI extensions.
• YUI Sightings — Montagraph: Montagraph is a fun site that allows you to create photo montages quickly from existing templates or to create your own template for sharing with others.  A number of YUI components, including Dav Glass’s ImageCropper Control, are in use on the site.
• YUI Sightings — Life Log: Writes Life Log’s author, Haitao Li: “What were you doing ten years ago today? You would know if you used Life Log. Log your life, your work, or take meeting notes with tags. It even works as shared clipboard across computers.”  Life Log uses a variety of YUI components, including Matt Sweeney’s YUI TabView Control. (Original source.)
• Make a YUI Menu of Your WordPress Pages: Chris McAfferty shows you how to load all your WordPress pages into a YUI Menu for compact, accessible access.  He gives you the WP code and notes that you need to load YUI Menu yourself; load it from Yahoo’s servers in two files (one for CSS and one for JS).

As always, please let us know what we missed by leaving a comment below.

Happy New Year from all of us here at Yahoo. Here’s a digest of YUI-related news from the holiday season. As always, we invite you to let us know what we’ve missed by adding a comment below.

• YUI Sightings — MojoPortal: mojoPortal’s author Joe Audette suggests that you “think of mojoPortal as a Starter Kit for Advanced ASP.NET Web Sites and Portals”.  It’s a flexible, attractive CMS that leverages the power of both YUI and jQuery.  An introductory video is available for those interested in learning more about mojoPortal’s capabilities.
  (Original source.)
  
• YUI Sightings — The Photo Stream: Scroll through the news of the day in a rich visual lightbox — and become a contributor or editor while you’re at it.  The Photo Stream is one of many sites exploring what the presentation of news will become as the web gets richer and more interactive.  The site uses several YUI components, including nice animation effects when you scroll the image canvas left or right.
  
• YUI Sightings — Bulgarian Maps Site Map.bg: Map.bg is a mapping site for Bulgaria built by Iliyan Peychev, Atanas Himchev, and Todor Todorov using nearly 20 components in the YUI family.  All of the core and utility components are present, and rich YUI controls like Layout Manager, TreeView, AutoComplete, Button, Panel and Slider play a prominent role here as well.   (Via Stoyan Stefanov.)
  
• YUI Sightings — Do It, Do It, Done! Tasklist Management Site: Glenn wrote in to tell us about his site, Do It, Do It, Done!  Here’s how he describes it: “Finally, a to-do list app with style and flair! We’ve created a simple web-app for making lists - and the YUI library plays a huge role in it! We use it everywhere!  We leverage the YUILoader Utility to bring pieces in as we need them and keep the initial load small!  One of the great things about it was, after our initial development, when testing on older platforms such as IE6, some aspects of our layout got broken, etc., but the YUI stuff all simply worked perfectly.  Thanks a bunch YUI Team! We are now working on our next project - and it’s YUI all the way!”  Thanks for the tip, Glenn, and congrats on the launch. (Original source.)
  
• YUI Sightings — ThrillCall, a New Concert-tracking Site: Reader Jason wrote in with the following “In the Wild” tip: “Hi, I’m a former Yahoo who has been working at the startup ThrillCall (http://ThrillCall.com). I did all of the frontend work and use YUI everywhere on the site. You will notice many of the widgets including Modal, Overlay, Tooltip, Slider, etc. are used throughout the site. I extended the base classes and added additional functionality unique to our site.” ThrillCall looks like a fantastic site for tracking nearby concerts and staying on top of the touring schedules of your favorite artists; thanks for the tip, Jason! (Original source.)
  
• Christian Romney’s Functional Method Collection for YUI: Gabe Moothart has updated Christian Romney’s YUI-Functional method collection, which is up on GitHub.  The collection includes each, collect, inject, indexOf, detect, select, reject, grep, partition, and zip functions. Gabe’s update brings the collection up-to-date for YUI 2.6.0.  Christian has licensed YUI-Functional under a BSD license, matching that of YUI.
• YUI Sightings — Romanian Social Site Joined.ro: Commenter laura wrote in to tell us about Joined.ro, a “Facebook-meets-LinkedIn” site for the Romanian market.  The authors are implementing a variety of YUI building blocks including Animation, Drag&Drop, Buttons, Containers and more.
  (Original source.)
  
• Web Interface for YUI Compressor: refresh-sf.com has put up a web interface for YUI Compressor — this is convenient if you just need to use it periodically and don’t want to download and setup the app yourself.  Check it out here. (Original source.)
• Using YUI Widgets in Dreamweaver CS4: Roman Villarreal of the Adobe Developer center has posted a new tutorial on using Dreamweaver CS4’s support for YUI: “One of the strengths of Dreamweaver CS4 is its extensibility. Yahoo! User interface (YUI) widgets are a set of extensions that you can use in Dreamweaver CS4 to easily add Ajax and JavaScript functionality to a web page. These widgets are supported by the robust Yahoo! User Interface (YUI) framework and well documented (with examples). Using key new features in Dreamweaver CS4, you can easily edit and test the JavaScript and CSS files of these widgets until they fit the design and functionality of your pages. In this article, I show you how to work efficiently with YUI widgets in Dreamweaver CS4, using the Insert panel, Related Files bar, Live view, and Code Navigator.”
  
• YUI Sightings — TwiTree.com: Asvin Balloo of HTMLBlog created a new Twitter app called TwiTree that revisualizes your Twitter followers in a recursive tree structure.  “I am happy to announce the launch of twitree.com,” Asvin writes.  “It’s a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded… The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc… Stay tuned for further information.” (Original source.)
  
• Popular JavaScript Framework Libraries Compared by WebReference.com: Rob Gravelle posted a comparison of three of the major open-source frontend libraries on WebReference.com, looking at YUI, MochiKit, and jQuery.  He takes a much closer look at the libraries than most authors of comparo articles do, so if you’re curious about how Mochi or jQuery differ from YUI this is worth reading.  About YUI, Rob writes: “Perhaps the most impressive part of the YUI Framework is the collection of configurable control/widgets. Not only are they extremely versatile and useable, but they can also be given a cohesive, visual look and feel.”
• “The Best JavaScript Library”: The ongoing debate over which JavaScript/CSS library is “the best” has been an entertaining one. Emad Ibrahim has documented his own process of thinking this question through. “When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This led to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look&feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision…”  Emad discusses his pros and cons for three major libraries (YUI, Prototype and jQuery) and there is further discussion in the comments section.
• YUI-based Table Striper: Asvin Balloo is back with a new YUI-based helper script for striping the color on table rows.
• How to Use the YUI Compressor: Writes Chris Barr: “Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it won’t obfuscate your code.”  His blog post offers a tutorial on using YUI to compress jQuery. (Original source.)
• Patterns for Widget Development: Brad Harris has a tutorial up on his selfcontained blog treating the subject of widget development patterns for JavaScript: “Recently I’ve been doing some work setting up some standard javascript widgets for a web application I am working on. By widget, I’m referring to items such as javascript date pickers, tooltips, autocomplete inputs, etc. I’m building on top of YUI for this approach, but the principles I’d like to discuss are applicable to any library. YUI provides a fantastic javascript library, and a collection of widgets right out of the box. More than likely, as you add them to your application, you’ll want to wrap or extend them in your own javascript implementations to get them functioning as desired. To accomplish this, I typically have taken one of two approaches, and these are the topic I’d like to cover. To provide a working example, I’ll use a simple wrapper for a YUI Calendar widget that is linked to a text input, and opens by clicking a calendar icon.”  Check out his post for the full deep dive on the subject.
• FireUnit Extension for YUI Test: YUI Test author Nicholas C. Zakas has released an experimental hookup between YUI Test and the new FireUnit Firebug extension on his personal blog: “When I wrote YUI Test, I made sure that the TestRunner object was completely event-driven so that test results could be output in any way that made sense. To prove how easy it is to create your own visualization for YUI Test results, I created a FireUnit extension for YUI Test. The extension is nothing exciting, just a simple JavaScript object that subscribes to the various TestRunner events and then marshals them to the appropriate FireUnit API calls. All you need to do is load the file and include the following line of code: YAHOO.tool.FireUnit.attach();. That’s it! All the results will be output to the Test tab in Firebug. (Original source.)
• Dynamic DOM Search Experiment: Matt Snider has another utility to add to his growing list of YUI extensions — this time, it’s a method for dynamically defining the relationship between nodes. Writes Matt:  “Today’s article illustrates an experimental function that parses a string, containing instructions for searching the DOM relative to a node. This method was inspired by a desire to allow a separate design team to specify the relative location of other DOM nodes. This way, parts of the JavaScript that handle user triggered events (such as ‘click’) need not hardcode relative nodes.  For example, suppose when the user clicks on an anchor, a relative node is made visible and the design team frequently changes the location of that node. An ID could be used, but that doesn’t work as well with dynamically generated content…”  Check out Matt’s blog for source code and further ruminations.
• Enhancing Search Boxes With YUI: Karthik Viswanathan wrote a YUI AutoComplete implementation tutorial on Lateral Code.  Writes Karthik: “earch boxes enable users to find what they need quickly and efficiently. By adding an auto complete (or search assist) effect to these boxes, web designers further aid their users by expressing their site’s content through suggested search terms.”  Check out the full blog post for the tutorial and demo.
• YUI Sightings — Wordcraft, a New, Lightweight Blogging Platform: Brian Moon has created Wordcraft, a new blogging platform aiming for light weight and simplicity.  Brian implemented YUI to drive the admin portion of the platform.  Wordcraft is open source and you can find the source on Google Code. (Original source.)
• Preserving Tab State with TabView and Grails: Writes Keith Cochran:  “I use RichUI for my tabs in a Grails application.  The tabs look good, and it works well, except for one problem.  When you refresh the page, the tab reverts back to the first tab.  So, if you do cool stuff like adding in something with a modal or dialog, and you go back to your page, it reverts back to the first tab.” He took an existing solution using cookies to preserve Tab state and adapted it to Grails; he posted his solution on his blog.  (Note: RichUI, a Grails plugin, draws from several JavaScript libraries; many of the controls, including TabView, are from YUI.) (Original source.)
• Consuming Flickr’s API with YUI’s Get Utility: joedag32.com offer’s up a script to pull in data from the powerful Flickr API using YUI’s Get Utility, obviating the need for a server-side proxy.

Here’s the digest of YUI “In the Wild” entries since January 6. Note that you can get these in realtime on the YUI Library Twitter feed, along with any other breaking news and announcements. Please let us know in the comments if we’ve missed something.

• Using Code to Change/Show Tabs: Bret Levy has added to his YUI Help site a new tutorial on how to change tabs and respond to tab changes in Matt Sweeney’s YUI TabView Control.
  
• YUI3 on the Roadmap for Launchpad: Our friends at Canonical have chosen YUI 3 as the Ajax framework for Launchpad. Writes Mark Shuttleworth: “We picked YUI 3, the next version of Yahoo’s UI toolkit for the web, as a foundational layer for this AJAX effort, and we wanted to bring everyone up to speed on the processes for designing, building and testing web client apps. It was a lot of fun. In particular, we wanted to unify the web service APIs that we already publish with this AJAX work, so that it would be easy to write web browser code that could talk to the exact same API’s we publish for developers who are integrating with Launchpad. That’s now possible, which means that any API we use for AJAX work will also be available to developers writing their own tools to access Launchpad directly through the web services. Thanks to the awesomeness of YUI 3, the team is now hard at work turning those ideas into reality.”  We’re thrilled to have this savvy team building on YUI 3 and we’re looking forward to the great feedback that will result from that process.
• Satyam’s Progress Bar Widget Updated for 3.0.0PR2 (and 2.6.0): Satyam’s excellent Progress Bar widget has been updated for 3.0.0PR2 (and there is a 2.x version as well).  He’s added YUI Doc-generated documentation and there are numerous styles to choose from.  Because this is Satyam, you would expect there to be impeccable documentation, and you won’t be disappointed.
• David Cilley on Converting YUI ButtonGroups into Image Buttons: Writes David: “ButtonGroups in YUI are fairly quick to implement, have a nice look, and act the way most people expect.  I’ve been surprised to find out that there are no options available to use images in place of the text on the Buttons inside the ButtonGroup.  In our most recent AJAX Photo Viewer Demo, I decided to use a ButtonGroup for the main mouse tool controls, and Bill Bither suggested that I use icons instead of text. I didn’t want to throw away what I’d done so far, since the demo was pretty much done at that point.  I poked around YUI’s documentation a bit and came up with simple function that can convert a YUI Button into an image only button, much like a button on a tool bar.  These converted YUI Buttons still maintain the same original properties internally, so you can use them interchangeably.”  As usual, David provides full code source in his post, along with a live conversion demo.
• YUI Engineer Dav Glass on Browser-sniffing Vs. Feature Detection: Dav provides a look inside the thought process of one of YUI’s most pivotal and prolific engineers: “While developing the YUI Rich Text Editor I learned that browser sniffing is, indeed, quite needed. Now, YUI does browser sniffing a little different. We try to detect the different rendering engines, so there is no firefox, mozilla, safari or chrome. It’s gecko, webkit, ie, etc.. The main reason that sniffing is needed in the Editor is because of the execCommand method. All of the A-Grade browsers support the method. The method is there to detect, but they all don’t do the same thing when executed. So how am I to tell what I am supposed to do? I have to rely on sniffing in order to make the browsers behave the way I want them to.”  You can read the full entry on Dav’s blog.
• YUI Sightings — YUI Carousel on DailyMile.com: Ben Weiner wrote emailed to let us know that he’d deployed Gopal Venkatesan’s YUI Carousel Control on DailyMile.com to good effect.  You can see the custom-styled Carousel implementations both on the homepage and on the forums page.
  
• YUI Timeline on Xtimeline.com: User kejun has put up a timeline of all YUI releases since 2006 up on xtimeline.com — a nice visualization of how far the library has come and a reminder of all the steps along the way. (Original source.)
  
• Nicholas C. Zakas on ‘the YUI 3 Revolution’: Nicholas is part of the extended YUI family, so we’re not reaching far afield for this, but it’s worth sharing his thoughts on YUI 3 — after all, he led the team that built the next-generation Yahoo home page around our early YUI 3 versions.   Writes Nicholas: “I’ve heard some people complain that YUI 3 is too different from YUI 2, and that making such a different library is a mistake. I actually believe that this was exactly the right move at exactly the right time and give the YUI team a lot of credit for having the guts to do it. In a world where evolutionary programming is the preferred approach, YUI decided for a revolutionary approach.” Read the full essay here.
• Nicholas Zakas’s YUI3/Yahoo Home Page Talk on SlideShare: Nicholas blogged not too long ago about the choice he and his Yahoo Front Page engineers made to use YUI 3.0 preview releases to underpin the frontend framework for the next generation of Yahoo’s iconic homepage.  He gave a talk on this subject at a San Francisco JavaScript meetup, and the slides are now up on SlideShare.
• Open-source PrimeFaces Project Marries JSF and YUI: From the website: “PrimeFaces is an open source library for Java Server Faces Web framework. Main goal of PrimeFaces is to create a component suite containing a rich set of components and provide non-rendering JSF extensions to ease development with JSF. PrimeFaces has three modules each focusing on different aspects of JSF.”  Numerous YUI components are included in the UI leg of the PrimeFaces project. (Original source.)
  
• Ian McCracken on Using YUI DataSource with Dynamic ORequest: Ian McCracken wrote up a technique he came up with while using Jenny Donnelly’s YUI DataSource Utility:  “YUI (which I love) has an excellent abstract DataSource component that normalizes requests for data to something compatible with all their widgets. I find it generally useful as well, even when I’m not using, for example, a YUI DataTable to display data.  Last weekend I wrote a UI notification subsystem for Zenoss, based on YUI and Yowl. I used a DataSource to handle communication with the server.”  Check out Ian’s blog post for a full description of the technique.
• Another Web-based Interface for YUI Compressor, from 2clics.net: We’ve noted web interfaces for Julien Lecomte’s YUI Compressor in the past — and we have a new one for you this week.  This one is from 2clics.net, and it provides another option for you in those cases where you need to compress a file and you don’t have access to your command line.
• YUI Compressor-based Utility for Compressing by Directory: jquery.sheet has released a Windows app that leverages Julien Lecomte’s YUI Compressor to compress all the JS/CSS files in one directory and move them to a new directory.  Writes the author: “I found Yahoo’s YUI Compressor to do a wonderful job of compressing and is my compressor of choice; but it lacked multi-file compression for those of us that need to keep source, and release compressed js/css files. And also for those of us that are impatient…”  If you don’t want to script your build process, this is a handy tool for crunching by directory.
• Podcast: Christian Heilmann, “YUI for Control Freaks”: This is a podcast of Christian’s Ajax Experience talk: “The hidden quality of the YUI Library is the ability to control and test what you are doing at any point in the process. This session breaks down the internal events of YUI, how to control animations, and what you need to know about the browser instance you apply your code to. With the classic ‘Web site’ dying out more and more, we need to make sure our scripts and widgets are as open as possible to outside applications. This talk shows you how YUI is built to allow for integration with other scripts.”
• Agimatec’s Notes on Using YUI Loader: The engineers at Agimatec have written up a detailed blog post on how they’re using YUI Loader to bring on-demand functionality into the page: “Using the portlets standard (JSR-168), we are able to meet our customer’s needs in a way we never could have done when developing traditional, monolithic web applications. But this flexibility comes at a price: we do not know which apps are on a page when it gets loaded; further, we want to be able to add new portlets to each page at any time. From a Javascript perspective, this means that traditional ‘just put script tags into the header’-style Javascript coding will lead to a very bad user experience, since every page would be bloated with stuff the user will never use and - even more important- the user experience will degrade as we are adding new features to our product, even if our customer does not need or want the new features.”  Check out their post for full details and sample code.
• The New, More Accessible Yahoo Currency Converter: Dirk Ginader writes on the YDN Blog about his team’s work making the Yahoo! Currency Converter (which uses the YUI AutoComplete Control) more accessible. The team focused on the following goals:
  • make it as easy as possible to use
  • make it work without page reloads
  • make it fast
  • make it accessible to everyone

  If you’ve been following Todd Kloots’s accessibility work on YUIBlog, you’ll definitely want to check out Dirk’s report as well.

• Brian Love on “Getting Started with YUI”: Writes Brian: “So, why use YUI?  Because you can easily create a great looking web application that works seamlessly without needing additional JS libraries and plugins.  Almost all the functionality you are looking to include in your next generation web application is right there.  No need to go looking on Google for a Grid plugin, or a calendar widget — everything is included, and works together beautifully.”  I’m sure he meant to search for that Grid plugin on <cough>Yahoo! Search</cough>.
• Karthik Viswanathan on Enhancing Search Boxes with YUI: Karthik Viswanathan writes on the Lateral Code blog: “Search boxes enable users to find what they need quickly and efficiently. By adding an auto complete (or search assist) effect to these boxes, web designers further aid their users by expressing their site’s content through suggested search terms. Hand coding an auto complete system can be tough and unappealing. Luckily, the Yahoo! User Interface Library (YUI) makes this much easier with it’s AutoComplete control.”  Click through for the full article, including demos and sample code. (Original source.)
  
• Byuic from Chad Auld — Bash/python Tool for YUI Compressor: Chad Auld (of Yahoo, MiaCMS and Brilaps) has a build-time utility for bash and python that facilitates use of YUI Compressor.  Writes Chad: “The goal of [byuic] is to create a set of commandline scripts that recursively find, compress, and possibly obfuscate all the JavaScript and CSS files in a given directory structure with the YUI Compressor. Using the byuic wrapper scripts one can easily integrate compression as a standard part of a projects normal production build process.”
• YUI Among Antonio Lupetti’s “10 Beautiful Web UI Libraries”: We’ve seen a lot of lists of JavaScript/CSS libraries over the years, but we haven’t yet seen one like the one Roman blogger Antonio Lupetti put together — based on aesthetics.  YUI makes the list, but many of the others are less commonly cited in such comparisons.
• RockstarApps’ Web Optimization Plugins for Eclipse and Aptana Use YUI Compressor: From Ajaxian: “This week RockstarApps released a beta version of jsLex 1.2. The goal of project is to ‘codify’ all the research that has been done in Web Optimization by people like Steve Souders and his 13+ Web Optimization Techniques, plus others. Making it possible for everyone to create highly optimized Web application with little or no impact on the how developers build and test their applications.”  YUI Compressor is one of several strategies these plugins use for driving up your YSlow grade.

It’s been a big week in the YUI world, with YUI 2.7.0 being released and our third birthday coming up. But, as usual, most of the news is coming from the YUI community, with new implementations, articles, and adaptations emerging every day. Here’s some of the YUI news we’ve noticed in the past few weeks:

• YUI Sightings — Flurry, Real-time Mobile Anlaytics: According to VentureBeat: “San Francisco-based Flurry has launched a new mobile application analytics tool that works across a variety of mobile platforms, including the iPhone and Google’s Android. Today, the company is announcing that more than 300 developers have used its free service since the beta launched in October… The program also works with BlackBerry and Java ME platforms (though not Palm). Flurry lets developers see exactly how consumers use their applications, and provides information on which features of the application are used and for how long.”  Flurry uses a third-party charting library and a wide assortment of YUI components in its Google Analytics-style dashboard. (Original source.)
  
• YUI Sightings — WeUseCoupons.com: New site WeLoveCoupons.com adopts YUI while availing you of a frugal selection of links.
  
• Chad Auld, “jChat - YUI, Jaxer, & ActiveRecord”: Writes Chad: “For those familiar with MiaCMS you’ll already know I’m a huge fan of the Yahoo! User Interface Library (YUI).  I recently finished up the JavaScript work for version 4.8 of MiaCMS.  With some free-time on my hands I figured what better way to fill it than with a new project?  So I set out to learn some new technology and see how I might mash it up with some existing skills like YUI.  The new technologies I decided to experiment with were Aptana’s Jaxer and their new ActiveRecord.js framework. Jaxer ships with a number of basic samples, but I’ve seen quite a few people online in search of more complex examples and specifically ones that make use of the new ActiveRecord.js library.  The extended example I developed is called jChat.  jChat is fully functional chatroom application that demonstrates integration of the following web related technologies; HTML, CSS, JavaScript, MySQL, YUI, Jaxer, and Activerecord.js.”
• Sarah Gray of DevChix on Using YUI DataTable with Rails: Writes Sarah: “I am currently working on an Rails app that integrates the YUI DataTable, and in going through the tutorials I noticed they are all assume a PHP back-end. I also saw a number of people asking how to get this to work with a Rails controller, so I thought I’d write up my experience in the hopes that it helps someone else.”  She provides detailed code samples and exposition in her post.
  
• YUI Sightings — Favicon Editor from Ed Eliot, Cyril Doussin, and Stuart Colville: Old friends Ed, Cyril and Stuart have formed Project Fondue, and one of their new creations is a web-based favicon editor. The frontend is built with YUI, including YUI Loader and a fantastic implementation of YUI Color Picker. (Original source.)
  
• YUI Sighting — Diddit, a Social Lifelist for the Web: diddit is a new experience-sharing site that makes your best life experiences sharable in a checklist format.  Check out TechCrunch’s coverage of their launch.  TechCrunch writes that diddit  “is looking to help you check off all the things you’ve done with your life, and discover new things that you’d like to do. The site allows users to browse through thousands of activities in categories ranging from the bars you’ve visited to ‘Bizarre Retro Candies’ you’ve eaten at one time or another. To coincide with the launch, Ludic Labs, the company behind Diddt, has also announced that it has closed a $5 million funding round led by Accel Partners with KPG Ventures also participating.”  They’re launching with a frontend laced with more than a dozen YUI components.
  
• YUI Sighting — MyMathMind, a New Math-learning App: MyMathMind is a new math-learning application that leverages YUI to create a varied set of math challenges. From the site’s description: “Master basic mathematics by completing addition and multiplication challenges. Challenges are presented in table format to help reinforce a pattern of understanding.”  Progress is depicted graphically as you go. (Original source.)
  
• Simon Tiffert on “Javascript Unit Tests with the YUI TestManager”: Over on the Agimatec blog, Simon Tiffert writes about test-driven development and unit tests in JavaScript: “The easiest [tests to use] are unit tests. We have tried several JS unit test frameworks. Including JSUnit, Scriptaculous Unit Test Runner and YUI Test. With a lot of YUI components like the YUI Loader and many YUI widgets we refactored our unit tests to use YUI Test. We like the Yahoo User Interface because of its documentation and also…its code quality.”
• YUI Sightings — StanfordAlumni.org: Good to see YUI being used on the alumni website up at The Farm, where, many years ago, Yahoo was founded in a trailer by two grad students.  YUI Core (Yahoo, DOM, Event), TabView and Containers are all in use.
  
• YUI Sighting — “The Marketplace” OpenSocial/MySpace Storefront App: Navaneeth Krishnan, founder of NetCarnation, emailed to tell us about The Marketplace.  The Marketplace is a storefront built for OpenSocial platforms, and it currently runs in MySpace and Friendster.  Nava writes: “The Marketplace is completely written using YUI and we have used almost all YUI components in the product including Animation, Button, Dom, Dialogs, Paginator and TabView. Since OpenSocial is a Javascript-based API, our complete rendering is based on YUI.”  You can check out some example stores on MySpace here.
  
• Matt Snider on Augmenting YUI Cookie: Matt Snider of Mint is back with more built-on-YUI innovation in his exploration of Nicholas C. Zakas’s YUI Cookie Utility. Cookie is robust, Matt writes, but “there are a few methods that were missing: ‘getNumberOfCookies’, ‘getCookieSize’, and ‘isCookiesEnabled’. The ‘getNumberOfCookies’ function returns the number of cookies currently set; simply splitting around ‘;’ seems to work in the browsers I tested. Let me know if there is a better way or browser issues I missed. The ‘getCookieSize’ method does a pretty good estimation of the cookie size, by assuming all alpha-numeric characters are not escaped and thereby stored as 1 byte and all non-alpha-numeric characters are escaped and thereby stored as 3 bytes. Although, the later is not always true, it is a fairly accurate assumption; I am open to a better regex that considers the other characters which are not escaped. Lastly, the ‘isCookiesEnabled’ enabled function determines if Cookies are enabled, first by looking at the ‘navigator’ object, then by checking if there is a cookie set, and lastly by adding a test cookie.”  Check out Matt’s blog for the full scoop and code samples.
  
• AutoComplete Inputs with PHP, Pear and YUI: Vikram Vaswani of DevZone writes about using YUI with PHP and PEAR, noting that YUI’s AutoComplete provides all the frontend magic you need to create search-suggest and other innovative interactions. “Add a little bit of server-side glue, in the form of a PHP script that talks to a database to generate valid suggestions, and enabling this functionality in a Web application now becomes a matter of hours, rather than days. In this article, I’ll show you how to do this using three different libraries: PEAR HTML_QuickForm, YUI, and Dojo. Come on in, and find out more!”
• Bret Levy’s Dialog-with-Confirmation Demo: Bret Levy of Levycode is back with a new demo “showing how to setup a dialog submission with a confirm step…  We have a sample form which accepts some fields and has save, delete and cancel buttons. The form itself ‘blocks’ submission by normal means — that is, there is no submit button and the <form> tag contains code to block any browser’s ’standard’ or ‘default’ submissions (such as when the enter key is pressed).”  Check out his post for full code and the working demo.
• YUI Sighting — SeatHound: Looking for tickets for Springsteen at the HP Pavillion?  Check out SeatHound, a richly YUI-based site for comparing aftermarket ticket prices.  DataTable, Slider, and a bevy of other YUI components are in play.
  
• Mmutham’s Wiki on Using YUI and DWR Together: Interested in adding YUI to your existing DWR project (or vice versa)? mmutham’s Wiki has a new article out walking you through some of the key steps. (Original source.)
• YUI-Shed on YUI and Google Gears Data Sets: YUI-Shed helps you get up to speed using YUI DataTable with data from a Gears dataset. (Original source.)
• Easy YUI Compressor for Windows: User hani on the YUILibrary.com developer forums has released a Windows app that wraps YUI Compressor. This is one of several YUI Compressor UIs that we’ve seen lately, all of which are helping to make YUI Compressor accessible to an even wider developer base. (Original source.)
• Norman Kosmal on Django and AJAX Using YUI: Blogs Norman: “I was wondering how requests via AJAX can be implemented into Django framework. So I wrote a small application and hooked it into an existing Django project for testing purposes. The application has two models, Employee and Project, and two methods. The first method fetches data from the project and employee tables and renders that data onto a template. The second method takes care of the AJAX request and returns a JSON string. There is javaScript code embedded on the template itself, which is responsible for the AJAX requests and manipulating DOM on a successful response.”  Check out his post for full sample code. (Original source.)
• YUI Sighting — SpinCloud: SpinCloud is an intriguing maps/weather mashup making use of a wide swath of YUI components — including AutoComplete, Button, TabView, Cookie and much more. (Original source.)
  
• Using YUI Uploader with CakePHP: Andrew Kolesnikov has a new article on the Bakery that shows you how to use Allen Rabinovich’s YUI Uploader (our Flash/DHTML hybrid mutiple-file uploader used on sites like Flickr and Yahoo! Video) in your CakePHP projects.  Andrew’s article should get you up and running in just a few minutes’ worth of work.
  
• Pierre Rineau’s Drupal Module for YUI-enhanced Forms: Pierre Rineau describes this new module as follows: “This module intends to provide FAPI pre-defined custom form elements using the YUI Library.  It’s a developer module, providing such form elements, it helps to develop YUI-based forms easily without a line of javascript.  This module is only starting, it only provides a non configurable YUI Calendar and a simple YUI horizontal slider.”  Pierre is looking for developers to try out the new module and provide feedback. (Original source.)

Thanks to everyone who wrote in with tips for this column. Let us know in the comments if we missed something big, and we’ll get it into the next post.

Here’s the latest digest of YUI news and notes from the past few weeks. You can follow these in realtime on the YUI Library Twitter feed. As always, please let us know in the comments if there’s something important we missed.

• Stoyan Stefanov’s Site Search Bookmarklet with YUI and BOSS: Stoyan has created a bookmarklet that generates a YUI and BOSS-powered search box for your site (or any collection of sites).  Writes Stoyan: “Ever wanted to search only the web site you’re currently on? Not the page, but the whole site. And only this site, not the rest of the web. This bookmarklet does just that.”  Using the excellent BOSS engine (”build your own search service”) from Yahoo! Search, along with YUI components like Adam Moore’s Get Utility, Stoyan provides a nice addition for any site, with the code available on GitHub. He’s even provided a screencast to get you started:
• Exponent CMS 0.97 GA Arrives with Tighter YUI Integration: From the Exponent CMS blog post regarding the 0.97 GA release: “Many components now take advantage of YUI’s JS and CSS framework, including Navigation Management, News, Calendar, Image Gallery, Navigation Module Views, and the administrative chrome. A very tight integration with YUI Loader also provides a great framework for YUI Developers to quickly get scripts up and going, letting Exponent and YUI handle the work of figuring out dependencies.” (Original source.)
• Weight-prediction with YUI Sliders and Charts: Do you find yourself needing to bulk up or slim down in the coming months? M.J. Henderson’s Weight Predictor app takes input about your lifestyle and calorie consumption and forecasts your resulting weight curve.  YUI Sliders are used for the input and the YUI Charts Control is used to visualize your forecast. (Original source.)
  
• EveryCalc BMI Calculator with YUI Carousel: There are many “body mass index” calculators on the web, but this is the first one we’ve seen that shows you pictures of celebrities who have the same BMI that you do.  Relevant to the YUI world, those pictures are shown using Gopal Venkatasen’s YUI Carousel.  Not surprisingly, the lower your body mass is the more pictures there are to compare yourself to in the celebrity world. (Original source.)
• YUI Sighting — Dmitry Monin’s Lightnote CMS: Dmitry Monin has released version 1.0.1a of his Lightnote CMS.  Writes Dmitry, “[Lightnote] is a Web 2.0 CMS, which makes use of many YUI components like Animation, AutoComplete, DataTable, Drag and Drop, Element, Uploader, YUI Compressor, and of course a lot of Yahoo, Dom, Event and Connection Manager.” (Original source.)
  
• YUI Compressor Ported for .Net: Users purekrome and Crenna at have launched a port of Julien Lecomte’s YUI Compressor for .Net environments.  The port is based on YUI Compressor 2.4.2 and shares all of the goals of any compressor/minifier: to make the code much smaller without ever changing the way the code functions.
  
• YUI Sighting — FoodPrints Mashup for Nutritional Information: Sargis Dallakyan has “used YUI AutoComplete, DataTable and Rich Text Editor for [his] website called Food Prints (http://food-prints.appspot.com) which runs on Google App Engine. Food Prints provides easy to use access to USDA National Nutrient Database. The back-end is powered by Google App Engine and Django. The front-end is using Yahoo! User Interface Library and Google AJAX Search.” (Original source.)
  
• YUI Sighting — PilotOutlook.com: Aircraft ridesharing site PilotOutlook.com has integrated Matt Sweeney’s YUI TabView and Jenny Han Donnelly’s YUI DataTable to energize its market-leading site for pilots. (Original source.)
  
• On-demand Loading for the YUI RTE in Drupal from @xhochy: Writes XhochY: “I love the YUI Rich Text Editor as a Drupal module as it is simply configurable and all my users are doing well with it but there has still been the problem [in] that the CSS and JavaScript files that it used have been loaded on any Drupal page, even if there was no textarea for which the editor could have been activated. Since this was now really annoying as my projects got bigger and bigger, I just started an effort to change this! Based on the YUI module 6.x-1.1-rc1 and YUI Rich Text Editor 6.x-2.33, I’ve made [a] patched version which only loads those files if they are needed.” (Original source.)

Tags: yui

News and notes from around the YUI world during the past few weeks:

• Ticketmaster Subsidiary Echo Using YUI Menus and DataTables: Geoff Alday from Ticketmaster subsidiary echo wrote in to tell us about a terrific implementation of YUI that his team has engineered as part of its echotools product.  “We use a large number of YUI components but these screenshots specifically show implementations of Menu and DataTable. Originally we chose YUI because we had been using another toolkit and found it cumbersome to use, heavy, and poorly documented. YUI seemed a lot faster, well documented, and properly tested. YUI also posted their browser testing practices, so we were comfortable it would cover the browsers we were supporting. Additionally, Yahoo! was and is using YUI themselves, which makes YUI more appealing.”  echo creates websites for bands and focuses on “opening a powerful channel for conversation between entertainment brands and their consumers.”  The YUI implementations are behind a login and are used to power the analytics provided to echo’s customers.
  
• Tyler Hall’s YUI App Theme Built with YUI Grids CSS: Writes Tyler: “Tonight I pushed a new project to GitHub called yui-app-theme. It’s a generic, skinnable layout designed for web applications — particularly admin areas — built using YUI Grids. In other words, it’s a starting point. Usually when doing freelance work for clients, unless you’re building on top of an existing CMS like WordPress or MiaCMS, you’ll have to create an admin area for the client to login and manage their site. Or maybe you’re building a bug tracker or some other web application. Whatever the situation, yui-app-theme provides a solid foundation to start your work.”
  
• YUI Sighting — WebGUI CMS: The free (GPL) WebGUI CMS employs a wide range of YUI components, including a nice implementation of sliders and color pickers that facilitate the theming in the admin interface.
  
• YUI Sighting — ISpidr.com, New Geo-aware Social Networking App: Spidr is a new geo-aware social networking app “that helps you connect with people who could be sitting next to you in a coffee shop or pub or go to the same school or work in the same building as you do. Spidr helps you strike conversations with people who are not in you contact list but share physical space with you.”  Spidr makes extensive use of YUI, including Buttons, Containers, DataTables, Tabs, and much more.
  
• IKural, Unicode-based Indic Word-processor Using YUI RTE: Dav Glass’s YUI Rich Text Editor is put to excellent use in iKural, a word processor for indic languages that “currently supports [the] Tamil language using Phonetic, Tamil99, New Typewriter and Old Typewriter keyboard layouts.”
  
• YUI Charts and DataTable on Symantec.com: Symantec has a beautiful implementation of both YUI Charts and YUI DataTable on their security response site, leveraging a variety of YUI utilities under the hood to power their visually rich and impactful display.
  
• Inside the Launchpad AJAX Sprint: A Week with Widgets and YUI 3: Launchpad is one of several groups that has begun using YUI 3.  The team recently got together for a YUI 3 widget programming intensive in Berlin, and they’ve blogged about the event on the Launchpad Blog. “Recently ten people from Launchpad and other parts of Canonical came together in Berlin to hack on Launchpad’s new YUI 3 JavaScript interface. The sprint was tremendously successful, producing four fully functioning YUI 3 Widgets, complete with test suites and live demo pages. This post offers a look inside the event, and some thoughts about what made it so successful.”
• YUI Sighting — Lunch.com Social Sharing Site: Lunch.com is a new social sharing site that recently launched in beta mode; the interface makes extensive use of YUI.  “Lunch is a social sharing network fueled by your curiosity. It’s a community where you create and discover genuinely useful information with people who share your interests. Lunch is based on the idea that you’ll have the most meaningful exchanges with people who get your sense of humor, taste in books, love of snowboarding or penchant for Pac-Man.  At Lunch, you can contribute facts and opinions about almost everything. Based on your contributions, Lunch connects you to a similarity network of people who share your opinions and ideas. Through them, you can discover a mystery novel you’ve never heard of, a great local animal hospital, or the best place to buy folding bikes. You get personalized content in the best way — through the right people.”  Head over to Lunch.com to grab a place on the waiting list for the beta.
  
• Jeffrey Cobb: “Using the YUI Loader and Yahoo’s CDN Rollup”: Jeff writes on his YUICoder blog about how to use Adam Moore’s YUI Loader to bring YUI into the page without ever needing to download YUI and host it on your own server.  Along the same lines, be sure to check out the Dependency Configurator — it has a YUI Loader tab that provides you the YUI Loader script for any combination of YUI components.  (Like Jeff’s script, this code assumes the presence of YUI Loader on the page.) (Original source.)
• Allan Jardine’s “Secret”, Built with YUI Animation: Allan Jardine has released Secret, a JS library with a very particular task: “Secret is a Javascript library which provides the functions required for scanning an HTML document for certain characters, locating those characters on the rendered page and then displaying them in a rather fun Harry Potter style (the former parts might be more interesting for developers!).”  Check it out on his blog…it’s quite fun.  Secret makes extensive use of Matt Sweeney’s YUI Animation Utility.
  
• Eyercise — Speed Reading App Built with YUI Sliders, Dialogs, and More: Eyercize is a new app whose goal ”is to help you become an accomplished speed reader.  By using Eyercize you will ease your workload, reduce eyestrain, improve your job skills, get better grades, [and] improve your material retention.” Check it out at eyercize.com.  Eyercize is built with a variety of YUI widgets, including prominent use of Sliders and Dialogs. (Original source.)
  
• Dave Mosher on JavaScript Dependency Management and YUI Loader in Django: Dave Mosher has written about the work he and his colleagues have done leveraging Adam Moore’s YUI Loader in their Django apps.  “One of the areas we identified as needing improvement was controlling when scripts get loaded in the page; it’s a challenging subject especially when utilizing Django templates which can extend and include bits of HTML that are both static and dynamic. We’re not finished the refactoring quite yet but I thought it would be valuable to blog about the lessons we’ve learned early on about how to manage JavaScript loading without having script tags all over the place.”  Check out the blog post for full details.
• Iain Lamb on JavaScript Lambda Patterns: Iain Lamb blogs about the usefulness of JavaScript module patterns using anonymous functions (citing a popular YUIBlog piece from a few years ago), including the particular lambda pattern that intrigues him most. Writes Iain: “This pattern fascinates me – not just as a javascript programmer, but as a computer scientist. At its core, this beauty is a simple anonymous function expression, capable of appearing within itself again and again (because it’s an expression containing expressions).  This concise lambda pattern pretty much describes every block of javascript I’ve written in recent memory – ranging from modest expressions embedded into somebody else’s code to all the way to entire programs. You’re basically looking at source code of every javascript file I’ve produced in the last several years.”  Check out his blog post for sample code.
• Grails UI 1.0 Released for YUI and Bubbling Library: The popular GrailsUI project has hit the important 1.0 release milestone.  GrailsUI brings broad YUI support to Grails and includes Caridy Patiño Mayea’s excellent Bubbling Library as well.  The documentation is fantastic, and support is provided for a wide range of YUI’s widgets, including DataTables, Rich Text Editors, and much more.  Congratulations to Matthew Taylor, whose blog post has much more detail on the release. (Original source.)
• YUICoder: Override Alert() with a YUI Dialog: Writes Jeffrey Cobb on YUICoder: “You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code [in this article] to the bottom of your page just before the end body tag then add the body style to the begining body tag called ‘yui-skin-sam’ and that’s it.” Jeffrey’s solution replaces the old-school alerts with YUI Dialogs.  Check out the blog post for full code and details.
  
• Matt Snider Brings MVC to YUI, Now on Google Code: Matt Snider (lead F2E of Mint.com) has brought his YUI MVC extensions library to Google Code to facilitate more collaboration and code sharing with his users.  Matt’s project “extends the Yahoo! User Interface Library with improved functionality and a Model View Controller interface for page interaction and AJAX communication.”
• Adding Up Column Data in YUI Datatable: Another useful tip from Jeffrey Cobb’s YUICoder blog — adding up column data using Jenny Donnelly’s YUI DataTable control. Check out the blog post for code samples and description.

As always, please let us know in the comments about anything that’s missing here.

Tags: yui,, grids,, tylerhall,, alday,, colorpickers,, theming,, socialnetworking,, sliders,, analytics,, cms

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.”
  

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.)

News and notes from the YUI community from the past few weeks…as always, we ask you to let us know in the comments about projects and articles that we missed.

• Dan Wellman, “A Look at the New YUI Carousel Control”: Dan Wellman, who literally wrote the book on YUI, has a new article out on DevShed treating Gopal Venkatesan’s YUI Carousel Control (inspired by the work of Bill Scott).  Writes Dan:  “The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.  One of the components recently added is the Carousel component, a control for automatically scrolling content in an attractive and intuitive interface. It’s still a beta release at present ,which indicates that the API is not finalized and that there are likely to be bugs that need addressing. We can still use the component, though, and although we should be wary as the existing API may change, the full release will probably bring more new functionality than changes in how it is implemented. In this tutorial we’ll be looking at a basic implementation of the control, the functionality we can use at this point in time, and the properties and methods exposed by the current API.” Check out the full article/tutorial on Carousel here.
• Jeethu Rao, “A Mochikit-style Dombuilder for YUI”: Writes Jeethu: “Before moving to YUI about a year ago, I was using Mochikit as my primary JS library. As advertised, Mochikit happens to be one of the most pythonic javascript libraries ever. One of the sweetest parts of Mochikit IMO has been Mochikit.DOM. This is something which I’ve always missed with YUI. innerHTML is fast, but icky and it feels a little inelegant. So, I ended up writing something like Mochikit.DOM for YUI while writing Tagz. Thought it might be useful to others as well. So, here’s the mercurial repo with the code.” Check out the full blog post here. (Original source.)
• Niceforms — Form Styling Enhancements Based on YUI: The folks at FreshCut have released v0.1 of Niceforms for YUI. According to the release, Niceforms is ”an easy to use and highly configurable YUI plugin to give most form controls a modern look that is consistent across all major browsers.”  Niceforms is licensed under a Creative Commons license and full documentation and a live demo are available.
  
• SlowGeek.com — YUI-based Nike Plus Mashup from Rasmus Lerdorf: PHP inventor Rasmus Lerdorf has a site called SlowGeek.com that taps into Nike Plus data to present a graphical and interactive look at your running history.  Check out Rasmus’s own stats to get a sense of the interface — and you’ll quickly learn that, far from being a “slow geek,” Rasmus is actually a speedy and dedicated mid-distance runner.  YUI components including DataTable, TabView and more are on display.  If you have a Nike Plus account, you can start using app yourself — just go to http://slowgeek.com/pr/[your username] for directions on how to get started.
  
• YUI Carousel on Public.resource.org Films Site: public.resource.org has a nice implementation of Gopal Venkatesan’s YUI Carousel on its National Technical Information Service Library of Commerce films site. Developer Greg Palmer wants to see a lot more YUI usage in government web development, as he argues in “Leveraging Yahoo’s UI Library to Speed Development” on his blog. (Original source.)
  
• Jobseeker Site Resumebucket Using YUI: Reader “P” wrote in to tell us about resumebucket, a slick resumes site for job seekers.  Resumebucket uses a broad swath of YUI components, including the Core + Loader platform, Connection Manager, and JSON. (Original source.)
  
• New YUI 3.x Support from the Grails YUI Project: mingfai has added support for the latest YUI 3 preview release in his Grails YUI plugin; support is also provided for YUI 2.x.
• YUI Sighting — Twitter for Busy People: Glenn wrote in to tell us about Twitter for Busy People.  The product aims to “give users a more dynamic and intuitive way to catch up on their friends’ twitter updates.  We use the Dom utility a lot for positioning the updates window and for mouse positioning; the Event utility for all mouse interaction; and the Pagination utility was great for users with many friends!  We also used the ‘Dependency Configurator‘ and the YUI Compressor to minimize this site’s footprint to an amazing 43k total payload!” (Original source.)
  
• YUI Sighting — GameFly: Dylan Oudyk wrote in to tell us about “the redesign of GameFly.  We’re making extensive use of menus, tabview, overlay, grids, reset, and calendar.  Also have drag/drop for our GameQ implementation; when I worked on the old site a couple years ago I used YUI version 0.10.3 with some browser workarounds, so it feels good to be all up to 2.7.0 now because I don’t have to do that anymore.” (Original source.)
  
• YUI TabView and More in Use at Mathsbank: Luke Robinson wrote in to tell us about YUI use at mathsbank, a UK math site for teachers and students.  TabView is the most prominent component used, driving navigation for many of the site’s categories. (Original source.)
  
• C.S. Lai, “Maintaining State with YUI Event”: C.S. Lai has written up some ruminations on Adam Moore’s YUI Event Utility.  Check out the blog post here.

The YUI team is pleased to announce the release of YUI 3.1.0.

Highlights of this release include the following:

• Component infrastructure — The Widget infrastructure for YUI 3 is now largely in place. Satyen Desai has been focused on this work over the past several months, and the approach he discussed at YUICONF 2009 is now fully realized as the Base, Attribute, Plugin and Widget modules in the component infrastructure group reach GA status. Satyen has provided a detailed developer guide for those interested in learning more about the component infrastructure.
• Internationalization utility — Satyen worked with Yahoo internationalization engineer Norbert Lindenberg on the new Internationalization utility for 3.1.0. This component introduces YUI 3’s approach to internationalization, allowing for the externalization of module language resource bundles that can be delivered separately from code, with support added to Adam Moore’s loader for specifying language preferences. We’ll continue to develop and build upon this approach as we introduce YUI 3 widgets with more complex UIs.
• TabView as a reference widget — Matt Sweeney’s TabView is updated and serves as a good reference implementation for YUI 3-based widgets, including the approach we’re taking on progressive enhancement.

  

• Loader improvements — Adam Moore has improved YUI 3’s loader to better support the YUI 3 Gallery. As of 3.1.0, you can now load any Gallery module that shipped prior to 3.1.0 without additional configuration simply by referencing the module in your use() statement.
• YUI 2 in 3 — Adam extended the power of use() even further with the YUI 2 in 3 project. With the release of 3.1.0, you can now include YUI 2 modules directly from your use() statement, bringing a fully sandboxed version of YUI 2 into your YUI 3 instance. This work supports developers who are making the transition to YUI 3 but are still dependent on some components that are unique to YUI 2, including the popular YUI 2 DataTable.
• New Sortable utility — Sortable is a new utility from Dav Glass that leverages Drag and Drop to implement sortable lists. Support is provided for single lists or multiple lists in which items can be dragged from one list to the other.

  

• Visual treatments for Slider — Visual designer Jeff Conniff worked with YUI engineer Luke Smith on the Slider component for 3.1.0, the result of which was a series of alternative visual treatments for Slider. Luke has also updated Slider to take advantage of improvements in the general Widget infrastructure.

  

• New API for creating synthetic DOM events — Luke added the Y.Event.define() method to make it easy for developers to define new DOM events in the YUI 3 ecosystem. Use this to fill in gaps in the native DOM event list or otherwise label common user interaction moments, then subscribe and unsubscribe as you would with any other event.

As always, YUI program manager Georgiann Puckett has provided a comprehensive changelog for the YUI 3.1.0 release — refer to that document for detailed information about what has changed throughout the YUI 3 family.

What’s Next?

Between the release of YUI 3.0.0 and 3.1.0, more than 50 free, open-source modules have been added to the YUI 3 Gallery. Today, all of that content is accessible to you from any YUI 3.1.0 instance. As we get started on our work for YUI 3.2.0, the library itself will be anything but static — currently, YUI 3 is growing more rapidly from community contributions than from the core team’s work, and those contributions are accessible at an unprecedented scale.

In the coming weeks, we’ll update the YUI 3 roadmap and calendar with early objectives and timelines from our 3.2.0 planning. 3.2.0 will be a widget-focused release as the majority of the core team turns its attention to the high-value UI building blocks that are familiar from the YUI 2 world.

In the meantime, we look forward to your feedback on YUI 3.1.0. Join us in the YUILibrary.com forums and let us know via the bug tracker if you discover issues in the release.