17 ms·
Pure Digital CSS, Swiss Made, Clock – No JavaScript, almost no HTML
- IceWreck 6y agoThe author left an FAQ here: https://www.quaxio.com/pure_css_digital_clock.css https://www.quaxio.com/pure_css_digital_clock.css
- Nicksil 6y ago> Pure Digital CSS, Swiss Made, Clock. No JavaScript, No HTML Except for the HTML
- reaperducer 6y agoExcept for the HTML While technically correct is the best kind of correct, it's worth noting that the entirety of the HTML portion is: <link rel="stylesheet" href="pure_css_digital_clock.css">
- sli 6y agoFirefox doesn't even give me the option to view page source, only selection source. Doing that gives me this: <html><head><link rel="stylesheet" href="pure_css_digital_clock.css"> </head><body></body></html> The inspector works fine, but the inspector also does not present the HTML as it was sent, but rather the DOM that Firefox is rendering. None of this is important, it's just fun to poke at these CSS demos a little and see how the browser acts.
- reaperducer 6y agocurl is your friend. (Or whatever its Windows equivalent is.)
- nemosaltat 6y agoPowershell added curl(ish) support. I think it’s just aliased to http-transport or something but the basic functions I expect seem to work.
- Shared404 6y agoYou can also use curl.exe for something more similar to unix-y curl.
- toupeira 6y ago> Firefox doesn't even give me the option to view page source Looks like they moved it into the Tools -> Web Developers menu. Ctrl+U still works too!
- Jap2-0 6y agoI can still right click > view page source?
- Nicksil 6y agoWell, no, there's a bit more to it than that: <html> <head> <link rel="stylesheet" href="pure_css_digital_clock.css"> </head> <body></body> </html> 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.
- kevincox 6y agoThis is the implied HTML DOM. The actual HTML file only contains the link element.
- Nicksil 6y agoAnd if the client didn't insert the necessary HTML, the thing wouldn't render at all.
- lights0123 6y agoThat's the HTML that your browser inserts. That HTML isn't present in the data served by the website.
- Nicksil 6y agoBut the CSS rules expect there to be a body element. Regardless of who/what inserted the HTML it's necessary.
- amenghra 6y agoRight. 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.
- anderskaseorg 6y agoThat doesn’t work for this stylesheet because it includes styles for the <link> element.
- amenghra 6y agoThere’s a way to get other implicit nodes in Firefox...
- cj 6y agoYour quote chopped off the asterisk after HTML. See "Unfrequently Asked Questions" for explanation of the asterisk: view-source:https://www.quaxio.com/pure_css_digital_clock.css https://www.quaxio.com/pure_css_digital_clock.css
- ghoomketu 6y agoCool 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.
- Something1234 6y agoGot a link to that?
- abdusco 6y agoThis[0] seems to be it but it's behind a paywall. I'd have loved to see it. [0]: https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/creating-a-mini-vue/ https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-...
- sampsonitify 6y agohttps://www.quaxio.com/pure_css_digital_clock.css https://www.quaxio.com/pure_css_digital_clock.css
- reaperducer 6y agoQ: Clock always starts at 12:00:00. Is this project a secret tribute to microwaves? I think it's a generational Easter egg that he went with "microwaves" instead of "VCRs" or even "clock radios."
- nkozyra 6y agoI think all three of those things came to domestic ubiquity around the same time - late 60s to early 80s.
- mod 6y agoI think microwaves didn't commonly have a clock in the 60s
- DaiPlusPlus 6y agoThey certainly had a timer though.
- kevin_thibedeau 6y agoMechanical in the earliest units.
- sonotmyname 6y agoYes, a spring loaded dial that always went back to 0. No clocks.
- wfleming 6y agoBut microwaves are the only one you'll still find in most homes. I think GP was implying that the author is relatively young.
- schwartzworld 6y agoWe had all those things in my house as a kid in the 90s.
- ogre_codes 6y agoIt's a cute demo, but it's a timer, not a clock. </pedant>
- reaperducer 6y agoIf you start it at noon, or midnight, it's a clock.
- c22 6y agoHow is a "timer" different from a "clock?"
- colejohnson66 6y agoBy 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.
- ogre_codes 6y ago> 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.
- c22 6y agoBy 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.
- systemvoltage 6y agoWhat's Swiss about this? The programmer is from Switzerland?
- kdps 6y agoFrom the FAQ: Q: Swiss made, how so? A: I was born in Switzerland. By induction, this clock is Swiss made. QED.
- justusthane 6y agoIt’s just for fun, dude. Besides, Switzerland is known for their clock-making.
- systemvoltage 6y agoI 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.
- Minor49er 6y agoIt's quite a stretch to say that a CSS demo referencing Swiss watches is an example of nationalism
- systemvoltage 6y agoAs I said, I acknowledge the tongue-in-cheek aspect. My point about keeping nationalism out of software was more general.
- cylon13 6y agoJust 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.
- anonymousiam 6y agoLOL, "This page is best viewed at noon or midnight."
- dheera 6y agoYou could just have the server serve up the correct offset when the page is requested. The code delivered to the browser would still be pure CSS. Of course it might drift over time, but you could also serve up a refresh header to deal with that every hour or so.
- brundolf 6y agoI was a lot more impressed when I thought it was going to show the real time. I wonder if there's a way to accomplish that... Still a neat demo though
- jawns 6y agoOne 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.
- brundolf 6y agoAnother thing you could do is server-generate the CSS file, initialized to the current time. But that might be cheating :)
- c22 6y agoOr you could just offer a panoply of CSS files and allow the user to select the one representing the current time.
- saagarjha 6y agoWhy not just take it a step forward and have the user select the right time once a second?
- spacemanmatt 6y agoA history feature would be good, so you can see examples of correct times in the past
- trianglem 6y agoCSS is such shit that we’re actually impressed with this. What a sad state of affairs for moving animations on the internet. You probably needed advanced calculus for this or something I’m assuming.
- kroltan 6y agoNot 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.
- sam0x17 6y agoGot a bunch of random markup mixed into the content for me in chromium
- paco3346 6y agoDitto. Here's a Chromium vs Chrome screenshot. https://imgur.com/a/YShyehD https://imgur.com/a/YShyehD Note that in chromium there's an implicit style tag that doesn't show up in chrome. Manually adding style { display: none; } fixes the issue with no ill effects in Chrome.
- amenghra 6y agoThanks, I’ll fix this. Someone also mentioned the first css rule can cause plugins to get rendered, so worth def worth changing.
- deleted 6y ago[deleted]
- bilekas 6y agoI have the same when running Dark Reader, are you using any extensions that modify the css statically ?
- leephillips 6y agoI thought it was supposed to look like that (qutebrowser, where it also eatss a ton of memory).
- vmception 6y agoEvery 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.
- butz 6y ago"Even a Broken Clock Is Right Twice a Day"; nice to see folklore not being forgotten even in this digital age ;)
- amenghra 6y agoTechnically, this clock is either always right (if you load the page at noon/midnight) or always wrong. It's unlikely to get be right twice a day.
- saagarjha 6y agoTechnically, all precise clocks are always wrong ;)
- iamtedd 6y agoExcept Caesium clocks, which are the definition of time as we measure it.
- beardyw 6y agoA 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. So it is 2 x 0 = 0 versus 86,400 x 0 = 0 Looks the same to me!
- bilekas 6y agoKind 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. I love those css felx's though this is cool
- slmjkdbtl 6y agoThe 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.
- t0astbread 6y agoPut it on a smartwatch and never reload the page!
- porpoise 6y agoVery cool. 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 https://streamable.com/xwewa4).
- strenholme 6y agoWhat 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.
- 1_player 6y agoYou say that as if 2012 is the stone age. CSS hasn't changed much since its inception in 1996, mostly it's added some selector and layout rules in recent years.
- chrismorgan 6y agoYou could get it to synchronise the time with just a teeny bit of JavaScript. Add this CSS: *, ::before, ::after { animation-delay: var(--delay); } … and this JS: 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.
- asutekku 6y agoYes, 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.
- chrismorgan 6y agoI 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.
- deaddodo 6y agoIf you just want to set the initial time, you could do it server-side and not break the spirit of it.
- chrismorgan 6y agoYou 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.
- MrTortoise 6y agoVery cool but the spacing is off!
- ybbond 6y agoone of the most awesome thing is that I stumbled upon this post at 12:00:xx GMT+7 and didn’t realize that the clock starts on 12:00:00