a.k.a Doing the 68-key Shuffle

One day I ran across this incredible video by musician Jon1st, a world-class DJ. I was in awe that, although everything he did on his equipment was possible to do with a keyboard and mouse, he would have been limited in the music he could create by the speed at which he could input his instructions.

By using custom hardware he was able to streamline the input of a few very specific actions, and use specific software to do a specific task on his computer, but the results are amazing.

Because of his custom hardware, his use of a computer became a type of performance. I was so inspired by seeing this video that I set out to find a custom input device that could use to speed up a few of the specific tasks I do on my computer and allow me to perform actions faster than using a regular keyboard and mouse alone.

Picking the Right Keyboard

Patterns naturally appear in the way we interact with computer. I began to think about the types of patterns in my input and how I could automate them. Where there any common sequences of keystrokes I could abbreviate and automatically expand using snippets? Where there any routine mouse gestures that could be made smarter?

I write a lot of custom HTML and CSS and specialize in building responsive designs. Much of my day is spent writing or editing text, resizing browser windows, and moving text around.

After thinking for a while I finally settled on a use-case for a custom keyboard; I wanted a sequence of events like the following to be possible using only custom hardware:

  1. focus the Chrome browser
  2. refresh the page
  3. scroll down
  4. resize window to 320px wide
  5. resize window to 481px wide
  6. resize window to 769px wide
  7. resize window to screen width
  8. launch Firefox
  9. launch Safari
  10. select adddress bar
  11. copy
  12. paste
  13. enter
  14. flip back to my text editor
  15. edit a number value in an existing file in my editor
  16. save the file

After thinking about those actions and how you could accomplish them using the keyboard or the mouse, I realized that there are a number of different methods for sending input to control an application. The types of input can be used include:

  • a single keystroke (button or switch)
  • a set of keystrokes (like playing a chord on a piano)
  • a stream of analog values (joystick or wheel)
  • increment/decrement a value (dial or slider)

But what's the best way to input these actions using custom hardware?

I already use sets of keystrokes (like piano chords) inside applications, like ⌘-c for copy or ⌘-v for paste, and have already expanded on these with my own custom shortcuts that launch my most used applications and folders.

After doing a little research, I saw that XKeys has USB keyboards, switches, foot pedals, and analog controllers. I read through every page on their site multiple times and agonized over which controller might suit my needs best, trying to make the decision with zero experience and nobody to offer any guidance.

I ended up selecting the X-keys XK-68 Jog & Shuttle, which has a combination of three input types: an analog wheel, a dial, and dozens of buttons!

Designing the Layout & Functionality

BrowserCommand Layout

I used ControllerMate to build a keyboard layout. In order to resize an application's window I had to write custom scripts in AppleScript (which I don't know how to write), so I looked up a lot of questions on StackOverflow and found everything I need already explained with examples. The rest of the layout was able to be built using ControllerMate's wonderful built-in features.

Using ControllerMate is halfway between programming and playing with Lego, and I really appreciate the time they spent making the learning curve as small as possible. Before long, I had fleshed out my keyboard layout mockup into a working controller layout, and I had windows dancing across my screen like magic!

Here's the design of the controller file that represents the layout in the image above. You'll notice on the right side that I'm still experimenting with how best to make use of the dial:

My ControllerMate Layout

Usage & Aftermath

After using my keyboard, which I christened ‘BrowserCommand’, for almost a year it's time to reflect on what this whole experience has taught me. Here's a video of me testing my keyboard as I work on my controller file. My hands were off the computer during this entire video, every interaction comes from the keyboard:

And here's what my hands were doing during the recording:

I still use my keyboard when I am doing responsive CSS work, and it probably shaves a a few minutes off each hour of work for those tasks. I have continued in my quest for faster input. I have recognized patterns in my typing and moved those into a snippets file that I have loaded into my editor, and as an abbreviation at an OS level that works in most applications.

This experience has also encouraged me to invest in building more custom tools to help me do my work.

Custom Tools

SpeedTest: Responsive Web Testing

One of the tools I built has a feature similar to the window-resizing functionality of my keyboard. Now I can use the main benefit of my keyboard on every device, even devices that don't have keyboards or browsers that can resize. Amazing!

Sourceror: View Source

My keyboard lets me test websites responsively in a fast way on my MacBook, but my SpeedTest app lets me test websites on mobile devices - so I get a lot more use out of my phone and tablet for web testing now.

Now that I am able to do more work from mobile, I also needed a way to quickly view the source code of a web page. Desktop browsers let you ‘View Source’, but mobile web browsers don't. I built a simple one-line PHP proxy that could load a website and then display the source, and now I am able to view the source of any website on my phone and tablet.