YUI
Blog

Blog: Category ‘In the Wild’

In the Wild for September 14, 2010

With YUI 3.2.0 hot off the presses and Anthony Pipkin on fire with new submissions in the burgeoning YUI Gallery, it’s been an active period in the YUI community. We have our eye on the upcoming YUI Conf 2010 (we hope you’ll join us), too. In the meantime, here are a few other news items that have caught our eye recently:

Duck Duck Go — Search Powered by BOSS and YUI: Duck Duck Go is an alternative search interface powered by a number of interesting APIs, including Yahoo’s Search BOSS and YUI 2.8. I particularly like it’s approach in disambiguating acronyms. #
YUI 2 and @caridy’s Bubbling Library Helping to Power FordVehicles.com: YUI 2 utilities (including Drag and Drop) and widgets (including AutoComplete) accompany Caridy Patiño Mayea’s YUI-based Bubbling Library on the FordVehicles.com site. #
IG Markets Forex Trading Platform Using YUI 2: IG Markets, a major online forex and currency trading platform, has incorporated a variety of YUI 2 components in its online tools. #
Beautiful New “Dana” Theme for YUI Doc from @carlo: Carlo Zottman has released his new Dana theme for YUI Doc output. The new theme looks fantastic, and it’s available on GitHub. (Original source.) #
Flint Studio on YUI 2 CSS Grids: Writes Ross at Flint Studio in his survey of great web development tools: “I started using Yahoo’s YUI Grids CSS framework nearly a year ago, and I’ve continued to do so as it has been a reliable performer across all browsers and has saved me much time laying out my Websites. It is slightly less flexible than other CSS frameworks like 960 and Blueprint, but because of this, it is also more enjoyable to use as there is less to learn. I find the markup to be more semantic with YUI than the other CSS frameworks as well, so thats a large plus in my book.” #
Ajaxian’s @reybango on SimpleYUI, Coming in 3.2.0: Rey introduces SimpleYUI this way: “The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI library.” SimpleYUI is a rollup of common, core modules in the library, with the added twist that it self-instantiates — making it a little simpler and more accessible for those new to YUI. You can read more about SimpleYUI here. #
“SimpleYUI Makes YUI Easy to Use,” by @codeinfront: Australian developer @codeinfront had this to say about the SimpleYUI implementation in YU1 3.2.0: “YUI 3 is a powerful CSS and JavaScript framework including low-level DOM utilities and high-level user-interface widgets designed to make front end application development simpler and more robust. Now with the addition of SimpleYUI rapid, lightweight development is made even simpler. Best of all, those used to jQuery-style syntax can start using YUI 3 today while learning the intricacies of developing larger applications.” #
MobileCrunch Covers the YUI 3.2.0 Release: Greg Kumparak, editor of MobileCrunch, had this to say about the recent YUI 3.2.0 release: “Gather up a group of people who make their living through web design, and they’ll probably all agree on at least two things: A) touchscreens aren’t going anywhere, and B) designing web stuff for touchscreens sort of sucks. Native apps have, in a sense, spoiled users; with things like drag-and-drop and basic touch gesture recognition almost laughably simple to implement in native apps, web app developers are left to hack in such features themselves or risk having their app seem dated from the get-go. Today Yahoo! is looking to make things a bit less painful with the latest release of their open-source User Interface library, YUI.” You can read the full article here. #
Sweet Justice, a Text Justification Plugin for YUI 3 from Carlos Bueno: Writes Carlos: “Sweet Justice is a Javascript library you can drop onto any web page to create beautiful justified text. Even supercalifragilisticexpealadocious. Sweet Justice lovingly inserts the obscure yet wonderful soft hyphen into the text of any element marked with the sweet-justice class, and turns on CSS text justification. It requires either jQuery or YUI3 to function.” (Original source.) #
YUI 3 CSS3 Selector Overview and Demo from @codeinfront: From @codeinfront: “CSS3 pseudo classes and to a lesser extent CSS3 attribute selectors enjoy varied cross browser support. If you’re keen to get your hands dirty now, one of the many JavaScript frameworks can help. In particular, YUI 3 enables support through the “selector-css3″ module however documentation at this time is limited. I’ve had a brief and by no means comprehensive play with some of them. Perhaps the demo my be of use to others.” #
YUI 3 CSS/JS (+YQL) Driving NCSoft’s ArenaNet (via @tivac): NCSoft’s ArenaNet portal (courtesy of longtime YUI community member @tivac) uses YUI 3.1.0 JS and YUI 3 CSS. YQL is used to access social media stats for five social apis in a single federated, cacheable request. #
Alex Hall’s YUI 2-based Tweetywall: Writes Alex: “Have you ever seen those sites that have Twitter posts sprinkled all over the place? Would you like to have access to this same functionality without having to do anything? Here at DeVSeO we use Twitter for a number of things and in a number of places. I decided to help you guys out by turning one of ours scripts that we use here into a fully customisable release so that you, too, can have Twitter on your own site with absolutely no coding ability whatsoever. It couldn’t be easier.” Alex has a demo page here. #
Alex Hall’s Star Ratings Widget for YUI 2.x: This isn’t brand-new, but I missed it when it was originally posted, and you can never have too many good options for implementing the Star Ratings design pattern. Alex Hall took an existing one and built on it: “I really needed a nice little star rating system with YUI for this blog…and after a single search in Google I found Ville Saavuori’s Star Rating Script for YUI, which is perfect for the job I needed… However, for a new project I am undertaking I realised that his implementation was not going to work for multiple rating systems on the same page because it is based on ID’s, and as we all know, you can only have one ID reference in the DOM on one page. So I started to rework the script to allow for more rating systems on a single page using classes instead of ID’s.” Alex’s example page is here. #
Alex Hall’s YUILight Spotlighting Widget for YUI 2: Writes Alex: “YUILight is a customisable YUI Script that will highlight an element on your page simply by applying a class of ‘yuilight’ to that element. When that element is clicked and focused on, everything else on the page will be covered by a mask and that single element will stand out from the rest. It is a very simple script to implement only requiring two javascript files and no CSS! The options for customising the script can be found at the top of the javascript file (which is fully commented for you). At the moment you can change the generic background colour (when no background colour has been specified for the element). This option is so that your element doesn’t disappear with the text. You can also configure the opacity of the mask element and the animation speed that it shows and hides. I will be adding more customisable fields later on but if you have any requests please feel free to leave them in the comments section at the bottom of this post.” He has demo page in addition to the introductory blog post. #
YUI 3 and Performance: Blogger Yiota shares her thoughts about YUI 3 and performance on her yiotabytes blog, touching on YUI 3′s intrinsically non-blocking and combo-handling loader infrastructure. #
Book Review: Brad Harris on Satyam’s “YUI 2.8: Learning the Library”: Brad gives a thumbs up to the new book: “If you read through this book in it’s entirety, you’ll come to understand the main reason I love YUI, that it’s not just a collection of widgets and utilities. This book explains the full feature set of the YUI library, and you’ll realize that it’s the perfect foundation to build on top of. The authors do a really great job of showing in depth examples that teach you how the components work. I particularly liked reading the chapter on DataSource and DataTable.” #
John Lindal’s Treeble Implementation Updated for YUI 3.2.0: John’s popular Treeble gallery module has been updated to support the recent YUI 3.2.0 release. You can check it out (where else) on GitHub at http://jafl.github.com/yui3-gallery/treeble/. #
Mapping Events Mashup Uses YUI 2 Utilities + YQL: The Mapping Events mashup is a geo/events exploration that combines a variety of APIs; prominent among these are the YUI 2 utilities and YQL. (Original source.) #
Animated Image Captions with YUI from @ahallicks: One more from Alex Hall’s archives — animated image captions. From Alex: “I saw a very lovely caption effect for images at MotionLab but realised it was written for jQuery. If you have read of my other blogs here on DeVSeO you may notice that I prefer the YUI javascript library by Yahoo for all of my javascript. So, I decided to create this effect using YUI instead of jQuery.” You can read all about it on his DevSEO blog. (Original source.) #

