2008 » October » Yahoo! User Interface Blog (YUIBlog)

In the Wild for October 30, 2008

October 30, 2008 at 8:17 am by Eric Miraglia | In In the Wild | 7 Comments

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

SliderWindow: SliderWindow is a solution that might appeal to you if you’ve been thinking about how to implement a Growl-style messaging system across your site. The author at Eaktion.com has a lengthy explanation and analysis of the use cases where this might be appropriate, as well as a number of examples of the tool in action. (Original source.)
Blind Up/Down Using YUI Animation: The prolific Matt Snider offers up another free, YUI-based implementation — a blind up/down animation that runs on the the YUI Animation Utility.
V3ggie.com — a Vegetarian Search Engine: V3ggie.com is a Yahoo! BOSS-powered search engine that uses YUI CSS and JavaScript on the frontend. Nice! Sitting here in my vegetarian Birkenstocks, I could not possibly be happier. (Original source.)
Using Reset Stylesheets: WebMonkey has a nice post out on the need for and use of “reset” stylesheets (like YUI’s Reset CSS). From WebMonkey:
Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It’s true — measure your page elements in Firefox, Safari and Opera with a ruler and you’ll see each renders them in their own subtly different ways. For example, the default margin for paragraph tags in Safari is smaller than it is in Firefox. And what about the fact that most browsers automatically add bullets to your unordered list tags? Or that headlines appear bold? Web designers have been struggling to cope with these differences since the dawn of history (about 1993).
DataTable with Tooltips: Satyam (Daniel Barreiro) has a new DataTable example out illustrating the use of DataTable with Tooltip. A single Tooltip is reused throughout the table to improve performance.
AJAX Image Cropper with YUI and PHP: Asvin Balloo has written up a tutorial on using Dav Glass’s ImageCropper Control with a PHP backend to support full AJAX-style image-cropping.
Dynamic Tabbed Interface with YUI: Jim Mock wanted to clean up his blog’s sidebar, and he turned to the YUI TabView Control to do it. Check out his solution on his blog, soupnazi dot org.
JQuery Like GetElement Method in YUI: While YUI has a Selector Utility written by Matt Sweeney, we haven’t done as much as other libraries to integrate selector syntax into the core of the library. (Of course, this changes with YUI 3.x.) For those of you looking to add a lightweight element retrieval function to your YUI 2.x implementation — something more robust than YAHOO.util.Dom.get but not as full-featured as the still-in-beta Selector Utility — take a look at Matt Snider’s getElements function. Writes Matt: “One of the many features that I like about jQuery is the ability to pass in CSS selectors and HTML attributes into the jQuery for retrieving DOM nodes. YUI has methods for fetching elements by their ‘className’, but not by their HTML attributes, such as ‘type’ or ‘name’. Today, we’ll cover a method I wrote that supports fetching elements by tagName, className, and/or a collection of attributes. The method ‘getElements’ returns all nodes that match any of the tagNames and any of the classNames and every type of attribute (you can have multiple attribute types, such as ‘name’ and ‘type’) provided.”
Making Flash Messages Disapear, with YUI: The problem Duncan Brown addresses in this post, he says, is this: “Ok, so we all know how useful those flash messages are that cakePHP throw at us, ‘you’ve done it wrong, try again’. Well as much as I like them I don’t want to be reminded of my error until I go to a different page. The answer is to make them disapear.” And that’s what he shows you how to do, using the YUI Animation Utility.
Javascript Libs: Dojo ‘v’ Ext ‘v’ JQuery ‘v’ YUI: Developer Ron Savage takes a look at four major JavaScript libraries and describes his rationale for choosing YUI from among them.
Dynamic Data – Experimenting with YUI’s DataTable and DataSource Controls: Matt Berseth is back with a new .Net demo, this time using Jenny Han Donnelly’s YUI DataTable:
I spent a few hours putting together a Dynamic Data web site using the YUI DataTable and DataSource components. I mostly just did this out of curiosity to see how easy or difficult it would be to use the DD API with other components besides the GridView and DetailsView controls. So I created a DD web site that provides read-only access to Northwind’s Customer, Employee and Supplier tables, but I am not using ASP.NET’s GridView, DataSource and UpdatePanel controls to render the grid. Instead I have replaced these components with YUI’s client side DataTable and DataSource and serve the data using a web service (paging included!). Below are a few of the highlights, and don’t forget to download the sample and try it out for yourself. Its experimental, but if you are new to DD or YUI you might find it interesting.
The live demo was throwing a data retrieval error when I last looked, but the demo code is still of interest if you’re working with tabular data in .Net.
FreeCell: This has been around for awhile, but I only noticed it recently — a full-blooded FreeCell implementation based on YUI. (Of course, we can never mention YUI and card games without also mentioning Robert Schultz’s incomporable World of Solitaire site.)
Compressing CSS and Javascript with Y!UI Compressor: Nick Skelton of beardscratchers.com has written up a nice tutorial on the use of one of YUI’s most popular developer tools, Julien Lecomte’s YUI Compressor.
Creating an Autotagger with Yahoo’s Term Extraction Service and YUI: James Long wired the Yahoo Term Extractor API to a YUI Rich Text Editor to create an autotagging service. The autotagger automatically distills tags from what you’ve written. This shortens a tedious step in user-generated content and helps users make higher-quality tags with less effort. Nice. You can try it out here.
YUI 2.6 Now Available for Aptana Studio: As we’ve mentioned previously, Lori Hylan-Cho and the Aptana team have YUI 2.6.0 support readied for Aptana Studio. This is great news for YUI developers and for the Aptana user community.
Animation Comparison of 3 Top Libraries: Matt Snider of Mint wanted to take a closer look at how animation libraries vary across the top JavaScript libraries. From Matt:
Many of you probably know that there are a number of issues affecting how well an animation works in JavaScript: how busy the client machine is, how much CPU/memory your browser dedicates to JavaScript, how much JavaScript is needed to run a given page, and how much work the JavaScript is already doing; to name a few. Also, animation libraries use a combination of the ’setTimeout’ or ’setInterval’ methods of JavaScript, which are notoriously inaccurate (+/- 15ms), and/or (new Date()).milliseconds() to attempt to smooth animation, but it is fairly easy for an entire step in the animation to be skipped. The summary is that the more complex a page gets the less consistent that animations become.
Check out Matt’s blog for his comparison and analysis.
Getting Resources with YUI Get: YUI author Dan Wellman has a new article out on Adam Moore’s YUI Get Utility. The article, which you can get for $3.20 from DMXZone, explores the many uses of Get. Dan writes: “The YUI Get utility is a relatively recent addition to the growing suite of developer tools that come under the YUI family. Its only purpose is to allow us to dynamically add new CSS or script resources after a page has loaded. Why would we want to do this? There are many reasons, but the most prominent would probably include Progressive Enhancement, Lazy Loading, Cross Domain Data Resources.”
EBay Motors Mashup Using YUI: I found a sweet deal on a Buick Century in Mishawaka, Indiana, on FindYourAuto.net, a site that mashes up a bunch of web services and then lets you crunch through the results using some YUI sugar (including DataTable and Slider).
Display XML Data with YUI DataTable Control: Brad Melendy offers some tips on working with Jenny Han Donnelly’s YUI DataTable Control in conjunction with XML data.
YUI Compressor TextMate Bundle: ExperienceInternet has a new TextMate bundle out that enables you to compress your files using YUI Compressor right within TextMate. Check out their 4 minute screencast to get an idea of how to operate this handy bundle.
Web Analytics Conversations: St�phane Hamel writes: “I’m introducing the Web Analytics Conversations, a Technorati and Google Blog Search mashup of over 150 web analytics blogs. Not only does it automatically rank blogs by Authority, Freshness and level of Activity, it also shows blog title, description and latest posts. The interface makes it very easy to sort blogs by any of those criteria, plus another one, called WAC ranking!” WAC is a nice interface built on top of the YUI DataTable, with custom visualizations and skinning for the pagination controls. This is a good example of what DataTable can do in the wild — and a great site if you’re interested in Web Analytics blogs. (Original source.)
YUI 3 in the Wild: While YUI 3.0PR1 is strictly a preview release and not recommended for production use, some YUIers have been eager to dive in and put the new code to use. Here’s one site we noticed recently…I’m sure there are many more to come as YUI 3 matures toward beta and GA. (Original source.)
AJAX Tabs Content Script for VBulletin 3.7+: vBulletin, which has long implemented YUI and even makes it easy for you to serve YUI from Yahoo’s CDN, now has a terrific new plugin for tabbed content based on Matt Sweeney’s YUI TabView Control.
YUI-based Alert Box – Replace Your Ugly Javascript Alert Box: We return to Asvin Balloo’s blog for a quick tutorial on leveraging Adam Moore’s YUI Loader and Satyen Desai’s Container components to dress up alert-boxes for web applications.
Simplifying and Enhancing YUI Test: If you find it cumbersome to deal with the boilerplate code and CSS involved in using Nicholas Zakas’s YUI Test tool, you may be interested in these helper files from grink that simplify the framing of your YUI Test scripts.
Ee-yui — a YUI Rich Text Editor for Expression Engine: ee-yui is a plugin that enables the use of YUI’s Rich Text Editor (including the light Simple Editor variant) into the Expression Engine CMS.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Image Optimization Part 1: The Importance of Images

