Code, Graphic, and Explanation: Dissecting How Things Work

I love code refactoring and enjoy the feeling of making progress for good, without breaking the existing stuff. Even from my childhood, when I draw some random picture after I reach a point where making any change could potentially ruin the whole thing, I would stop, and I didn’t want to break it.

For coding as well, sometimes you just know the code is at the edge of your capability to understand or change further, any more changes could lead to failures out of your control - and that’s why we have version control to rollback, right?

That fear stopped me from being better for quite a long time. Then, I learned refactoring, especially with Test-Driven Development and used respective tests to protect me. It opened a door for me, and I fell in love with this new approach.

Not only is the process enjoyable - you're turning something into a better, easy-to-understand and bug-free status, but also, you know you’re safe, you could go back whenever you like. And you can practice more drastic changes by trying newly learnt design patterns without worrying.

And that is the developer side of me. I thought my career would be as an individual contributor, making reasonable changes to the codebase I work on, and as a coach or mentor, helping younger developers grow. I write more code, refactoring while implementing new features, and then share that with others to learn the same.

But I also found I’m very passionate about visual stuff, too. I love making beautiful pages, animations, and illustrations in my writing - articles, books, presentations, etc.

I can spend days on visualization from scratch, many prototypes, different types of charts, redesign, and I teach myself UX design, etc.

For example, the following visualisation is about how my team member’s skill levels were - there are many categories, and different person has different strengths.

However, I felt a bit divided between these two and couldn’t figure out a way to combine them into something I don’t have to sacrifice.

Until recently, while trying to figure out how an internal analytics system works. There are dozens of systems involved, the codebase I’m working on has roughly 2,000 packages with 70k lines of code, and other packages live outside of my direct monorepo doing other work. I tried assembling all the jigsaw pieces to map out the whole picture - I dive really deep into the codebase, switching contexts and make some notes along the way, eventually, I got a big map in my head and everything just made sense - that was so satisfying.

I found the process super engaging and exciting, and at the moment, I know what my real passion is - at least for a long time - learning in depth to figure out how something works and then explain it visually to others.

I would use all the visual elements and text and code snippets to explain some complicated concepts to others. For 1) I personally benefit from others' work sharing the same nature, 2) I love the process of creating such an artifact, 3) It’s useful and potentially can make me a better creator.

On my YouTube channel and many other social identities, I mark myself as “I help people to write better code”, and I strongly believe making such visualization, be it a diagram, an article, a presentation or a book, can serve that purpose well.

I’m thinking of refining a website with some of my previous articles with more visualizations as the first step and see how it goes. Stay tuned.