yuiblog.com Blog

HackDay06: A Photo Slide Show

Allen Rabinovich of the Yahoo Flash Platform Team put together this Flash container which is pulling HackDay06 photos from Flickr and running through them in a slide show. Park your browser here and you can watch the event unfold over the next few days. Curious about how to use Flash with Yahoo APIs? Allen and Chuck Freedman are giving a workshop tomorrw on how to do just that!

Find conversations: bloglines | technorati

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

Yahoo! Developer Day Sept. 29: Speaker & Workshop Schedule

Yahoo! is abuzz with excitement about the upcoming Developer Day/Hack Day, open to the public (request an invitation here), next Friday and Saturday (9/29-9/30). Rumors have leaked about mind-bendingly cool musical guests, fabulous prizes, and hacks coming from far and wide (eg, Australia!).

I can’t confirm any rumors today (check out the event’s blog to stay up-to-date on those), but I can confirm the full schedule for Friday’s workshops and sessions. Note: You can click on sessions in the schedule below for more information about individual speakers and topics.

Obviously, there’s a lot in store for those of you who are planning to drop by for the Developer Day talks during the day on Friday (note: you can request an invitation for that part of the event only if you know you won’t be able to stay on into the weekend). The speaker includes talks by some of Yahoo!s most accomplished engineers and the sessions cover a wide range of APIs and other hack-related topics. YUI small-group, hands-on sessions fill one room and spill into a second, and our Matt Sweeney is giving one of the featured talks (now scheduled for 2:30 p.m.). See you Friday…

Find conversations: bloglines | technorati

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

Tags: Yahoo, Hack Day, Developer Day, YUI, Yahoo User Interface Library, Bradely Horowitz, Ryan Kennedy, Andy Baio, Nate Koechley, Vince Maniago, Mirek Grymuza, Chuck Freedman, Douglas Crockford, Matt Sweeney, Adam Moore, Cal Henderson, Todd Kloots, Kent Brewster, Steve Souders, Tenni Theurer, Rasmus Lerdorf, Steven Peterson, Jeannie Yang, Gordon Luk, Iain Lamb, Thomas S. Sha, Allen Rabinovich

YUI’s Matt Sweeney and Hands-on YUI Workshops at Yahoo! Developer Day/Hack Day September 29-30 in Sunnyvale

YUI Developer (and after-hours DJ) Matt Sweeney will be among the featured speakers at Yahoo!’s first Developer Day/Public Hack Day on September 29, 2006. (Photo: Scott Schiller.)

As you’ve no doubt heard, Yahoo! is hosting its first-ever open Hack Day/Developer Day in two weeks. The focus of the Developer Day proceedings is on software created with (and for) an ecosystem of API-driven, web-accessible applications and services. Featured speakers during the Friday, Sept. 29, Developer Day event include Bradley Horowitz talking about the Yahoo! API ecosystem and Iain Lamb (formerly of Oddpost) talking about the new portfolio of skills required to be a "hacker of the ecosystem."

Also addressing the conference in the featured-speakers track will be YUI developer Matt Sweeney, author of the YUI Dom Collection and YUI Animation Utility. Matt’s 9 a.m. talk, "Web 2.0: Getting It Right the Second Time Around," will focus on the role that frontend archtecture (x/html, css, JavaScript) plays in creating web applications that perform well in the ecosystem, making the sharing and reuse of information practical, scalable, and accessible across different (and unanticipated) contexts.

The Developer Day schedule features multiple concurrent tracks. In addition to the featured-speakers track, YUI authors will be hosting hands-on introductions to the YUI Library throughout the day on Friday. These are "getting-started" sessions in which developers walk participants through basic use cases for various library components. Here’s the tentative schedule for Friday’s workshops:

• 9 a.m. Event Utility, Adam Moore
• 10 a.m. CSS Reset, Fonts and Grids, Nate Koechley
• 11 a.m. Animation Utility, Matt Sweeney
• 2 p.m. Menu Control, Todd Kloots
• 3 p.m. Connection Manager, Thomas Sha
• 4 p.m. Container (Panel & Dialog Controls), Steven Peterson

Several YUI team members will also be on hand Saturday for the open Hack Day, to be capped with presentations and awards emceed by the estimable Mike Arrington of TechCrunch fame. If your hack uses YUI, we’ll be there to help you work through any issues that might come up. The internal Hack Days at Yahoo! have been incredible experiences…this first open session promises to be even more diverse and compelling.

