GBS Changes for Q3 2009

This GBS update adds A-grade support for Firefox 3.5 and for Safari 4.0. A-grade support is discontinued for Firefox 2, Opera on Mac OS X, and IE6 on Windows 2000. With this update, Windows 2000 drops from the A-Grade testing matrix and the testing surface is reduced to 14 browsers on 4 OS platforms (down from 15 browsers on 5 platforms).

• Initiated A-grade support for Firefox 3.5, Windows XP
• Initiated A-grade support for Firefox 3.5, Windows Vista
• Initiated A-grade support for Safari 4.0, Mac OS 10.4
• Initiated A-grade support for Safari 4.0, Mac OS 10.5

• Discontinued A-grade support for IE6, Windows 2000
• Discontinued A-grade support for Firefox 3.0, Windows Vista
• Discontinued A-grade support for Firefox 2.0, Mac OS 10.5
• Discontinued A-grade support for Firefox 2.0, Windows XP
• Discontinued A-grade support for Opera 9.6, Mac OS 10.5

Notes:

• The dagger symbol (as in “Firefox 3.5.†”) indicates that the most-current non-beta version at that branch level receives support.
• Code that may be used on pages with unknown doctypes should be tested in IE7 quirks mode.
• Code that may appear in IE8’s "compatibility mode," which emulates but is not identical to IE7, should be tested explicitly in compatibility mode.

GBS Forecast

We expect to make the following changes in the Q4 2009 GBS update:

• Discontinue A-grade support for Firefox 3.0.x across all OSs.
• Discontinue A-grade support for Safari 3.2.x on Mac OS 10.5.
• Begin publication of A-grade matrix for smartphones
• Re-evaluate status of Google Chrome

Discussion

1. Opera: Opera continues to be an important independent browser manufacturer, but its sub-1% global marketshare is now superseded by other browsers whose user base is growing more rapidly (including Safari on Apple’s iPhone OS and Google’s Chrome on Windows). In many ways, the X-grade browser class, which is full of excellent small-marketshare browsers, is the right category for Opera at this point. However, for developers of global products, Opera’s strong position in Russia and eastern Europe (source: StatCounter) argues persuasively for its continued inclusion in the A-grade. Hence, our advice remains that you continue to test your applications in the latest version of Opera on Windows XP. We’ve dropped A-grade support for Opera on Mac OS 10.x to reduce the testing surface and accommodate future inclusion of browsers with rapidly growing marketshare.
2. Chrome: One of the most common questions we get about GBS today is: "What about Google Chrome?" It’s a fair question. Chrome is an excellent, innovative browser that adheres to web standards, and it has a rapidly expanding marketshare. Chrome remains an X-grade browser today because its marketshare is still very small on a relative basis. If Chrome maintains its current marketshare growth, it will be reclassified as A-grade within one or two quarters. Note that Google’s developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome." This is good advice.
3. Safari on the iPhone OS: The OS that drives Apple’s iPhone and iPod Touch devices is another ascendant category of browser traffic. Is Safari for the iPhone OS an A-grade browser? Our answer: No, but that doesn’t mean you can ignore it in your product planning and testing. We regard the emerging class of full-featured browsers on handheld devices to be a category that requires its own GBS matrix. Such a matrix should include testing advice for browsers including Safari on iPhone as well as the browsers that ship with Google’s Android OS and Palm’s Pre OS. Treating these browsers as X-grade today is the right decision based on their marketshare — remember, X-grade browsers are expected to support current web standards and to perform well in browsing well developed sites. But the rapid growth of web traffic coming through these browsers, their unique form factors (much smaller screens), and their new interaction paradigms (including touch-screen gestures) argue for an intentional and sometimes differentiated approach to web-application design and implementation. While most content should "just work" and work well, these devices need to be considered at the product-design stage. Providing an "A-grade" experience for your application may not be a question of whether your app runs in the browser but whether your app’s usability on a small touchscreen retains its usability. With this in mind, we’ll begin delivering a smartphone GBS matrix beginning in Q4 2009.

We’d love to hear your take on these issues and others in the comments section.

The GBS Archive

• GBS Update, 2009-01-28
• GBS Update, 2008-07-03
• GBS Update, 2008-02-19

Sound is one of the major senses and a major part of daily life, and yet is largely ignored on the web. Web developers know that when it comes to HTML, audio is not as easy to add to a web site as it should be. Why is that? The following are some thoughts on the historical problems with embedding sound, a few ideas and some demos of embedding and controlling sound from Javascript with YUI.

Demos

If you’re like me, you’re probably wanting to see some fun stuff up-front because reading is work, and work is boring! ;) Feel free to play with the demos first and then read on for the details.

