
Stopwatch with only CSS3 - No javascript - mappum
http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript
======
RKearney
One of the very first things typed is:

    
    
        <!-- Lets load up prefixfree first -->
        <script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
        <!-- You can download it from http://leaverou.github.com/prefixfree/ -->
    

Granted all it does is add the vendor based prefixes to certain CSS3
attributes, but this particular demo does in fact use Javascript.

~~~
mindhunter
This javascript code doesn't add any functionality to the demo, so no – this
demo does not use Javascript.

~~~
barredo
you and parent comment saw the same javascript, really said the same thing,
and still came to different conclusions.

How so? You both are right. It uses javascript (as parent said) but doesnt use
javascript to the animation (as you said).

This nitpicking is ruining the internet commenting for me. And yes, I see the
irony in my comment.

------
josscrowcroft
Lovely stuff, but I'm mostly impressed with the website that's used to
demonstrate it - I love the live-coding playback feature!

------
sneak
Now that we have YET ANOTHER Turing-complete language in my display-and-
rendering application, where's my button to switch off CSS?

~~~
whichdan
Firefox > View > Page Style > No Style

Safari > Develop > Disable Styles

Opera > View > Style > User Mode

It doesn't look like Chrome has an option by default, and I don't have IE on
hand to test.

------
Stratoscope
This is very impressive work - it's amazing to see what can be done with CSS
these days.

But it's not very usable as a stopwatch.

A real stopwatch has a single start/stop button that triggers when pressed.

This stopwatch has separate mouse-driven buttons for start and stop, and they
trigger when released. That makes it impossible to measure a very short time,
and awkward to start and stop at precise moments.

It would also be nice if there were keyboard shortcuts for stop/start/reset -
and those keyboard shortcuts should also trigger on keydown. (You could make a
minor improvement on physical stopwatches by supporting both a single key for
stop/start and two separate keys. The single key is convenient and familiar,
but being able to use separate keys would make it easy to time very short
events. This of course works only with the keyboard and not with mouse-driven
buttons.)

Can all that be done in CSS? I suspect not - and if not, then why go to extra
work to achieve a pure CSS implementation that's less usable? You could do it
more easily with JavaScript, make it compatible with more browsers, and
provide a better user experience too.

~~~
talmand
There's a reason it's called a demo. No one is actually suggesting that you
use this as a proper stopwatch. Everybody already understands the limitations
you specified.

~~~
Stratoscope
And an impressive demo it is.

But I'm fairly certain that not everybody understands the limitations I
mentioned. You and I and hopefully most of the folks here, sure. But spend
some time on the css-discuss mailing list [1] for an eye-opener.

Many of the members of that list seem to favor CSS-only solutions even when
the user experience is inferior to what you could achieve with a sensible
blend of CSS and JavaScript. And they're not just talking demos, they put this
stuff into production.

I don't understand that point of view at all. I want the best solution for the
user, and I'll use whatever tools are necessary to build it.

[1]: <http://www.css-discuss.org/>

~~~
talmand
Well, in the situation you are describing I most certainly agree. CSS-only
solutions tend to be quite lacking in real-world terms. But this was a demo
and I saw no indication it was anything other than that. If you were meaning
to aim your comment to people that think the way you describe then I
apologize, but I didn't get that from your comment.

~~~
Stratoscope
No apology needed! I appreciate your pointing out that the intent of my
comment was unclear. That is valuable feedback indeed.

------
mlLK
At first my inner neckbeard scoffed and proclaimed why? I looked at the source
and realized I don't know jack about CSS3 and how easy something like this is
to implement in less than ~150 lines of code was like ramming a sock down my
inner neckbeard's throat.

~~~
grannyg00se
I can't see the code because the account has been suspended. My inner
neckbeard is shouting "Stop turning everything into a jack of all trades!
Can't cascading style sheets just be really good at styling?"

