Introduction

Coding in any language needs some type of order. Strangely enough, not all developers truly understand how important it is to maintain logical naming conventions, a lack of excessive whitespacing and plenty of comments where needed!

This post is inspired by the content posted by Shannon Beach on LinkedIn

Whitespacing

I've spoken with senior/lead developers on LinkedIn who seem to have a few horror stories concerning whitespacing. If you're unfamiliar with what it is, it's literally the space between blocks of code. Here's an example:

const someFunction = (params) => {
    let someVariable = someAssignment.goesHere(params)
}
    <---- THIS IS WHITESPACE ----> 
    <---- THIS IS WHITESPACE ---->
const anotherFunction = (params) => {
    return someFunction(params)
}

Separating blocks of code by a single whitespace is completely alright -- even encouraged for readability. However, if you are separating these blocks by 10 or even 15 lines of whitespace, this is not ok. One specific connection of mine mentions that they will immediately stop reading and drop an applicant for this alone. Excessive whitespacing is just a horrible idea. It is best to avoid it at all costs.

Naming conventions

What we name our functions and methods matters. The point being that you want to tell a story. If you have a method that is meant to gather and count how many apples you have in a basket, there is a story that comes along with it. You'll grab a basket from your belongings, you'll travel to an apple tree, you'll fill your basket and proceed to count how many you have. How could we translate this process into a functional story?

How does this look?

let appleCount = 0;

const beginApplePickingFunction = () => {
    grabBasketFromGarage();
}

const grabBasketFromGarage = () => {
    walkToAppleTree();
}

const walkToAppleTree = () => {
    pickAppleFromAppleTree();
}

const pickAppleFromAppleTree = () => {
    placeAppleInBasket();
}

const placeAppleInBasket = () => {
    appleCount++;
    returnApples();
}

const returnApples = () => {
    return appleCount;
}

beginApplePickingFunction();

Without even seeing detailed code, we are separating each action by concern. You know exactly what is happening and you might even know which function to check when something doesn't go right. Why? Because it tells a story. If you can tell a story with code regardless of its inner complexity, you make the lives of your entire team easier.

Comments

Commenting your code is like the sweet nectar for understanding code bases. Often times we can find more complex actions and patterns within a block of code. Without comments, we would likely have to study each block of code until we find what we are looking for. With comments, you might still need to study a block of code to know what it could be doing wrong, but now we know exactly which block of code as its functionality is clearly define by the story its comment is illustrating.

Conclusion

I hope that this blog helps some of you out there! Whether you're a new or seasoned dev, you can either use this or send it to someone you feel might benefit from this information. 😉 All the best, my friends. Leave a comment if you've got something else you'd like to add!