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

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 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

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

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 […]

December 24th, 2011
Tags: Music

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

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 […]

November 1st, 2011
Tags: performance

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

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

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)

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

Sultans of Speed

#2 This post is part of the Velocity countdown series. Stay tuned for the last one tomorrow. With only 2 days to Velocity, it’s time to drop in the quality of these posts (but the one tomorrow will be great, I promise) with today’s announcement of the immediate availability of the project called http://sultansofspeed.com. I […]

June 13th, 2011
Tags: Music, performance

Book of Speed

#3 This post is part of the Velocity countdown series. Stay tuned for the articles to come. Without further ado, please point your browser to the newborn bookofspeed.com. It’s a free (public domain), online, open-source, not yet finished, book about web performance. Contributions welcome The source files are on Github – https://github.com/stoyan/Book-of-Speed. I’ll be glad […]

June 12th, 2011
Tags: book, performance

YSlow 2.0: the first sketches

#4 This post is part of the Velocity countdown series. Stay tuned for the articles to come. I’m working on tomorrow’s kind of big thing, so will take it easy today, with a stroll down memory lane. I was clearing up my space at home few days ago and came across this oldish notepad. In […]

June 11th, 2011
Tags: performance, yahoo, ydn, yslow

Perfplanet.com is open

#5 This post is part of the Velocity countdown series. Stay tuned for the articles to come. It’s been over a year, since the launch of perfplanet.com. Looks good and useful for people so far. Sergey “ShowSlow” is doing also a great job of tweeting as @perfplanet about news from the perfplanet pipes as well […]

June 10th, 2011
Tags: performance

Preload in visual search suggestions

#6 This post is part of the Velocity countdown series. Stay tuned for the articles to come. Alrighty, this is something I’ve talked about last year at HighLoad++ and Fronteers, but never blogged. I came up with this thing while at Yahoo! Search and we used it there in production. So, it must be working. […]

June 9th, 2011
Tags: images, performance

Lazy HTML evaluation

#7 This post is part of the Velocity countdown series. Stay tuned for the articles to come. Some time ago Google talked about using a sort of lazy JavaScript evaluation which especially helps mobile devices. The idea was to comment out a chunk of JavaScript you don’t need right away and serve it this way. […]

June 8th, 2011
Tags: (x)HTML(5), JavaScript, mobile, performance

Velocity countdown

Let me try to set the mood for Velocity 2011 with an attempt to publish one performance-y post a day for the seven days between now and when the conference starts. #7 – Lazy HTML evaluation #6 – Preload in visual search suggestions #5 – perfplanet.com is open #4 – YSlow 2.0: the first sketches […]

June 8th, 2011
Tags: performance

There was a dude who liked to write code

There was a dude who liked to write code I dunno why he liked to write code The code was Node(.js) code There was a dude who wrote a lint tool To check the code that he wrote – cool! But I dunno why he liked to write code The code was Node There was […]

May 14th, 2011
Tags: Fun