Hello hello friends! Thank you for joining me for yet another episode of the podcast, and if you're new here—welcome!

I aim to bring you, my beloved listener, the insight, perspective you need to become an excellent human being, and by extension, developer! I suppose it could go both ways, but I like that order. :)

Today, I want to introduce you to a technique that really helped with my process of learning to code.

I didn't actually "discover" it as a thing that worked well for me until 2015, a little under 2 years after I began on my journey. But once I started using it, it was a beautiful companion to my learning to help me "lock in" the tools I was learning.

This technique is visualization.

What is visualization? Well, when you imagine visualization in this particular case, before I start explaining it—what do you think of?

Using your brain to conjure an image, maybe? Closing your eyes to make it easier? Imagining you're somewhere doing something you aren't actually? It's kinda all of those things, and I'll show you what I mean.

Throughout my self-education, I’ve been experimenting with different learning styles and brain hacks. With super abstract concepts, I've often needed to do this in order to make things click for me.
So they're not just a little boost for me—they literally make the difference between whether or not I truly understand the concept. 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 back in 2017, 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. And it got pretty code-focused pretty fast.

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!).

And something really surprising happened: I was actually able to follow along better than I thought I'd be able to. When I'm driving, I'm often in a sort of flow state where I'm still very much aware of what's going on around me, while simultaneously "in my own head". Driving, and other kind of flow state, seems to be a great place for me to be able to visualize.

Without even having to close my eyes, I was able to visualize the actual process of building some code. My brain even did a surprising job of recalling code I had “already written”. In other words, I was able to consider the different "blocks" of my code and their purpose in my mind, without the code actually written in front of me.

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.

I was falling prone to a lot of blank screen paralysis, and although visualization didn't solve that problem in its entirety—learning programmatic problem solving skills provided that relief—it absolutely helped me to avoid the discomfort of stepping into the code editor after being away from it for a bit.

I really believe that this approach could be a game-changer for some people, especially those who are highly visual. And I've always been fascinated by the psychology behind Educational Technology—I did a whole series on the podcast earlier on called EdTech September where I discussed EdTech theories and how they relate to our brain.

So, I did a bit of digging into the topic, and I want to share what I learned with my listeners!

What is visualization?

First off, what is visualization? Visualization is a technique using your imagination to create scenarios "in the mind’s eye". It's not real, it's a false reality, but you'll be able to immerse yourself in that false reality and reap the benefits that may come from engaging in that scenario and its details and nuances.

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.

I want to note because I was basically 2018 years old when I realized that people think differently than I do, not everyone can apparently "visualize" things easily. Considering neurodiversity and how widely varied it can be in its presentation, this doesn't surprise me, but it's a fascinating concept. As long as it's a fairly straightforward concept that I can grasp, and I can create a mental model of it, I can probably immerse myself in the experience.

Visualizing success vs. visualizing obstacles

One of the first things I learned about visualization is why it works. It varies by person, but I do want to make one specific distinction: the type of visualization that I am describing is very different from the self-help industry’s popular “success visualization” techniques.

Believing we're already in a good place is always a beneficial mindset as I strongly believe you can attract your success that way, but what you're really learning from is overcoming the obstacles themselves. And yeah... that's the harder part, but also the part you'll benefit most from as a result of this exercise.

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.

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, or scoring the points they attempt to score.

But the important part is to focus on those obstacles, because they are what stand between you and that point of success. If you're only visualizing the reward and not the hard process of getting there, you're not getting the most out of the experience.

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

So, why does this visualization technique actually work well with coding?

I was really surprised to see that there aren’t many people talking about visualizing code. In fact, a cursory search initially yielded mostly data viz resources haha.

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.

Last week's episode on how to handle the emotions you experience prior to giving up, and guard yourself against giving up addresses this very point: you really need to do everything you can and have a toolbox full of techniques to keep yourself moving forward as confidently as possible.

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 complete 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, typing feverishly?

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 errors. That might sound counter-intuitive because errors are important, but I’ll go more into why this can be good for an intermediate programmer later.

Another technique that works in addition to visualization is spaced 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 visual content, 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. Your brain will remember that work you've put in to build mental and emotional familiarity with your coding environment, and mitigate negative emotional response.

Maximizing your visualization exercises

Ok, so how do you practice visualizing? Like anything else, it takes practice.

First, I recommend having a piece of paper or a notebook and a pen or pencil to make notes as you go. You're going to be catching yourself where things get uncomfortable, and making a note on them.

Breathe deeply, and 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.

Focus on the details to really engage your brain. This is the hardest part, so really work at it! And I've learned that some people can't even do this part—mentally relaying these specific sensations to your brain to elicit a response as if the stimuli were real.

My advice is, before mentally "writing" any code, to start by pay attention to the sensations in your surroundings.

Sitting on a chair? Take a moment to simply observe the chair you’re sitting on. It's supporting you.

Standing? Focus 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.

Hell, you could switch them and really focus in on a state you're not even in. That would certainly be a great way to practice focusing on the stimuli and sensations you're visualizing.

Now, challenge yourself to accomplish a small task like writing a function. It shouldn’t be complicated, and you don’t have to finish it; you are just doing a mental exercise. Try to use something you’ve recently learned about, because that will help you to solidify the information.

Feel the keyboard feedback. See the characters appearing on the screen. 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 then continue the exercise. You'll address that reaction later.

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 actual details of the code, while identifying areas of comfort, and strengthening areas of weakness. When you address those emotions, you'll experience greater confidence in the future.

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. Focus is a limited resource that we have, so doing these exercises while you're mentally at your most refreshed is a good decision.

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.

Post-visualization debriefing

First things first: review your notes.

Unless you’re an expert programmer already, 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. And, if you had difficulty retaining focus, you'll know where you slip up.

If you found yourself at points where you didn't know how to make something happen while visualizing your code creation, now is the time to address that, too.

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.

Notes on my experiences

I remember my first time visualizing, I was working on CSS.

While going through my visualization exercises, 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, but not how to do it, and frustration swelled up inside me.

Mostly, it turned out, I just wasn’t sure what order the declaration parameters went in, but I was unnecessarily beating myself up. Good to know! Once again, I knew more than I thought I did, and my stress response was just triggering hard for no big reason.

While I was visualizing, I recognized the emotions I felt, 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. Often, I’ve found that I already 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.

Closing

Visualization has worked really well for me, and if it sounds like it could be something that works for you, I recommend you give it a spin. It might work better for certain skills than others, so your mileage may vary. But what's the harm in exploring options?

If you enjoyed this episode, and the podcast in general, please be sure to leave me a 5-star review and a little love note on the La Vie en Code iTunes reviews. I love the feedback I get, and honestly, I don’t get enough of it because I never ask. So, please consider supporting me and the podcast!

Next week, I want to focus in on one of the important steps in my 8-step programmatic problem solving approach: re-phrasing your code challenge in your own words.

This step is overlooked allll the time, but it'll really help you to get your foundations built when you tackle a problem, and help you avoid solving the wrong problem entirely. And we definitely want that, because it'll keep you moving forward, completing more project steps, and building your skills more quickly.

Alright my friends, thank you so much for joining me today, and it has been a pleasure to learn with you. Until next time, peace, love, and code. ????