A timer that keeps time when you're not looking

A Pomodoro timer has one job: tell you, accurately, when twenty-five minutes are up. It sounds like the easiest program in the world to write. And yet a surprising number of browser timers get it wrong in exactly the situation they exist for, when you've switched to another tab to do the work.

PomoTimr is the free Pomodoro timer we built to get that one job right. It runs entirely in the browser, needs no account, and keeps your tasks and stats on your own device. This post is about the unglamorous decision underneath it: how it counts.

The problem with counting to 1,500

Twenty-five minutes is 1,500 seconds. The obvious way to build a countdown is to start at 1,500 and subtract one every second. It works perfectly while you watch it, which is why it gets shipped.

The trouble starts when you look away. Browsers deliberately slow down timers in tabs you aren't looking at, to save battery and processing power. Chrome, for example, runs them at most once a second in a background tab, and once a page has been hidden for a few minutes it can bundle them up to run roughly once a minute. On a phone, locking the screen can pause the page entirely.

A timer that subtracts one per tick has no idea any of that happened. Every delayed or skipped tick is time it simply never counts, so the longer you work in another tab, the further behind it falls. You come back expecting a break and find the timer still has minutes left, which is precisely the moment a Pomodoro is supposed to protect.

Count from the clock instead

The fix is to stop counting altogether. When you press Start, PomoTimr notes the moment the session should end. From then on, every update is a fresh reading: the end time minus the current time. If the browser delays an update by a second or a minute, the next one is still correct, because it never depended on the ones before it.

The difference fits in a few lines. This is an illustration of the idea rather than the app's source:

// Counting ticks: falls behind whenever the browser delays one
let secondsLeft = 25 * 60;
setInterval(() => render(--secondsLeft), 1000);

// Counting from the clock: every update is a fresh reading
const endAt = Date.now() + 25 * 60 * 1000;
setInterval(() => render(Math.max(0, endAt - Date.now())), 250);

Because the end time is the source of truth, the remaining time is also safe to show in the tab title, where you can glance at it from any other tab without switching back.

Surviving a reload

The same idea makes the timer hard to lose. The running session is saved with its end time, so reloading the page, or closing the tab and opening it again, picks up exactly where you were. Nothing had to keep running in the meantime. The timer just reads the clock again and carries on.

When a session does end with the tab in the background, a gentle chime marks it, and you can turn on desktop notifications so you see it even when the browser isn't in front.

Everything stays on your device

The other early decision was what not to build. There is no account, no sign-up and no premium tier. Tasks, settings and stats are saved in the browser's local storage and never sent anywhere. Analytics counts page visits, and never receives anything you type into the app.

That choice has one honest trade-off: your data belongs to the browser you use. Open PomoTimr in a different browser and you start fresh, and clearing site data resets it. For a tool whose whole purpose is to get out of the way, we think that's the right side of the line to be on.

The small things that make it stick

Around the timer sit a handful of features, each one there because it makes the next session more likely, not because it adds something to manage:

• Tasks with a tally. Pick an active task, and it collects a mark every time a Pomodoro finishes, so you can see where the time went.
• Today and the last seven days. Focus time, sessions completed and a streak of days in a row, with a bar for each day of the week.
• Breaks that look like breaks. A break switches the ring to its own colour with a prompt to stand up and stretch, so a glance tells you which part of the cycle you're in.
• Ring or flip clock, light or dark. Switch the display with one click, or press D.
• Keyboard shortcuts. Space to start and pause, R to reset, N to skip, 1 to 3 to switch mode, and the comma key for Settings.
• Ready-made lengths. Not everyone works in 25-minute blocks. Preset pages for 25, 30, 45, 50 and 60 minutes open the same timer with the focus length already set, and Settings lets you choose any length you like.

Try it on your next task

Open the page, type what you're working on, and press Start. Then switch to whatever you were avoiding, and trust that the timer will still be right when you come back.

Start a Pomodoro

New to the technique itself? PomoTimr's own guide, What is the Pomodoro Technique?, covers where it came from and the rules most people skip. And if you'd rather read how the app was put together, there's a full case study on the project.