Deck the Halls 2012

Traditions are traditions. Marry Christmas with a new cover, this time it’s Deck the Halls: Deck the halls (part one) (It’s only part one because I didn’t find the time to properly record what I had in mind – another 7/8th cover like last year. But you can hear the idea at the end) Here […]

December 24th, 2012
Tags: Music

WebAudio: live input

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right? Let’s check it out. Here’s the demo, but first a prerequisite: go chrome://flags, search for “Web Audio Input” and enable it. Restart Chrome Canary. With a guitar I wanted to have a little trickier setup […]

October 28th, 2012
Tags: JavaScript, Music, WebAudio

WebAudio: oscillator in JS

How about generating some noise in JavaScript? Demo is here: oscillator. How does this work? Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A (“la” in solf├Ęge) This means you don’t need an <audio> element or any mp3, ogg, wav, etc, no external files. Let’s see how. Capable […]

October 27th, 2012
Tags: JavaScript, Music, WebAudio

In Public

Update: + WebPerfSummit Update 2: + SydJS, + Anaconda Limo@Molly Malone’s, + qCon confirmed, + fix *some* Portuguese spelling After a year or two with almost no public appearance (with an exception or a few) I’ve lined up a bunch of talks till the end of the year. I hope I’ll see you soon! […]

July 26th, 2012
Tags: speaking

Non-onload-blocking async JS

Update Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip’s snippet at Asynchronous JS is cool but it still blocks window.onload event (except in IE before 10). That’s rarely a problem, because window.onload is increasingly less important, but still… At my Velocity conference talk today Philip “Log […]

June 28th, 2012
Tags: JavaScript, performance


Say hello to the 3PO extension for YSlow. It checks your site for integration with popular 3rd parties, such as Facebook, Twitter widgets, Google Analytics and so on. 3PO (3rd party optimization) extension currently has 5 checks: two of them generic to all 3rd parties and three specific to Facebook plugins. I’m looking forward to […]

June 27th, 2012
Tags: performance, yslow

<style> tag to inline style=”” attrrib

As you may have noticed, I claim that CSS is bad for performance because: Most browsers block the very first paint until all screen CSS arrives Additionally many browsers block rendering until all non-screen (e.g.print) CSS arrives Sometimes CSS blocks downloads See “The evil that CSS do” in CSS and the critical path for details. […]

June 21st, 2012
Tags: CSS, performance

YSlow development: custom rulesets

(This is part 3. See part one and part two.) There are two concepts to remember when working on your YSlow extensions and customizations: rules (or “recommendations” if you will, or “best practices” or simply “lint checks”), and rulesets which are lists of rules An example rule is “Reduce HTTP requests”. An example ruleset is […]

June 20th, 2012
Tags: performance, yslow
1 Comment »

YSlow development: setup

As promised, let’s setup for YSlow development using the easiest option – the bookmarklet version. The journey of conquering the world with your rules and extensions… starts with the first step. Checkout First you need to get teh codez. Go to the Github repository and click that big ol’ Fork button. Then checkout the repository […]

June 19th, 2012
Tags: performance, yslow

YSlow development: getting started

