6 ms·

Ha Do That in HTML5

34 points by kadhinn 16y ago

zackola 16y ago
That is the ugliest button I've ever seen on the internet.
- jgalvez 16y ago
  And I'm glad HTML5 may give me a hard time if I ever attempt to make one.
- jherdman 16y ago
  I take it this means you weren't around for The Dark Ages? The time when animated GIFs ran amuck, standards were wept for acceptance, and the kingdom of Geocities was strong?
  - 9ec4c12949a4f3 16y ago
    If this banner is flashing, we may have just given you an epeliptic seizure!!
  - zackola 16y ago
    I was around for The Dark Ages for sure, and even including everything there, this button is worse. I'd even prefer a Java applet mirror reflection button to this thing.
hnal943 16y ago
So... the point is that HTML5 can't make annoying buttons with poor usability?
- peti 16y ago
  Annoying? Poor usability? It looks like a button, reacts on mouseovers, and would totally fit in some game's website. Besides, it is not the point here.
  - rimantas 16y ago
    …takes 41KB, and does not work on systems without Flash installed.
  - Yzupnick 16y ago
    What is his point? Flash rules HTML5 drools? Who cares. If a developer wants to use Flash then he can use Flash. If he doesn't, then he won't.
  - jordan0day 16y ago
    My thoughts too. While that might be a silly button to have for many sites, it looks like something I've seen in more than one video game menu. So, it's not without merit.
jbail 16y ago
You can do that in HTML5. You could use CSS3 with animated gifs/pngs --- or go straight to the canvas. Either way would get it done. I'd vote for using canvas. I'll leave it to someone else to implement. I've got real applications to build today...
Encosia 16y ago
Well, that shouldn't be very hard to reproduce: http://dl.dropbox.com/u/360937/do-that-in-html5-fail.png http://dl.dropbox.com/u/360937/do-that-in-html5-fail.png
- moxiemk1 16y ago
  Since I'm using an iPad at the moment, I was similarly spared from seeing what this button looked like. That is, until people rose to his challenge. :(
