Simon Willison's Weblog: yui

What are the strategies for a front end developer to keep up to date with the emerging technologies?

2013-01-03T14:23:00+00:00

My answer to What are the strategies for a front end developer to keep up to date with the emerging technologies? on Quora

Step one: find developers who you respect and subscribe to their blogs, follow them on Twitter/Google+/etc and try to understand what they are talking about and what they think is exciting.

Step two: find some good dedicated online communities relating to those topics - mailing lists, forums, sub-reddits, Quora topics and so on. Get involved there.

Step three: figure out the most vibrant conferences around that topic and go to one of them. For JavaScript Full Frontal in the UK or any of the JSconf series are worth a look. If you don't want to splash out for a conference, seek out local meetups and user groups and go to some free evening networking events.

Tags: javascript, web-development, yui, quora, frontend

Porting Flickr to YUI 3: Lessons in Performance (at YUIConf 2010)

2010-11-10T18:33:00+00:00

Porting Flickr to YUI 3: Lessons in Performance (at YUIConf 2010)

Some very interesting tips here. The new Flickr photo pages suffered from what I’ve been calling “Flash of Un-Behavioured Content”, where slow loading JavaScript results in poor behaviour from some UI controls. They started using “Action Queueing”, where a small JS stub ensures a loading indicator is shown for clicks on features that have not yet fully loaded. Also, it turns out some corporate firewalls (Sonicwall in particular) dislike URLs over 1600 characters, and filter out any URL with xxx in it.

Tags: flickr, javascript, urls, yui, recovered

Introducing the YUI 3 Gallery

2009-11-04T23:14:17+00:00

Introducing the YUI 3 Gallery

Write a plugin for YUI3, BSD license it and sign a CLA and Yahoo! will push your module out to their CDN and make it loadable using the YUI().use() statement. They’re coordinating the submissions using GitHub.

Tags: bsd, cla, git, github, javascript, open-source, yahoo, yui, yui3

YUI 3.0.0: First GA Release of YUI's Next-Generation Codeline

2009-09-29T23:38:18+00:00

YUI 3.0.0: First GA Release of YUI's Next-Generation Codeline

YUI 3 has some very neat ideas—everything is dynamically loaded, so you start with a tiny bootstrap script and call YUI().use(’module-name’) to load just the code you need. Congratulations to the team.

Tags: javascript, libraries, yahoo, yui, yui3

Today's News and Yahoo!'s Developer Program

2009-07-30T12:20:30+00:00

Today's News and Yahoo!'s Developer Program

“For SearchMonkey and BOSS, we currently do not have anything concrete to tell you” ... “We wanted to let you know that today’s news does not affect these products [YUI, YQL, Pipes]”.

Tags: boss, pipes, searchmonkey, yahoo, yahoo-pipes, ydn, yql, yui

Coupling asynchronous scripts

2009-04-30T19:57:38+00:00

Coupling asynchronous scripts

More from Steve Souders, this time discussing methods to cause externally loaded scripts to execute in the correct order, obeying dependencies. Surprisingly there’s no mention of YUI loader or the Dojo packaging system.

Tags: dojo, javascript, loading, steve-souders, yui

A Snapshot of The Yahoo! Photos Beta (from 2006)

2009-01-12T22:21:16+00:00

A Snapshot of The Yahoo! Photos Beta (from 2006)

Scott Schiller shares an internal retrospective on the Yahoo! Photos interface from 2006, which was years ahead of its time (they started building it before the term Ajax had even been coined). The material on memory management and event delegation is particularly interesting.

Tags: ajax, eventdelegation, javascript, scott-schiller, yahoo, yahoo-photos, yui

Manage Amazon EC2 With New Web-Based AWS Management Console

2009-01-09T09:34:49+00:00

Manage Amazon EC2 With New Web-Based AWS Management Console

Finally! I’m amazed it took Amazon so long to do this. Managing EC2 instances from a custom Firefox extension was pretty bizarre. It’s a very nice interface, built on top of YUI. Unfortunately you still have to manage your entire virtual server farm using a single shared Amazon account.

Tags: amazon, aws, cloud-computing, ec2, javascript, yui

Visual Event

2008-12-10T15:38:59+00:00

Visual Event

External code loading bookmarklet that visualises the JavaScript events hooked up to the current page, and lets you view the source code of the event handling function for each one. Only works for events added by jQuery, YUI or MooTools since those libraries maintain a cache of event handlers that they add, to work around the standard DOM’s omission of handler introspection.

Tags: allan-jardine, bookmarklets, dom, events, javascript, jquery, mootools, visualevent, yui

