Vorstellung von new-js-clock

open-sourcejavascripttypescriptrelease

Vor mehr als 15 Jahren veröffentlichte ich ein kleines jQuery-Plugin namens JS-Clock. Es war ein unkompliziertes Widget, das eine tickende Uhr in ein DOM-Element renderte — nützlich, einfach und ganz seiner Zeit entsprechend. Es war auf jQuery angewiesen, hatte einige Schwächen beim Support mehrerer Instanzen und wurde nach dem ersten Release nie mehr nennenswert aktualisiert.

Heute ändert sich das. Ich veröffentliche new-js-clock 1.0.0 — eine von Grund auf neu entwickelte TypeScript-Neuentwicklung, die den Geist des Originals bewahrt und dabei jede seiner Schwächen hinter sich lässt. In Aktion sehen kann man sie auf der Demo-Seite.

Was ist neu in 1.0.0

Alles, was mit diesem Release eingeführt wurde:

  • 🔒 TypeScript — Vollständige Typsicherheit mit umfangreichen Interfaces im gesamten Codebase.
  • 🌐 E2E + Unit-Test-Suite — Deterministische Jest-Abdeckung plus Selenium-E2E-Browsertests, einschließlich erweiterter Validierung des Verhaltens in Hintergrund-Tabs.
  • 📦 Keine Abhängigkeiten — Reines Vanilla-JavaScript. Kein jQuery erforderlich.
  • 🐛 Bugfixes — Der Support mehrerer Instanzen funktioniert jetzt korrekt – das war das Hauptproblem in Version 0.8.
  • ⚡ Moderne API — Eine saubere, intuitive API mit eigenen Instanzmethoden für jede erstellte Uhr.
  • 🧪 Vollständig getestet — 162 deterministische Jest-Tests mit 99,74 % Zeilenabdeckung, 99,02 % Anweisungsabdeckung, 100 % Funktionsabdeckung und 98,32 % Branch-Abdeckung.
  • 🐳 Dockerisiertes E2E-Grid — Selenium Grid mit headless Chrome, Firefox und Edge, lokal und in CI via pnpm run e2e:docker.
  • 📱 ES-Module — ES-Module-Imports mit Tree-Shaking-Support, neben CommonJS- und IIFE-Bundles.
  • 🌍 DST-fähige Zeitzonen — IANA-Zeitzonenunterstützung mit automatischer Behandlung der Sommerzeit.
  • ⏱️ Stoppuhr-Modus — Eine neue Stoppuhr, die ab 00:00:00 aufwärts zählt.
  • 🏁 Runden- und Split-Zeiten — Rundenzeiten (Delta) und kumulative Zeiten (Split) im Stoppuhr-Modus aufzeichnen.
  • 📊 Beste/Schlechteste Runde — Eingebaute Hilfsfunktionen zum Auffinden der schnellsten und langsamsten Runde einer Sitzung.
  • 🎯 Hochauflösendes Timing — Rundendeltas gemessen via performance.now() mit Submillisekunden-Präzision.

Installation

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

Auch über CDN für die direkte Browsernutzung verfügbar — siehe README für die unpkg- und jsDelivr-Links.

Warum hat es so lange gedauert?

Ehrlich gesagt? Das Leben. Das ursprüngliche JS-Clock entstand auf Bitte meines verstorbenen Freundes Gustavo Beltrão (damals ein PHP-Meister, mit dem ich das Privileg hatte, mehr als einmal zusammenzuarbeiten) und sollte in internen Unternehmens-Dashboards sowie auf Einseiten-Websites für Veranstaltungen mit Besuchern aus verschiedenen Zeitzonen eingesetzt werden. Es erfüllte seine Aufgabe gut genug, dass es nie dringend schien, es zu überarbeiten. Aber jQuery ist in modernen Projekten längst in den Hintergrund getreten, TypeScript hat sich als Standard für die Bibliotheksentwicklung etabliert, und der Bug beim Multi-Instanz-Support hat mich immer gestört. Als ich mich schließlich hinsetzte, um ihn ordentlich zu beheben, machte es Sinn, es richtig zu tun — mit Typen, Tests, einem modernen Modulsystem und genügend Funktionen, um es 2026 wirklich nützlich zu machen. Außerdem plane ich, sie in meinem nächsten kommerziellen Projekt einzusetzen.

Besser spät als nie.

Jesus Christus allein sei die Ehre!