6 Must-Use Tools for Front-End Development
A list of very helpful tools I personally use and recommend to anyone in front-end development
The internet has a lot of tools developed by the community to ease our lives as front-end devs. Here is a list of my favourite go-to tools that have personally helped me with my work.
To be honest, although I do a lot of front-end dev, I am not that good with CSS. This very simple tool is my saviour in hard times. It lets you design your elements with a simple UI and gives you the relevant CSS output.
2. Prettier Playground
Postman is a tool that has been in my developer toolset since the beginning of my dev career. It has been very useful to check my endpoints in the back end. It has definitely earned its position on this list. Endpoints such as GET, POST, DELETE, OPTIONS, and PUT are included. You should definitely use this tool.
According to Chidume Nnamdi, this is every user’s favourite online IDE tool. The main reason why is that it brings on our favourite and most used IDE to the web — Visual Studio Code.
I have found this tool quite useful, especially when trying out sample code snippets or libraries online. You would not have the time to create a new project from scratch just to try out a new feature. With StackBlitz, you can simply try out the new NPM package in less than a few minutes without creating a project locally from scratch. Nice, right?
One basic principle of software development is code reusability. This enables you to reduce your development, as you’re not required to build components from scratch.
This is exactly what Bit.dev does. It allows you to share reusable code components and snippets and thereby allows you to reduce your overhead and speed up your development process.
It also allows for components to be shared among teams, which lets your team collaborate with others.
“Components are your design system. Build better together.” — Bit.dev
As quoted by Bit.dev, this component hub is also suitable to be used as a design system builder. By allowing your team of developers and designers to work together, Bit.dev is the perfect tool for building a design system from scratch.
This online tool can be very handy, as it allows you to find out whether the feature you are implementing is compatible with the browsers you are expecting to cater to.
I have had many experiences where some of the functionalities used in my application were not supported on other browsers. I learned the hard way that you have to check for browser compatibility. One instance was that a particular feature wasn’t supported in my portfolio project on Safari devices. I figured that out a few months after deployment.
To see this in action, let’s check which browsers support the WebP image format.
As you can see, Safari and IE are not currently supported. This means you should have a fallback option for incompatible browsers. The code snippet below is the most commonly used implementation of WebP images to support all browsers.
I have tried to fit the best tools I have encountered in my dev career. If you think there are any worthy additions, please do comment below. Happy coding!