------
Trufa
This is very interesting, but I wonder if it falls under the domain of things
that CSS should do, in a real app you probably shouldn't CSS so much. (This is
not an affirmation rather a question!).

Even so I think it is a great proof of concept and the font style was cool
idea.

~~~
antimora
My initial reaction was the same. But after I reviewed the code and saw how
the magic worked, then I thought there was nothing wrong using the CSS this
way: mainly the new feature of animation is utilized.

~~~
Trufa
My point is that, this is indeed a cool concept, well written and does well
what it intended.

The problem I see, it that at one point you my start using CSS for something
that will eventually (without you prior knowledge) grow bigger and more
complex outside of the realms/possiblilies of CSS, now you will have to re-
write.

Call me a purist, but when you start using CSS for more that styling, you
might want to re-evaluate.

That said, again, I think this example is awesome for showing the new feature
of the CSS language.

------
afhof
Maybe I'll be the only one to say it, but this doesn't work with NoScript.
Maybe this actually is a JS free Stopwatch, but the site doesn't work without
JS enabled. Perhaps the title of this should be changed, or relinked to a JS
free version?

~~~
candeira
It uses prefix-free, which is a script, in order to be cleaner-looking code.
As the author says:

> The JS used is prefixfree - just to make the length and size of the tutorial
> short and easy. No images or JS are used in the stopwatch logic/display.

It would be trivial to make a new -really- JS free version, but it wouldn't be
so easy to understand. It could be non-js in production, it just isn't for
teaching purposes, so I am happy to accept it as a 'non-js' stopwatch.

------
tar
All I get is a screen saying Account Suspended.

~~~
anton000
bandwidth overage after posting on HN i guess?

~~~
tar
Yeah. I think so. People should consider being prepared for massive traffic if
you post on HN.

~~~
bmelton
What about the people who have no idea that somebody else is posting their
content to HN?

~~~
anton000
get a good host that has some bandwidth overage contingency in place to keep
your site from going down. unless of course you don't really want traffic on
your site.

~~~
bmelton
It was a rhetorical question, basically. Almost nobody knows whether or not
their commodity web host can stand up to an HN-like traffic surge until they
actually _get_ an HN-like traffic surge.

The alternative is to pay what might seem like a ton of money for something
that they aren't going to need 364 days out of the year.

------
creativityhurts
Kudos for the effort. I'm always impressed by how much time some developers
invest in these CSS3-only experiments.

------
weiran
Coral cached version is working:
[http://thecodeplayer.com.nyud.net/walkthrough/make-a-
stopwat...](http://thecodeplayer.com.nyud.net/walkthrough/make-a-stopwatch-
using-css3-without-images-or-javascript)

------
alpb
The page just got suspended in the middle of my page loading, half of the page
loaded, CSS was not loaded. I refreshed the page and here's Account Suspended
page.

~~~
Angostura
Working for me now.

------
exim
Well, it might be cool for the first several times, to demonstrate turing-
completeness of CSS3, but are there any practical advantages over using js?

~~~
tikhonj
How does this demonstrate that CSS is Turing complete? I really doubt you as
much power to simulate a stopwatch as a Turing machine has.

~~~
exim
I should have put it as "programmability", and I not only address this
particular post, but the tendency in general.

------
mattslight
Is this the gist for it on GitHub?

Perhaps somebody could deploy to their host?

<https://gist.github.com/2224365>

------
DigitalSea
Impressive. Not one single line of Javascript being used on the suspend page,
hahaha. Hacker News ddos strikes again.

------
orbitingpluto
[Edit]

Back up! Seeing what people do with CSS is like watching MacGyver - it might
be the wrong tool for the job but it's always impressive. Look, I built a gun
with some rubber tubing, a rotten egg, and a duck!

~~~
mopoke
Cloudflare is just the CDN in front of the site, it's not the web host. The
source IP (direct.thecodeplayer.com) is in ServInt's netblock
(<http://www.servint.net/>).

------
Edootjuh
Doesn't work very well when zooming.

