Since I’ve been publishing articles online, I got a lot of reactions on the cartoon of me on my website.
A while ago, two colleagues of mine presented for some students at Mirabeau. Ewout, one of our illustrators, made a drawing of them on the day they had this talk. In the picture they had the same clothes on as in real life. I wanted to have the same for a presentation I’d do a few weeks later.
As one of the neatest organised designers, Ewout sent a component based PSD. It had more than 30 different clothes in it. I was quite surprised with that. So I needed to do something with so many options. I decided that every article I write should have another picture of myself with it. A nice idea if I may say.
Since I’m a frontend developer, I want to reuse components when possible. Reusing images was a natural choice for me. I made HTML and CSS to place different images on top of each other. Some parts were animated as well with simple CSS.
Below you can see my head, which is tilted every few seconds. Heh, it looks weird when my head is floating without its body attached.
All I did with these images wasn’t OK though. More assets on a page means more http requests. Which means more waiting time. This component is meant to be funny and not necessarily as content. So it isn’t essential to make loading it a top priority.
I’ve written some stuff about performance and progressive enhancement. I’m still struggling to explain it the best way possible. Yet this component is maybe the best in visually explaining the enhancement principle of progressive enhancement. When the browser is capable enough, the user gets a reward.
See it as when you want to talk to me, it isn’t necessary to see me clothed. But with my clothes on, it makes it far more comfortable for both of us :)
How it’s done
He is a fan of dinosaurs, so if he’s got the chance he places a dinosaur in an illustration. You should check the rest of his creations. Certainly if you like dinosaurs as well or just like his drawing style.
<img>-element. This is done by looking at the attribute
data-src. If it’s present, the script will change from blank.gif to the image I’ve placed in that attribute.
I used blank.gif for nostalgic reasons. Remember table layouts? Essentially this method is just lazy loading. But with a deliberate delay, to show you how progressive enhancement works. Layer over layer, when the browser is capable of showing it.