mvalle 16y ago
Is this from Adobe, or does someone really care that much?
psadauskas 16y ago
No, I don't believe I will. I'd rather my users know the button is a button, and will behave like they expect, all without taking up 50% of my CPU... (Aside: I went back to the page to double-check CPU usage, and the button wasn't working this time. Yup, behold the awesome power of flash!)
- confuzatron 16y ago
  Moving over this button resulted in no perceptible CPU impact on my machine (crazy fool).
- White_N_Nerdy 16y ago
  I have seen many HTML5 demos that have taken up 50% or more of my CPU. So, what's the difference?
  - jordan0day 16y ago
    I think psadauskas' point was that a shiny button isn't a good benchmark for a flash vs. html5 comparison. Or at least that they don't think that shiny buttons make a lot of sense.
kqueue 16y ago
I don't think the author knows much about html5 or the concept of canvas in general. If he goes to http://www.chromeexperiments.com/ http://www.chromeexperiments.com/, he'll realize that all this is doable.
STHayden 16y ago
People who complain the button is ugly seem to be missing the point. iF there is something that flash can do that HTML5 and the canvas can't do then it's a bridge to be crossed. While this might be a bad example it would be worth wile to have a list of what flash can do that HTML5 can not yet. The we can talk about if it is or is not worth implementing.
benologist 16y ago
This should be posted as a challenge: http://armorgames.com/play/1716/gemcraft http://armorgames.com/play/1716/gemcraft
wazoox 16y ago
Apparently the effect loops endlessly, always the same. In fact it can be replicated with 1995 tech, i. e. animated GIF.
9ec4c12949a4f3 16y ago
ITT: People getting trolled to help him convert a website from flash to html5.
S_A_P 16y ago
He should have cleaned his room before taking a picture in it. If the debate was so tiresome between flash/html 5, why add fuel to the fire? I still dont see the need to justify your purchase/platform/technology. build things that your consumers like, use VB script, Cobol, or powerbuilder for all I care- just make it cool.
StavrosK 16y ago
I can't, sorry, Flash doesn't support my OS so I can't see it.
steveklabnik 16y ago
Someone on Reddit did it: http://www.reddit.com/r/programming/comments/db37b/ha_do_that_in_html5/c0yvojd http://www.reddit.com/r/programming/comments/db37b/ha_do_tha...
- seejay 16y ago
  Yup! guess it's time to eat his old Flash disks LOL!
  - confuzatron 16y ago
    He should have stipulated that the HTML5 version must have smooth animation, like the Flash version.
- FreakCERS 16y ago
  Someone else at reddit (me) did it better: http://www.reddit.com/r/programming/comments/db37b/ha_do_that_in_html5/c0yx0vw http://www.reddit.com/r/programming/comments/db37b/ha_do_tha...
superk 16y ago
I think the "gracefully" part is misleading. This could be done with Javascript and a simple CSS class added to the <button> is both graceful and degrades gracefully. But if we're comparing apples-to-apples, what's graceful about the Flash solution - opening one (possible more - Photoshop, etc) programs, learning a proprietary language (Actionscript) and exporting a binary that's not accessible to users or search engines, etc...
jdietrich 16y ago
Will the flash button gracefully degrade if I have an obsolete version of Flash Player, or I use a flash blocker? Can an African schoolkid see it on their OLPC XO? Can a blind person read it with their screen reader or braille terminal? Can I select it using a keyboard or an accessible input device? Can I restyle it in the browser, so it's clear enough for my grandma to read through her cataracts and big enough for her to click on despite her arthritis? Every time you use Flash, you're insulting the dignity of the elderly, the disabled and any number of others. You're saying to users "if you're not a healthy young person on a modern computer with a fast connection, you're a second-class citizen". We shouldn't tolerate it, and in many countries the law doesn't allow us to. HTML works because it works for everyone, not just a fortunate few. This isn't about technology, it's a civil rights issue. No matter how hard Adobe try, Flash accessibility is massively inferior to HTML accessibility. They should be ashamed that they took so long to even begin to address the needs of disabled users and developers using their products should be ashamed for not using the open, standards-compliant, accessible alternative.
DavidBishop 16y ago
(Why are there so many posts here without a comment section? Now to the topic at hand...) Why? That's my first question. Why? As in why do I need this button? As in why do I have to do this in HTML 5? HTML 5 doesn't have to replace Flash. Flash may be great for some devices, and the computers of today can do Flash. Why does this argument always end up with "But I can do this wildly unnecessary thing in Flash! I should be able to make something unequally unnecessary in HTML 5". Perhaps HTML 5 can't do the unnecessary. Perhaps that's all the more reason to go to HTML 5. Simplicity is the ultimate sophistication. - Leonardo da Vinci
basicxman 16y ago
yawn Whatever happened to use the right tool for the right job? If you need a button like that (gaming website is about the only thing I can think of), chances are your audience probably has Flash. My personal opinion however is Flash is not the right tool for the particular job of creating navigation.
jws 16y ago
From stackoverflow.com where some misguided fool wants to draw his page background with canvas: … Webkit-based browsers do allow you to use a element in the CSS background property. Just give the canvas an id, then use "body { background:url(#mycanvas); }" in your CSS. Sure, that isn't in the HTML5 standard per se, but since there is no HTML5 standard we can pretend it is. steveklabnik points out in this thread an example of someone doing it, http://mobdb.com/reddit/button.html http://mobdb.com/reddit/button.html , but they use absolute positioning to overlay the button and canvas and will surely go mad if they try to use it for real. I suppose, with this newfound CSS knowledge I will now have to change my home page background to a hilbert curve. Edit: Actually, I think I'll use the "background: -webkit-canvas(name)" and getCSSCanvasContext() DOM function documented at http://webkit.org/blog/176/css-canvas-drawing/ http://webkit.org/blog/176/css-canvas-drawing/ Upshot: No hilbert for me. Takes about 1 second to render a maximally detailed hilbert in my browser on a core i7 processor.
pedalpete 16y ago
Does the author realize that the last image has Mr T. representing flash and Rocky representing HTML5.... in the movie, I believe, Rocky won.
seejay 16y ago
Am I the only one who feels like this guy is just a troll???
rimantas 16y ago
My rought take (sure, I cheated a bit with a background too): http://kod.as/lab/button/ http://kod.as/lab/button/ Safari and Chrome.

Ha Do That in HTML5

34 points by kadhinn 16y ago

zackola 16y ago

That is the ugliest button I've ever seen on the internet.

jgalvez 16y ago
And I'm glad HTML5 may give me a hard time if I ever attempt to make one.
jherdman 16y ago
I take it this means you weren't around for The Dark Ages? The time when animated GIFs ran amuck, standards were wept for acceptance, and the kingdom of Geocities was strong?
- 9ec4c12949a4f3 16y ago
  If this banner is flashing, we may have just given you an epeliptic seizure!!
- zackola 16y ago
  I was around for The Dark Ages for sure, and even including everything there, this button is worse. I'd even prefer a Java applet mirror reflection button to this thing.

hnal943 16y ago

So... the point is that HTML5 can't make annoying buttons with poor usability?

peti 16y ago
Annoying? Poor usability? It looks like a button, reacts on mouseovers, and would totally fit in some game's website. Besides, it is not the point here.
- rimantas 16y ago
  …takes 41KB, and does not work on systems without Flash installed.
- Yzupnick 16y ago
  What is his point? Flash rules HTML5 drools? Who cares. If a developer wants to use Flash then he can use Flash. If he doesn't, then he won't.
- jordan0day 16y ago
  My thoughts too. While that might be a silly button to have for many sites, it looks like something I've seen in more than one video game menu. So, it's not without merit.

jbail 16y ago

You can do that in HTML5. You could use CSS3 with animated gifs/pngs --- or go straight to the canvas. Either way would get it done. I'd vote for using canvas. I'll leave it to someone else to implement. I've got real applications to build today...

Encosia 16y ago

Well, that shouldn't be very hard to reproduce: http://dl.dropbox.com/u/360937/do-that-in-html5-fail.png http://dl.dropbox.com/u/360937/do-that-in-html5-fail.png

moxiemk1 16y ago
Since I'm using an iPad at the moment, I was similarly spared from seeing what this button looked like. That is, until people rose to his challenge. :(

mvalle 16y ago

Is this from Adobe, or does someone really care that much?

psadauskas 16y ago

No, I don't believe I will. I'd rather my users know the button is a button, and will behave like they expect, all without taking up 50% of my CPU... (Aside: I went back to the page to double-check CPU usage, and the button wasn't working this time. Yup, behold the awesome power of flash!)

confuzatron 16y ago
Moving over this button resulted in no perceptible CPU impact on my machine (crazy fool).
White_N_Nerdy 16y ago
I have seen many HTML5 demos that have taken up 50% or more of my CPU. So, what's the difference?
- jordan0day 16y ago
  I think psadauskas' point was that a shiny button isn't a good benchmark for a flash vs. html5 comparison. Or at least that they don't think that shiny buttons make a lot of sense.

kqueue 16y ago

I don't think the author knows much about html5 or the concept of canvas in general. If he goes to http://www.chromeexperiments.com/ http://www.chromeexperiments.com/, he'll realize that all this is doable.

STHayden 16y ago

People who complain the button is ugly seem to be missing the point. iF there is something that flash can do that HTML5 and the canvas can't do then it's a bridge to be crossed. While this might be a bad example it would be worth wile to have a list of what flash can do that HTML5 can not yet. The we can talk about if it is or is not worth implementing.

benologist 16y ago

This should be posted as a challenge: http://armorgames.com/play/1716/gemcraft http://armorgames.com/play/1716/gemcraft

wazoox 16y ago

Apparently the effect loops endlessly, always the same. In fact it can be replicated with 1995 tech, i. e. animated GIF.

9ec4c12949a4f3 16y ago

ITT: People getting trolled to help him convert a website from flash to html5.

S_A_P 16y ago

He should have cleaned his room before taking a picture in it. If the debate was so tiresome between flash/html 5, why add fuel to the fire? I still dont see the need to justify your purchase/platform/technology. build things that your consumers like, use VB script, Cobol, or powerbuilder for all I care- just make it cool.

StavrosK 16y ago

I can't, sorry, Flash doesn't support my OS so I can't see it.

steveklabnik 16y ago

Someone on Reddit did it: http://www.reddit.com/r/programming/comments/db37b/ha_do_that_in_html5/c0yvojd http://www.reddit.com/r/programming/comments/db37b/ha_do_tha...

seejay 16y ago
Yup! guess it's time to eat his old Flash disks LOL!
- confuzatron 16y ago
  He should have stipulated that the HTML5 version must have smooth animation, like the Flash version.
FreakCERS 16y ago
Someone else at reddit (me) did it better: http://www.reddit.com/r/programming/comments/db37b/ha_do_that_in_html5/c0yx0vw http://www.reddit.com/r/programming/comments/db37b/ha_do_tha...

superk 16y ago

I think the "gracefully" part is misleading. This could be done with Javascript and a simple CSS class added to the <button> is both graceful and degrades gracefully. But if we're comparing apples-to-apples, what's graceful about the Flash solution - opening one (possible more - Photoshop, etc) programs, learning a proprietary language (Actionscript) and exporting a binary that's not accessible to users or search engines, etc...

jdietrich 16y ago

Will the flash button gracefully degrade if I have an obsolete version of Flash Player, or I use a flash blocker? Can an African schoolkid see it on their OLPC XO? Can a blind person read it with their screen reader or braille terminal? Can I select it using a keyboard or an accessible input device? Can I restyle it in the browser, so it's clear enough for my grandma to read through her cataracts and big enough for her to click on despite her arthritis? Every time you use Flash, you're insulting the dignity of the elderly, the disabled and any number of others. You're saying to users "if you're not a healthy young person on a modern computer with a fast connection, you're a second-class citizen". We shouldn't tolerate it, and in many countries the law doesn't allow us to. HTML works because it works for everyone, not just a fortunate few. This isn't about technology, it's a civil rights issue. No matter how hard Adobe try, Flash accessibility is massively inferior to HTML accessibility. They should be ashamed that they took so long to even begin to address the needs of disabled users and developers using their products should be ashamed for not using the open, standards-compliant, accessible alternative.

DavidBishop 16y ago

(Why are there so many posts here without a comment section? Now to the topic at hand...) Why? That's my first question. Why? As in why do I need this button? As in why do I have to do this in HTML 5? HTML 5 doesn't have to replace Flash. Flash may be great for some devices, and the computers of today can do Flash. Why does this argument always end up with "But I can do this wildly unnecessary thing in Flash! I should be able to make something unequally unnecessary in HTML 5". Perhaps HTML 5 can't do the unnecessary. Perhaps that's all the more reason to go to HTML 5. Simplicity is the ultimate sophistication. - Leonardo da Vinci

basicxman 16y ago

yawn Whatever happened to use the right tool for the right job? If you need a button like that (gaming website is about the only thing I can think of), chances are your audience probably has Flash. My personal opinion however is Flash is not the right tool for the particular job of creating navigation.

jws 16y ago

From stackoverflow.com where some misguided fool wants to draw his page background with canvas: … Webkit-based browsers do allow you to use a element in the CSS background property. Just give the canvas an id, then use "body { background:url(#mycanvas); }" in your CSS. Sure, that isn't in the HTML5 standard per se, but since there is no HTML5 standard we can pretend it is. steveklabnik points out in this thread an example of someone doing it, http://mobdb.com/reddit/button.html http://mobdb.com/reddit/button.html , but they use absolute positioning to overlay the button and canvas and will surely go mad if they try to use it for real. I suppose, with this newfound CSS knowledge I will now have to change my home page background to a hilbert curve. Edit: Actually, I think I'll use the "background: -webkit-canvas(name)" and getCSSCanvasContext() DOM function documented at http://webkit.org/blog/176/css-canvas-drawing/ http://webkit.org/blog/176/css-canvas-drawing/ Upshot: No hilbert for me. Takes about 1 second to render a maximally detailed hilbert in my browser on a core i7 processor.

pedalpete 16y ago

Does the author realize that the last image has Mr T. representing flash and Rocky representing HTML5.... in the movie, I believe, Rocky won.

seejay 16y ago

Am I the only one who feels like this guy is just a troll???

rimantas 16y ago

My rought take (sure, I cheated a bit with a background too): http://kod.as/lab/button/ http://kod.as/lab/button/ Safari and Chrome.