We’ve just about come up on a year since my first free web-based design and development tools round-up, so it’s high time for a refresh/reload. The tools listed below (in no particular order) are freely available to anyone with a web browsers and internet connection and have proven themselves to be indispensable to me in my workflow. These are not merely code libraries like jQuery or said libraries’ plugins, but full-fledged utilities that help me get the job at hand done. I plug them here as a form of gratitude to the folks who’ve made them available. I hope you find them as useful as I have.
Like most web developers, I reuse bits of useful code from project to project—be it a CSS reset, long-hand CSS declarations for use in HTML emails, etc.—and have stored many of them in Dreamweaver’s Snippets panel. Working on a desktop in my home office and a laptop elsewhere, I never seem to have my snippet libraries in sync. Snipt has rendered this moot by giving me a personal, web-based snippet repository. I can categorize and tag snippets with descriptive keywords for fast, easy retrieval. I can also contribute to the collective consciousness by sharing my snippets publicly, as is my routine. Not only am I never without my snippets, but I also discover and learn a thing or two from other users’ snippets. Win-win. www.snipt.net
Created by Chengyin Liu, WhatFont is a browser bookmarklet that, once clicked, will allow you to see what font a word is set in by hovering your cursor over it. A small tool-tip type window displays the font family, style, size, line height, hex color and even a truncated alphabet as alternating upper and lower-case characters. Think of it as a few less clicks than using the inspector and scrolling through the Style panel to find it in the CSS. A simple and elegant tool that does one thing and does it well. chengyinliu.com/whatfont.html
The name really says it all. CSS3 Generator appears as an otherwise empty page with a single pull-down menu bearing the commanding phrase “Choose Something.” Well, some of the things you can choose include border-radius, box-shadow, text-shadow, transition, transform, and so on. What you get when you select, say, box-shadow is a wizard-like form where you can specify horizontal/vertical length, blur radius, etc and see a ive preview as you enter values for these attributes in addition to the markup (prefixed and un-prefixed), which appears below the form ready for you to copy/paste into your style sheet. Can it get any easier? I submit that it cannot. css3generator.com
Ultimate CSS Gradient Generator
Where CSS3 Generator draws the line, so to speak, is in handling CSS Gradients—and for good reason. It turns out that the folks at ColorZilla have created, literally, the Ultimate CSS Gradient Generator. Taking its interface cues from Photoshop’s gradient editor, the tool feels incredibly familiar with settings for orientation (linear, radial, diagonal, etc), individual color and opacity stops, a hue/saturation adjustment panel and the ever-so-useful ‘reverse’ button. The generator outputs CSS or SCSS (Sass) with or without IE9 support and you can even share your beautiful creation by means of a permalink, which means you can save them for later reuse by merely bookmarking their unique URLs. Truly useful! colorzilla.com/gradient-editor
Online CSS Unminifier
Like perhaps many of you, I learned much of what I know about web development by looking under the hood of sites I admire to see how they accomplished certain things. I still always seem to have the Chrome Inspector on, ever curious as to how some little piece of a site is rendered. However, with the growing importance of website performance, the accompanying practice of minifying markup has made it an increasingly more arduous task to reverse engineer other people’s code. Enter Peter Cole’s Online CSS Unminifier, which does exactly what you hopefully expect with a name like that. Simply copy/paste the minified markup into the provided text area and click ‘Unminify’ to get—more or less—clean, readable CSS. As the saying goes…Talent borrows, genius (unminifies, then) steals. mrcoles.com/blog/css-unminify