Yahoo! User Interface Blog

DjangoSnippets: YUI Loader as Django Middleware

Over on DjangoSnippets.org, akaihola has posted a YUILoader class (based on Adam Moore’s client-side YUI Loader) that makes it a snap to pull YUI components into your Django projects.

This server-side middleware implements some of the functionality in the Yahoo User Interface Loader component. YUI JavaScript and CSS modules requirements can be declared anywhere in the base, inherited or included templates, and the resulting, optimized <script> and <link rel="stylesheet"> tags are inserted at the specified position of the resulting page.

Requirements may be specified in multiple locations. This is useful when zero or more components are included in the HTML head section, and inherited and/or included templates require possibly overlapping sets of YUI components in the body across inherited and included templates. All tags are collected in the head section, and duplicate tags are automatically eliminated.

The middleware understands component dependencies and ensures that resources are loaded in the right order. It knows about built-in rollup files that ship with YUI. By automatically using rolled-up files, the number of HTTP requests is reduced.

Back in August on DjangoSnippets, pigletto posted a nice YUI snippet for use with the YUI AutoComplete Control.

Find conversations: bloglines | technorati

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

Hidden Gems in the YAHOO Object

Mitch at PlankDesign.com has posted a nice review of one of the least-discussed aspects of YUI Core — the YAHOO Global Object’s YAHOO.lang member. He covers a number of the language conveniences provided therein, including type checking, trim, substitute, later and merge.

Luke Smith from the YUI team recently added some great examples of other features in the YAHOO object, so check those out, too, if you’re interested in learning more about this essential building block of YUI.

Thanks for the insights, Mitch!

Find conversations: bloglines | technorati

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

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.

Find conversations: bloglines | technorati

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

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.
  

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

Find conversations: bloglines | technorati

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

In the Wild for January 18

Here are some of the stories and happenings that have caught our eye since the last “In the Wild” post:

• YUI’s Nate Koechley on the TWiT Podcast: Over on the TWiT network’s “Free and Libre Open Source Software” (FLOSS) podcast, Randal Schwartz and Leo Laporte had YUI’s Nate Koechley on as a guest to talk about YUI. It’s a great interview — astute questions and observations from the hosts, and of course Nate has been on the front lines talking about YUI since its inception.
  
• Final version of YUI-Based Lightbox on The Code Central: Cuong Tham’s Lightbox goes final; according to Cuong, “The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery.” Lots of positive feedback on his blog, where you’ll find download links and demo pages.
• YUI-based Loading Panel Widget: Cuong pours it on with another YUI adaptation, in this case a Loading Panel Widget. As always, he has it fully documented with all the code you need to get started.
  
• vBulletin 3.7 adds further YUI integration: If you’re a vBulletin user, the 3.7 release from late last year brings in fuller YUI integration and adds the ability to switch between local and Yahoo-hosted YUI files. Letting Yahoo host your YUI files can save you bandwidth and improve performance, so it’s great to see the vBulletin team exposing that as a simple configuration.
• MIT Timelines Mashup: Yahoo engineer Wally Punsapy put together this exploration of a rich timeline mashup and it’s currently an Editor’s Pick in the YUI section of Yahoo! Gallery. It’s more of a concept piece than a finished app, but it’s suggestive of the new breed of interactives that are maturing around APIs from companies like Flickr, Blogger, Youtube, Yahoo, Google and others.
• YUI CSS on Rails: John Munsch makes the case that Rails’ tight integration with Prototype is no reason not to use YUI CSS on your Rails app.
• Review of AutoComplete Widgets: I’ve long argued that AutoComplete is one of the most important client-side interactions to support in a JavaScript CSS library, so I was excited to see this article on Developer.com covering the implementation of AutoComplete in several libraries (including YUI). To ramp up on the YUI implementation, check out Jenny Han Donnelly’s User’s Guide and examples for YUI AutoComplete.
• Simple “show/hide” toggle with YUI: Lustr.nl has a nice codesnippet for a YUI-based show/hide toggle. From their post, “Within applications / websites you want to show and hide elements based on mouse clicks. Instead of defining each ‘toggle’ seperately you can use this toggle function. By adding a ‘rel’ attribute to a link you can define a toggle action. This toggle function also offers animation as an extra.”
• Qollage.com beta released: Online collage-creation site Qollage.com opened up a beta recently and there are numerous sample collages to explore. Qollage takes an aggressive approach to using rich interactions, with a dozen different YUI components included on the page.
  
