Productivity Tip when coding and debugging — pause and try to understand
Recently I have been working on a project using Angular 6, Angular Material along with Angular Translation Service and a bunch of custom made components. The big task I find with Front End Web Development is implementing the way data is retrieved, displayed and saved particularly with enhanced UX such as drag and drop. These multitude of tasks add complexity to otherwise simple CRUD tasks.
While coding or debugging, I often feel stuck on errors especially when I am tired and/or after an intense programming session or whenever I lose the flow state. The mistake I find many developers like myself do is to persist trying to solve the issue without understanding why.
For instance, as I was working with a new set of features requiring the use of Angular Material, after changing my codes, the translation suddenly stopped working. I just had a break. I forgot what I was doing prior to that. I was no longer in a flow state.
I tried looking for usual issues in the translation service injected into the class, the view getting updated before the data is fetched and checking the translation document. In terms of productivity and context switching, I opened these files in my workspace to check the error.
However, I instead decided to refer to the console as it would be too much work for me. I was working on the UI. Going back to the translation issue would require additional time and effort. There was a JavaScript error on top of the stack trace that blocked the translation from happening.
As the codes below illustrates, Angular’s default double binding was in use and it checked for report.salary object for info property. But, salary was undefined at the time of render, thereby resulting in such error.
I had two options to address this issue :
- Define report.salary = {}
- Use Elvis Operator in the template, [ngModel]=”report.salary?.info”
Indeed, the error was no longer present and the translation worked as expected.
