Jobs Done
Case study
Overview
A single-page web app for logging completed tasks through the day and sharing them via email or clipboard. Built in vanilla HTML, CSS, and JavaScript: no framework, no dependencies, no build step. In real use from day one.
The origin
After a particularly overwhelming morning, I wanted a way to log all the physical and emotional labour that goes into running a household, without having to tell anyone directly, which would just sound silly. I wanted a record that could speak for itself.
I built the first version quickly, in a single conversation with Claude. The name Jobs Done and the tagline "Everything you do, made visible" came out of that initial conversation.
On my first share, I got a love reaction from one of my daughters. I'm not sure how closely my family reads the list, but I feel more seen. The app did exactly what it was supposed to do.
The technical decision
Jobs Done is built in vanilla HTML, CSS, and JavaScript; no framework, no dependencies, no build step. That was a deliberate choice. The app is simple: one input, a timestamped list, two ways to share. A framework would add complexity without adding value, and it would bring maintenance overhead (dependency updates, breaking changes) to a personal utility that should just work. It may stay this way.
This contrasts with the Periodic Table app, which uses React and TypeScript. Different problem, different tool.
The audit
After v1 shipped, I recreated it pixel-faithfully in Figma and ran a WCAG 2.2 AA accessibility check using the Stark plugin. It reported 6 out of 9 violations. That wasn't entirely surprising. The colour palette was deliberately soft, and soft colours fail contrast requirements. What the audit made clear was that almost all the violations traced back to two tokens: text/muted and accent/gold. Fix those two, fix nearly everything.
The root cause was in the design system, not scattered across the UI. The fix hasn't shipped yet. It's the first task for v2. The diagnosis is done and the solution is clear.
What's next
- Darken
text/mutedandaccent/goldto pass WCAG 2.2 AA - Split into separate HTML, CSS, and JS files
- Add localStorage so the list persists between sessions
- Typography refresh: replacing the accidental system font stack with a deliberate Google Fonts pairing