Our team of full-stack engineers gathered and made a shortlist of the must use pieces of tech nowadays in everyday work.
Top 5
1. Chrome DevTools (and Firefox DevTools)
In the beginning, there was Firebug one of the greatest dev tool extension for Firefox released in 2006 that helped a generation of javascript coders to finally debug their code directly in the browser. Only the real ones know. A couple of years later, Chromium integrated similar devtools based on the same great concepts and ideas [1].
And today the DevTools included Chrome (and Chromium) are at their best and they accompany the greatest devs throughout the different steps of development: research, development, testing, debugging, profiling, and even auditing. It also allows you to quickly prototype changes 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 certain 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 develop an app, it basically combines the browser Chromium and NodeJS. For several years, the text editor based on Electron, made by GitHub too, named Atom had been the favorite of a lot of 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 7 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 for developing. In the past, for example, to do PHP web dev you would install Apache, PHP, and MySQL locally, and sometimes you needed to maintain 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 simply just have a browser, an IDE, and Docker. And every software/framework you need, you can either have them embedded directly with your app in a container like Apache and PHP, or you can run them directly into containers like MySQL, and this without cluttering your system. It is also super easy to package your container and deploy it 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 API. These API can be then consumed pretty easily in any front-end or micro-service.
At Pixelmatic, all (or almost) of our web front-end is based on Angular, combining it then with Strapi has been a great win for us. We have the flexibility we wanted on the front-end being able to implement anything we wanted, with an easy tool in the back-end to allow us to quickly add functionalities to our websites.
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. It was originally a Chrome extension and recently 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 that is pretty helpful 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 simpler and more straightforward WireShark specialized in HTTP traffic. It is very useful when you are doing testing on a browser that 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 in fact a collaboration tool between designers and developers. You can quickly extract useful code snippets from the designs.
Link for more info: https://zeplin.io/
References
[1]: https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html