The other day I needed a digital clock-component, so I quickly composed a simple JavaScript-method:
function uiDigitalClock(node) {
const now ...
For further actions, you may consider blocking this person and/or reporting abuse
This is a good and very useful article, but when I tried to implement it, I encountered a problem. When I changed the date in the
<ol class="ui-countdown" data-time="2026-06-30">function, the script didn't update accordingly, and the label didn't display. Please suggest to me how to fix this problem.Works for me: codepen.io/stoumann/pen/yLGJPZK
Do you mean if you change it dynamically, without reload?
Nice article.
It's funny how the
setTimeoutsolution is clearly running slower than the others in the demo. It gets behind in just a few seconds.Thank you! I think stable timing in JS is difficult — once I tried to make a drum sequencer, but the timing was off after random amounts of time!
Have you tried using
requestAnimationFramebut tracking the dates with counters, only callingDate()after X ticks to make sure the clock is on time? I think that may be the most accurate (and efficient?) of all the methods.No, but good idea! For the drum-sequencer, I think I ended up using the AudioContext as the “timing source of truth”.
You have to take the drift of the
setTimeout()into account when you schedule the next frame. See:JavaScript counters the hard way - HTTP 203 - YouTube
You’ve seen loads of counter tutorials online, but they’re all a bit wrong… or at least most of them are. Jake and Surma dissect different techniques and ide...
Interesting to use
performance.now, I’ve only seen that used in testing. Thanks for sharing!This is very inspiring, how we can make performant components without moment.js, thank you for sharing! I will try to implement this by myself. But I have a question - why did u decide to consult with Bard? Is it better than chapt GPT?
Thank you! Bard: No particular reason, just trying it out, comparing code-suggestions with chatGPT etc.
Okay, got it! :)
Really nice article. I never would have thought to try using CSS for this, very creative.
Keep up the awesome work!
Thank you!
Great article. One of these days, we'll have a CSS-only frontend framework out there.
Thank you!
hopefully...
جيد جدا
شكرا لك!
Hope Apple Translate did it properly 😉
Really nice thank you
This is awesome 💖 Loved your writing style and presenting your analysis throughout, like a journey. This is definitely something I can use for focusdoro.app
Kudos!
Thank you! Happy to hear that!
Really insightful and well broken down. Thanks!
Thank you!
J'ai aimé votre article je me suis exercer à faire la même chose... Merci beaucoup
Merci
Vous êtes un dev front-end ?
Yes, since 1995 — when it was called "webmaster / web-developer" 😂
Moi je débuté cette année avec JavaScript du côté back-end
Absolutely fabulous !
Thank you!
You got a nice writing style! :-)
Happy to hear that, thank you!
Nice article.
This clock turned out amazing.
Thank you!
I learned how pseudo elements can really make your website pop.