Blog: Archive for November, 2010

|

YUI Theater — “YUIConf 2010 Panel Discussion: The Future of Frontend Engineering” (79 min.)

A panel of thought leaders and influencers in the world of frontend engineering on stage at Yahoo for a special panel discussion at YUIConf.

One of the highlights of YUIConf 2010 was a panel discussion on the future of frontend engineering, facilitated by Dion Almaer and Ben Galbraith (of Ajaxian, Bespin, Mozilla, and Palm fame). Panelists included Elaine Wherry, founder and frontend architect at Meebo; Douglas Crockford, JavaScript architect at Yahoo!; Tantek Çelik, technologist and author; Ryan Dahl, creator of Node.js; Joe Hewitt of Facebook, creator of Firebug and one of the most downloaded mobile applications of all time (Facebook for iOS); Thomas Sha, YUI founder at Yahoo!.

Our thanks to all of the panelists and the moderators for a memorable evening.

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.

Other Recent YUI Theater Videos:

  • Alois Reitbauer: dynaTrace Ajax Edition — dynaTrace provides one of the most powerful tools for analyzing the performance of web applications in Internet Explorer. In this talk, dynaTrace engineer Alois Reitbauer walks through four specific analytic scenarios using the dynaTrace interface.
  • Dav Glass: Using Node.js and YUI 3 — YUI 3 and Node.js, working together, help us fully realize the promise of progressive enhancement (and a lot of other cool stuff). Dav Glass of the YUI team shows how it’s done and what’s possible using these powerful tools together.
  • Ryan Grove: Achieving Performance Zen with YUI 3 — Following codified guidelines [http://developer.yahoo.com/performance/] can help you build fast websites, but building applications that are clean, fast and extensible also involves taking a balanced approach to performance at every level of your F2E work. YUI 3 is designed to help you in this process, providing a right-sized abstraction layer with built-in performance magic and a variety of tools that make fast frontend code easy and fun to produce. In this session, we’ll explore the zen of performant JavaScript in the YUI 3 world and introduce you to some of the powerful tools YUI 3 puts at your disposal in every app you write.
  • Douglas Crockford: Crockford on JavaScript — Scene 6: Loopage — Software development is hampered by a specific set of design mistakes that were made in the first programming languages and repeated in everything that has been done since. And, somewhat miraculously, JavaScript is going to make it right, radically transforming the way we write applications. Again. In the Loop of History, it has all happened before, but it has never happened like this. This is why you should care about the emergence of server-side JavaScript and the excitement around projects like Node.js — not because they’re at the sharp end of a trend, but because they’re paving the road toward the next big revolution in software.

Subscribing to YUI Theater:

CC photos used in the pre-roll slide:

Photos used by kind permission:

By Eric MiragliaNovember 17th, 2010

CSS Quick Tip: Inline Boxes with Bottom Alignment

The challenge

Keeping a submit button at the bottom of a line box, aligned with form controls positioned below their label (Figure 1).

Figure 1: The submit button is aligned with other from controls

The tricky part

If the containing block is not wide enough for the submit button to flow next to the other controls, that button must show at the beginning of the next line box (according to RTL/LTR context) with minimal space above it (Figure 2).

Figure 2: The submit button wraps to the next line, below the other controls

The solution

display:inline-block allow us to keep everything in the flow and at the bottom of the line box. This is because inline-block generates a block box (see 9.2.4 The ‘display’ property), which itself is flowed as a single inline box, similar to a replaced element (i.e. an image).

The Markup

We group label and control pairs inside divs. 

<form>
   <div>
   <label></label>
   <select></select>
  </div>

   <div>
   <label></label>
   <select></select>
  </div>

   <div>
   <label></label>
   <select></select>
  </div>

  <div>
   <input /> 
  </div>
</form>

The CSS

label {display:block;}
div {
  display:inline-block;
  margin:0 10px 10px 0;
  *display:inline;
  zoom:1;
}

To position the controls below their associated label, we style the labels with display:block (without this, these elements would show side-by-side).

Note that styling the labels as block does not make them expand across the form, but only across their parent boxes – which share the same line box. This is because the inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.

The two last rules are for IE 6 and 7 which do not support inline-block. For these browsers, we need to style the divs as inline and use zoom. Note that this hack is not as robust as the real thing because a nested (non replaced) element with a layout will break everything, sitting on its own line inside the form. So, unless you plan to give such nested elements a width, do not give them a layout.

The Demos

By Thierry KoblentzNovember 15th, 2010

Improving perceived site performance with spinners

At the London Ajax meetup this week, Piotr (one of the creators of the rather good jsfiddle.net talked about spinners — the pretty common “I’m doing something” indicator — and how users perceive them.

Apparently, people perceive Chrome to be faster in part because the little activity indicator keeps changing — it appears and disappears, and changes speed — while a page is loading. This sense of something happening persuades people that something is in fact happening, and faster, even if the actual speeds are identical.

So Piotr set up a randomized survey, comparing perceptions of load speed after clicking two buttons — it’s here if you’re interested. When you click the button there’s a delay before the spinner is shown, and then a short (random) time later the results are shown. Then you click another button, and the same thing happens. And then you say which was faster. He also allowed for a “this thing seems broken option”. (If you’re going to do the survey, do it now and then come and read the conclusions — I don’t want to spoil it for you!).

The results are here. The conclusion is that by delaying the display of the spinner slightly, users perceive things to be happening quicker. But wait too long and they start to think something’s broken — 0.4s seemed to be the optimal delay, from the survey results. And it may be worth thinking about other indicators if things take longer — add a “loading…” text overlay after 1 sec, perhaps.

By Matt ParkerNovember 11th, 2010

Introducing the New YUI Test

When YUI Test first debuted over three years ago, the JavaScript testing landscape looked very different. JsUnit was the de facto standard and there was very little interest or attention paid to this area. YUI Test began as a weekend project of mine and evolved into one of the most complete testing frameworks available, being the first to have full event simulation for keyboard and mouse events across all A-grade browsers and one of the first to support asynchronous testing.

Since the time that YUI Test was first released, there has been an increased level of interest in JavaScript testing as organizations small and large came to realize its value. Every major JavaScript library now comes bundled with a set of unit tests as well as a test runner, which is a huge step forward for these libraries. Additionally, a series of testing utilities has made its way into the world of JavaScript testing. As a result of these changes, it was time for YUI Test to evolve.

Today we’re announcing a new YUI Test project. The goal is to create a complete JavaScript testing solution that encompasses all parts of the testing process.

YUI Test Standalone Library

One of the original goals of YUI Test was to eliminate most of the common complaints about JavaScript testing. In my travels, I received a lot of positive feedback about the ease with which tests could be setup. I also received some comments from users of jQuery, Dojo, and other JavaScript libraries that they’d like to use YUI Test but felt they couldn’t because they weren’t using YUI itself. Even though it is possible to test non-YUI code with YUI Test (here’s an article talking about using YUI Test with jQuery), there was still a perception that YUI dependencies meant you must use YUI if you wish to use YUI Test. Considering that feedback, in addition to the trend towards standalone JavaScript testing tools, it seemed that the best way to address the concerns was to eliminate YUI as a dependency altogether. With that thought, the YUI Test standalone library was born.

The standalone library is a superset of all features from YUI Test for YUI 2.x and YUI Test for YUI 3.x. This will then allow us to use the standalone library as the core of both versions of YUI Test. In the end, there will officially be three flavors of YUI Test to use: 1) the standalone library if you’re not using YUI, 2) the YUI 2.x version, and 3) the YUI 3.x version. All three will share the exact same functionality but with different interfaces so that already-existing tests continue to work.

