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

Stopwatch in CSS

paullaros.github.io

Post reply on HN
Print view View original

21–30 of 38 posts

Re: Stopwatch in CSS

#21

Post by mnsc »

corresation wrote: post #19
aimhb wrote: post #7

Great example of a cool trick using completely the wrong tool for the job.

Whether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.

And the risk is they'll get inspired and try to solve another problem with css and a "clever declarative implementation" only that is better solved with the appropriate technology.

I'm not saying these tech explorations are bad, they just need to have a big fat disclaimer "don't try this in prod" and preferably a reference implementation of how it would be done "properly".

Re: Stopwatch in CSS

#23

Post by corresation »

mnsc wrote: post #21
corresation wrote: post #19

Earlier quoted context omitted.

Whether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.

And the risk is they'll get inspired and try to solve another problem with css and a "clever declarative implementation" only that is better solved with the appropriate technology. I'm not saying these tech explorations are bad, they just need to have a big fat disclaimer "don't try this in prod" and preferably a reference implementation of how it would be done "properly".

and preferably a reference implementation of how it would be done "properly"

Any implementation could be torn to shreds.

Because that's how the evolutionary, competitive nature of technology works. Nothing is "right" or "wrong", to use the scarequotes so in fashion, but is from a perspective and position. If things needed disclaimers around here -- as if we're all idiots, or worse jaded cynics -- then I think it would be a bad day for HN.

Re: Stopwatch in CSS

#24

Post by raldi »

Could someone post a summary of how it works, for the benefit of those of us reading HN on our phones?

Edit: I'm not asking what it does, but how.

Re: Stopwatch in CSS

#25

Post by crisnoble »

raldi wrote: post #24

Could someone post a summary of how it works, for the benefit of those of us reading HN on our phones? Edit: I'm not asking what it does, but how.

It is literally a stopwatch. You click play, you click pause, you click stop and it behaves exactly like the Seiko hanging from your gym teacher's neck. The interesting part is that it works with nothing but HTML/CSS, and the animations are flawless while the design is clean.

Also, does it really not work on the phone?

Re: Stopwatch in CSS

#27

Post by crisnoble »

mnsc wrote: post #21
corresation wrote: post #19

Earlier quoted context omitted.

Whether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.

And the risk is they'll get inspired and try to solve another problem with css and a "clever declarative implementation" only that is better solved with the appropriate technology. I'm not saying these tech explorations are bad, they just need to have a big fat disclaimer "don't try this in prod" and preferably a reference implementation of how it would be done "properly".

You certainly can and should use the underlying concepts, keyframes and pseudo content "in prod". You could use this stopwatch as well. Why not? It all depends on what you are trying to accomplish.

If everyone is worried that the tech is too scary or unstable or "wrong" TM, then we will never push the web forward into new territory. Remember when all form submissions forced a page refresh? If people were too afraid of front-end validation and AJAX calls then this would still be the reality.

Re: Stopwatch in CSS

#29

Post by adam12 »

maho wrote: post #4

For me, the button font doesn't load and the background transisiotions are, as always, extremely sluggish. (Firefox 17 ESR)

The button fonts aren't loading for me either in Firefox 25.

Re: Stopwatch in CSS

#30

Post by claybinion »

crisnoble wrote: post #25
raldi wrote: post #24

Could someone post a summary of how it works, for the benefit of those of us reading HN on our phones? Edit: I'm not asking what it does, but how.

It is literally a stopwatch. You click play, you click pause, you click stop and it behaves exactly like the Seiko hanging from your gym teacher's neck. The interesting part is that it works with nothing but HTML/CSS, and the animations are flawless while the design is clean. Also, does it really not work on the phone?

I think he was talking about how it works from a programming perspective. He possibly can't view source on his phone.

Edit: For the record it works and looks fine on my android phone, better than Chrome on my desktop in my opinion.

Post reply on HN