• Demo 1 (practical): Play MP3 Links Inline
• Demo 2 (fun): A Noisy DOM

A Brief History of HTML and “Multimedia”

The web is pretty good at visual presentation. It is easy to create, design and embed images, text, and links in HTML documents. Of the media formats natively supported today in HTML 4, audio and video – or rather, <audio> and <video> – are conspicuously missing.

HTML 5 should bring audio and video embedding closer to the simplicity of <img /> in the not-so-distant future. In the meantime, we have to resort to creative work-arounds to get HTML-5-like audio/video functionality across the gamut of today’s common HTML 4-supporting browsers.

The (HTML 4) Problem With Embedding Audio

For audio on web sites today, developers often display a list of HTML links directly to MP3 files. This method is simple, universally-understood and indexable by search engines, but makes for a confusing and inconsistent browsing experience by default.

Users are generally prompted to right-click, “save as” and finally open the file from their desktop, or click the link and have their browser download and open the MP3 file. The regular “click” typically opens in a new page with the embedded player or launches an external application like QuickTime or Windows Media Player.

Not only are “naked” MP3 links extra work and confusing for the user, the browser’s method of handling them is a distraction and takes them away from the experience of your site.

Using <object>/<embed> is another generic way to directly embed MP3 or other content, but again suffers from the problem of inconsistency; the developer won’t know what may show in that area of the web page, given the user could have any array of applications which may load in order to handle that file type – in this case, likely the same QuickTime or Windows Media Player which would handle direct downloads would be shown in-place in your page. Again, not a great solution.

Flash widgets are sometimes used as a solution for embedding MP3 content, but the UI and skins tend to be 100% Flash-based rather than HTML and CSS-based and thus are more difficult for most web developers to customize. HTML 5 should change this with standards-based, CSS-skinnable and scriptable audio/video elements.

In the meantime, some creative solutions can be used to get more “web developer-friendly” widgets for audio.

Making MP3 Links “Just Work”: YUI + SoundManager 2

To have “progressively-enhanced” links to MP3s that will play in-place when clicked, something must intercept the browser’s normal download action and subsequently handle the request; by combining Javascript and Flash to handle the loading and playing of MP3 content, this can be done very effectively.

In a personal quest to get cross-browser audio control for a DHTML game back in 2002, I developed a JS + Flash audio API called SoundManager. Having since evolved to include video, SoundManager 2 implements and extends Flash’s native sound API and exposes it to Javascript. The result is cross-browser/platform scripted audio functionality which can help to bridge the gap for JS-driven sound until HTML 5 is widely supported.

By combining SoundManager 2 with YUI’s DOM and Event utilities, you have an effective solution for embedding and controlling audio which can gracefully degrade to a browser download or embedded player.

Practical Example: Playable MP3 Links

The following demo uses YUI and SoundManager 2 to enhance MP3 links, making them playable inline. YUI’s event utilities intercept clicks on links pointing to MP3 files and then use the SoundManager API to load and play the relevant URL before returning “false”, and preventing the browser from loading the link. Subsequent clicks will toggle play/pause state.

In the event Javascript/Flash aren’t present or if anything else goes wrong, the browser will simply fall through and load the MP3 link as usual.

• Demo 1 (practical): Play MP3 Links Inline

Adding Audio To Your UI

Javascript-based animation, transition and motion effects add fluidity to web interface design and are becoming more commonplace. Smartly-applied audio can complement and further enhance the UI, making the experience more meaningful.

In certain applications, sound in the form of UI feedback can be appropriate and helpful to the user experience. Sound effects are common for Flash-based sites and web-based games, and in desktop gaming audio is usually a key part of telling the story.

.. But Don’t Over-Do It

It’s important to know when to stop. Recall animated “under construction” .GIFs? How about the blink tag? Marquee text? Some things are best left alone. Not every HTML page needs to move, blink, slide, flash and be noisy at the same time; even “fun” is best applied in moderation. Annoying your users with auto-playing music or noise can quickly lead to abandonment of your site.

There is probably good reason that standard HTML elements such as form controls and the like do not have sound effects or notifications associated with them. Perhaps “silence is golden” and it’s best that the web be a quiet place by default, so as not to be annoying and distracting.

As one notable exception to the “silent web” theme, Internet Explorer usually makes a “click” sound when page navigation occurs, presumably to notify the user that an action has started. This has become more muted in recent times, but is still present and still seems to annoy some users to this day.

“Fun” Example: A Noisy DOM

Despite the arguments for silence, the following is an example of what it might be like to have “noisy” form elements, buttons and DOM elements which provide audible feedback as they’re being used. The novelty is certainly to wear off quickly, but it does add an element of childish fun to the UI.

• Demo 2 (fun): A Noisy DOM

Looking Forward: HTML 5

