Tools I Should Know About Before I Code
There are thousands of tools in the world of technology that others may advise you. How do you know where to start?
Being new to programming, it was difficult for me to weed out this avalanche of information. I found that I am installing extensions that do not really help me in development and often even interfere.
I am by no means an expert, but over time I have compiled a list of tools that have been extremely useful to me. If you are just starting to learn to program, then I hope this article will be a guide for you to some extent. If you are an experienced developer, I hope you learn something new anyway.
In this article, I am going to describe Chrome extensions and VS Code extensions. I know that there are other browsers and other text editors, but I bet that most of the tools are also available for your platform, so let’s not start about our personal preferences.
Now that I am a self-proclaimed web developer, I practically live in my Chrome console. Below are some tools that let me spend less time:
- WhatFont – the name speaks for itself. This is an easy way to find out which fonts your favorite website uses so you can plug them into your own designs.
- Pesticide – Useful for viewing your outer borders
<div>and changing CSS. It was just a lifeline when I tried to learn box-model.
- Colorzilla – Useful for accurately copying colors from a website. It copies the color directly to your buffer, so you don’t have to try to find the right RGBA combination for an infinitely long time.
- CSS Peeper – useful for finding colors and assets used on the site. When you get started, a good exercise is to accurately copy the site, which you find attractive. This tool allows you to look “under the hood” of a site and see both the color scheme and other page assets.
- Wappalyzer – Useful for viewing the technologies used on the website. Have you ever thought about which framework is used for a website or on which service it is hosted? You can no longer search.
- React Dev Tools – Useful for debugging your React applications. It should be noted that it is only useful if you are writing a React application.
- Redux Dev Tools – Useful for debugging applications using Redux. Similar to the previous one – useful only if you use Redux.
- JSON Formatter – Useful for making JSON in your browser look cleaner. Have you ever looked at the ugly canvas of JSON, trying to understand how deeply embedded the information you need? Well, now you spend only 2 hours instead of 3.
- Vimeo Repeat and Speed – Useful for speeding up Vimeo videos. If you watch video tutorials like most web developers, you know how convenient it is to use playback acceleration of 1.25 times. There are also versions for YouTube.
Extensions VS Code
Visual Studio Code is my choice.
People love their text editors, and I am no exception. However, I bet most of these extensions work no matter which editor you use. Check out my favorite extensions:
- Auto Rename Tag – Automatically rename paired HTML tags. You have created a tag
<p>. Now you want to change it, as well as its closing tag,
</p>to something else. Just change one. Theoretically, it improves your productivity by 2 times.
- HTML CSS Support – CSS support for HTML documents. This is useful for getting clear syntax highlighting and code completion, so CSS only makes you want to quit writing code just a couple of times a day.
- HTML Snippets are useful snippets of code. Another nice time saver. Combine it with Emmet, and you hardly have to type real HTML again.
- Bracket Pair Colorizer – Adds color to parentheses to simplify the visualization of blocks. Convenient for all common mistakes when you have not closed the bracket somewhere.
- ESLint – integrates ESLint into Visual Studio Code. Handy for getting error tips when writing code. Depending on your configuration, this may help maintain a good code style.
- Guides – Adds additional guidelines to the code. Another visual cue to help make sure you close the brackets correctly.
- Git Lens – makes it easy to see when and by whom changes were made. It’s always nice to blame a specific person that the code has broken, and this is not your mistake.
- Path Intellisense – autocomplete file path. It is very convenient for importing something from other files. Simplifies file tree navigation.
- Prettier is an automatic code formatter. Forget about the days when you had to manually edit padding and make things readable for people. Prettier will do this for you much faster and better than you ever could. For this, I can not vouch, of course.
- VSCode-Icons – Adds icons to the file tree. If you look at your file structure, you will hurt your eyes. This thing can help. For almost any type of file, displays an icon, which makes it easier to recognize what you are looking for.
You probably have your own set of tools that are needed for your development cycle. Hopefully, some of the tools I mentioned above can make your workflow more efficient.
However, do not fall into the trap of installing every tool you come across before learning to use the ones you already have, as this can be a huge waste of time.
I encourage you to share your favorite tools in the comments below so that we can learn together.