Here is a hard truth about our profession: We don’t read code like a novel.
We don’t start at line 1 and read strictly to line 10,000, savoring every variable assignment and nuance of syntax.
We scan.
When you open a documentation page, a Stack Overflow answer, or a Reddit thread, what is the first thing you look for? You look for the TL;DR (Too Long; Didn’t Read). You want the summary. You want to know if this file is relevant to your current problem before you commit mental energy to understanding it.
A Coder writes a file so the compiler can read it top-to-bottom.
A Professional structures a file so a human can understand it top-to-bottom.
If I open your code and I have to scroll past 50 lines of regex parsers and math utility functions just to find the main exported function, you have failed the TL;DR Rule.
The Trap: Burying the Content
Imagine you click on a YouTube video titled "How to Fix Your Sink," but before you get the answer, you have to watch a 5-minute unskippable ad about car insurance.
That is what it feels like when you bury your main logic at the bottom of the file.
When we open a file and are immediately hit with low-level bitrate calculations, string parsing, or config setups, it is disorienting. It forces the reader to hold "implementation details" in their head before they even know what the "high-level intent" is.
We call this "The YouTube Ad" Anti-Pattern.
The Pro Move: Respect the Scroll
To fix this, we organize our code based on importance, not execution order.
- The TL;DR (Top): The public functions. The exports. The "What." This is the API of your file.
- The Deep Dive (Bottom): The private helpers, regex parsers, and nitty-gritty math. The "How."
You want the "Future Team" (which includes Future You) to open the file and know exactly what it does within 3 seconds. If they need to know how it does it, they can scroll down.
The Code
Let's look at a file designed to upload a video story.
Before: The "YouTube Ad" Structure
In this version, the developer wrote the helper functions first because "that's how the compiler needs it" (or simply because that's the order they wrote it in).
// Before: The "Get It Working" Draft
// Why am I looking at aspect ratios?
// I just opened this file to see how the upload flow works.
function checkAspectRatio(width, height) {
return (width / height) === (9 / 16);
}
// Now I'm looking at compression logic?
// I still don't know who calls this.
function compressAudio(stream) {
// ...complex ffmpeg logic...
}
// ... 40 more lines of math ...
// THE ACTUAL POINT OF THE FILE (Hidden at the bottom)
export function postStory(videoFile) {
if (!checkAspectRatio(videoFile.width, videoFile.height)) {
throw Error("Stories must be 9:16");
}
compressAudio(videoFile.audio);
api.upload(videoFile);
}
After: The TL;DR Layout
In this version, we hoist the main intent to the top. Note: In modern JavaScript/TypeScript, function hoisting allows you to call functions defined lower in the file. Use this to your advantage.
// After: The Professional Layout
// TL;DR: The High-Level Logic
// We know exactly what this file does in 3 seconds.
export function postStory(videoFile) {
validateDimensions(videoFile);
prepareMedia(videoFile);
api.upload(videoFile);
}
// --- THE DEEP DIVE: The "How" ---
// We only scroll down here if we need to fix a bug in the math.
function validateDimensions(file) {
if ((file.width / file.height) !== (9/16)) {
throw Error("Stories must be 9:16");
}
}
function prepareMedia(file) {
// ...complex ffmpeg logic...
}
Why This Matters
Notice the difference in cognitive load?
In the After example, you can stop reading after line 6. You know this file exports postStory, validates dimensions, prepares media, and uploads it. If your ticket is "Fix bug in aspect ratio validation," you know to scroll down. If your ticket is "Change upload API endpoint," you stay at the top.
Respect the scroll. Don't force your teammates to wade through the mud to get to the castle.
Stop writing code just to please the compiler.
This article was an excerpt from my handbook, "The Professional Junior: Writing Code that Matters."
It’s not a 400-page textbook. It’s a tactical field guide to unwritten engineering rules.
Top comments (0)