The Squint Test: How I fix Code that looks like a Grey Brick

Have you ever opened a file, taken one look at the scrollbar, and felt your soul leave your body?

It’s not because the logic is too complex. It’s not because you don’t know the language.

It’s because you are staring at a Wall of Text.

We have all been there. You open a legacy function and it looks like a legal contract written in 8pt font. There are no breaks. No pauses. Just line after line of dense logic, variable declarations, and loops smashed together like sardines in a tin.

Your instinct is to close the tab immediately.

The Junior Developer thinks this is "efficiency." They think that if the code is compact, it’s optimized.

The Professional knows the truth: Whitespace is syntax for the brain.

The Junior Trap: The "Compactness" Fallacy

When we are new to coding, we treat the screen like a precious resource. We want to see as much logic as possible without scrolling. We group everything together because, hey, it’s all part of the same function, right?

Wrong.

When you write a novel, you don’t write three pages without a paragraph break. You use paragraphs to signal a change in topic, a new scene, or a pause for breath.

Code is literature. It needs paragraphs.

The Pro Move: Visual Geography

We need to treat our code layout like a map. We call this Visual Geography.

We don’t just dump lines of code into a file; we group them into logical "paragraphs."

• Group Related Concepts: Variable declarations related to the cart go together.
• The Breath: Put a blank line between different "thoughts."

If you want to know if your code has good geography, use the Squint Test.

The Squint Test:
Lean back in your chair. Squint your eyes until the text on your monitor blurs and you can't read the words.

Do you see blocks and paragraphs? Or does it look like one solid, terrifying grey brick?

If it’s a brick, you are failing the test.

The Code: The Wall vs. The Map

Let's look at a function that calculates a shopping cart total.

// Before: The Wall of Text

This is the "Grey Brick." Your eyes don't know where to look. You have to read every single line to understand where one logical step ends and the next begins.

// My eyes can't find where the loop ends or the math begins.
let total = 0;
let tax = 0;
const user = getUser();
for(let i=0; i<items.length; i++) {
  total += items[i].price;
}
tax = total * 0.2;
user.balance -= (total + tax);
save(user);

It compiles. It runs. But it hurts to read.

// After: The Map

Now, let's apply Visual Geography. We aren't changing the logic; we are just adding "air."

const user = getUser();

// 1. Calculate Total
let total = 0;
for (const basketItem of basketItems) {
  total += basketItem.price;
}

// 2. Apply Tax
const tax = total * 0.2;
const finalAmount = total + tax;

// 3. Charge User
user.balance -= finalAmount;
save(user);

Why This Matters

Look at the difference. In the second example, you don’t even need to read the code to know the shape of the logic.

1. Setup.
2. Calculation.
3. Tax.
4. Final Save.

The whitespace acts as a cognitive breath. It allows the reader (which will likely be Future You at 3 AM) to digest one piece of logic before moving to the next.

Stop writing solid blocks of code.
Give your code room to breathe.
Pass the Squint Test.

---

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.

👉 Get the Full Handbook Here

---