Blog: Category ‘In the Wild’

In the Wild for November 19, 2010

The YUI team, and about 250 of our closest friends, spent the week of Nov. 8 focused on YUIConf 2010, organized by YUI engineer Jenny Donnelly (of DataTable fame). Jenny wrote a nice summary of the event, echoing what everyone here felt: It was the best YUIConf ever, and the YUI community is growing in both size and depth every year. We were blown away by all the talks, and we’ll keep the YUI Theater elves working double-time to get videos out.

We may have gotten a little behind on our RSS feeds (although we read every tweet in the prolific #yuiconf stream on Twitter), so this week’s In the Wild may drop the ball on a few items; let us know in the comments or @yuilibrary if we missed something important.

  • YUI 3 on Major Australian Real Estate Site: Mark Rall (@codeinfront) tweeted to let us know about a major Australian real estate site powered by YUI 3. (Original source.) #
  • C|Net’s Stephen Shankland Discusses the Most Recent GBS Update: In our latest Graded Browser Support update, we noted that we anticipate ending the A-Grade recommendation for IE6 in Q1 2011. This forecast generated a lot of conversation, including over at C|Net where Stephen Shankland had this to say: “IE6, introduced in 2001, lacks support for many Web standards–many old ones as well as a host of important new ones–and is feeble at processing Web-based JavaScript programs essential to the new era of dynamic, rich sites. It’s also more vulnerable to security threats. Although IE6 usage is gradually waning, it’s still common, in part because it’s built into Windows XP and hard to dislodge from corporate computing environments. Dealing a blow to the browser, YUI developers Eric Miraglia and Matt Sweeney in a blog post said Yahoo expects to ‘discontinue A-grade for Internet Explorer 6, moving it to C-Grade’ in the first quarter of 2011 so there’s more time to focus on mobile browsers and other important new areas.” #
  • Storing Snippets of Data on Your Page Via YUI 3: Andrew Wooldridge continues his set of YUI 3 tutorials. Writes Andrew: “Every time I do some digging into YUI3, I find things that are really interesting and useful. Take, for instance, Node.getData() and Node.setData(). These little methods allow you to store information associated with a particular Node, but you dont have to try to create some custom attribute or keep track of your own independent data storage object for you to use these methods. In a way, it allows you to associate information of any kind with elements on your page and are retrievable just by finding the Node and asking for the data. It’s like having a database on your page where the Nodes are the keys.” #
  • YUI 3 Quick Tip: Conditionally Load DataURI’d CSS or MHTML: Pat Cavit wrote up a great tip he picked up from YUI engineer Adam Moore at YUIConf: “If you’re already using the YUI 3 Loader to load some of your CSS like I do for some sites this can come in really handy. You could also do this via conditional comments, but you can’t control when the load happens in that case. The trick is to define the trigger for the MHTML module to trigger off of the regular module, & also make sure that the MHTML module will supersede the regular one. Then, it’s a simple matter of setting up either the simple UA check or a test function that returns true/false.” #
  • Speed Scrabble Online Built with YUI 2.8: SuperNifty’s Speed Scrabble Online leverages YUI 2.8′s utilities collection and widgets like TreeView and ProgressBar. (Original source.) #
  • Insert (Simple)YUI into Any Page with @triptych’s Bookmarklet: Writes Andrew: “I’m sure after some time working with the web, you tend to accumulate some handy bookmarklets. I know that for me you can never have enough of these things. I’m note sure what confluence of circumstances arose to create them, but they are often extremely useful. If you find yourself working with YUI and you run across a site you want to muck around with, perhaps for a demo or a more enhanced helper for Firebug – you might use this bookmarklet…” (Original source.) #
  • YUI-related Tweet of the Week: A tweet that made us smile this week: #
By Eric MiragliaNovember 19th, 2010

In the Wild for November 1, 2010

YUIConf 2010 is just around the corner, and we can’t wait. Here are some things we’ve noticed in the meantime:

  • YUI 3 on the New Yahoo! Mail Beta: Mike Curtis writes about YUI 3 usage on the new Yahoo! Mail beta in a YDN blog post: “For JavaScript, we decided to use YUI3. Yahoo! Mail Beta is built using the YUI framework from the ground up. One of the great benefits of YUI is that it’s modular, allowing us to pull in libraries as needed as opposed to downloading everything up front. Modernizing the markup and using YUI3 for JavaScript reduced total download size for the application by 35 percent, a huge performance win.” Check out the full article here. #
  • Sam Stephenson Releases Hork: Sam Stephenson from 37signals, author of the Prototype JavaScript library, has released a new project called Hork. According to Sam, “Hork is a little Rack middleware for transparently compressing JS & CSS assets with YUI Compressor.” (Original source.) #
  • Guild Wars 2 Site Launched with YUI 3.2.0 + Gallery: Pat Cavit (@tivac) wrote in to tell us about the new Guild Wars site. “We launched http://hom.guildwars2.com which is a fully YUI 3-powered site. It takes advantage of Eric Ferraiuolo’s overlay plugins, Ryan Grove’s history module, a few custom-built (now in the gallery) anim plugins, a generic animation module), [and] all sorts of loader/base/event stuff. It also heavily uses the new transition module.” (Original source.) #
  • “Learning YUI Pt.3 – SimpleYUI and Exploring the API” (via @triptych): Andrew Wooldridge continues his series of tutorials on YUI 3, this time with a look at SimpleYUI and Y.log. “SimpleYUI is like getting one of those cheese samplers in the mail. You dont have to go for a big commitment, but you can try out a lot of things without worrying about a lot of the safeguards you might later want to have. I have created a landing page for SimpleYUI, but in summary its like getting to play with YUI without worrying about all that .use() stuff, or anonymous functions, etc. It’s a lot like how you might have experienced jQuery for the first time. You get a lot of powerful functionality up front, and you only need a single js + a few lines of code to get started. For some great examples, check out this page from Eric Miraglia. SimpleYUI gives you DOM, Events (and custom events!!!) transitions, and AJAX. It’s perfect for folks who just want to add some animations or fun effects for your site in no time flat.” The full writeup is here. #
  • Montage Maker from @pamelafox Ported to YUI 3: Pamela Fox ported her cool Montage Maker application to YUI 3 — and now, she says, it’s both faster and more stable. (Original source.) #
  • Simple List Manager with YUI 3 on JsFiddle from @apipkin: Anthony Pipkin shared a little list manager he wrote — highlighting the intrinsic power of YUI 3 and also the ever-increasing usefulness of jsFiddle. (Original source.) #
  • Secure-TSPlayer Admin Driven by YUI 3 and 2-in-3: Caridy pointed out the Secure-TSPlayer Dreamweaver plugin, whose admin section makes use of YUI 3 as well as YUI 2 components like DataTable via the 2-in-3 mechanism. #
  • YUI 3-based Pong from @bruciemoose: Andrew Bruce has been playing around with YUI 3 and test-driven development. The result: A simple Pong implementation. “In case you’re one of my clients, you might be wondering why I’ve been slacking off recently. Here’s why: I’ve been teaching myself ‘grown up’ JavaScript under instruction of Douglas Crockford (in book and video form, obviously). Crockford never mentions Test Driven Development, probably because he doesn’t do it. But I do, so I’ve been learning to do that in JavaScript too.So here it is, HTML5 Canvas Pong. Pong is effectively a Hello, World! application for game developers. It’s not particularly fun, and my version is full of amusing bugs….” You can read the full post here, or jump in and give the game a try. #
  • JsFiddle Adds SimpleYUI Support: The jsFiddle team has added support for the SimpleYUI rollup for YUI 3, which instantiates itself and creates a global YUI instance (Y) with support for common Ajax library operations. You’ll find the SimpleYUI checkbox under the library selection menu when you select YUI 3.2.0. (Thanks to Andrew Wooldridge for the tip.) #
By Eric MiragliaNovember 1st, 2010

In the Wild for October 15, 2010

YUIConf 2010 is right around the corner, and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here’s what we’ve noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

  • Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console”: Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums, an IRC channel, as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more. I covered part one in a previous “In the Wild” column. #
  • Andrew Burgess’s “Crash Course” on YUI 2 Grids on NetTuts: Andrew Burgess’s “Crash Course” on YUI 2 Grids, which we first noted in May last year, has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI’s most popular projects. #
  • Create a BlogRoll with Google Spreadsheets and YUI3: Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let’s get down to code.” Get down to code with the full blog post here #
  • Video Remixing Site Dragontape Using YUI 3: Video remixing site Dragontape is making extensive use of YUI 3. Here’s how the site’s authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  • Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login”: YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!’s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:

    1. Because we’re only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
    2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”

    You can find the full tutorial here. #

  • Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke: @Reid is just getting this project underway, but there’s a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. (Original source.) #
  • A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront): @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I’ve been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details. #
  • “YUI, How Dare You Make Me Rethink…”: Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I’m no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it’s bad…not the way I’ve been doing things.” You can see MT’s full epiphany here. #
  • Jeez.eu on Building a Custom Search Engine with YUI: Jeez.eu’s tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  • Node.js Resource List from @codeinfront Includes Crockford, Dav Glass: Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog. #
  • ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x: Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here. #
  • Tweet of the Week: From @bartt: “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
