DEV Community

Michael Caveney
Michael Caveney

Posted on

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!

Top comments (5)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Weird how you say to avoid Linux and immediately follow it with saying how tricky it is to do stuff on Windows that's dead easy on Linux

Collapse
 
dylanesque profile image
Michael Caveney

Read both parts more carefully: I recommend avoiding Linux IF you're not familiar with Linux setup, and I specifically call out technologies that are known to not play well with Windows. If you never need something like Rails, you're probably fine with Windows.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Fair enough. Curious to know why you advise avoiding Linux though? I used to be Windows all the way, but gave Ubuntu a go - firstly on dual boot, then I wiped Windows and never looked back. The whole experience is just way better - especially for development.

I used Windows 10 briefly for the first time a few weeks ago (before wiping it with Ubuntu) - it still felt clunky and a bit of a mess

Thread Thread
 
dylanesque profile image
Michael Caveney • Edited

I advise that those unfamiliar with setting up Linux OSs approach it with caution because I've seen some big headaches in open-source from folks with Linux distros but a not-strong grasp of setting up and maintaining those distros. For someone who's been doing this for a few years? They can sand off those rough patches. For absolute beginners, like this blog series is aimed at? It can create some major frustration that's an unnecessary blocker for getting up and running and writing code.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

Ubuntu is a breeze. I've heard Mint is great too