Since version 2.0, YSlow is no longer just a tool, it’s a platform. You can create your own rules (performance or otherwise), combine them into rulesets, tweak scores to your liking and so on. Once Marcel took over and did version 3.0. YSlow can now run in many many environments: as a Firebug extension (like […]

Anaconda Limousine: the guitar parts

I’m part of a band that has an album out now. I know, right? (links: excuse-for-a-site, amazon, itunes). I wanted to put up all the songs on the site, but seems like there’s a little dissonance in the band whether this is a good idea. Plan B: 30s samples. Like the bigwigs do on Amazon […]

June 17th, 2012
Tags: JavaScript, Music, tools


So I was flipping through recent slides from Steve Souders and came across a reference to a nice post from Pat Meenan explaining how he setup and how you can edit your hosts file to send third party scripts to the black hole simulating a firewall-blocked or down third party and the effect on […]

June 16th, 2012
Tags: browsers, JavaScript, performance

getUserMedia in Opera 12

Opera 12 wins – the first stable desktop browser to ship getUserMedia(). I believe they had shipped it already in a mobile version of the browser. (I’ll need to fix my example from last night because Chrome Canary uses webkitGetUserMedia and also uses a stream URL to assign to video element’s src) You can start […]

June 14th, 2012
Tags: (x)HTML(5), browsers

CSS variables

Weeee, CSS variables just landed in WebKit, this is pretty exciting! Unfortunately I couldn’t see them in action in WebKit nightly (must be something I’m missing), but they’re here and here to stay. I know there are “purists” that say that stuff like variables has no place in the language and we don’t really understand […]

June 14th, 2012
Tags: CSS

Canvas pixels #3: getUserMedia

getUserMedia() is a proposal for one of the most desired device APIs that can give HTML and JS access to the user’s camera and microphone. It’s already available in Chrome Canary in the form of navigator.webkitGetUserMedia(). It’s also available in Opera without a prefix. In part #1 of this miniseries I talked about manipulating pixels […]

June 13th, 2012
Tags: (x)HTML(5), canvas, images, JavaScript

Canvas pixels #2: convolution matrix

In the previous post I talked about manipulating and changing pixels in an image (using JavaScript and canvas) one at a time. We took a single pixel and messed around with its R, G, B or A values. This time let’s look into taking account not only the single pixel but the pixels around it. […]

June 11th, 2012
Tags: (x)HTML(5), canvas, images, JavaScript

Pixel manipulation in canvas

Done it before with PHP, but now that JavaScript is all-powerful, let’s see how we can manipulate images in an HTML <canvas>. The demo is here. Pixel manipulation The simplest way to fiddle with image data is to take each pixel and change the value of one or more of its channels: red, green, blue […]

June 10th, 2012
Tags: (x)HTML(5), canvas, images

Web Performance Daybook vol. 2

In the spirit of the true high-performance non-blocking asynchronous delivery, we’ll have the Web Performance Daybook volume 2 published before volume 1. I hope you’ll enjoy reading the book as much as I enjoyed working on it and rubbing (virtual) shoulders with some of the brightest people in our industry. Back in December of 2009 […]

June 6th, 2012
Tags: book, performance
Comments Off

CSS and the critical path

Back when I was still actively into speaking at public events (way, way back, something like year and a half ago (which strangely roughly coincides with the time I joined Facebook, hmmm (hmm? (huh? what’s with the parentheses? sure all of them are closed at this point?)))) I remember showing this slide: The reason I’m […]

June 5th, 2012
Tags: CSS, performance

Async JavaScript callbacks

Ah, asynchronous JavaScripts. Love ‘em, hate ‘em, but you gotta use them! I have quite a few posts here on this blog about this stuff. Starting with something I considered an interesting hack to emulate PHP’s require(). This was posted in 2005. (2005! That’s ancient. That’s only a year after gmail was introduced, and you […]

June 3rd, 2012
Tags: IE, JavaScript

Ajax with images

So you can do Ajaxy stuff with XMLHttpRequest or or iframes or dynamic JavaScript tags or… how about simple images. This is best used for simple stuff where you can have a limited number of predefined responses, such as “success” and “oops”. All you do is create an image and set its source and this […]

June 2nd, 2012
Tags: Ajax, images, JavaScript

Update a far-future expiring component

NOTE: This is late night mumbling from a week or two ago, leaving here for posterity. Don’t read it. Meanwhile Steve wrote up a proper blog post which is highly recommended: Self-updating scripts. Read his post instead! tl;dr: Load the component in an iframe, then reload() Backstory Steve Souders and I were chatting last week […]

May 22nd, 2012
Tags: performance

5 years later: print CSS still sucks

This tweet had me revise a 5 year old experiment on how print CSS affects page loading, especially in the light of mobile browsers. So I tweaked the test ever so slightly to print out timing info in the document.title and after the page is done. The test is essentially how does a slow print […]

April 25th, 2012
Tags: CSS, performance

Simple music player

I put up a few MP3s on, in simple a hrefs. While modern browsers will let you click and display some sort of player in a new page, why not play them in-page without a refresh? Simple enough. Plus we have HTML5 audio. Problem is, old IEs don’t support HTML5 audio and you need […]

April 18th, 2012
Tags: JavaScript, Music

The Truth about semicolons in JavaScript

jk is live though. Enjoy and feel free to add more next time. (image from wikipedia)

April 16th, 2012
Tags: Fun, JavaScript