In this article, introduce a list of tools that all front-end developers can use to make your life easier and more productive.
1. Transition generator
Among the CSS properties, transition properties have so many possibilities that it can be difficult to remember them all from start to finish.
This tool is useful when you’re not sure what kind of transition you want, or just want to try out a variety of transitions. With this tool we can easily mix different transition effects such as duration and delay time. This way, you can clearly see how each different transition effect works.
Address: https://webcode.tools/generators/css/transition
2. Transfonter
Address: https://transfonter.org/
Transfonter is a tool for converting fonts so you can use them on the web. It supports many different formats such as TTF, EOT, WOFF, WOFF2 and SVG.
3. Flip Switch Generator
Address: https://www.cssportal.com/css3-flip-switch/
Every once in a while, we might need to implement a switch for a new application we’re building. Instead of reinventing the wheel over and over again, we can use this tool to generate code.
4. Flexbox.help
Address: https://flexbox.help/
Flexbox.help is a great tool that I use whenever I need help with flex boxes. If you’re relatively new to flexboxes, this is a great result. With this tool it is possible to try out all available flexible options. The CSS is generated for us based on the options you choose, so we don’t have to type all the code ourselves.