Code beauty. Does it matter?

I'm not that old but I do still remember times when we didn't have jslint, pylint and whatever-lint, so in our code review we were visually catching those things like bad indentation in C++ code, absence of white spaces after parenthesis and other things we considered to be out of agreed code convention. I tell you that skill is just like riding a bike - once you learn it, you can find imperfection in any PR. Now linting made it obsolete though.

Yet the question is - why do we do this? Why code conventions, linting rules and other stuff if programming language syntax pretty much allow you to do any crazy thing and compiler/interpreter are able to use this code? Well, the answer is super simple and I partially answered it in another my article. So every time we write the code we have to keep in mind that we write code not for computer, but pretty much for other humans. Yes we kinda keep in mind performance but mostly it is avoiding mistakes like making O(n^2) algorithms, if we were really thinking only about performance we would write code on machine code. Yet here we are writing code for another human beings in the way they can understand how does that algorithm work and criticize us for non-optimal solution.

Non the less, check out code snippet bellow.

This code can be easily executed by V8, but probably you have hard times of understanding what's going on there, right? You can see that it tries to import something at beginning... then your eyes perhaps quickly get tired and following the code just by reading it gets hard really quick. That may be easy for interpreter to read word after word and do whatever is written there, but it is simply not like human brain works and understand things. Imagine you get such code on the legacy project and you have to support it and maintain. I'm sure everyone agree that it would be a nightmare.

So quite naturally developers community got quickly to simple tricks which change the look of the code drastically:

Imagine that your are reading this code 50 years ago on monochrome display, that how the code/text would look like to you. Yet it is still way better than a previous sample. Now it has a structure, and you can visually separate logical code blocks - like import block and function declarations.

By changing slightly visual structure of the code you can make the code way more readable, thus it can be understood and easier to navigate for other developers which is big value if you do teamwork and your success really depends on how good your teammates are able to understand a code. And it tells very interesting story about us, namely about how our brain really works and how do we process an information. We don't have a lot of researches for this topic, but it is evidential that because such code formatting become de-facto a standard and basis of almost all linting rules it means that for majority if not for all the humans it is easier to digest an information when it is visually separated into logical entities.

So no wonders that as soon as we got multicolored displays the syntax highlighting has been invented and we get code visualization in IDEs as we know it know.

Once again this syntax highlight helps us to find the pattern and easily recognize parts of the code which represents different logical and structural entities like class declaration, function declaration, imports etc. You open any file with the code, move your screen away so you can hardly read letters and you'll be still able to recognize patterns of the code.

So, why have we stopped? Surprisingly since code highlighting has been invented around 50 years ago nothing has changed in code visualization since. A lot of other concepts were added to the programming languages, sometimes even indentation as part of the syntax as in Python, but it terms of showing you the code itself there's that much. Sure, IDEs have improved a lot with all the autocompletion and error checking right while you are writing the code made Java programming way less miserable, but is that all we can do to help ourselves to improve readability. Why didn't we try to highlight not only syntax but entire logical blocks like classes, functions, methods by showing them on different background color? Below is just a simple experiment of how TypeScript function might look like in our IDE.

With our great ability to use visual patterns we could read and understand something like this even faster. So there's something really to think about. Perhaps especially in the era when AI can already write the code. Perhaps then our biggest value as specialists will be not an ability to write the code, but ability to read it and understand it.