I hope you’ll come join us for this unique opportunity to meet and engage with the terrific developers behind the YUI Library. The Hack Day website (hackday.org) is taking requests for attendance (see the form at the bottom of the Hack Day page); sign up now to get on the list for additional information about the schedule, attendance and workshop participation.

This is a big event for those of us involved with YUI and for Yahoo! generally; developers from throughout the Yahoo! ecosystem (including Cal Henderson from Flickr, engineers from Yahoo! Maps, JSON inventor Douglas Crockford, PHP creator Rasmus Lerdorf, and many more) will be speaking on development in the still-emerging mashup software culture.

Find conversations: bloglines | technorati

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

Tags: yahoo, hack day, developer day, yui, yahoo user interface library, matt sweeney, cal henderson, douglas crockford, rasmus lerdof, iain lamb

Graded Browser Support: Update, Roadmap, and FAQ

We published a paper titled Graded Browser Support (GBS) alongside the YUI Library release in February. Called “logical and simple, but also profoundly practical” by the Web Standards Project’s (WaSP) Group Lead, GBS rejects the customary “you must be this tall to ride” approach and instead defines three grades of support. This makes it possible to support every desktop browser – at some grade – while bringing sanity and predictability to the development and quality assurance (QA) testing processes.

While the GBS concept is durable, the granting of A-grade support to a particular user agent (browser) is provisional. On the Yahoo! Developer Network, you can read the definitive GBS article and reference our A-grade chart which is updated quarterly. (A-grade support is the highest grade of support. The YUI Library proudly features complete A-grade support.)

In the next sections we will report on changes in this quarter’s update, forecast changes we’re considering for next quarter, and answer several frequently asked questions.

Changes This Quarter (2006-Q3)

Initiation of A-grade support for Opera 9.0x; discontinuation of A-grade support for Opera’s 8.x and earlier branches: Now that Opera 9.0x has been released and adopted, we have discontinued A-grade support for older versions.

Discontinuation of A-grade support for Safari < 2.x: We have discontinued A-grade support for all versions of Safari prior to the 2.x branch.

These changes are reflected on the A-grade support chart on the Yahoo! Developer Network site.

Potential Changes for Next Quarter (2006-Q4)

Discontinuation of A-grade support for IE 5.5: We see a small but significant percentage of traffic still using IE5.5, especially in Asia. However, this number is steadily dropping, and combined with the upcoming rollout of IE7 we expect to discontinue A-grade support for IE5.5 across all Windows flavors in the 4th quarter.

Discontinuation of A-grade support for Firefox 1.0.x: As a majority of users migrate to Firefox’s 1.5x and 2.0x branches, we plan to discontinue A-grade support for Firefox 1.0x across all operating systems.

Discontinuation of A-grade support for Mozilla Suite and Netscape: Mozilla and Netscape continue to maintain their Mozilla Application Suite and Netscape Navigator product lines. We have discontinued A-grade support for these two browsers because they share the Gecko rendering engine with Mozilla’s Firefox. We have not noticed functional differences between Gecko’s implementation in Firefox – which receives A-grade support – and these two brands.

Frequently Asked Questions

Question: Who determines which browsers receive A-grade support, and how is that decision made?

I drive this decision making process in consultation with my team and other stakeholders. I weigh a wide variety of data, as well as more general considerations and objectives.

Internal Stats: From our server logs, we study which browsers are used by our visitors. Most importantly we look at the global average, however we also slice this data in several ways: by % of page views, by % of users, by property (e.g., Y!News), by country, and by demographic.

Public Stats: We monitor publicly available stats such as those from Hitwise and Web Side Story. However, I believe our internal stats are an accurate sample of overall Internet traffic because of our breadth of services and content types and our overall scale and penetration.

Economic and Strategic Factors: Beyond raw statistics, we consider economic and strategic factors such as the impact on development time and the type of product development that the capabilities (or lack thereof) of the platform afford. Also, since every A-grade browser must be part of the QA process, we are mindful of the cost of each incremental addition to the A-grade list.

Rendering Engines: For example, by assessing Gecko (inside Firefox) and Trident (within IE), we can gain inexpensive coverage (X-grade support) of derivative browsers such as Flock and Maxthon, respectively.

