How to learn from your programming bugs with Dendro

If you're learning how to code, one of the richest areas for improvement will be solving bugs that appear in your code, and remembering the lessons you learn as you do so.

Sometimes bugs can slow you down for hours, days or even longer. They can take a lot of effort to uncover and fix, especially in the early days of your programming journey. Because of this, learning via solving your own bugs is particularly effective because it is:

  • Highly meaningful: these bugs are not just theoretical problems posed in a textbook, but affect your ability to succeed at something in your life.
  • Highly contextual: instead of just learning arbitrary syntax or fancy vocab, you're learning something that fits in with the rest of your working knowledge. Knowing the story behind the bug, and the difference it made after solving it, is part of understanding the relevance of that type of programming error. That big effort that you make to solve your bugs can pay off by creating a large number of new connections in your brain.
  • Emotional: Nothing is more motivating to learn than something that makes you really happy or really frustrated. In the case of bugs, it's usually the latter, but by mastering the lesson behind each bug, you can venture into future projects with much higher confidence.
Don't make the same mistake twice

The idea sounds great: Simply learn from your bugs so that you not only avoid making them in future, but also build a deeper understanding of the programming language you're using.

But how do you actually do that?

How to do it in Dendro

Step 1: Add the source

After you've just solved a new type of bug in your code, add the following summary into a new source in Dendro:

  • The symptom: What did you actually notice that indicated a bug in your code? Perhaps the screen was blank, an error message appeared in your console, etc. This is important because it'll help you recognise the bug next time.
  • The cause and/or solution: Why did it occur in the first place? Did you use the wrong data type (e.g. an int instead of a string), forget to import a library, or something else? Also, what did you to do fix it, and why did your solution work?

Once you've saved the new source in Dendro, make sure you return and Engage over the next few days. If you really want to try out the whole process now, you can go straight to the next steps. But for the deepest understanding and strongest memories, coming back on future days is a must.

For now, you can rest assured that you've written yourself a clear summary so that you can always come back and get a quick burst of context when you need it.

Step 2: Refine your note

When you come across the bug in your feed, you may want to add some more details, clarify something, research something, etc.

The mere effort of re-reading the note and making minor edits invites your brain to run down the same pathways again, thereby strengthening them. By doing so after a few days (e.g. when Dendro brings up your summary in the feed), you will also experience a passive version of the spacing effect, which will strengthen your memory of those details.

However, by making any effort to refine the note - even just by fixing up the formatting so that it looks nicer, clearer, with simpler wording, and nice examples, you will not only strengthen the already-formed pathways, but potentially form new ones. The secret is that any form of thinking about the ideas results in your brain physically activating pathways related to those ideas. So go ahead and make your note pretty, clear and primed for easy understanding the next time you see it.

Step 3: Add task

By patiently refining your note over a couple of encounters, you will already have made a 10x improvement in terms of your learning. Even if you stopped there, you would find that doing so with every bug you encounter would massively accelerate your long term learning.

However, since you're using Dendro, let's take it even further and create some flashcards, that will lock in this well-earned knowledge for the long term.

These flashcards should be focused on helping you recognise and solve the bug the next time it happens. The effort of doing so will likely reduce the likelihood of you repeating the bug at all, since you'll be thinking differently about your coding from now.

From that point on, you'll have flashcards to engage your thinking, as well as notes to go back to if you ever lose part of that context, or want to make some more flashcards on the topic.

That's all there is to it, but here are a few examples to might let you really imagine what this looks like in practice.

Examples

Note: Because of the nature of programming, while you may not recognise the programming languages used below, you may still find these examples very useful for understanding the general workflow.

React

React Bug #1: Wrong type of brackets
MyReactComponent = () => { <div>Hello world!</div> }

In trying to display the most basic react component I could create, I found that nothing showed on the screen. My "Hello world!" was silent.

After a while, I discovered that my brackets after the return statement should be round ( ), not curly { }.

After adding that information (code + explanation) into a new source, and refining it over a couple of encounters, I created to the following flashcard:

Q1: Why won't this component render?

MyReactComponent = () => { <div>Hello world!</div> }

A1: The curly brackets should be round ( ) )

With that simple question, I've never made the mistake again!

Note that while the question could have been created from day one, the notes-first approach provided the opportunity to explore different ways of thinking about the problem before making the flashcard. While this example was deliberately simple, the more there is to understand about the bugs you're solving, the more you will benefit. Also, the notes-first approach provided space for more context that I didn't want to put in my flashcard, but which I could come back to later if needed.

React Bug #2: Unique 'key' prop required

When I started using React, I came across this error message a few times: After some Googling, I found that that the problem was that my <li> elements needed a 'key' prop, like <li key={id}>. Moreover, any time a group of React siblings are rendered, they need key props, so that React can tell them apart, and work out which ones to re-render after a change occurs.

After adding the text from the error message, as well as the example code and my explanation in a Dendro source, and refining it over an encounter or two, I created the following flashcards:

Q1: How can this error be fixed?

MyReactComponent = () => (
  <ul>
    // ERROR: "Each child in a list should have a unique 'key' prop."
    articles.map((article) => <li> {article.name} </li>)
  </ul>
)

A1: Add a key prop to the <li>

MyReactComponent = () => (
  <ul>
    // id must exist on the article for this to work
    articles.map((article) => <li key={article.id}> {article.name} </li>)
  </ul>
)


Q2: Why do <li> elements need a key prop in React?

A2: For performance
(the key lets React tell siblings apart, so that it can selectively re-render only the ones that need to, instead of re-rendering the entire tree on every change)

With these two flashcards, I am able to remember both how to fix this error, and why React complains about it.


Python

Python Bug #1:  invalid literal for int() with base 10

While trying to cast a string to a number, I got this error:

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  ValueError: invalid literal for int() with base 10: '77.22'

After looking at my code, I saw that I was trying to use int() to cast a string to a number, but that string was a decimal "77.22", so it wasn't able to convert it into an integer. Once I realised that, I was able to replace int(num) with float(num).

After adding the offending code, as well as the error message and explanation into a Dendro source, I was able to create the following flashcard:

Q1: Why is this code failing?

num = input("Please type a number")
print(int(num))

>>> ValueError: invalid literal for int() with base 10: '77.22'

A1: int() cannot convert a decimal like "77.22"
(Use float for decimals, or validate the input first (e.g. check that there are no "." characters))

Was this helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.