• Notes on using onDOMReady: Michael James offers some useful notes about the use of onDOMReady (implemented in YUI and elsewhere) — and especially about some things to think about when use of onDOMReady fails at first blush to protect you from the dreaded “operation aborted” error in IE. (If you’re not familiar with onDOMReady, the tutorial text on this onDOMReady example might be of interest.)

Find conversations: bloglines | technorati

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

In the Wild for December 12th

YUI has been in the news a lot the past few weeks. Here are a few of the stories that have caught our attention since Nate’s last “In the Wild” post:

• Responding to the Charts Control: There were many responses to Josh Tynjala’s hybrid Flash-JavaScript YUI Charts Control that was part of the recent 2.4.0 release. Ryan Stewart (of Adobe and ZDNet) was among those noting the significance of tapping Flash within a mainstream JavaScript library: "From what I hear there is still a tremendous amount of resistance to Flash in the Ajax circles of big companies The fact that a major framework like YUI overcame that and chose to leverage Flash is a good sign. It’s also part of a trend. Dojo recently added Silverlight support to their graphics libraries. The various RIA technologies are starting to mix and the result will let people pull strengths from different pots to create the best possible experience for the user."
• Zimbra on YUI Compressor: Over at the Zimbra blog, Kevin Henrikson istalking about migrating to Julien Lecomte’s YUI Compressor for packing their JavaScript and CSS. "We read about the YUI Compressor on Ajaxian. The YUI Compressor is written in Java by Julien Lecomte, like ShrinkSafe it uses Rhino to tokenize, or parse the JavaScript. It achieves a higher level of compression that the Dojo compressor. One of the main reasons is that it will reuse the short tokens unlike ShrinkSafe which keeps an ever increasing counter. In our testing, it didn’t break our code and is careful around eval() so avoids a couple issues the ShrinkSafe compressor hit. Since it’s Java we can call it at run-time and compress Zimlets, for example, on-the-fly. The YUI Compressor also compresses CSS and we use that to help reduce the size of our CSS files that we deliver to the browser. In the end we still gzip both CSS and JavaScript to get the most compression we can. The use of YUI for JavaScript compression is part of Zimbra’s upcoming 5.0 release."
• Web Interface for the Iris Syntax Highlighter: Code-bloggers rejoice: Gustavo Duarte shared on the YUI community forum a web interface for the Iris syntax-highlighting project. Iris is incredibly cool: It supports syntax for 460 syntaxes, outputs W3C compliant XHTML, and (as the project page drolly notes) does "all this for 30% off the regular price of free." Gustavo notes that "there are a lot of YUI components in action: data table, panels, dialogs, tab view, color picker, auto complete (there are ~460 syntaxes), and so on. The page loads in ‘phases’ (based on common usage) so it ends up pretty lean and fast." There are several CSS themes to choose from for code output.
• Bookmarklet for Loading YUI: Gareth Rushgrove blogs about a bookmarklet he created to insert YUI or Dojo on any page you’re browsing: "I’ve put together a couple of bookmarklets which load YUI or Dojo from their respective content delivery networks and insert them into your current browser context. You can then play around with them in Jash or Firebug or any other Javascript console." Sounds like fun. You can grab the YUI bookmarklet here (drag to your bookmarks bar).
• Progressive Enhancement to the Rescue: Ever wonder if all your work on progressive enhancement is worth the trouble? David Walsh has a great example of something good he discovered at Yahoo! Sports when something bad was going on (something that prevented the Sports site’s JavaScript components from loading correctly). Because the team had built the site using solid progressive enhancement techniques, the functionality wasn’t disabled just because JavaScript wasn’t present. Here’s David’s conclusion: "The fantasy football part of this article should really be viewed as secondary. I hope this tale shows proves the importance of website usability. Using cool javascript frameworks like MooTools, YUI, Dojo, Prototype, etc. is a lot of fun, but not always functional. Without Yahoo maintaining page functionality for users without javascript, my user experience at Yahoo! would’ve been very negative. Instead, Yahoo earned my respect." Nice.
• Joe’s Goals: The Joe’s Goals website, written by Ian Smith, was an instant success back in 2006 when it launched, and Ian has updated with improved use of client-side richness. Rey Bango (of ExtJS) interviewed Ian for Ajaxian and Ian had this to say about his use of YUI in the new rev: "Since JG 1.0 there have been a lot of improvements made to the YUI. I’ve tried to rely as heavily as possible on those components this time around and cut out a lot of my own hacked together code. I’m taking better advantage of the panel and animation libraries as well as their connection library. With the connection library I benefit greatly from the ability to tag Ajax calls with specific arguments so I can capture the call backs and programmatically make page changes based on which requests succeeds or fails. The connection library is the best example of this I’ve seen of any Ajax Toolkit."
• Tabbed Content Widget for Blogs: Amanda at BloggerBuster posts a new TabView Widget for blogs based on Matt Sweeney’s YUI TabView Control. She provides a lengthy tutorial to help you get started. While you’re at it, take a look at Nick Bouton’s rounded corners for YUI TabView tutorial; that will help you get just the look you want for your tabs.

