Blog: Archive for March, 2008

Pattern-mining call for proposals: Rich interaction (web 2.0) patterns

Dragos Manolescu from Microsoft Live Labs and Joe Yoder from The Refactory are organizing a pattern-mining workshop at TOOLS 2008 Europe, July 5-6 (dates still to be confirmed) in Zurich, Switzerland. I’ve agreed to be on the program committee to help review proposals and advice.

In their own words:

Web 2.0 features are now commonplace — blogs, wikis, RSS feeds, social bookmarking and the like are almost everywhere you look online. Now that these technologies are maturing, what are their common problems and challenges? How are these problems being solved? What similar challenges do Web 2.0 developers face, and how can they leverage the most common solutions? Here’s your chance to gather with other professionals facing the same issues and work together to identify solutions.

We are looking for system experts, domain experts, and pattern experts to come together, bring examples, detect commonalities, and write patterns. Proposals are due May 5.

See the call for proposals for more details.

By Christian CrumlishMarch 28th, 2008

Wanted: Two Senior Front End Engineers

Nicholas Zakas is a Principal Front End Engineer at Yahoo!, YUI Library and YUI Blog contributor, and author of two well-regarded Wrox books: Professional Ajax and Professional JavaScript for Web Developers. In this post he announces two new job openings at Yahoo — for My Yahoo! and the Yahoo! Front Page — and shares stories from his experience working on My Yahoo!.

Photo credit: Steve Carlson

For the past year and a half, I’ve been working on the My Yahoo! team to create the next generation of the most popular personalized homepage on the Web. There have been a lot of challenges along the way. We created complex interactions using JavaScript, HTML, and CSS, all while using semantic markup. Once the base functionality was complete, we found that the performance wasn’t up to par and an arduous investigation began. Over the course of several months, we inspected every line of code that was sent to the client, ultimately finding that we could trim almost 200kb without sacrificing functionality. We met with Victor Tsaran from the Yahoo! accessibility group to ensure that those using screen readers could use the application. And when the dust had settled, we got a great review from PC Magazine. So it’s with a slightly heavy heart that I announce that I’m moving on from My Yahoo!…

But I’m not going far. I’ll be moving over onto the Yahoo! front page to work on one of the most visited sites in the world. I’m really looking forward to the new challenges that await me here. The requirements for such a high-traffic site are stricter than any other place I’ve worked before. It is absolutely not an option for the frontpage to go down or become unavailable, nor is it acceptable for any performance bottlenecks to affect the user experience. I anticipate a lot of exciting work coming my way very soon.

Both My Yahoo! and the front page are part of the FrontDoors organization, which also includes Yahoo! Buzz and the browser Toolbar. Together, our job is to create the most compelling start points on the Internet. There are a lot of challenges ahead for all of us and we’d love for you to help. Both My Yahoo! and the front page are looking for great front end engineers to continue pushing browser limits and create great user experiences. If you’d like to be a part of the way that millions of people enter the Yahoo! network every day, we’d love to have you.

The open positions are for senior front end engineers. For more information, please see our job postings:

By Nicholas C. ZakasMarch 26th, 2008

Crockford Speaks on “Fixing the Web” and Appears on Channel 9

Douglas Crockford speaking at AjaxWorld East 2008; photo by Noah Sussman.

Frequent YUIBlog contributor Douglas Crockford gave a keynote at the AjaxWorld East 2008 conference in New York City last week. As ever, Douglas was pulling no punches — his title: “Can We Fix the Web?” The browser, Douglas says, was behind the times when it was introduced, and it hasn’t aged well. It wasn’t designed to do the kinds of things we’re trying to make it do; we’ve exploited most of its potential and we’re hitting a natural wall now that we’ve extracted from the browser about as much as is possible.

The browser has serious problems:

It’s insecure: Once an attacker gets a foothold on the page, it can read the page, load additional scripts, make additional requests of the server, and send information anywhere in the world. The browser fails to prevent any of these things.
It suffers from the Turducken problem: Turducken, popularized by NFL analyst and Hall of Fame coach John Madden, is a turkey stuffed with a duck stuffed with a chicken. The Web is like this, with CSS stuffed in JavaScript stuffed in HTML. Text that’s safe in one context may not be safe in another.
The web standards require that these vulnerabilities be present. Douglas identifies JavaScript, DOM and cookies as being standards that lead to vulnerability. JavaScript’s global object and intrinsic insecurity are a problem; the nature of the DOM node tree, where every node can access every other node and the network, is a problem; and the ambient authority system of cookies presents a problem.

Reiterating an argument he’s made elsewhere, Douglas went on to argue that, while mashups are the most interesting development in software in 20 years, they are spectacularly insecure. Any time you have scripts from two sources on the same page, you have an insecure situation, and that is often a baseline assumption in the mashup world. (But, Douglas notes, it’s not limited to “traditional” mashups: advertising as implemented on the web is itself a mashup and is insecure.)

Douglas proposes a three-part approach to “fixing the web”:

Subsets of JavaScript: It’s possible to create safe subsets of JavaScript by eliminating the parts of the language that are dangerous. There are a few subsetting approaches out there; Douglas’s own ADsafe is one and Caja (from Google) is another.
Small browser improvements: Implementing solutions for cross-site data access (for mashups) — like JSONRequest — that can replace current techniques like the script tag hack and iframes.
Massive browser improvements: Douglas suggests replacing JavaScript and the DOM and going from there — effectively building upon the ADsafe JavaScript subset using the tenets of object capability theory to create a secure toolkit for in-browser programming.

You can download Douglas’s slides here. The AjaxWorld team is pretty good about getting video up on their site, and we’ll drop a link when we see it there; in the meantime, YUI Theater has seven videos from Douglas to keep you going while you wait.

Douglas Crockford, Alex Russell and Joseph Smarr on Channel 9

Douglas Crockford appeared on Microsoft's Channel 9 video series talking about the zen of JavaScript. Douglas was also on Microsoft’s Channel 9 last week, appearing in a session filmed at MIX08 along with Alex Russell (of Dojo and SitePen) and Joseph Smarr (of Plaxo; Joseph also appeared on YUI Theater talking about performance last year).

At MIX08, we were lucky enough to get three of the world’s top JavaScript experts to talk to us about the future of the language, the “Zen” of JavaScript, and tips and tricks on performance and management of large JavaScript projects.

CC photo by Noah Sussman.

By Eric MiragliaMarch 24th, 2008

YUI 2.5.1 Released: Improved AIR support, JSON security patch, YUI Configurator, and bug fixes

The YUI team released version 2.5.1 today and it’s available for download from SourceForge. This is a general patch release with 67 issues addressed throughout the library. 2.5.1 improves support for developers running YUI in Adobe’s AIR environment and addresses an important security issue raised over the weekend regarding JSON parsing in FireFox. Here are all the top-level items for 2.5.1:

Improved AIR support: As we’ve mentioned here previously, YUI generally runs well in Adobe AIR because AIR implements WebKit — and WebKit also drives one of our A-Grade browsers. Adobe has been actively reaching out to us (and to other library developers) to identify potential wrinkles, and we’ve addressed several of these in YUI 2.5.1. Specifically, the Rich Text Editor and DataSource components have improved AIR compatibility.
JSON parsing in FireFox: Douglas Crockford reported a security vulnerability in his JSON-parsing code from json.org this weekend. The vulnerability allowed the JSON parser to be duped into thinking that an unquoted string was quoted; this could result in unsafe scripts being evaled. Douglas’s fix for this is now incorporated in the YUI JSON Utility.
DataTable refinements: Jenny Han Donnelly and Luke Smith continue to roll in the upgrades to DataTable, with 2.5.1 including a significant performance improvement when adding/updating/deleting rows dynamically.
YUI Configurator: We’ve added a YUI Configurator to the YUI web site, providing a dashboard-style component-selection interface. You pick out the components you want to use, and the Configurator will compute the correct set of file includes for your implementation.

