ChronoFocus came from a small gap I noticed in my own routine. I’d often be surprised by how far through the year we were, but in the moment it was hard to see. I wasn’t looking for a productivity system or planner—just a quiet reminder of where I was in the year whenever I opened a new tab.
The idea stayed small on purpose: show the percentage of the year that’s gone, the current week, the weeks left, and a single progress bar. No settings, no accounts, no data entry.
Making Time Feel Trustworthy
To make that simple view feel trustworthy, I needed a clear and defensible way to calculate “how far through the year” we are.
I made three basic decisions:
- use UTC for all calculations, to avoid time zone and daylight‑saving edge cases,
- treat the year as everything from the first instant of January 1 to the first instant of the next January 1, and
- keep week numbers aligned with what the user sees on their calendar, even when ISO rules get opinionated.
A simplified version of the core calculation looks like this:
function getYearProgress(now: Date): number {
const year = now.getUTCFullYear();
const start = Date.UTC(year, 0, 1);
const end = Date.UTC(year + 1, 0, 1);
const current = now.getTime();
const ratio = (current - start) / (end - start);
return Math.min(1, Math.max(0, ratio));
}In the actual code, this sits alongside week calculations and message selection, but the idea is the same: pin everything to UTC boundaries so the progress bar doesn’t jump backwards or skip ahead unexpectedly. The goal is for the numbers to feel boringly correct.
One Bar, One Badge
The main UI element is a horizontal bar that represents the year. A fill shows the current percentage, and a small badge rides on top of that fill with the same number. Above it, a short line of text says “This year is X% over.” Below it, you see the current week and the weeks remaining.
On each update, ChronoFocus:
- recalculates the latest year percentage and week,
- updates the text content,
- adjusts the fill width, and
- moves the badge along the bar.
Rather than snapping straight to the new values, the fill and badge ease toward them over a short duration. It’s a simple animation—the kind you only notice if you close your laptop for a week and then open a new tab—but it keeps the UI from feeling jarring.
The layout is a single centered column. That sounds trivial, but it means the design stays readable on both narrow and wide screens without a lot of complex layout rules.
Keeping the Implementation Small
Under the hood, ChronoFocus is a plain browser extension. The new tab page is just static assets plus a bit of JavaScript that:
- reads the current time,
- computes the derived values (percentage, week, weeks remaining), and
- applies them to the DOM and animation hooks.
There’s no frontend framework and no runtime dependencies. A small build script takes the handful of source files, minifies them, and copies only what’s needed into a distribution folder that the browser can load as an unpacked extension.
There are no network calls on the new tab screen; everything is computed locally. Most of the work happens at load time, with a simple interval keeping the numbers fresh if the tab stays open.
The constraint I kept coming back to was “easy to trust.” Fewer moving parts, fewer ways for the displayed percentage to be wrong.
Visual and Accessibility Choices
The visual design is intentionally restrained. The page uses a dark gradient background with a centered column. The main percentage uses a display serif; supporting text uses a clean UI font. The bar has rounded corners and a subtle glow, and the badge looks like a small card resting on the fill.
Design tokens—colors, font sizes, spacing, shadows—live in CSS variables. That keeps the stylesheet short and makes it easy to experiment with different looks without rewriting selectors. It also means a future light theme would be mostly a matter of updating a few variables.
Accessibility comes from small, deliberate choices: visible focus outlines, a font‑loading strategy that doesn’t hide text, and motion that is present but not aggressive. The content is mostly text and a single bar, so the job is to avoid getting in the way.
What I Learned
ChronoFocus is a small project, but it reminded me of a few things:
- Simple tools still benefit from explicit decisions about time, boundaries, and data.
- One well‑defined number (year progress) can carry most of a UI if the surrounding copy and layout are thoughtful.
- A narrow scope makes it easier to keep something reliable over time.
Most people who see the extension just notice a number and a bar inching across the year. That’s exactly what it’s meant to be: a quiet, consistent reminder of where you are in the calendar, without asking for much in return beyond the occasional raised eyebrow when the percentage is higher than you expect.