Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: fontBomb - Stylishly destroy the web

fontbomb.ilex.ca

Post reply on HN
Print view View original

81–90 of 92 posts

Re: Show HN: fontBomb - Stylishly destroy the web

#81

Post by jahewson »

radarsat1 wrote: post #47
plehoux wrote: post #14

Earlier quoted context omitted.

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.

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

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.

Re: Show HN: fontBomb - Stylishly destroy the web

#82

Post by wickedchicken »

edanm wrote: post #80
stan_rogers wrote: post #40

Earlier quoted context omitted.

Once you go absolute-position, it's hard to go back. With a mouse, you need to be aware of where the cursor is ; with a tablet you just need to know where you want it to be.

Can you go into more detail about the benefits of using a Wacom tablet instead of a mouse? I know absolutely nothing about Wacom tablets, but this sounds interesting and I'd love to hear more.

Wacoms use a pretty natural hand-eye coordination that your brain is wired for. Styuli have been used by humans for a few millenia now with no real issues, until one prominent human decided he didn't "want a little scribble thing" and subsequently wiped out the market for them.

If you're using touchpads, going from touchpad to stylus is exactly the same switch as going from finger paint to pen. If you're using a mouse, then using a stylus allows for less awkward wrist motion.

Absolute positioning is AWESOME for static or mostly static UI elements: menu bars, browser tabs, buttons on websites since your brain can calculate 'ahead of time' how much it needs to move. It's also much more accurate when performing small motor movements (hence why it's used for drawing, but this also comes in to play for highlighting text). It does not perform as well when scrolling, which is where relative positioning works better.

Re: Show HN: fontBomb - Stylishly destroy the web

#83

Post by dmak »

plehoux wrote: post #69
potatohead23 wrote: post #55

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

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 tag. + Som…

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?

Re: Show HN: fontBomb - Stylishly destroy the web

#84

Post by emmelaich »

dmak wrote: post #83
plehoux wrote: post #69

Earlier quoted context omitted.

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 tag. + Som…

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?

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.

Re: Show HN: fontBomb - Stylishly destroy the web

#85

Post by peterjmag »

edanm wrote: post #80
stan_rogers wrote: post #40

Earlier quoted context omitted.

Once you go absolute-position, it's hard to go back. With a mouse, you need to be aware of where the cursor is ; with a tablet you just need to know where you want it to be.

Can you go into more detail about the benefits of using a Wacom tablet instead of a mouse? I know absolutely nothing about Wacom tablets, but this sounds interesting and I'd love to hear more.

I used a Wacom Bamboo tablet full time at my last job for about two years, even whilst coding and browsing. I noticed a marked decrease in wrist pain and fatigue compared to using a mouse all day. It's a much more natural position for your wrist.

Re: Show HN: fontBomb - Stylishly destroy the web

#88

Post by dmak »

emmelaich wrote: post #84
dmak wrote: post #83

Earlier quoted context omitted.

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?

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.

Thanks!

Re: Show HN: fontBomb - Stylishly destroy the web

#89

Post by rwallace »

jahewson wrote: post #81
radarsat1 wrote: post #47

Earlier quoted context omitted.

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

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.

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.

Re: Show HN: fontBomb - Stylishly destroy the web

#90

Post by betterth »

rwallace wrote: post #89
jahewson wrote: post #81

Earlier quoted context omitted.

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.

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.

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.
Post reply on HN