Blog: Archive for November, 2009

Updated TextMate Bundle for YUI 2.8.0


Ross Harmes

Ross Harmes is a frontend engineer for Flickr. He is an author of the book Pro JavaScript Design Patterns, and he contributed a chapter to the upcoming volume High Performance JavaScript from O’Reilly.

I’ve recently brought my YUI bundle for TextMate up to date with version 2.8.0 of the library. It provides syntax coloring and documentation look-up for all of the utilities and widgets, as well as tab completion for the most frequently used parts of the library.

There are two ways to get the bundle:

  1. Use Subversion to check out a the most recent copy

    cd ~/Library/Application\ Support/TextMate/Bundles
svn co http://svn.textmate.org/trunk/Bundles/JavaScript\ YUI.tmbundle/
  2. Download the bundle, unzip it, and put it in the ~/Library/Application\ Support/TextMate/Bundles directory

You can use the Bundle Editor within TextMate to view various code snippets and commands and become more familiar with the bundle. As with all TextMate bundles, everything can be customized; tab completion triggers, aliases (if you use Y.D instead of YAHOO.util.Dom for instance), snippets, and even the syntax coloring itself. If you want more information, there is a screencast from a few years ago that is still remarkably current.

By Ross HarmesNovember 30th, 2009

In the Wild for November 30, 2009

As we get back into the swing of things post-Thanksgiving in the US, here are some of the YUI-related items we’ve noted in recent weeks. If we missed something, let us know in the comments; if you’d like to contribute an article to YUIBlog on your own YUI-related work, we’d love to see it — please see the contribution guidelines and send your article over.

  • Matt Snider’s YUI 3/PHP “Amazon Web Services Utility”: A great new project from Matt Snider, author of the YUI Storage Utility and lead frontend at Mint.com: “Amazon Web Services (AWS) provides a powerful tool for finding and evaluating just about any type of material goods. Whether you are searching by keywords or the UPC code, AWS can provide just about all the information you will ever need to know about a product. However, Amazon has put a lot of hurdles between you and the information you needs. First, as of August 15, 2009, AWS now requires that you sign all your requests. Secondly, they have terrible documentation and confusing error messages that do not always explain how to fix the problem.  Amazon Web Services Utility is a YUI 3 JavaScript/PHP solution that simplifies interacting with AWS by handling the request signing process automatically and securely, and prevening or handling common errors. In addition to returning the result as XML, there is an additional ‘gallery-aws-json’ package that adds functionality to parse the XML data into JSON objects.”
  • YUI 2 in Use at PayPal: We’ve known this for awhile, but I gather we haven’t mentioned it on YUIBlog in the past: PayPal is one of many consumer financial sites using YUI.  Currently, we’re seeing YUI 2.7.0 Yahoo, Dom, Event, Animation and Connection Manager on some pages in the PayPal workflow.
  • CutMyPic Site Using YUI ImageCropper and More: Writes Sean: “Me and a friend built this little tool as we found ourselves always wanting to crop images, round their corners, and add a drop shadow, but didn’t want to open up the CPU hungry CS4 every time.  In this site, we utilize YUI Reset, YUI ImageCropper, and YUI Slider. Although still in it’s beta form, we felt like the YUI ImageCropper was the easiest to modify in addition to not having to worry about any internal library conflicts.” (Original source.)
  • Caridy Patiño Mayea’s YUI 3 Getting Started Guide: Caridy has a great set of YUI 3 getting-started suggestions up on his Random Bubbles blog.
  • YUI 2 and 3 in Use on ActiveLog.com: Chris from ActiveLog wrote in to tell us “about a set of health and fitness sites that utilize YUI 2.x (soon to add some 3.x). We utilize the Connection Manager, TreeView, Dialog, Slider, and Calendar. ActiveLog is probably the most popular site we use these on, but we have a handful of other partner sites that use the same technologies via our fitness-partners.com site.” (Original source.)
  • Improving YUI 3 DataSchema-XML: From the prolific Matt Snider: “I have recently been working on finalizing the Amazon Web Services Utility, which now supports all the non-cart operations and almost all the possible response groups. In the course of developing the JSON version of the utility, I had the opportunity to work closely with YUI3′s DataSchema-XML, and realized its several shortcomings: it doesn’t support nested schemas, the resultListLocator cannot be an XPath statement, and all lookups fail if the Amazon XML namespace is included. This article will look at how I implemented the first two improvements…”
  • Jekyll Base Powered by YUI CSS Grids: Raphael Bauduin has posted his Jekyll Base project to GitHub.  Writes Raphael: “I was looking for a fast and simple way to maintain documentation for Dedomenon, the information storage engine behind MyOwnDB.Com. I was looking for a hosted system I didn’t have to maintain, but that would still give me full control of the content so I can move it to another system later if I want to.” You can read more about the project on Raphael’s blog (“Jekyll, YUI and GitHub: A Great Combination”). (Original source.)
  • KidZui Website Using YUI 2 Grids: We don’t do a great job of calling attention to all the sites using one of YUI 2‘s most popular components: CSS Grids.  Here’s one that caught our attention recently — the website for KidZui, a browser for children 3-12. Great idea, nicely implemented.
  • @triptych, “YUI3 Turns NIMBY into BYBBQ”: Andrew Wooldridge writes: “As I’ve been poking around in YUI3, much to its annoyance mind you, since nobody likes to be poked, I’ve notice something very different about it. With many javascript libraries, you get the sense that the authors would very much like you to give up all work in other libraries and join the “one true faith” of this library. Instead of using your own code to do drag and drop use OURS. Instead of using jQuery’s AJAX, use OURS. Instead, I get the impression that YUI3 is much more pragmatic in its purpose. Instead of chaining you to one way of doing things, it has this idea of “bringing in” libraries and functions when you actually need them, instead of dumping let another few milliseconds onto your site’s pageload at the beginning. This really frees you up because you can just load the bare bones set of code you need to get things going, and pull in other libraries on demand. It’s almost like LOD for javascript….”  He’s got more to say…keep reading on his blog.