YUI Test Selenium Driver

Another major shift that happened in the past few years was a movement towards continuous integration and automated testing. For any large code base, the ability to automatically run tests at regular intervals is a must-have. The big challenge for JavaScript testing has always been how to run your code in as many browsers as possible and aggregate the results in some sort of usable format. This is where Selenium comes in.

Selenium is a testing tool widely used by QA organizations for functional testing. The interesting part of Selenium as it relates to JavaScript testing is its ability to start up a browser, execute some commands, and then shut down the browser. This capability, plus Selenium’s already impressive usage and availability in organizations, made it an ideal tool upon which to build the first test driver for YUI Test.

The YUI Test Selenium Driver is designed to interact with a Selenium Remote Control or Selenium Grid server to enable testing of JavaScript across multiple browsers. Using the command line, you can specify a Selenium server, browsers to run tests on, and which test files to execute. The Selenium Driver then takes over, executing the tests and collecting the results in JUnit XML format. Although other formats are available, JUnit XML is used as the default due to its wide support in test reporting and continuous build tools such as Hudson.

YUI Test Coverage

Once you have your tests and are able to execute them automatically, the next part of the puzzle is to determine how much of your code is actually being tested. YUI Test Coverage is a code coverage tool for JavaScript that tracks which lines of code and which functions are actually executed in your JavaScript. It does this by creating an instrumented version of your JavaScript code that keeps coverage statistics. This file is used while executing tests to gather statistics, and at the end, you have a report indicating which lines of code were executed. Coverage data helps you determine where more tests are needed to properly exercise all code paths.

