Yahoo! User Interface Blog

YUI 2.3.0: Six New Components and a Prettier Face

We’re pleased to announce today the release of YUI version 2.3.0. This release features six new additions to the library as well as a new skinning architecture and a new visual treatment for most of our UI controls. All of this, plus 250 enhancements and bug fixes, is available for download immediately.

Here’s what’s new to YUI in version 2.3.0:

1. Rich Text Editor (beta): YUI developer Dav Glass brings you the new YUI RTE, featuring rich-text editing with robust A-Grade browser support. Cross-browser support has always been a major challenge for RTEs, and we think you’ll be impressed with how well this editor works across the various environments. You can instantiate it with just a few lines of code for simple implementations, and when you need to go beyond the ordinary it’s easy to extend the RTE’s Toolbar with your own custom buttons.
   
2. Base CSS: Nate Koechley continues to extend and refine the YUI CSS foundation, which now includes four members — Reset CSS neutralizes browser CSS treatments; the new Base CSS applies some consistent and common style treatments that many developers use as a foundation; Fonts CSS provides a foundation for typography; and Grids CSS delivers CSS-driven wireframes for thousands of potential page designs.
3. YUILoader Utility (beta): YUI’s most prolific author Adam Moore has contributed the new YUILoader Utility, a mechanism for loading YUI components (and/or your own custom components) on the page via client-side script. YUILoader knows all about YUI’s dependency tree and introduces into the page only those files that are needed to support your desired components. It can load files from Yahoo! servers or from your own hosted location.
4. ImageLoader Utility (experimental): Yahoo! Travel engineer Matt Mlinac authored the new YUI ImageLoader Utility, which allows you to defer the loading of some images to speed initial rendering time on your pages. If you suspect that you’re serving a lot of images that are never actually seen by your users, you’ll want to check out Matt’s work on this clever utility.
5. Color Picker Control (beta): Adam Moore built the new YUI Color Picker Control on top of his own Slider Control. The Color Picker provides a powerful UI widget for color selection, featuring HSV, RGB, and Hex input/output and a web-safe color-selection swatch.
6. YUI Test Utility (beta): Nicholas C. Zakas, who works on My Yahoo! when he’s not writing books or blogging on YUIBlog, authored our new YUI Test Utility. YUI Test introduces a flexible unit-testing framework for the YUI ecosystem and serves as the foundation for our own unit-test battery.

YUI Shows Some Skin

YUI components have always been receptive to implementation-specific styling, but with 2.3.0 we’ve moved to a more formal skinning approach that helps to separate core CSS definitions from purely presentational ones. YUI’s support for skinning makes it easier for you to implement your own design on top of, say, the TabView Control — and it makes it easier to share that skin with others in the community.

In concert with that effort, Yahoo! designer Sam Lind pitched in over the past several months to help us create an attractive, consistent visual treatment for the many UI controls in YUI that ship with a default look-and-feel. This baseline skin is much more stylish than what we’ve shipped in the past; many thanks to Sam for his hard work. In his honor, we’re calling this debut visual treatment the "Sam Skin". Hopefully this will be just the first of many YUI skins that evolve within the developer community as time goes on.

More To Come

The YUI Team will have more to say over the coming weeks about what’s new in 2.3.0, including in-depth looks at the Rich Text Editor, the skinning approach, other new components, and Jenny Han’s significantly upgraded DataTable Control. In the meantime, George Puckett from the YUI team has posted a detailed release manifest to our forums and there are release notes accompanying every component (available on the website and as part of the download).

We’ve been working hard on YUI since the last release and we’re excited to share this work with everyone today. Please check out the new version and let us know what you think.

Find conversations: bloglines | technorati

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

YUI Theater — Joe Hewitt: “An Introduction to iUI”

Joe Hewitt, co-founder of the Firefox project and author of the popular Firebug extension to Firefox, stopped by Yahoo! last week to talk about his latest creation: the iUI JavaScript/CSS library that allows developers to build web applications that emulate the visual language native iPhone applications.

In this 15-minute presentation, Joe provides an overview of how iUI works and how you can use it to jumpstart any iPhone-specific interfaces you’re considering for your web apps. He also provides an outstanding overview of just what you can expect from the current iPhone web browser in terms of standards support; if you’re curious about what works and what doesn’t with iPhone’s Safari implementation, this is a good place to start.

This presentation is available in Flash format on Yahoo! Video and as an MPEG-4, iPod-compatible (and iPhone-compatible!) download (change the extension from .m4v to .mp4 if your video software doesn’t recognize the extension).

In Case You Missed…

Some other recent videos from the YUI Theater series:

1. Karo Caran: "An Introduction to Screen Maginfication Software" (Yahoo! Video | .m4v download)
2. Douglas Crockford: “JavaScript: The Good Parts” (Yahoo! Video | .m4v download)
3. Grady Booch: "The Power, the Beauty, the Limits of Software" (Yahoo! Video | .m4v download)
4. Nicholas Zakas: "Maintainable JavaScript" (Yahoo! Video | .m4v download)

Reminder: We’re Looking for a Great Engineer to Work with Joe on Firebug

Just a quick reminder that the YUI team is looking to hire a great frontend engineer to work with Joe on Firebug. Check out the job description, and if you’re interested get in touch with us at yui-jobs /at/ yahoo /dash/ inc /dot/ com. (Principals only; no recruiters, please.)

Find conversations: bloglines | technorati

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

Downshift Your Code

Web browsers have advanced to the point where things happen fairly fast across the board. Events are fired fast, user interactions can be registered fast, code executes fast. All this speed is typically a good thing, as it keeps modern web applications zipping along at a steady clip. But sometimes fast is actually too fast. Sometimes, you simply can’t let something happen multiple times in a second due to complex calculations or major UI shifts that occur.

As a concrete example, consider the resize event. In most browsers, the resize event fires after the user has finished resizing the window, meaning that the event is fired once for each window resize. Internet Explorer, on the other hand, fires the resize event continuously as the user is resizing the browser. If you have anything more than some simple calculations being applied during onresize, it’s possible to end up confusing IE by having too much going on (especially if the event handler does any UI manipulations). The solution is to throttle your code so that a method is called a maximum number of times per second. This can be achieved using timeouts and a little bit of indirection. The basic pattern is as follows:

YAHOO.namespace("example");

YAHOO.example.MyObject = {

    _timeoutId : 0,
    _process : function () {
        //processing code goes here
    },

    process : function () {
        clearTimeout(this._timeoutId);
        var me = this;
        this._timeoutId = setTimeout(function(){
            me._process();
        }, 250);
    }
};

This object contains two “private” members, _timeoutId and _process(), which should not be accessed from outside of the object (if you want to make them truly private, you can use Crockford’s Module Pattern). The _timeoutId property stores a timeout ID that is used to control how often _process(), the method doing all the processing, is called. The process() method is the one that should be called externally because it controls how often the processing can occur. The first step in this method is to clear the timeout represented by _timeoutId, then, it creates a new timeout to call _process(). This sequence makes it impossible for _process() to be called more frequently than every 250 milliseconds while assuring that _process() will be called no later than 250 milliseconds after the last call to process(). The maximum number of times _process() can be called is four times a second (using 250 milliseconds as the timeout period). You can, of course, adapt this time depending on your particular needs.

It isn’t recommended that you use this in all of your methods because the technique uses closures and does have a performance penalty. However, if you are having trouble because a certain method is being called too frequently, throttling the processing can result in significant performance improvements.

Find conversations: bloglines | technorati

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