contributing_spacing

Imagine you are reading a cience book or magazine, now imagine it doesn't have any padding, visual hierarchy or labels. It would be hard to find anything at all if you want something specific, that is what happens in most codes out there, that's why we want it to be different. Following the base ideas of gestalt, we created two base principles to handle our code:

Element hierarchy

When working with code, we want similar lines to be stick together and different ones to be put aside. That's what element hierarchy is all about. For example:

Without visual density consideration

const {id_user, id_category} = request.params;
const user = await User.findOrFail(id_user);
if (id_user !== request.auth.id_user) {
    throw new Error("AUTH_FAILED");
}
const category = await Category.findOrFail(id_category);
if (id_user !== category.id_user_created) {
    throw new Error("RESOURCE_NOT_FOUND");
}
category.label = request.fields.label;
await category.save();
return response().data(category).status(201).headers({yourHeader:"hi"});

With visual density consideration

const {id_user, id_category} = request.params;

const user = await User.findOrFail(id_user);
if (id_user !== request.auth.id_user) throw new Error("AUTH_FAILED");

const category = await Category.findOrFail(id_category);
if (id_user !== category.id_user_created) throw new Error("RESOURCE_NOT_FOUND");

category.label = request.fields.label;
await category.save();

return response().data(category).status(201).headers({yourHeader:"hi"});

Visual density

When coding, we can make our code end up looking heavier than it actually is, making it harder to read. We can prevent that with comments and empty lines.

Without visual density consideration

const id = "du9h7893rth78efhsd";
const user = await User.find(id);
const comments = await user.comments.query().where("date_updated", DateTime.now()).get();
const list = comments.paginate();
return response().data(list).status(200).json();

With visual density consideration

// Fetch user
const id = "du9h7893rth78efhsd";
const user = await User.find(id);

// Data
const comments = await user.comments.query().where("date_updated", DateTime.now()).get();
const list = comments.paginate();

// Format response
return response().data(list).status(200).json();

Just a heads up, we are going to talk about more about comments here, so before any complain, check everything about them there. Now, it's the same code, but with more lines and comments, yet it's easier to find each part of it, because it's grouped together in a way that similar parts are always in the same group. This can look silly in a snippet of code, but when considering a heavy logic file, even it gets more lines, it will end up easier and faster to read.

When deploying code, we remove those extra lines and most of development code. So don't worry about extra bytes since they won't exist.