October 29, 2008 at 12:28 pm by Stoyan Stefanov | In Development, Performance | 11 Comments

Stoyan Stefanov. About the Author: Stoyan Stefanov is a Yahoo! web developer working for the Exceptional Performance team and leading the development of the YSlow performance tool. He also an open-source contributor, conference speaker and technical writer: his latest book is called Object-Oriented JavaScript.

This is part 1 in an ongoing series. You can read the other parts here:

This is the first in a series of posts about image optimization. In this series, I’ll explore how images affect web site performance and what can you do to your images in order to improve page loading times. (I won’t say how many posts in this series, so that I can claim later that I underpromised and overdelivered…).

When you think about improving page response time, one of the first obvious things to think about is the page weight. It’s obvious that, all things being equal, the heavier a page is the slower it will be. If we take this to the extreme, we can say that the fastest page you can possibly have is the blank page. Once you start adding stuff to the blank page, you’re only making it slower.

On a more serious note, it really is up to you how much content you want to put on a page, so let’s focus on what comes next. After you’ve settled on the content, it’s your job to make sure the content and components are as small as possible. Following our Yahoo! performance best practices, you should make sure that all plain text components (HTML, XML, CSS, JavaScript…) are sent compressed over the wire and that you minify CSS and JavaScript.

But what about the images, how can you speed them up without sacrificing quality and looks? But first, does it really matter?

