Stopwatch in CSS • Hacker News Board

Re: Stopwatch in CSS

#31

Post by ChikkaChiChi » Fri, Nov 15, 2013, 3:17 PM UTC

Fastest time from play to pause seems to be 00:00:00:16. I think the fade animation prevents the DOM from responding any faster.

(What, doesn't everyone do the 'see how fast you can stop it' test to every stopwatch ever put into their hands?

Re: Stopwatch in CSS

#32

Post by Dirlewanger » Fri, Nov 15, 2013, 3:24 PM UTC

The entire page color change hurts.

Re: Stopwatch in CSS

#33

Post by jezebel6 » Fri, Nov 15, 2013, 3:37 PM UTC

mattmanser wrote: post #15

I love how the stop button is just a link to the page. Smart.

I guess, although it makes it a nuisance to back your way out of the page after using the stopwatch a few times.

Re: Stopwatch in CSS

#34

Post by rohitv » Fri, Nov 15, 2013, 3:59 PM UTC

It's behaving really weird for me. Initially the milliseconds go from 0 to 99 repeatedly. After click on play, the seconds start increasing and when paused it is paused but the milliseconds still go from 0-99 repeatedly. Similar behaviour with stop, it resets the seconds but milliseconds still go from 0-99 repeatedly.I'm on Chrome 31.

Aside from that, great work :)

Re: Stopwatch in CSS

#35

Post by mrcactu5 » Fri, Nov 15, 2013, 4:03 PM UTC

what does "pure CSS" mean? no javascript ?

Re: Stopwatch in CSS

#36

Post by mnsc » Fri, Nov 15, 2013, 4:54 PM UTC

corresation wrote: post #23

mnsc wrote: post #21

Earlier quoted context omitted.

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 wou…

The disclaimer wasn't for the HN crowd necessarily. And the reference implementation would be useful for both showing "the proper way" and acting like a contrasting view. I don't understand animating with css so I would love to see "this is how you would accomplish the same thing using javascript", which I (without understanding css animation) believe is the right tool.

But of course, houndres of insane trick-focused css gurus churning out millions of crazy tech demos... Surely someone will find out some novel, more useful technique that we conservative programmers will begin to use for making the boring shit we do less burdensome. So I'm all for it really, despite my initial negative tone.

Re: Stopwatch in CSS

#37

Post by teh_klev » Fri, Nov 15, 2013, 7:10 PM UTC

csmuk wrote: post #14

Goes absolutely bat shit in IE11 flickering and all sorts going on. Then again what do I expect? Works fine in Chrome and Firefox.

Oddly though this behaves just fine in IE10 and much better than in Chrome which keeps counting up the milliseconds regardless of whether the stopwatch is running or not.

Re: Stopwatch in CSS

#38

Post by jakejake » Fri, Nov 15, 2013, 11:52 PM UTC

addedlovely wrote: post #9

jakejake wrote: post #8

Really cool! Would anybody care to enlighten me on how the start/stop buttons work? I see that they add an anchor to the URL but I couldn't figure out how that triggers the style change. Thanks for sharing!

:target pseudo selector

ah cool thanks