Yahoo! User Interface Blog » YUI Theater

YUI Theater — Dav Glass: “Rich Text Editing with YUI”

Eric Miraglia — Mon, 14 Apr 2008 15:48:24 +0000

Dav Glass, author of the YUI Rich Text Editor (as well as Resize, ImageCropper, and Layout Manager), gave a talk at Yahoo! last week about rich text editing in YUI.

In this talk, Dav covers three key topics:

Implementing the light Simple Editor;
Adding the rich elements that are important to you, all the way up to the full Editor implementation with its rich buttons and menus;
Hacking the editor and the toolbar.

The presentation materials, including the deck and all links discussed in the video, are available from Dav’s website.

download (m4v)

Subscribing to YUI Theater:

Christian Heilmann’s Talk on YUI at GeekUp Leeds

Eric Miraglia — Tue, 26 Feb 2008 18:34:53 +0000

Yahoo UK technical evangelist Christian Heilmann made his way to Leeds last week to give a talk on YUI for the GeekUp folks. The Northcast web podcast team has video of that talk online if you’d like to take a look. They did a fantastic job with their pre/post-roll — not too many tech videos show you the beer being dispensed prior to the talk. Don’t think that we at the YUI Theater aren’t taking notice!

You can:

YDN Theater — Julien Lecomte: “High Performance Ajax Applications”

Eric Miraglia — Thu, 20 Dec 2007 17:23:33 +0000

Julien Lecomte, author of the YUI Compressor and the YUI Browser History Manager, recently gave a talk at Yahoo on the creation of high-performance DHTML applications.

In this talk, Julien covers several major performance topics:

Developing for high performance
High performance page load
High performance JavaScript
High performance DHTML
High performance layout and CSS
High performance Ajax
Performance measurement tools

Julien was kind enough to let us shoot video, and Ricky Montalvo from the Yahoo! Developer Network did the editing. I know Julien would love to hear your questions and feedback in the comments section.

download (m4v)

Subscribing to YUI Theater:

An inside look at the Pattern Library

Christian Crumlish — Fri, 07 Dec 2007 19:06:30 +0000

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.

YDN Theater — Douglas Crockford: “The State of Ajax”

Eric Miraglia — Wed, 07 Nov 2007 01:50:55 +0000

We’ve been posting Douglas’s talks here on YUIBlog for awhile now, and we’re happy to carry on this tradition with his latest presentation, “The State of Ajax”. In this session, Douglas looks at Ajax in its historical context to help focus attention on the trends and traditions out of which Ajax has grown. He then turns to the virtues and vulnerabilities of Ajax as it’s currently embodied on the web, including in manifestations like mashups:

One of the things that Ajax has enabled are mashups, and mashups are the most interesting innovation in software development in at least 20 years. Mashups are the fulfillment of the promise of compenent architecture and highly reusable modules. Mashups are great, providing a whole new class of interactivity and value. Unfortunately, mashups are insecure, so when we’re designing mashups now we have to be careful that the mashups not have access to any confidential information. And it turns out every page contains confidential information, so mashups as currently practiced in the browser are inherently insecure. Security is a big problem in the web. I think it’s our no. 1 big problem. The web is an exploit waiting to happen.

In short, Douglas argues, the browser needs to go forward for the web to go forward. And we have a long way to go: “We’re so far from state of the art,” he says, “we can’t even see the state of the art from here.” Without further ado:

download (m4v)

Special thanks to Ricky Montalvo, videographer for the new YDN Theater (a successor to YUI Theater), for shooting and editing Douglas’s talk.

Subscribing to YUI Theater:

YUI Theater — PPK on the Professionalization of Frontend Engineering

Eric Miraglia — Mon, 22 Oct 2007 14:55:25 +0000

Peter-Paul Koch (PPK) is one of the best-known figures in the world of frontend engineering because over the years he has tirelessly tilted against the windmills of browser quirks. His quirksmode blog has the canonical articles on many subjects; for example, if you want to find out how events differ across browsers, PPK’s event compatibility tables are an essential reference. Having the patience to do the research and the generosity to share his findings have been the hallmarks of PPK’s work as a blogger-engineer.

