Blocky Block Comments: An Easy Way to Improve Code Readability
So simple and effective, yet you’ve probably never seen them before.
There’s always something that stands out from your first day of work. For me, it was the crazy setup of an engineer who sat behind me. He had three monitors (one in portrait orientation of course), a mechanical keyboard, a futuristic-looking mouse, huge headphones… you know, the whole package.
That wasn’t what stood out to me the most though. What I noticed the most was something scattered throughout his code — something that looked almost like art.
Maybe you’re thinking the same thing I was: What the $#!* is that funky looking text? Of course, I asked about it and he explained what it was.
Fast-forward a couple of months, and I’m the one explaining this art in my code to my colleagues. And now, I’m sharing this art with you.
The What
I call them banner comments, or blocky block comments. I don’t know, I’m not good at names. Anyways, they’re exactly what they look like: Big blocky text, wrapped in a block comment.
Maybe I should call them big block comments?
The Why
Alright, so why should you use these?
Better code organization
The main reason to use banner comments is to improve the readability and organization of your code. Use them to separate your code into logical chunks. For an Express app written in TypeScript, I might create sections like Types, Constants, Initialization, Routes, Helpers, etc.
Obviously, you want to modularize your code and separate some of these sections into their own files, but you can only modularize so much. These comments will help you create modularity within a single file!
Faster code navigation
Maybe you’re already creating divisions in your code with regular comments. It can be really hard to find a single comment as you scroll through the wall of text that is your…
