The best tools for web developers

Web development is hard and dynamic, the web changes every day, and web developers need to stay up to date. Fortunately, there are tons of tools, libraries and frameworks to make your work easier.

Here I’m going to list my favorites for each category. Some tools are good for frontend developers, some are good for every web developer, and others are useful even if you are not a developer.

# Editor

Every developer should have an editor, or are you fine with notepad?

Here I should mention the difference from and IDE and a simple code editor, but nowadays these distincion is less prominent. Basically an IDE will give you everything you need out of the box, and in this way a good IDE is Webstorm of course. It will let you start with your new fancy project in every fancy web framework in seconds, but it come at a cost 💲

Let’s talk about editors instead. My preferred is Visual Studio Code, and the reason it’s simple. It’s not an IDE, but with the best plugin system out there, and one of the biggest community (backed by Microsoft), it can basically become what you want.

By itself it will work with javascript, typescript, html, css and a lot of other languages. Then you could install Debugger for Chrome, to debug your code. If you are into angular you can install this extension pack, Angular Essentials by John Papa. If you work with PHP, there are many plugins, from intellisense to snippets to Laravel plugins. There is also a plugin to play snake if you are bored 🐍

Then it also has thousands of custom themes, or you can make your own!

# Terminal

A developer without a terminal has no control!

Well today, there are a lot of tools that has a GUI, even an unofficial one, so you don’t really need a terminal to be a web developer, but you should use it. Why? Because it give you more control, and sometimes more productivity than you can imagine.

Because of this you also need the BEST terminal, and if you work with linux you just have one. But if you prefer Windows, there is a tool that you cannot miss: Windows Terminal, open source, from Microsoft, with ❤

It can run PowerSheel, CMD, Azure Cloud Sheel, WSL distributions and every command line interface.

It has tabs, so you don’t need to open 42.000 different windows. The theme can be customized, so you can work with style. You can save custom profiles, so you can start from where you left with a simple click. It has so many powerful options that you’ll feel like having a machine gun ready to fire commands 🔥

# Browser

Do you really have any doubts about this? Google Chrome of course.

Just joking, a good web developer, especially a frontend developer, should have every common browser: Chrome, Firefox, Edge, Safari (if you have a mac) and maybe also Opera.

But apart from the obvious reason to have many different browsers, I’m going to explain why you should at least use Chrome and Firefox in your everyday programming workflow.

Chrome comes with Chrome Dev Tools, that let you inspect and change html and css, see logs, see and filter network requests. But other than these common things, that every browser can do, you also have the powerful performance tab, and Lighthouse, which I have already talked about in another post, what are core web vitals.

Chrome Dev Tools also has some interesting plugins, like Redux DevTools.

Why Firefox? because of Firefox Developer Edition. It is firefox for web developers, so why you should miss it.

It has some good tools that can make your work a lot simpler. For example a well made grid layout visualizer. It also has a network tab, that not only let you view requests, but it also let you change the parameters, headers, body etc… and replay the request.

Other than that it also has an Accessibility tab to inspect common problems, like constrast or graphic elements without a label.

# Bundler

JavaScript is interpreted, but you should compile it.

A bundler is one of the main things you should use in your projects, and Webpack is the king, in my modest opinion.

It has a lot of benefit just by default, but it also has the widest plugin ecosystem in the bundler world.

There are loaders, that let you handle imports of different file types, and plugins to customize the build.

Just to mention the ones I use in almost every project:

• ts-loader: to handle typescript files
• css-loader: to handle css files imported from js
• sass-loader: to build sass/scss into css
• HtmlWebpackPlugin: to include one or multiple html files in the final build
• MiniCssExtractPlugin: to extract css imported in js as a separate style file

Using Webpack you can easily compile multi page websites, single page applications and libraries, and you have minification and other optimizations available, like chunk splitting, hashing, dynamic imports and so on…

There are other bundlers, though, I should mention: rollup.js and parcel.js.

These are modern alternative to webpack, and they may also fit your needs well.

# Languages

Web development is not just javascript.

There are different choices nowadays, both for replacing pure javascript, and CSS.

You should really consider using Typescript, for example. The main benifit are types, as the name suggests. This means you don’t have to struggle with variables, properties and methods. This also means learning another programming language, with its own learning curve.

But once you’ll understand the language, and that’s just Javascript with superpowers, you won’t go back. Also, it’s possible for js and ts to live in the same project, so you can convert projects step by step.

Another language you should know is SASS, or any other CSS preprocessor you like.

SASS comes in 2 flavors, scss which is a syntax similar to standard CSS, and an “indented syntax”, which does not use curly braces and semicolons.

