Refactoring
Post #669 · source on Telegram
The Three-Step Coding Waltz: Work, Pretty, Broke
Description
A screenshot of a tweet by user Kelly Vaughn (@kvlly). The tweet presents a relatable three-step process for coding. The text reads: "How I code: 1. Make it work 2. Make it pretty 3. Make it work again because I probably broke it while trying to make it pretty". This sequence humorously captures a universal developer experience: the cycle of implementation, refactoring, and subsequent debugging. It plays on the well-known software engineering mantra 'Make it work, make it right, make it fast,' highlighting the common pitfall where the 'make it right' (or 'pretty') phase inadvertently introduces regressions, breaking what was previously functional
More like this
More like this in Refactoring →
Use J and K for navigation
Comments
7Comment deleted
The senior developer's corollary to this is step 4: 'Write a character-building post-mortem on why the 'pretty' refactor violated the single responsibility principle and took down production.'
Red - green - refactor is great until the UI polish phase adds an undocumented fourth color: production-traffic-red
The real tragedy is when you finally get it working again, the git history shows you've essentially reimplemented your original "ugly" solution with extra abstraction layers and a 40% performance hit
This perfectly captures the eternal struggle between 'works on my machine' and 'looks good in code review' - where step 3 inevitably involves git bisect to find which 'harmless' variable rename cascaded into a production incident. The real senior move is recognizing that 'make it pretty' often means introducing subtle race conditions that only manifest at 3 AM on Black Friday
The sacred cycle: functional prototype, aesthetic apocalypse, postmortem refactor - why CSS commits need their own sprint
Architect translation: step three is the tax for style‑layer coupling - one innocent 'position: relative' and suddenly 47 snapshot tests fail and half your click handlers vanish
Beauty is a breaking change - rename userId to user_id for “clarity” and suddenly five consumers 400, snapshots detonate, and my SLO becomes aspirational