On why I’m naked (sometimes)

online, that is

Since I’ve been publishing articles online, I got a lot of reactions on the cartoon of me on my website.

Art directors Henk Haaima & Eelco van Collenburg

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.

Component based

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.

Some shirts and a bomber jacket I can use for dressing my alter ego

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.

Progressive enhancement

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

Using JavaScript, the clothes are loaded after page load with a deliberate delay. The delay is for actually showing my underwear. You can see it if your eyes are fast enough, the internet connection is slow enough or if you switched off JavaScript. And when you see it, take notice of the easter egg Ewout made.

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.

Below you can see the JavaScript I’ve used. It’s quite simple. I replace the source of every <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.


window.addEventListener('load', function(e) {

    var elements = document.querySelectorAll('img[data-src]');

    setTimeout(function() {

        [].forEach.call(elements, function(elem) {
            var item = elem.getAttribute('data-src');
            elem.src = item;
        });

    }, 500);
});

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.