Pomodoro

Summary

A pomodoro timer styled like a Windows 95 application. One index.html — markup, styles, script and an inlined favicon. No build step, no dependencies, no server. Space starts and pauses, R resets, 1/2/3 pick the session type.

Story

The Windows 95 skin isn’t only a joke: beveled grey and a titlebar are a complete visual vocabulary that costs a few custom properties and no assets, and every control looks like the thing it does. The interesting problems only appear after you walk away from the page, which is exactly what a timer is for. Background tabs get throttled, so “subtract one every second” loses real time silently and the number on screen is confidently wrong — the countdown is anchored to a wall-clock timestamp taken at session start, and every tick just asks how much is left. And browsers block audio until you interact with the page, so an audio context created on load starts suspended; the chime is synthesised with WebAudio and unblocked by the first click on Start, which is a click every session already has.

Lessons

• Anchor durations to timestamps, not to tick counts. A throttled tab is the normal case for a timer, not an edge case.
• A chime that never plays is worse than no chime, because you trusted it.
• Inlining everything into one file sidesteps a whole class of hosting problem — a root-absolute /style.css would resolve against the parent site and 404 under the path rewrite.