frontend-dev-resources
A directory of useful tools for frontend development
Accessibility
- whocanuse.com - a tool that brings attention and understanding to how color contrast can affect different people with visual impairments
Auditing Tools
- cssstats.com - CSS Stats provides analytics and visualizations for your stylesheets.
- yellowlab.tools - Checks if performance good practices are respected. Detects problems on HTML, CSS, JS, images, fonts and more. Provides precise information to fix the detected performance issues.
Benchmark
- measurethat.net - Create a benchmark, measure performance of the JavaScript code and pick the fastest version.
Coding
- emmet.io - Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow by writing snippets/expressions.
Colors
- coolors.co - Create the perfect color palette or get inspired by thousands of beautiful color schemes.
- colorleap.app - Take a leap through time and see the colors of history.
- nightpalette.com - A free inspirational color palette tool made for dark mode design: Night Palette.
- realtimecolors.com - Visualize Your Colors on a Real Website. 🚀
CSS Generators
- 9elements.github.io/fancy-border-radius - Border radius generator.
- cssgradient.io - A fantastic little tool to help you generate and implement both linear and radial gradients.
- cssgrid-generator-netlify.app - Let's create gss grids the easy way.
- shadows.brumm.af - Make a smooth shadow with the CSS shadow generator.
Image Converters/Compression
- anywebp.com - Capable of converting all possible image formats to WebP in batch process. Support all of the following image formats: JPG/PNG/GIF/SVG/iCO/BMP
- compressjpeg.com - Compress JPG files
- compresspng.com - Compress PNG files
Helper without it would be impossible for me to code
Other useful tools
- fontpair.co - Browse through hundreds of free Google Font pairings to use for your next creative project.
- utopia.fyi - Elegantly scale type and space without breakpoints.