By Eric MiragliaSeptember 13th, 2010

In the Wild for August 13, 2010

Here are a few of the news stories that have caught our eye in the YUI community over the past few weeks. As always, let me know @yuilibrary or in the comments below if I missed something.

Detailed YUI 2.8.0 Rich Text Editor Article from Satyam and Packt: Satyam (Daniel Barreiro), as part of his new Packt volume YUI 2.8: Learning the Library, has published an extensive writeup on the YUI 2 Rich Text Editor on the Packt website. You can check it out here.
Excellent Coverage of the YUI 3.2.0 Preview Release on Sitepoint by @rssaddict: Louis Simoneau wrote up a nice review of the YUI 3.2.0 Preview Release 1 that we issued on July 26. Writes Louis: “A lot of [the new] features seem to have a common thread: HTML5 and mobile platforms. I’m sure that’s no accident, and it’s great to see more and better developer tools entering this space. As I said, there’s a lot more than just these features, so if you’re a YUI fan—or if you’ve yet to check it out—head on over and grab yourself a copy of the preview to play around with.”
Dion Almaer on YUI 3.2.0′s Capability-based Loading: Dion Almaer has a nice article up on his personal blog about capability-based loading, a feature YUI engineer Adam Moore has added to YUI 3 and which is included in the first YUI 3.2.0 preview release. Dion reviews the state of capability-based loading in his article, starting with Google’s GWT and progressing to similar support in other JavaScript libraries. “And this brings us to YUI,” says Dion. “I was really excited to see some of the features in the YUI 3.2.0 preview release. Great stuff for touch/gesture support, but what stood out for me was ‘YUI’s intrinsic Loader now supports capability-based loading’. A-ha!” You can read Dion’s full report here.
Pat Cavit Tutorial on Writing YUI 3 Plugins: Pat Cavit has a new tutorial up that details the creation of YUI 3 Plugins: “At their core YUI3 Plugins are a way to add new behavior to JS objects. It’s really just that simple. Going into it a little deeper you can explain the idea behind them as providing a framework-backed way to add new functionality & behaviors to host objects without the host needing to know anything about the plugins. Taking advantage of this means that you can add lots of functionality to your objects without requiring a lot of code. It’s another example of YUI3′s great support for modularity of code. Want your widget to accept flaboozulms? Write a plugin! Want your widget to support flaboozulms & flibberdybops? Write a plugin for flibberdybops & then use both the flaboozulms & flibberdybops plugins together. It’s a really powerful idea.” Check out his blog for the full article.
Sample Chapter on YUI 2.8.0 Menu from Satyam’s New Book: Satyam has a new book out on YUI 2.8, and Packt has released a sample chapter from the new volume. The sample chapter covers YUI Menu and can be downloaded from the book’s page on the Packt website.
“Easy Sliding Menus” with YUI 3 by @andrew_cooke: Blogger Andrew Cooke writes the following in introducing his simple sliding-menu implementation based on YUI 3.1.1: “YUI 3 is amazing. It looks terrifyingly complex, but once you get into it,
you can do complex things trivially. I use jQuery at work, and in comparison, YUI 3 feels like it was written by software engineers rather than people hacking web pages.” Check out his implementation of menuing here.
Coverage of YUI 3.2.0 Preview Release 1 from @codepo8 on Ajaxian: Yahoo! Developer Network evangelist Christian Heilmann has a nice article up on Ajaxian talking about the July 26 YUI 3.2.0 Preview Release 1, our first public preview of the next YUI 3 release.
YUI Test with the Jack Mocking Framework: Pawel Pabich has a nice writeup on his blog showing how he used YUI Test with the Jack JavaScript mocking framework to unit test some form-input validation and submission code.
Pivotal Tracker, an Agile Tracking System, Using YUI 2: This isn’t breaking news — it’s been around for a long time — but the Agile project management system Pivotal Tracker is heavily YUI 2-based, using the utilities suite, Container, and more.
Ruby Gem for YUI Compressor from @mjijackson: Ruby hacker Michael Jackson has posted his Ruby gem for YUI Compressor on GitHub. From Michael’s project notes: “YUICompressor is a Ruby module that may be used to create compressed versions of JavaScript and CSS code quickly and easily using the Yahoo User Interface (YUI) library compressor. The module is essentially a wrapper around the YUI Compressor (a Java library) that supports two different modes of operation: shell and native. In shell mode the YUI Compressor library executes in a separate process. Code is piped into and out of this process using the system shell. This approach yields good performance and is the default for MRI and other Ruby versions that are not able to execute Java code. In native mode the compressor is invoked in the same process as Ruby. This is only possible when using YUICompressor on JRuby. With this approach, compression speeds dramatically improve because the system does not incur the overhead of invoking a separate Java process for each compression.” (Original source.)
YUI is About.com’s Web Design “software Pick of the Week”: Jennifer Kyrnin writes for About.com: “Sometimes the easiest way to learn a web design technique is to borrow from someone else. Now, a lot of designers will get angry if you borrow their code, but Yahoo! has put together an entire library of scripts and CSS that you can use to create interactive websites. There are two versions of the YUI framework. Version 2 has been available since 2006 and is very robust and proven. If you’re working on sites that need interactivity, but also need to be very reliable, then this is the version you should use. Version 3 is what they call their “next generation” library. It hasn’t been as widely tested, and includes things that might be more cutting edge. But if you’re building sites that need more advanced (often beta) interactivity options, this is the version for you.”
Thanks, Alessandro: We enjoyed this tweet from @avernet…
Notes from @joedag32 on Building a Sortable List with YUI 3 Sortable: Writes Joe: “I’ve been working on building an application that will need an easy to use sortable list, that will fire off an event upon the list order changing. As simple as this sounds, it would require a lot of coding and cross browser testing to pull this one off with just javascript alone. YUI 3 allowed me to accomplish the above in just a few minutes. I’m not even going to try to guess just how much time it’d of taken me to do on my own. I made use of the Sortable Utility to make and unordered list sortable in just a few lines of code.” Check out his solution here.
AjaxDump’s AutoComplete Widget List: AjaxDump includes YUI among its 10 great AutoComplete tools. Beyond the YUI 2-based AutoComplete documented on the site, be sure to check out the YUI 3 Gallery autocomplete component from Nate Cavanaugh and Eduardo Lundgren — as well as their “text-box list” widget, which implements a lozenge-style autocomplete interaction.

