Esittelemme new-js-clock

open-sourcejavascripttypescriptrelease

Yli 15 vuotta sitten julkaisin pienen jQuery-lisäosan nimeltä JS-Clock. Se oli yksinkertainen widget, joka renderöi tikittävän kellon DOM-elementtiin — hyödyllinen, yksinkertainen ja täysin aikansa tuote. Se oli riippuvainen jQuerystä, siinä oli muutamia ongelmia useiden instanssien tuessa, eikä sitä koskaan päivitetty merkittävästi ensimmäisen julkaisun jälkeen.

Tänään tämä muuttuu. Julkaisen new-js-clock 1.0.0 — pohjasta asti kirjoitetun TypeScript-version, joka säilyttää alkuperäisen hengen ja jättää jokaisen rajoituksensa taakseen. Näet sen toiminnassa demosivulla.

Mitä uutta versiossa 1.0.0

Kaikki mitä tähän julkaisuun sisältyy:

  • 🔒 TypeScript — Täydellinen tyyppiturvallisuus kattavilla rajapinnoilla koko koodikannassa.
  • 🌐 E2E + yksikkötestisarja — Deterministinen Jest-kattavuus sekä Selenium E2E -selaintestit, mukaan lukien laajennettu taustavälilehtien toiminnan validointi.
  • 📦 Ei riippuvuuksia — Puhdas vanilla JavaScript. Ei jQuery:tä tarvita.
  • 🐛 Virheenkorjaukset — Useiden instanssien tuki toimii nyt oikein — se oli pääongelma versiossa 0.8.
  • ⚡ Moderni API — Puhdas, intuitiivinen API asianmukaisilla instanssimetodeilla jokaisessa luodussa kellossa.
  • 🧪 Täysin testattu — 162 deterministiistä Jest-testiä, 99,74 % rivikattavuus, 99,02 % lausumakattavuus, 100 % funktiokattavuus ja 98,32 % haarautumakattavuus.
  • 🐳 Dockerisoitu E2E-ruudukko — Selenium Grid, joka ajaa headless Chrome-, Firefox- ja Edge-selaimia paikallisesti ja CI:ssä komennolla pnpm run e2e:docker.
  • 📱 ES-moduulit — ES Module -importit tree-shaking-tuella, CommonJS- ja IIFE-pakettien rinnalla.
  • 🌍 DST-tietoiset aikavyöhykkeet — IANA-aikavyöhyketuki automaattisella kesäajan käsittelyllä.
  • ⏱️ Sekuntikellotila — Uusi sekuntikello, joka laskee ylöspäin alkaen 00:00:00.
  • 🏁 Kierros- ja split-ajat — Tallenna kierrosajat (delta) ja kumulatiiviset ajat (split) sekuntikellotilassa.
  • 📊 Paras/huonoin kierros — Sisäänrakennetut apufunktiot nopeimman ja hitaimman kierroksen löytämiseksi istunnosta.
  • 🎯 Korkean resoluution ajoitus — Kierrosaijat mitattu performance.now()-funktiolla millisekunnin alapuolisella tarkkuudella.

Asennus

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

Saatavilla myös CDN:n kautta suoraan selaimessa käytettäväksi — katso README unpkg- ja jsDelivr-linkkejä varten.

Miksi kesti niin kauan?

Rehellisesti? Elämä. Alkuperäinen JS-Clock kirjoitettiin edesmenneen ystäväni Gustavo Beltrãon pyynnöstä (tuolloin PHP-mestari, jonka kanssa minulla oli etuoikeus työskennellä useammin kuin kerran) käytettäväksi yrityksen sisäisissä koontinäytöissä sekä yksisivuisilla verkkosivustoilla tapahtumiin, joissa oli vierailijoita eri aikavyöhykkeiltä. Se suoritti tehtävänsä riittävän hyvin, ettei sen päivittäminen koskaan tuntunut kiireelliseltä. Mutta jQuery on kauan sitten kadonnut moderneista projekteista, TypeScriptistä on tullut kirjastokehityksen standardi ja virhe useiden instanssien tuessa vaivasi minua aina. Kun lopulta istuuduin korjaamaan sen kunnolla, oli järkevää tehdä se oikein — tyypeillä, testeillä, modernilla moduulijärjestelmällä ja riittävästi ominaisuuksia ollakseen aidosti hyödyllinen vuonna 2026. Lisäksi aion käyttää sitä seuraavassa kaupallisessa projektissani.

Paremmin myöhään kuin ei milloinkaan.

Yksin Jeesukselle Kristukselle kunnia!