How important are the images?

Before we start, let’s see if we should even bother with images. Lately we’ve been witnessing the rise of rich internet applications with lots of JavaScript — by “lots” meaning sometimes 300K or more worth of JavaScript code. In other cases, especially in advertising, Flash seems to be the weapon of choice. So, on average, how much of the page weight is images. It’s easy to answer this question by just looking at Alexa’s top 10 websites in the world (as of October 2008) and use YSlow to check what percent of the total page weight is images. The results are given below.

Percentage of page weight that goes to images, average 46.6%
1	Yahoo!	39%
2	Google	75%
3	YouTube	37%
4	Live.com	94%
5	Facebook	39%
6	MSN	59%
7	MySpace	36%
8	Wikipedia	34%
9	Blogger	28%
10	Yahoo! JP	25%

On average, 46.6% of the page weight for these popular sites consists of images, included either inline with <img> tags or via CSS stylesheets. Other studies show that this percent can be even higher, depending on the cross section of sites you examine. The exact number is not important, because every site is unique and different from the average; for example Amazon’s home page was made of 75% images at the time of the experiment.

This is a massive percentage and it tells us one thing: There’s huge potential to improve the performance of websites if we can improve the way we handle the image payload. By focusing on images you can make a difference and delight your site visitors with a faster and more pleasant experience.

To be continued…

Over the course of the following weeks, we’ll be publishing more about image optimization. The topics for discussion include:

different image formats and how to pick the right one
ways to put your images on a diet without compromising quality
optimizing generated images
the effect of using AlphaImageLoader
favicons
CSS sprites
serving images faster

The series of posts will not require Photoshop or other designers’ domain-specific knowledge, so it should be pretty easy for anyone to learn and apply these techniques. More to come soon…

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI 2.6.0 Support in Aptana Studio

October 28, 2008 at 12:52 pm by Eric Miraglia | In Development | 3 Comments

Aptana sent a clear signal about how committed it was to the needs of frontend engineers when it hired Lori Hylan-Cho to work specifically on support in the Aptana IDE for popular frontend libraries. This is a challenging task, given the complexity of the library landscape. But these libraries (like YUI and jQuery) are an important asset for developers of web applications, and Aptana has shown that it’s going the extra mile for those developers.

Lori, working with Jon Ferraiolo, already has YUI 2.6.0 support built out for Aptana, and it’s a huge step forward from previous YUI plugins. Support is now provided across the full spectrum of YUI components and is driven by the same data that we use to build out our API documentation. Here’s Lori writing about the plugin on her Aptana blog:

The Yahoo! User Interface Library, better known as YUI, version 2.6.0 was released earlier this month, and is now supported by Aptana Studio. YUI 2.6.0 includes numerous fixes, enhancements, and optimizations; introduces a new Carousel Control; breaks the Paginator Control out from DataTable; and makes final eight components that were previously designated beta.

