Design and Development Setup

I've received a few emails from readers over the last few months asking what tools I use for my work at CHNM. So, here's a quick run-down of the hardware and software I use on any given day.

Development Environment

I develop most projects on my local machine, a MacBook Pro running OS X "Leopard." I have a nice 24" Apple Cinema display at work that lets me keep a few windows open at once. I actually had a 30" display, but downgraded because I started feeling like that was too much space (thought it was very handy when working in Illustrator).

I use the Apache server pre-installed with OS X, and enable and modify the PHP 5 package that also comes pre-installed. I also run MySQL 5, so I can work with database-driven software like WordPress and Omeka. Basically, I use my laptop as a web server, and work locally. Its very handy because files load faster, and I don't need an internet connection to work. In fact, as I'm writing this I'm at work on an Omeka theme, on an airplane 37,000ft in the air (en route to Portland, OR).


I usually test a project on the following browsers: Firefox, Safari, and Opera for Macintosh; Firefox, IE7, IE6, and Opera for Windows. We have a Windows machine set up in the office that has both IE7 and IE6 installed.

For initial development, I use Firefox, with a bunch of extensions. My favorite extensions include the Web Developer Toolbar, Firebug, Operator, and of course, Zotero. I use Operator to check for any microformatted goodness on pages (and make sure to use as much microformats code on my web pages as possible). I use Zotero to take extensive notes during meetings with project managers, and take notes on various sites I visit. I have a whole library devoted to "Web Design/Development" and sub-folder for specific projects.

Other Software

For all my coding, I use Textmate. Textmate is quick, straight-forward, and has exactly what I need to code websites. I've made a few bundles and snippets for Textmate (that I'll eventually put on the server somewhere for download) that help me speed up my workflow a little, including personal CSS snippets, WordPress specific snippets, and Omeka snippets. I set up individual projects in Textmate, so I can work with all the files in a given folder I've devoted to an individual site, and keep those on my desktop. Additionally, the "Find in Project" feature in Textmate is fantastic, especially if I need to find instances of a specific function or line of code across a site (like a WordPress or Omeka installation).

I use Transmit for all my FTP needs. Its a slick little app, with a nice icon. Furthermore, I followed the instructions given by Muffin Research Labs to set up a Textmate project that will open files on a server in a tabbed interface. Quite handy, especially if you edit files directly on the server frequently.

For image editing and interface design, I use Photoshop and Illustrator, and a slew of brushes, patterns, and scripts. I make my own patterns and brushes frequently, and group brushes into packages to share with other CHNMers working on the same project. That way, we all have the same brushes and patterns to work with, which makes consistency in design a bit easier.

iPhoto--I browse a lot of CSS galleries like CSS Beauty, Stylegala, and CSS Mania. I take screenshots of sites I like, and store those screenshots in albums on iPhoto. In addition to whole webpages, I also take screenshots of specific components or parts of a site I like, such as lists, comments, headings, navigation, etc. We also tend to do a few diagrams at CHNM when discussing a site or application, so I take photos of those whiteboards and keep them in iPhoto to refer to later.

Adium--We frequently use chat clients at CHNM to communicate, so I have a special group for my CHNM buddies. I also have an additional group just for the design/development team.

Miscellaneous Sites and Services

I use Google Reader to aggregate all my feeds and keep them in one nice, tidy location that I can access anywhere with an internet connection. I have a folder just for design gallery sites, a folder for design/development magazines (A List Apart, Digital Web), and a folder for individual design/development bloggers.

I post "what I'm doing" to my Twitter account, and follow a few. Twitter's great for getting notifications for interesting links, or for near "real-time" discussion among. The tweets published while debating IE8's use of the meta tag last month was very interesting, and helped keep me informed about what debate issues were important for the web folks I follow. The Omeka team has been using Twitter very effectively to communicate with current and potential users, and post about updates, on Omeka's Twitter account. CHNM and Zotero also have Twitter accounts.

So, there you have it! A digital humanist's toolkit, more or less. This leans more towards the development side of my toolkit, but I hope you find it useful. What do you use? [CSS]: Cascading Style Sheet [CHNM]: Center for History and New Media