Coding in my head

Introduction

I finished watching Queen’s gambit on Netflix and something really stood out for me. The protagonist, a chess prodigy, has the ability to visualise an entire chess board, moves, and full games in her head [shown/drawn on the ceiling for the viewers].

It felt relatable. It is something I have been doing for years and very recently have been able to do for software projects but only recently noticed.

Background

I started learning the guitar ten years ago. It had a steep learning curve and was quite difficult at the start but I improved little by little over time. It amazed me back then how guitarists could immediately tell what note was on a particular fret of a particular string where I would have to count down from the open string to figure out what the note was. More time and lots of practice later, I could do it too. Then it came time to learn scales, which were hard to memorise and there were a lot of them. I was thinking to myself how does anyone remember all this? But as with all things practice led to mastery and with time I could play pretty much any scale in any key quite comfortably. There was definitely a finger-muscle memory component but there was another visual component to both those learning steps.

In both cases, learning the individual notes on the fretboard and the scales across the neck, I was able to see the entire fretboard in my head with the appropriate notes marked throughout.

For the notes on the fretboard I can immediately see the follwing picture in my head on the actual fretboard

and for the scales, say A minor pentatonic, I see this

I can visualise them.

Visualising and code

I read about visualisation years ago - generally it was either in the context of self help gurus mentioning how it is important to visualise success or the life you want to achieve it or athletes visualising big games or the final game point shot in their heads.

The only relevant post I could find on visualisation techniques in coding, which weren’t related to graph visualisation was this: https://medium.com/la-vie-en-code/visualization-techniques-for-programmers-and-why-you-should-be-using-them-ed9cfba062da

Whenever I get a bit of spare time, I try to hack on my side project but this time I designed the entire thing in my head before I sat down to write any code. By design in my head I don’t mean just the high level APIs or feature spec - I coded each interaction and feature in my head. What the request payload would be, what the folder structure would be like, what the function name would be, all the way down to the actual code that would be required for each feature sans tests of course - cause who writes tests for their side projects.

I could visualise the code for the entire project in my head. All the vert.x verticles and how each piece would communicate with each other, how the data would be structured and persisted, the code required for stats and tracing, any periodic triggers - everything.

By the time I sat down and started a new intellij project - all I had to do was type the code in. All the work was already done.

Similarly, last December I did the first dozen Advent of code challenges - and if I couldn’t complete it during my morning cup of coffee I would just code the answer in my head and try it out after work. The entire sequence of map, reduce, filter, and fold required to go from the puzzle input to get to the required answer would be coded in my head without the need of an IDE or a computer.

Conclusion

I never realised what this was until I saw the show but then it really clicked what visualisng really is and how powerful it can be. I encourage all devs to try this. Before starting up your favourite IDE or text editor to work on your next project try coding it in your head first. Write down the features you wish to implement and then individually start implementing it in your mind.