In addition, YUI 2.6.0 also includes a huge number of functional examples—all of which are available, along with code assist, code completion, built-in API documentation, and more, when you install the YUI 2.6.0 plugin for Aptana Studio.

Many thanks to Lori, Jon and the whole Aptana team for this work (which extends beyond YUI to many other popular JavaScript libraries). You can get started with the enhanced YUI support by downloading the free Aptana Studio.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Ylastic

October 28, 2008 at 12:12 pm by Eric Miraglia | In YUI Implementations | 1 Comment

Prabhakar Chaganti is the founder and CTO of the Atlanta based start-up Ylastic.
He is a tech entrepreneur with a wide variety of interests, especially projects involving Ruby and Erlang. He won the community choice award in the 2006 VMware Global Ultimate Virtual Appliance Challenge.

Prabhakar is the author of two recent books — GWT Java AJAX Programming and Xen Virtualization, and he is currently authoring an introductory series of articles on Cloud Computing with AWS for IBM Developerworks.

1. What is Ylastic, and what interested you in creating a unified interface into Amazon’s cloud computing services?

Ylastic is a single unified user interface to the the AWS cloud computing environment — S3, EC2, SQS and SimpleDB. We were initially working on a video creation startup and trying to use AWS as our platform and used a bunch of free tools and home brewed scripts to manage the environment. It quickly became a mess as we were spending way too much time trying to see where we were each day. We needed to track our instances, manage videos being uploaded to buckets, view the messages in queues for debugging and use SDB for metadata. We also needed a way to monitor the AWS status dashboard so we could be proactive if one of the services was having any issues, and also to track what each one of was doing so we didn’t step on each other’s toes. The existing tools were able to give us some of this info, but there was no simple way to do this without tying ourselves into knots and wasting valuable time with these issues which could be put to better use working on our own app. That’s when a light bulb went off in our heads that maybe we were building the wrong product. We decided to scratch our own itch and build something that would be useful for managing an user’s interactions with AWS.

2. You’ve made extensive use of YUI throughout the Ylastic user interface. Tell us a little bit about your design goals for the UI and how you took advantage of YUI to achieve those goals.

Our main design goals for the UI were:

Easy to build: This was very important as we wanted to build it fast and get to market. YUI is a large and comprehensive framework, but once you "get it" and understand the patterns of usage, it is very easy to use.
Readily available components: Access to a readily available, well tested and reliable component library. We early on decided that the main component that we would need for showing the various pieces of AWS information would be a table control. YUI provides a bunch of reliable and tested components out of the box and the DataTable is one of them. This is a very versatile component and has handled everything we have thrown at it with ease. We use DataTables on pretty much every page of the app. We use AJAX everywhere via the DataSource/Connection Manager, Logger for debugging, Container with Panels and Dialogs for messages and forms, Reset/Fonts/Base/Grids CSS for page layout, TabView for preferences, AutoComplete for search filtering, Animation for effects and Dom and Selector for DOM manipulation.
Work in Firefox and Safari: We wanted to support these two browsers out of the box as a lot of the people that use AWS seem to be using one of them. Support for Internet Explorer was not a requirement initially, but we intend to fully support it for future versions. YUI has worked pretty well for us in both the browsers with no issues.
Look good: The UI needed to have a nice clean look which was unified across all the components. We did not want a mix and match look and feel. The default Sam Skin for YUI is used for our application.
Support: We also needed some support for the framework. It did not have to be commercial but we wanted a framework that had an enthusiastic community and active development. The YUI forum has been a fantastic resource for us and very helpful.

You can see the Ylastic in action using YUI on our screencasts.

3. What implementation piece with YUI are you most proud of from a code/engineering perspective?

Ylastic provides a dashboard which is the first page that our users see when they login. This page displays the current state of your entire AWS environment along with the service health status. There are four custom panels, one each for EC2, S3, SQS and SimpleDB displaying the relevant info for each service, and a datatable that displays the current service health, as you can see in the screenshot below. There is a lot of stuff going on in the background of this page including multiple datasources for retrieving the information asynchronously, a loading modal dialog, a monitor that knows when all the info has been retrieved, animation to fade in the panels as data arrives, and dom manipulation. Last but not the least, the page layout had to work correctly in both Safari and FF. YUI provided all the right tools and we were able to tie everything together and get it all to work.

4. What lessons did you learn about working with YUI on a challenging project that might be of interest/use to other YUI developers?

