Yahoo! User Interface Blog (YUIBlog)

YUI PHP Loader Beta Release

The YUI PHP Loader is a server-side utility for loading YUI JavaScript and CSS; version 1.0.0 beta 1 is available for download from YUILibrary.com today.

PHP Loader, originally written by longtime YUI engineer Adam Moore and now developed and maintained by fellow Yahoo Chad Auld, has several key features that make it easier to use YUI in PHP-based applications:

• Reliable, sorted loading of dependencies: You specify the version of YUI that you’re using, the modules you want to use, and PHP Loader outputs the requisite script and css tags for your implementation. Even if YUI’s dependency tree changes in a future version, your code won’t have to.
• Support for performance best-practices: PHP Loader has three strategies to help you reduce HTTP requests — support for the Yahoo! CDN and its combo-handler (which aggregates YUI files into single HTTP requests on the fly), support for YUI’s rollup files, and (in the event you don’t want to serve YUI from Yahoo!’s servers) a lightweight combo-handler of its own. Server-side performance is fast as well, leveraging PHP’s APC cache.
• Extensible metadata format: YUI PHP Loader ships with YUI library metadata (for both YUI 2 and YUI 3); however, the application is generic and can be extended to support your own custom JavaScript and CSS modules — whether or not they use YUI at all.

PHP Loader is simple to use:

include("loader.php");
$loader = new YAHOO_util_Loader("2.7.0");

//Configure your instance; for example, you can turn off rollups
$loader->allowRollups = false;

//Specify YUI components to load
$loader->load("yahoo", "dom", "event", "tabview", "grids", "fonts", "reset");

//Output the tags (this call would most likely be placed in the document head)
$loader->tags();

The above PHP script would output the following to the page:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/grids/grids-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>
*/

Leveraging the combo-handler on Yahoo!’s servers, you can flip the combine setting on…

$loader->combine = true;

…and end up with just a single HTTP request for CSS and one more for JavaScript:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&2.7.0/build/tabview/assets/skins/sam/tabview.css"> 

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/tabview/tabview-min.js"></script>

YUI PHP Loader links:

• Read the documentation
• Download the latest release, including functional examples, from YUILibrary.com
• File bug reports or feature requests on YUILibrary.com
• YUI PHP Loader is hosted on GitHub, where you grab the latest source

Welcoming a New YUI Contributor: Chad Auld

Chad Auld has driven the release of PHP Loader, and big thanks are owed to him for taking ownership of this application and adding a series of fantastic features as he prepped it for this beta release. You may know Chad from his work on MiaCMS and the Sideline AIR application for Twitter search. We’ve been looking for an opportunity to collaborate with him for awhile, and we couldn’t be happier to have that happening on this project.

Find conversations: bloglines | technorati

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

YUI 2.8.0: Storage Utility, ProgressBar Control, Swf and SwfStore Utilities

The YUI team and project contributors are pleased to announce the immediate availability of YUI 2.8.0. This release brings in four new components (Storage Utility, SWFStore Utility, SWF Utility, and the ProgressBar Control) along with hundreds of fixes and enhancements. George Puckett’s release notes for YUI 2.8.0 provide a comprehensive overview of the changes.

New for 2.8.0

Four significant components make their debut in this release:

• Matt Snider’s Storage Utility: Matt is the lead frontend engineer (and the first employee) at Mint.com (which uses YUI extensively; congratulations on their big news today) and the author of a popular JavaScript blog. Matt contributed the Storage Utility for 2.8.0, a meta-component for client-side storage that provides HTML5-style local and session storage interfaces across various storage mechanisms. With this initial release, Storage can employ one of three storage mechanisms: HTML5 Storage, Google Gears, and storage via the Flash Shared Object. With HTML5-capable browsers growing share rapidly, and with the prevalence of Flash as a fallback, this gives you reliable coverage for the vast majority of your users. The Storage API allows you to specify which of these three mechanisms to use and in what order to try them.
• Satyam’s ProgressBar Control: Satyam (Daniel Barreiro) is best known to the YUI community as one of the foremost experts on YUI’s powerful DataTable Control, and he’s the author of important tutorials that have helped tens of thousands of developers make full use of DataTable. He’s also known as one of the most helpful members of the YUI community. With 2.8.0, Satyam contributes a new component, the ProgressBar, that further deepens YUI’s portfolio of UI controls. ProgressBar offers a convenient API, a wide range of custom events, and full support for Animation and its wide range of easing effects.

  