By Eric MiragliaAugust 13th, 2010

YUI 3 Goes to Burning Man with Illuminatrix

Ben Delarre emailed to let us know about his YUI 3-based implementation of an LED animation builder for a Burning Man 2010 installation:

I’ve managed to put this site, the animation editor, and a HTML5 Canvas based colour picker (which i’ll be contributing to the gallery just as soon as I can…), in just a few days using YUI 3 and PHP. (Its a little slipshod in places, and there’s much more to be done to make it better, but time is running out).

Illuminatrix is a project we’ve put together over the last few months for this years Burning Man festival… Its a 2D array of 16×16 ping pong balls, each of which contains an RGB LED that can be coloured any colour of the rainbow at any time. It will be displayed in the entrance to the More Carrot theme camp and to give it a bit of a twist we’ve decided to make it possible for everyone to contribute to the animations we’ll display on it.

Everyone, no matter what their ability, can create animations quickly and easily. You can either draw each frame individually by hand, or write JavaScript to generate the frames if you are of the technical persuasion (The “Code Help!” link gives a list of some useful functions as well as some example code).

Over the next few days we’ll be putting up pictures of the build, we’re already a good way into the hardware, but the deadline is fast approaching.

…Please pass [the link] around, we want to collect as many animations as possible before August 26th when we must head off for the Burn.