Native <audio> and <video> support will mean it will be much easier to embed and control more media formats within the browser without relying on third-party plugins. Furthermore, an extensive Javascript API should encourage developers to create increasingly-innovative experiences.

• Timr — a New Timetracking Web-app with Significant YUI Elements: Thomas Einwaller wrote in to tell us about Timr, a new time-tracking web application with a slick, rich, YUI-intensive interface including Panels, DataTables and much more. If your job requires you to track time-on-tasks, and you want a web-based system with support for mobile, check out Thomas’s project at Timr.com.
  
• How Happy is Dav? Harley-Davidson Using YUI: If you know YUI engineer Dav Glass, it will not surprise you to learn that he’s the one who discovered that YUI is in use on the Harley-Davidson website.  Check out their Harley-themed YUI AutoComplete in the main search box at the top of the page.
  
• Ara Pehlivanian on YUI 3 — New SitePoint Article: Ara, coauthor of a couple of excellent JS tomes, provides a nice introduction to YUI 3 and his take on why it might be of interest to developers.  His conclusion: “YUI 3 is a completely different animal than its predecessor. Along with a new syntax, you gain a faster, lighter, easier, and more flexible library—ready to take on your most ambitious web projects.”  Check out the full article for more.
  
• IBM DeveloperWorks: “Weaving a Better Web Page with YUI CSS”: From Martin Streicher, writing for IBM DeveloperWorks, who covers both Blueprint and YUI in this article: “YUI Grids provide CSS for both fixed-width pages and fluid-width pages, and it provides for arbitrarily deep nesting of columns. You can also position and move columns arbitrarily, so you can quickly and simply reorder the content on the page with CSS. For instance, you can move navigation from left to right with one CSS change. Further, you can augment YUI Grids with Yahoo’s own JavaScript library to add interactivity. You can read more about the YUI JavaScript library separately. This article focuses on Grids’ stylesheets, which can work independent of a JavaScript library.”  The article is free online and available as a PDF.
• Dav Glass’s “y’all Getter Done” T-shirts for YUI 3: File this one in the “just for fun” category… Dav, who is a YUI engineer by day, has branched off into t-shirt design with a YUI shirt available on Zazzle. Pictured is Dav wearing the shirt, which is a reference to Larry the Cable Guy and reads “y’all, getter done”.  Note that “redneck” is not an actual YUI 3 module, so this code won’t really run in a standard YUI 3 implementation.  But it’s funny nonetheless.
• Detecting if the User is Idle with JavaScript and YUI 3: From YUI contributor Nicholas C. Zakas: “Web developers have been interested in whether or not a user is idle since the Ajax explosion hit. With the introduction of more dynamic, highly interactive web interfaces came the desire to know if the user was actually doing anything at any point in time. Thus, the quest for determining if the user is idle began.”  Read on for full details on his blog. (Original source.)
• Cerberus Helpdesk 4.2 Using YUI Charts, TabView, and More: Cerberus Helpdesk is a CRM application offering both paid and free versions.  It’s UI features a variety of YUI components, from Panels to TabViews to reports enhanced by YUI Charts.
  
• Matt Snider on Using YUI EventProvider and Custom Events: Matt Snider, lead frontend on Mint.com and author of the upcoming YUI Storage Utility, blogs about Adam Moore’s YUI Event Utility components including Custom Events and EventProvider: “By using [the EventProvider] interface, developers no longer need to worry about whether or not a given CustomEvent exists when subscribing to it. Thereby, making coding easier, while allowing a developer the opportunity to not create CustomEvents that never fire. Additionally, EventProvider normalizes interactions with CustomEvents attached to objects, since the same methods will be attached to each object. Lastly, the events are bound to the augmented object, so although you might instantiate hundreds of EventProvider augmented object, each sharing an event named ‘update’, only the callback functions subscribed to the current object will execute when the ‘fireEvent’ function of that object is called. In summary, when using EventProvider the event names need only be unique on a single object, not across all objects (as with CustomEvent).” The full article is on Matt’s blog.
• Screencast of YUI DataTable Use on ResumeBucket: We mentioned ResumeBucket in a previous “In the Wild”, but they’ve posted a screencast that does a nice job of showing off Jenny Donnelly’s YUI DataTable in use in their messaging center.  Check out DataTable being used for user-managed tabular data here.
  (Original source.)
• Eric Ferraiuolo’s Facebook-style Overlay in YUI 3 & CSS 3: Writes Eric: “While wandering-around the Internet looking for examples of overlays in web application interfaces I thought of a challenge: create a working Facebook–styled overlay. I’m in the process of creating an application-wide design for overlays and needed some inspiration. Facebook uses overlays extensively and they have a distinct style [that others imitate, maybe even me  ]; I set-out to re-create this style.  Not wanting to mess around — I whipped up a working example of Facebook-styled overlays using only YUI 3 and CSS 3; things are nice and easy to do when you use the latest technologies.”  Check out his blog post for the full story. (Original source.)
  