Some of the interesting things you can do with sass:

• Nesting rules
• Saving variables
• Compile time calculations
• Imports, functions, mixins

It really feels like a programming language, but it’s just at compile time.

SASS should be, indeed, built into CSS. And this is really easy with webpack and sass-loader.

As for typescript, every css file is fully compatible with scss. So you can convert step by step.

# Template Engine

They are easy to learn, so why don’t you use one?

Template engines, let you build complex, dynamic UIs faster. They also are generally more secure against xss attacks than using innerHTML do build dynamic content.

Now I’m gonna list 2 options, but keep in mind that they are not the only ones.

• Handlerbars: a bit old, or to say it better, mature.
• lit-html: new and simple, yet powerful.

Handlebars is a good choice if you don’t need interaction. For example you can use it to build templates on the server, using Node.js.

I found that it’s also a good match with webpack.

You can just use handlebars-loader, and html-webpack-plugin, to build templates that are then compiled during the bundling process of webpack.

This is useful to build multi page, “static” websites, with the advantage of having a template engine.

You can create “components”, called partials in handlebars, so you reduce html duplication.

You can interpolate compile-time variables, so you can build different versions of the website just by changing them. Useful for a multilanguage website.

You can use conditionals and for loops to build complex UIs easily.

But then it comes the need to have a dynamic, runtime template. Handlebars cannot do that… well it could, but you shouldn’t.

The main reason, as stated in their doc, Handlerbars does not have event handling.

So at this point I should say that if you already use a framework like angular, react, vue, svelte and so on, the next part is not your problem.

But if you don’t want to use any framework, because you like pure javascript, and I respect you for that, then you’ll find useful having a simple way to build dynamic content.

Here comes… lit-html.

It’s pretty new and it’s really simple to learn if you know javascript. Why? Because u just use js syntax.

Templates are build with template literals, then you can render them using the render function, and you are good to go.

Thanks to the fact that it’s just javascript, you can use everything you know about it to build templates: if, for, switch, operators, functions, classes, promises. It’s also easy to compose different templates.

It has also directives, wich are a powerful way to interact with the template. And it can handle events really just by interpolating functions.

Last thing, lit-html it’s lightweight and has really good performance! This make it the perfect fit for runtime templating.

# Analytics

You published a website, and know?

You cannot deploy a website, and expect it will just work, you need to do some analysis.

First thing, you may want to use search console, from google. It let you monitor search statistics, and test if all your web pages are crawled and indexed on google search.

You’ll find that you may improve something, for example:

• Upload a sitemap.
• Upload a robots.txt.
• Handle redirects and error pages.
• Handle multilingual contents.

You may find that google does not really likes you pages. And you’ll know the reason.

But search console stop to the “limited” google “knowledge”. So you need another tool to find out if the users in your website/app are doing what you expect.

This is called an anlytics tool, and Google Analytics is just enough.

It’s simple to integrate, literally you can do it in 10 minutes.

It then collect ananonymous data for you to analyze and interpret.

It can be configured with some custom events, but by default it will listen to page loading and change events, scrolling and user engagment (which is scrolling but slower), clicks, file downloads.

It collect general location and language of the users, device informations, included screen resolutions and other things.

It let you do different analysis on that data, like how many user you had from a certain country, or path analysis to find out which pages and in which order your users navigate.

# Extra Tools

Because, why not?

Recently I had the pleasure to use a monitor in portrait mode to work, and I like it, but I was feeling like the default windows snapping feature was crap.

So i found another fantastic tool from Microsoft, which made me fall into love with my monitor setup.

Power Toys. Again… open source, from Miscrosoft (and its community), with ❤

Power Toys is not just a tool, indeed it’s eight different tools into one, and more in development.

Just a quick snap into all of the current features:

• Color Picker: you heard it right, now you can just take any color from everywhere on the screen.
• Fancy Zones: the reason I downloaded it, it let you split you monitors into rows, columns, grids, and custom layouts.
• Image Resizer: you right-click on an image, you click resize, and you have smaller version of it.
• Keyboard Manager: you can finally customize keys and shortcuts easily
• PowerRename: all the power of regex, to rename files.
• PoweToys Run: you are a shortcut away to find apps, files, documents, open websites, …
• Shortcut Guide: for forgetful guys like me
• File Explorer Add-ons: not really super useful, but why not?

Finally

Oh well, that’s almost my complete setup.

I find all of the above to be essential tools for my web development workflow.

You may have a different opinion, so let me know if you have a similar setup, or you hate these tools and use some others 😉