DEV Community

loading...
Cover image for Top 5 amazing tools for every web developer

Top 5 amazing tools for every web developer

thesoreon profile image Paul Susicky Originally published at thesoreon.com ・3 min read

Introduction

We all want to be as effective as possible that's why we are developing things which boost our (and others) productivity, but we are also using tools from other developers, who made these tools with the same reason.

So I want to introduce you to my top 5 tools (for web developers) I'm using on an everyday basis. The list is not sorted in any way, all of these tools are very amazing and make our life easier.

You can leave a comment down below with your curated list of favourite tools for web developers!

So let's get started 🚀

Lighthouse

Lighthouse is an amazing (open source) tool made by Google. It reports important aspects of our web pages, such as Seo, Performance, Accessibility, Best practises and more!

Lighthouse preview

Amazing feature of Lighthouse is that it can be used in many ways, the most popular one is using official Google Chrome Extension, but you aren't bound to using only Chrome extension, other ways are:

Note that with Web UI you don't have to install anything, however, you are limited by the available options. When using the extension you can "emulate" CPU throttling and internet speed, so you can see how is your website doing on low-end hardware devices, isn't that awesome?

Chrome and Firefox devtools

Personally, I don't use Firefox devtools that much, but I would say using both of them in parallel is great because each of them has amazing features the other one doesn't have. For example, Firefox has an amazing accessibility tool!

My Chrome devtools tip

If you hit Ctrl+Shift+P (while devtools are opened), you will be prompted with a search bar, where you can type command you want to execute. So for example, if you want to quickly disable Javascript without going to Chrome settings or searching the checkbox in devtools, you can type it!

How to disable Javascript using devtools quickly

Can I use

caniuse

Can I Use is probably the most known website for all developers. It lets you quickly find how well is Javascript API or CSS property supported in most popular web browsers.

Below we can see the default view of searched Javascript API. It shows us in which versions of browsers is the API available, but there two more very interesting views, let's try them!

caniuse default view

Another view is Usage relative, very handy view if you have gathered data about which browsers your audience uses and if you need to polyfill (or change) certain features in your app to work correctly for your audience.

caniuse usage relative view

Last view is Date relative, where you can clearly see in which version of the browser was a certain feature added.

caniuse date relative view

Web Accessibility Evaluation Tool (WAVE)

WAVE

WAVE is an extension for Chrome and Firefox. When you click it in your extension list bar, it will wrap your current visited site with its UI interface, where you can see accessibility summary of the page. It shows things like Contrast errors, accessibility errors, but also it shows features your site provides to improve accessibility.

WAVE preview

Figma

Figma

Figma is one of the most amazing tools I have seen lately. It is a UI design and prototyping tool. Similar to tools like Adobe XD and Sketch, but Figma is web-based (but you can, of course, download desktop app), which is very powerful. It has many pros such as very good performance, real-time collaboration with your team members and FREE pricing plan, which offers all features of Figma (with unlimited export and much more) and if you are a student you can get Professional plan for free!

Figma preview

If I haven't convinced you to try Figma, try to read more information on official Figma site here. I believe you'll fall in love with it!

This post was published on my blog, you can check it out here.

Discussion (11)

pic
Editor guide
Collapse
therealkevinard profile image
Kevin Ard

Figma is friggin great! Best thing ever.

Slight addition: can i use has a node client that's pretty awesome, and there's a counterpart - do I use - that analyzes what you're using.

Both play well with ci/cd ;)

Collapse
thesoreon profile image
Paul Susicky Author

Do I Use looks really cool, thank you for mentioning that!

Collapse
denysvuika profile image
Denys Vuika

For a11y in our projects, we are using AxE (deque.com/axe/) by Deque instead of the Wave. Also has Chrome/FF extensions and I think is much better than Wave in many aspects.

Collapse
bretthancox profile image
bretthancox

Nice list.

I would recommend the Firefox dev tools for flexbox analysis. Their visualization approach is great.

Collapse
thesoreon profile image
Paul Susicky Author

Yes! That's a very awesome feature, thank you for pointing that out!

Collapse
kriminalinc profile image
Sergio Bernal

Great advices, thanks. I'm gonna try lighthouse.

Collapse
ttalgihon profile image
ttalgihon

I've suddenly been hearing so much about figma, I'll have to give it a try. And WAVE.

Collapse
thesoreon profile image
Paul Susicky Author

I have been using Figma for over a year, but the latest updates are really powerful (especially custom plugins). Just give it a go! I bet you will love it!

Collapse
a_m_h_gad profile image
Jad

Amazing bro ❤

Collapse
junlow profile image
jun

Love Figma as well! I'm using Lighthouse when I perform audit in DevTools on chrome/brave.

Collapse
daggron profile image
Abhay Sharma

I strongly agree