Find conversations: bloglines | technorati

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

In the Wild for November 30th

YUIBlog’s “In the Wild” series is our chance to highlight interesting YUI-related content from around the Web. In this installment I’ve pointed to integrations with PHP’s symfony framework, .Net, Perl, and Ruby, as well as some other choice links. Hope you enjoy seeing them as much as I enjoy finding them. As always, please suggest links that we should hightlight in the comments, on YUI’s mailing list, or by tagging them with yui.blog on del.icio.us.

• Matt Berseth, a .Net developer, has been posting prolifically lately, including: YUI DataTable Styled ListView, YUI Styled ‘Tip of the Day’ Dialog using the PopupControl, DynamicPopulate and DragPanel Extender Controls, YUI Style Yes/No Confirm Dialog with the ModalPopupExtender, YUI Style AJAX Progress Indicator, A YUI DataTable Styled GridView, and Creating a YUI TabView Style Theme for the AjaxControlToolkit’s TabContainer Control. It’s great to see people getting so much use out of YUI, and taking the time to share their experiences.

• James Gardner says “The YUI toolkit comes with a very flexible autocomplete control but a common requirement is for an autocomplete control that submits the ID associated with a text value rather than the text value itself, much like a select field submits the option value, not the contents the user selects from a drop down list” and offers up YUI Autocomplete AJAX Select Drowdown with ID as a possible approach.

• Yurii Rashkovskii was “unhappy with YUI Loader because it has no idea about Rails asset_host” so he wrote YUI Loader and asset_host to fill the gap.

• “There is a lot of choice on the CPAN for open source Perl libraries and sometimes it’s difficult to get an idea of how modules compare to each other.” To address this, John Wang used YUI’s DataTable to create CPAN Compare which pulls “the CPAN Ratings from a number of modules and summarize them for you.” For more on the technology behind CPAN Compare, read John Wong’s account on his blog.

• The open-source PHP web framework symfony project now has sfYuiPlugin which “contains the Yahoo! UI javascript libraries”.

• Jakob Heuser (a frontend engineer at Gaia, see Implementation Focus: Gaia) recently released a Just In Time (JIT) Loader script.

• Nick Bouton posted a tutorial based on his experience with rounded corners with YUI TabView.

Until next time, happy coding!

Find conversations: bloglines | technorati

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