What Tools Does Every Web Developer Need To Have/Know?

dylanesque

Michael Caveney

Posted on August 10, 2021

What Tools Does Every Web Developer Need To Have/Know?

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 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

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. Feature-rich, customizable, open-source: there's good reason that VSCode is currently the 800lb gorilla in web development editors.

Node.js

image

Node 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

...npm 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

Modern software development would be impossible without version control solutions like Git, and online repository tools like GitHub. While it's necessary that you need to learn Git, you may wind up on a team that uses Bitbucket or Gitlab, 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. 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, which mostly have feature parity with the notable expection of their CSS Grid Inspector.

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!

💖 💪 🙅 🚩
dylanesque
Michael Caveney

Posted on August 10, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related