In what looks to be an even more significant second act, PPK has embarked recently on a project to create a professional organization for frontend engineers in his native Holland. The organization is called “Fronteers” (frontend engineers); he has documented the project on his blog and has more recently been out at conferences speaking to his fellow frontend engineers about the concept.

At Nate’s invitation, PPK stopped by Yahoo! last week to tell us about Fronteers and its intended role in professionalizing the discipline in Holland. PPK was kind enough to allow us to record the event and share it on YUI Theater. If you have comments or questions about the Fronteers concept, I’m sure he’d love to hear from you in the comments here or on his own blog.

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

Subscribing to YUI Theater:

YUI Theater — Steve Souders: “High Performance Web Sites: 14 Rules For Faster Pages”

Eric Miraglia — Tue, 04 Sep 2007 15:36:34 +0000

Steve Souders is Yahoo’s chief guru in the art and science of web performance and the author of the YSlow plugin for Firebug; he is the author of High Performance Web Sites, a forthcoming title from O’Reilly (bonus points if you can guess which animal O’Reilly’s editors chose for the cover of this one without looking at the picture to the right…). For the past three years, Steve has led a team investigating the root causes of poor page performance and applying the lessons learned to Yahoo!’s high-traffic, media-rich properties.

Over the past year, Steve has worked with Tenni Theurer (author of a four-part YUIBlog series on performance: part one | part two | part three | part four) and their Exceptional Performance team to hone the message. Last week, Steve reprised at Yahoo his recent OSCON talk which is derived from the past three years of research.

The details of this research are documented in Tenni’s articles (linked above) and in the Exceptional Performance section of the Yahoo! Developer Network website, so I won’t reiterate those here. Many thanks to Steve for his continuing advocacy on this subject and for allowing us to sharing his talk on YUI Theater.

This video 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).

YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong”

Eric Miraglia — Wed, 29 Aug 2007 08:11:31 +0000

Joseph Smarr is the Chief Platform Architect at Plaxo, Inc., where he’s led the engineering of Plaxo’s address-book integration application. In the course of building Plaxo 3.0, which involved an ambitious foray into rich internet application design, Joseph and learned a host of lessons about the importance of performance and the means by which it can be achieved. Many of those lessons (”premature optimization is the root of all evil”) will be familiar. But some run contrary to what are commonly thought of as best practice in frontend engineering — for example, the Plaxo team found that in some cases they could achieve substantial gains by attaching event handlers inline using DOM level 0 syntax (e.g.

) rather than attaching them via DOM level 2’s favored addListener.

In sum, Joseph argues for a four-point approach to achieving maximum performance in your web-app:

Be lazy: Don’t load or do things before you need to; maybe you won’t need to load or do them at all.
Be responsive: Make things happen quickly. If you can shave 100ms off of an interaction by responding to a mousedown event instead of a click event, do it.
Be pragmatic: Frontend engineering is hard enough. Don’t make it harder than it needs to be.
Be vigilant: Blank web pages are fast. Web pages become slow because you put stuff in them; slowness is your resonsibility. Vigilance is required to prevent slowness.

Joseph visited Yahoo! this week to reprise his recent talk from OSCON in which he enumerates these lessons and fleshes them out with practical detail and the wisdom of experience. Our thanks to Joseph for the visit and for allowing us to share his presentation publicly on YUI Theater.

Joseph also features in a video this week from the ScobleShow on PodTech (iPod compatible download), where he discusses some upcoming Plaxo features including an online identity aggregator based on microformats.

YUI Theater — Matt Mlinac: “The YUI ImageLoader Utility”

Eric Miraglia — Tue, 21 Aug 2007 15:56:17 +0000

