What Tools Does Every Web Developer Need To Have/Know?
Tags: beginners, webdev, tooling
Published: 2021-08-10 14:59:15

This week, we're going to step away from languages and frameworks, and talk about the tools every developer needs to have at the ready. And while a lot of these tools will be universal, this article is written with the assumption of JavaScript-heavy development, so you might need NuGet for package management if you're a C# developer instead of npm, to cite an example.

## A Laptop

A good laptop is the most important tool a developer can have. You don't need a fancy or expensive machine when you're first getting started, but you should keep certain things in mind:

- I would recommend avoiding a machine with a Linux OS unless you're already very comfortable with Linux setup/config. 

- I used Windows machines for a long time (until switching to a MacBook Air last month), and they're mostly fine, but there are some caveats with them in the form of needing to learn a separate command line tool (or having to install a Linux command line and getting that configured to work with your file system), or difficult/impossible installations of certain tools like Rails or Docker. Some folks have said that the [Windows Subsystem for Linux](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux) has solved these issues, but my personal experience with the WSL was that it made everything buggier and unstable to the point of Windows being unusable with it installed.

- You will ideally want a certain amount of power to build and compile things more quickly, but don't feel like you need to go overboard and get a gaming rig. You should at least make sure that you have a solid-start hard-drive, as that will give you a noticable performance gain over the alternative. 

## A Text Editor/IDE

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fkps6rn1gh8nfoa6q0w.png)


We have an embarrassment of riches when it comes to helpful tooling, and code editors/IDEs are no exception. You'll have a lot to choose from here, but I would strongly recommend [Visual Studio Code](https://code.visualstudio.com/). Feature-rich, customizable, open-source: there's good reason that VSCode is currently the 800lb gorilla in web development editors.

## Node.js

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nosj51347rhxpik26qsv.png)
 

[Node](https://nodejs.org/en/) is a JavaScript runtime that works outside of the browser. It's primarily used to write back-end JS logic, but I'm including it here because it's an important dependency for...

## npm

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aje9pkskpkm2dlf7ec6w.png)
 

...[npm](https://www.npmjs.com/) is the Node package manager, one of the most important tools used in front-end development with JavaScript. It's used to install packages that range from small utilities to third-party libraries to frameworks like Angular or Next.js. You'll want to keep both npm and Node.js updated to at least the latest stable release, since a lot of bugs and security vulnerabilites can happen when these get stale.

## Git/GitHub

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xm8mg1d7b8so9vuv9sy.png)
 

Modern software development would be impossible without version control solutions like [Git](https://git-scm.com/), and online repository  tools like [GitHub](https://github.com/). While it's necessary that you need to learn Git, you may wind up on a team that uses [Bitbucket](https://bitbucket.org/) or [Gitlab](https://about.gitlab.com/), but if you know any one of these, learning one of the others shouldn't be an issue. 

## Chrome Dev Tools

I can see a very clear "before" and "after" in terms of my productivity to find and fix problems that's tied to my aptitude with the various [Chrome Dev Tools](https://developer.chrome.com/docs/devtools/). This suite of tools that comes with Chrome allows you to inspect code, view errors and warnings, debug problems, view network requests, and more. There are a wide array of features that could take you some time to learn, but the dev tools features that you can and should get up and running with relatively quickly are:

- Inspecting CSS, particularly "Computed" styles.
- Step-though debugging
- Lighthouse audits
- Inspecting network requests. 

An alternative to the Chrome dev tools you might want to consider are the [Firefox dev tools](https://developer.mozilla.org/en-US/docs/Tools), which mostly have feature parity with the notable expection of their [CSS Grid Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts).

## In Conclusion

I hope you found this beginner's guide to development tools helpful. Next time on Minimum Effective Development, I'll have the first installment in a long series based on the [Front-End Developer Roadmap](https://roadmap.sh/frontend)!