Three bugs every developer eventually writes — explained the way I wish someone had explained them to me the first time.

Three bugs every developer eventually writes — explained the way I wish someone had explained them to me the first time.

You don't need years of experience to hit these. You need to have shipped anything literally.

1. Two things that look connected but aren't actually connected in the code What it looks like: a header with a little decoration under it — a spacer, a border, a shadow. Visually, it reads as one piece. But nothing forces them actually to behave as one piece. Why it breaks: if they're separate elements, they can separate. The moment the page scrolls or re-renders, one might move and the other might not — because nothing in the code says "these two always move together," only your eyes assumed it. The fix, in plain terms: put them inside the same container, so the browser treats them as one unit and moves them together automatically. If you find yourself carefully lining up two separate pieces with precise pixel values, that's usually a sign they should be one piece, not two. How to catch it early: scroll or resize the page and watch closely — does everything that should move together actually move together, in one motion, with no flicker or gap?

2. One shared "box" being reused for things that need their own box What it looks like: you store something — a scroll position, a selected item, a loading flag — in a single variable. It works great, because when you tested it, there was only ever one of the thing it describes. Why it breaks: the moment there are two or more of that thing (two pages, two tabs, two users), they all start reading and writing the same single box. Whoever touched it last wins, and everyone else gets the wrong answer. The fix, in plain terms: instead of one box, use one box per item — a small lookup table where each item's ID points to its own value. Like a hotel: instead of one room for every guest, each guest gets their own room number. How to catch it early: the moment you write a variable or useState, ask "could there ever be more than one of this at the same time?" If yes, it needs its own key.

3. Comparing two numbers measured with different rulers What it looks like: you compare two values that both look like plain numbers — positions, indexes, prices, timestamps — and the comparison works... until one day it doesn't, for no obvious reason. Why it breaks: two numbers can look identical in the code (x, y, both just numbers) while actually meaning different things — one measured from the top-left of your screen, the other measured from the top-left of a photo that's been zoomed and dragged around. Same idea as comparing a distance in miles to a distance in kilometers — both are "just numbers," but they mean different amounts. The fix, in plain terms: before comparing two values, say out loud what each one is measuring and from where. If they're not measuring the same thing, convert one so it matches the other, then compare. How to catch it early: if a feature "works the first time you try it" but breaks after you interact with the page a bit (scroll, zoom, move something), that's a strong hint two values are being compared in different "units" that only lined up by coincidence at the start.

None of these need advanced tools or years of experience — they need one slow, deliberate question before you trust your code: "am I sure these two things are actually connected / actually separate / actually measuring the same thing?" Most real bugs aren't clever. They're an assumption nobody double-checked.

Stack behind the real examples: React, TypeScript, Tailwind CSS, Canvas/Fabric.js — but none of these three patterns are specific to that stack. If you're newer to development, these are genuinely worth keeping in your back pocket; you'll meet all three eventually.