New aggregate file — yuiloader-dom-event.js: We’ve added a new rollup file, yuiloader-dom-event.js, which contains the light YUI Core (Yahoo Global Object, Dom Collection, and Event Utility) and adds to it the YUI Loader (which includes the Get Utility for dynamically adding script and CSS resources). This new aggregate file is the ideal baseline rollup to use when you want to be able to lazy-load any part of YUI on-demand. YUI Loader will calculate the dependency tree for the components you want to add, load the optimized resource list in the correct order, then fire your callback making use of the newly added components:

<!--Load then new yuiloader-dom-event aggregate file:-->
<script type="text/javascript" 
 src="http://yui.yahooapis.com/2.5.1/build/yuiloader-dom-event/yuiloader-dom-event.js" >
</script>

<!--Now, when you want to use a new component, you can just do this:-->
<script type="text/javascript">
  // Instantiate and configure Loader:
  var loader = new YAHOO.util.YUILoader({
    // Identify the components you want to load.  Loader will automatically
    // identify any additional dependencies required for the specified 
    // components.
    require: ["button", "slider"],
    // Configure loader to pull in optional dependencies.  For example, 
    // animation is an optional dependency for slider.
    loadOptional: true,
    // The function to call when all script/css resources have been loaded
    onSuccess: function() {
      //this is your callback function; you can use
      //this space to call all of your instantiation
      //logic for the components you just loaded.
  
      //so, you can implement button safely here:
      var oButton = new YAHOO.widget.Button("mybutton");
    }
  });

  // Load the files onto the page:
  loader.insert();
  </script>

For full details on using the YUI Loader, see its User’s Guide. Note: YUI Loader is now included in the utilities.js aggregate as well.

Bug fixes: YUI 2.5.1 is primarily a bug-fix release, and you’ll find fixes to various issues throughout the library. For a compendium of the issues we’ve addressed, please see Georgiann Puckett’s release summary in the YUI discussion forum.

By Eric MiragliaMarch 19th, 2008

In the Wild for March 13

Just a brief in the wild update this morning as we work on an upcoming bug fix release to follow up on YUI 2.5.0. Some fun and interesting links to share:

More support for YUI on .Net: We wrote in our last “In the Wild” about Luke Foust looking for help with his popular YUI.Net project. Colin Mathews dropped a comment about his similar YUI-on-.Net effort, which includes support for some of YUI’s most popular components like DataTable, Calendar, and the Rich Text Editor. Colin, thanks for the note, and great work on the project.
LinkedIn redesigned with YUI: Emanuel commented on our previous post that we’d neglected to mention LinkedIn‘s YUI-driven redesign. We’ll spend some time with Steve Ganz and others on the team over there as soon as we can and share more details about what they’re doing with YUI and how it’s working for them.
Nine Rich Text Editors reviewed: WebDistortion of Northern Ireland took a look at nine different JavaScript-based rich text editors, and here’s what they had to say about Dav Glass’s YUI RTE:

