[HN Gopher] Pure Digital CSS, Swiss Made, Clock - No JavaScript,...
___________________________________________________________________
Pure Digital CSS, Swiss Made, Clock - No JavaScript, almost no HTML
Author : IceWreck
Score : 56 points
Date : 2020-12-31 18:26 UTC (4 hours ago)
(HTM) web link (www.quaxio.com)
(TXT) w3m dump (www.quaxio.com)
| IceWreck wrote:
| The author left an FAQ here:
| https://www.quaxio.com/pure_css_digital_clock.css
| RaoulP wrote:
| It can also be viewed by inspecting the page source, which
| imports this CSS file.
| Nicksil wrote:
| > Pure Digital CSS, Swiss Made, Clock. No JavaScript, No HTML
|
| Except for the HTML
| reaperducer wrote:
| _Except 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 wrote:
| Firefox 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.
| toupeira wrote:
| > 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 wrote:
| I can still right click > view page source?
| reaperducer wrote:
| curl is your friend. (Or whatever its Windows equivalent
| is.)
| nemosaltat wrote:
| Powershell added curl(ish) support. I think it's just
| aliased to http-transport or something but the basic
| functions I expect seem to work.
| Nicksil wrote:
| Well, 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 wrote:
| This is the implied HTML DOM. The actual HTML file only
| contains the link element.
| lights0123 wrote:
| That's the HTML that your browser inserts. That HTML isn't
| present in the data served by the website.
| cj wrote:
| Your 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
| Nicksil wrote:
| > Your quote chopped off the asterisk after HTML
|
| No, there was (and still is) no asterisk in the title of this
| post.
| dang wrote:
| Ok, we've put a qualifier in the title above.
| trianglem wrote:
| CSS 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 wrote:
| 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.
| butz wrote:
| "Even a Broken Clock Is Right Twice a Day"; nice to see folklore
| not being forgotten even in this digital age ;)
| systemvoltage wrote:
| What's Swiss about this? The programmer is from Switzerland?
| jhowison wrote:
| Q: Swiss made, how so? A: I was born in Switzerland. By
| induction, this clock is Swiss made. QED.
| kdps wrote:
| From the FAQ:
|
| Q: Swiss made, how so? A: I was born in Switzerland. By
| induction, this clock is Swiss made. QED.
| justusthane wrote:
| It's just for fun, dude. Besides, Switzerland is known for
| their clock-making.
| systemvoltage wrote:
| 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.
| Minor49er wrote:
| It's quite a stretch to say that a CSS demo referencing
| Swiss watches is an example of nationalism
| systemvoltage wrote:
| As I said, I acknowledge the tongue-in-cheek aspect. My
| point about keeping nationalism out of software was more
| general.
| cylon13 wrote:
| 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.
| systemvoltage wrote:
| 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.
| cuddlecake wrote:
| "Made in X" has nothing to do with "nationalism". Also:
| "Made in US" labels are incredibly useful, with regards to
| data privacy.
| ghoomketu wrote:
| 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.
| Something1234 wrote:
| Got a link to that?
| abdusco wrote:
| This[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-...
| sam0x17 wrote:
| Got a bunch of random markup mixed into the content for me in
| chromium
| paco3346 wrote:
| Ditto. Here's a Chromium vs Chrome screenshot.
|
| 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.
| [deleted]
| bilekas wrote:
| I have the same when running Dark Reader, are you using any
| extensions that modify the css statically ?
| leephillips wrote:
| I thought it was supposed to look like that (qutebrowser, where
| it also eatss a ton of memory).
| bilekas wrote:
| 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.
|
| I love those css felx's though this is cool
| slmjkdbtl wrote:
| 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.
| anonymousiam wrote:
| LOL, "This page is best viewed at noon or midnight."
| reaperducer wrote:
| _Q: 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 wrote:
| I think all three of those things came to domestic ubiquity
| around the same time - late 60s to early 80s.
| mod wrote:
| I think microwaves didn't commonly have a clock in the 60s
| porpoise wrote:
| Very cool.
|
| In a similar vein, 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 (or touch if on mobile) them. An
| example: https://streamable.com/xwewa4).
| brundolf wrote:
| I 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 wrote:
| 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.
| brundolf wrote:
| Another thing you could do is server-generate the CSS file,
| initialized to the current time. But that might be cheating
| :)
| c22 wrote:
| Or you could just offer a panoply of CSS files and allow
| the user to select the one representing the current time.
| ogre_codes wrote:
| It's a cute demo, but it's a timer, not a clock. </pedant>
| c22 wrote:
| How is a "timer" different from a "clock?"
| colejohnson66 wrote:
| 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.
| ogre_codes wrote:
| > 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 wrote:
| 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.
| ogre_codes wrote:
| A clock tells me the time of day.
|
| A page which says 12:00:00 every time I go there isn't a
| clock in my book.
| c22 wrote:
| 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.
| reaperducer wrote:
| If you start it at noon, or midnight, it's a clock.
| vmception wrote:
| 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.
___________________________________________________________________
(page generated 2020-12-31 23:00 UTC)