Front-end design is tough and time consuming, but also rewarding and tons of fun. Where the fulcrum sits between those two is often decided by the quality of tools available to the designer. Here are 26 tools that help shift the balance towards "fun and rewarding".
Need a quick look at how a piece of HTML will look in a browser? Need to show a client a quick demo of an effect, or ask for help on a forum?
CodePen is a slick, powerful editor and viewer for complex code snippets with sharing and community features.
JSFiddle is a power tool for rendering code demos with the ability to load a wide range of libraries and external resources and fork your own copies of demos.
Sprite sheets allow you to load one large image file instead of lots of small ones, and only show part of the image at a time, to decrease the number of requests and (often) the amount of data a page requires to load.
Stitches is a drag-and-drop HTML5 sprite sheet generator that optimizes positioning of your elements.
Sprite Cow calculates background-position and size of sprites from hand-rolled sprite sheets with a clean HTML5 interface.
Web design would be much easier if you only had to design for one browser and device. Alas, that is far from the case. These tools will help to make sure your page looks and works consistently across platforms.
Breakpoint Tester, through its mega-useful bookmarklet, identifies all media query breakpoints in a site's CSS and renders the site at those dimensions side-by-side.
CrossBrowserTesting will automatically take snapshots of a URL in over 1,000 possible configurations of browser, operating system, and plugin. Very useful to make sure your site degrades cleanly in old browsers. (This product has a subscription fee.)
web-capture.net is a free tool to capture full-page screenshots of a URL. It can save in a variety of formats and is free to use.
The Page Load Time Chrome plugin shows, at a glance, loading speed for a page in your browser toolbar. You can get much more detailed information in your developer tools, but I like to have this open for every page to get a quick feel for what's going on.
Google Analytics Debugger, an official Google plugin, switches a site to the debug version of GA with the press of a button. With it switched on, all calls to Google Analytics are logged verbosely in your console.
Do you use AdBlock? No? Well, your readers do. Make sure you check your sites with it installed to make sure the site degrades cleanly when ads are removed.
These awesome tools help generate the graphics that every page needs.
Pixlr is simply amazing. It is an in-browser image editor with all the most-used features of Photoshop available to you, for free, in your browser. You can export your files anonymously, but make sure to sign up to save to your online library.
ajaxload.info generates a variety of animated loader GIFs for you with your chosen colors.
EZGIF generates, decomposes, and edits animated GIFs online.
duri.me generates base64-encoded data URIs of uploaded image files for you, and is super slick.
You need more than graphics, though. These tools help with icons, colors, fonts, and more.
Favicon Maker, one of my sites, generates multi-resolution favicons and Apple touch icons for your site that you can download as a zip file.
Paletton, in beta as of this writing, is an immensely powerful color palette builder.
Google Fonts gives you free access to hundreds of fonts that you can hotlink for free.
SliderBuilder, another of my sites, lets you design and export slideshows and carousels through a powerful graphical editor.
Every web designer has taken inspiration – sometimes liberally – from work seen on others' sites. These tools help you figure out how to duplicate something.
With What The Font?, you upload an image of text (say, from a logo or header) and the software identifies the font used.
TinEye does a reverse search for images. Useful if you're looking for the original of an image you see used online, or a larger version, or one without text or watermarks a later designer might have added.
The jQuerify bookmarklet injects jQuery into a page if it's not already loaded, allowing you to manipulate the DOM in the console.
The ColorZilla Chrome extension is worth installing if just for the eyedropper tool to grab colors out of a webpage.
And when you're just looking for inspiration -- effects and plugins you never knew you couldn't live without:
Check out one of my favorite sites, jQuery Rain, which shows you new plugins daily, many of which are free and open-source.
There you go. See if those help work become more fun and less tedious.
I strongly recommend everyone (especially non-techies) read the discussion "Who are/were some of the most badass computer programmers?" at Quora. It's too easy for non-programmers – even for programmers – to forget that all software, at its foundation, is written by human beings. Everything is somebody's baby. Just turns out that some mommies and daddies are WAY more badass than others.
My list of utter badasses would include the following: