How I built a hyper-fast, zero-dependency World Clock using the native Intl API

#webdev #javascript #productivity #performance

By relying on Intl.DateTimeFormat, the application dynamically adapts to any valid IANA timezone identifier without importing a single kilobyte of external timezone database rules.

Solving the Clock Drift Problem

If you run multiple clocks on a dashboard using a naive setInterval(updateClocks, 1000), they will eventually drift, causing rendering lag or seconds skipping.

To solve this, I implemented a drift-adjusted animation loop using requestAnimationFrame. Instead of forcing a rigid 1-second interval, the app checks the millisecond difference to the next exact second and schedules the visual update dynamically. This ensures that all clocks tick in perfect unison exactly at the start of a new second, keeping the CPU usage under 1%.

Zero-Layout-Shift (CLS) UI

Rendering updates every second can trigger massive browser repaints if you are not careful. I used CSS Grid combined with tabular-nums for the font settings. This prevents the numbers from changing width as they tick (e.g., the number "1" takes up the same horizontal space as "8"), eliminating annoying visual layout shifts completely.

I've put the live version up at https://worldtimefinder.com. It is fully responsive, clean, and loads in under 200ms.

I would love to hear your thoughts on the performance and what features I should add next!