5 TIPS TO WRITE A BETTER CODE
Happy New Year to my gorgeous friends on the internet (a little bit late for new year :D ) Grady here back again to help you code better. Being a programmer, your task is not just to write code that works. It should also be readable by your team members, fellow programmers or just by yourself if it is going to be worked on later.
So without wasting any more time let me give you the thing which I needed the most when I had started coding.
1 — KEEP YOUR INDENTATION CONSISTENT
Styling your code and making it look prettier so that it is readable is the most important thing you need to keep in mind while writing a code. So for those who do not know what indentations are, “Indentations are a fixed amount of spacing that is manatorily kept in a code so that they reflect a specific meaning”. Keeping minimal indentations and not over-sapcing your code can be pleasing to the eye and make it more attractive to read.
An example of bad or no indentation :-
int main() {printf(”Hello World”);return 0;}
This can be really hard to read and might even annoy the person reading this.
An example of good and conistent indenation
int main() {
printf(”Hello World”);
return 0;
}
In this type of indentation the reader knows what to read next and does not have to look for the next line of code.
2 — MAKE COMMENTS
I honetly don’t think many of you are really commenting out your code. It really helps to read them later, for others and even for yourself. For example if you are writing a code for some big function and you could not complete it in the given time for some reason and then when you approach that code later it might happen that what were you writing in the first place. Codes without comments may look neat and clean but it may be a nuisance to anyone who reads the code later.
An example of no comment code :-
element.addEventListener(’click’, () => {
window.open(’https://example.com’);
});
In this case if someone reads this, the person might not get what is going on here in the very first moment.
An example of commented code
/* adding a listener on the element to open a different page in a new tab */
element.addEventListener(’click’, () => {
window.open(’https://example.com’);
});
In this case the person reading this would already be knowing the purpose of the code.
3 — MAINTAIN A NAMING SCHEME
Maintaining a naming scheme really helps to organise your code and make it prettier. Using random letters in random cases like some are capital, some are small, or naming a variable as “MyVarIabLe” is extremely annoying and painful.
There are 2 most commonly used ways of naming
1 — camelCase — in this case the first letter of every word is capitalized except the first word. Generally used in naming variables
An example of camelCase :-
const myVariable;
2 — Underscores — in this case every word in the name is seperated by an underscore. Generally used for naming functions
An example of Underscores :-
add_two_numbers = (varA, varB) => {
/* function body */
}
4 — DON’T REPEAT YOURSELF
Writing smartly and avoiding as much repetition is the key to writing perfect code. Imagine a scenario where you want to create 5 elements with the same styling. You don’t have to repeat the styles part 5 times. Lets understand this with an example.
Suppose you want these 5 elements to look exactly like each other. For example you want them to be red
<div class=”one”>Hello</div>
<span class=”tow”>Hello</span>
<a class=”three”>Hello</a>
<p class=”four”>Hello</p>
<section class=”five”>Hello</section>
Now to style these you would probably do this,
.one {
background: red;
}
.two{
background: red;
}
.three {
background: red;
}
.four {
background: red;
}
.five {
background: red;
}
Exactly this would make you look like an absolute idiot.
Instead you can be a little smarter and add one more class to each of the elements and save over 10 lines of code
For example
<div class=”one red”>Hello</div>
<span class=”tow red”>Hello</span>
<a class=”three red”>Hello</a>
<pclass=”four red”>Hello</p>
<section class=”five red”>Hello</section>
For styling you just have to do this,
.red {
background: red;
}
So by this any element with a class of “red” will have a red background.
5 — AVOID WRITING LONG LINES OF CODE
This is not the last but yet the most important tip I would like to share. Please do not ever write long lines of code. It may make you look cool and impress your friends but it will only give more problem to whoever reviews your code, or might even get you yourself angry.
An example of unneccesarily long code :-
document.querySelectorAll(’.class).addEventListener(’mouseenter’, function() { document.querySelector(’p’).textContent = “Hello World” });
An example of organised short code :-
let class = document.querySelectorAll(’.class’);
let paragraph = document.querySelectorAll(’p’);
class.addEventListener(’mouseenter’ () => {
paragraph.textContent = “Hello World”;
});
As simple as that.
So by now I hope you might have learned something new and maybe started improving yourself and your code. Once again happy new year to you all out there and thank you for your huge supports.
