Use­ful tools, tricks and timesavers

When making things for the web, it's fairly unavoidable that we spend a lot of time at the computer. So, it pays to find ways to reduce friction and stop mundane tasks getting in the way of the fun job of creating.

This post is an attempt to collate some of the most useful productivity tools I use to get stuff done; essentially the services and apps I use everyday and now can't live without.

So with the caveat that what follows is pretty web and Mac-centric, here's my list as it stands —

Browser tools

  • 1Password
    Remembering passwords is tedious. 1Password kills that tedium. With fire. Including extensions for most browsers and military level security, 1Password remembers passwords for you so you don't have to.

  • Awesome Screenshot
    Terrible name, great Chrome extension for screen capture. Capture the visible portion of a web page, the entire page or a selected area and then drag it from the browser window. Great for avoiding capturing browser chrome.

  • Flashblock
    Block the Flash player based on rules you set. You can whitelist domains so only the content gets blocked that you want to block. No more whirring fan that sounds like you're about to take off.

  • WhatFont
    A Chrome extension for quickly inspecting fonts in web pages. Very useful.

Design and Development

  • Coda 2
    Which code editor to use is a very subjective/personal thing, but Coda 2 is my editor of choice. Clips and the way files are queued for publishing I find super helpful. That said, I also love the elegance and simplicity of Sublime Text 2.

  • Colorsnapper
    Super handy Mac app. A colour picker with a loupe to eyedrop individual pixels. The picked colour value is automatically saved to your clipboard in a variety of formats.

  • ExpressionEngine
    Brilliant, web publishing system for websites of all shapes and sizes. I was initially put off by the price tag, but have since discovered it's excellent value for money and way more elegant than Wordpress to work with.

  • FontSquirrel
    If you plan to host your own webfont, Fontsquirrel takes away a lot of the legwork of converting the font to the appropriate formats for use. It also generates the css you'll need to use the font.

  • Foundation
    A brilliant rapid prototyping framework for responsive web sites, allowing you to test layouts and ideas with ease. It seems a lot of folk use this framework in production too.

  • Git
    The version control system for your code. Great if you're working in teams and need to work collaboratively on the same codebase. Try Git and Git Immersion are good tutorials to get you started.

  • LESS / SCSS
    Until CSS variables come natively to browsers, we have LESS and SCSS to help us out. I've only used the former, but have found it to be a massive timesaver. It's also particularly useful when working with responsive layouts.

  • MAMP
    If you work with PHP and MySQL, MAMP is a must. About the easiest way to set this combo up in a development environment. Install the app, tell it where you want the root directory to reside and you're good to go. You can go one step further and set the root directory to be a folder in your Dropbox and then you can have a local web server synced across multiple machines with ease.

  • Placehold.it
    Extremely useful placeholder image service for use when marking up layouts and templates in HTML.

  • SnapNDrag
    A nice simple Mac app for doing screen captures. Drag your captures from SnapNDrag straight to any other app. Also supports timed capture and different file formats and compression.

  • TotalTerminal
    I don't get too involved with the command line where I can help it, but when I do I use TotalTerminal. It's unobtrusive and easily summoned and dismissed.

  • Typekit
    There are a lot of webfont hosting companies around now, but I've been using Typekit pretty much since it launched as one of the first credible providers on the market. It's a breeze to set fonts up and there's a good range of proper faces with full character sets to choose from.

  • Web Developer extension
    A really useful extension to use alongside the built in web inspector in Chrome. Resize your browser window to specific dimensions, view a site at various responsive breakpoints, disable stylesheets and javascript and much more.

General Productivity

  • Alfred
    A productivity tool that makes accessing content on your machine and online much faster. Great for launching applications instantly. Alfred also supports customisable shortcuts to make things even easier. Highly recommended.

  • Backblaze
    Never lose work again. A super easy backup solution. Install a simple app, pay $5 a month and have your entire machine backed up into the cloud as you work or at scheduled times.

  • Dropbox
    Possibly the most useful service around — file storage in the cloud. Great for sharing files and work with others and between devices. A free account gives you 2GB space, but there's lots of ways to get more free space if you don't want to pay for the full service. I've managed to accrue nearly 8GB at time of writing and am still only using a free account.

  • FreeAgent
    Hands down the best accounting tool for small businesses/freelancers and I've tried out quite a few. It makes the boring task of managing money weirdly almost fun. Almost.

  • Google Apps for your domain
    Great for running a small business. Free email, calendars, spreadsheets, documents and more all hosted through your domain. This means you can run your domain email through gmail (benefitting from spam filtering and all it's other great features) and easily set up custom memorable domains for your calendars/docs and so on.

  • IFTTT (If This Then That)
    Daisy-chain online services based on events. For example — post favourited tweets to Instapaper or Instagram photos to Flickr. There's a whole host of recipes and channels to choose from and more being added all the time. Here's how it works.

  • MailPlane
    A Mac app that acts as a wrapper for multiple Gmail/Google Apps mail accounts. Great if you have lots of different email addresses that you regularly check. Allows you to easily switch between multiple accounts without the pain of logging out/logging in.

Reading, Writing and Sharing

  • Bitly custom url shortener
    Bitly is great for simple analytics and stats on links you share. If you go one step further you can customise the url you use to keep it in line with your brand/company.

  • Buffer
    If you have a bunch of things you fancy tweeting about, why not be considerate and rather than bombarding your followers with a stream of stuff, schedule them to be posted at intervals. That's what Buffer is for. Gives you some basic stats too.

  • CloudApp
    A desktop app for fast sharing of all sorts of file formats. Drag any file to the CloudApp icon and it will upload it and save the url of its location to your clipboard for fast sharing. Great for sharing artwork, text docs and more.

  • Feedburner
    I use this to get an insight into who reads the stuff I write. There's simple metrics on how many people subscribe to my feeds and when they click through.

  • Flipboard
    Flipboard is a nice presentation layer for reading content from all sorts of different sources. Plug in Twitter accounts, Flickr accounts, RSS feeds and more and have it all aggregated into a nice readable format. It's also nice and easy to push content to social networks.

  • IA Writer
    A minimal writing tool from Information Architects, which allows you to focus purely on the task of writing. I use it to write my posts here. Sync across devices and backup into the cloud. I find working out of a Dropbox folder best so I can access and edit documents from anywhere.

  • Reeder
    A great RSS reader that syncs with Google Reader. A clean, minimal interface that eclipses any other app I've seen.

  • Tweetbot
    Tweetbot is not necessarily the best looking iOS Twitter client, but has a great featureset. Mute users and hashtags for specified periods of time. Sync read tweets with Tweetmarker. Just make sure you turn off the sound effects.

That's all I've got for now, but I'm going to keep this list updated with other things I come across that make the grade.

I'd love to hear of any suggestions you may have through the comments on this post or over on Twitter.