• Dayshift’s Wrapper for YUI Charts: From the article: “If you use YUI Charts as suggested in many examples you’ll need configuration code for each individual chart which, if you have more than 2 or 3 charts on a page, can make your code appear cluttered. With the ChartsAjax class, all the chart options can be set with JSON data built dynamically on the server and retrieved from one AJAX call. This includes not only data for the datastore but also styling and column definitions.”  Check out the blogpost on Dayshift for the full example code.
• Using YUICompressor with Capistrano and Rails 2.3+: Tony Perrie wrote up some notes on using YUI with Capistrano and Rails; check out his tutorial here.

This release takes YUI 3 out of its preview phase and brings its APIs to a near-final state. For those intending to implement YUI 3, the 3.0.0 beta 1 release is a good place to begin the transition. If you’ve been working with the latest preview release, George Puckett has provided a comprehensive 3.0.0 beta 1 changelog to guide you. We look forward to hearing your feedback as you begin working with 3.0.0 beta 1, and we’ll work hard to address that feedback as we prepare for a GA release in the coming months.

We’ve spent a lot of time in this release cycle refining the core elements of YUI 3 — YUI, Node, and Event — to ensure that we have the right API going forward. Performance is improved, and we’ve refined our module/submodule structure. In some cases we’ve added significant new features, including intrinsic support for event delegation in the Event package; however, the focus is on moving the base library to production quality.

Several YUI 2.x components make their YUI 3 debut in this release:

1. DataSource: YUI’s data abstraction layer provides a standard interface into data sets, regardless of the data’s origin (local, XHR, XSS, etc.) and format (JSON, XML, CSV, etc.);
2. ImageLoader: ImageLoader allows you to defer the loading of images that aren’t in the viewport when the page paints, throttling bandwidth usage and improving performance;
3. History: The History component gives you control of the brower’s back button within the context of a single-page web application;
4. StyleSheet: StyleSheet makes it easy to create and modify CSS rules on the fly, allowing you to dynamically style page elements with fewer repaints.

As part of the more granular packaging in the new codeline, we’ve created separate YUI 3 modules to house functionality that in YUI 2 was bundled with other components. Cache, DataType and DataSchema debut in this release; each of these used to be a part of DataSource.

Getting to Know YUI 3

The best way to get started with YUI 3 is to dive into the documentation and examples — particularly the examples for the core YUI, Node and Event components.

We also recommend spending some time with Satyen Desai, whose tech talk on YUI 3’s design goals and architecture provides an excellent overview of the new codeline. The video is embedded below; an HD version, along with a transcript, is available from the YUI Theater site.

Satyen Desai: "YUI 3: Design Goals and Architecture" @ Yahoo! Video

CSS Grids and YUI 3

Those of you who use the YUI CSS components may notice that we’ve removed references to YUI CSS Grids in the 3.0.0 beta 1 documentation, although Grids remains present in the download (and, of course, you can continue using the YUI 2.7.0 version of Grids).

We’ve deprecated the Grids implementation that was included in the preview releases, and we expect to significantly re-engineer this component before reintroducing it as part of YUI 3.

Roadmap

The 3.0.0 beta 1 release is an important milestone for YUI. At this point, we are encouraging all YUI implementers to use YUI 3 for new projects, especially projects that don’t make heavy use of widgets.

Our attention now turns to bringing YUI 3 to GA status. We expect this to happen in Q3, at which time the following components will be promoted to GA:

• Core: YUI, Node, Event
• Component foundation: Attribute, Base, Plugin
• Utilities: Animation, Cookie, Drag and Drop, Get, History, ImageLoader, IO, JSON, Queue, StyleSheet
• CSS: Reset, Base, Fonts

After 3.0.0 GA, the next major release will be 3.1.0, currently scheduled for Q4. The 3.1.0 release will bring the widget foundation to GA, including the following components:

• Widget foundation: Widget and Widget extensions
• Utilities: DataSource, DataSchema, DataType, Cache

During the 3.1.0 release cycle, we’ll also begin introducing specific widgets built upon the YUI 3 codeline. Note that Widget, its extensions, and the sample widgets shipping with 3.0.0 beta 1 are expected to evolve significantly in the coming months as we begin focusing more attention on that part of the library.

For full details on the roadmap, refer to the YUI 3.x Roadmap on YUILibrary.com. That page is kept current with the latest information about our plans and progress. The YUI 3.x Dashboard is also a useful resource for those wanting to track our progress toward major YUI 3 releases.

