
Show HN: fontBomb - Stylishly destroy the web - plehoux
http://fontbomb.ilex.ca
======
patio11
Very, very nice movie. (Watch it with the sound on.)

That sense of timing would improve a lot of e.g. paid-for product demo movies.

~~~
josscrowcroft
Yeah, beautiful and charmingly funny video.

Does anyone know what the waltz used was? Strauss?

~~~
plehoux
<http://en.wikipedia.org/wiki/The_Nutcracker> -> Waltz Of The Flowers

------
plehoux
I'm the author, it works best in Safari and IE 9. Use the bookmarklet to
destroy any website.

Source is here: <https://github.com/plehoux/fontBomb/tree/master/src/coffee>

~~~
alptrv
Just curious, why it so faster in Safari then in Chrome?

~~~
plehoux
My guess is that Safari rendering system use hardware acceleration and Chrome
doesn't.

The bottleneck here is not javascript, it is the browser rendering system when
applying all those css 2d transform.

~~~
TazeTSchnitzel
Yep. Safari runs a 3D CSS demo/benchmark/unrealistic-stress-test I made much
smoother than Chrome.

------
wickedchicken
Thanks for making your site wacom-friendly. A lot of sites don't have any
denoising for clicks, so if you try to click with a tablet it ends up dragging
a tiny amount instead (twitter's lightbox is REALLY BAD in this respect).

~~~
plehoux
It is pretty simple to implement, you increment a variable on 'touchmove'
event, and check on 'touchend' if the variable is less then 3. If it is, you
can call your click function.

~~~
radarsat1
hm. seems like something that the browser should handle for you... don't see
why every website should have its own debouncing code.

~~~
jahewson
Ah, but then 3px drags are not allowed, which might ruin your web-based
diagram editor or game. Also the granularity of the denouncing will change
depending on the size of the click target, so it's really app-specific.

~~~
rwallace
Much better to break the rare case of three pixel drags than the common case
of, well, clicks! It's not realistic to expect every web programmer to start
knowing about tablets. The default should be a reasonable amount of denoising,
with a way for the page to change that default when needed.

~~~
betterth
Especially considering most web dev's will just implement jquery-ui or
somesuch draggable library that will handle the proper 3px drag fix for them.

------
valgaze
This is an impressive one as well (basically a big snowball that grows bigger
picking up page elements): <http://kathack.com/>

I've always wondered if these sorts of tools could be a useful gimmick for
traffic-generation

~~~
noahlt
Related: this bookmarklet turns the page into a game of Asteroids.
<http://kickassapp.com/>

------
plehoux
Tks HN! fontBomb is getting viral! I'm now getting the same amount of traffic
from others sources then HN. Have a look :

<http://min.us/mEKGlLMaB>

Really exciting! I feel that the week I invested in making it, is really
paying off. At least in self-confidence!

By the way, tks Github for hosting it free of charge!

~~~
vecinu
The idea pays for itself. You did a good job, people love it and you deserve
the credit.

Congratulations and keep up the good ideas!

By the way, nice to see a fellow Canadian hacking it up!

------
dazbradbury
Excellent demo and smart implementation! Thanks for sharing.

It's a shame the code can't all fit in the bookmarklet though, rather than
having to download an external source (which is subject to change). _This is
meant as a comment on large bookmarklets generally, rather than fontBomb in
particular._

~~~
plehoux
"It's a shame the code can't all fit in the bookmarklet"

I don't understand your problem. Can't you drag and drop the link to your
favorites bar?

~~~
gregsadetsky
Perhaps the GP wants to make sure that the code keeps working, regardless of
the server's availability, etc...?

dazbradbury -- Host a local copy of <http://fontbomb.ilex.ca/js/main.js> and
you should be good to go :-)

~~~
plehoux
I get it, tks Greg. I originally did not hardcode the js function in the href
bookmarklet attribute to ease development process. Since it's effectively a
good concern, I will hardcode it.

EDIT: Updating the code to escape parentheses is pain. I will leave it like
that for the moment. Like greg said, your best option for now is to copy
<http://fontbomb.ilex.ca/js/main.js> . Sry!

~~~
gregsadetsky
You shouldn't try to fit your code in that bookmarklet...! Updatability issues
aside (your original, server-loaded approach is absolutely valid), there
definitely are limits to a bookmarklet's size, just as there are browser-
specific limits to URL length... See:
[http://stackoverflow.com/questions/417142/what-is-the-
maximu...](http://stackoverflow.com/questions/417142/what-is-the-maximum-
length-of-a-url)

 _EDIT:_ _jb's right regarding the security concern though; the server-hosted
code could be changed to something malicious after everyone has installed it

