When you look at the YUI library website, you see a bewildering array of components, widgets, modules, and other features that can be pretty overwhelming. The YUI team has always had a challenge to continue to evolve YUI without making it seem bloated or overly complicated. Given the audience of a pretty javascript and web savvy developer, I believe they have done a good job of this overall – while there aught to be additional “views” for novice and expert YUI users.

Having said all that, you might be suprised to discover that not every unique and extremely useful feature of YUI is presented on the main site. There are several “utility functions” and components that exist to support higher level widgets, but are also very useful in and of themselves. This blog post attempts to talk about a few of these, but my primary goal here is to get you to go dig into the codebase yourself and discover other gems that not even I know about. YUI to me is like a book that gains more chapters every time I read it. Every time I feel like I have some degree of understanding, another aspect is revealed that highlights something new and cool I didn’t know before.

Gem 1: Substitute
The first gem I’d like to show you I discovered looking at the code for this Twitter widget using YUI from codeinfront. It’s called “substitute”

This utility is very similar to a macro replace or “mail merge” kind of thing. You pass in a string that contains special regions that correspond to parts of the string you want to be replaced by data you send it later on. For example:

“The quick {color} fox jumped over the {adj} cat.”

If you used this utility and passed in an object like:

{ color: “brown”, adj: “slow”}

You would get back:

“The quick brown fox jumped over the slow cat.”

While you may find this somewhat interesting, it really shines when you want to create little HTML templates that you flow in data from a datasource, say a json object. You could create a template for some repeating element of your site, flow in your data, and append it to the page. If you need to change your display, you just need to change the template instead of having to recode your entire HTML component.

Here’s a live example:

Gem 2: Querystring
The second hidden gem I have stumbled across is one that solves a pretty common problem. Suppose you are dealing with some rest-based web service and you want to construct a URL that properly escapes your values and sets up the name-value pairs properly. Normally this is a fairly tedious process where you have to get your values, properly escape the characters, append them via concatination, and be sure you dont end up with trailing values or extra ampersands. This component, called “querystring” does all this for you. All you have to do is build up a JSON object with name-value pairs that represent the arguments you want to pass as GET variables.

For instance passing in to Y.QueryString.stringify:

{color: “brown”, adj: “slow”, literary: true}

would return:

color=brown&adj=slow&literary=1

Note: notice how the “literary:true” was converted to “&literary=1″ which is a common convention. Here’s a working example:

Gem 3: You find it!

Put on your mining hat, grab a pick, and chip away at YUI. Go over here and poke around in the code. Find something cool and interesting? Let me know! Not only will I feature it in a blog post, I’ll make sure you get credit for the discovery! So, get out there and find a YUI Gem.