The Schoolboy Error

Over analysing a silly mistake with the intention of avoiding a repeat

The other day, I started a new project written in Angular 2. I decided to use the angular-cli tool, which turned out to be a very good choice indeed. Anyway, I set up the project using the tool , then , once I got everything working, I add a component and reference it in the markup:

<my-component></my-component>

I then proceeded to do some other nonsense , but when it came to running it the bloody thing wouldn't load! Did I forget something ? Some , import ? Something I failed to inject ? After about an hour of head-scratching, I see this:

@Component({
 moduleId: module.id,
 selector: ‘app-my-component’,
 templateUrl: ‘my-component.component.html’,
 styleUrls: [‘my-component.component.css’]
})

The selector is app-my-component not my-component.

Now at this point you may be wondering what the sod triggered me to write an article about a common mismatched naming blunder, well the problem is, I do this kind of thing a lot. I also see many respected colleagues make these sorts of schoolboy errors as well, and I want to get to the bottom of it.

You see I have been reading Mastermind by Maria Konnikova, and her lessons on thinking through the allegory of Sherlock stories have inspired me to reflect on these absurd cognitive blunders so that I may avoid them in the future.

Decoding stupid

So , let’s get to the bottom of this little problem shall we? One of the things I remembered when I spotted the problem was that I had actually made a note of the fact that the selector would need to be changed to fit the tag that I had typed. Something , some unaccounted for event , had occurred that had caused me to circumvent my plans and go straight to running the code, and then proceed to “debug” for the next hour.

I had been distracted, not necessarily by someone else , maybe my own mind wondered ,maybe I decided to do some implementation first. What I knows is , I had a clear path of what to do in my head, as sort of unconscious TODO list:

• Write the markup
• Create the component
• Update the selector

I made this plan in my head, it was a great plan , but it failed because I was distracted.

The fix

The conclusion we may feel inclined to here, is that if the problem is distraction, avoid distraction. Mandate a flow time , use the Pomodoro technique… I have to disagree with that. Distraction is an inevitable thing, and those techniques serve me well in lowering distraction, but these techniques don’t solve the the problem for what happens when I am distracted. And besides , I can still be distracted by the very task I am performing , which is I am sure what happened here.

Instead I propose having a recovery strategy, this incident happened about a week ago , yet I still remember the exact set of steps I needed to perform. If I had taken to mind the fact that I got distracted , and replayed my TODO list in my head , I will have solved the problem in less than a minute. Aha! I would have exclaimed , I forgot to rename the selector! In fact come to think of it , I may not have even noticed that anything was wrong , because I would have fixed the ‘problem’ before it even became one.

So , the next time I find myself going off my planned path , or I am pulled away from a task before coming back to it , I will remember to go through my mental TODO list, and make sure it is complete, before moving on.