YUI 3.0 Preview Release 1

2008-08-14T10:03:00+00:00

YUI 3.0 Preview Release 1

YUI sandboxing is a really good idea, which cleverly addresses both the need to run multiple versions of the library at once and the complaints about how verbose traditional YUI code can get.

Tags: javascript, sandboxing, yui, yui3

Doctype: /trunk/goog

2008-05-14T21:12:07+00:00

Doctype: /trunk/goog

Google’s newly released JavaScript library (pure JavaScript, so more along the lines of YUI and jQuery than GWT). I haven’t found the documentation for it yet, but the code is extremely well commented. UPDATE: The documentation is spread throughout Doctype.

Tags: dojo, goog, google, googledoctype, gwt, javascript, jquery, libraries, yui

Insert Dojo and YUI bookmarklets

2007-12-09T12:38:03+00:00

Insert Dojo and YUI bookmarklets

Combine with Jash for interactive API experimentation on any web page.

Tags: bookmarklets, dojo, gareth-rushgrove, jash, javascript, shell, yui

YUI 2.4.0 released

2007-12-05T15:32:31+00:00

YUI 2.4.0 released

Lots of great new features, but the one I’m most excited about is Selector: YUI finally has a CSS query engine.

Tags: css, javascript, libraries, selector, yahoo, yui

ActsAsUndoable

2007-09-18T15:51:14+00:00

ActsAsUndoable

Lawrence Carvalho shows how robust undo functionality can be added to a JavaScript application through careful application of the Memento design pattern.

Tags: actsasundoable, design-patterns, javascript, lawrence-carvalho, memento, undo, yui

Protoscript

2007-09-07T22:55:26+00:00

Protoscript

JavaScript tool designed for easy prototyping of JS interactions; powered by YUI and jQuery.

Via Bill Scott

Tags: bill-scott, javascript, jquery, libraries, protoscript, prototyping, yui

Some Notes on the YUI Rich Text Editor

2007-08-15T20:13:19+00:00

Some Notes on the YUI Rich Text Editor

Dav Glass explains how he achieved the impressive feat of building a rich text editor widget that also works in Safari.

Tags: dav-glass, javascript, richtext, safari, yui

YUI 2.3.0

2007-08-01T08:20:33+00:00

YUI 2.3.0

New components are a rich text editor, dojo-style package loader, lazy ImageLoader, colour picker and unit test framework. Easier skinning as well.

Tags: dojo, javascript, skinning, testing, yui

YUI-based Image Cropper Widget

2007-07-30T12:56:57+00:00

YUI-based Image Cropper Widget

Nice implementation of a useful widget.

Tags: javascript, widget, yui

A JavaScript Module Pattern

2007-06-12T23:30:22+00:00

A JavaScript Module Pattern

I’ve been using this pattern for a few months—it works really well, though I tend to keep my own code in my own namespace rather than adding it to YAHOO.

Tags: javascript, yahoo, yui

start.gotapi.com

2007-06-05T18:05:52+00:00

start.gotapi.com

Lightning fast lookups of API documentation; includes Python docs, YUI, HTML, CSS and lots more.

Tags: css, docs, documentation, gotapi, html, python, yui

Online and offline development with the YUI and Charles

2007-05-15T14:41:39+00:00

Online and offline development with the YUI and Charles

Stuart Colville shows how the Charles debugging proxy can be used to serve up hosted YUI files while developing offline.

Via Yahoo! User Interface Blog

Tags: charles, debugging, javascript, offline, proxies, stuart-colville, yui

Using YUI with the Yahoo! Maps AJAX API

2007-05-08T16:07:00+00:00

Using YUI with the Yahoo! Maps AJAX API

I got bitten by this today—if you’re using both YUI and a Yahoo! map on the same page you need to take a few precautions to avoid library version conflicts.

Tags: yahoo, yahoo-maps, yui

The YUI Team Is Hiring an Engineer To Work on Firebug

2007-05-07T22:40:20+00:00

The YUI Team Is Hiring an Engineer To Work on Firebug

“... we’re opening a search for a full-time developer to work with Joe on advancing the Firebug roadmap.”

Tags: firebug, jobs, yahoo, yui

The website to web application gradient

2007-04-20T00:30:45+00:00

The website to web application gradient

Jeremy snapped this cunning illustration at my JavaScript Libraries panel at the Web 2.0 Expo.

Tags: alex-russell, bret-taylor, dojo, flickr, gwt, javascript, jeremy-keith, john-resig, jquery, matt-sweeney, web2expo, web2expo07, yui

Ext JS

2007-04-03T22:11:57+00:00

Ext JS