The Yahoo UI library is a brilliant resource for developers, and their UI editor component is no exception. Although it is still in beta, the result so far looks extremely impressive, and I for one would be comfortable using it in a commercial application. It uses fully object orientated javascript libraries with classes than can be extended if you know what you are doing. It comes with partial image support (via URLS not uploads), but an interesting sample on the site shows how to integrate a flickr image search, and an integrated calendar which would be useful in the blogging world. Please look into this WordPress developers..it rocks socks.
Satyam’s YUI Loader explorer: YUI Community Award-winner Satyam wanted to see us do a better job using YUI Loader to show YUI’s dependency tree, so he coded up a quick YUI Loader component/filelist generator that allows you to configure your YUI dependencies based on the components you’re using. We’ll take this idea and move it onto the YUI site itself very soon; thanks Satyam!
Patrick Gillespie adds the YUI Slider to his Color Pallet Generator: This is more an excuse just to mention Patrick’s cool pallet generator, into which you can submit an image URL and be presented with color pallettes based on the colors in your image. Patrick has added a hue adjustment control implemented with the YUI Slider, which makes a nice tool even more useful.
Dave Dash’s Triangle Toggler: It wouldn’t be an "In the Wild" post these days if we didn’t have a cool tutorial from Dave Dash at spindrop. In this edition, he weighs in with a triangle toggler control to show expand/collapse states. And it wouldn’t be a Dave Dash demo without full code and explanations.
More from Dave — Star rating widget with YUI and Django: Dave starts with the Yahoo! Design Pattern Library’s star-rating pattern and uses YUI to build out a slick star-rating widget.
Markus Tripp’s Intro to YUI Tutorial: Markus Tripp posted a nice intro to YUI for those new to the library, "Getting Started: JavaScript and the Yahoo! User Interface (YUI) Library". Thanks for the great writeup, Markus!
Andrew Wooldridge’s DOM Splicer Demo: “Imagine if you will,” Andrew writes, “that DIV and P elements on a page were like little organisms floating in the browser. Their DNA would be represented by the CSS properties that they possess. Such things as borders and background colors, etc. Now imagine if we took some YUI libraries and gathered up all these elements and “spliced” their CSS DNA. Then we create a new DIV which we then assign this new spliced CSS and drop it into the page.” Check out his article and demo for his YUI-based DOM-splicer.

What are we forgetting? What did we miss? Let us know in the comments.

By Eric MiragliaMarch 13th, 2008

My PHP Backend Scripts for Use With YUI

About the author: Daniel “Satyam” Barreiro is a specialist in YUI’s DataTable Control (and a capable generalist in most YUI-related issues). Satyam was a recipient of the inaugural 2008 YUI Community Award, recognizing his substantial contributions to the YUI project.

YUI is designed to be flexible so it can work in all sorts of environments. Sometimes we start from scratch, both on the client side and the server side, and we might get a little disoriented with so many possibilities. PHP or Rails? JSON or XML? In previous articles, I’ve shown how to use the DataTable Component and I’ve made some suggestions about how to manage the choices you have on the client.

A recent article at my web site offers techniques and sample code for the server side if it runs PHP scripts, which is a pretty common server-side choice for YUI deployments. It shows the code for several handy functions that make the server code easy to write. I begin by discussing a dispatcher function, ajaxReq which branches off to your individual responders, but not before setting the environment for a proper JSON reply. I also provide an ajaxReply function which makes it easy to produce the reply — for example, by simply passing it an SQL statement. I’ve recently updated ajaxReply to be able to produce replies suitable for the new YUI Get Utility. Finally, the function BuildSql is like a sprintf command designed for SQL, which makes it easy to build SQL statements with variables and can be used in any environment, AJAX or not.

If you’re using PHP with YUI, take a look — and feel free to leave feedback in the comments here.

By SatyamMarch 5th, 2008

In the Wild for March 5

It’s been an active several weeks in the YUI world, both here at Yahoo! and in the wild — most prominently, YUI 2.5.0 is out, and we’ve seen a lot of activity around the new components. Here is some of the news that’s caught our eye of late:

Dan Wellman’s Learning the Yahoo! User Interface Library coming from Packt Publishing: YUI has been featured in numerous JavaScript books of late, but as far as we know Dan Wellman’s upcoming volume from Packt is the first tome dedicated wholly to YUI. We can’t wait to get our hands on this one, and we’ll certainly share a sample chapter here with you if we can work it out with the publisher. In the meantime, you can preorder the paper version or the e-book from Packt’s website.
YUI on Rails: Rails’s support for Prototype and Scriptaculous is well known. But YUI’s been making its way onto Rails apps for a long time, and in January Chetan Patil announced YUIRails, a project that makes it easier to build with YUI on Rails. According to Chetan, "the intent of this library is to provide a thin layer of logic that glues RJS – PrototypeHelper with YUI Connection Manager. In its present form, it provides partial support for RJS Prototypehelper, limited to Element methods and Ajax.Request and Ajax.Updater."
More on YUI and Rails: Stuart Grimshaw adds to the YUI-and-Rails discussion with a thoughtful article, "Integrating YUI with Ruby on Rails." He provides a straightforward approach to bringing YUI into a Rails app: "The engineers at Yahoo! … [specifically Adam Moore -EM] recently introduced the YUI Loader component, which lets you load any javascript the page may require, and if that happens to be YUI components, it’ll also load any dependencies they require too. This is also a great way of integrating YUI with rails, without bloating your app, and without creating convoluted bespoke solutions.
Aptana Plugin for YUI 2.5.0: Gaurav Verma bumps Aptana support for YUI to the latest version with his YUI 2.5.0 Aptana Plugin. Thanks, Gaurav!
Shadowbox — super-slick lightbox based on YUI: Michael J. I. Jackson brings you Shadowbox, a genuinely nice interpretation of the much-travelled lightbox concept. We like this one because it’s based on and works with YUI and because it’s flexible enough to work with any other frontend library you may choose. Slick and well-documented — a class act.
In Search of Help at the YUI.Net project: Luke Foust at the popular YUI.Net project is looking for help keeping his .Net/YUI suite up to date; if you’re a YUIer with .Net chops, check out his call for help and, if you can, please lend a hand.
Announcing Ojay: Like Dustin Diaz before him, James Coglan found things to love about both YUI and the compact chaining syntax popularized (most prominently) by JQuery. His solution: Ojay. YUI is "a finely crafted library", Jamse says, whose native idioms are too verbose, and he’s offering up Ojay as an open-source sugar layer to provide an alternative syntax option. If you’re interested in trying it out, check out James’s extensive introductory blog post on the project.
YUI4JSF marches on: Hazem Ahmed Saleh announced on jroller that YUI4JSF 0.6.1 is almost here. YUI4JSF wraps many of the YUI utilities and widgets and provides some components even beyond the standard YUI catalog (including Accordion Menu, CommandButton, Ajax CommandButton, CommandLink, Menu Button, AutoComplete, Slider, Calendar, Datatable, Column, Menu, MenuBar, SubMenu, Menuitem, Menu Button Item, TreeView, TabView, Tab, SortList, Panel, Dialog, Simple Dialog, Tooltip, Logger).
Nick Bouton on The Lab with Leo: Episode 146 of "The Lab with Leo Laporte" features Nick Bouton of OpenRoad Communications in a section entitled "Getting Started with Yahoo User Interface".
Nick Bouton helps you customize the YUI Button Control: More from Nick, who in the past has written about customizing YUI’s TabView, as he posts a new tutorial on customizing Todd Kloots’s YUI Button Control. Writes Nick: "YUI buttons are…quite handy and make for a really nice user experience if used in the right situations. On top of that, it saves you writing it yourself, and the YUI button sits on top of existing HTML button controls pretty transparently." His full tutorial is here.
AJAX with Yahoo UI components and DWR: Carlos Sanchez writes on jroller about his experiences integrating YUI components with DWR: "So far I’ve used the autocomplete and treeview components, and I have to say they are quite easy to use and very complete. I had used Script.aculo.us autocomplete before, but YUI autocomplete has a lot of configuraiton options and all of them really well documented, like caching or being able to easily use it as a normal dropdown when the user just clicks on the field without typing anything. Event handling is also pretty easy." More thoughts and YUI/DWR sample code here.
Matt Snider’s Image Popout widget: Matt Snider, a prolific frontend engineer and blogger from Mint.com, offers up this simple Image Popout widget. In his words: "There are a lot of great libraries with powerful, full-featured in-page popouts, and if you want the kitchen sink, I suggest you use one like YUI’s Container. However, sometimes you just want something simple, that works out-of-the-box, requiring little code and next to no setup. For those times I have created a Simple Image Popout widget." Matt’s widget is YUI-based, but he’s abstracted it so that it’s easy to run on the library of your choice.
Rohit Shah’s TabView Widget for Blogger: If you’re a Blogger user, check out Rohit Shah’s extensive tutorial that will get you up and running with Matt Sweeney’s YUI TabView Control on your blog. Rohit walks you through, step by step, including all of the Blogger-specific code you’ll need.
YUI celebrity sighting: Snoop Dogg’s new album is Trippin’ on Ego (due out March 11), and it was certainly a trip (of the best kind) to see YUI in use on http://snoopdogg.com/. Snoop’s web crew has the YUI Core (Yahoo, Dom and Event) along with Element running. (Thanks to VodkaForBreakfast for the tip.)
iPhone-style Ajax scroll animations: Jay at iPhoneMinds.com was not satisfied with the iPhone-style content scrollers he found out there: "Going through someone else’s code is an art, you have to get into the developers mind and discover what he or she was thinking when writing the piece. While scavenging the Internet for an AJAX scroll animation, similar to that of the iPhone, I was so disgusted by the code I saw that I just wrote my own." Check out the fruits of his labor here.
EY Insight, powered by YUI: Adam McIntyre on A Modern Fable talks about the launch of EY Insight, a new site from Ernst and Young geared toward students interested in an EY career. What makes it special? In Adam’s words: "It’s one of the first sites I’ve seen that mashes up JavaScript (in this case YUI) and full-screen Flash video. There’s some pretty complicated Flash/JavaScript interaction going on, and I really haven’t seen too much like it. (Thanks SWFObject and Alisdair Mills). This is the biggest YUI app that I’ve launched, and brings a nice, high profile to how much fidelity you can get out of a JavaScript app."
"YUI AutoComplete the easy way": Dave Dash at spindrop likes the feature richness of Jenny Han Donnelly’s YUI AutoComplete, but he wanted to make it even easier to use — and he kindly took the time to share the love with everyone on his blog.
Advice on using the Selector Utility: Walter Rumsby took some time getting to know Matt Sweeney’s YUI Selector Utility, profiling it against alternative element selection methods, and came away with some nice advice for people getting started with Selector.
What to Like about YUI’s Profiler: Ryan Breen takes note of YUI’s new Profiler and ProfilerViewer: "The profiling model differs significantly from Firebug, which runs as a browser extension and can reach deep into browser internals for its metrics. YUI Profiler is running within the JS sandbox, so the user is required to register specific functions for profiling. This limits the profiling from broad spectrum analysis of the whole application to more targeted measurement, but that also serves to limit the performance overhead of the profiling itself."
A visual programming environment for JavaScript authors: Lily is described by Bill Orcutt as "a modular framework that allows you to wire together Javascript library components graphically. Currently there are Lily modules that wrap components from the YUI, JQuery & Scriptaculous libraries. There are also modules that provide access to the file system, browser storage, network & graphics. Lily programs can be saved as standalone XULRunner applications or as Firefox addons." You can see an example of YUI usage in Lily in the Flickr/YUI/Lightbox example.
YouTube plugin for the YUI Rich Text Editor (RTE) from WeGoAll: Fraternity/sorority website specialist WeGoAll coded up this nice YouTube plugin for Dav Glass’s YUI Rich Text Editor. Not that the studious lads and lasses in the Greek system have time to watch web video…
Newspond launches, powered by YUI: Another YUI-powered site that launched recently is news-aggregator Newspond. Developer Ian Reardon wrote in to tell us about the site and to say, "We couldn’t have done it without YUI"…always a great sentiment to hear, especially on a site with such a nice design aesthetic.