Pop Punk Taught Me to Write Better Code

This sounds like a stretch. It isn't. The discipline that makes a three-minute pop punk song work is the same discipline that makes a good function.

An electric guitar in warm stage lighting, blurred crowd behind it

I played in a metal band for years. We wrote songs that were eight minutes long and had seven sections and time signature changes that nobody in the audience could follow. We thought that was sophistication. It was not sophistication. It was avoidance.

At some point I started listening to pop punk again — really listening — and something clicked.

A great pop punk song is ruthlessly edited. Everything that isn't serving the chorus is gone. The verse exists to make you want the chorus. The bridge exists to make the final chorus hit harder. Every single element is load-bearing. If you can remove something without losing anything, it's already wrong that it's there.

That's a design principle.

The parallel

When I write code now, I ask the same question I ask about a song: what is this doing, and is it doing only that? A function that does two things is a song with two choruses — structurally confused about what it wants to be. A component that manages its own state AND handles its own API calls AND controls its own layout is a metal song: technically impressive, but nobody can hum it.

The constraint is the craft. Three minutes forces you to decide what matters. A one-responsibility function forces you to decide what matters. In both cases, the decision is the work.

Sheet music on a stand, pencil marks and edits visible

I keep a rule in my head now when I'm writing: if this were a song, would it have too many sections? It sounds ridiculous. It works.

What ruthless editing actually looks like

Here's a real example. I had a UserCard component that was doing this:

function UserCard({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [isFollowing, setIsFollowing] = useState(false);

  // fetch user, fetch posts, handle follow toggle, format dates,
  // render layout, handle loading states, handle errors...
}

Seven sections. Nobody can hum it.

After editing:

function UserCard({ user, postCount, isFollowing, onToggleFollow }) {
  return (/* just the rendering */);
}

It does one thing. You can describe it in five words. It's a chorus.

The part where I embarrass myself

My metal band's best song was four and a half minutes, and the best part was the thirty-second melodic break in the middle that sounded like a completely different band. That was us accidentally writing pop punk.

I've been writing pop punk songs on my own for the past couple years. They're better than anything I wrote in that band. They're also much simpler. I used to think that would feel like a loss. It feels like relief.