Yahoo! User Interface Blog (YUIBlog)

The Versatile Button Control

With the release of YUI 2.4.0, there are several new examples designed to demonstrate the Button Control‘s versatility. By default, the Button Control enables the creation of rich, graphical buttons that function like traditional HTML form buttons. Button also seamlessly integrates with both the Overlay and Menu Controls, making it possible to create both menu buttons and split buttons whose menu can be used to display another YUI control. This extends the developer’s toolkit my making it easy to dream up and implement new types of UI controls for web applications.

Menu or Overlay?

Both split buttons and menu buttons incorporate a menu that can be created using either an Overlay or Menu Control. Choose Menu if you want the Button to pop up a traditional menu or a canvas with the default Menu styling. Choose Overlay if you want the basics: a blank canvas with no default style or behaviors — a canvas that can contain any content or UI control. Overlay is also lighter in file size. In either case, you’ll have the flexibility of being able to create the menu using existing HTML or script alone, and both Overlay and Menu provide an <iframe> shim to prevent <select> elements from poking through your Button’s menu in IE 6.

Two Approaches to a Popup Calendar

Two of the new Button Control examples demonstrate how to create a popular control found all over the web: a popup calendar.

• Calendar Menu Button
• Calendar Split Button

The purpose of the first example is to show how easy it is to create a traditional calendar popup implementation by rendering a Calendar Control instance inside the menu of a menu button. The implementation is straightforward, performance-conscious, and less than one hundred lines of code.

The second example takes a slightly new approach to a calendar popup. Using a split button, the button’s face displays the currently selected date, while the other section of the button can be pressed to display a Calendar control. The result is a powerful date picker control that consumes a tiny amount of screen real-estate.

New Useful Combinations

Using the menu as your canvas and the palette of YUI widgets, it is possible to use both the menu button and split button controls to create new UI controls not natively available in HTML, as illustrated by both the Slider Button and Color Picker Button examples. In both examples, the face of the button is used to reflect the current value of the control embedded in the menu. While the slider button example mimics the opacity slider found in Adobe Photoshop, a slider button could also be used to for other purposes. Imagine, for example, a new take a on a rating widget.

* * * * *

If you’ve implemented Button, I’d love to know what you’re using it for. Please share your ideas and links to your implementations in the comments section. Is anything missing for you in the current Button Control? I’d love to hear about that, too.

Find conversations: bloglines | technorati

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

An inside look at the Pattern Library

As the third curator of Yahoo!’s Design Pattern Library I often receive a lot of thanks and praise from website designers and developers for the way we at Yahoo! have offered this resource to the world. I usually try to explain that much of the goodness happened before I came on board and that I can’t really take credit for it, but when my ego needs a boost I just smile and nod.

When Erin Malone and Matt Leacock and others first launched the internal pattern library, they presented a talk at the IA Summit, called Implementing a Pattern Library in the Real World: A Case Study (and subsequently the linked article on the same topic at Boxes and Arrows). Then Erin and Bill Scott took the library to the public on the Yahoo! Developer Network website and Bill Scott “enriched“ the library with tons of Ajax-y goodness, closely tied to the YUI Library.

Since that time, I came on board and I’ve worked on reorganizing the library, updating the patterns, and shepherding a new generation of patterns through our internal refinement and review process, with an eye toward identifying useful social and openness patterns that we can share with the whole Web. So when people come up to me at conferences or find me on mailing lists for information architects and interaction designers frequently they are curious about how the library has evolved in the years since it was founded, what our internal process looks like these days for writing, reviewing, approving, and rating patterns, and how we decide which ones to publish in the open library.

Recently, I gave a talk here at Yahoo! as part of our UED brown-bag series, called The Pattern Library Wants YOU!, intended to update oldtimers on changes and improvements to our process and infrastructure and to orient new designers about the library, and of course to encourage people to get involved. Ricky Montalvo, our ace videographer for YUI Theater and YDN Theater, recorded my talk and edited it together with my slides, and we just spent a week or so removing any too-sensitive information and getting our friendly legal folks to sign off on releasing the talk to the public.