Hopefully, at least one YUI team member will be there to say hello to Ben at the event, and we’re all looking forward to seeing that HTML5 Canvas-based Color Picker in the YUI 3 Gallery.

By Eric MiragliaAugust 2nd, 2010

In the Wild for June 25, 2010

As always, let us know in the comments or @yuilibrary if we missed something important.

YUI 3-based Alloy UI Formally Announced at Liferay Conference: From the press release: ‘As part of this effort, Liferay also announced the immediate availability of Liferay Alloy UI. Developed in collaboration with Yahoo’s YUI project, Alloy UI provides a set of rich user interface components for quickly creating user-friendly portlets, widgets, and web applications. Alloy UI deals with the complexities of CSS, HTML, and Javascript, freeing developers to focus on business requirements and functionality. Alloy UI also helps solve some common cross-browser compatibility issues that typically consume project resources. The new library does not require a portal and can be used to develop components for any web application. Liferay Portal will standardize its front-end framework around Alloy UI, expanding the simplicity and capabilities of modern portal-based enterprise solutions. ‘Alloy UI represents a new capability for web developers to simplify the development of rich UIs,’ said Brian Chan, Liferay Portal’s creator and Chief Software Architect. ‘We are happy to have worked on this with the Yahoo team and feel it will be a great asset to help developers with their solutions.’‘ All Alloy UI components are now freely available to the YUI community in the YUI 3 Gallery.
AutoFusion’s CarPrices.com Launches Using YUI 3.1.1: YUI 3 Gallery contributor Josh Lizarraga has been working with Autofusion Inc. on the new CarPrices.com project, built using a host of YUI 3.1.1 utilities and widgets. Josh will have more on this project in a future YUIBlog post.
Download Squad’s Erez Zukerman Advises JS Devs to Watch Crockford on YUI Theater: Writes Erez: “Douglas Crockford is a genius. Seriously – the guy is brilliant. He’s currently serving as Yahoo!’s chief JavaScript architect, he invented JSON (a widely used data interchange format), he’s part of the ECMAScript committee (the guys setting the JavaScript standard) and has a very broad understanding of the general history of programming languages and computer science. Recently, Crockford gave five talks about JavaScript as part of Yahoo!’s YUI Theater. These are all available for free, and they’re over five hours in length (more like six to seven hours in total, I think). What’s so cool about these talks is that Crockford really gives you a bird’s-eye view of the subject; the first hour is just history, and it’s really fascinating. It’s all over the place, starting with the Jackquad loom, through why we have both a Delete and a Backspace key on our keyboards, all the way to modern programming languages and JavaScript.” For more of Erez’s favorite JavaScript resources, check out his post; or head over to the Crockford on JavaScript page for Douglas’s latest videos (with many more filling the second column of YUI Theater).
Congrats to Matt Snider & Friends at YUI 2-based Mint.com, Winners of a 2010 Webby: Congratulations to Matt Snider and the other outstanding frontend engineers at Mint.com for their well-deserved 2010 Webby award in the Financial Services category. Mint has been YUI 2-based since the beginning, and Matt continues to be a big contributor to the YUI project. You can see Matt’s five-word acceptance speech over on YouTube.
Ajaxian’s Dion Almaer Reviews Caridy Patiño Mayea’s Preload Gallery Module for YUI 3: Dion has a nice post up on Ajaxian reviewing Caridy Patiño Mayea’s Preload module for prefetching and caching assets, a YUI 3 Gallery entry that he wrote about recently on YUIBlog.
Using YUI Grids with Movable Type (by @foxxtrot): YUI contributor Jeff Craig wrote about his experience converting a Movable Type blog to YUI 2 Grids: “So, as anyone who’s ever read my blog before, you’ll see that over the weekend I upgraded my blog template to use YUI Grids and YUI3 for the JavaScript. By switching away from the MT templates (or, the templates that were standard when I installed the first versions of MTOS 4), I was able to reduce the HTML pageweight by damn near half. The old templates were really div-heavy, and had a ton of extra markup. Mostly, the decision was driven by a desire to redo the visual feel of my blog, and I felt that I may as well rewrite under YUI Grids while I do it.”
Nate Schutta Compares YUI and Dojo for IBM DevelperWorks: Nate Schutta writing for IBM developerWorks compares YUI 2.x and Dojo in a new post. While we’re focused more on the YUI 3.x codeline these days, Nate’s article has some useful guidelines for those thinking about JavaScript libraries and making a decision for their business or project. First — why YUI or Dojo?

