Playground · Stop Watch
Per imparare il tempo, ho costruito un cronometro che non lo misurava benissimo.
Il mio secondo progetto: quattro contatori, tre pulsanti e il primo vero tentativo di controllare un processo che continua anche quando l’utente non fa nulla.
01 · Il secondo passo
Dopo aver trasformato un numero, volevo imparare a controllare qualcosa che continuava a cambiare.
Un cronometro sembrava un esercizio semplice. Poi sono arrivati avvio, pausa, reset, contatori che si propagano e la necessità di impedire che più timer partissero contemporaneamente.
- Play
- Avvia il conteggio.Il pulsante viene disabilitato per evitare di moltiplicare gli intervalli.
- Pause
- Ferma il tempo senza cancellarlo.La parte più delicata: interrompere timeout e intervalli conservando i valori raggiunti.
- Reset
- Riporta tutto a zero.Ore, minuti, secondi e millisecondi tornano nello stato iniziale.
Come immaginavo il tempo
Quattro variabili. Una cascata di condizioni. E il tempo che passava più o meno davvero.
Ogni aggiornamento incrementava il valore più piccolo. Raggiunta una soglia aumentavano i secondi, poi i minuti e infine le ore.
- Incrementa il contatore più piccolo.
- Quando raggiunge 11, aggiungi un secondo.
- A 60 secondi, aggiungi un minuto.
- A 60 minuti, finalmente un’ora.
La vera difficoltà
Far partire il tempo era facile. Fermarlo e farlo ripartire dallo stesso punto molto meno.
Il progetto mi ha costretto a distinguere il valore del cronometro dal processo che lo aggiornava. Pausa e play dovevano interrompere e ricreare quel processo senza perdere lo stato.
- ▶
- PlayAvvia il ciclo e impedisce un secondo avvio contemporaneo.
- Ⅱ
- PauseInterrompe entrambi i meccanismi che stavano aggiornando il tempo.
- ↻
- ResetFerma il ciclo e azzera tutte le variabili visualizzate.
- 01Salva ore, minuti, secondi e millisecondi.State
- 02Avvia un timeout e anche un intervallo.Run
- 03In pausa, cancellali entrambi.Stop
- 04Al nuovo play, riparti dai valori rimasti.Resume
Tecnicamente il cronometro non misurava il tempo con grande precisione. Didatticamente, però, mi stava insegnando stato, cicli e controllo del flusso.
Grafica fatta in CSS
Quattro grandi quadranti e tre comandi. Tutto quello che serviva, con parecchie ombre.
La versione conservata usa una palette verde molto più essenziale: i componenti dell’interfaccia sono costruiti principalmente con CSS, senza una libreria grafica.
- Visivo
- Numeri grandi, contrasto morbido e controlli immediatamente riconoscibili.
- Tecnico
- Nessun framework e nessun componente pronto.
- Stato
- Un esercizio concluso una volta raggiunti play, pausa e reset.
- Eredità
- La prima volta in cui interrompere un processo è stato più importante che avviarlo.
Oggi
Misurerei il tempo in modo completamente diverso. Ma terrei intatta l’ostinazione con cui provavo a fermarlo.
Oggi userei un’unica sorgente temporale affidabile e deriverei da lì ogni valore. Nel 2021, invece, ho imparato tentando di coordinare contatori, timeout e intervalli finché play e pausa non hanno finalmente smesso di litigare.