Designers and developers have a specific set of tools to help them in their work as they build websites. Many of them are well known—Photoshop and Sketch for design, Sublime Text, Atom and Prepros or Codekit for development among others—but some are lesser known and have a huge impact on workflow. Some might be categorized as more of a utility, but are helpful nonetheless.
Below is a list of apps we use here at Jackrabbit in our design and development workflow.
Colorsnapper is a color picking app. Living in your menubar, waiting for its assigned shortcut, it lets you easily sample any color on your screen and copy the color’s value in a wide range of developer-friendly formats—Hexadecimal, RGBA, HSL and more.
Fontplop is a webfont generator. Simply drag and drop .ttf or .otf font files on it and it will provide webfont-compatible files and css. A faster alternative to the fontsquirrel.com font generator.
ImageOptim compresses and optimizes images for web even more so than Photoshop or Sketch, removing bloated metadata and filesize without sacrificing image quality.
LittleIpsum is a tiny app that lives in your menubar. In 2 clicks, you can have anywhere from 1 word to 4 paragraphs of text copied to your clipboard for pasting wherever you need.
Monosnap is a screenshot and screencast sharing app. Perfect for when designers need quick feedback on a design or when team members notice a bug developers missed.
Sitesucker is for those times where you need to perform a backup of a client’s site but have no access to their FTP, or make a local backup of a website for any reason. Simply provide the client’s url and Sitesucker will download all linked files.
Svgsus is part icon library manager, part SVG optimizer. While ImageOptim optimizes images, Svgsus optimizes SVGs as well as helps to generate different SVG markup code. A simple drag of an SVG over the app will copy the SVG’s optimized code to the clipboard, allowing you to open the original SVG and paste the generated code or wherever else you may need it.