YUI Test Coverage is designed primarily for use in a continuous integration system, though you can get access to the coverage data programmatically as well. YUI Test Coverage is also designed to work with YUI Test Selenium Driver so that code coverage statistics are automatically gathered when available.

Help us!

This release of the YUI Test project is considered 1.0.0 beta 1, which means we need your help and feedback to reach a final 1.0.0 version. The source code for all of the YUI Test project is now available on GitHub and you can find project details and file bugs at YUILibrary.com. Documentation for the testing tool is on YUILibrary.com, and you’ll find additional documentation and examples in the download. YUI Test is released under YUI’s BSD License.

There are a lot of details to discuss about the new project, and this post is really just an introduction to the new project. A lot more documentation and information is forthcoming as the project continues to evolve.

By Nicholas C. ZakasNovember 9th, 2010

A Status Check on the YUI 2-to-3 Transition

The YUI 2 JavaScript and CSS library has been an enormously successful product in the four-plus years since we released it in 2006. YUI 2 distributions have been downloaded more than 2 million times, and thousands of developers today use YUI without ever downloading the files, pulling instead from either the Yahoo! or Google CDN.1 YUI traffic on the Yahoo! CDN has grown steadily over the years since we made it public, and today we estimate that yui.yahooapis.com is serving about 15 billion files monthly.

It’s no secret, though, that YUI engineers at Yahoo! are spending most of their energy today working on YUI 3, the successor project to YUI 2, and one that applies many of the lessons learned by YUI engineers in the years we spent building YUI 2. YUI 3 today is robust and feature-rich. At the utility level (animation, XHR, drag and drop, etc.), it exceeds the functional level of YUI 2. At the widget level, where YUI 2 has been popular with its wide portfolio, YUI 3 is still catching up. YUI 2′s DataTable, Editor, Menu, Button and Calendar are still the standard, and YUI 3 users looking for equivalent functionality today are guided to the YUI 2-in-3 project, which allows you to easily include and utilize YUI 2 from within YUI 3 implementations. This is easy and safe, but it’s also not optimal: We’d prefer not to switch between the two APIs, and we’d prefer not to incur the runtime overhead of loading two library cores.

As we prepare for next week’s YUIConf 2010, it seemed like a good time to review the status of the YUI 2-to-YUI 3 transition. We’re a little over a year into the YUI 3 era, and not quite a year out from the YUI 3 Gallery‘s launch. Between the YUI team at Yahoo! and those of you in the YUI community contributing components (nearly 100 contribitors in total), how are we doing?

The answer may surprise you.

With projects like LifeRay’s AlloyUI and dozens of independent contributors populating the Gallery, we now have more options available even at the widget level in YUI 3 than we shipped with YUI 2. The table below matches functionality between the two libraries and gives a sense of how the two libraries compare in terms of functional categories. Caveats:

  • Few rows are 1:1 comparisons. When I say that functionality is supported, I don’t mean that it is supported in exactly the same way or at the same feature level in both codelines.
  • All unsupported features in YUI 3 can be accessed via YUI 2-in-3.
  • Where I’ve indicated that something is supported via community/Gallery, I’m not suggesting anything about the feature completeness of the Gallery content — merely that the community has responded to that need and produced and shared a solution.
  • This table includes only a fraction of the content that is in Gallery. A truer picture, including all Gallery content, would show YUI 3 dwarfing YUI 2 in terms of component options. I’ve confined myself here to the baseline functionality of YUI 2, its equivalent in YUI 3, and major new developments in the YUI 3 world (including major component categories that have emerged in Gallery).
