FocusX
Distraction-Free Pomodoro Timer Suite
“How do you build a timer people actually enjoy using?”
Case Study Index (4 Sections)↓
Why I Built This Tool
Many timer applications suffer from intrusive popups, complex settings, and timing drift when backgrounded by modern browser tab throttling. FocusX eliminates visual noise while anchoring countdown calculations to system epoch time.
I wanted a simple timer that loaded instantly, had no ads or bloat, and wouldn’t lose time accuracy when minimized while I was coding.
Technical Implementation
Calculates remaining session time as `Math.max(0, targetEndTime - Date.now())` rather than `timeLeft--`, completely solving background tab timer throttling.
Design Approach: Zero framework overhead: leverage native Web APIs and system timestamps for high accuracy with minimal resource usage.
Engineering Decisions
Browsers throttle `setInterval` callbacks in background tabs, causing conventional timers to lose minutes of accuracy.
Anchored remaining time calculations to `targetEndTime - Date.now()` epoch difference instead of incrementing tick counters.
Slightly more complex math on pause/resume state handling.
Achieved 100% timing accuracy even when backgrounded for hours.
Challenges & Solutions
Smooth State Transitions Without CSS Libraries
Issue: Creating smooth background theme shifts without external CSS framework utilities required lightweight custom transitions.
Decision/Solution: Wrote clean CSS custom properties with hardware-accelerated color transitions.
What's Next
Key Takeaways
Relying on system epoch timestamps is mandatory for reliable client-side chronometers.
Removing dependencies produces lightning-fast user utilities.
Related Engineering Projects
Tempify
Built an ultra-fast temporary text buffer and scratchpad application with instant local storage persistence and live markdown preview.
Thunderstorm
Built an interactive algorithm visualizer rendering step-by-step sorting executions and array transformations with custom speed controls.