Healthy Ecosystem: Broad and inclusive browser support fosters a healthy and vibrant browser ecosystem, which we believe is a Good Thing. On one hand, this may cultivate competition and innovation by supporting a wide range of browsers. On the other hand, it may encourage consistent, compatible, and collaborative innovation by browser vendors because we tend to develop against only the capabilities that shared across all A-grade browsers.

Question: Should different countries and projects define a different suite of A-grade browsers?

A globally consistent approach advances our goal of maximum availability and accessibility. Even if data indicate a particular distribution of browser usage in a particular country, welcoming users from anywhere on the globe is optimal. This is a best practice and recommendation, but not a mandate. Further, the reduction of visual and functional “cliffs” between sites and products can encourage user exploration. The same concept applies to project-specific determinations.

Question: “Why is the chart updated quarterly?”

A key benefit of GBS is the sanity it can bring to QA and development processes. If the A-grade membership shifts too quickly, these benefits disappear. Quarterly updates balance responsiveness to market conditions with a reduction in development environment volatility.

Question: “What about mobile devices?”

While mobile and living room devices can benefit from a GBS approach, this article and chart address desktop browsers only.

Question: “What grade of support do micro-versions that are released in the time between GBS updates receive? How should the “.x” notation be read?”

The dot-x notation (e.g., Opera 9.0x) provides flexibility between quarterly GBS updates. Because GBS is not auto-updating (i.e., to receive A-grade support a browser must be specifically identified on the chart), we have found it useful to not be overly precise in our browser version identification in some cases.

Question: This sounds great, but why does Yahoo! site X not work on my browser?

Graded Browser Support is our centrally recommended policy, however not all sites have adopted it yet. Some properties have legacy code that makes this difficult, while others use a technology piece that presents challenges. That said, adoption of GBS continues, and many of our sites that do not currently support all A-grade browsers are moving towards it.

Conclusion

I believe the benefits of GBS are clear and significant. By updating the A-grade chart quarterly it remains relevant.

Find conversations: bloglines | technorati

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

10 Cool Things About The New Yahoo! Photos

The New Yahoo! Photos has a lot of cool features not commonly found on the web. Drag and drop and inline editing makes getting things done with your photos fast and easy, and it just feels more like a rich application.

To make the new stuff work, we had to make browsers jump through some hoops. This post is the first of a few that will explore some of the big ideas behind the scenes.

(Meanwhile, we hope you’ll take it for a spin to see for yourself.)

1. Drag And Drop/Selection Model

With this new version of Yahoo! Photos, the old way of selecting photos using checkboxes is as out of style as using tables for layout! Let’s say you were viewing album A, and wanted to copy some photos from there to album B. Like on a desktop, you must first make a selection.

You can simply click and draw a selection rectangle around the photos you’d like to copy, or alternately select photos like you would on a desktop using the CTRL or Shift keys. Once selected, you can use CTRL-C to copy or simpler yet, just drag the photos to the album on the list at left; confirm the copy, and you’re done!

A “Copy Photos” dialog

The selection model is a core part of content management for owners on the New Yahoo! Photos, as well as for guests and friends browsing and viewing photos. It is easy with the mouse, and when combined with keyboard shortcuts, a powerful way of selecting a choice number of photos from a large collection to perform operations on such as viewing a slideshow, emailing to friends or ordering prints.

Photos may also be rearranged within albums, similar to the way they can be copied; users may simply select, then drag and drop the photos to their new position within the page, and the new order will be saved.

Rearranging a selection of photos, about to drop in new location (red marks for illustration)

2. Keyboard Shortcuts

Desktop applications implement shortcuts to commonly-used menu items, such as CTRL-A or CTRL-C (Command key instead of CTRL for Mac,) which typically are “Select All” and “Copy”, respectively.

This applies to the new Photos as well, which uses some keyboard shortcuts to make common tasks more accessible. While in a thumbnail view, you can select all of the photos by using CTRL-A, or copy a selection of photos to an album by using CTRL-C (we’ll show you a “copy to..” dialog at that point.)

3. Inline Editing

One common interaction that some may feel has been missing from the web, is inline editing. When viewing your own photos on the New Yahoo! Photos, you can easily edit some of your photo data inline without having to wait for the page to reload. If you don’t like the name of a photo, simply click on its name, type a new one and click elsewhere or push Enter – just like you’re used to on your desktop. You can also add comments and assign ratings inline when viewing a photo in detail, again without reloading the page.

Inline editing in action.

4. New User Tips

Many of the new features such as the selection model and drag and drop in the new Yahoo! Photos may not be new to computer users, but our findings were that people did not expect to find these sort of features on the web. For this reason, we have the “New User Tips” guide which serves as an assistant of sorts, educating first-time users about what they can do with the new site.

The first time a new user logs into Yahoo! Photos, the “New User Tips” tutorial begins and explains some of the key new features with visual pointers overlaid on top of the “live” UI. This is similar to the “tour” feature as shown on the recently-redesigned Yahoo! front page.

5. Animation and Eye Candy

The New Yahoo! Photos was designed to both “look good and work well,” including some stylistic flourishes and pleasing UI effects such as animation, fading transitions, modal dialogs and drop shadows.

In the case of dragging a selection of photos within the UI, an animation effect is used when the user starts dragging; the photos “zoom and shrink” towards the cursor as though it were a vacuum pulling the photos inward, so that they group together as miniature thumbnails underneath the cursor. (This is accomplished using Javascript, which repetitively modifies the position and size of each photo thumbnail until the animation is complete.)

The effect, while visually pleasing and even entertaining, has two practical uses:

1. It prevents a large, full-size replica of content (cloned, “ghosted” thumbnails) from moving around the screen while the user is dragging, and creating “giant scrollbars” that disrupt the experience. On the desktop, moving a full-size replica around is not an issue because of the lack of scrollbars; on the web, we wanted a way to display a potentially-large selection of photos without causing the user’s browser to adjust its scrollbars to accommodate the extra content.
2. It’s more expensive (i.e. slower) for the browser to redraw larger areas of content at once.

The earliest prototypes of the New Yahoo! Photos UI did not have the animation sequence when beginning a drag operation, but the lack of visual transition between “selected” and “dragging minimized under the cursor” looked awkward. After we added the animation effect, the UI felt more playful and fun, so it stayed.

6. Progressive Loading

People are taking and sharing more and more photos, and our collections are growing into the thousands of photos. To make managing big photo collections as easy as possible, we had to figure out a way to display lots of thumbnails while keeping the site’s browser-based UI snappy.

The New Yahoo! Photos strikes a balance between scrolling, pagination, browser rendering capabilities, and memory limitations and uses a technique of “progressive loading,” effectively copying and inserting an empty “template” for a page of photos, then loading the photo information (metadata and thumbnail images) and adding them to the page on demand. It is truly on-demand in the sense that photos and related data area not loaded until their “containers” are scrolled into view, which keeps the UI feeling responsive. (More on the details of this technique in a forthcoming post.)

7. Upload Tools

Uploading is the first step to take when you’re using a photo site to share or print. Since most people want to share many photos at once, it’s crucial for a site like Yahoo! Photos to make uploading large batches of photos easy.

To do that, the New Yahoo! Photos provides an Easy Upload Tool that comes in two flavors: a Firefox extension (that works on PC and Mac) and an ActiveX control for Internet Explorer on the PC. Both flavors of the tool share the same Javascript client-side code and UI. This approach allowed us to provide a consistent user experience regardless of browser, and reduces the maintenance cost and testing overhead. A standard form-based uploader is provided for other browsers.

Third-party developers have started writing upload tools that use the Yahoo! Photos API. Michael Galloway’s cool iPhoto plug-in is one of the first to appear. Documentation for the public API should be posted on http://developer.yahoo.com shortly if you’re interested in writing something.

8. Messenger Integration

The latest version of Yahoo! Messenger pulls in our photo picker tool to allow users to quickly share each others’ favorite shots from Yahoo! Photos right within your IM window.

9. Target Store Locator

When ordering prints of your photos in the US, you can choose to pick them up at your local Target store, as well as send them to a Target store close to a friend or family member across the country. Locating the closest Target store is now a lot easier with the draggable Yahoo! Maps mashup created by our partners at EZ Prints.

10. …And All That Ajax: YUI Connection Manager

“What’s Ajax?”, Amy Hoy asks in her humourous cheatsheet (pdf link) – “Buzzword Bingo,” she says: “Everyone’s talking about Ajax, and practically nobody actually has a clue as to what it actually is”. She summarizes nicely in saying, “No server requests? It Ain’t Ajax”.

If I were to try to answer Amy’s question, I’d say the YUI Connection Manager, part of the Yahoo! User Interface Library, is Ajax. The YUI Connection Manager wraps Javascript’s native xmlHttpRequest object and provides a normalised API which allows data to be retrieved asynchronously, including handler hooks for events such as success and failure. The New Yahoo! Photos uses the Connection Manager extensively for retrieving photo data on demand, performing inline editing on photos (e.g., renaming, copying, deleting or assigning a rating,) loading messaging data to be displayed in modal dialogs and other “inline” functionality which is carried out without reloading the page.

The adoption of the xmlHttpRequest (XHR) object across major modern web browsers has prompted developers to explore dynamic updates (both sending and receiving,) and as a result there has been a renewed interest in Javascript. Because pages now reload less-often due to XHR calls, Javascript is being used to manage the result of these calls – modifying the Document Object Model (DOM) within the browser, updating or creating new content, creating animation effects and transitions to enhance the UI and overall providing an enhanced experience. These techniques, collectively a part of “DHTML,” have been around since the late 1990s, but did not see such wide-spread popularity until the XHR object became a de-facto standard.

While technically not Ajax, javascript animation, dynamic updates, effects and other forms of DHTML have become more mainstream due to the adoption of Ajax. While The New Yahoo! Photos was developed before the YUI Library was available, utilities are now available in this area including animation, drag and drop, positioning and event handling.

Was It Good For You, Too?^*

The New Yahoo! Photos has some powerful new features and desktop-like interactions which are not typically expected on the web; we think you’ll like it. If you don’t have a Yahoo! ID, you can get one and start uploading photos at http://photos.yahoo.com/

This article is one in a multi-part series on the New Yahoo! Photos; in the next article, we will delve into some technical details, including thoughts about performance, troubleshooting and other points of interest.

Scott Schiller is a self-described DHTML + Web Standards Evangelist, Resident DJ and record crate digger. He is one of the Front-end Engineers on Yahoo! Photos, and enjoys combining technical and creative skills in his work.

^* Heading inspiration: alistapart.com

Find conversations: bloglines | technorati

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

Yahoo!’s University Design Expo Creates Student/Employee Mashups

Having worked at Yahoo! for nearly two years, I remain impressed at the company’s ongoing efforts to bring folks from the outside world onto campus. Not only have we brought in big thinkers for various weekly brown bag lunch talks (including amazing individuals from Microsoft, Amazon, LinkedIn, NetSquared, and Technorati), we’ve also reached out to the academic community.

Last week, as one of those efforts, Yahoo! hosted a User Experience Design Expo on campus. We invited some of the top graduate-level students from the following programs:

• New York University, Interactive Telecommunications Program (ITP)
• Royal College of Art, London, England. Computer Related Design program
• UCLA (Media Design)
• ESDI Graphic Design, Rio de Janeiro, Brazil
• California College of Art, Oakland and San Francisco

The Expo was a real-world “mash-up.” Students from around the world shared their latest design thinking with Yahoos from many disciplines. The exchange went both ways, and we shared many of our latest efforts, prototypes and research finding with the students. Both goals seemed on track by the end of Tuesday, as numerous C-level execs sat in on the students’ presentations, as well as chatting more informally at the several “gallery” events.

I was fortunate to be among those chosen to show off some of Yahoo!’s current and upcoming user experience and design projects. Our group showcased behind-the-scenes findings from the new home page, the Mail beta, and the new Photos. I was personally able to share some of our guiding principles used around Personalization on the network. And, as befits any organization participating in the Web 2.0 world, we did our best to field as many questions as possible during the events.

Throughout the event, I was reminded of the dearth of design research available when I was in school. It was refreshing to see that times have changed; many of the students focused on solving actual user needs, and testing their solutions for efficacy. Several of the students’ products and prototypes, in fact, had emerged out of frustrations with existing products or inventive solutions to long-standing needs unaddressed by the current market. Further, these products had been refined and expanded based on user feedback.