Core Components
Component YUI 2 YUI 3 Notes
Library Core Yahoo Global Object YUI module Some of the YUI 2 functionality has moved to other modules — oop and lang.
Loader YUI Loader Loader module YUI 3′s Loader is intrinsic (will be invoked automatically) and includes support for Gallery.
DOM support DOM Collection Node module YUI 3 is “node-centric” — working via the Node API is a paradigm shift between YUI 2 and 3.
Browser and Custom Events Event Utility Event module
Component Foundation
Component YUI 2 YUI 3 Notes
Attribute management AttributeProvider Attribute module
Event management EventProvider EventTarget in the Custom Event module
Component base Base module
Extension model Base module
Plugin model Plugin and Plugin Host modules
Widget foundation Element Utility Widget module YUI 2′s Element Utility lacks the lifecycle pattern for component development contained in the YUI 3 Base/Widget system.
Utilities
Component YUI 2 YUI 3 Notes
Ajax/XHR Connection Manager Utility IO module
Animation Animation Utility
  • Animation module
  • Transition module
 YUI 3 adds support for CSS transitions via the Transitions module, supporting hardware-accelerated transitions where supported.
Asset Prefetching Caridy Patiño Mayea’s Preload module
Asynchronous Queueing AsyncQueue module Support for a chain of function callbacks executed via setTimeout. YUI 2′s delivery of this functionality is not split out sufficiently for general use.
Authentication Dav Glass’s oAuth module
Cache Cache module Support for storing key/value pairs in local JS memory.
Cookie Cookie Utility Cookie module
Data Management DataSource Utility
  • DataSchema (beta)
  • DataSource (beta)
  • DataType (beta)
 There is not exact feature parity between the two (for example, queueing is not supported in YUI 3; YUI 3 modules remain in beta.)
Drag and Drop Drag and Drop Utility DD module
Event Extras
  • Event delegation
  • Event simulation
  • Event delegation
  • Event simulation
  • Gestures
  • Synthetic events
  • Touch events
 YUI 3′s event support exceeds the YUI 2 branch, with a good abstractions for touch and gestures.
