A basic checklist for an awesome code.

A good practice is to review your code before you merge or push it. After working for a while with coding, I developed this checklist. If you check something else, please add on comments.

About the code.

Can you read the code?

Code does not need comments; it explains itself. Is your code like that? Or will you have a headache to understand it in a few months?

function DoSomething(a, b) {
  return a + b; 
}
////// VS //////
function Sum(a, b) {
  return a + b;
}

Are variable names well understand?

It is one of the biggest challenges of all developers, give the right name for variables. But the easy tip is to answer: “Is the name the content of this var during all the code execution?”

var a = 'John';
var b = 'titor';
////// VS //////
var firstName = 'John';
var lastName = 'titor';

Can this function/method be smaller?

It is a good practice and also will improve your code readability to have smaller functions. So if you can break a function into two or three, it is highly recommended you to do it.

function calcFinalPosition(speed, time, startPosition) {
 return startPosition + speed * time;
}
////// VS //////
function calcFinalPosition(speed, time, startPosition) {
 return startPosition + calcWalkedSpace(speed, time);
}
function calcWalkedSpace(speed, time){
   return speed * time;
}

Do not use any!

If you can avoid using any, please, do it.

What can you delete here?

Sometimes during the coding a refact id needed and as a result, some pieces of code become unused, so take a bit of time and delete it.

Even after lint, you need to check the indentation!

The lint will help you to find the big problems of indentation, but there are parts of your code that you will need to have your own rules, for pipes for rxjs are a good example. And don’t forget to check your HTML.

Reduce your code size!

You must check if there is a possibility to reduce the size of your code, good habits are to use:

• ternary operator

<p>
   <ng-container *ngIf = "car">Nice car!</ng-container>
   <ng-container *ngIf = "car">You need a car</ng-container>
</p>
////// VS //////
<p>{{ car ? 'Nice car!' : 'You need a car'}}</p>

• string templates

let text = 'Nice ' + brand + 'car';
////// VS //////
let text = `Nice ${brand} car`;

• HTML functions

function changeStatus() {
   this.isClose = !this.isClose
}
<a (click)="changeStatus()">X</a>
////// VS //////
<a (click)="isClose = !isClose">X</a>

About the quality.

Did you test it on other devices?

Maybe it is not your work, but to be a good developer is always good to give a quick check on mobile as well, and if you have time try to check at least on an IOS and an Android device.

Does this change affect somewhere else?

Is there any other place that can be affected by this change? Where is this component used? Is there any further integration that can be involved?

Did you run the lint?

One crucial step is to run the lint; there is a default lint that comes with your angular project, but you must build your own rules, you probably will spend some time doing it, but your code will massively improve with it.

Did you create /run the unit test?

One essential thing that all the community agree is the importance of the unit test. It is a way to document the code and also to make the refactor easier in the future.

it('should return false when the number is negative', () => {
  // code that return a false
});

Other aspects.

Can the design be improved?

It is always good to give a quick recheck on the designs. Take a look in alignment, if everything is centred and so on.

Simplify the style

If you are using sass or less, remember to make it simple and easy to maintain, try to create vars for colours and size, also remember to use the right specificity, that can be overwritten later on if needed.

.title {
  color: black;
  padding: 1rem;
  height: 3rem;
  font-size: 1rem;
}
////// VS //////
$title-color: black; 
$title-height: 3rem; 
$title-padding: 1rem;
.title {
  color: $title-color;
  padding: $title-padding;
  height: $title-height;
  font-size: $title-height - 2 * $title-padding;
}

Communication is important!

If you work in a team, don’t forget to follow your process, it can be an e-mail, a test note and so on, but remember to let everybody know that your task is ready.

Orthography and grammatic! It is also your responsibility.

Take a moment to review the grammar and orthography; you don’t need to be Shakespeare but remember to check:

• Comments
• Var name
• Commit
• HTML
• CSS class names

Git time

On git time remember to check your commit, it must be a unique well-written message, something meaningful, so you will have a history one your repository.

git commit -m "code v1"
////// VS //////
git commit -m "Changing the color of our main title"

Do you do some other check on your code? Lemme know on the comments.