SWYoon Labs

A calculator looks like a small programming exercise until it has to behave like a real tool. The arithmetic is the easy part. The difficult parts are state, keyboard focus, percentage rules, decimal precision, localization, persistence, and recovery after invalid input. I ran into all of those details while building a calculator for Chrome's side panel. I also wanted something ordinary calculators do not provide: two independent calculation areas that remain visible at the same time. That requirement turned a tiny interface into a useful state-management case study. This article explains the design decisions behind that implementation. The examples use plain JavaScript and Manifest V3, but the same ideas apply to small React, Vue, or desktop calculator projects. Why two calculators need two complete states The original problem was not a lack of calculator apps. It was losing the first number while working out the second one. Imagine comparing two shopping carts, checking a ...

Fully revised · July 2026. This post replaces the original five-part "dev diary" teaser with a single, complete guide: why I built Side Panel Clock, how to install and use it, how the code works, and how to put it to work in your own day. I spend most of my working day inside the browser, and all day long I kept doing the same tiny things: glancing at the clock, working out what time it was for a teammate three time zones away, and starting a quick timer so a task wouldn't quietly eat an hour. None of these are hard. The problem is that each one pulled me away from what I was doing. The OS clock meant looking off-screen. A world-clock site meant a new tab. A timer meant yet another tab or a phone app I'd forget to check. Individually trivial; together, a steady drip of small interruptions. So I built Side Panel Clock — a small Chrome extension that puts a clock, a world clock, a timer, and a Pomodoro into the browser sidebar, one glance away with zero context...