• Alaric Cole’s SWFStore Utility: SWFStore provides the Flash Shared Object functionality to the meta Storage Utility and comprises a JavaScript API for storing text data with FSO. SWFStore supports on-the-fly gzipping of your stored key/value pairs, which helps you get better mileage out of Flash’s 100KB default limit (this can be extended if the user permits). While many developers will use SWFStore in the context of Storage Utility, we’ve also presented it as a standalone feature for those who wish to use it directly.
• Allen Rabinovich’s SWF Utility: In 2.8.0, we’ve broken out Flash detection and embedding functionality into a separate shared utility. We have begun moving YUI’s hybrid Flash/JS components — including Charts and SWF Store — onto Allen’s new base component. (Note: If you only want to check for Flash version, you can independently included the swfdetect module, which populates YAHOO.env.ua.flash.

Additional Highlights

• Cross-Domain Support in Connection Manager: Connection Manager (YUI’s XMLHttpRequest component) gets support for basic cross-domain (XDR) requests in 2.8.0. We have implemented the Flash-based XDR mechanism that was first released as part of the YUI 3 IO component. We’ve also broken out core Connection Manager functionality into a connection-core module, reducing your code footprint if you’re only using the basic XHR capability. Head over to the Configurator to update your dependency list if you want to opt in to this more slender package.
• Event Delegation Support in Event Utility: YUI has long included a detailed event delegation example/tutorial, and we talked up the technique here on YUIBlog back in 2007. With 2.8.0, Todd Kloots has built support for event delegation directly into the library with the new Event Delegate module, bringing 2.8.0 to parity with the event delegation support we delivered in YUI 3.
• Carousel Gets a Gallery: Andres Narvaez and Gamaiel Zavala, frontend engineers for Yahoo!’s media properties, have worked with Gopal Venkatasen to extend the YUI Carousel Control to provide “gallery-style” support with multiple rows of items. At Yahoo!, Andres and Gamaiel have implemented this feature on redesigned video galleries for sites like Yahoo! Sports:

  

• Calendar Adds Support for Year Offsets: The new year_offset configuration property in the Calendar Control provides support for calendaring systems that are fundamentally Gregorian but whose zero-year is different than 0 C.E. (the Thai calendar is one of several such systems).
• Dual Axis Support in Charts: Tripp Bridges has been hard at work on YUI Charts, and among many improvements for 2.8.0 he has added support for multi-axis charts.
  
• Much More: Hundreds of bug fixes and enhancements are included in YUI 2.8.0; George Puckett’s release manifest provides component-by-component details of these changes.

Acknowledgements

Some of the most interesting new work in YUI 2.8.0 (including Matt’s Storage and Satyam’s ProgressBar) come from outside of Yahoo, and community involvement in the project continues to grow month by month. To those of you who contributed timely bug fixes and enhancements in this release, and to the hundreds who helped refine the library through high-quality enhancement requests and bug reports, thank you!

What’s Next?

YUI 2 development and maintenance continues. You can follow this work on YUILibrary.com, where the Roadmap will soon tick over to the priority list for 2.9.0. As bug fixes roll into the YUI 2 development tree, you can follow them in near-real time on GitHub. If there’s anything that’s not moving fast enough for you, fork the repo, sign a CLA, and start making pull requests.

The team remains hard at work on YUI 3, and we’re now finalizing the documentation for the upcoming 3.0.0 GA release that will bring the new YUI 3 core and most utilities out of beta. YUI 3 is also available on GitHub, so feel free to clone the YUI 3 repo and start exercising the upcoming release. Beyond the GA, we’ll continue to work on bringing widgets to YUI 3 on the new Widget stack and making it easier for the community to make contributions across the project.

Find conversations: bloglines | technorati

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

Announcing YUIConf: Oct 28-29, 2009

Mark your calendars! We’re pleased to announce that YUIConf 2009, Yahoo!’s annual front-end engineering conference, will take place October 28 and 29 on our Sunnyvale campus.

We have a stellar lineup of technical sessions coming together for this year’s YUI-themed event, including

• a sneak peek at the latest and greatest evolutions to the YUI library
• deep dives into the core components of YUI 3, such as Node and Event
• the widget infrastructure
• internationalization
• contributing to YUI
• and much, much more!

For the first time this year we’ll be making available a limited number of seats for external developers, so stay tuned for schedule and registration information. Hope to see you there!

Find conversations: bloglines | technorati

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

In the Wild for September 1, 2009

Here are some of the things we’ve noticed in the YUI newstream of late. Did we miss something important? Let us know in the comments.

• Thomas Kjeldahl Nilsson’s ThoughtMuse, a YUI-based Mindmapping Application: Thomas Kjeldahl Nilsson wrote in to tell us about his latest project, ThoughtMuse, which is a web-based mindmapping editor built with extensive use of YUI.  According to Thomas, “The ThoughtMuse mindmap editor leverages the YUI connection manager, drag and drop and JSON utilities, and a wide range of widgets (button, color picker, overlay, panel, dialog, menu). Also, while developing any javascript I always use the YUI Test Utility and Logging Control for automated unit- and integration testing.”  Thomas’s screencast introductiont to ThoughtMuse gives you a good idea of how the interface works:
  
  
• Matt Snider, “Comparing Widget in YUI2 Versus YUI3″: “I have been wanting to do a YUI 2 versus YUI 3 comparison for some time, and it took a while to design a simple example that was complex enough to be meaningful. Anyway, for this comparison I wrote a simple CheckboxList widget, that renders a list of checkboxes and labels from a JSON object. Both versions will require only a DOM node to instantiate, they will include two custom events onCheck and onBeforeCheck, and they will have these public functions: ‘clear’, ‘hide’, ‘render’, ’serialize’, ’show’. The ‘hide’ and ’show’ methods will apply “display:none” and “display:block” to the root node, respectively. The ‘clear’ method will remove the content of the root node and then call ‘hide’. The ‘render’ method will build the HTML from a JSON object and then call ’show’. Lastly, the ’serialize’ method returns the values of the checkbox as an AJAX ready query string.”  Check out the blog post for the results of Matt’s exploration.
  
• Christian Heilmann, “Converting a Data Table on the Web to an Autocomplete Translator W/YQL & YUI”: Chris put up a nice tutorial on how to use YQL to convert tabular data from an arbitrary third party web site into a live datasource for the YUI AutoComplete widget.
• New NatGeo Maps Database Built with YUI: More than 80,000 maps and reports from 370 publishers are available in the National Geographic Map Database Portal, a rich visual UI built with extensive YUI 2.7.0 integration. (Original source.)
  
• YUI Among the JS Libraries in Professional JavaScript Frameworks from Wrox: Ara Pehlivanian wrote the YUI section in the new Wrox book Professional JavaScript Frameworks: Prototype, YUI, Ext JS, Dojo and MooTools.  Thanks to Ara for his hard work on the YUI parts, and congratulations to his coauthors Leslie Orchard, Scott Koon, and Harley Jones for an excellent new tome.
• Matt Snider, “YUI3 Tab Key Managed Widget”: Matt (of Mint.com, and a YUI contributor) writes about a widget he’s updated for YUI3: “The TabKeyManagedWidget was originally a widget I wrote in YUI 2 for the popups on Mint.com. I have changed it a lot sense then, especially in its conversion to YUI 3. The problem we solved, is that sometimes, especially when using in-page popups, one must prevent users from being able to tab through the entire page. So we bound the end-user to a tabbing context, such as a popup or form, preventing the browser from executing its default behavior.”
  
• Salih Gedik (@salihgedik), “How to Create Simple Tabs Using YUI”: A nice intro to the YUI TabView Control.  From the “about the author” box: “[Salih] is a 14 years young programmer from Istanbul. He started programming with JavaScript since he was 10. He is experienced in PHP, ASP, Python, C/++, Basic and beginner level 80X86, JAVA. You can follow him at @salihgedik.”
• Peter Thomas, “Wicket Tutorial: YUI AutoComplete Using JSON and Ajax”: Writes Peter: “Getting an AutoComplete JavaScript widget to work with a server-side framework involves a few more steps and integration points than what it would take for e.g. a simple date-picker widget. It makes for an interesting example that shows off the strengths of Apache Wicket when it comes to creating custom components – especially when Ajax and integrating third-party JavaScript and CSS is involved.”
• MLA Citation Helper from Pras Sarkar: If you’ve ever slogged through the creation of a bibliography in MLA format, you’ll appreciate this Citation Helper from Yahoo engineer Pras Sarkar.  It’s based on YUI 3 and the source code is available on GitHub.
  
• YUI-Shed on Using Prototype.js with YUI: Writes YUI-Shed: “There are many reasons why you might use prototype.js with yui. You may be moving to Yahoo User Interface, or vice versa, or you may just prefer some flexibility. Whatever the reason, there are some good points to using the two together. I have pointed out several times on this blog and Practical Prototype that I personally prefer this method. I use YUI for the widgets, and use prototype for setting up classes, events, and other low level organization.”
• Jim Driscoll, “Making a YUI Calendar Component in JSF2″: Jim follows up on his recent YUI Calendar/JSF article with a new piece that focuses on moving the implementation into a JSF component.

Find conversations: bloglines | technorati

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

September 8 BayJax Meetup at Yahoo!: Nicholas Zakas on Scalable JavaScript Architectures and Isaac Schlueter/Matt Hackett on Server-Side JS

BayJax September is here! Once again, Yahoo! is hosting BayJax, the Bay Area Ajax and JavaScript meetup. We have some great talks lined up. Join us on September 8th at 7pm in Classroom 5, Building C on the main Yahoo! campus.

Thanks to everyone who helped make July’s event a success, and we hope to see you again this month! Attendance is free, but seating is limited.

To RSVP for the event, head on over to http://www.meetup.com/BayJax/calendar/11258377/.

Featured Speakers

• Nicholas C. Zakas, “Scalable JavaScript Application Architecture”: Choosing a JavaScript library is only the first step in the process of creating a large, scalable web application front-end. Building an application framework on top of a JavaScript library empowers your development team, makes your code more maintainable, and allows surgical updates to existing code without risking overall application stability. You’ll learn all you need to know to start building your own JavaScript application framework using real-world examples as a guide for design decisions.

• Isaac Schlueter and Matt Hackett, “Jic-Jack-Jo: A multiplayer web game using server-side Javascript”: Narwhal is a cross-platform, multi-interpreter, general purpose JavaScript platform that implements Mozilla’s CommonJS Securable Modules standard. Jack is a collection of server-side javascript modules inspired by Ruby’s Rack platform and Python’s WSGI protocol. Jic-Jack-Jo is a multiplayer tic-tac-toe game built from top to bottom in JavaScript, a proof of concept showing how easy itis to build interesting things on this platform.

Presentations by Jon LeBlanc and Douglas Crockford from the July BayJax event at Yahoo! are available on YUI Theater.

Find conversations: bloglines | technorati

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