Spend some time up front prototyping and playing with the various components before doing any serious development work. This will really help you get familiar with the framework. Don’t be afraid to dig in to the source code for YUI, which is well commented. The code is of a very high quality and you can learn a lot about using JavaScript efficiently by looking at the patterns used by the YUI team.

5. As YUI veterans at this point, what advice or wish list do you have for the YUI development team?

The YUI team has done a great job of listening to the users and constantly improving the various components.

We would like to see more complex samples/examples for the various components. It would also be nice to have a cookbook for YUI, which shows off code snippets for common functionality.

In case of the datatable, this would provide a single place where you can quickly determine how to update a cell, delete a row, and so on. This will really help both new users and experienced users by providing all the important information in one place, may be even a wiki? The forums are a good resource but the volume of questions and usage is beginning to make it a little difficult to sort and search for things.

6. What’s next for the Ylastic frontend’s evolution?

We are already working on supporting the iPhone for Ylastic and just posted a sneak preview on our blog. We intend to work on supporting other moble platforms next, and we are planning on experimenting with the YUI for this. We are currently running on YUI 2.5.2, and intend to move over to the 3.x when it is released.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Working with the YUI DataTable (Updated for v2.6.0), Part 2: Changing the Contents of the DataTable

October 27, 2008 at 8:23 am by Satyam | In Development | 30 Comments

Don’t miss Part One of this series, in which Satyam explores practical steps on getting started with the YUI DataTable Control.

Daniel Barreiro (Satyam) About the Author: Daniel Barreiro (screen name Satyam) has been around for quite some time. The ENIAC was turned off the day before he was born, so he missed that but he hasn’t missed much since. He’s had a chance to punch cards, program 6502 chips (remember the Apple II?), own a TRS-80 and see some fantastic pieces of operating equipment in his native Argentina which might have been in museums elsewhere. When globalization opened the doors to the world, his then barely usable English (plus an Electrical Engineering degree) put him on the career path which ended in a 5-year job in the Bay Area back in the days of NCSA Mosaic. Totally intrigued by the funny squiggles a friend of his wrote in his plain text editor, full of <’s and >’s, he ended up learning quite a lot about the world of frontend engineering. It’s been a long journey since COBOL and Fortran. Now he lives quite happily semi-retired in the Mediterranean coast close to Barcelona, Spain. When he’s not basking in the Mediterranean sun, Satyam can be found among the most prolific and knowledgable participants in the YUI community on the YDN-JavaScript developer forum.

In a previous article I wrote about how to get started with your own implementation of the DataTable component. In this article I will cover how to change the contents of the DataTable, especially how to communicate with your database server to make changes and, if successful, show those changes to the user, since in many applications, the contents of the DataTable should be a reflection of the information in a database.

Continue reading Working with the YUI DataTable (Updated for v2.6.0), Part 2: Changing the Contents of the DataTable…

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus Update: Buzillions.com/PowerReviews

October 21, 2008 at 4:19 am by Eric Miraglia | In YUI Implementations | No Comments

Jim Morris, VP for the Buzillions Platform at PowerReviews, wrote in to tell us that Buzillions launched a major redesign recently, including a comprehensive update to YUI 2.6.0. A dozen YUI components are exercised throughout the site. We first wrote about Jim’s team and their work more than two years ago — it’s great to see how their product, and its use of YUI, has evolved over time.

Here’s a Vegan Product Reviews section Jim set up for me. Note the smooth use of YUI Animation and Overlays when you hover over a product image.

Buzillions.com is a consumer reviews portal; its underlying platform is used by online vendors around the world.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI Theater: Nicholas Zakas — “Test-Driven Development with YUI Test”

October 20, 2008 at 9:38 am by Eric Miraglia | In YUI Theater | 4 Comments

Nicholas Zakas is the author of the YUI Test component and as principal frontend engineer on the Yahoo Front Page team. A few weeks back, he gave a talk at the 2008 Yahoo Frontend Engineering Summit on test-driven development in the browser, walking through the fundamental concepts of TDD and then applying those to some specific use cases.

Although YUI Test is a part of YUI — and we use it for the unit tests we use on and ship with our library — the tool itself and the philosophy that underpins its use are both generic and can be used with equal relevance for testing code based on other JavaScript libraries. Unit testing for JavaScript remains a relatively obscure area for a lot of developers, and we’re grateful to Nicholas for the clarity he brings to the issue in this talk.

Nicholas C. Zakas: "Test-Driven Development with YUI Test" @ Yahoo! Video

download (m4v)