~~~
AntiRush
To solve the security issue, the bookmarklet could perform some sort of hash
checking on the source and refuse to run if it's changed.

The question is, can a hash function and verification logic be made small
enough for this to be viable?

~~~
xkcdfanboy
Use MD5, very secure _snickers_

------
ZenJosh
Worth noting - Chrome auto-translates from 'French' to 'English', turns:

    
    
      Click anywhere on this page to plant bombs. To blow up other websites, drag and drop this link fontBomb to your favorites bar
    

into:

    
    
      Ctheick hasntherewhere on this phasge to pthehasnt bombs. To btheow up other websites, ofrhasg hasnof ofrop this theink fontBomb to thereour fhasvorites bhasr
    

which, while hilarious, is probably something you want to check out. Other
than that, its a fun little hack, nice job!

~~~
plehoux
Tks just updated the code with : <meta name="google" value="notranslate">

------
dev1n
I found something similar to this a few months back... very cool trick.

<http://kickassapp.com/>

~~~
mck-
That IS kickass

------
plehoux
Inception time, try fontBomb on fontBomb code!
<http://fontbomb.ilex.ca/js/main.js>

------
potatohead23
Serious question here, I see incredible stuff like this being done with
JavaScript all the time, but I have never come across a tutorial or anything
of the sort that even touches on things like this, where do I start learning
how to use JS to manipulate webpages in this way???

~~~
plehoux
I think a good way to start would be to have a look I the source code, fork it
and experiment on it:
<https://github.com/plehoux/fontBomb/tree/master/src/coffee>

If you want to google your way out of it start with something like "CSS 2d
transform".

There's a lot of differents technologies going on in the background, but it
still fairly simple to understand.

1\. I parse the the html to wrap each character in a <particle> tag. + Some
hacks, to keep withespace.

2\. I iterate trough all <particle> element and add velocity depending of bomb
position.

3\. Velocity is calculated with basic trigonometry. I then move the particules
with css 2d transform.

ps. I putted a lot of effort in optimisation, no Math.sqrt, no objects in the
loop (velocityX vs velocity.x), etc. But at the end the bottleneck is really
the browser rendering.

~~~
dmak
I'm going to look through the code now.

What I don't understand is how do you manipulate letters like that? I always
though font was this static thing that cannot be manipulated. This is mind
opening. I am really interested and want to learn more about this. What
technology is allowing you to grab a letter and just randomly blow it away?

~~~
emmelaich
I don't think you can, directly. You have to turn each letter into an element
(a div or span typically)

I'm reading the source, but can't see where he does this exactly.

(I'm a javascript newbie)

Edit: look in explosion.coffee, function explosifyText It uses string split
and puts the chars in either a word or particle element.

~~~
dmak
Thanks!

------
eragnew
Didn't watch the movie, but I think the functionality is awesome :)

Would love to see a gallery of what people have come up with.

Is it possible to see source code?

~~~
Scottopherson
<http://fontbomb.ilex.ca/js/main.js>

<https://github.com/plehoux/fontBomb/tree/master/src/coffee>

~~~
eragnew
nice, thanks. will check it out.

------
lechat0
Fun stuff right there. Any particular reason for choice of poem as demo?

------
jonny_eh
This is brilliant. I will never surf the web the same way again!

------
songgao
That's so cool. The music adds much more fun to it. Great job!

------
loeschg
Facebook is bomb proof.

~~~
SwaroopH
you just need to reload the insecure script.

------
septerr
Sweet. I am eager to go through the source code.

~~~
gregsadetsky
The author should release it in its original, CoffeeScript form..! ;-)

~~~
plehoux
Here it is: <https://github.com/plehoux/fontBomb/tree/master/src/coffee>

------
coreycollins
This is awesome!

------
arrowgunz
Wow, this is so much fun to play with.

------
ya3r
This things works nicely on the iphone!

Kudos

~~~
plehoux
Tks, HTML 5 is on the verge of massively disrupting games. And my bet is that
it will be with the DOM and not canvas or webGL.

~~~
gregsadetsky
Why DOM specifically? Aren't both canvas and WebGL well suited for 2D/3D? re:
three.js, etc.?

~~~
plehoux
Because you get functions to deal with collisions, positions, size, etc. for
free. Instead of reimplementing everything on top of the canvas element.

Of course frameworks will help with that. But by the end of the day, the
hardware accelerated rendering system will be so good, I'm sure we gonna be
able to render thousand of particles with the DOM.

------
kaybe888
So cool, Good work Phil

------
hkon
It did not entertain me. Sorry. Nice work though.

------
9k9
Combine <http://kickassapp.com/>, <http://kathack.com/> and font bomb for
hours of fun.

