Bokeh

Why I built Bokeh

I take notes while listening to podcasts. Something lands, I write it down, and by the end of an episode there's a page of it. Most of that page is for me — it means something because I know what was being discussed around it.

But there's usually one section in there that doesn't need the context. A line that would land for anyone reading it cold, or that I think people would find interesting. That's the piece I want to put on an Instagram story.

A screenshot of the whole page doesn't do it — everything competes, and the part I picked out is just one line among twenty. Cropping down to it doesn't either: it loses the page it came from and reads like a quote card from nowhere.

What I wanted was the photographic thing the name refers to. Subject sharp, everything else soft. The page is still there, still recognisably a page of notes, but your eye has exactly one place to go. A TL;DR that keeps its setting.

Before this, that meant Canva — import the screenshot, find the blur, nudge the strength, mask the region, export. Or ChatGPT: describe the picture I already have in front of me, spend a paragraph explaining which part to keep sharp, burn tokens, and get back something close but not quite it. Both work. Both are a few minutes and a context switch for what is, honestly, one rectangle on one image.

So Bokeh does that and stops. Drop in the screenshot, drag a rectangle over the line worth reading, save. The region stays sharp and the rest blurs out. On a phone, save hands it straight to the share sheet, which is where it was always going.

It also has a redact mode — solid black instead of blur — which I added the first time I wanted to post a note that had someone's name in it. Blur is for attention, not for secrets; a blur can sometimes be reversed, black can't.

Notes on how it works

Everything happens on the device: the picture is decoded, composed, and encoded to PNG in the browser, and the whole app builds to a single self-contained HTML file with a default-src 'none' policy. That wasn't the goal so much as the shape the goal took — the simplest version of this needs no server at all, so it doesn't have one.

The fiddly parts were the ones around the blur rather than the blur itself. Photos off a phone carry an EXIF orientation flag that a canvas ignores, so half of them land sideways unless you handle it. Blurring at the edge of an image pulls in whatever lies outside the frame and leaves a bright halo, unless you extend the edge first. And browsers cap total canvas area — about 16.7M pixels on iOS Safari — so a big enough picture fails right when you press save.

Tests run in real Chromium through Playwright rather than jsdom. The product is canvas pixels, and jsdom has no renderer, so a passing test there would prove nothing about what actually shows up.