14 April 2019

#014 - Adopting a JavaScript Style Guide

I have my own style and layout that I like to express myself when writing code. However, I will use Beautify, which is a JavaScript linter to stylise code.

For the time being, I am using Beautify over Prettier, as I like to work with 4 spaces when I tabulate my code. I recognise I can edit the finer settings within Prettier to suit my requirements if need be, but I'm also aware that there are programmers who favour the 2-space format. So far, Beautify works for me.

Nonetheless, as a software developer to be, I am forcing myself to adopt a formal style guide. Because I am learning fresh with Treehouse - amongst other online providers like freeCodeCamp and soon to be Frontend Masters - it is fair to say that I am more focused in learning good programming standards as I relearn how to code.

I know styling and formatting code is rather subjective, which is fine - but I foresee two primary reasons for using a formal style guide.

Firstly, I want to learn of the new technical standards using the latest web technologies that I am writing for. I mostly refer to the MDN (Mozilla Developer Network) to learn the new web standards - alongside W3C (The World Wide Web Consortium), but I wish to adopt a strict styling when I code through my own projects.

Secondly, I wish to pretend that I am working for a larger organisation, because if I am to code with other peers and colleagues, whether I am giving or receiving feedback in a code review setup, or in situations where I need to do pair programming with another colleague, then I want to adopt the same style standard as the rest of the team. I would like to think that if my coding style matches (or is similar) to that of popular JavaScript linters like Prettier and Beautify, then at least my code will be readable by others - even more so, if I choose to open source my code with others.

In recent months, I have been using the Airbnb JavaScript Style Guide.

It just so happens that Airbnb have documented style guides for CSS-in-JavaScript, CSS & Sass, React and Ruby. Plus, because they are based in Silicon Valley and the company is ever-expanding their global business (and codebase), they will obviously be adopting to new web standards and technologies a whole lot quicker than your average Joe Developer - never mind a regular company with a conservative team of software developers.

So far, I have found it beneficial to be more mindful when using modern web standards when programming in JavaScript. I also value the importance of naming conventions and I have been exploring BEM (Block Element Modifier), which is a useful methodology when naming front-end code that is easier to read and understand. The unique benefit is the ability to scale - should you see your project grow arms and legs in fanciful ways.