By Eric MiragliaOctober 15th, 2010

Building TipTheWeb with YUI 3

About the Author: Eric Ferraiuolo is a Director of TipTheWeb and Co-Founder of Oddnut Software. He writes on his blog: 925 HTML, and can be found on Twitter: @ericf. Eric was a featured presenter at YUIConf 2009.

TipTheWeb is a new service that lets people directly support their favorite web content by tipping it. For instance, if you find a great blog post, you could tip it 25 cents.

TipTheWeb is a non-profit organization promoting freely-accessible, high-quality web content by awarding publishers that receive tips. If you publish online, you can use your TipTheWeb account to claim the places you publish to receive tips and be eligible to receive awards from TipTheWeb.

Screenshot showing the Landing page of tiptheweb.org

TipTheWeb’s Use of YUI 3

The user interface of TipTheWeb is completely built on top of YUI 3 (we drank the Kool-Aid.) The approach we took was to use YUI 3 as the foundation and structure for our JavaScript code. We’ve built 33 custom YUI 3 modules (56 if you include submodules, plugins, and roll-ups), several of which we contributed the YUI 3 Gallery: Component Manager, Markout, Overlay Extras, and REST Resource.

Page-Level Classes

The core features of TipTheWeb are implemented on a few highly-functional web pages which communicate with the server over Ajax. For each of these pages we created a custom YUI 3 module that exposes a page-level class used to coordinate actions between the functional parts of the page.