By Eric MiragliaNovember 30th, 2009

December BayJax: John Resig, “JavaScript Testing and Performance Analysis”

John Resig speaking at Yahoo in 2007.

BayJax returns to Yahoo! on December 11 with a talk from jQuery creator John Resig (@jeresig).

JavaScript Testing and Performance Analysis

Yahoo! HQ in Sunnyvale. Building E, Classrooms 9 & 10. Pizza at 5:30 p.m., talks start at 6:15 p.m.

A two-part talk: A comprehensive look at what you need to know to properly test your JavaScript code and an analysis of the popular JavaScript performance testing techniques and their shortcomings.

Reserve a seat.

BayJax events at Yahoo! are free to the public, and we’d love to see you there. Head over to the BayJax site to register.

Can’t wait to see John’s talk? Here he is from his last visit to Yahoo! (January, 2009) delivering a talk entitled “The DOM is a Mess”:

By Eric MiragliaNovember 24th, 2009

YUI Theater — Todd Kloots: “Building Accessible Widgets with YUI 3″

YUI engineer Todd Kloots speaks at YUICONF 2009, held at the Yahoo! HQ in Sunnyvale; October 28, 2009.

We wrap up YUI Theater coverage of YUICONF 2009 with a talk from Todd Kloots (@toddkloots) on the accessibility features of YUI 3: “Building Accessible Widgets with YUI 3.” Todd covers YUI’s support for keyboard handling, focus styling and management, ARIA roles and states, and much more. (Don’t miss Todd’s other YUICONF talk, “YUI 3 Sugar,” which is a great primer on other hidden gems in the library.)

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater; the downloadable version is much smaller, optimized as it is for iPods, iPhones, and other handheld devices.

The Full Roster of YUICONF 2009 Videos on YUI Theater:

Subscribing to YUI Theater:

By Eric MiragliaNovember 23rd, 2009

#followfriday: YUI Developers on Twitter

The @YUILibrary account on Twitter is a good information source for those of us who follow the project. Many of the individual developers who write YUI code every day are now on the service as well, and I wanted to gather all those accounts together in a single post for the sake of convenience.

Here’s the formal list, which you can follow as a group, and here are the individual accounts:

Note: As is the case with social networks generally, what people post on Twitter represents their own momentary whim or deeply held conviction, not that of Yahoo! or the YUI project.

By Eric MiragliaNovember 20th, 2009

YUI Theater — Isaac Schlueter: “Solving Problems with YUI 3″

YUI engineer Isaac Schlueter at YUICONF 2009, held at the Yahoo! HQ in Sunnyvale; October 28, 2009.

Isaac Schlueter (@izs) is developing the YUI 3 version of AutoComplete. In this YUICONF 2009 session, “Solving Problems with YUI 3,” he shows you how he’s working with the core YUI 3 toolkit to address the various challenges inherent in developing a complex widget.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater; the downloadable version is much smaller, optimized as it is for iPods, iPhones, and other handheld devices.

Other Recent YUI Theater Videos:

Subscribing to YUI Theater:

Isaac Schlueter and Matt Hackett present at the September Bayjax event at YahooMore from Isaac

Isaac’s tech talk with Matt Hackett from the September Bayjax event, “Server-side JavaScript,” is available with a full transcription on YUI Theater.

By Eric MiragliaNovember 20th, 2009

Using YUI 2 and YUI 3 Together: Even Easier with Caridy’s Wrapper Utility

Using YUI 2 and YUI 3 together with Caridy's Wrapper Utility

The YUI 3 Gallery got an interesting new addition today: Caridy Patino Mayea’s YUI 2 Wrapper Utility. Wrapper allows you to pull in YUI 2 modules from YUI 3 use() statements. Check out Caridy’s documentation for the Wrapper here.

How easy? Here’s a full example. All that we start with is the 6.2KB (gzip) YUI 3 seed file; Caridy’s Wrapper and the built-in YUI 3 Loader take care of the rest:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script>

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

<script language="javascript">

YUI({
    modules: {
        'gallery-yui2': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.11.19-20/build/gallery-yui2/gallery-yui2-min.js',
            requires: ['node-base','get','async-queue'],
            optional: [],
            supersedes: []
      }
 
    }
}).use('gallery-yui2', function(Y) {
 
    Y.yui2().use("tabview", function () {
 
        var myTabs = new YAHOO.widget.TabView("demo");
 
    });
 
});

</script>

Check out the YUI 2 Wrapper and many others on the YUI 3 Gallery.

By Eric MiragliaNovember 19th, 2009