One of the new components in YUI version 2.3.0 is the ImageLoader Utility (User’s Guide; examples; Cheat Sheet), an experimental component written by Yahoo! Travel engineer Matt Mlinac that allows you to defer the loading of some images during the initial page load.

ImageLoader operates on the premise that image data for some images is unnecessary at the initial paint of the page, usually for one of two reasons:

The image is “below the fold” — that is, outside of the viewport;
The image is in the DOM but will not be made visible until some user interaction takes place, as is the case in some TabView implementations.

ImageLoader allows you to withhold the src attribute of images (which prevents them from loading, obviously) while still supplying other accessibility-related attributes like alt and longdesc. ImageLoader provides a “foldConditional” property that automatically senses whether images are in the viewport, enabling easy implementation of the simplest image deferral scenario. In all scenarios, ImageLoader allows you to define specific triggers that cause image data to load. Common triggers include the window’s scroll event (which can bring “below-the-fold” images into view), the user mousing over a control that might reveal deferred images in a widget, and so on.

In this 9-minute video, Matt talks through some of those scenarios, walks through three examples, and introduces you to basic code patterns to get you started evaluating this interesting component.

While there are non-trivial drawbacks to withholding the src attribute from images, the savings in overall K-weight at initial pageload can be dramatic for some implementations. The least-obtrusive way to implement ImageLoader is to provide all visitors with image src attributes on the first visit to your site and then, if you determine that a given user has JavaScript enabled, begin applying ImageLoader (and withholding src attributes) on subsequent page views. That said, there are obviously some implementations where ImageLoader is a better fit than others, and for some the objection to withholding the src attribute under any circumstances is too much to overcome. For sites that rely on the SEO characteristics that obtain when search spiders can match image tag attribute data to image source URLs, the ImageLoader approach would be detrimental. We’ve released ImageLoader as an experimental component and we’re interested to hear your feedback on the utility and its intrinsic assumptions in the YUI community forums.

YUI Theater — Shawn Henry: “Web Content Accessibility Guidelines Update”

Tom Hughes-Croucher — Wed, 15 Aug 2007 17:33:09 +0000

This video is also available in a downloadable .mp4 format.

Lots of the work in technology that we do is based on standards. In the Web world many standards such as HTML, CSS and many more have been produced by the World Wide Web Consortium (W3C). Shawn Lawton Henry gave us an update on the standards produced by W3C’s Web Accessibility Initiative at Yahoo’s European headquarters in London. Where the Web Content Accessibility Guidelines (WCAG) 1.0 are very precise and contain a number of technical requirements that might be outdated, WCAG 2.0 takes a different approach. WCAG 2.0 takes a much more user-oriented approach. In her presentation, Shawn looks at the changes to WCAG as well as some of the other Accessibility standards produced by the W3C. Most of all she asks "how can I build more accessible sites?" so we can make the web a more friendly place.

A transcript of Shawn’s presentation is available on the WAI website. Many thanks to Shawn for allowing us to record the session and share it on YUI Theater.

Yahoo! User Interface Blog » YUI Theater

YUI Theater — Dav Glass: “Rich Text Editing with YUI”

In Case You Missed…

Subscribing to YUI Theater:

Christian Heilmann’s Talk on YUI at GeekUp Leeds

YDN Theater — Julien Lecomte: “High Performance Ajax Applications”

In Case You Missed…

Subscribing to YUI Theater:

An inside look at the Pattern Library

YDN Theater — Douglas Crockford: “The State of Ajax”

In Case You Missed…

Subscribing to YUI Theater:

YUI Theater — PPK on the Professionalization of Frontend Engineering

In Case You Missed…

Subscribing to YUI Theater:

YUI Theater — Steve Souders: “High Performance Web Sites: 14 Rules For Faster Pages”

In Case You Missed…

YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong”

In Case You Missed…

YUI Theater — Matt Mlinac: “The YUI ImageLoader Utility”

In Case You Missed…

YUI Theater — Shawn Henry: “Web Content Accessibility Guidelines Update”

Links: