YUI Implementations and YUI "In the Wild"

Implementation Focus: OCLC/WorldCat

Thu, 19 Nov 2009 10:33:56 -0800

Fiz Mohamed has worked for OCLC since 2004 where he’s a senior UI/UX (accessible) designer/developer for a number of high profile products and is responsible for a UI Cookbook/Library. A wealth of commercial freelance experience since 1993 has resulted in a wide range of technical and graphical skills. He lead the UI design for the launch of Cinema.com and also was the UI/UX designer for the US National Archives & Records Administration ARC project.

Here at OCLC — a worldwide non-profit library cooperative that provides web visibility for library catalogues around the world — we initially came across YUI while discussing grid frameworks early in 2008. Later that year the subject of JavaScript toolkits arose, and we recalled YUI as part of the investigation for one of our products. We looked at a number of other popular toolkits, and we tried to approach the toolkits from the point of view of both a developer and designer. While it was a close call between some, I was very impressed with the YUI, especially with the YUI 3 intro at that time which showed that Yahoo’s developers weren’t afraid to make big changes for the better, and had borrowed ideas from other mature toolkits and improved upon them. Even using YUI 2 would save us time with its fully-featured set of interactive widgets. On top of that, YUI was supported both by Yahoo and an active developer community.

YUI components have since found their way onto OCLC’s WorldCat.org, a site that allows users to search for an item of interest and discover which libraries near them own that item. WorldCat.org has become the Web destination for cross-library searching and uses YUI components in several locations:

TabView: One the homepage, tabs built on YUI TabView let a user click between a default search of all formats and one of several narrowed, format-specific searches, including books, DVDs and articles. TabView is also used on library profile pages (such as http://www.worldcat.org/libraries/14229), where users can tab through recently-catalogued items by genre.
Carousel: The WorldCat.org detailed record page provides a host of evaluative information about an item plus links to related items. Record pages on OCLC’s “WorldCat Local” service, a locally-branded and focused instance of WorldCat.org that serves as a library’s online catalog, uses the YUI Carousel to present a scrollable assortment of similar works by the same author or about the same subject. (See page bottom of http://ucsd.worldcat.org/oclc/3952807&referer=brief_results for an example.)
Reset/Fonts/Grids CSS: We use the complete YUI Reset package on the detailed record page, our most complex layout and most important page since it connects users to the local catalogs of our member libraries. The CSS package helps us maintain a consistent presentation across supported browsers, especially with user adjustment of font sizes — a key to making the page accessible for library users with limited sight.
Menu: WorldCat.org will soon use YUI Menu to create its main navigation and user-account menubar. We liked the better support for keyboard and mouse navigation over our current third-party utility.

In the Wild for November 13, 2009

Fri, 13 Nov 2009 07:17:38 -0800

Do you have some YUI-related news or an implementation you’d like to share? Let us know in the comments.

@ara_p’s Tool for Graphing YUI Animation Easing Methods: Newly-minted Yahoo! Mail engineer Ara Pehlivanian posted a nifty tool that helps you visualize the various choices afforded you by the easing library in the YUI 2 Animation Utility. (Original source.)
Kissy Editor, a Simple YUI-based Text Editor Specializing in Chinese Text: Xiaoma, the lead F2E at Taobao.com in China, wrote to tell us about a Taobao project called Kissy Editor. Kissy Editor is a simple Chinese-language text editor based on YUI 2 Yahoo, Dom and Event. It’s open-source and hosted on Google Code; if you’re interested in collaborating on the project, get in touch through the Kissy project site.
YUI in Use at Playground-focused Non-profit KaBOOM.org: Elliot Laster, web developer at KaBOOM, wrote in to tell us about the work his team is doing with YUI 2. YUI 2 is used throughout the site, as is jQuery, and is used extensively in the projects section, where you can learn about the playground projects that that KaBOOM is tracking in your area (like this one in San Francisco’s Guerrero Park). KaBOOM is “a national non-profit dedicated to bringing play back into the lives of our children. We passionately believe that play has purpose. We are driven to create a movement in support of this belief.” (Original source.)
YUI Helping to Power WhatPercent.com: Writes Sean from WhatPercent.com: “YUI has really helped us get our site where we wanted it to be fast! Our site is a social media site that let’s users check out what the latest online talk is, create personal polls, product reviews, etc, in a quick clean environment supported by YUI’s awesome tooltip component and a number of others. Also very exciting was the lack of cross browser compliancy nightmares as we used YUI Reset CSS and YUI Buttons.” (Original source.)
YUI DataTable, TabView, Dialogs and More on DomainSuperstar.com: @domainsuperstar tweeted recently about their YUI-intensive interface. It makes use of a host of YUI 2 components to drive a comprehensive suite of domain research and management tools. (Original source.)
Jeff Craig’s Chromahash is the First YUI 3 Gallery Item on Reddit Programming: As we start the second week of the YUI 3 Gallery, Jeff Craig (@foxxtrot) has hit a quick milestone, registering the first YUI 3 Gallery item to hit Reddit’s Programming page. GitHub example is here; YUI 3 Gallery module is here. Congratulations, Jeff!
Anthony Super’s Row Grouping for YUI DataTable: We missed this in August when he released it, but Anthony Super has a row-grouping add-on for YUI DataTable that others in the forums have picked up on. If row grouping is a feature you’ve been looking for, it’s worth checking out. Mark Mansour has a video up of how he’s using this functionality on his own site:
Andrew Wooldridge — YUI 3 Gallery is Prometheus for JS Developers: Writes Andrew: “Just like Prometheus brought fire down from the heavens for mankind, the YUI team has made it possible for you to harness the power of YUI as well as become a part of the YUI ‘family’ yourself. If you build some set of code using YUI, you can have it show up on the gallery. Nothing special right? Well, if you jump through a few other hoops (clone their repo on github, and agree to their licensing) you can have your own lib code served through their CDN. Yes, you heard that right, the same CDN that Yahoo uses to push code out to their edge servers to make it fast and ‘local’ to the machines and browsers that need it will be hosting your code as well. You might also someday get a ‘golden ticket; and be allowed to be part of YUI itself. This is a pretty unprecedented level of openness in a js library.” Read his full post here. (Original source.)
LA Public Library Using YUI: Stoyan noted recently that the Los Angeles Public Library is using YUI on its book details page, using Adam Moore’s TreeView Control to expose information about which branches have copies of a book in circulation and whether those copies are available or checked out. (Original source.)
Erik Eldridge’s Summary of Cardy Patiño Mayea’s “Custom YUI 3 Modules” Talk at YUICONF: Erik Eldridge from the Yahoo! Developer Network has a great summary of Caridy Patiño Mayea’s talk on YUI 3 custom modules from YUICONF 2009.
Philip Tellis’s Review of Matt Snider’s Storage Utility Talk at #YUICONF: Philip Tellis journaled Matt Snider’s talk from YUICONF on the Yahoo! Developer Network blog. Writes Philip: “The first thing that struck me during the talk was how easy it is to use this utility. The storage utility allows web developers to store far more data on the client side than is possible through the use of cookies and it cleanly abstracts out the details of the specific storage engine used. It currently supports HTML5, Google Gears, and Flash storage engines, but is easily extensible to handle more engines in future.”

Implementation Focus: Adify

Wed, 11 Nov 2009 10:13:06 -0800

Former Yahoo! Levi Wolfe is the Manager of UI Development at Adify, a vertical ad network management and media services company that is an independent, wholly owned subsidiary of Cox TMI Inc., part of Atlanta-based Cox Enterprises.

Levi has worked in software development for the past 10 years. He has written everything from high performance web servers in C/C++ to Firefox plugins and ActiveX controls. Levi manages the seven person UI team at Adify. They are responsible for several internal and external web applications written in C#/ASP.NET and have been using YUI since 0.11.0.

Members of the Adify team: (From left to right) Kunal Cholera, Reynold Wang, Takashi Arai, Levi Wolfe, Robert Porter, Edwin Jarlos, Melroy Saldanha.

Tell us about your company/product/website.

Adify offers two related services — the Adify Network Builder platform and Adify Media.

Adify Network Builder is a fully integrated, end-to-end technology platform developed and optimized for the unique requirements of premium vertical ad networks and their publisher partners. Adify Network Builder enables enterprises such as Warner Brothers, Univision and Forbes and entrepreneurs such as Resonate, Yardbarker, and MOG to build and commercialize branded vertical networks.

Adify Media is the media services division of Adify. Built on the Adify Network Builder platform technology that powers more than 200 vertical ad networks, Adify Media has unique access to over 12,000 sites in networks built by top media companies. Adify Media reaches advertisers’ goals by delivering creative and content with 100 percent transparency to quality mid-tail sites.

What is your team’s approach to development?

Unlike a lot of other projects using YUI, we are building a business application. Our users want a fast, responsive application that they can log into, get their reports, and get out. We want our application to feel as professional and solid as a desktop application, without being held back by traditional limitations of a web-based environment.

What made YUI a good fit for your project?

As YUI is completely client side, it integrates extremely well with many server technologies (ASP.NET included). It is very stable and professionally maintained. This can be seen in everything from the numerous examples and very helpful API documentation to the active forums and bug tracking. I’m impressed Yahoo! has such talented people working on something they give away for free.

How are you using YUI?

We have nearly 200 aspx pages, and almost all of them are using YUI in some way. We’re using Fonts and Grids CSS components (we haven’t quite worked up to Reset yet). We use the core components to navigate and manipulate the DOM, and to smooth over browser differences. Some of the more commonly called functions include Dom.addClass(), Dom.getElementsByClassName(), Event.stopEvent(), and Event.onDOMReady().

We probably use about half of the widget components, some highlights are:

Using DataSource to power Charts and DataTable. It becomes incredibly easy to switch between local or XHR sources depending on the amount of data, which is great for client performance.
Using the ColorPicker control to create a highly customizable white-label interface. We are then able to easily reskin various components with a small amount of dynamic CSS.
Integrating a YUI Panel with an ASP.NET UpdatePanel to make something we call an UpdateDialog. This gives us an in-page modal dialog box that can use AJAX to dynamically load its contents or make a server call based on the user’s decision without reloading the entire page.

What is your approach to integrating YUI with ASP.NET?

One of the biggest benefits of ASP.NET is the ability to encapsulate common behaviors or widgets into highly reusable custom server controls. The control developer becomes intimately familiar with YUI while the page developer merely needs to learn how to use the custom ASP.NET control. We wrap all the YUI widgets we use with a custom control that inherits from WebControl. The control is responsible for rendering the required markup and registering YUI scripts. For instance, if I wanted to put a ColorPicker that defaults to red on my .aspx page, all I would write is:

Then in my server side code-behind file, I can just get or set myPicker.Color to use it. Here is a more complicated example of how we could use a DataTable in an .aspx page to show clicks over time:

We’ve created our own custom data-bound YuiDataSource web server control. It is responsible for serializing objects to JavaScript in the case of local data sources, or caching objects server side for XHR data sources. It renders itself in the page’s HTML as a YuiDataSource and could be used by a Chart or DataTable (or both). Our YuiDataTable control exposes a collection property called Columns which is a collection of YuiDataTableColumn objects. It serializes the Columns collection into a JavaScript array of objects passed to the DataTable constructor.

The main point here is that the custom controls are as simple as possible to use. They expose properties for any of the options YUI provides, and override the OnPreRender event to render themselves as JavaScript calls to YUI. This frees up the page author to think about the logic on his page, and not the gory details of instantiating a YUI widget.

How has YUI helped your project achieve success?

Application developers tend to make good ASP.NET developers since they usually have a strong computer science background. Unfortunately they don’t always have quite as much experience dealing with the multitude of browsers or with JavaScript (which I’ve learned over the years is far more powerful and complex than initially suspected).

YUI helps in several ways. First, it helps abstract away a number of browser differences, so we don’t all have to know every last detail about how some obscure browser version affects our code. Second, browsing some of the samples has served as inspiration. I’ve even seen a Product Manager make a quick prototype using a YUI sample to explain how he wanted a feature to work.

Finally, I can’t even count how many hours we’ve saved or how improved our interface has become thanks to all the widgets. We replaced a very basic palette chooser with the ColorPicker, ASP.NET’s built-in Calendar with YUI’s, and a powerful but hard-to-maintain JavaScript grid with the DataTable. In every case, we greatly increased the usability of our application while simultaneously decreasing the amount of effort spent fixing bugs in our controls.

What have been the challenges of using YUI in your project?

Honestly, writing JavaScript that lives up to YUI. If there is one thing that has pushed us to write better client-side code, it would be the example of YUI. We’ve really tried to apply the same discipline and rigor when writing JavaScript as when developing server code in C#.

What are some YUI-related projects on your roadmap?

We have a small internal tool written using the Uploader control that became very popular. We definitely want to integrate the Uploader into our main product. We’re all really happy with the DataTable control, and want to start adding inline-editing where appropriate. We also need to keep up with all the great improvements to the Chart control.

We’re also keeping a close eye on YUI 3 and can’t wait to start seeing widgets based on the new architecture.

YUI 3 Gallery: Accordion Widget

Wed, 04 Nov 2009 10:02:16 -0800

Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data. Accordion items can be added or removed dynamically, reordered via drag-and-drop, closed and set as always visible. Originally, I built the widget top of YUI 2, but I’ve since ported it to YUI 3.

Accordion is part of the new YUI 3 Gallery, offered under the YUI BSD License, and available on the Yahoo! CDN.

The module consists of two classes — Accordion itself and AccordionItem, both extending YUI 3’s Widget.

Building an Accordion

The developer can build an Accordion from markup or from scratch using JavaScript. Check out the examples on GitHub for more information.

If you are building from JavaScript, the first step is to instantiate and render Accordion:

var accordion = new Y.Accordion( { contentBox: "#accordion1", useAnimation: true, collapseOthersOnExpand: true
}); accordion.render();

The next step is to add one or more items:

var item1 = new Y.AccordionItem( { label: "Item1, added from script", expanded: true, contentBox: "dynamicContentBox1", contentHeight: { method: "fixed", height: 80 }, closable: true
} ); item1.set( "bodyContent", "Dynamically added item with fixed content height, 80px." ); accordion.addItem( item1 );

Features

During instantiation (or later) the developer can set configuration options. Some of them are applicable for Accordion itself; others options apply to AccordionItems.

Among the Accordion config options:

reorderItems — If true, the user will be able to reorder the registered items by using drag and drop.
collapseOthersOnExpand — If true, Accordion will close all other items when a new item expands. This is the default behaviour.
useAnimation — This setting determines whether Accordion animates the process of items expanding/collapsing. If true, animation details may be set through another config property: animation.
resizeEvent — The developer may specify an object that provides a resize event (instead of the default browser event). For example, in the YUI 2 world if an Accordion were placed in LayoutManager the developer could use the resize event that LayoutManager provides.

Some of the AccordionItem config options:

contentHeight — The developer may choose among three different content height policies. These are:
- auto — The browser will calculate content height.
- fixed — Content height will be always X pixels, where X is a value specified by the developer.
- stretch — The third option is to set content height to be stretched. In this case, it will be calculated later, depending on the other items and on the total size of Accordion’s container.
alwaysVisible — if true, the item will always stay open, even when another item is being expanded, and even if the value of Accordion’s property collapseOthersOnExpand is true.
closable — If true, the user will be able to remove the item from Accordion.
expanded — Setting this property to true or false will expand/collapse item respectively.
animation — Each item may have its own animation settings.

Future enhancements

I plan to do more work in the area of accessibility; I would like to see it improved in the future versions of Accordion.

About the author

Iliyan Peychev,
Senior Software Engineer
Map Soft Ltd.

In the Wild for October 22, 2009

Thu, 22 Oct 2009 10:39:12 -0700

With YUI 2.8.0, YUI 3.0.0, and PHP Loader 1.0.0 beta 1 out the door, the team here is focused on our final big objective for the year: YUICONF2009. Brendan Eich and Douglas Crockford will be keynoting next week at our first public, YUI-focused conference. In addition to the YUI engineers presenting sessions, we’re looking forward to hearing from community members like Matt Snider and Eric Ferraiuolo. While the conference is sold out, YUI Theater will be there capturing as much as it can — so stay tuned here for video coverage as it becomes available.

Here are a few of the other YUI-related news items we’ve tracked in the past few weeks. If you have an item we missed, or something you’d like to see covered in the next update, please leave a note in the comments; for all the latest YUI news as it happens, follow yuilibrary on Twitter.

YUI2GO — IPhone/Android App for YUI API Docs: YUI contributor and fellow Yahoo! Chad Auld has been working on side project with his partner at Brilaps, Ozgur Cem Sen. Called YUI2GO, this app uses Titanium to put a handheld-friendly UI on top of the YUI API documentation for YUI 2 and YUI 3. The application will cost you $0.99 in the iTunes App Store or the Android Marketplace.
YUI Carousel, Split Buttons and More on Rivendell Bicycle Works’ Site: What could be better than a custom bike-works website making use of YUI? Rivendell is a manufacturer of beautiful, old-school lugged steel bike frames, and their site is replete with old-school charm. You’ll find buttons, menus, carousels and more from YUI throughout the site — as well as some seriously attractive bikes. One Bombadil for me, please. (Original source.)
Matt Snider’s AjaxObject Part II (built with YUI Connection Manager): YUI contributor and Mint.com engineer Matt Snider continues his work building an XHR layer on top of YUI 2’s Connection Manager.
Ajaxian Comparo: YUI Compressor and MS Ajax Minifier: Ajaxian has posted an interesting deep dive into the differences between YUI Compressor and the new Microsoft Ajax Minifier.
YUI on Egoagosys (screenast in Italian): This looks to be a lovely implementation of YUI DataTable, Buttons, Menus and much more, all narrated in Italian for your viewing pleasure.
(Original source.)
Yahoo!’s Ian Pouncey on Accessible Tabs with YUI3: Yahoo! home page engineer Ian Pouncey has a post up on the Yahoo! Developer Network blog about the work the home page and YUI teams did to bake in accessibility with YUI 3.
Jeffrey Cobb, “Simple YUI Login Using Ajax, Cookies and Server Side Auth”: Jeffrey Cobb is back on yuicoder.com with a new code sample. This one generates a simple login screen using YUI Container, Animation, Cookie, and Button. Check out the JS and Perl code snippets on Jeffrey’s post.
Simple YUI 2-based Table Striper: User falcor on the YUI Forums posted his simple table striper. Writes falcor: “Just name make your table id #products and you’re good to go. The CSS rules are in the