In one of our application’s main pages, the Tips page, you can see how this approach is applied with the page-level class TipsWindow. The main functional parts of the page are the widgets: CreateTip used for creating tips, and the TipList widgets for editing, canceling, and funding existing tips.

Annotated diagram labeling the main Widgets and Components that make up the Tips page of TipTheWeb

A Lot of Overlays

We use Y.Overlays extensively throughout our application’s UI to implement user-interactions; this allows us to keep the interface clutter-free while still having the functionality for advanced features available on the page. We needed features that were not built into Y.Overlay, so we developed Overlay Extras, which is in the YUI 3 Gallery and being used by a lot of other YUI 3 powered sites. Here are some place where we use Overlays on TipTheWeb:

Screenshot showing the confirmation overlay that appears when canceling a tip

Screenshot showing the overlay which contains a slider to allow a custom amount to be set when donating to TipTheWeb

Screenshot showing the menu which lists the various places a user can claim and accept tips at

Current State of TipTheWeb

We’d love for you to try out TipTheWeb; right now we are in invite-only beta, so request an invite on our site and we’ll send you an invite code.

Be sure to catch our talk at YUIConf 2010 where we will be presenting (more in depth) on how we use YUI 3 and YQL at TipTheWeb.

By Eric FerraiuoloOctober 5th, 2010

