Introductie van new-js-clock

open-sourcejavascripttypescriptrelease

Meer dan 15 jaar geleden publiceerde ik een kleine jQuery-plugin genaamd JS-Clock. Het was een eenvoudige widget die een tikkende klok in een DOM-element weergaf — nuttig, simpel en volledig van zijn tijd. Het was afhankelijk van jQuery, had wat problemen met ondersteuning voor meerdere instanties en werd na die eerste release nooit meer echt bijgewerkt.

Daar komt nu verandering in. Ik breng new-js-clock 1.0.0 uit — een van de grond af opgebouwde TypeScript-herschrijving die de geest van het origineel bewaart maar al zijn beperkingen achter zich laat. Je kunt het in actie zien op de demopagina.

Wat is er nieuw in 1.0.0

Alles wat in deze release is meegeleverd:

  • 🔒 TypeScript — Volledige typeveiligheid met uitgebreide interfaces door de gehele codebase.
  • 🌐 E2E + unit-testsuite — Deterministische Jest-dekking plus Selenium E2E-browsertests, inclusief uitgebreide validatie van gedrag in achtergrondtabbladen.
  • 📦 Geen afhankelijkheden — Puur vanilla JavaScript. Geen jQuery vereist.
  • 🐛 Bugfixes — Ondersteuning voor meerdere instanties werkt nu correct — dit was het grootste probleem in versie 0.8.
  • ⚡ Moderne API — Een schone, intuïtieve API met eigen instantiemethoden op elke aangemaakte klok.
  • 🧪 Volledig getest — 162 deterministische Jest-tests met 99,74 % regelsdekking, 99,02 % instructiedekking, 100 % functiedekking en 98,32 % branch-dekking.
  • 🐳 Gedockeriseerd E2E-grid — Selenium Grid met headless Chrome, Firefox en Edge, lokaal en in CI via pnpm run e2e:docker.
  • 📱 ES Modules — ES Module-imports met tree-shaking-ondersteuning, naast CommonJS- en IIFE-bundles.
  • 🌍 DST-bewuste tijdzones — IANA-tijdzoneondersteuning met automatische verwerking van zomertijd.
  • ⏱️ Stopwatchmodus — Een nieuwe stopwatch die optelt vanaf 00:00:00.
  • 🏁 Ronde- en splittijden — Registreer ronde­tijden (delta) en gecumuleerde tijden (split) in de stopwatchmodus.
  • 📊 Beste/slechtste ronde — Ingebouwde hulpfuncties om de snelste en langzaamste ronde van een sessie te vinden.
  • 🎯 Hoge-resolutietiming — Rondedelta’s gemeten via performance.now() voor submilliseconde-precisie.

Installatie

npm install new-js-clock
# of
pnpm add new-js-clock

Ook beschikbaar via CDN voor direct gebruik in de browser — bekijk de README voor de unpkg- en jsDelivr-links.

Waarom duurde het zo lang?

Eerlijk gezegd? Het leven. De originele JS-Clock is geschreven op verzoek van mijn overleden vriend Gustavo Beltrão (in die tijd een meester in PHP, met wie ik meer dan eens het voorrecht had om samen te werken) om te gebruiken in interne bedrijfsdashboards en in eenpaginawebsites voor evenementen met bezoekers uit verschillende tijdzones. Hij deed zijn werk goed genoeg dat het nooit urgent leek om het te herzien. Maar jQuery is al lang uit moderne projecten verdwenen, TypeScript is de standaard geworden voor bibliotheekontwerp, en de bug in de meerdere-instantiesondersteuning bleef me storen. Toen ik eindelijk ging zitten om het goed op te lossen, had het zin om het echt goed te doen — met types, tests, een modern modulsysteem en genoeg functies om het in 2026 echt nuttig te maken. Ik ben ook van plan het in mijn volgende commerciële project te gebruiken.

Beter laat dan nooit.

Alleen aan Jezus Christus zij de eer!