With so many excellent choices at your disposal, why would you consider YUI or Dojo? In a word: completeness. Unlike other solutions that involve additional libraries or plug-ins, Dojo and YUI have everything (and more) that today’s front-end engineer could want. While that is both a blessing and a curse, if you’re in the market for a one-stop shop for your Ajax needs, these are two powerful contenders. In addition to a wealth of JavaScript helpers and utilities, both offer top-notch widgets and controls—far beyond the limited palette of the standard browser.

Nate’s advice on general library selection criteria is useful:
- What do you want out of it? Are you looking for a complete replacement of nearly all UI elements on your page, or are you just looking for something to take a bit of the pain out of JavaScript programming?
- How easy is the code to read? Despite massive improvements in documentation over the past few years, odds are you will have to dig into the code at some point. Before committing to a library, spend some time knee-deep in the source. Is it easy to understand, or does even the original author have trouble with it?
- How good is the documentation? Clean and readable code can make up for less-than-stellar documents, but nothing helps you get started quite like tutorials and examples. Poke around the wiki or the website, and see what they have to offer. Are the examples clear and easy to follow? Does a quick Google search bring you to the proper part of their material?
- What’s the community like that surrounds the library? Check out the mailing lists. Is there a lot of traffic? Are new people treated with respect or derision? Has the code been updated recently, or was the last release several years ago?
- Can you get help? Although this is related to the previous bits about community, it’s always valuable to look around the development community and see who’s using what. Check out the job boards to get a sense of which libraries are showing up frequently on resumes.

