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

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

Imagine

Challenged by Marcel and inspired by another idea by Nicholas (upcoming, stay tuned!) here’s the beginning. Imagine there’s no quirksmode It’s easy if IE6 dies No Trident below us And all the data URIs Imagine all the web devs coding for today You may say I’m a dreamer But I’m not the only one I […]

December 12th, 2011
Tags: Fun
6 Comments »

Velocity Europe discount

The web performance and operations conference, Velocity Europe, is just around the corner. This always sold-out event is making its EU debut this year in Berlin. Get your ticket now (with 20% discount no less) or punish your users and clients with slow user experiences Info: url: http://velocityconf.com/velocityeu/ cost: €600 after 20% discount (ow €749) […]

November 1st, 2011
Tags: performance
5 Comments »

Imagemagick crop and center

Say you get a sprite created no matter how but the original images are long gone or for whatever reason not available. With imagemagick it’s easy to crop them back. And I think it’s easier and more precise than with a graphic UI, e.g. photoshop. Let’s see how. Task: get me a 16×16 favicon for […]

October 12th, 2011
Tags: images
6 Comments »

Social button BFFs

TL;DR: Loading JavaScript asynchronously is critical for the performance of your web app. Below is an idea how to do it for the most common social buttons out there so you can make sure these don’t interfere with the loading of the rest of your content. After all people need to see your content first, […]

September 27th, 2011
Tags: facebook, JavaScript, performance
57 Comments »

x-webkit-speech input and textareas

New hotness, speech input. (The demo, the demo) You get an input: <input> You add an x-webkit-speech attribute <input x-webkit-speech> And voila! Or if you don’t have a recent Chrome version, here’s what these who have a recent Chrome version see: Nice. Textareas Speech inputs – gotta love them. But in textareas – you can’t […]

August 6th, 2011
Tags: (x)HTML(5)
25 Comments »

Overlooked Optimizations: Images

#1 This guest post from Billy Hoffman is the last post in the Velocity countdown series. Velocity starts first thing tomorrow! Hope you enjoyed the ride and please welcome Billy Hoffman! Billy Hoffman (@zoompf) is the founder and CEO of Zoompf, a web performance startup whose scanning technology helps website owners find and fix performance […]

June 14th, 2011
Tags: images, performance
16 Comments »