So, without further ado, here is the public version of my talk, which should answer a lot of those questions I’m hearing these days.

Find conversations: bloglines | technorati

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

The Yahoo! Juku

By Nicholas C. Zakas and Nick Fogler

Front end web development has traditionally been viewed as rather "lightweight"engineering. Around the world, companies assumed that anyone could write HTML, and oftentimes software engineers were expected to cobble together the front end of web applications without any real training.

Around four years ago, a shift started to happen in the industry: As web applications became more sophisticated on the front end, big companies such as Yahoo! started to hire people who specialized in these skills. These early professional web developers led the way to today’s discipline of front end engineering.

As the industry has come around to recognize frontend engineering as a vital part of their strategy, the demand for frontend engineers has grown.

Big companies are snapping up the best available talent, while the talent pool has remained relatively small. Colleges and universities, traditionally teaching object-oriented programming in languages such as Java, have little (if any) formal training for front end web development. Whereas new Java developers are being churned out by schools every year, new frontend engineers are not. This squeeze has been felt industry-wide as there are far more frontend jobs than there are qualified people to fill them. At a company like Yahoo!, with a significant number of web sites and applications, this lack of suitable candidates leaves many departments shorthanded.

Earlier this year, a team was formed to investigate potential solutions to this problem. The result of this is the Yahoo! Juku.

What is the Yahoo! Juku?

The vision of the Juku program is to provide top-quality training in frontend technologies (HTML, CSS, JavaScript, and PHP) with the ultimate goal of producing great frontend engineers. Participants are put through 3-4 months of intensive training taught by some of the best frontend engineers at Yahoo!, focusing not just on concepts, but also on best practices in terms of maintainability, accessibility, and performance. Mentors guide the participants throughout the program, answering questions, providing code reviews, and monitoring their progress.

After completing their training, Juku participants are formally assigned to a business unit at Yahoo!. Participants get to learn about various business units through a series of presentations by managers.
The placement is based both on participant preference and business-unit requirements.

The learning doesn’t stop after participants are placed in business units. Yahoo! has a broad pool of talented and experienced frontend engineers who regularly give talks, answer questions, and interact with others in the company for the benefit of everyone. Even experienced frontend engineers find that they learn more about the discipline simply by being around such a talented group of people.

The Selection Process

The Yahoo! Juku selection process is similar to that of any other job at Yahoo!. Candidates are first screened by resumes and then interviewed by a panel of frontend engineers. Since it is expected that candidates will have little web development experience, the focus is more on identifying people with native technical ability, a genuine passion for the discipline, and a demonstrable ability to learn in a fast-paced, intensive environment. Once selected, candidates become full-time Yahoo! employees whose job is to learn.

Though the immediate goal of the Yahoo! Juku is to provide qualified front end engineers to Yahoo!, the long-term goal is much more broad. Ultimately, we want to help grow and evolve the discipline of frontend engineering in the entire industry. Our vision is that the Juku will serve as one model for how this knowledge can be institutionalized, providing colleges and universities with a framework for teaching what the industry needs. We want to bring the discipline of frontend engineering into maturity because it benefits not only Yahoo!, but the Internet as a whole.

The Juku program has a rolling schedule, running several times a year. For information on the next class and how to apply, please contact juku@yahoo-inc.com.

Are you doing something similar at your company? How are you meeting the challenges of finding/developing great frontend engineering talent to meet the needs of your own web-engineering projects? We’d love to hear about your ideas and experiences in the comments.

Find conversations: bloglines | technorati

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

Implementation Focus: Mint.com

Find conversations: bloglines | technorati

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

YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support

We released YUI version 2.4.0 today; it’s available for download and full documentation is up on the YUI website. Here are the all-new components being issued with 2.4.0:

• Selector Utility: Matt Sweeney introduces the Selector Utility Beta in 2.4.0, our first pass at a CSS query engine. Of course, this genre owes a huge debt to Simon Willison, Sam Stephenson, John Resig and many others; most major libraries have now added selector functionality, and there’s an emerging body of work that helps implementers sort out the relative performance profiles of the various tools. The YUI Selector Utility implements much of the CSS Selector syntax as defined by the W3C, including the proposed CSS3 Selector extensions. Matt has provided support for most pseudo-classes, attribute operators, and combinators included in these working drafts. While performance is always a priority for query engines, in this initial beta our primary focus has been on passing test cases to meet the requirements of the CSS3 spec. We think we have the right selector framework to support YUI’s needs going forward, and we’re looking forward to your feedback as this goes out for a beta round.

  

• Charts Control: Josh Tynjala of the Yahoo! Flash Platform team contributes the new YUI Charts Control, a hybrid JavaScript/Flash component that supports bar, line, and pie charts. The Charts Control draws data from the same DataSource Utility that underpins the YUI DataTable Control, making it possible to do combined chart/table visualizations. The Charts Control accepts CSS style information, allowing you to skin the chart itself without touching the underlying .swf file. But if you do want to dig into the Flash side of this project, you can get full access to those assets on the ASTRA site.
• Get Utility: Adam Moore adds another foundational YUI component in the new Get Utility. Get provides an interface for dynamically adding script nodes and CSS link nodes to the page. This is the same engine we use in the YUI Loader Utility; with 2.4.0, we’ve reorganized the functionality and made it available as a separate module. You’ll find the Get Utility useful for loading JavaScript and CSS on an as-needed basis and for proxyless web-services calls where you’re retrieving JSON data.
• Profiler: Nicholas C. Zakas is back in 2.4.0 with a brand-new component, the YUI Profiler. Profiler allows you to target specific code for profiling and to retrieve profiling data programmatically while your application is running — in any A-Grade browser. In combination with Nicholas’s YUI Test Utility, Profiler allows you to build unit tests in which success or failure is predicated on performance benchmarks. Profiler is issued without a visualization layer in 2.4.0, but check out the examples to get a feel for the data that gets rolled up by this tool and how to make use of it.
• JSON Utility: YUI’s newest team member, Luke Smith, contributes an adaptation of Douglas Crockford’s public-domain JSON parse and stringify functionality. You’ll see the JSON Utility at work in the new Charts Control and working in tandem with the Get Utility to support proxyless web-services in AutoComplete.

Beyond these all-new pieces, you’ll find some other goodies throughout the library. Here are some notable ones:

• Button: Todd Kloots celebrates the GA promotion of the YUI Button Control with a set of new examples, including a calendar-menu button, color-picker button, throbber/glowing button, and slider-button.

  

• Calendar: Satyen Desai has added built-in year navigation to the YUI Calendar Control.
• Drag & Drop: Dav Glass enriches the Drag & Drop Utility API for 2.4.0 with a new dragOnly configuration option. If your implementation requires simple drag-to-reposition functionality, this configuration option suppresses the complex targeting and interaction logic that is the most computationally intensive aspect of drag and drop; in those cases, you’ll see significant performance boosts. Note that Satyen has brought support for this option into the Container Family, where you can use it to improve the drag-and-drop performance of Panels and other draggable Containers.
• Rich Text Editor: Dav continues to push the YUI Rich Text Editor in both size and performance. With 2.4.0, you can better control the dependency list, allowing you to shave more than 50% off the overall k-weight of the widget (vs. its 2.3.1 profile) if you don’t need some of the glossier UI elements.

For a full rollup of the changes, see George Puckett’s change manifest posted to the forum. We’ll have more to say about some of the new components here on YUIBlog in the coming weeks. In the meantime, please download the new release and drop by the YUI community forum to let us know what you think.

-Eric

(on behalf of the YUI team: Adam Moore, Dav Glass, George Puckett, Jenny Han Donnelly, Luke Smith, Matt Sweeney, Nate Koechley, Satyen Desai, Thomas Sha and Todd Kloots; and contributors: Josh Tynjala, Matt Mlinac, and Nicholas C. Zakas).

Find conversations: bloglines | technorati

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