In 2020, I asked the web team at Pixelmatic their opinion on what were the must-use pieces of tech in everyday work. Now it's 2021, I asked them again, and we figured out that the list did not change, so I thought I would share it with you.
Top 5
1. Chrome DevTools (and Firefox DevTools)
In the beginning, there was Firebug, one of the best dev tool extensions for Firefox, which was released in 2006. It helped a generation of JavaScript coders to finally debug their code directly from a browser. Only the real ones know. A couple of years later, Chromium integrated similar dev tools based on the same great concepts and ideas.
And today, the DevTools included in Chrome (and Chromium) are at their best. They accompany the best devs throughout the different development steps: research, development, testing, debugging, profiling, and even auditing. It also allows you to prototype changes quickly and directly in situ. They are the first tool to master when you start a career in web development. Mention to the native Firefox DevTools too (RIP Firebug), which are pretty good. And even better on some points.
Link for more info: https://developers.google.com/web/tools/chrome-devtools
2. Visual Studio Code
Once upon a time, there was a framework to create cross-platform desktop apps named Electron released in 2013 and developed and maintained by GitHub. It allows users to use web technologies to make desktop applications, thanks to the combination of the browser Chromium and NodeJS. For several years, the text editor based on Electron, made by GitHub, named Atom had been the favorite of most devs.
But in 2015, Microsoft entered the dance with Visual Studio Code and slowly stole the show from Atom over the years. Nowadays, Visual Studio Code is one of the best IDE to do web development. It has constant updates and improvements, tons of extensions, integrates well with a lot of languages offering auto-completion and inspection, profiling, and such.
Link for more info: https://code.visualstudio.com
3. Docker
Docker is a technology that revolutionized the industry in the last seven years by making the usage of containers the new norm. It impacted both how apps are developed and how apps are deployed.
With Docker, you do not need anymore to install libraries and other software to develop. For instance in the past, to do PHP web dev you would install Apache, PHP, and MySQL locally. And sometimes you needed to manage several versions of PHP and/or Apache on your machine to make sure you could maintain old products and such. Now with Docker, you can limit yourself to a browser, an IDE, and Docker. And every software/framework you use, you can either have them embedded directly in your app's container like Apache and PHP, or you can run them into separate containers like MySQL, and this without cluttering your system. It is also super easy to package your containers and deploy them on a remote machine.
Link for more info: https://www.docker.com
4. Strapi
In the past, web development was dominated by WordPress and others coupled CMS, but now there is Strapi! It is a headless CMS and the WordPress killer CMS. Strapi provides all the necessary tools to build data models and logic and expose them through APIs, which can be then consumed effortlessly in any front-end or micro-service.
At Pixelmatic, all (or almost) of our web front-ends are based on Angular. Combining it then with Strapi has been a real win for us. On top of decoupling front and back ends, it offers great flexibility. Strapi makes the implementation of new functionalities and adding content, super fast.
Link for more info: https://strapi.io
5. Postman
Postman is one of the best tools for your RESTful APIs. It can help to design, test, debug, and monitor your endpoints. At the origin, it was a Chrome extension, but recently they switched to Electron also. You can even generate documentation as well.
Link for more info: https://www.postman.com
Special Mentions
MarkMan
MarkMan is a neat little tool to get measures and colors out of a mockup or other websites, especially if you have mockups made in Photoshop or such. There is a free version.
Link for more info: http://www.getmarkman.com
Fiddler
Fiddler is another tool to debug and inspect traffic from websites. It is a more simple and more straightforward WireShark specialized in HTTP traffic. It is very convenient when you are testing a website in a browser which has not great dev tools like Chrome.
Link for more info: https://www.telerik.com/fiddler
Zeplin
Zeplin is another tool to help you to implement web designs. It is a collaboration tool between designers and developers. You can quickly extract useful code snippets from the design mockups.
Link for more info: https://zeplin.io/