Yahoo! User Interface Blog (YUIBlog)

YUI 2.9.0 Release Candidate Is Now Available

The YUI 2.9.0 release candidate is now available for review by the community. The team will be taking the next few days to do a final round of testing, so we’d like to encourage our developer community to get any feeback to us by the end of the week.

The release candidate, YUI 2.9.0 PR4, is available both via the CDN as well as a downloadable package for testing. Please provide feedback by Friday, April 1 on any bugs and regressions you may find.

Find conversations: bloglines | technorati

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

Loader Usage at Quorus

Today, I’d like to talk about YUI Loader and how we at Quorus, Inc., use it to provide third-party websites with new features on demand.

The code we write powers features on other peoples’ pages, meaning we’re in the unenviable position of having not only no control over the browser environment, but heavy restrictions in how we use the document itself. Our customers put a Quorus bootstrap script on their pages; everything else needed for our functionality is loaded dynamically and on demand. We go to heroic lengths to make sure that our elements, styles, and scripts do not alter the behavior of anything we’re not responsible for.

We started our present code base two years ago, when YUI 3 was just taking shape. It was a risky decision at the time to commit to a codebase that wouldn’t hit beta for several months. In retrospect I can’t imagine how we would have accomplished what we have without it. I haven’t seen any other framework that has components approaching the power of Loader, Attribute, and CustomEvent.

The Quorus bootstrap script we provide to our customers does almost nothing. Its job is just to load the core of our platform without blocking the rest of page load, and to queue any API calls until we’ve done so. This core script file, called stage2, inlines yui, loader, and oop, as well as enough smarts to load additional libraries to respond to API calls, user clicks, and other conditions in the operating environment. Most other resources are served by a custom combo server that serves custom Quorus and stock YUI modules.

Bootstrap queues up API calls made in the host site’s code between when it loads and when we’re ready to go in an array on our global object, QUORUS:

QUORUS._callbacks = [];
QUORUS.use = function () {
  // turn the arguments object into a regular array,
  // so that it can be stored safely
  var args = Array.prototype.slice.call(arguments, 0);
  QUORUS._callbacks.push(args);
};

Once we’re ready to process API calls, stage2 runs them one by one in timeouts. This ensures we yield control regularly back to the browser, which makes the user experience more responsive. The behavior is a lot like Y.AsyncQueue, but simpler and doesn’t require YUI to be loaded:

// Put the real 'use' function in place for any subsequent calls:
QUORUS.use = function (feature, callback) {
  YUI.use('module-that-provides-the-feature', function (Y) {
    // find the API for the requested feature, and pass it to the callback
    callback(Y.APIs[feature]);
    // process another pending API call, if any:
    setTimeout(processAPICall, 0);
  });
};

// Play catch-up, running each callback in sequence:
function processAPICall () {
  var callback = QUORUS._callbacks.shift();
  if (callback) {
    QUORUS.use.apply(QUORUS, callback);
  }
}

// Start processing the queue:
processAPICall();

The bootstrap file is, by this point, mostly immutable: it’s something we hand off to a customer, who might require a month or more to deploy any new version we gave them—an impossibly long time for an agile startup company. The stage2 file, meanwhile, is small, loads from our own servers, and has a short cache lifetime. This ensures that no end user will have an old version for more than a few minutes. Nearly all the other resources we need are in permanently cacheable JavaScript libraries and CSS files.

When we release a new version of our code, stage2 automatically directs browsers to start downloading from a new location, ensuring that they use only the newest code. This setup allows us to deploy changes quickly without serving up assets more often than necessary. Not only does this keep our bandwidth costs low, but it provides a better user experience: the cached resources load very quickly while the page is loading.

If we were starting our codebase today, with the benefit of the YUI Gallery, there are a number of components we might use to make our lives easier. One of them is Eric Ferraiuolo’s Base Component Manager, which assists with wiring up components (typically Widgets) on demand. Another might be Storage Lite, to help us retain application state across page loads.

Many thanks to the YUI team for their great work, and to the community for their contributions. If you would like to read about our approaches to sandboxing or to coordinating asynchronously loaded components, please let me know in the comments!