About the Author: Alaric Cole has been working in Flash since the advent of ActionScript and is currently a developer on Yahoo!’s Flash Platform team. You could say he’s grown with the language. Sure, he’s had his hand in independent film. Yeah, he wrote that one book. But his weekday ritual is still fooling about with Flash.

When he’s not crouched over a computer, you might find him riding brakeless in the Mission.

I’ve been working with Matt Snider of Mint.com to develop a new local storage utility for YUI. The utility will use a cascading storage system to detect the best way to store information through the browser, allowing a developer to store data more efficiently than a typical browser cookie — and in greater amounts. One of the storage mechanisms employs the Adobe Flash Player, and this use case has been the focus of my recent work.

Flash has a built-in persistent storage system called SharedObjects, which can be thought of as “super-cookies”, allowing the developer to store, by default, 100kb — or more, if the user allows. One of the benefits of SharedObjects, besides their capacity, is that they can store core ActionScript types, and even entire custom classes, in a binary format on the user’s hard drive. SharedObjects use the ActionScript Message Format (AMF), making them efficient and compact.

These SharedObjects are not encrypted, so while difficult to read, they are not what you would call secure storage. We’d never recommend storing important data such as user names, passwords, or other private data via a SharedObject unless you’ve implemented your own encryption mechanism. Also, SharedObjects are different from a cookie in more ways than capacity — SharedObjects are generally not attached to a specific browser but are stored independently.

These differences of the Flash storage system provide a number of benefits to the developer and the end user. However, while extremely convenient, they can also be misleading to the average user, many being unaware that such data even exists on their machine. While great lengths have been taken to provide transparency and control over private data to users via their browser (Firefox and Safari in particular providing a nice set of tools to view, edit, and remove cookies for various sites), the Flash storage system, due to its plugin nature, stores information in a separate location. This means that clearing your browser cookies does not clear these SharedObjects.

If you’re interested in viewing these bits of storage on your machine, you can check out the following locations:

Linux:

/.macromedia/Flash_Player/

Mac:

/Library/Preferences/Macromedia/Flash Player/

Windows:

/Application Data/Macromedia/Flash Player/

SharedObjects are typically stored in separate folders under these locations, in directories with such descriptive names as 8GKWKDQM and 227MDWL4. Under such folders are subdirectories corresponding to the domain in which the SharedObject came from.

The actual files have the *.sol extension, and there may be more than one for each domain. For instance, I found three separate SharedObject files on my machine under the youtube.com folder. They’re not human readable, as they are stored in binary.

When developing this storage utility, I wanted to be able to see the actual data stored in its raw form — but I didn’t have the time to parse through it all using a ByteArray, so I looked for a tool to do the job. I found a handy AIR application called Minerva, which can open a *.sol file and display its information. As of this writing, the current version doesn’t allow editing of the actual values stored, but there may be some other applications out there that I didn’t find.

If you’d like to remove some or all of these “Flash cookies”, you can simply delete the files or directories as needed. Note, however, that some sites make extensive use of SharedObjects, so removing them may cause unexpected behavior. Financial institutions in particular take advantage of them to aid in the security of their sites. So make sure you know what you’re doing, or create a backup before wreaking havoc.

An alternative to browsing through directories is to use Adobe’s Settings Manager. This is a Flash-based tool with special privileges that will allow you to view information about the storage on your machine, remove some or all of the stores, and set restrictions on future storage.

So, next time you want a clean slate for your browser, remember that there may be some additional information lurking on your machine that the browser can’t get to.

YUI has a wonderfully rich list of data manipulation and UI utilities in its library, but coming up with equally rich and interesting data is generally your responsibility as an implementer. By the same token, YQL has rich data fetching and interaction abilities, but it lacks YUI’s visualization tools. Taking the visualization and control features of YUI and coupling them with the raw data pipe of YQL, we can build incredibly rich, interactive widgets without the need to create any of the visualizations or data storage mechanisms ourselves.

I’ll give you a tour of two widgets built with YUI and YQL in this post. One displays publicly available content and the other builds upon that original widget with a server-side PHP component to display private user data by authenticating with OAuth.

Accessing Public Data

Using the YUI Get Utility, we are able to make requests to the public YQL query URL without having the pain of dealing with the same-origin policy issue that would normally prevent us from making XHR-based requests to a server that is not on the same domain as the originating request. Below is a small code sample which showcases how you would call YQL using the YUI Get Utility:

<script type="text/javascript">
var getYQLData = function(query){
    //prepare the URL for the YUI GET request:
    var yqlPublicQueryURL = "http://query.yahooapis.com/v1/yql?";
    var sURL = yqlPublicQueryURL + "q=" + query
        + "&format=json&callback=yqlWidget.getYQLDataCallback";

    //make GET request to YQL with provided query
    var transactionObj = YAHOO.util.Get.script(sURL, {
        onSuccess : onYQLReqSuccess,
        onFailure : onYQLReqFailure,
        scope     : this
    });

    return transactionObj;
}
</script>

