Cool project and thanks for explaining it in the FAQ.
The best part about these projects in not seeing the demo but rather learning the clever hacks that make the things tick (no pun).
Reminds me of a video on Vue mastery in which Evan you created a mini vuejs in like 10 mins. Its one thing to use or see something, something totally another to see how it does what it does behind the scenes.
The file itself is beautiful and makes me want to put in my pocket and carry around. Hope there's more single beautiful files in the world, reminds me of the single header culture in C where every person can have their own nice little .h file that belongs to themselves.
In a similar vein (but much less techinically sophistcated), I recently realized that making "cloze" cards (esp. ones w/ a large number of deletions and/or incremental-reveal cards) in Anki can be made a much less painful process by ditching the native method in favor of an almost entirely CSS implementation (basically, you use Anki's editor to underline the cloze deletions, use a line of JS to add innerText as an attribute to the element, and use CSS to make each answer appear in a little pop-up as you hover over (or touch, if on mobile) a blank. An example: https://streamable.com/xwewa4).
A stopped clock is right twice a day for a duration of 0 seconds. A correct digital clock showing seconds is right 86,400 times a day for a duration of 0 seconds.
What impresses me is that this digital clock works just fine in Internet Explorer 11 from 2013, and even works in IE10 from 2012 (doesn’t work in IE9, but, then again, not even text-shadow works in IE9). It doesn’t use any modern CSS, but stuff which has been implemented by browsers since 2012.
One step toward that might be to enable a "fast forward" and "rewind" functionality, as are common on alarm clocks. Then at least you could set it to your current time.
Every time I see one of these demos showcasing the constraints they used, it always seems to remind me why nobody does that.
And its not because of the challenge, its because of the result. Which makes me more surprised that other people's activity puts this stuff on my feeds at all.
Kind of cool.. There is something funny happening when using the Dark Reader chrome extension.. imgbox.com/y62Z4gVm
Ironically enough, the css goes a bit mad.
Right. For Firefox, I can even remove that line and set the stylesheet using a `Link:` header. Unfortunately, that feature isn't widely adopted by other browsers.
Indeed the the CSS defines styles for the <body> element. So this whole thing would not be possible there was no HTML (or some structured document representation). See, the part about lack of HTML in the title is completely unnecessary.
By definition, a timer just counts time (either down or up). So a clock is a kind of timer. But colloquially, a “clock” is a timer that shows the time while a “timer” is one that counts down from a preset amount (for cooking or whatever). Then there’s a “stopwatch” which is a timer that counts up from 0.
> while a “timer” is one that counts down from a preset amount (for cooking or whatever)
I can see this POV, but this isn't really how I've thought of a "timer" myself.
I've always thought a timer was just a thing which kept track of time elapsed (up or down). For example when I'm doing metrics I've always used "timers" to measure how quickly a program runs. I would never call a function which measures how long a process runs a stopwatch function, it would be a timer (or timing) function.
Until I owned an iPhone I've always thought of a stopwatch as the literal physical thing.
By both of your definitions this appears to be a clock. It starts at twelve, not at zero, and it wraps when it gets back to twelve again, making it pretty useless as a measure of elapsed time.
For what it's worth I would define both a timer and a clock as something that ticks(/updates) at a fixed regular interval.
I get what you're saying, but have you never experienced a clock set to the wrong time? Is such a thing really no longer deserving of the title? What about clocks in different locales, are they not clocks for you but clocks for others? Is this demo a clock twice a day? You're the one claiming to be a pedant here.
Not really, it's just a bunch of boxes with borders, and each box has an animation saying when each border is white or black.
The only notable technological "gimmick" is that it doesn't use any more HTML elements than the ones the browser generates automatically from the "severely malformed" HTML it is given.
(Not to devalue the creativity of the demo, though!)
A possibly more elegant way to do this would be by using clip-path and CSS variables to render the digits, this would only require 1 element per digit and would make for more readable animations too.
I didn't see the FAQ. OK. I guess. Still kind of weird. I've never seen software marketed with where it was programmed.
I know this is a tongue in cheek thing, but I find it pretty repulsive to mark a piece of software "Made in X" when it is clearly an international cooperation - CSS, Browsers, TCP protocol, etc is many countries getting together and building stuff. Let's keep nationalism out of software yall.
Just to explain the downvotes a bit, in case you're unaware, it's kind of a social faux-pas to say "I acknowledge that this is a joke" and then poison the mood with a semi-related tangent rant about something you find annoying or bad or repulsive.
I don't mind downvotes, we're all adults here and I hope people are downvoting without ulterior motives. Clearly people disagree with what I am saying.
Something that I find repulsive is sort of related (usually Swissmade or Xmade is taking pride in their nationality, aka nationalism), it is not completely tangent. Obviously, there was a reaction in my brains when I saw "Swiss made" that made me comment here and express.
var d = new Date();
document.documentElement.style.setProperty("--delay",
-(d.getHours() * 3600 +
d.getMinutes() * 60 +
d.getSeconds() +
d.getMilliseconds() / 1000
) + "s");
I think this would do it. It roughly matches what I did a few years back for an analogue CSS-only (except for this) clock.
However, this does still have a weakness: if the browser is suspended (e.g. machine in standby) it gets out of sync. It doesn’t care about leap seconds, either. You could fix these things by triggering this position update every so often, but that would be missing the point of it.
Yes, most people reading this thread know that it’s possible with JS, but then it would use javascript which I assume was not the point of the experiment. Trying to suggest javascript is missing the point.
I think there’s a key difference between what I suggest here and doing the entire thing in JavaScript: this is purely using JavaScript to set the initial time; the actual time keeping is done by the browser with a CSS animation, and thus it’s still a clock if JavaScript is unavailable or disabled, just one that starts at 12 o’clock instead of the correct time.
You can’t do it server-side because you don’t know the client-side time. The closest you could do would be to choose Swiss time for the sake of it (or UTC if you prefer).
Remember also that the clock will be out of sync if you set it server-side, because of latency between the server and client. This inaccuracy would doubtless besmirch the name of Swiss timepieces. Could be fun hooking into TCP and TLS negotiation to estimate latency in order to compensate in the animation-delay and make it probabilistically more accurate. Now that would be a fun article to read. I’m almost tempted to devise a way to do this myself. I suspect I couldn’t get the necessary information through my standard nginx reverse proxying arrangement and would need to serve the CSS from a different port so that I could handle the negotiation in a process of my own and observe the timings.