About the author: Peter Abrahamsen writes Ruby and JavaScript, manages server infrastructure, and studies user-centered design in Seattle, Washington, USA. He can be found on IRC as Rainhead.

Find conversations: bloglines | technorati

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

YUI: Open Hours Wed March 23rd

YUI 3 Cookbook first look

It hasn’t been well publicized, but we have a YUI 3 Cookbook in the works and Evan Goer is the man in charge. Evan has been a technical writer for nearly 15 years, which means we trust him to do a better job writing it than we would have (we’ll stick to coding). So this week we’ll introduce you to Evan, and give you a chance to see and give feedback on some of the book’s initial content and structure.

Also this week, Steven Roussey will be on the call, demoing Illuminations plugin for FireBug that allows you to see the YUI 3 objects behind the DOM structure and more.

Time & Details

We’ll be online from 10am to 11am PDT Wednesday. The connection details are the same as usual.

1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
2. Enter the attendee code 47188953#
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email me or catch me (ls_n) in the #yui IRC channel on freenode for a local number.

Find conversations: bloglines | technorati

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

Job Opening on the Yahoo! Media Foundation Team

We are looking for an experienced Software Engineer to join the Yahoo! Media Foundation Front End team. The Front End team is responsible for developing global, shared software components and platforms for Yahoo! Media web sites – Yahoo! News, Yahoo! Finance, Yahoo! Sports, Yahoo! Music, Yahoo! Movies, Yahoo! TV, Yahoo! Video, OMG! and others. Yahoo! Media sites are among the top destinations on the Web, and you’ll play a key role in developing unique and exciting products and services that touch millions of people every day.

Requirements

• Able to work in a dynamic environment
• Fast learner – can quickly come up to speed with different technologies
• Team player – can collaborate with and guide peers
• Must have a strong sense of commitment and responsibility
• Must have strong verbal and written communication skills
• Must have strong knowledge and keen interest in emerging tools and technologies in the industry

Required Skills/Experience

• 5+ years of industry experience
• Must have strong knowledge of object-oriented programming in PHP (preferred), Java, or C++ or similar
• Must have experience with MVC frameworks like Zend, CakePHP, or Symphony (or other) and client-side AJAX
• Must have strong knowledge of JavaScript, OOP JS, CSS and DHTML
• Proficiency in JSON, XML, XSLT, Unix administration, and shell scripting
• Regular expressions, Unix development experience, and Subversion management experience highly desired
• Knowledge and experience with HTML5, CSS3, and emerging presentation technologies highly desired
• Experience with unit testing and/or test automation a plus
• Database, SQL and MySQL (LAMP stack) experience are pluses
• Experience developing and deploying highly efficient, scalable server-side applications
• Excellent debugging and testing skills
• Excellent analytical and problem solving skills
• Computer Science degree or equivalent work experience required

About Yahoo!

Think about impacting 1 out of every 2 people online–in innovative and imaginative ways that are uniquely Yahoo!. We do just that each and every day, and you could too. After all, it’s big thinkers like you who will create the next generation of Internet experiences for consumers and advertisers across the globe. Now’s the time to show the world what you’ve got. Put your ideas to work for over half a billion people.

Yahoo! Inc. is an equal opportunity employer. For more information and to apply please visit http://careers.yahoo.com/jdescription.php?frm=search_results&oid=35901&qs=jcat=8__submit=1, and to search all of our openings please visit http://careers.yahoo.com.

Find conversations: bloglines | technorati

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

YUI: Open Hours Thurs March 17th

Ajax

This week, I want to hijack the hour to talk about Y.io (and friends) and do a little brainstorming on what you all think would make YUI 3′s ajax interfaces the best they can be. I have some thoughts I’d like to share, and we can scan through some existing bugs and feature requests.

Really, though, I want to hear from you what sorts of patterns you tend to implement in the real world, and what sort of API sugar we could add to make your life easier. Because we’ll do it. I swear.

Here’s a sampler from the gallery today:

• REST Resource
• IO Multi-response
• AlloyUI IO and IO Request
• Comet Stream
• JSON-RPC
• IO Poller

Maybe some of the answers are in there? What do you want baked in, and what do you want it to look like?

Time & Details

