No. 01Learning interface
The drawer that let the page slide out from under it
A mobile navigation drawer left the page behind it scrollable, and the fix for that made the page take a 1.5-second tour back to where it started.
BrowserState
A permanent collection of six
Real bugs, with the working out left in.
Six defects from real project work, with the names taken off. Each one is here as an object you can handle: break it, watch the fix land, then read why it happened and what stops it coming back.
- Software rarely goes straight from broken to fixed. Three of the six exhibits here have a middle state — a fix that was shipped, was correct, and was not the end of it.
- The first fix can introduce a second, subtler problem. Locking the page behind a drawer worked. It also made closing the drawer take a 1.5-second scenic route back to where you were.
- A passing test is not the same as a working system. One of these cases had unit tests that stayed green through the entire life of the bug, because they called the method once and the app called it twice.
Featured exhibit
Exhibit 01 — BrokenLearning interface
Scroll the phone with the wheel, a finger, or the controls next to it.
scrollTop0px
bodystatic
drawerclosed
Five frames after the close
Close the drawer from somewhere in the middle to sample them.
What the page did
Nothing yet — try a control above.
The phone in the case is a scroll container in this page. It runs all three implementations against an element that really does carry scroll-behavior: smooth, so the difference you see between First fix and Fixed is the real mechanism — but the content, the timings and the pixel numbers are this browser's, not a recording of anything.
What you are looking at
The scrim stops clicks, not scrolling — the page keeps moving behind the drawer.
- Scroll the phone to somewhere in the middle, then open the drawer.
- Scroll again with the drawer open, and watch the page behind it move.
- Close the drawer: you are no longer where you left off.
The drawer that let the page slide out from under it
A mobile navigation drawer left the page behind it scrollable, and the fix for that made the page take a 1.5-second tour back to where it started.
Read the whole storyThe collection
All six exhibits
Filter
Showing 6 of 6 exhibits
- No. 02API resilience layer
The circuit breaker that could never close again
Asking a circuit breaker whether a request was allowed consumed the one probe that would have let it recover.
AsyncTestingState - No. 03Daily practice tracker
The day that was only 23 hours long
A streak counted backwards in fixed 24-hour steps, so the morning after the clocks went forward it skipped a date and declared the run broken.
TestingState - No. 04Voice session
The effect that stopped what it had just started
A React effect listed the state it produced among its own dependencies, so the speech recogniser started, cancelled itself, restarted, and transcribed almost nothing.
StateAsync - No. 05Multi-tab account flow
The other tab brought the account back
Deleting an account in one tab made a second tab notice the missing profile and helpfully recreate it.
ConcurrencyBrowserAsync - No. 06Guided coding exercise
Two presses of Enter, one question you never saw
A delay before advancing to the next blank left the form live, so a second Enter queued a second timer and skipped a question entirely.
StateConcurrency
How to visit
Three minutes per room
Switch the state
Every case has a Broken / Fixed switch, and three of them have a First fix in between. The object in the case really is running that version of the code.
Break it yourself
Scroll the phone, fail the requests, press Enter twice. Nothing here is a recording, and nothing runs code you type.
Then read the label
The explanation, the reproduction and the regression test are underneath, each linked to the file in this repository that holds it.