In the Wild for October 1, 2010

There has been significant buzz this week about Dav Glass’s tech talk on YUI 3 support in Node.js and what that enables in terms of progressive enhancement, as well as for Matt Taylor’s YUI 3 Gallery module for RaphaelJS. Luke Smith had a nice developer tip on the blog this week on extending YUI to “add your own awesome,” developer Stefan Klopp from CarRentalExpress.com shared his thoughts about using YUI 2 to power his site, and Carlo Zottmann shared his gorgeous new “Dana” theme for YUI’s documentation workhorse, YUI Doc.

Meanwhile, here are a few other recent pieces of news from the community:

  • Andrew Wooldridge — “Learning YUI: Introduction”: Andrew Wooldridge (@triptych) is embarking on a series of YUI articles on his blog, and the introductory piece is online: “I’ve decided to write a few articles about getting starting in YUI, and various things I learn as I go along… I assume you have some sort of need for a javascript library, or perhaps you read about YUI and are basically curious about it. Let me give you a bit of a background. YUI was originally created as a common set of javascript library functions within Yahoo years ago, with the idea of allowing web developers to have a basic set of functionality to use inside Yahoo pages. This naturally grew and expanded – breaking out of just Yahoo and also moving towards and open set of components you see today. Yahoo folks curate the library but take changes and updates from anyone, and you are free to use this code any way you like… YUI may seem like this giant set of libraries, doing everything from animations to widgets, but in reality the YUI team has tried hard to make it very small, fast, and modular. You only load the bare core when you include the YUI base js (although you can if you want load more via the configurator) and when you need more functionality, you can fetch it on the fly and avoid having long initial download times for your page.” Check out the full post for more. #
  • Evan Goer (@evangoer), “YUI 3 Grids Are Dead Simple”: Evan likes Matt Sweeney’s YUI 3 Grids, which debuted in beta in YUI 3.2.0. Writes Evan: “Not only is this version tiny (1.5 KB), but it’s the first layout system I’ve ever used where I can just write out whatever grid I want from memory, without ever needing to look at the docs.” Check out the full article for more. (Original source.) #
  • Saurabh Odhyan on the YUI 3 Cache Utility: Writes Saurabh: YUI 3 Cache “allows to cache frequently used data in javascript memory (Basic caching) or HTML5 localStorage object (Offline caching). Although we can implement our own caching mechanism in javascript, the YUI caching is general purpose and also provides a set of events. Moreover it can be easily integrated with YUI Datasource which can be very beneficial. I’ll show you how useful YUI caching utility can be using a very standard example, Factorial.” (Original source.) #
  • IHikeWithMeetup.com Built with YUI 2.8: IHikeWithMeetup.com is a clever mashup of Meetup.com data from Bay Area hiking groups along with weather data and Yahoo! Maps — and all hosted with Yahoo web hosting. Naturally, the site is powered by a healthy helping of YUI 2.8 components. #
  • Canonical’s Landscape Ubuntu Systems Manager Powered by YUI 3: Canonical uses YUI 3 extensively, including in its Landscape product. According to the product page, “Landscape makes the management and monitoring of Ubuntu systems simple and effective by combining world-class support with easy to use online management tools.” #
  • Sidnei Da Silva, “Even Faster Websites with YUI”: Writes Sidnei: “Ever since I got my copy of Steve Souders’ Even Faster Web Sites I’ve became obsessed with speed. During my day job I’m constantly looking for things that can be improved to make the user experience smoother, specially for first-time visitors. I’m fairly happy with what we’ve achieved in the last year, though there are always things to be improved. Today I’m going to share with you one of the tricks that we’ve discovered almost by accident and that can help with making your website faster, if YUI is your Javascript framework of choice.” (Original source.) #
By Eric MiragliaOctober 1st, 2010

Implementation Focus: Car Rental Express