By the end of the 2-day event, I think we had successfully exposed a new generation of big thinkers to some of the exciting problems yet to be tackled here at Yahoo!, and, equally importantly, learned a great deal from them. I hope that the conversations and projects shared at the Expo will be just the beginning, and that we see some of these students on campus again…joining the daily dialog that is continually advancing our products.

Find conversations: bloglines | technorati

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

Tags: design, new york university, royal college of art, ucla, ucla media design, esdi, esdi graphic design, cca, california college of art, interactive telecommunications program, design expo, yahoo design expo

YUI Implementation Focus: SugarCRM

Recently I posted some examples of how YUI is being put to use within Yahoo. Another point of interest for those of us involved with the YUI Library and community is how the library is being used outside of Yahoo. Members of the Yahoo! Group YDN-JavaScript, which is the YUI community’s key forum, have shared some great examples of this kind of work. Occasionally, we’ll explore some of those examples here as well to illustrate the kinds of projects for which YUI is being tapped.

SugarCRM, the largest open-source CRM platform with more than 800 customers and 80,000+ downloads per month, became one of the first major web application vendors to deploy YUI when it released its version 4.5 into beta last week (see C|Net’s report, "Open-source firm polishes interface with AJAX" or review recent blog coverage of SugarCRM).

One of the principal enhancements arriving in SugarCRM 4.5 is an elegant, dynamic interface that incorporates a number of useful interaction patterns. Developers Majed Itani, Ajay Gupta, and Wayne Pan (among a team of about 25 total engineers at Sugar) implemented the new interactions using YUI. Pan told us he was about three days into a custom drag and drop implementation when the YUI Library was released as open source in February. "I downloaded YUI and my 300 lines of JavaScript turned into about 10," he said. "I was impressed. It just worked."

The main SugarCRM interface consists of a dashboard on which live configurable "dashlets." With release 4.5, those dashlets can be repositioned on the page using drag and drop. When new dashlets are added (or current ones are dismissed), animation is employed to gradualize the page change and make it more intuitive for the user. The modal DHTML options panel for each dashlet animates down from the top of the screen. When you add new dashlets, your choices are presented in a tree format. The administrative interface also received a major injection of interactive richness. To accomplish all of this, Itani, Gupta and Pan leveraged many of the YUI components: Event, Animation, Connection, Drag & Drop, Container, and TreeView.

To explore SugarCRM’s new interface, visit http://www.sugarcrm.com/crm/demo/45-community-preview.html.

Do you have a YUI implementation that would be of interest to the YUI community? If so, please share your link and post a message to the community forum at YDN-JavaScript, or leave us a message in the comments section below.

Find conversations: bloglines | technorati

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

Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls

The richness revolution on the web is about improving the user experience. A richer interface can feel faster and more responsive because it can bring users closer to their data and to powerful tools for enhancing, filtering, or sharing that data. We add richness to pages to make our applications faster, lighter, and more responsive to the user’s needs.

At the same time, ading richness and interactivity to a web page invariably means adding code complexity. Instead of simply loading the data required to represent a document, we load data related to visual and informational transformations that might take place within the document based on user interactions. This infusion of information (and rules about behavior and presentation related to that information) adds weight to the page — weight on the wire, weight in terms of processing and parsing information and rules, and weight within the browser as it holds all of this richness in memory.

One place where we run up against practical limitations of richness in web applications is in UI controls like TreeView and Menu in which nodal information structures are given easily-navigated UI treatments. A library of 1,000 nodes might live very compactly in a 100×200 pixel space using a Tree or Menu — ten top-level nodes with ten children each yield 100 nodes just in the top two levels; a third level, again with ten children per node, gets us to 1,000.

This compression of data in visual space is one of the powers of richness, but it also highlights the potential for rich UI controls to grow exponentially in their resource consumption. Where a UL with ten links would typically require a trivial amount of memory and rendering power, a Menu with 10 top-level nodes and 1000 nodes in total might increase data load by a few orders of magnitude. And it might increase the complexity of the DOM by just as much, while creating an additional burden of an object model in JavaScript in which every node in the Menu is represented by one or more JavaScript objects.

Both the TreeView and Menu Controls in YUI support strategies for reducing the impact that this added complexity has on initial pageload times and in-page resource consumption. In this article, we’ll review those strategies and look under the covers at how this can be accomplished in the Menu Control.

Continue reading Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls…

Find conversations: bloglines | technorati

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

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Find conversations: bloglines | technorati

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