What I Learned From a Week of Code Walkthroughs
Tags: codenewbie, beginners
Published: 2021-04-27 19:03:13

## What is a Code Walkthrough?
A code walkthrough is basically just as it sounds; someone leading you through the process behind how a project or a particular aspect of that project functions.

In my case, it was my professor walking us through his passion project:
{% github elmsln/lrnwebcomponents no-readme %}

**From these walkthroughs, I learned 3 important lessons:**
- Don't worry so much about understanding everything
- Know what you want to get out of it beforehand
- Ask questions!

## Don't worry so much about understanding everything
You likely won't. This is okay. Just try and focus on what is being discussed and not necessarily all of the details. This key point goes hand-in-hand with the next one in that you should know what you want to get out of the walkthrough. 

Rather than kicking yourself mentally for not keeping up, just continue to participate in the walkthrough and isolate your focus to smaller segments of the code. Ask yourself: _"Do I understand the specific block of code that I am looking at?"_ or _"Can I see how this might interact with other parts of the code, regardless of what those use cases might be?"_ or my favorite; _"Can I think of an example of where I could use this technique or a similar pattern?"_

Those questions will be more meaningful than trying to understand **exact** details.

## Know what you want to get out of it beforehand
This is my personal favorite tip. On the first day of the walkthrough, I had no idea of what was going on and no real understanding of how the project worked. 

After realizing that this wasn't going to benefit me in any way, I changed my frame of mind. Instead of trying to manifest some deep understanding of the project, I made it my goal to learn how to become a better front-end developer. With this mindset, I began picking up little tips and techniques... and I mean **little**.

Things like:
- How and why to define a URL so that it works for both HTTP and HTTPS in testing environments (`"//www.example.com/testing.js"`)
- Practical examples of how to use the _"spread operator"_ (`...params`)
- How to read a _"conditional (ternary) operator"_ (`condition ? value if true : value if false`)
- Many lessons about best practices and standards

There were some other things as well, but my point is this; be specific about what you want to get out of it. Do I remember the exact use cases for each of the aforementioned bullet points? **No.** Am I ready to contribute to the core functions of the project? **No!** But that is not the point. My goal was to come out on the other side as a better front-end developer, and by picking up the knowledge that I did, I'd say that I achieved that goal.

## Ask Questions
This is super important. This can be the difference between you sitting through an hour-long lecture on a topic that you have no clue as to what is going on **or** you learning a hell of a lot more and being engaged in the conversation. It can be challenging at first to know what kinds of questions to ask or maybe you might even be embarrassed to ask them, but it is likely that someone else will be thinking the **same question** and that the presenter is more than happy to both receive a question and explain their answer.

## Conclusion
Don't be upset that you aren't understanding everything that is being shown. Each participant will have a different level of understanding of the project being walked through. To maximize the value of the walkthrough, set a specific goal for yourself; whether that be directly or indirectly related to the project in focus. And lastly, your questions will be appreciated -- and not just by yourself.

Code walkthroughs can be a very valuable insight into a developer's mind. Talking to someone about something they've spent time on and dedicated themselves to is a great experience, so try and make the most of it! I hope that you've found some value within this post and if you have any of your own tips, be sure to leave a comment down below!