When I started in the code world, I was so happy typing every single character. Nowadays I realized that I was rewriting the same sentences during a regular workday. Moreover, when I switch from one project to another one, I realized I was solving similar problems. Sometimes I didn’t remember the solution, so I was forced to get back Google and visit those purple results to find answers to the same questions.
In this post, I’ll be talking about several automation tools that will help you to start thinking more with fewer keyboard typing.
Let’s start with some definitions.
Before start explaining everything related with code automatization, some concepts need to be clarified. This will allow us to talk the same language.
Boilerplate, this term refers to a set of static code that can be used as a starting point. It’s similar to copying and pasting some code from the framework documentation and start creating new features. As examples of boilerplate tools you have the command line tool for Angular (ng new myApp), React (npx create-react-app my-app) and VueJS (vue create my-project).
Snippet, this term is similar to boilerplate but for a small amount of code. It helps developers type less. Some ID’s give support for this feature, check these useful snippet generators: The visual studio code snippets plugin and the live templates of the JetBrains team.
Linter or lint, in software it refers to a set of analyzing tools that alert the user about possible problems with their source code during the coding process.
Automation, it refers to the process of generating tools that execute tasks without the help of human intervention. When we are creating code, this process should be automated using an ID plugin or a command line tool.
How to begin
The first step to start automating a process is to define what needs to be improved. This post is about code, so the things that could be automated are the following:
- The code standards. Are you bored of reading the project documentation about the
;or if you need a line break before each{. - The bootstrap for a new file. Are you tired of writing the same lines when creating a new javascript class?. Each project has a different architecture, but everyone follows designs patterns.
- The typing repetition of the same piece of code. What about a dynamic snippet to make that cool alignment?. Do you need to create a store like service in Angular?. What if you need a javascript closure?.
- The command line commands. How many times did you write:
$ cd /documents/my-projects/javascript,$ git status,$ git checkout origin master,$ git pull origin master?. Besides, how many times did you make a typo while writing in the console? - Finding the solutions to known problems. Did you solve something in the past that now you forgot?
With those points in mind let’s start finding a solution for each one.
The code standards
This is my favorite part. Which should be the best style guide for each project?. Most of the projects like to follow the guidelines described by Google, Airbnb or a mix with some extra custom rules. Therefore, how do you automate this process?
The first approach here is to write all those rules into a configuration file of a linter tool. It allows us to see some errors directly in the ID while typing. Most developers use ESLint as a linter tool.
Linter tools could be enough. However, What if you want to have a standard formatting rule in all of your projects?. Prettier is an automation tool that rewrites all the code according to the formatting rules described in a configuration file. It gives support for most of the development editors and can be executed at any time.
The rules defined for the developer team of Google and Airbnb are public through their GitHub repositories. If you want to take a look or use it as a boilerplate in your own project, take a look here and here.
The bootstrap for a new file and the typing repetition of the same piece of code
I merged this two points because the solution of both could be created with the same tools.
Let’s begin with the command line tools created by the team of each framework. Those tools allow developers to generate new javascript classes according to the schema suggested by the provider. It could be good enough, but come on, who knows a project that completely follows that schema?. That’s why I think each developer should dedicate some time automating the code generation for their projects.
One approach to start automation your code are snippets. Let me explain how snippets work.
- First, you need to identify one portion of code that you repeat every time.
- Second, you select the snippet tool of your preference.
- Third, you create the template.
Let’s create one:
Suppose you found the reduce method is a common task of your project. Let’s create a snippet code for this task using the live template of IntelliJ.
As you can see you define the required variables (inside $var$), specify the static text and generate the desired behavior after you fill in all the variables. Cool!
As an example of those custom schemas, I want to refer the work of my friend Edwin, he creates a set of live code templates for unit testing of Angular applications. In the same way, John Papa creates a nice visual studio code plugin focusing on Angular development.
The command line commands
All developers need to use the command prompt. After you open it, the first thing you do is navigate to the desired folder. This could be easily automated with an Alias.
Let’s take a look:
Suppose you want to navigate to company/projects/my-project folder.
Inside your .bash_profile add the following lines.
alias goToProject="cd ~/company/projects/my-project"
Next time you open the bash and type goToProject, it will navigate to the desired folder.
Do you hate the graphic interfaces and are in love with the use of Git at the console?, simply add the following lines to your .bash_profile and your love will grow (for more information go here.)
As an extra feature, if you want to have the name of the branch next to the path of the file, you need to add the following code to the .bash_profile
Finally, What about the typos?. How many times did you write:git brnch or $ phuton. There is a cool plugin called “theFuck”. It helps fix your typos by typing fuck. Awesome!.
Finding the solutions to known problems
Some people like to navigate through StackOverflow thread each time they have a problem. I found it was a repetitive task. To find a solution to this problem, I stored all those URLs in a single spreadsheet with a small description. I have to be honest, that table was a mess after the first hundred links.
Doing a bit of research, I found different services (JsFiddle, JsBin, plunklr, Stackblitz and Codepen) to generate code and previsualize it on the browser. I pick Codepen as my Vanilla projects repository and Stackblitz for my Angular and Typescript projects. Those tools help me not only replicate the problem but visualizing a working solution. For example, I always forget the difference between currentTarget and target. So I created this:
Next time I need to remember it, I just go to my dashboard on Codepen.
Here you can find different projects I created as my personal library. 🍻
Conclusion
Every time you write something twice, please be lazy and automate your code.
Thanks for reading, please follow me on Medium and Twitter or send me a connection request on LinkedIn.