Jack Slocum is building a business around his excellent Ext JavaScript library (which can now run on top of YUI, jQuery or Prototype). The library itself is LGPL, but you can pay for a commercial license and support.

Tags: jack-slocum, javascript, jquery, prototype-js, yui, yuiext

DED|Chain JavaScript Library

2007-03-20T10:36:16+00:00

DED|Chain JavaScript Library

Dustin’s new JavaScript library, which puts a JQuery style chained API on top of YUI.

Via Introducing DED|Chain JavaScript Library

Tags: dedchain, dustin-diaz, javascript, jquery, yui

Serving YUI Files from Yahoo! Servers

2007-02-23T18:45:34+00:00

Serving YUI Files from Yahoo! Servers

If everyone who uses YUI links to the same set of files, your users will already have the YUI code cached in their browser when they arrive on your site.

Via Free Hosting of YUI Files from Yahoo!

Tags: javascript, yahoo, yui

Fork JavaScript

2007-01-20T23:39:39+00:00

Fork JavaScript

A great name for Yet Another JavaScript Library. This one tries to combine the best bits from YUI and Prototype.

Tags: forkjavascript, javascript, prototype-js, yui

YUI CSS Grid builder

2006-12-16T22:30:39+00:00

YUI CSS Grid builder

The YUI CSS grid system can be hard to get your head around. This interactive tool makes it much easier to figure out.

Via Ed Eliot

Tags: css, javascript, yui

Notes on JavaScript Libraries

2006-06-26T15:03:00+00:00

@media 2006 was a blast. Great talks, great people and some of the highest production values I've ever seen at a conference (check out the bags!).

I sat on the JavaScript Libraries: Friend or Foe? panel, with PPK, Dan Webb, Stuart Langridge and Cameron Adams chairing. It was my first participation in a panel and I really enjoyed it - I've always liked the Q&A bit of giving talks. JavaScript Libraries are an enormous topic but I felt we did them justice considering the time available. For the record, here are the key points that I wanted to get across:

Large JavaScript applications need some kind of library - even if it's one built especially for that application. There are a number of problems in JavaScript (most of them originating with browser incompatibilities) that any moderately complex application will need to deal with - things like normalised event handling, DOM node selection, sane animation or drag and drop. Solve these problems once so you can get on to the interesting task of building the application. If you can find a library that solves them for you so much the better!
The big four. Dojo, MochiKit, Prototype/Scriptaculous and the Yahoo! UI Library are the top of the pile as far as I'm concerned. They cover the bases effectively and each one offers something interesting that makes it worth studying in its own right. If you plan to evaluate some existing libraries these make an excellent starting point.
Leaky abstractions. Joel Spolsky's essay The Law of Leaky Abstractions is my favourite of all of his online articles. It's basic tenet is that abstractions that are designed to save the programmer time inevitably leak, and if they leak at a lower level of abstraction than the programmer is familiar with they prove almost impossible to debug. Paradoxically, the more time saving abstractions you are using the more you actually have to know.

JavaScript is possibly the leakiest abstraction of them all, thanks to the many different browser environments it runs in. If you rely on a library to abstract away the browser bugs from you you are certain to run in to a bug that you can't fix sooner or later. Don't use libraries as crutches; if you're not prepared to figure out what the library is doing for you you'll end up in a world of pain further down the line.
Community and documentation matter. As with all open-source software, it's a good idea to get a feel for the amount of community activity around a project before you commit to building on it. The big four all have active communities, which means less bugs, more support and a faster rate of improvement. Likewise, good documentation is invaluable.
Libraries should play well with others. Reusable code that excludes other code from being reused has severely limited long-term value. In JavaScript, that means that libraries that mess with Object.prototype or pollute global namespaces should be treated with caution. The Prototype library was a major culprit here, but thankfully has cleaned up its act (at least with regards to altering Object.prototype) in recent releases. It's all very well saying that you'll always be using code built with your core language modifications in mind, but you may well change your tune when you try to incorporate Yahoo! or Google Maps and everything breaks.
Go with the grain. If you take the time to learn it properly, JavaScript is a powerful and surprisingly elegant language. Good JavaScript code takes advantage of its dynamic, functional nature. Libraries that promise to take the pain out of JavaScript by writing the code for you probably aren't as smart as they seem. Abstractions leak.

Dan Webb has a good comparison of the big four on SitePoint, although he did overlook YUI's Animation library which I consider a highlight.

For more accurate coverage of the @media panel itself, take a look at my co-worker Paul Hammond's detailed notes.

Tags: atmedia, dojo, javascript, libraries, mochikit, prototype-js, speaking, my-talks, yui