I built a little board to keep track of what I'm working on. Columns, cards, drag them around. Nothing clever. I wanted a strip of colour down each card's left edge to show which project it belonged to, so I could glance at the board and see where my week was going.
I added the colour, added a way to pick a project on each card, and pushed it live. The cards looked wrong. Flat. No border, no shadow, no colour, just text sitting on a grey background. They didn't look like cards at all.
First thought: the styling hadn't updated. I checked the built CSS and JavaScript, which I upload separately from the code. The new files were there and loading. Next I cleared the cached templates, because I'd been caught by those before. Still flat.
By the third deploy, I was opening the files on the server to confirm my changes had landed, clearing caches again, and hard-refreshing the browser. Flat.
I'd spent the better part of an hour certain this was a deployment problem. "My change isn't showing up" had meant a stale file or cache often enough on this project that I'd stopped questioning it. I kept running the same fixes, harder.
Eventually I opened the browser dev tools and inspected a card's computed styles. Background: transparent. Border: none. Shadow: none. The styles weren't being overridden by something else. They were gone.
That gave me a different problem to investigate. I checked what the page was doing after it loaded, rather than what the server had sent it.
I'd used a small front-end library's style binding for the coloured edge: if the card had a project, set the colour; otherwise do nothing. Except I'd misunderstood what "do nothing" meant in that binding.
I'd supplied a string, which replaced the element's existing inline styles rather than merging with them. For a card without a project, I'd supplied an empty string. I'd told the page to erase the card's background, border, and shadow.
My test data explained why I'd missed it. Locally, I'd made a handful of fake cards and given nearly all of them a project, because that was the feature I was testing. On the live board I had about seventy-five real cards and hadn't assigned their projects yet. I'd tested almost entirely with one branch of my own condition; nearly every real card took the other.
I changed the binding to use an object, which merged the styles properly and left them alone when there was nothing to add. I also moved the base card styling into a stylesheet rule, so a mistake in the colour binding wouldn't erase the whole card's appearance again.
There's a card on the board that tracked all of this. I made it at the start to remind myself to build the project colours, and titled it "Add Project Tagging to Board." It sat in the backlog looking exactly as broken as every other card while I tried to work out why the cards were broken.
I moved it to done afterwards. Felt like it had earned it.
