Ajaxian » Front Page

It’s Friday. Play some drums…. HTML5 style

Dion Almaer — Fri, 03 Jul 2009 13:11:53 +0000

Brian Arnold created a fun sample drum machine simulator using HTML5 .

JAVASCRIPT:

function playBeat() {
if (isPlaying) {
var nextBeat = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.pip").removeClass("active");
// Stop all audio
stopAllAudio();
// Light up the tracker on the current pip
$("#tracker li.pip.col_" + curBeat).addClass("active");
// Find each active beat, play it
$(".soundrow[id^=control] li.pip.active.col_" + curBeat).each(function(i){
document.getElementById($(this).data('sound_id')).play();
});
// Move the pip forward
curBeat = (curBeat + 1) % 16;
// Schedule the next one
setTimeout(playBeat, nextBeat);
}
}

That's not all Brian is working on:

I'm also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren't exactly designed to be great together (it's currently working on a C scale) and so if you're careful, you can get some decent sound but otherwise, it'll hurt your ears.

Machsend: P2P file sharing via Browser Plus

Dion Almaer — Fri, 03 Jul 2009 10:52:52 +0000

Alex MacCaw has released Machsend, a Yahoo! Browser Plus plugin that enables P2P file transfers from inside the browser.

It showcases what can be done with a BP plugin, leaving you wish cross browser functionality.

I guess it is kinda fun to hack the browser :)

GChart 2.5: Faster, sharper, canvas-rendered, pie, line, and area charts

Dion Almaer — Thu, 02 Jul 2009 11:44:30 +0000

John Gunther has released GChart 2.5, a client-side library that adds a new canvas-rendering option for sharper, better looking, alpha-transparent, pie, line, and area charts.

John told us:

Canvas-rendering corrects GChart's most serious visual quality limitations (including the most often mentioned problem by its users: the banded-filled pie slice).

Coupled with its existing feature set and ease of GWT integration, the canvas-rendering option makes GChart an excellent choice for those who want to add basic charts to a GWT application without a lot of fuss.

To access these features, you'll need to plug an external canvas library into GChart (GWTCanvas in the gwt-incubator is reccommended) as described in detail in the setCanvasFactory method.

With the external canvas in place, the next step is to tell GChart you want a curve to be "continuously filled" by invoking setFillSpacing(0).

With each such continuously filled curve, GChart automatically exploits your external canvas library to improved the quality and speed of that curve's rendering. Specifically, banded-filled pie slices become solid filled, dotted connecting lines become continuously connected, and (the biggest stretch) bar charts become area charts. See the setFillSpacing method's javadocs for a detailed description of how each existing symbol type implements this new "continuously-filled", canvas-powered, rendering option.

Note that GChart's previous HTML-only rendering is still available, and is the default rendering mode if you don't bother to plug in an external canvas.

Check out the demo

More than you ever want to see about encoding

Dion Almaer — Thu, 02 Jul 2009 10:03:19 +0000

Paul Baukaus linked to jsescape, a little form that shows escaping and unescaping across a number of encodings.

Andrea Giammarchi had his own post on encodings in a different way.... as he talked about
en-code which you can check out in action here on the page that lets you do simple encodings, especially for source code, in short order.

GeoMaker - geo locations as microformats or a map from texts or URLs

Chris Heilmann — Thu, 02 Jul 2009 08:02:33 +0000

As preparation for an upcoming tech talk about Placemaker I thought it would be good to take a bit of the pain out of the geolocation service by making an interface for it. Placemaker works the following way: you post some content or a URL to it, it goes through the content or gets the content from the URL and analyzes it. It then finds geographical locations in the text and disambiguates them (for example to skip names like "Jack London" and not consider it the city London). Finally you get it back as XML.

The annoying thing is that Placemaker only support POST request and does not have a JSON output - for now. GeoMaker allows non-developers to enter some text or a URL, filter the results (using YUI datatable) to remove false positives (no system is perfect) and get the embed code for a Yahoo Map or a list of microformatted locations as copy+paste. See the screencast to get the end user experience:

Of course, every time you build something like that, red-blooded developers will ask for an API to do the same thing (and pointing them to Placemaker wasn't enough). So here it is:

http://icant.co.uk/geomaker/api.php takes two parameters: url of the web document to load and output which could be map, kml, microformats, csv, or json (with callback for JSON-P). Using this you can analyze a url in JavaScript and get the data back as an array:

PLAIN TEXT

HTML:

src="http://icant.co.uk/geomaker/api.php?url=http://ajaxian.com&output=json&callback=geomaker">

The Ajaxian.com output right now would be:

PLAIN TEXT

JAVASCRIPT:

geomaker(
[
{"lat":"42.3586","lon":"-71.0567",
"title":"Boston, MA, US","match":"Boston"},
{"lat":"42.3586","lon":"-71.0567",
"title":"Boston, MA, US","match":"Boston, MA"},
{"lat":"40.7075","lon":"-106.918","title":"Clark, CO, US",
"match":"Clark, Co"},
{"lat":"42.3115","lon":"43.3658","title":"Georgia",
"match":"Geo"},
{"lat":"44.9601","lon":"7.16229",
"title":"Rey, Piedmont, IT","match":"Rey"}
])

Modernizr: HTML5 and CSS3 detection

Dion Almaer — Thu, 02 Jul 2009 04:29:40 +0000

Modernizr is a new library that detects various HTML5 and CSS3 features and lets you know so you can use them:

Writing conditional CSS with Modernizr

Now, once your page loads, Modernizr will run and go through all of its tests. It will automatically add all the classes to the element of the page, and these classes will be along the lines of body.feature or body.no-feature, with the former indicating that the current browser supports that specific feature and the latter indicating that the browser does not support the feature.

Additionally, it will create a new JavaScript object in the global scope, called Modernizr. This object will contain properties for each of the features that Modernizr detects for, and their value will be set to TRUE or FALSE depending on the browser's support for it.

What you can do from this point on is write pseudo-IF/ELSE statements in your CSS. Let's look at an example from the Modernizr.com site itself:

PLAIN TEXT

CSS:

.cssgradients #main {

background: -webkit-gradient(linear, left 0, right bottom,

from(rgba(255,255,255, .82)),

to(rgba(255,255,255, 0))) 0 0 no-repeat;

}

In the above example, we're doing an "IF" condition in CSS: IF the browser supports both CSS gradients, THEN apply this background property to the #main element (instead of the original background property).

Writing conditional JavaScript with Modernizr

When leveraging Modernizr in your JavaScript, it's as straight-forward as it can be to do IF-conditions based on what the browser currently supports:

PLAIN TEXT

CSS:

if (Modernizr.cssgradients) {

// perform some actions you only want to

// execute if the browser supports gradients

}

We are seeing a growth in these kinds of tools and shims to get HTML5 features into developers hands. Another great site to help is the new HTML5 Doctor.

A whole lot of testing for JavaScript implementations

Dion Almaer — Wed, 01 Jul 2009 12:42:14 +0000

A couple of releases related to unit testing and JavaScript came out on the same day.

First, the JScript team posted a set of ECMAScript 5 tests.... 900 to be exact, and the focus on features that are new to ECMAScript 5.

All of the tests are released under New BSD.

Then, the V8 team announced Sputnik, a series of of 5000 tests, also under BSD. These tests aren't for the shiny ECMAScript 5 world, but are for ECMA 262, or edition 3.

Nice to see a lot of tests out there, all under liberal open source licensing.

Firefox 3.5: The fastest fox has landed

Dion Almaer — Tue, 30 Jun 2009 15:35:07 +0000

It is great to feel the good vibes at Mozilla HQ today as we launch Firefox 3.5! It is always an interesting ride to see a browser develop, and realize how complex and large the work is.

Congrats to the browser developers out there who are working hard to make the Web better. With final versions of Firefox 3.5, Safari 4, and Chrome 2 out in the wild.... things are picking up nicely.

The Firefox 3.5 release is exciting for me because it really benefits the developers. We get Open Video, @font-face, cross site XHR, Geo Location APIs, CSS Media Queries, Native JSON, Offline support, Web Workers, and so much more.

And, the world keeps moving. I have seen some very cool things in the nightly tree, and look forward to beign around as the team works on the next great Firefox.

Updates

Steve Souders has posted on Firefox 3.5 getting 10 out of 11 in his UA Profiler tests.

Watch the downloads come in with this cool download tracker that uses Canvas and SVG, all thanks to Justin Scott. The stats so far show that if the current rate trends hold we will beat the Firefox 3.0 download day, which is a surprise to all.

Sean Martell has created a nice wallpaper and persona to commemorate!

LABjs: Simple abstraction for loading dependencies correctly

Dion Almaer — Tue, 30 Jun 2009 11:16:24 +0000

Kyle Simpson has developed LABjs, a library that lets you define your JavaScript file dependencies, and then loads them as efficiently as possible.

Kyle told us:

This project is a simple little tool (1.6k compressed!) for being able to load javascript files dynamically. It's like a lot of similar projects where the goal is to improve the speed of page load by allowing scripts to load in parallel. The thing it does slightly differently than most others like it is it allows you to "block", which is to say, load one or more scripts in parallel, then wait for them to finish, before going on to something else, like loading more scripts.

What I wanted was a pattern where I could load scripts in parallel, just like with script tags, but also block and wait if there was an explicit ordering dependency that required it.

What most loaders fail to do well is let you define "dependencies" simply based on loading order. With regular script tags, the browser blocks for you, so you can make sure for instance that jquery.js loads before jqueryui.js. But imagine you've got 3 scripts that can download in parallel (not dependent on each other), and then two more that need to wait for those 3 to load. You can't do that with script tags, and you also can't do that very easily with a lot of the script loaders/frameworks that I've found.

Most of them rely on intrusive concepts to do "dependency" management. For instance, each child script has to "signal" (callback) that it's done loading, to the parent page. Or the parent script and child scripts have to explicitly declare dependencies using some framework or conventions. Also, some other loader libraries rely on attaching a single load callback handler for EACH script. This makes it awkward or difficult to wait for several to load at a time, before proceeding, since you as the author have to keep track of what has loaded yourself.

jsLAB lets you load pretty much any script file, whether you control it or not, with no intrusion or convention for dependencies, other than the order and blocking that you define. It keeps track of what you've asked for and what has downloaded, only loads a unique script filename once, and lets you only define your handler once for a set of scripts that will load together in parallel. The API style (with chaining) makes is very easy to convert a set of script tags in your page into code to load them, without having to worry that race conditions will cause issues for scripts loading in the wrong order if there are implicit dependencies involved.

Example

Old:

PLAIN TEXT

HTML:

src="jquery.js">
src="jquery.ui.js">
src="myplugin.jquery.js">
src="initpage.js">

New:

PLAIN TEXT

JAVASCRIPT:

$LAB
.script("jquery.js")
.block(function(){
$LAB
.script("jquery.ui.js")
.script("myplugin.jquery.js")
.block(function(){
$LAB.script("initpage.js");
});
});

In the above example, "jquery.ui.js" and "myplugin.jquery.js" can load in parallel because there's no dependencies, but they will wait for "jquery.js" to load first, since they depend on it, and then "initpage.js" will wait for all of them to load before it runs, to it makes sure all code it will call is in place, similar to a $document.ready(...) concept.

The page link above also shows a few other variations on the .script(...) signature. For instance, you don't have to do a single script() call for each file (though I think it makes thing more readable). You can pass as many scripts singularly as parameters to one script() call. You can also pass an array of scripts, and it will loop through them and load them in the same way. Lastly, you can pass in an object instead of string, and the object literal can contain "src", "type", and "language" specifications, if you want to override the defaults of "text/javascript" and "Javascript", for some reason.

New Sessions at The Ajax Experience 2009

tberardi — Mon, 29 Jun 2009 17:25:09 +0000

Register now to lock in exclusive $300 savings for The Ajax Experience conference, September 14-16 in Boston, MA.

It's only been two weeks since we announced open registration for The Ajax Experience with the promise of additional sessions being added to the web site over the next few weeks. And while a number of your peers have already applied and taken advantage of the $300 early-bird discount (which expires at the end of next month), we've already added more sessions to our agenda, including:

'Cappuccino Web Framework' with Ross Boucher, Co-founder of 280 North
'Even Faster Web Sites' with Steve Souders, Performance Engineer at Google and author of Even Faster Web Sites
'Testing the Testers: YUI Unit versus QUnit' with Ted Husted, Author of JUnit in Action, Struts in Action and more. Others from Ted: 'Testing Ajax Applications' and 'API Doc Smackdown: YUI Doc Versus JS Doc Toolkit'
'Advanced Web Application Security' with Joe Walker, Creator of DWR
'Building Accessible User Interfaces with jQuery and Fluid Infusion' with Colin Clark, Co-founder of Fluid and Contributor to jQuery UI
'Designing for the Mobile Web with JavaScript' with Brian LeRoux, Co-creator of XUI and a Contributor to the PhoneGap project
Panel: 'ES5: ECMAScript Standards for a Better Web' led by Allen Wirfs-Brock, ECMAScript Language Architect, Microsoft
Panel: Secure Mashups: Getting to Safe Web Plugins led by Douglas Crockford, Author of JavaScript: The Good Parts
And more!

The speakers and attendees at The Ajax Experience are working with the most advanced technologies today, building Ajax and rich Web front ends, as well as figuring out new ways to make response time still faster. And if security, performance, and SOA are important to you, you've come to the right place.

Your $300 discount expires the end of July - register now

If you have any questions about registration, traveling to Boston or bringing a team, please contact your Delegate Relations Manager, Jackie Anderson at janderson@techtarget.com or 781-657-1380. She's more than happy to assist you.

See you at The Ajax Experience!

MySpace open sources advanced browser performance tool for IE

Dion Almaer — Mon, 29 Jun 2009 10:21:18 +0000

Developers tend to tease MySpace for its look, but the insiders are incredibly impressed by some of the engineering behind the scenes (e.g. their internal monitoring tools are said to be second to none).

They have surprised us again with their new tool MSFast which is "a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages."

The IE 8 tools are getting better, but in general no one has been able to touch Firebug (and the new WebKit Inspector improvements) but this tool is actually plugin for IE! It captures a lot:

Measure the CPU hit and memory footprint of your pages as they render on the client’s browser
Review screen shots of the page while it renders
Review the rendered HTML on each point of the page’s lifecycle
Measure and show estimates of the time it takes to render each section of the page in different connection speeds
Validate the content of your page against a set of proven “best practice” rules of web development
Review downloaded files and show download time estimation on different bandwidths

That is some impressive data, and great to be able to test on IE where it has been SO hard to do so in the past.

Fun with text-shadow

Dion Almaer — Fri, 26 Jun 2009 16:26:24 +0000

Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:

PLAIN TEXT

JAVASCRIPT:

document.getElementById('text-shadow-box').onmousemove = function(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

Scripty2 has landed

Dion Almaer — Fri, 26 Jun 2009 05:14:51 +0000

Thomas Fuchs has been working in the open on scripty2 for a bit, and now the website has launched.

It even comes with nice documentation and fun demos:

What's new in scripty2? It is a complete rewrite, and comes packaged in three parts:

scripty2 core contains the main namespace and an area for extensions to be added. It also contains helpers and the like.

scripty2 fx: The scripty2 effects framework provides for time-based transformations of DOM elements and arbitrary JavaScript objects. This is at the core of scripty2 and presents a refinement of the visual effects framework of script.aculo.us 1.X.

scripty2 ui currently has one submodule: Utility functions for CSS parsing, color normalization and tweening.

We are doing more and more on the client, requiring nice programming models to do cool effects. Great to see one of the granddaddies of them all get a new coat.

First beta of YUI 3.0 released

Dion Almaer — Thu, 25 Jun 2009 11:52:47 +0000

Congrats to the YUI team for releasing their first beta of YUI 3:

We’ve spent a lot of time in this release cycle refining the core elements of YUI 3 — YUI, Node, and Event — to ensure that we have the right API going forward. Performance is improved, and we’ve refined our module/submodule structure. In some cases we’ve added significant new features, including intrinsic support for event delegation in the Event package; however, the focus is on moving the base library to production quality.

Several YUI 2.x components make their YUI 3 debut in this release:

DataSource: YUI’s data abstraction layer provides a standard interface into data sets, regardless of the data’s origin (local, XHR, XSS, etc.) and format (JSON, XML, CSV, etc.);

ImageLoader: ImageLoader allows you to defer the loading of images that aren’t in the viewport when the page paints, throttling bandwidth usage and improving performance;

History: The History component gives you control of the brower’s back button within the context of a single-page web application;

StyleSheet: StyleSheet makes it easy to create and modify CSS rules on the fly, allowing you to dynamically style page elements with fewer repaints.

As part of the more granular packaging in the new codeline, we’ve created separate YUI 3 modules to house functionality that in YUI 2 was bundled with other components. Cache, DataType and DataSchema debut in this release; each of these used to be a part of DataSource.

To keep up to date, check out the roadmap and dashboard that the team keeps up to date.

JavaScript sandbox using Web Workers

Dion Almaer — Thu, 25 Jun 2009 11:17:45 +0000

We have been sandboxing JavaScript in iframes for a long time. The Web Worker API has the nice property that it doesn't have access to objects like document and the like, and just runs code that you can pass over to it.

With this, Elijah Grey has created an experimental jsandbox API that gives you an eval function that you pass in some code, and optionally input data, callback for results, and an onerror callback.

Code looks like this:

PLAIN TEXT

JAVASCRIPT:

jsandbox
.eval({
code : "x=1;Math.round(Math.pow(input, ++x))",
input : 36.565010597564445,
callback: function(n) {
console.log("number: ", n); // number: 1337
}
}).eval({
code : "][];.]\\ (*# ($(! ~",
onerror: function(ex) {
console.log("syntax error: ", ex); // syntax error: [error object]
}
}).eval({
code : '"foo"+input',
input : "bar",
callback: function(str) {
console.log("string: ", str); // string: foobar
}
}).eval({
code : "({q:1, w:2})",
callback: function(obj) {
console.log("object: ", obj); // object: object q=1 w=2
}
}).eval({
code : "[1, 2, 3].concat(input)",
input : [4, 5, 6],
callback: function(arr) {
console.log("array: ", arr); // array: [1, 2, 3, 4, 5, 6]
}
}).eval({
code : "function x(z){this.y=z;};new x(input)",
input : 4,
callback: function(x) {
console.log("new x: ", x); // new x: object y=4
}
});

iPhone 3GS runs faster than claims, if you go by SunSpider

Dion Almaer — Wed, 24 Jun 2009 20:03:36 +0000

Rana Sobhany of Medialets has posted on Sun Spider benchmarks of the iPhone 3GS as well as other devices which shows off the performance angle of 3GS:

The WebKit Open Source Project provides a JavaScript test Suite dubbed SunSpider. According to the description on the SunSpider home page, “this benchmark tests the core JavaScript language only, not the DOM or other browser APIs. It is designed to compare different versions of the same browser, and different browsers to each other.” We at Medialets have found it to be one of the best attempts to measure real world JavaScript performance in a balanced and statistically sound way.

Medialets ran the SunSpider test suite in the following environments:

Safari 4.0.1 on a 2.0 GHz Intel Core 2 Duo White MacBook.

The MacBook results were used as a baseline for relative comparisons.

Mobile Safari on the iPhone 3G with iPhone OS v2.2.1

Mobile Safari on the iPhone 3G with iPhone OS v3.0

Mobile Safari on the iPhone 3GS with iPhone OS v3.0

The “Browser” app on the T-Mobile G1 with Android OS v1.5 (Cupcake)

The “Web” app on the Palm Pre with Web OS v1.0.2

Each device was fully restored and rebooted immediately before running the test suite. Every attempt was made to assure that no atypical background tasks were executing while the tests were running. The SunSpider tests automatically run five times sequentially and the mean average from all five tests are reported. Network speed and latency have no effect on the results of the test.

We all know to beware of benchmarks, but it does show off how powerful these devices are getting!

MooTools: Saving the dollars, replacing document.write

Dion Almaer — Wed, 24 Jun 2009 11:28:13 +0000

The religion behind a simple $ has been fierce in the Web world. MooTools has decided to make the Dollar Safe Mode which is similar to cousins such as jQuery.noConflict (in MooTools case it just looks for the $ function). Now you can just use document.id if you want to play in the wild, or wrap up in a closure to be nice:

PLAIN TEXT

JAVASCRIPT:

(function(){
var $ = document.id;
this.X = new Class({
initialize: function(element){
this.element = $(element);
}
});
})();

Please note that MooTools will probably remain incompatible with other frameworks that modify native prototypes, as there will probably be more name clashes. This isn’t a cross-framework compatible MooTools version by any means, nor does it want to be. The whole point is not to “steal” the dollar function from other libraries.

In other MooTools news, MooTools Core Dev Thomas Aylott (subtleGradient) shows another example of overriding document.write():

I created a replacement for document.write that saves the arguments and then injects them into the page after the dom is ready. This is useful for embedding gists on your page since you can use the additional filter option to reject stuff from being written to your page. This would also be really handy for sites that include JavaFX or certain ads or anything that requires the use of document.write on your page. By deferring the injection of that stuff until after the dom is ready your visitors see the page content before any of the extras like Java applets or ads begin to load.

ProtoFish: advanced hover menu

Dion Almaer — Tue, 23 Jun 2009 10:05:01 +0000

ProtoFish is an advanced hover menu based on Prototype, written by Peter Slagter. You can easily add a delay to your menu (on mouseout) and choose your own hover class. All ProtoFish menu's will respond to users who use the TAB-key to navigate through your page.

It is trivial to use. Once you load up the script (requires Prototype 1.6+) you can:

PLAIN TEXT

JAVASCRIPT:

document.observe('dom:loaded', function() {
new ProtoFish('my-menu', '400', 'hover', false);
});

where the four parameters are:

Menu id (In the example: my-menu)
Delay before closing the menu (In the example: 400 ms)
The classname to add when hovering over menuitems (In the example: hover)
Whether or not the menu should remove .active classnames when your visitor hovers over the menu (In the example: false)

Sprite Me! Helping you sprite up, but maybe you shouldn’t?

Dion Almaer — Tue, 23 Jun 2009 05:01:00 +0000

There have been many tools to help make image spriting easier, by packaging up your images into one large image and splitting it up again via CSS.

Steve Souders just showed off a new little tool he created, Sprite Me at the Velocity conference that kicked off today. He has made it easier to work with sprites by:

finds background images: SpriteMe generates a list of all background images in the page. Hovering over the its URL displays the image.
Each of the DOM elements that use that image are also listed. [DONE]
groups images: It's hard to figure out which images can be sprited together, and how they should be laid out. For example, background images that repeat horizontally must fill the entire width of the sprite. Background images positioned left bottom must be at the right top of the sprite if their container might be bigger than the image. SpriteMe determines which images should be sprited together based on these constraints.[IN PROCESS]
creates sprites: SpriteMe generates the sprite for each grouping of images. This is done using open source tools, such as CSS Sprite Generator. [TBD]
updates CSS: The final tricky part of using sprites is changing the CSS. Sometimes the CSS is a rule in a stylesheet. Or it might be a rule in an inline style block. Or it might be specified in an element's style attribute. Because SpriteMe runs inside your web page, it can find the CSS that needs to be updated. It makes the changes in realtime, so you can visually check to confirm the sprites look right.You can export the modified CSS to integrate back into your code. [TBD]

Great, a simple new bookmarklet to work with Sprites. It is always a good idea to sprite up right? Not exactly.

Vlad Vuki?evi?, a leader in the Mozilla community (and brought us cool stuff like Canvas 3D!) has spoken up on the internals of the browser, which shows you the trade-offs for the spriting approach:

The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV's web site, where this image is used as a sprite. Note that this is a 1299x15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don't render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4). If the image didn't have any alpha transparency, this could be maybe optimized to 1299 * 15000 * 3, though often at the expense of rendering speed. Even then, we'd be talking about 55MB. The vast majority of this image is blank; there is nothing there, no useful content whatsoever. Just loading the main WHIT page will cause your browser's memory usage to go up by at least 75+MB, just due to that one image.

That's not the right tradeoff to make for a website.

What alternatives are there? None right now.... but they are hopefully on the way. Some folks have been talking about the idea of packaging up images in zip files, and then the browser can manage more than just the download process, but also only load up what it needs:

Many browsers have support for offline manifests already; it might be possible to extend that to allow downloading one file (like a jar/zip file) that contains a manifest of resources and equivalent URLs that are contained inside it.

Rob Sayre, also of Mozilla, broached the subject:

Sprites have the advantage of working right now, but maybe there should be a way to serve up a multipart response with your sprite images as well. That would cut down on CSS rule count and maintenance, but still group the images in one HTTP request. Authors are already giving up the advantages of separate resources in return for speed, so maybe this is worth doing.

You can (in theory… haha) get some of these advantages with HTTP pipelining, but a multipart response would allow the server optimize the response order as they do with sprites today.

HTML 5 and the Wizard of Oz

Ben Galbraith — Mon, 22 Jun 2009 18:05:47 +0000

Kyle Weems, the CSS Squirrel and author of the occasional and bizarre comic of the same name, targets his latest rendering at Ian Hickson:

Click-through to see the full comic. The related blog entry fleshes out the basic complaint some more:

Why is it that the person who is the center of this process is allowed to be a man who rejects consensus, actively denies issues (based on his own admitted policy) and substitutes expert advice in important areas like accessibility with analyzing data from the Google Index and parsing numbers? Numbers that we cannot have a third party confirm because every request to do just this is ignored?

There is no doubt in my mind that Ian is brilliant. However no man, no matter how brilliant, should be allowed to be so influential on a spec when he is bringing all this baggage to the table with him.

The number of grievances folks have with any standards process are legion, but wouldn't life be more fun if they all came with comics?

(As I wrote this, Dion leaned over and said, "I used to work with Ian, I find it funny to think of anyone trying to control him.")