Archive for April, 2010

Single Screen Workflow

Wednesday, April 7th, 2010

This is my workspace:

Workspace

  • 1. Swiss army knife (be prepared)
  • 2. Coffee (be awake)
  • 3. iPhone
  • 4. Hard drive (with emergency operating system and repair kit)
  • 5. Tiny wireless keyboard
  • 6. Laser pointer (to entertain cats without getting up)
  • 7a. Pen pad (for graphic design)
  • 7b. Normal mouse (for COD4, honestly)
  • 7c. Magic Mouse (for everything else)
  • 8. Macbook Air (probably shouldn’t be leaning against a window, but what the hell)
  • 9. Monitor (it is true that once you have a setup similar to this, Apple sends you a free black turtleneck)

Aside from the unusual number of mice, many of my programmer friends are curious as to why my setup doesn’t look more like this:

Dual Screen

… especially since I have extra monitors around. I used to have another one hooked up. But three months ago I removed the extra monitor at both my home and work, much to the dismay of my coworkers. After almost ten years at various media jobs, with between two and four monitors, I know only use one by choice, and the rest of this essay is about why.

First, since Apple stole Spaces from linux, I use four desktops, down from the nine I used back when it was the newest toy. Here’s the graphic display:

Spaces

Roughly I divide this into the communications, research, facebook, and xkcd screen:

Communications Screen

Followed by the predominant workload screen:

Which houses a Textmate project for large projects with numerous files. Textmate is still my favorite editor for HTML and CSS. More on Texmate later. Firefox and Firebug are still the de facto standard for first round CSS an Javascript debugging, so that’s where the testing goes on, and I keep Chrome open for looking up the 1001 ways CS still tries to screw you. I prefer to keep the Firefox environment free of potentially memory draining or Firebug confusing influences, and I also find it generally easier to switch between applications than tabs when switching from testing to looking things up. Also a Finder window or two for random file browsing.

Next up, design:

Design Window

This is pretty much just Photoshop (I know I shouldn’t have to link to this, but I already linked to Firefox, so I’m just going with it), though I occasionally keep Bridge open if I’m working with more than six or seven images. At home, this is no problem, as my tower is on steroids. At work, the memory strain makes Bridge untenable, so I just keep a Finder window handy.

Lastly, Terminal:

Terminal Screen

I use Terminal for all the monitoring and sysadmin sorts of things for which you need Terminal, and I use Vim in Terminal for surgical frontend work and most non-frontend programming: Python, PHP, Bash, etc.

So. A lot of stuff going on. Why wouldn’t I have an ectra monitor?

In video editing, you need screen real estate. You’re often tweaking settings in a massively complex program, monitoring color charts, and watching realtime effects in an HD monitor. For most actions, there are global effects going on that require sensitive experimentation while keeping track of several representations of the results.

This is basically never true in coding. You make discrete logical changes, then execute a test or reload a browser. The fundamental workflow operation in coding is isolation, and getting to a usually simple problem as quickly as possible. So the most valuable asset to coding is rapid navigation amidst the million lines of code.

Navigating around the various programs I have open is not a problem. From the top down: Spaces, which lets me divide types of work. To access any particular program, I have both the Command + Tab combination, which I use most going between Firefox and Textmate, and Quicksilver:

If you own a Mac and don’t have this, go get it. It makes the dock pretty much obsolete, and is better than Command + Tab navigation in that it will launch a new window if you don’t have one open.

So I can navigate to any program, and to any workflow setup with, at most, five keystrokes.

In Terminal, I generally have at least three tabs open. Within each Terminal tab, I’m running tmux, and each instance of tmux has at least two or three full screens going, each of which is broken into two to four sections. Like as not, at least one of those is running Vim, for which I have a mini-buffer:

… which provides quick access to anything in the Vim buffer.

Back in Texmate, there’s a project drawer:

Project Drawer

… but I rarely open this, because of the Go To File command, which opens this interface:

… which is usually faster than scanning down the file list, once I have a passing familiarity with the filenames.

Adobe finally caught on to Command + ~ to switch between windows in Photoshop, so getting around a handful of PSD’s is no problem, and if it’s more than that, swapping to Bridge is no more than four, and usually just two keystrokes away.

These are my workhorse programs, but all of my programs have fairly simple key combinations to navigate around them. Back before I knew these combinations, I was married to my mouse, and the most important thing was to have each program visually accessible, because the primary path to any particular program or piece of information was the visual point and click path.

Now I have my keyboard:

Keyboard

Since I NEVER use caps lock, mostly because I don’t get involved in screaming forum wars, I changed it to another Control key, since I use it all the time in Terminal and Textmate, and the regular Control key on this keyboard would long ago have transformed my pinky into a painfully curved claw. The F6 key is spaces if I do find myself wanting visual navigation, and I have two All Applications buttons for the same reason. Why two? I forgot about the built-in one, and I haven’t found another use for the blank F5 yet.

So with my tiny tricked out keyboard and a reasonably thorough, but by no means exhaustive, knowledge of keyboard shortcuts, my access is semantic, which is a far better way to navigate code. All my primary means of navigation are either abstracted and id-based (Control + [1-4] switches my workspaces) straight searching (/whatever in Vim) or text-guessing (PH gets me to Photoshop in Quicksilver). Getting to any part of my workflow, which constitutes thousands of files of a dozen types with half a dozen interpretative interfaces, is only a matter of a dozen keystrokes, which I can achieve in under six seconds.

This kind of precision navigation is the most useful skill I cultivate, and extra visual real estate is just distracting. Looking at two screens and finding things visually among a dozen open programs is less efficient than keystroking (pun avoided) my way to the issue at hand. I say this as a programmer, but also as a person predominantly trained in the visual arts. Personally, graphic recognition is my strongest trait in all the stupid IQ tests available to the bored computer worker. I still think it’s more efficient to have a single visual portal and a strong grasp of semantic navigation than it is to have a crowded visual landscape.

A common saying in any information based job is “too much information is the same as too little.” Certain kinds of work require certain amounts of immediately available information. My job, at any point, requires one, distinct piece of information. Isolating a handful of bytes form the billion or so is a skill of making semantic and logical connections. Once you’ve mapped navigation to a few keystrokes, the navigation part of investigating the information becomes a matter of muscle memory. When on a semantic (I know that word’s been popping up a lot; bear with me, it’s almost over) or logical train of thought, I don’t have to readjust to sorting out a visual map unless I want or need to. I usually only have one program in front of me, so I’m less easily distracted, and I get better at getting to the one program I need. Better still, I don’t have my head at a weird angle for half the day.