2020-02-20 🕐 7 mins Web development
Perhaps steroids is too much saying, but you can definitely get more out of web development. In this post I will explain some of the techniques we use at Sage to develop our web platforms, both front end and back end, which I've later on exported to my personal projects too. Keep reading to streamline your own development experience!
If you are reading this I will understand that you have made your homework and you already have a Git based version control solution, a dependency manager and a module bundler in place. Having the basics covered we can move into more challenging stuff. Be aware that I am using Visual Studio Code, so the solutions I provide are based on that particular IDE. If you prefer other choices, you will have to investigate the available tools out there, but the concepts are still applicable. That being said, let's rock and roll 🤩
Regardless your project size and complexity, having meta data about your code will help it being more descriptive and will allow you to run some compilation checks, using awesome libraries such as Typescript. A very cool aspect of using Typescript with an appropriate IDE is that you get a list of all the attributes and methods available in an object when you type, a feature also known as Intellisense. Once you try it, you will never be able to develop without it again!
Don't lose a single minute more writing semicolons, replacing double quotes with single quotes or arguing with your collegues about how to format ternary expressions and lines maximum length. Put a formatter that integrates with your IDE in place and it will save you priceless amounts of time while enforcing a standard code guideline.
Prettier is a popular opinionated code formatter that will take care of formatting for you. It allows you to configure a few parameters (e.g. maximum line length) but, as it is opinionated, cannot be very customized (which will save you stupid dicussion with your teammates). You can either run it from the command line or use the VSCode extension to automatically format every file each time the file is saved.
Static code analysis that will catch suspicious code (e.g. floating promises) and will enforce the best practices (e.g. functions maximum number of lines). eslint is a great linting tool, which can be highly customized and manages to automatically fix certain types of issues. With a bit of additional confugration it also supports Typescript language, which makes it an ideal candidate to replace the deprecated tslint.
So far, words are the most useful concept when it comes to communication between humans. If you want your code to be descriptive, you must avoid variable names such as el, doc, i and use words with actual meaning: element, document, index. And in case you are already paying extreme attention to variable names, even the most literate software engineer introduce typos when they code.
To help us being consistent in the practice of typing meaningful names, we have the amazing Code Spell Checker tool. It will point out invalid words and typos, and it also recognizes the camel case convention so it will understand aNameLikeThis. In addition, it allows defining a white list of words that will not be considered in .vscode/settings.json, for specific software/project words that cannot be found in an english dictionary.
That's it for now! The concepts are not rocket science, but they greatly help me feeling comfortable when working on a project. Bring them in and forget about styling code, writing typos, and searching in the docs for the available members in objects. Discover how to make your development experience even better in the second chapter of this series 🍾🚀 (coming soon to the best theatres). See you in the next post!