My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Friday, February 03, 2012

Love ALL The Web

update no selection problems anymore ... eat the cake now

Maybe 'cause San Valentine is coming, maybe 'cause Chris Williams started it, promoting an end to negativity, or maybe 'cause the web has been recently under attack ... no matter why, the topic of this js1k contest is Love so here I am introducing my proposal, the very first demo submitted this year.
Click the link once to see it in action through following iframe:

What Is It

A simple script able to bring random harts behind the mouse or the finger in any page you want, even Facebook :)
In order to do this, you can bookmark the link dragging into your bookmark bar, change the name (i.e. LOVE), and start surfing surrounded by little harts any new page you visit by simply clicking it. I know it's a silly demo, but it was a quick and interesting experiment I could recycle with any sort of different shape since the graphic is directly drawn on every little canvas.

Technical Details

  • compatible with all modern mobile and desktop browsers, included IE9
  • unobtrusive, it should not affect much the normal behavior of the generic page
  • based on requestAnimationFrame where supported
  • lazy pointer evaluation, no matter if your tablet is attached to a deck with a mousepad, touch screens and other pointers are all supported at runtime
  • it fits in 1020 1023 bytes after Closure Compiler Advanced minification plus extra clean up performed by YUI Compressor (plus few manual tweaks for numbers) ... once gzipped, it fits in about 0.5Kb
  • 1 hour of work, included mobile and cross browsers tests ( plus 20 minutes to think about a solution and fix the text selection problem )
  • easy to recycle, a single change in the draw function and anything you want could be displayed, even smoke effect or rainbows

Discoveries During Creation

  • performances boost with requestAnimationFrame is unbelievable, if you compare current Opera browser VS Chrome, Safari, Webkit, or Firefox, you'll see the difference against setTimeout
  • IE9 and IE10 awesome canvas performances become crap once more than a canvas is created at runtime. If you see how slow this thing could be in my Netbook in IE compared to others, you'll rethink about how fast canvases are in MS browser: it is that fast, but only if there is one of them
  • Opera still doesn't support requestAnimationFrame even if prefixed with the little o
  • the canvas arc() method is completely freak, only few browsers give what you expect. Compare the bigger hart on click in Chrome and Firefox, as example, Chrome gonna show Mickey Mouse like hart
  • YUI Compressor after Google Closure Compiler Advanced is able to produce a slightly smaller output preserving functionality
  • Chrome DOM inspector is really smart. While Safari and Webkit becomes much slower during inspection, Chrome seems to use a "requestDOMInspection" like mechanism to do not slow down the page during DOM changes

Have fun with JS1K


David said...

Is there a missing "r" in "equestAnimationFrame" ?

Andrea Giammarchi said...

absolutely no :)

if you have "equestAnimationFrame"

you can do the check for all variants adding

... etc ... it uses that indeed

lrbabe said...

I love this effect ;-)

Imma try to recreate it without canvas, just for fun.

Anonymous said...

Now it is much more better. Just wonder - why you removed previous comments? To make impression that everything was perfect from the beginning?

Andrea Giammarchi said...

Previous comments were pointless for a LOVE contest so I decided that no hate gonna be part of this post but feel free to keep insulting me if that makes you happy, and please don't take it personally if I don't publish those insults ... you know, haters gonna hate, this post won't allow people like you to ruin it .

I am looking forward to see your js1k code in the competition, the only place where you can discuss about others, showing what you have got as many have done already where none complained about perfection without giving a single hint.

Last, but not least, how about you showing your name ? ( even if I know who you are )
You know it's annoying when someone is bitching around the web without a name, they call them trolls, hope you don't want to be one of them forever.

Andrea Giammarchi said...

P.S. there is an update at the very beginning of this post to inform indeed that it was NOT perfect ... once again: haters gonna hate

Lea Verou said...

Why use canvas when you have THREE different unicode characters for hearts? ♥ ❤ ♡
I'd imagine those will save you quite a lot of filesize ;)

Andrea Giammarchi said...

I did not think about it first, and it does not scale in therm of size in any case ;-)

check the "click" event, as example