By Eric MiragliaJune 25th, 2010

We may be in the midst of the NBA finals, but In the Wild leads off this week with an item that gets us thinking about August. And football, in turn, gets us thinking about marriage, and in particular about the first known use of YUI in a marriage proposal. Let us know in the comments or on Twitter if we missed anything important.

YUI 3.1.1 on NFL.com: NFL.com’s fantasy portal employs YUI 3.1.1 Overlay, Anim, History, and more.
Free CMS Onpub Built with YUI 2: “Onpub is a PHP/MySQL web content management system. Onpub tightly bundles [the] Yahoo! User Interface Library [YUI 2] and CKEditor to enable the creation of standards-compliant, cross-browser, dynamic HTML websites. Onpub is designed to provide a base of well integrated components that have a proven track-record for helping web developers build websites that are easy to update, reliable and good looking.” (Original source.)
The Big Question (with YUI CSS Reset): Paul Irish asked on Twitter if this was the first marriage proposal aided by YUI? I’m not sure, but on some level having a reset of all quirky, inherited, upstream style rules seems like a good metaphor for what you do when you tie the knot. Congrats to the couple; I’m assuming that Carrie said yes! (Original source.)
Juego De Snake Built with YUI 3 by @jldorta: Caridy pointed out this nice snake game built on YUI 3. Note the Twitter status rotator at the top of the page, also built with custom YUI controls (on the YUI 2 codeline). (Original source.)
Matt Snider’s Mac-style Radio Button Preferences As a YUI 3 Module: Writes Matt: “One of my favorite UI features of the Mac OS, both OSX and the iPhone, is the way it handles radio inputs. Instead of having small, hard to click little round circle (like the web), there are large buttons that are obviously grouped by use of a connecting bar. The best place to see this is in the system preferences on OSX. Today’s article, introduces a widget that will do the same, by converting existing radio buttons into a Mac Preference Radio.”
New Landscapes and Interiors Site Built by @joedag32 with YUI 2 JS and CSS Tools: Writes developer joedag32: “We…relied on the Yahoo! YUI Library to build the site as well. The site makes use of the following YUI components: CSS Reset, CSS Fonts, CSS Grids, Yahoo Global Object, DOM Collection, [and] Event Utility. YUI really helped us to work faster and knowing that their library is used and tested by Yahoo! for A-Grade Browser support is a real time saver.” (Original source.)
Bryon Wyly on Secure (YUI 2-based) Pie Charts for SharePoint: Bryon Wyly writes on endusersharepoint.com: ‘I have done several blogs on how to use the google apis to create dynamic pie charts of lists in SharePoint based on code written by Claudio Cabaleyro and published at endusersharepoint.com. Perhaps the biggest request I have heard is, “How can I use these charts on my secure intranet?” Since Google Apps is an image that is shipped back to you after sending the required data and since SSL is not an option, Google Apps are useless for lists that use secure and sensitive data… A recent comment on my blog suggested I look at…YUI as a possible solution. After a few hours work, I was able to marry a YUI pie chart with the JQuerry SharePoint List parser and create a Pie Chart generated by your SharePoint List, that does NOT send you data outside the network.’ Check out his post for full details.
Integrating YUI with Wicket: Mo Hammer has written up a tutorial on using the YUI Rich Text Editor with Wicket: “I was searching for a good rich-text editor for a Wicket project for some time, and eventually decided to use the YUI editor. It looks fairly nice, and can be configured quite well. Here, I’ll demonstrate how to use it with an HTML code editing button, as described in this example.”
Selenium and YUI Buttons (by @adamgoucher): Adam Goucher has written a tutorial on how to work with YUI 2 Buttons in the context of Selenium tests.
Nagare IDE Using YUI 2 (via @jlcarre): From the Nagare wiki: “Nagare IDE is a pure Web Integrated Development Environment dedicated to the
Nagare Web framework. Using YUI, the Bespin editor, ajax and comet communications, it offers the browsing of your projects, the edition of the sources, the debugging of the raised exceptions and the consultation in real-time of the applications logs.” Nagare is “an Open-Source Python framework dedicated to web applications development. Its set of advanced features as continuation, direct callbacks registration, programmatic HTML generation, combined with its strong components model allow [you] to quickly and easily build highly complex and reusable applications.” (Original source.)
Free YUI 2.x API Documentation Dictionary for Mac OS X 10.5 Users: (Note: I haven’t confirmed whether this works on more recent versions of Mac OS X.) From the product page: “In addition to using Dictionary.app it is also possible to find a definition through the ‘Look up in Dictionary’ context menu shortcut (works in Safari, Mail.app and any other application that supports it) or even from a Dashboard widget for Dictionary.”

