Yahoo! User Interface Blog (YUIBlog)

Register for YUICONF 2009

We’re pleased to announce that registration is now open for YUICONF 2009: http://yuiconf2009.eventbrite.com/. Tickets are free, but attendance is limited — please register as soon as possible to reserve your seat.

YUICONF 2009 is the premiere event for YUI developers from around the world to get up to speed on the latest YUI advancements and best practices (with a particular focus on the 3.0.0 release announced earlier today), get the scoop about the road ahead, and share tips and tricks with each other.

This year’s event will be held Oct 28-29 on Yahoo’s Sunnyvale campus and promises to host an all-star lineup of YUI authors, contributors, and developers leading highly technical sessions on YUI components and techniques as well as deep-dives into the API.

If you can’t join us this year, many sessions will appear on YUI Theater in the weeks following the conference, so stay tuned to YUIBlog for some good video content in November.

Some of the topics we have planned for this year’s event include:

• The YUI 3 roadmap
• Accessibility
• Debugging
• Contributing to YUI
• Building custom modules
• The widget infrastructure
• API deep dives
• … and much, much more!

Hope to see you there!

Find conversations: bloglines | technorati

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

YUI 3.0.0: First GA Release of YUI’s Next-Generation Codeline

YUI().use("node", function(Y) {
    Y.one("#message").setContent("Hello, World!");
});

We’re pleased to announce today the general-availability release of YUI 3.0.0. YUI 3′s core infrastructure (YUI, Node and Event) and its utility suite (including Animation, IO, Drag & Drop and more) are all considered production-ready with today’s release.

YUI 3 is the first ground-up redesign of YUI since 2005, and it brings with it a host of modernizations:

1. Selector-driven: YUI 3 is built around one of the lightest, fastest selector engines available, bringing the expressive power of the CSS selector specification into actions that target DOM nodes.
2. Syntactically terse: Without polluting the global namespace, YUI 3 supports a more terse coding style in which more can be accomplished with less code.
3. Self-completing: YUI 3′s light (6.2KB gzipped) seed file can serve as the starting point for any implementation. As long as this seed file is present on the page, you can load any module in the library on the fly. And all modules brought into the page via the built-in loader are done so via combo-handled, non-blocking HTTP requests. This makes loading the library safe, easy and fast.
4. Sandboxed: YUI modules are bound to YUI instances when you use() them; this protects you against changes that might happen later in the page’s lifecycle. (In other words, if someone blows away a module you’re using after you’ve created your YUI instance, your code won’t be affected.)

The code we’re shipping today in 3.0.0 is the same code that drives the new Yahoo! Home Page, and it goes out with confidence that it has been exercised vigorously and at scale. The team is thrilled to be sharing it with you today for the first time in a production-ready release.

Writing Your First YUI 3 App in 3 Easy Steps:

One of the goals of the YUI 3 redesign was to make it easy to use without sacrificing power, performance and configurability. You can have your first YUI 3 app running in less than a minute following three simple steps.

Step 1: Put the YUI seed file on the page, pulling down a slim 6.2KB script file off of the Yahoo CDN:

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

Step 2: Make use of any YUI module or submodule. The seed file will take care of calculating your dependencies and loading any additional scripts you need in (usually) a single combo-handled, non-blocking HTTP request. So, you can use the Drag & Drop plugin to make an element draggable like this:

<div id="demo">I'm draggable.</div>

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('dd-plugin', function(Y) {
    Y.one('#demo').plug(Y.Plugin.Drag);
});
</script>

Step 3: There is no step 3. Relax, grab a soda. Work on your short game. Life is good.

YUI 3: use() Anything, But Not Everything

YUI 3′s simplicity of use (particularly in its ability to use() any module with intrinsic, efficient loading) is paired with new levels of power and control.

For example, one of the characteristics you’ll find throughout the YUI 3 project is an emphasis on granularity. We’ve worked hard to take structures that were monolithic in YUI 2 and break them down into smaller packages in YUI 3. As a result, you’ll find that many modules — component-level packages like IO or Animation — are comprised of various submodules. Usually, all you’ll need is the base submodule.

Charting the evolution of components from YUI 2 to YUI 3 tends to yield visualizations like this one for DataSource (comparing gzipped filesizes):

Because any given DataSource implementation is likely to need only one slender submodule from the DataSource family, the savings in terms of performance and K-weight — especially for complex implementations — are often substantial.

Take the time to explore the Dependency Configurator as you’re setting up your YUI().use() statements. Instead of picking top-level modules, explore the submodule structures and see if the featureset you need is encompassed in a submodule. You may find yourself using modules like io-base instead of io and anim-base instead of anim — and saving yourself a lot of K-weight in the process.

YUI Website Updates

Along with the promotion of YUI 3 to general availability with today’s release, we’ve updated the YUI website to better support the growing communities using both YUI 2 and YUI 3. Today, when you visit YUI on the Yahoo! Developer Network you’ll find a meta-page with project-wide links along with direct links into the YUI 2 and YUI 3 areas of the site.