The query URL (sURL) is composed of several different parts to make up the request. The yqlPublicQueryURL variable contains the public URI for making requests to YQL. There are also three query parameters that we are passing along to this URI. The q parameter is the YQL query that we use in our request (e.g. select * from flickr.photos.search where text="YDN"), format is the format we want returned (JSON or XML) from the request, and if we want to wrap the JSON returned data in a function (a la JSONP) we can define a callback function using the callback parameter. When this function runs, the Get Utility will make a request to query.yahooapis.com with the specified query. On success, a debug message will be displayed in the onSuccess callback for the Get Utility then the callback defined in the YQL query will be called to parse the returned JSON results.

Setting up this widget on your own site or blog is as simple as downloading the code from the js-yql-display folder on github at http://github.com/jonleblanc/yql-utilities/tree/master and instantiating the widget like this:

<!-- widget file include -->
<script type="text/javascript" src="yql_js_widget.js"></script>

<!-- widget styles -->
<style>
div.imgCnt{ border: 1px solid rgb(96, 96, 96);
    margin: 5px 5px 5px 0pt; float: left;
	background-color: rgb(241, 241, 241); width:100px;
	height:140px; }
div.imgCnt img{ border:0; margin:5px; }
div.imgCnt div.imgTitle{ padding: 5px; font-size: 11px;
    text-align:center; }
</style>

<script type="text/javascript">
var config = {'debug' : true};
var format = '<div class="imgCnt" align="center">'
    + '<a href="http://www.flickr.com/photos/{owner}/{id}/"'
    + 'target="_blank"><img src="http://farm3.static.'
    + 'flickr.com/{server}/{id}_{secret}.jpg?v=0"'
    + 'width="80" height="80" /></a>'
    + '<div class="imgTitle">'
    + '<a href="http://www.flickr.com/photos/{owner}/'
    + '{id}/">{title}</a>'
    + '</div></div>';
var yqlQuery =
    'select * from flickr.photos.search where text="YDN"';
var insertEl = 'widgetContainer';
yqlWidget.push(yqlQuery, config, format, insertEl);
</script>

Any number of public YQL queries can be made using the above example — all documentation for how the configuration script works can be found on github. If we run the above code we can easily display our most recent flickr photos:

So, why all the fuss over using YQL and YUI together like this? Well, for me these utilities bring me quite close to a traditional MVC (Model View Controller) type of design pattern. YQL is a wonderful data aggregation and manipulation tool, but at the end of the day it’s just data. We insert the controller functionality using YUI utilities such as the Get Utility or Connection Manager, then we can build our presentation layer on top of that using widgets like DataTable and Charts.

Accessing Private User Data

Let’s explore the pairing of YUI and YQL a little further by taking the foundation built in the public JavaScript query widget and attaching a server-side component to authenticate and store an oAuth session. Using the Y!OS PHP SDK, we are able to extend the JavaScript widget to display the update stream and personal badge details of the user who originally authenticated the widget. Since we’re using the PHP SDK on the same domain as our widget to make our authenticated calls to YQL, we no longer need to worry about the same-origin policy issues. This means that we can exchange the use of the YUI Get Utility with the YUI Connection Manager. The benefit to using the Connection Manager here is that we can use a standard ajax request and the event handlers of the utility instead of a callback within the YQL query. Our new request function would look something like this:

<script type="text/javascript">
var getYQLData = function(query){
    //prepare URL & post data for YUI Connection Manager POST:
    var sURL = "private_data_fetch.php";
    var postData = "q=" + query;

    //define Connection Manager event callbacks
    var callback = {
        success:parseYQLResults,
        failure:onYQLReqFailure
    };

    //make POST request to YQL with provided query
    var transactionObj = YAHOO.util.Connect.asyncRequest('POST',
	    sURL, callback, postData);

    return transactionObj;
}
</script>

The Connection Manager is used to make AJAX requests to the PHP SDK (whose references are housed in private_data_fetch.php within the above code) with the query as a POST parameter. The SDK in turn makes an authenticated request for the user’s personal data and dumps out a JSON string as the return of the request. Then all you need to do is parse the JSON string using the YUI JSON Utility; after you’ve called YAHOO.util.JSON.parse() on the transaction results, your data can be treated in the same manner as the data in the first example.

Since YQL generates results when the request is called, there is no need to house this data for yourself. YQL can pull data from any available source so you can build widgets such as these to display dynamic results with each refresh.