About the author: Stefan Klopp is the Director of Development for ExpressITech, the parent company of Car Rental Express. Stefan has been developing highly usable web solutions for the car rental industry in various roles over the last 6 years. He currently lives and works in Vancouver, British Columbia, Canada.

Car Rental Express is the leading independent car rental comparison website on the Internet. It lets users rent cars online in more than 1000 cities and airports around the world.

Our user base is largely non-technical, which means they want to compare prices and rent cars as easily as possible. With the relaunch of our website in June of 2010 we have implemented many components of YUI 2 to help provide our customers with an intuitive experience.

Which YUI components are we using?

The components that we’ve been using include Connection Manager, AutoComplete, DataSource, Calendar, Animation, JSON, and Container.

Why we chose YUI

When reviewing the different JavaScript libraries that we could potentially use on Car Rental Express, we found that the YUI was the most complete for our needs. The biggest selling features for us was the very modular approach the YUI took to implement different design patterns, as well as the robust documentation and examples they provided. From a development standpoint this led to rapid development of our application without having to struggle with a library.

How we use YUI

We utilize the YUI in a number of ways. Our 4 most used components are AutoComplete, Calendar, Container, and Connection Manager. Here are some of the ways we use each of these components.

AutoComplete

The AutoComplete component is used extensively on our site to help users find a city or airport in which to rent a car. We really liked how easy it was to implement this component, and how quickly it responds. We cache search results server-side to help improve search results; however, having the client-side caching also helped tremendously in speeding up the response of the component. Another feature that we really took to was how easy the results were to style. When displaying the locations to the user this was crucial as we needed to identify which locations where found in cities and which were found at airports.

Calendar

The Calendar component is also used throughout the site when a renter is filling in dates to conduct a search. We are using a customized version of John Peloquin’s Interval Selection Calendar and displaying it in a YUI Dialog. Essentially what we wanted to do was give the renter a two-month view when choosing their dates, as well as visually show them what date range they currently have selected. Again, this was extremely straightforward to implement using YUI 2 Calendar, and it basically came down to creating a YUI Dialog, setting the body to contain a div for the Calendar, then attaching a YUI Interval Calendar to that div.

Containers

We utilize YUI Containers throughout our website in a number of different ways. In the example above we were using a Dialog to help us display the Interval Calendar when a user was selecting a date. On our rate search results page we make heavy use of Containers to give the renter more information on different aspects of the car rental agency and the vehicle they might potentially rent. Most of the containers on this page are Panels that we re-use for each different listing. For example, the vehicle display features Panel:

Things got a little more fun with the Renter Rated agency ratings. When displaying the ratings, we really wanted to focus the user’s attention to the scores an agency received and to display this information in a clean, easy-to-view way. By utilizing the Dialog Control we were able to constrain the viewport and center the dialog easily to help us achieve this goal. By setting a blank header and footer it made styling simple by just adding the appropriate styles to our CSS. The end result was a clean ratings container that provides the renter with the information they want.

Connection Manager

Connection Manager is used throughout the site whenever we need to pull data via a XHR request. In some of the examples above we utilize this component for requesting cities and airports for the AutoComplete implementaitons and pulling the rating information for the Renter Rated Dialog.

One interesting way we utilize Connection Manager is with our rental center block that sits on most pages. To help with performance we do a lot of full-page caching on many of our content pages. However, we still wanted to display the dynamic rental center block on these pages. This presented us with a problem we were able to solve with Connection Manager. Rather than having to break up our fully cached page and cache only aspects of the page we found it was easier to just include the rental center block via a simple asynchronous request. We found that this allowed us to retain the performance from having a fully cached page, yet still display dynamic content in our rental center box.

Final Thoughts

Overall we have been extremely happy with our choice to use YUI. It provides us with a modular library that is well documented, easy to use and implement.

By Stefan KloppSeptember 28th, 2010

In the Wild for September 24, 2010

As we get ready for YUIConf 2010 and a lot more in the coming months, here are some of the other things we’ve taken note of in the larger YUI world:

By Eric MiragliaSeptember 24th, 2010