By Eric MiragliaJune 4th, 2010

Implementation Focus: Phanfare Media Organizer

Cory Mintz from Phanfare wrote in last week to tell us about their recent product launch, which is heavily based on YUI 2.8.0.

We just released our new web organizer yesterday… It is a full photo and video organizer built as a web application, using just about every YUI 2 component. We think it really blurs the line between desktop and web software.

Some notable features are:

Using the Uploader, we let people organize and edit their photos as they upload.

With the help of Drag and Drop and Menu, the thumbnail grid has all of the behaviors of an OS’s file browser. You can drag select, drag and drop reorder, multi-select using ctrl and shift, arrow between thumbnails, etc.

The dynamic loading of the TreeView, let us lazy load user accounts with 100s of albums since they are hierarchical ( year -> album -> section ). This allows the page for an extremely large account to load just as fast as a small account.

I love the clean professionalism of the site and the extraordinary attention to detail in the UI. Feel free to tour the site — trial accounts are free and come populated with sample albums to give you a feel for what the site has to offer. Congratulations to Cory and the team for such a fantastic launch.

By Eric MiragliaMay 19th, 2010

In the Wild for May 12, 2010

Recent news and notes from the YUI community follow — let us know @yuilibrary if we missed an article or implementation.

Mich Cook’s YUI/YQL-based Module for Searching a Set of Docs:
Yahoo! engineer Mich Cook developed a piece of YUI- and YQL-based code for the Yahoo! Developer Network website that he’s shared on their blog. Writes Mich: “This block of code creates the YDN Rack module that supports searching within a set of docs. Previously, the only search functionality would scour the entire site for the terms entered. This module aims to provide contextual search within documentation so a user can more easily find something related to the docs currently being presented. We use a bunch of y! technology to do the heavy lifting and that’s awesome that we just have to manufacture the glue.”
Geocoding/Wikipedia/YQL Tutorial from @codepo8 with YUI3 & Grids CSS: Christian Heilmann’s tutorial on the Yahoo! Developer Network blog ties together Wikipedia, YQL, and YUI 3.
Noah Masterson (@noahvail) on the Virtues of YUI: Noah’s note about YUI: “The YUI library is an extensive collection of JavaScript and CSS tools. Basically, YUI provides everything a front-end web developer/designer needs, short of HTML and content. Because Yahoo! uses YUI for its own applications, the code has already been tested at one of the most visited sites on the web, it has to work in all major browsers, and it’s likely to be supported and updated for a long time to come.There’s no other library that provides a combined JavaScript and CSS solution of YUI’s caliber, but even separately, I’d probably use its tools in my web projects. YUI’s CSS framework is the best I’ve tried (Blueprint is pretty nice, too). As for JavaScript libraries, picking one is often a matter of preference. For example, plenty of people love jQuery, which has a great community that creates plugins to extend the library. I prefer YUI, because it has so much included functionality and it mixes in seamlessly with the other JavaScript I write. Finally, the genius of YUI isn’t just the library itself. Yahoo! has stocked the developers’ area of their site with excellent videos, examples, and documentation, making it easy to get started with the library — and providing a path to becoming an expert.” Thanks for the kind words, Noah.
YUI 2 and 3 on StockTickr: StockTickr is a comprehensive investment tracking site built using both YUI 2 and YUI 3 elements. Prominent touches include the navigation menus and DataTables. (Original source.)
YUI 2 on Famzoo.com, a Site That Helps Parents Teach Kids About Finance: Bill Dwight wrote in to tell us about his YUI 2-powered project Famzoo, which “is a ‘Virtual Family Bank’ that parents set up to teach their children (ages 5-18) about personal finance. The parents own the bank, hold the real money, and set the ground rules. The children learn by doing, not by lecture.” Bill has a video introduction to the site as well as an online slide deck. (Original source.)
Moodle Updated to YUI 3.1.0, with Easy Support for 2.8.0: Users of the fantastic open-source education platform Moodle now have built-in access to YUI 3.1.0. The developers have retained backward-looking support for YUI 2.8.0 as well. Now, using YUI from within Moodle is this easy:
```
M.mod_foobar.init = function(Y) {
    Y.one('#mycustomholder').set('innerHTML', 'Hello world');
}
```
“Cross-Browser Client-Side Storage for the Web” (re: YUI 2 Storage): Addy Osmani wrote up his thoughts on YUI 2 SwfStore, an underlying component that is used by the more comprehensive YUI 2 Storage Utility. Writes Addy: “Hi guys. Today I’m going to show you how to do persistent Client-side storage that’ll work in any Web Browser without needing to use Cookies, Browser-Specific hacks or HTML5 – in other words, we’re going to store as much custom information as a site needs on a user’s system without needing to worry about compatibility issues. The reason we’re interested in doing this is because it has a huge potential to free up database resources if we don’t need to be saving information there – instead it can be readily loaded from our users computer through client-side storage. Even if you need to save data, you can always store it on your user’s system and log it to the server it at a later date in the week.”
Matt Parker’s (@lamplightdb) YUI 2-based Diary Widget: Matt Parker of Lamplight Database Systems in the UK, who has authored some excellent Gallery components, posted a link to his work-in-progress Diary Widget for YUI 2. Diary provides a scheduling interface with weekly views, filtering, drag and drop, and resize support. Feedback is welcome.
Objektorientiertes JavaScript Mit YUI 3: Mathias Schäfer of molily.de wrote an extensive tutorial on how to do Object inheritance using YUI 3. The German-language article shows the different ways you can use OOP in YUI 3 and even explains what’s going on behind the scenes. (Via Dirk Ginader.)