We’ve all felt that we’re lost at the beginning of pretty much anything. And that includes programming. That’s why I put down a list of tools to know before you start coding.
I had compiled this list about two years ago, shortly after I started programming, and I found that is was helpful to a lot of folks, so I wanted to resurrect it.
While the way I do some things has changed a lot in the last couple of years, these all helped me a lot when I was just getting into web development, and hopefully, they might help you too!
Here is the list of the tools to know before you start coding.
Now that I am a self-proclaimed web developer, I practically live in my Chrome console. Below are some tools that allow me to spend less time there:
WhatFont — The name says it all. This is an easy way of finding out the fonts that your favorite website is using so that you can borrow them for your own projects.
Pesticide — Useful for seeing the outlines of your HTML elements and modifying CSS. This was a lifesaver when I was trying to learn my way around the box-model.
Colorzilla — Useful for copying exact colors off of a website. This copies a color straight to your clipboard so you don’t spend forever trying to get the right RGBA combination.
CSS Peeper — Useful for looking at colors and assets used on a website. A good exercise, especially when starting out, is cloning out websites that you think look cool. This gives you a peek under the hood at their color scheme and allows you to see what other assets exist on their page.
Wappalyzer — Useful for seeing the technologies being used on a website. Ever wonder what kind of framework a website is using or what service it is hosted on? Look no further.
React Dev Tools — Useful for debugging your React applications. It bears mentioning that this is only useful if you are programming a React application.
Redux Dev Tools — Useful for debugging applications using Redux. It bears mentioning that this is only useful if you are implementing Redux in your application.
JSON Formatter — Useful for making JSON look cleaner in the browser. Have you ever stared an ugly JSON blob in the face, trying to figure out how deeply nested the information you want is? Well, this makes it so that it only takes 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 handy it is to consume them at 1.25 times the regular playback speed. There are also versions for YouTube.
These are some of the best tools to know before you start coding.
Visual Studio Code is my editor of choice.
People love their text editors, and I am no exception. However, I’m willing to bet most of these extensions work for whatever editor you are using as well. Check out my favorite extensions:
Auto Rename Tag — Auto rename paired HTML tags. You created a <p> tag. Now you want to change it, as well as its enclosing </p> tag to something else. Simply change one and the other will follow. Theoretically improves your productivity by a factor of 2.
HTML CSS Support — CSS support for HTML documents. This is useful for getting some neat syntax highlighting and code suggestions so that CSS only makes you want to quit coding a couple of times a day.
Bracket Pair Colorizer — Adds colors to brackets for easier block visualization. This is handy for those all-too-common bugs where you didn’t close your brackets or parentheses accurately. EDIT: Version 2 now available https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
ESLint — integrates ESLint into Visual Studio Code. This is handy for getting hints about bugs as you are writing your code and, depending on your configuration, it can help enforce good coding style.
Guides — Adds extra guidelines to code. This is another visual cue to make sure that you are closing your brackets correctly. If you can’t tell, I’m a very visual person.
Git Lens — Makes it easier to see when, and by whom, changes were made. This is nice for blaming the appropriate person when code gets broken since it is absolutely never your fault.
Path Intellisense — File path autocompletion. This is super handy for importing things from other files. It makes navigating your file tree a breeze.
Prettier — Automatic code formatter. Forget about the days where you had to manually indent your code and make things human-legible. Prettier will do this for you much faster, and better than you ever could on your own. I can’t recommend this one enough.
VSCode-Icons — Adds icons to the file tree. If looking at your file structure hurts your eyes, this might help. There is a helpful icon for just about any kind of file you are making which will make it easier to distinguish what you are looking at.
Postman — At its most basic, this is an application that allows you to test the different endpoints of an API. You know, that good CRUD stuff. Once you dive deeper into it, you will find it is also incredibly useful for writing up test suites and much more.
Insomnia — This is an open-source alternative to Postman. It appears to have a lot of the same functionality with a slightly lower price tag for their premium packages. Between this and Postman, the choice seems to mostly be a personal preference for the UX. Don’t stay up all night making a decision between the two (I had to, forgive me).
Restlet — If you don’t want to download either of the above, this is an API testing client that is available as a Chrome extension. It even allows the importing of Postman tests and several other formats.
Charles — This is a sweet web debugging proxy that allows you to view all of the information you could possibly want to see about the requests being made between your machine and the internet. It basically turns you into a hacker, allowing you to check your website for security vulnerabilities and such.
Fiddler — Basically the same tool as Charles. Personal preference seems to be the main deciding factor between the two, though both can greatly increase your debugging/troubleshooting capabilities.
Flux — If you’re reading this, chances are you probably spend a ton of time on your computer. Flux is a program that turns the blue light down on your screen as the sun sets, with the hopes of mimicking the day/night cycle and helping you sleep better. Not as good as getting time away from the screen, certainly, but it’s better than nothing!
ConEmu — If you are on Windows and you would like to have multiple terminal tabs, this is an easy, free solution to your tab-related woes. Never again will you have to flip back and forth through entire windows just to look at your different error messages.-
Ditto — You know when you’re trying to copy four separate answers from Stack Overflow and you have to keep switching back and forth from your browser to your IDE? Worry no more. With the Ditto clipboard manager, you can copy-paste your way to victory.
TouchCursor — Programmers of all sorts are notorious for wanting to use the mouse as little as possible. If you find yourself in that camp, then this will be right up your alley
Cmder — I am going to forego my description of this product, as I feel the description on their website is much better — “Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start.” I don’t know about you, but I am a fan of any software that describes itself as “sexy”
Directory Opus — This is basically what Windows Explorer should have been from the start. Opus allows you to dig through your poorly-organized documents almost as if they were well-organized.
Zeal — With over 200 documentation sets to search through, Zeal is an offline goldmine of documentation for the developer who loves to read the documentation so much that they do it even when the internet is out. (Copy-pasted from Dash in the Mac section).
These are some amazing tools to know before you start coding.
Paw — A competitor to both Postman and Insomnia above, Paw is a similar piece of software that feels more like a native Mac application than the others. If you love that Mac feels, this might be the API tool for you.
Dash — With over 200 documentation sets to search through, Dash is an offline goldmine of documentation for the developer who loves to read the documentation so much that they do it even when the internet is out.
Bear — Not directly coding related, but a neat piece of software for taking notes if that is something you do in your day-to-day. I can’t help but wish that this would be integrated with Paw somehow, for pun-related purposes.
Magnet — Okay. Fair warning: This one costs money. If you can afford to dish up the 99 cents, however, I think it is worth it for those tough times when you don’t have access to a second monitor. This tool allows you to easily snap different windows to separate areas of your screen so you can run multiple terminals at once and tell your mom you are a hacker. (They are not paying me for this recommendation, sadly. However, if you are the creator of Magnet and you wish to pay me, please get in touch).
Did we forget something to add to the “Tools to know before you start coding” list? Contact us and let us know!