We’ll be online from 10am to 11am PDT Thursday. The connection details are the same as usual.

1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
2. Enter the attendee code 47188953#
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email me or catch me (ls_n) in the #yui IRC channel on freenode for a local number.

Find conversations: bloglines | technorati

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

YUI 2.9.0 Preview Release Is Now Available

The YUI team has been hard at work closing out the last of our 2.9.0 bugs, and today we’re pleased to announce the availability of a 2.9.0 preview release for testing by the community. Included in this release are numerous bug fixes and targeted enhancements that will help bring closure to the YUI 2 codeline, as well as targeted code changes and documentation updates that make it more difficult for implementers to unintentionally neglect security best practices.

YUI 2.9.0 represents our last bug fix release on the YUI 2 code line before putting it into maintenance mode, when only critical bug fixes and targeted browser compatibility fixes will be considered. We’re truly excited to be able to reach this important milestone, which will help us redouble our efforts onto YUI 3.

YUI 2.9.0 PR2 is available both via the CDN as well as a downloadable package for testing. We hope you can take a moment to test today’s preview release and provide feedback by Friday, March 18 on any bugs and regressions you may find.

Find conversations: bloglines | technorati

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

CSS Border Tricks with Collapsed Boxes

These tricks will help you achieve designs without resorting to the use of images, CSS3 gradient or extraneous markup. By collapsing boxes with zero line-height and height values, we can display content outside of the content box, over borders.

Bi-color background

This example does not include IE 6/7 workarounds (check the source code of this demo page for IE fixes).

.parent {
  display:inline-block;
  text-align: center;
  border: 1px solid #cecece;
}
.child {
  display:inline-block;
  line-height: 0;
  height: 0;
  border-top: 1em solid #ffc;
  border-bottom: 1em solid #fdcf46;
  padding:0 .6em;
  vertical-align:bottom;
}

<ul id="menuBar-A">
<li><a href="#">About Us</a></li>
<li class="selected"><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>

Dots and pipes between list items

This example shows properly across browsers after some simple IE fixes.

ul.one,
ul.two {
    margin-left:0;
    display:inline-block;
    *display:inline;
    zoom:1;
    height:12px;
    line-height:12px;
    padding:0;
}

li {
    float:left;
    display:inline;
    height:2px;
    line-height:2px;
    position:relative;
    top:.3em;
}

ul.two {border-left:1px solid #333;}

ul.one li {border-left:2px solid #333;}

ul.two li {border-right:2px solid #333;}

ul.one li.first-child,
ul.two li.last-child {
    border:0;
}

a {
    color:#000;
    padding:.4em .9em;
    *position:relative;
}

<div id="menuBar-B">
<ul class="us">
<li><a href="#">About Us</a></li>
<li class="selected"><a href="#">Contact Us</a></li>
</ul>
<ul class="ourOffer">
<li class="services"><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>

Left and right-pointing triangles

This example does not include IE 6/7 workarounds (check the source code of this demo page for IE fixes).

#box {
  line-height: 0;
  height: 0;
  border: .4em solid transparent;
  border-left-color: #333;
  border-right-color: #333;
  padding: 0 .3em;
  display: inline-block;
}

<ul id="menuBar-C">
<li><a href="#">About Us</a></li>
<li class="selected"><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>

IE 6 and border transparency

IE 6 does not support the keyword "transparent" for border color. When you use this value, IE 6 draws a black border.

The fix for this is to use the chroma filter which displays a specific color of the content of the object as transparent. For example, to create a right pointing arrow you could use this rule:

#Box {
  height: 0; 
  width: 0;
  border: 10px solid transparent;
  font-size: 0;
  _border-color: pink;
  _filter: chroma(color="pink"); 
  border-left-color: #333;
}

The font-size declaration is another workaround for IE 6. It is to make sure this browser does not increase the height of the box.

Stop the presses! I just learned a new trick (thank you Chungho Fang):

The magic [to create border transparency in IE] is to set ‘border-style’ to either dashed or dotted

That’s it! This is just one more way to use borders to achieve image-less design.

Further reading

• A Study of Regular Polygons
• slantastic
• Slants

Find conversations: bloglines | technorati

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