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
19 Comments »

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
8 Comments »

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! http://www.meetup.com/SF-Web-Performance-Group/events/72890422/ […]

July 26th, 2012
Tags: speaking
6 Comments »

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 http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ 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
30 Comments »

3PO

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
46 Comments »

<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
19 Comments »

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
2 Comments »

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
6 Comments »

3PO#fail

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 blackhole.webpagetest.org 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
8 Comments »

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
3 Comments »

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
35 Comments »

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
3 Comments »

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
10 Comments »

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
19 Comments »

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
43 Comments »

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
11 Comments »

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
34 Comments »

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
17 Comments »

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
28 Comments »

Simple music player

I put up a few MP3s on http://anacondalimousine.com, 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
6 Comments »

The Truth about semicolons in JavaScript

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

April 16th, 2012
Tags: Fun, JavaScript
2 Comments »

Wish You a Merry Christmas 2011

Here’s a cover of We Wish You a Merry Christmas I just did. It’s in a Bulgarian (and other Balkan countries) style in 7/8 tempo (and 9/8th at one place). This is me channeling my inner Goran Bregovich We Wish You a Merry Christmas (7/8th and 9/8th) Continuing the tradition (why did I skip last […]

December 24th, 2011
Tags: Music
18 Comments »