Technical debt

tech-debt.md

Strategy

Every time you make changes to a file for a ticket / bugfix, you clean up some of the basic technical debt:

• Dead / unused code
• Commented code
• Fix linting issues
• Remove any if using TypeScript and use types
• Seperation of concerns (Vue only)
• Remove duplicate code

Dead code

Code that isn't used anywhere and can be safely removed. This can exist in different forms:

• Functions or variables that aren't referenced anywhere
• if (false) or v-if="false" or if (true) or v-if="true"
• Unused CSS
• console.logs => if you want logging, you should use logstash or any other decent platform

Commented code

Code that has been commented because it's not relevant anymore, this should be removed. The reason is because we are using version control (git) and we can always look it up in the history.

Interesting long read about the topic: https://kentcdodds.com/blog/please-dont-commit-commented-out-code

Fix linting issues

We have eslint in our codebases because this is added by default for every vue-cli project. We should fix the issues that it's mentioning because they can help us avoid bugs / unexpected behavior.

Remove any if using TypeScript and use types

If we're using TypeScript then we should use it properly. The first way to use it properly is to avoid any and use types.

Seperation of concerns (Vue only)

Avoid inline styles, for example <span style="font-weight: bold">. Either use vuetify classes(preferred) or write your own.

Remove duplicate code

If you notice patterns, code being rewritten in multiple places, you can try to extract it and reference it in the places that you need. If it's used cross project, you could put it in the @bluecorner/shared package. https://bitbucket.org/bluecorner-development/shared/src/master/ An example is form validation which should be the same throughout the organisation.