In this post we`ve collected some best web design & development tools that can dramatically increase your productivity and simplify your everyday job as a front-end developer.
Yellow Lab Tools
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.
JSON Editor Online
Web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor.
Tool that automatically formats CSS source code, inspired by Gofmt, and built on top of the PostCSS ecosystem.
Free and open-source alternative that solves this problem with a geometric approach, using a genetic algorithm for global optimization. It works for arbitrary containers and concave edge cases, and performs on-par with existing commercial software.
Desktop application that helps web developers and designers create responsive websites using the Bootstrap framework. It supports a wide range of components and advanced features that make you more productive.
Create quality HTML prototypes quickly, using popular open source tools like Bootstrap, LESS, Fontawesome and more.
A visual tool to create custom and instagram like photo filters in css.
Responsive Image Breakpoints Generator
One image for all screen resolutions and different devices is not enough. An image per pixel is too much – so how can someone automatically choose the optimal responsive image sizes?
Using the same font everywhere isn’t always the most aesthetically pleasing option for design. Type Genius allows you to enter your base font and then shows you nice options to pair with it on graphics.
Some pretty nice placeholder nouns for your site.
Project management tool for visual feedback. Discuss web pages, upload designs & screenshots. Get to-dos done in collaborative way.
A tool for building website UI toolkits and style guides.
A browser extension for coders to measure screen dimensions. Currently only available for Chrome.
This tool monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.
Open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.
Makes it easy for developers to deploy projects to a production-quality CDN through Grunt, Gulp, npm.
All you need to do is to add the Styleguide to a separate folder in your project. Use it as your CSS. You just need to import the generated file inside your HTML and you are all set! This way the Styleguide will be synced with your project. Isn’t that awesome!?
Local-storage based mockup tool
The mockup tool that uses your local storage as backend.
Useful for development stage, when designs are finished. In other words, it makes for easy referencing colors, layout and alignment details for View/Front-end development.
Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.