Lately, I’ve been experimenting with different learning styles and brain hacks. While I have adapted naturally over time to self-educating in the most efficient manner, there’s always room for improvement.

One of my most recent experimentations, I stumbled upon purely accidentally. While driving one day, I wanted to squeeze in some learnin’ to maximize my time. I turned on my Treehouse PHP Development track—which I completed in 2015, but recently realized had added a lot of new content, so I wanted to be thorough and relevant through the Treehouse app.

However, I couldn’t watch the video, because I was driving. At first, I almost bucked the idea of continuing to listen. But I stuck with it for a bit as instructor Alena Holligan walked through the process of coding a “daily exercise program” (kind of a blah project, sorry Treehouse!).

I was amazed to find that without even having to close my eyes, I was able to visualize the coding process. My brain even did a surprising job of recalling code I had “already written”!

Perhaps the most impressive part of this experiment was the profound effect it had on increasing my confidence in opening the code editor once I was in front of a computer. This appeared to be an issue for me, without even consciously realizing it.

I really believe that this approach could be a game-changer for some people, especially those who are highly visual. So, I’ve done a bit of digging into the topic, to share with my readers!

What is Visualization?

Visualization is a technique using your imagination to create scenarios in the mind’s eye. When you visualize doing a task, you create a mental context of it. That context allows you to feel as if you’ve experienced something, despite perhaps never having done it before, because you’re tricking your brain into thinking you’re doing it in that moment.

Visualizing Success vs. Visualizing Obstacles

The type of visualization that I am describing is very different from the self-help industry’s popular “success visualization” techniques. Based on 2011 research, success visualization — or the visualization of one’s self already in a position of success — may actually have the opposite effect on our work ethic, tricking our brain into believing that we’re already there. At least, this is what research has found.

I personally can’t offer a lot of advice (yet) in terms of success visualization, because I haven’t truly incorporated it into my routines yet. However, I can speak to the effectiveness of visualizing obstacles, before you ever encounter them.

Athletes brought visualization into the spotlight in recent years, and common details of their practice include exercising pushing their limits against obstacles, as well as crossing the finish line. Utilizing this combination may be an important key to combating visceral responses triggering complacency, while strengthening our ability to overcome more difficult obstacles with less emotional drain.

By visualizing, we can also address key anxieties and hesitations in approaching challenges, without being under the pressure of expectation. Then, equipped with powerful information about how we process these challenges, learn how to manage the anxieties, and overcome the hesitations that come along with them.

Why Visualization Works With Coding

I was really surprised to see that there aren’t many people talking about visualizing code. A cursory search prior to writing this article yielded mostly data visualization resources.

Programming is universally accepted as a mentally taxing activity, engaging our problem-solving skills and tactile/kinesthetic senses. This is one of the biggest lessons that newbies learn when first learning to code: this shit can be difficult.

When we first encounter new, difficult topics during our journey, it’s natural to recoil and give up. There are so very many places that things can go awry, and we’re doubting ourselves every step of the way.

Even with all the best newbie resources in the world, this is a difficult endeavor. The prospect of failure can feel crushing, despite the ever-present messages not to be discouraged by it.

Now, please note: visualizing coding is not for a beginner. When you still have your training wheels on, we need that immediate feedback in the console, pointing out our errors and allowing us to learn from them. Our brains are not compilers, so you’re going to still need the computer.

But when practicing those skills to keep them fresh… who says we need to be in front of our computer, feverishly typing?

In fact, one of the greatest benefits of visualizing your coding exercises is that you can do it anywhere, and with any language you choose. The second greatest benefit? No compilers. (I’ll go more into why this can be good for an intermediate programmer later)

I’m at a point where I’m still learning new topics and tidbits regularly, and have been desperately seeking ways to fit in my coding exercises while also working as a freelancer. Most of the time, this means repetition until I can kind of mentally “translate” my thoughts into my language of choice in close to real-time accuracy. I want to be able to use a skill I possess while half asleep, if need be.

When I visualize coding, by not watching the accompanying video, my brain is engaged, filling in the gaps. The amount I’m able to fill in astounds me, and it will astound you as well.

One final added benefit: If you are a student who tends to procrastinate or avoid coding after encountering challenges, properly leveraging visualization and mindfulness can actually help you feel more comfortable with firing up the ol’ code editor and climbing back on the horse. This is primarily because you are addressing the negative emotions associated with getting back into coding, by identifying them and choosing to overcome them.

Maximizing Your Visualization Exercises

Like anything else, visualization takes practice.

Make sure you’re in a relaxed mental state — ideally, as close to a hyperfocused state as you can get, but while being mindful of your emotions.

Now, focus on the details to really engage your brain. This is the hardest part, so really work at it! Pay attention to the feeling of the chair you’re sitting on, the feeling of the muscles in your legs as you stand at your desk, and “hear” the click of the keys as you type a few random keys.

Now, start a small project. It shouldn’t be complicated, and you don’t have to finish it; you are just doing a mental exercise.

Try to recreate something you’ve already created. For a challenge (not your first time, ideally), go through every single motion of creating a project that you’re not entirely sure how to do.

Set up your variables, and identify your functions. Make a typo and edit it. The more convincing you make the experience, the better the visualization technique will work for you.

If you experience a visceral reaction, like anxiety or frustration, take a moment to recognize and examine it. What caused that feeling? Make a brief note of it, and continue the exercise.

If you run into something you don’t know how to do, make a note of it, and continue what you were doing. Assume that you have the function you need to look up, and that it works. You’ll look these things up later. As I mentioned earlier, this can be the best part of visualization techniques: not getting caught up in the details of the code, while identifying areas of comfort, and strengthening areas of weakness.

If you experience difficulty getting back into the focused moment after writing down a note, realize that being able to recover from distractions is a valuable skill that will also help you with focusing on your tasks at hand.

The important part is to KEEP GOING. Concentrate on recovering from distractions, and you’ll carry that practice into real action.

Don’t visualize for too long. 5–10 minutes is a good place to start. Visualization is mentally taxing, especially at first, but it does get easier with practice.

Debriefing After Visualization

First things first: review your notes.

Unless you’re an expert programmer already — in which case, what are you doing here?! ????— you should have notes covering a variety of emotions you’ve experienced during your visualization exercise. You should also have a list of topics you need to work on.

Look up functions, and learn what you needed to know. Read the codex and documentation, and add those tools to your toolbox. You will remember them during your next visualization exercise.

As self-taught students, we’re frequently asking more experienced developers, “What should I learn next?”.

Sometimes, the answer is right in front of us. We don’t need a shiny new skill, but rather, a stronger level of skill in the topics we already know.

Notes on My Experiences

My first time visualizing, which was just recently, I had written down about eight CSS selectors I later needed to look up, because I was trying to visualize CSS transformations. I knew what I was trying to do, and frustration swelled up inside me.

Mostly, I just wasn’t sure what order the declaration parameters went in, but I was unnecessarily beating myself up. Good to know!

I recognized the emotion, and opened my eyes briefly to write down “frustrated, don’t know CSS transformations as well as I thought”. I let the emotion go, and re-focused. Having noted that this was a weak area of mine, I was able to move on under the assumption that the function worked. But my work wasn’t done.

All three times I’ve used visualization techniques to date, I’ve found that I knew what I needed to do. The details were things that, as it turns out, most developers get tripped up on. Developers are not perfect: we need reference resources.

Even seasoned professionals need to check on the detail. And sometimes, those details aren’t so small. Remember that the next time you question your programming ability based on inability to retain the minutia.