Meanwhile, we continue to build out our project-tracking and forums platform on YUILibrary.com and host the YUI project source code for forking and contributions on GitHub You can also find a lot of YUI folks hanging out in #YUI on Freenode; feel free to drop in and join the conversation as you explore YUI 3.0.0.

Find conversations: bloglines | technorati

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

YUI Theater — Tom Preston-Werner, Chris Wanstrath and Scott Chacon: “Git, GitHub and Social Coding”

Dav invited the GitHub team down to Yahoo! recently to talk about one of our favorite subjects (Git) and one of our favorite sites (GitHub). Tom Preston-Werner, Chris Wanstrath and Scott Chacon all stopped by and conducted an excellent tag-team tech talk. Video from that session is now up on YUI Theater with a full transcript. Thanks to the GitHub guys for coming down and letting us share this content with everyone on video.

If the embed below doesn’t show up in your RSS reader-of-choice, be sure to click through for the high-res, transcripted video page:

• Download video (m4v)
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Nicholas C. Zakas: Scalable JavaScript Application Architecture
• Isaac Schlueter and Matt Hackett: Server-Side JavaScript
• Douglas Crockford: The JSON Saga
• Jonathan LeBlanc: YQL and YUI
• Satyen Desai: YUI3: Design Goals and Architecture

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

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

BayJax Meetup October 7 at Yahoo: Brad Neuberg on HTML 5, David Storey and Andreas Bovens on Opera

The BayJax meetup for October will be held at Yahoo! once again and features another outstanding slate of speakers. Brad Neuberg from Google’s Developer Program will be here to provide “An Introduction to HTML 5″, and he’ll touch on his his most recent work on SVG. David Storey and Andreas Bovens from Opera will be here to delver a talk entitled “10 Essential Things You Should Know about supporting Opera.”

The event starts at 6 p.m. (pizza and beer) with the talks starting at 7 p.m. Attendance is free, but seating is limited — please sign up on the BayJax Meetup page.

Video from last month’s meetup is on YUIBlog; Douglas Crockford’s “The JSON Saga”, part of the July program, is also available on YUI Theater.

Find conversations: bloglines | technorati

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

Open Hack Day NYC, October 9/10 2009

For the past few years, one of our favorite Yahoo events has been Open Hack Day. From worn out hackers napping in the Official YUI Radio Flyer back in 2006 to the hair-raising quantities of Red Bull and hacker food we’ve seen consumed in the years since, the event has always brought out the best in Yahoo! and the developers who come to invent cool stuff.

This year, the Yahoo Developer Network‘s Havi Hoffman has been leading the charge, and the event is being staged near Times Square in New York. From the YUI engineering team, Isaac Schlueter will be there giving a talk on the YUI 3 toolkit and how to think through a project making use of it. Clay Shirky will be keynoting — one of the truly singular thinkers in the technosphere. And there will be a host of other great speakers.

And it’s a Yahoo! Hack Day, which means it will be interesting, surprising, and serendipitous. We hope you’ll consider joining us as we renew the tradition.

From YDN:

On Friday, The Developer Conference opens with a keynote by Clay Shirky. A day of tech talks and hands-on workshops will cover a range of open technologies including the Yahoo! Application Platform and Social APIs, YQL, and Connected TV. Our 24-hour Hack session kicks off Friday afternoon. On Saturday, hackers will demo their hacks for a chance at glory and cool prizes.

Register to request an spot. Space is limited. icanhaz.com/yahoohacknyc

Learn more: Watch the Open Hack NYC trailer.

Find conversations: bloglines | technorati

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

YUI Theater: BayJax Tech Talks from Nicholas Zakas, Isaac Schlueter, and Matt Hackett

We had a terrific September meeting of the BayJax group here at Yahoo! a few weeks ago, and videos are now ready from those sessions. If you’re viewing this post in an RSS reader, you may need to click through to watch the videos (the downloadable versions are much lower-resolution and formatted for iPod/iPhone playback). For best results, toggle into full-screen mode.

Nicholas Zakas: “Scalable JavaScript Application Architecture”

• Download video (m4v)

Isaac Schlueter and Matt Hackett: “Server-Side JavaScript”

• Download video (m4v)

Other Recent YUI Theater Videos:

• Tom Preston-Werner, Chris Wanstrath and Scott Chacon: Git, GitHub and Social Coding
• Douglas Crockford: The JSON Saga
• Jonathan LeBlanc: YQL and YUI
• Satyen Desai: YUI3: Design Goals and Architecture

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

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

YUI’s Todd Kloots in London for Accessibility/ARIA Tech Talk on Nov. 17

Yahoo! accessibility specialist Todd Kloots will be in London in November for a tech talk hosted by Skills Matter. The talk, “More Accessible User Interfaces with ARIA,” will offer practical tips and design patterns for using ARIA to create accessible user interfaces that work across all of the various combinations of browsers and assistive technology that support ARIA.

The event is free; you can register on the Skills Matter website.

If you can’t wait until November to start diving into ARIA, Todd has you covered with a good library of blog posts and tech videos on the subject.

Todd Kloots: "Developing Accessible Widgets Using ARIA" @ Yahoo! Video

Find conversations: bloglines | technorati

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