Form Validation InputEx Field/Form Framework The YUI 3 Gallery has too many form-related modules to list here — one group is from the prolific developers of AlloyUI, and there are many more from other contributors.
Geolocation Mikael Abrahamsson’s Geolocation module
Get (script/CSS loading) Get Utility Get module
History management History Utility History module YUI 3′s History module includes HTML5 support.
ImageLoader (smart deferral of image load) ImageLoader Utility ImageLoader module
Internationalization varies by component Internationalization module YUI 3′s i18n model is more robust, but there is work to do to realize all of its benefits throughout the widget system.
JSON JSON Utility JSON module YUI 3 includes the JSONP module which provides a facility for working with JSONP callbacks from within YUI 3′s sandbox patterns.
Resize Resize Utility AlloyUI Resize The AlloyUI implementation in Gallery has been adopted into the library core and will be part of the 3.3.0 release.
Storage (client-side) Storage Utility (includes Flash fallback) Storage Lite Storage Lite does not support a Flash fallback.
Stylesheet (manipulation via JS) Stylesheet Utility Stylesheet module
SWF management SWF Utility
SVG Support
Undo/Redo Support Iliyan Peychev’s Undo/Redo Framework module
YQL wrapper YQL Query module
UI Widgets
Component YUI 2 YUI 3 Notes
Accordion As a YUI 2-based widget, Marco’s component is not in the YUI 3 Gallery formally.
AutoComplete AutoComplete Control YUI 3 AutoComplete will ship with YUI 3.3.0. Don’t overlook the AlloyUI component here, though — it is feature rich and ready to use today.
Button Button Control Anthony Pipkin’s Button module
Calendar Calendar Control AlloyUI Calendar Calendar widget/date selection is not expected as part of the YUI 3 distribution until 3.4.0 or later; the AlloyUI implementation, however, is an excellent choice for the common use cases.
Carousel Carousel Control Gopal Venkatesan’s Carousel module Gopal has owned the YUI 2.x Carousel codebase for a long time, and his YUI 3 Gallery module will be in production Yahoo! products this year.
Charts Charts Control Tripp is one of the authors and the maintainer of the YUI 2 Charts Control, which is Flash-based. The YUI 3 Charts work, which does not rely on Flash, is being pushed to Gallery on a regular basis and Tripp’s work to-date will ship in beta as part of YUI 3.3.0.
Color Picker Color Picker Control AlloyUI Color Picker
DataTable DataTable Control Anthony Pipkin’s Simple Datatable module Anthony’s project, which includes a few plugin modules, is not meant to have feature parity with the ambitious YUI 2 DataTable Control. The work being done by the YUI team on YUI 3 DataTable will appear in beta form in 3.3.0.
Image Cropping ImageCropper Control
Layout (full screen application management) Layout Manager
Menuing Menu Control Simple Menu is not as feature rich as the comprehensive menuing support provided in YUI 2. At present, the YUI team plans work on a YUI 3 menu control for the 3.4.0 timeframe. Node MenuNav is part of the YUI 3 distribution, but it remains in beta and may be deprecated in favor of new work on a formal UI control.
Overlays Container Family
Pagination Paginator Control John Lindal’s Paginator Port module
Progress Bar ProgressBar Control Satyam wrote the YUI 2 ProgressBar Control; his YUI 3 implementation is not in the Gallery, but it is available for use.
Ratings
Rich Text Editing Rich Text Editor Simple Editor Port YUI 3.3.0 will contain the base Editor content that Yahoo! is using in the new Yahoo! Mail beta — which is the most advanced Editor we’ve produced as part of YUI. However, the Editor toolbar (which is an important part of the component for most implementers) will rely on Button and Menuing functionality that won’t appear until at least 3.4.0.
ScrollView ScrollView module This is an important component for mobile development.
Slideshows This category is a good example of what the YUI Gallery can become. Whereas we never had a strong YUI 3 slideshow component, we already have four excellent modules to choose from in the YUI 3 world.
Sliders Slider Control YUI 3.3.0 will contain an interesting new addition to the slider interaction pattern, courtesy of Yahoo! designer and engineer Jeff Conniff. Stay tuned for more on this as 3.3.0 preview releases appear.
Tabs TabView Control TabView module
Trees TreeView Control Yahoo! engineer Gonzalo Cordero is currently working on a YUI 3 TreeView implementation. While it will not be ready for 3.3.0, it is expected to be available in the Gallery after the 3.3.0 release and be a candidate for the distribution as early as 3.4.0.
Uploader (multi-file uploading with progress tracking) Uploader Control Uploader module Both YUI 2 and YUI 3 implementations require Flash.
Video (HTML5)
CSS Components
Component YUI 2 YUI 3 Notes
Reset CSS Reset CSS Reset
Base CSS Base CSS Base
Fonts CSS Fonts CSS Fonts
Grids CSS Grids CSS Grids The new, more flexible YUI 3 CSS Grids package was released in 3.2.0.

Notes:

  1. The YUI 2 Dependency Configurator can help you design your script and css includes for either Yahoo! or Google CDNs.
By Eric MiragliaNovember 5th, 2010

Graded Browser Support Update: Q4 2010

This post announces an update to Graded Browser Support, Yahoo!’s recommended browser testing matrix. The GBS page on the YUI site always has the most current GBS table. This post includes:

Reminder: Graded Browser Support is a QA philosophy, not a report card on the quality of popular browsers. It is designed to provide guidance for QA teams about how best to use their limited testing resources (and to frontend engineers about how to sanely cross-check work across a finite set of browsers). The goal is to be conservative and calculating: We want to test the smallest possible subset of browser/platform combinations, leveraging implicit coverage by testing the most commonly shared core browser engines.

GBS Changes for Q4 2010

