cmd-r’s log

document your development one refresh at a time

Ian Johnson
2 min readJul 15, 2013

Not all that long ago we celebrated one year of developing Tributary and I realized I didn’t have enough screenshots of the early interface, or any at all for some of the intermediate stages. It occurred to me that it almost never occurs to me to take screenshots while I’m building something for the web. My advisor in school tried to drill constant documentation into my head, since graduating I have remembered the advice but haven’t formed the habit.

So I started a chrome extension that will document for me. For domains that I choose it will take a screenshot of the page whenever a page loads. When I’m developing a website (or web app) I refresh the page every time I make some change to the code or design. This way I will have an automatic visual record of every change made during development.

The extension is still experimental and the biggest unresolved issue is getting screenshots out. I’m using the FileSystem API which does not give you direct access to the user’s operating system, but a sandbox to store files. Without using a server it isn’t clear how I can save out a batch of files to disk to be used in other programs.

The user interface could use some design love, but the most basic functionality is there. I would like to have more indications of screenshots being taken, usage and statistics. I’ve started a list of issues on github with a few more ideas.

I am looking forward to making timelapse movies of sites I am currently developing. Even browsing the images from the last few months has reminded me of some fun accomplishments and the progress I’ve made. I can cherry pick screenshots for upcoming blog posts or reminisce with EJ about past design decisions for Tributary.

The codebase is fairly small, and I could use some help turning it into a useable tool for any designer or developer. Check out the code from github and install it unbundled if you’re interested. I’ve created a video to get you up and running in a few minutes:

http://www.youtube.com/watch?v=FDIhLGfY4j4

⌘-R at your service!

--

--

Ian Johnson

pixel flipper. Data Vis Developer @ObservableHQ. formerly @Google @lever