Both of the widgets showcased in this post are freely available for download and contribution on github at
http://github.com/jonleblanc/yql-utilities/tree/master. These widgets are:

• js-yql-display: JavaScript widget to display public YQL data
• php-yql-display: JavaScript / PHP widget to display private YQL data

Members of the Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Can you provide a background of projects where you’ve used YUI? What problems are you trying to solve for users?

Squarespace has two different audiences that have to be served in different ways. We have Squarespace customers who use the tools that we provide and we have the people who visit the sites that our customers create. YUI is used to drive a lot of the functionality that we provide to our customers and do that in a way that works reliably cross-browser. If we don’t provide a reliable in-browser experience, we’ll hear about it with support requests.

We also have YUI available for our customers to use on the sites that they build (although it’s never been a requirement). Our customers get to rely on a stable and reliable library for any of their own site-building needs.

You chose YUI’s JavaScript library to help drive the UI. What led you to make that choice?

At the time the decision was made, YUI was the best choice. YUI is a well-designed library that considered the requirements of multiple scenarios, not limiting itself to one or two use cases. It was also one of the few libraries that had an integrated and supported set of widgets.

Also, the fact that YUI is actively maintained and tested so extensively with the Yahoo! homepage is a massive win. No other library we looked at was receiving that sort of extensive testing and coverage. When we have run into speed issues, it’s turned out to be cross-browser issues unrelated to our use of YUI.

What YUI components are in use on which projects?

Of course the standard DOM and Event stuff along with Drag and Drop, Animation, and Connection Manager. On the widget side of things, we take advantage of Calendar, ColorPicker, and Slider.

Design and interface quality are huge differentiators for startups. What are the features you have prioritized in your interfaces and what have you build on top of YUI?

For Squarespace, design and interface quality is a big part of our success. We really work to create a polished in-browser experience so that customers can design and manage their sites all from one place.
We’re trying to replace desktop tools. The browser and YUI have allowed us to do that.

We pull in dynamic overlays allowing our customers to move content around, edit content on the spot, or add new content without requiring a page refresh. Squarespace also allows them to edit the look and feel of their sites dynamically. Change colours, images, or other CSS properties from the interface or have direct access to specify whatever CSS you want. It’s really quite flexible, and we’re very proud of how well it has been received.

What are the next interface challenges you are tackling for upcoming releases?

We have some great features that we’re working on right now that will increase the flexibility that our customers will have to modify their content and design right from the browser but the challenge with doing more stuff within the browser is ensuring that you’re creating a snappy and responsive interface. We definitely don’t want them to be sitting there while we load up large assets. We want them to be able to jump in and play with their sites as quickly and easily as possible.

We plan to stick with YUI and will be watching the progress of YUI 3 very closely to see how it’ll fit into our future plans.

One of the first YUI Theater videos years ago was published after Joe Hewitt came to Yahoo! to talk about the 1.0 release of Firebug, and back in those days Firebug was a paradigm shift — it had a convenient interface that combined DOM inspection and debugging, and it allowed developers to finally put the venerable Venkman on the shelf.

The Firebug model has penetrated into other browser families today, and today IE8 and Safari both have capable developer tools while Firebug soldiers on in service to Firefox. None of the tools is perfect, but Firebug has served as a good proof-of-concept for what a multipurpose, extensible inspector/debugger toolkit can do.

Opera is now innnovating on this front as well, and Charles McCathieNevile, Chief Standards Officer, stopped by Yahoo! on May 26 to tell us about their latest effort: Opera Dragonfly. Dragonfly will work with Opera 9.5 and later, and it’s a novel approach — implemented as a widget using JavaScript and CSS and proposing a new “Scope API” that (if agreed upon by browser makers) could allow for a common debugging platform. Dragonfly is fully open-sourced.

Slides from Charles’s talk are available as zipped HTML files.

The embed from Yahoo Video follows; a higher-resolution version, along with a transcript, is available from the YUI Theater site.

download (m4v)

In Case You Missed…

Some other recent videos from the YUI Theater series:

• Todd Kloots: Developing an Accessible Web 2.0 Widget Framework
• Satyen Desai: YUI 3: Design Goals and Architecture
• Peter-Paul Koch (PPK): JavaScript Events
• Jenny Donnelly: Hacking with YUI

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

About YOS

The Yahoo! Openness Strategy Team is building the next generation of open platforms and integrating them into every part of Yahoo!. From platforms that add a social element to every aspect of Yahoo!, to an applications platform and developer-focused offerings, the YOS team is tasked with transforming the way Yahoo! works. In building out all the components of YOS, the team is focused on implementing distributed systems that are highly scalable and performant so they can reliably serve hundreds of millions of Yahoo! users and developers every day.

Job Responsibilities

You will be part of the engineering team that focuses on Yahoo! application platform (YAP), which enables developers to build web applications that are available throughout Yahoo! — the largest audience in the world. You will contribute to the architecture, design and implementation of innovative features and services for this platform. You will work closely with the rest of the engineering team, product managers, QA engineers and external partners who build applications on this platform.

Minimum Qualifications

1. 7+ years of industry experience working directly with the full web technology stack: browsers, web servers and databases
2. Strong command of browser-side client technologies including Ajax, XHTML, DHTML, CSS, JavaScript, DOM JSON, cross-browser compatibility issues, optimization techniques and internationalization issues
3. Experience with application development using Java or PHP
4. Strong command of client/server programming with AJAX
5. Excellent written and verbal communication skills
6. Extensive experience with object-oriented design and development techniques
7. Familiarity with software development life cycle and best practices
8. BS in Computer Science or equivalent. MS in Computer Science preferred

Preferred Qualifications

1. Knowledge of using Javascript toolkits such as YUI or jQuery
2. Experience with JSP compiler implementation
3. Experience with Open Social or Shindig implementation

You can view the job posting and apply at the following URL: http://careers.yahoo.com/jdescription.php?oid=22173. Yahoo! Inc. is an equal opportunity employer. For more information or to search all of our openings please visit http://careers.yahoo.com.

• Uizard – a Web Mashup Generator Written in YUI: Writes Ajaxian: “The Korean developer community is not that known to people in the west it seems. Language barriers make it hard to communicate and the web design is very different to what we do here. Being lucky enough to work with developers world-wide in the same company I just got reminded of a tool that was built for the Korea Mashup challenge called Uizard.”  Uizard was developed by Ryu Sung-tae — it’s servers are challenged by the Ajaxian link, but check it out when they come back up. (Original source.)
  
• YUI Implementations at Canadian National Railway: Lionel Desdier (the “Java-powered railroader”) wrote in to tell us about his extensive implementation of YUI on web applications at Canadian National Railway.  Writes Lionel: “The goal of that new web application, called Intermodal Orders, is to manage empty container orders for our internal clerks’ usage as much as for our external customers usage. This application is part of our EBusiness portal.  The application web client is purely JavaScript and extensively based on the YUI library. The client uses JSON to exchange data back and forth with the server that runs a Java back-end.  We are using most of the available components from grid layout, calendar, dom, overlays, treeview, datatable and datasource, etc.  We also extended the library to create our own components branded to the company look and feel.”  The EBusiness portal is behind a login, but the main cn.ca site also uses some YUI.
  
• YUI in Use on National Geographic Adventure Magazine: Talk about “in the wild”…  Among the online magazines using YUI is National Geographic Magazine, a great resource for those who like to get out of their cubicles and explore the most interesting places in the world. You’ll find YUI on the magizine’s article pages.
  
• Satyam on “Changing the Style of an Element in a YUI Widget”: YUI’s most prolific contributor is as at it again with a new tutorial on how to style YUI widgets.  If you’re unfamiliar with the process of digging into a widget’s markup and CSS using Firebug (or other DOM inspector), you’ll find this a must-read tutorial.
  
• New Orleans Repopulation Data Using Google Maps and YUI: @mattpriour wrote in to tell us about the Greater New Orleans Community Data Center’s Repopulation Indicators site, which uses YUI Grids, YUI Loader, and YUI Core in generating a genuinely interesting block-by-block look at New Orleans population levels from 2005 to today. (Original source.)
  
• YUI Compressor for Visual Studio: Writes the author:  “Although you don’t want this for all things in life, you do want to ensure that your JavaScript and CSS files are as small as possible.  As a web programmer, a script minifier is a useful application that should be a part of your toolbelt. This article presents a simple way to hook up a popular minifer inside Visual Studio.” (Original source.)
  
• Uzvy.com, Groups Solution, Using Tons of YUI: @alokbhardwaj wrote in to tell us about Uzvy.com, a groups site containing discussion groups and “shareboards” that aims to provide a novel and compelling take on the groups space.  YUI is used throughout, for modal dialogs, XHR, and much more. (Original source.)
  
• Cagatay Civici Adds YUI Calendar to PrimeFaces: Writes Cagatay: “Every JSF component library provides some sort of a date picker component and PrimeFaces is no exception. In fact, PrimeFaces calendar component is based on the well known YUI calendar widget which is equipped with some unique features. Calendar is purely javascript and does not do unnecessary ajax callbacks so it’s fast and furious.”
  
• Eric Abouaf’s YQL Execute, Based on Dav Glass’s Grids Builder: Eric Abouaf has taken Dav Glass’s Grids Builder and added support for YQL query execution, allowing you to build YQL-based pages easily; check out Eric’s adaptation here. (Original source.)