Specific changes for Q4 2010 include:

  • Revised support for the fast-iterating Chrome browser; Chrome A-grade testing coverage is now recommended for the latest major, stable version of the browser on Windows XP.
  • Dropped A-Grade coverage for Firefox 3.0.† (moves to X-grade).
  • Dropped A-Grade coverage for Safari 4 on Mac OS 10.5.† (moves to X-grade).
  • Updated Safari coverage to 5.† on Mac OS 10.6.
  • Initiated A-grade coverage for WebKit browsers on iOS and Android OS.
  • Forecast A-grade coverage for Firefox 4.† and Internet Explorer 9 on Windows 7 upon their GA release.
  • Addition of Firefox versions prior to 3.0 to C-grade list.
  • Forecast discontinuation of A-grade coverage for Internet Explorer 6 in Q1 2011; we expect to move IE6 to the C-grade browser list as of the next update.
Win XP Win 7 Mac 10.6.† iOS 3.† iOS 4.† Android 2.2.†
Safari 5.† A-grade
Chrome † (latest stable) A-grade
Firefox 4.† A-grade (upon GA release) A-grade (upon GA release)
Firefox 3.6.† A-grade A-grade A-grade
IE 9.0 A-grade (upon GA release)
IE 8.0 A-grade A-grade
IE 7.0 A-grade
IE 6.0 A-grade
Safari for iOS A-grade A-grade
WebKit for Android OS A-grade

Notes:

  • The dagger symbol (as in “Firefox 3.6.†”) indicates that the most-current non-beta version at that branch level receives support.
  • Code that may be used on pages with unknown doctypes should be tested in IE7 quirks mode.
  • Code that may appear in IE8′s “compatibility mode,” which emulates but is not identical to IE7, should be tested explicitly in compatibility mode.
  • No guidance is given on iOS or Android OS device usage. The recommendation is that you choose a device most representative of your user base for each OS.

C-Grade Browser List (Draft)

This list represents browsers from which CSS and JavaScript should be withheld. This list remains in draft status.

  • IE < 6 (including Mac OS versions)
  • Safari < 3
  • Firefox < 3
  • Opera < 9.5
  • Netscape < 8

GBS Forecast

We expect to make the following changes in the Q1 2011 GBS update:

  • Discontinue A-grade for Internet Explorer 6, moving it to C-Grade.
  • Discontinue A-grade for Firefox 3.6.† on Windows XP.
  • Move Chrome support from Windows XP to Windows 7.

Discussion

This update implements the guidance we provided in Q1 2010. Of interest in this update:

  1. Internet Explorer 6: We are forecasting the transition of Internet Explorer 6 from A-grade to C-grade in the next GBS update. The calculus here is simple: The proliferation of devices and browsers on the leading edge (including mobile) requires an increase in testing and attention. That testing and attention should come from shifting resources away from the trailing edge. By moving IE6 to the C-grade, we ensure a consistent baseline experience for those users while freeing up cycles to invest in richer experiences for millions of users coming to the internet today on modern, capable browsers. Note: This forecast should not be taken as an indication that IE6 users will see an abrupt change in their experience of Yahoo! websites in Q1 2011; the change in philosophy toward IE6 will be reflected in new development and products and applied in ways that make sense based on product needs.
  2. Chrome: Chrome has been progressing rapidly through versions, and Google has communicated its intent to continue rapid development and short release cycles. As a result, we’ve modified our GBS strategy for Chrome to advise testing on the latest GA release of Chrome as soon as it is issued, with prior versions moving to X-grade as soon as they are superseded.
  3. Mobile: We’re taking a conservative approach to the addition of mobile browsers to the QA matrix, beginning in this release with the current Android version (2.2) and the two latest releases of Apple’s iOS (which covers the current OS version for iPad and iPhone/iPod Touch devices). We recommend including devices running these operating systems at minimum in your QA battery. Depending on your resources and your focus, you may want to be much more aggressive in supporting variants of Android and other operating systems (like Palm/HP’s WebOS). This GBS recommendation provides a testing surface of 15 browser/platform combinations (once IE 9 and Firefox 4 reach GA), bringing in this first wave of A-Grade mobile browsers while keeping the testing surface at a level consistent with previous quarters.

The GBS Archive

By Eric Miraglia and Matt SweeneyNovember 3rd, 2010

In the Wild for November 1, 2010

