I Wish I Had Known About These Tools When I Started Coding

There are plenty of tools in the computer sector that people will tell you to utilise. What are you meant to do if you don't know where to begin?

This deluge of knowledge was too much to go through for someone who had only recently begun coding. I found myself adding extensions that didn't truly help me with my development cycle, and in some cases, rather hindered it.

I am far from an expert, but I have developed a list of tools that have shown to be quite beneficial to me over time. If you're just getting started with programming, this should be helpful. Even if you're a seasoned developer, there's a good chance you'll pick up something new.

This post will be divided into two sections: Chrome Extensions and VS Code Extensions. I'm aware that there are other browsers and text editors available, but I'm ready to guess that most of the tools are also accessible for your platform of choice, so let's not get into a theological debate over our personal preferences.

Jump about as much as you like.

Chrome Extensions

I almost live in my Chrome console now that I'm a self-proclaimed web developer. Some tools that help me spend less time there are listed below:

• WhatFont — It's all in the name. This is a quick method to figure out what fonts your favourite website uses so you may use them in your own projects.

• Pesticide — Useful for altering CSS and viewing the outlines of your s. This came in handy while I was attempting to figure out how to use the box model.

• Colorzilla is a programme that allows you to replicate precise colours from a website. This saves you time by copying a colour to your clipboard instead of wasting time attempting to find the proper RGBA combination.

• CSS Peeper – Useful for inspecting a website's colours and assets. Cloning out websites that you think seem interesting is a wonderful practise, especially when you're first starting out. This allows you to have a closer look at their colour scheme and see what other materials they have on their page.

• Wappalyzer – This tool can help you see what technologies are being utilised on a website. Have you ever wondered what framework a website is built on or what service it's hosted on? You've come to the right place.

• React Dev Tools – Debug your React applications with the React Dev Tools. It's worth noting that this is only useful if you're working on a React project.

• Redux Dev Tools – A set of tools for debugging Redux-based apps. It's worth noting that this is only applicable if you're using Redux in your project.

• JSON Formatter – Useful for making JSON in the browser seem cleaner. Have you ever gazed into an obnoxious JSON blob, trying to figure out how deeply nested the data you need is? As a result, it will only take two hours instead of three.

• Vimeo Repeat and Speed — This feature can be used to speed up Vimeo films. If you're like most web developers, you know how useful it is to view video lessons at 1.25 times the normal playing speed. There are other YouTube versions.

VS Code Extensions

My preferred editor is Visual Studio Code. Text editors are popular among users, and I am no exception. However, I'm prepared to wager that most of these extensions will work with whichever editor you use. Take a look at some of my fave extensions:

• Auto Rename Tag – Renames linked HTML tags automatically. You've made a tag. You now wish to modify it, as well as the surrounding area. Change the tag to something else Simply replace one and the other will take its place. Increases your productivity by a factor of two in theory.

• CSS Support for HTML Documents — CSS support for HTML documents. This is excellent for obtaining some nice syntax highlighting and code recommendations so CSS only makes you want to stop working once or twice a day.

• HTML Snippets – A collection of useful code snippets. Another useful time-saving tool. When you combine this with Emmet, you'll never have to type actual HTML again.

• Babel ES6/ES7 — JavaScript support Syntax colouring in Babel. If you're using Babel, this will make figuring out what's going on in your code a lot simpler. This is useful if you want to experiment with JavaScript's newer capabilities.

• Bracket Pair Colorizer – Colorizes brackets to make them simpler to see. This is useful for those all-too-common problems when your brackets or parentheses were not properly closed.

• ESLint — Adds ESLint support to Visual Studio Code. This is useful for obtaining issue clues while you write your code, and depending on your setup, it can also assist encourage proper coding style.

• Guides — Increases the number of guide lines in the code. This is just additional visual signal to ensure that your brackets are properly closed. If you haven't noticed, I'm a visual person.

• JavaScript Console Util — Makes console logging easier. If you're like most developers, you'll end up logging to the console as part of your debugging process (I know that we are supposed to use the debugger). This tool makes writing useful console.log() statements a breeze.

• Code Spell Checker – Spelling checker that takes camelCase into consideration. Fat-thumbing a variable or function name is another prevalent cause of problems. This spell checker is good at accounting for the way we write things in JavaScript and will look for rare terms.

• Git Lens – Allows you to quickly view when and by whom changes were made. This is useful for assigning blame to the proper person when code is broken, as it is never your fault.

• Path Intellisense – Autocomplete for file paths. This is quite useful for importing data from other files. It's a snap to navigate your file tree with it.

• Prettier – Prettier is a code formatter that automatically formats your code. Forget the days when you had to manually indent your code to make it readable for humans. Prettier will complete this task for you far more quickly and effectively than you could on your own. I can't say enough good things about this book.

Final Thoughts

You most certainly have a collection of tools that are critical to your development process. Hopefully, some of the tools I listed before will help you improve your process.

However, do not fall into the trap of installing every tool you come across before learning how to utilise the ones you currently have, since this may waste a lot of time.

Please share your favourite tools in the comments section below so that we can all learn from each other.