YUI 3.8.0 - Y.Color, Templates, and more!

By YUI TeamDecember 12, 2012

We are pleased to announce the availability of YUI 3.8.0. It is available via Yahoo! CDN (or download) and on npm. We have also updated our website to reflect the changes and new features of 3.8.0. The highlights of this release are listed below, inspired by the original 3.8.0pr1 announcement from Eric Ferraiuolo.


With this release we have a new utility called Y.Color which has been elevated from a DOM helper sub-module and expanded in features. This project is led by Anthony Pipkin who explains the reasoning behind this change:
"Working on Color brought its share of challenges, but was very exciting to work on. The main objective with Color was to address color conversion between hexadecimal, RGB, and HSL color spaces. There was an undocumented hexadecimal and RGB conversion utility in YUI3 under DOM, but we needed to surface this utility and add documentation along with a few useful examples. Another focus for Color in this release was a set of color harmony methods to be used in the new widget skinning tool (Skinner)."

Y.Color has methods to allow conversion between hexadecimal, RGB, HSV, and HSL color values. HSL and HSV conversion methods are provided by sub-modules, this way you only have to load the modules you need.

We created the Color utility to be extensible. New color models can be defined by providing a regex for matching, a string template, and any conversion methods.

An exciting feature of the Color utility is the support for color theory, which is provided by the color-harmony module. These features enable you to match one color to another color’s perceived brightness, get similar colors to one that’s supplied within a certain range, find complementary colors, etc.

Check out the websites demos: 'RGB Slider', 'HSL Color Picker', 'HSL Harmony', and Jeff Conniff's 'Skinner Demo'.

Template and Template.Micro

Ryan Grove has contributed new templating utilities to YUI. Y.Template is a class which provides a generic template engine API, and Y.Template.Micro is a static class which provides a simple micro-templating engine. Y.Template can be used to compile, precompile, render, and revive precompiled templates using Handlebars or Y.Template.Micro.

Ryan explains the origin of these templating utilities:

"While working on a new widget recently, I found myself wanting a string-based templating solution that was more advanced than Y.Lang.sub() or Y.substitute(), but without the overhead of Y.Handlebars. I needed support for interpolation, if/else branching, and looping, but only for a few very small templates. Underscore-style templates (more familiar as ERB-style templates to Rubyists) seemed like exactly the right fit."

Y.Template.Micro is a string-based micro-templating language similar to ERB and Underscore templates. Template.Micro is great for small, powerful templates, and its compilation engine is extremely fast with a small footprint.

Compared with the features of Handlebars, Template.Micro is much simpler. Using the generic engine API provided by Y.Template, Micro and Handlebars templates can be used interchangeably. This gives you a powerful way to customize a component's Handlebars templates by overriding them with Micro templates, and not incur the cost of loading the handlebars-compiler module (which is 9KB minified and gzipped).

Attribute and Base Observability Refactoring

Back in YUI 3.5.0, the features of Y.Attribute were extracted out into smaller sub-components, each with a single reasonability: Y.AttributeCore, Y.AttributeEvents, Y.AttributeExtras. Y.Attribute was then redefined using these parts. At that time we also did a similar refactoring of Y.Base and extracted Y.BaseCore, a base class sans events.

Today we are codifying the concept of "observability" at the Attribute and Base levels. Instead of using the description "has events", we're now referring to a component's qualities, i.e., "is observable". This distinction is a better match for how Y.AttributeObservable (formerly Y.AttributeEvents) and the new Y.BaseObservable class extension are used and applied.

Certain components in your app will benefit from the ability to have their lifecycles and attribute changes observed by other parts of the system, but other components will incur an unnecessary overhead and don't require these abilities.

This refactoring, combined with updates to Y.Base.create/mix() which allow it to be used with Y.BaseCore (and BaseCore subclasses), means that observability can be added to class at any time by mixing in the new Y.BaseObservable extension.

Work is continuing on Attribute and Base performance. Look for more improvements in upcoming releases.

ScrollView Enhancements

ScrollView has received minor enhancements for this release, including fixes for a couple pagination bugs. This release returns the pagination features back to the pre-3.7.0 behavior, which requires a distance threshold of at least 50% to trigger moving to the next "page".

A special thanks to Juan Dopazo for contributing a fix for ScrollViewPaginator's scrollToIndex() method, which now properly respects animation duration and easing options.

Other Changes

While describing every change in this release would take quite some time, there are a few other updates worth noting:

  • In App Framework, a minor fix to decode URL-encoded path matches for Router's req.params.
  • In Cookie, a fix to make the order of cookie loading with the same name configurable.
  • In Pjax, fixed an issue where Pjax would throw an error because of calling methods on null nodes when and IO request was aborted (which happens to pending requests when a new request comes in).
  • In Charts, stonebk contributed a fix for an issue when click events were not firing on elements outside of chart in ios.

Check out the Change History for more details on this release.

New and Improving Tools

Finally, there are a number of new tools in development around this time that you should check out:
  • Skinner uses Y.Color to build customizable skins for YUI. Recent updates include improvements in text readability, visually richer gradients, vendor specific CSS for gradients, and the ability to render Sam and Night skins!
  • yogi not only allows you to build and test files for YUI, but also allows you to build, create, and test Gallery components, even in your own repo!
  • Grid Builder allows you to rapidly create responsive YUI3 Grids. It's now a YUI project on GitHub so feel free to submit pull requests, request features, or post any issues that you may be having. Recent changes include the ability to directly edit the values of the media queries for custom sizes, improved documentation, and a new example.