YUIConf 2010 is just around the corner, and we can’t wait. Here are some things we’ve noticed in the meantime:

  • YUI 3 on the New Yahoo! Mail Beta: Mike Curtis writes about YUI 3 usage on the new Yahoo! Mail beta in a YDN blog post: “For JavaScript, we decided to use YUI3. Yahoo! Mail Beta is built using the YUI framework from the ground up. One of the great benefits of YUI is that it’s modular, allowing us to pull in libraries as needed as opposed to downloading everything up front. Modernizing the markup and using YUI3 for JavaScript reduced total download size for the application by 35 percent, a huge performance win.” Check out the full article here. #
  • Sam Stephenson Releases Hork: Sam Stephenson from 37signals, author of the Prototype JavaScript library, has released a new project called Hork. According to Sam, “Hork is a little Rack middleware for transparently compressing JS & CSS assets with YUI Compressor.” (Original source.) #
  • Guild Wars 2 Site Launched with YUI 3.2.0 + Gallery: Pat Cavit (@tivac) wrote in to tell us about the new Guild Wars site. “We launched http://hom.guildwars2.com which is a fully YUI 3-powered site. It takes advantage of Eric Ferraiuolo’s overlay plugins, Ryan Grove’s history module, a few custom-built (now in the gallery) anim plugins, a generic animation module), [and] all sorts of loader/base/event stuff. It also heavily uses the new transition module.” (Original source.) #
  • “Learning YUI Pt.3 – SimpleYUI and Exploring the API” (via @triptych): Andrew Wooldridge continues his series of tutorials on YUI 3, this time with a look at SimpleYUI and Y.log. “SimpleYUI is like getting one of those cheese samplers in the mail. You dont have to go for a big commitment, but you can try out a lot of things without worrying about a lot of the safeguards you might later want to have. I have created a landing page for SimpleYUI, but in summary its like getting to play with YUI without worrying about all that .use() stuff, or anonymous functions, etc. It’s a lot like how you might have experienced jQuery for the first time. You get a lot of powerful functionality up front, and you only need a single js + a few lines of code to get started. For some great examples, check out this page from Eric Miraglia. SimpleYUI gives you DOM, Events (and custom events!!!) transitions, and AJAX. It’s perfect for folks who just want to add some animations or fun effects for your site in no time flat.” The full writeup is here. #
  • Montage Maker from @pamelafox Ported to YUI 3: Pamela Fox ported her cool Montage Maker application to YUI 3 — and now, she says, it’s both faster and more stable. (Original source.) #
  • Simple List Manager with YUI 3 on JsFiddle from @apipkin: Anthony Pipkin shared a little list manager he wrote — highlighting the intrinsic power of YUI 3 and also the ever-increasing usefulness of jsFiddle. (Original source.) #
  • Secure-TSPlayer Admin Driven by YUI 3 and 2-in-3: Caridy pointed out the Secure-TSPlayer Dreamweaver plugin, whose admin section makes use of YUI 3 as well as YUI 2 components like DataTable via the 2-in-3 mechanism. #
  • YUI 3-based Pong from @bruciemoose: Andrew Bruce has been playing around with YUI 3 and test-driven development. The result: A simple Pong implementation. “In case you’re one of my clients, you might be wondering why I’ve been slacking off recently. Here’s why: I’ve been teaching myself ‘grown up’ JavaScript under instruction of Douglas Crockford (in book and video form, obviously). Crockford never mentions Test Driven Development, probably because he doesn’t do it. But I do, so I’ve been learning to do that in JavaScript too.So here it is, HTML5 Canvas Pong. Pong is effectively a Hello, World! application for game developers. It’s not particularly fun, and my version is full of amusing bugs….” You can read the full post here, or jump in and give the game a try. #
  • JsFiddle Adds SimpleYUI Support: The jsFiddle team has added support for the SimpleYUI rollup for YUI 3, which instantiates itself and creates a global YUI instance (Y) with support for common Ajax library operations. You’ll find the SimpleYUI checkbox under the library selection menu when you select YUI 3.2.0. (Thanks to Andrew Wooldridge for the tip.) #
By Eric MiragliaNovember 1st, 2010
|