Save Your Hands and Save Your Time: Rethinking How to Use a Keyboard

A keyboard is the gateway to code. Your hands are the tools that manage the keyboard. Many people develop pain in their hands from repetitive stress injuries that can seriously damage their ability to code. This talk is about making your keyboard experience as gentle as possible on your hands so your hands are happier and you work more effeciently.

Transcript

John Lindquist: [0:00] A few years ago, I broke my wrist. You can see the scar right there. That's when I decided to start taking hand-held seriously.

[0:09] It's something I've been obsessing about for years, and I'd like to share some of the tips I've picked up with you. My personal pillars of hand-held are resting hands, meaning your hands rest on one spot on the home row and don't move too much from there.

[0:23] Minimal reach, like your fingers aren't stretching very far and trying to reach for keys that are very uncomfortable to get to. Minimal twisting, so your wrists are holding still, and they're at rest as well.

[0:36] Also, efficiency, taking the very complex keyboard shortcuts and breaking them down into much smaller, easier things. Taking complex tasks on the keyboard, and breaking those down into single keystrokes.

[0:51] Now, when it comes to efficiency, it's key to remember that you need to remove steps. Anything that takes a few steps or a long keyboard shortcut, you minimalize that. Those also have to be really easy to set up or else you'll never do it.

[1:06] Then they have to be easy to remember or else you'll never remember to use them. It's that combination of knowing very small shortcuts that do much bigger things, which allow you to be much more efficient with your keyboard than most people are in their everyday jobs.

[1:27] My number-one recommendation is something I refer to as one-shots, meaning you can take your modifier keys like a command. If you just tap on it, you can map that to do a complex keyboard shortcut. The behavior of command when held down will still be the same. When you tap on it, you can have it do something different.

[1:45] The same goes for option, shift, and the other command option, control and shift because you can separate the left command from the right command and have them do separate things. For me, when I tap on my right command in Visual Studio Code, my file picker shows up. Or when I tap on my right ALT in code, the command palette opens up because that's something I use quite a lot.

[2:12] Also, my left command will focus on the editor, and my right command will focus on the terminal. You'll see, if you watch the cursor here and here, I'll hit left command, left ALT, left command, left ALT. You can see I'm toggling back and forth between the editor and the terminal just by tapping on a single key.

[2:33] Now in Chrome, if I tap on left command, it makes new tabs. If I tap on left ALT, it closes tabs. I can quickly open and close tabs that way.

[2:42] Or, if I have a bunch of tabs open, I also have some shortcuts I'll talk about later where I can quickly navigate back and forth between tabs, so I can go here, close. Go over here, close. Open a couple more and close, close, close, close. Have complete control with single keys moving between my tabs and opening and closing them.

[3:06] I also take the same techniques into my other applications like in Screenflow a single key will ripple delete, or in Ableton, which is a music production software, a single key can turn grids on and off, or add new MIDI tracks, or add new instruments. I can do all that with single keys.

[3:23] You have to find the most common things you're using each application and bind them to those keys because they're easiest to use. You just tap on them and save yourself from even doing a keyboard shortcut. You're just tapping on a single key.

[3:39] The software I use for configuring my keyboard shortcuts is called Karabiner-Elements. I use something called Goku for generating all the JSON required to do complex modifications.

[3:52] That uses an EDN format or extensible data notation, which transpiles to JSON, which is all just a bunch of fancy words for a file that looks like this where you have a key like an E, and you map that to a command or an S, and you map that to a !! S.

[4:13] It's all keys on the left side and the thing you want it to do on the right side. There's my left command, left_option, right_option, right_control, and the stuff I want it to do on the right side.

[4:27] Don't be too intimidated by it. I know it's new and different, but if you lean into the examples, you'll see that when Code is open, it'll do these things, or sections when Miro is open, it'll do these things. When Slack is open, it'll do these things. I can go through and customize keyboard shortcuts per application or even globally.

[4:49] My general approach here is to leave application shortcuts untouched, meaning that I don't go into preferences and configure shortcuts inside of applications. What I'll do is I'll come up here and capture them, so say I have go_to_file, which is command+P, or I have insert_line_below, which is command+return.

[5:13] Once those are captured here, I can just use this to map to that down here, so return_or_enter maps to this, and that does that when I'm in something called f-mode. Similarly, autocomplete is semicolon when I'm in f-mode.

[5:31] Now, f-mode brings me to my next topic of keeping your hands at rest in the home row. By home row, I mean these keys right here where your fingers rest when they're sitting on the keyboard. Your left index finger rests here on the F key and your right one on the J key.

[5:48] When I'm talking about f-mode, I'm talking about the ability to hold down the F key and make other keys do something different than what their defaults are. Vim users are used to using these keys for movement, for moving the cursor left, down, up, and right. What I did with f-mode is when I hold down F, I can move my cursor left, down, up, and right.

[6:18] This will be a little silly to demonstrate on screen because all you'll see is my cursor moving left, down, up, and right, but just trust me that I'm holding down F, and I'm pressing H, J, K, and L to do this, rather than pressing any sort of arrow key. I honestly haven't touched arrow keys in years.

[6:38] What I can also do with that is with the D key, I can move and select things, or with the A key, I made it so that's alt, so that's alt and move. If you look at this, I'm holding down D and making my movements. You can see I'm shift-selecting things. Or, if I'm holding down A, I'm moving around in words. Alt+up and down moves a line of code up and down.

[7:09] This is just holding down A and pressing J and K to move this line around. Then lastly, one of my decisions I made is that between my alt key and my shift key, I made this one an alt and shift key, so I never have to hold this weird combination of this key and this key.

[7:25] I can just hold this single key down, and then when I hold down this and press any of these keys, you'll see I get this very common thing of selecting entire words, so I can move this around or alt+shift up and down is duplicating lines in VSCode.

[7:43] I'll undo all of that. Everything I've done is just letting my hands rest here. My fingers are never reaching for these keys. They're never reaching for these keys. I'm never pressing more than two keys at a time. I'm using where my fingers already are to their fullest extent.

[8:02] I even have caps lock bound to when I press left and right or H and L. That can go to the beginning or end of lines, and J and K can page up and down, so I can easily scroll up and down again with my fingers never leaving the home row.

[8:19] On the flip side, when I hold down the J key, these keys allow me to delete things. If I hold down J and press A, this is going to delete a word to the left. If I hold down J and press F, this will delete a word to the right.

[8:34] Again, you have to trust me this is J and A and this is J and F with my fingers never leaving the home row. Deleting single characters are just J, S, and D forward and backwards, so A, F. Just deleting a whole bunch of stuff right from the home row.

[8:53] I'll undo all of this. Again, I'm taking the most common actions and binding them to single key presses on these. I'm taking the most common movements and deletions, which I do all the time since I'm a developer, and putting them right where my fingers rest.

[9:07] I've also given myself a rule to never try and press more than two keys at the same time, so I never try and do command+shift+F or anything, or control+alt something. Because I have access to making these modifiers, I find ways of binding shortcuts to just two keys that I can remember.

[9:26] Now, I can still type normally. Even my F and J keys that I use all the time. The key here is that in f-mode, you hold down F, and then tap a key, and then release F. It's detecting whether a key has been tapped while this key is still being held down. There's even a timeout if you hold it down long enough. It will start typing it.

[9:50] It does require some practice to be able to do this. Down, down, up, up or down, down, up, up with your various fingers, but I personally think that the practice and discipline of this is well worth reward of comfort and longevity your hands will get.

[10:06] We talked about resting, reaching, and twisting. Let's focus on efficiency where we remove steps and make complex things easy to remember.

[10:15] I'm going to demonstrate that by talking about my Z-mode where, if I hold down Z and then tap one of my characters here, I'll type an emoji. I'll just pull-down Z and start typing some characters, and you'll see some of the emoji that pop up. I'm typing emoji almost as fast as I type normally. The only way you would ever remember any of this is by using some sort of mnemonic.

[10:41] If I do Z and B, I get blush. Z and C is cry. Z and D is dignified. Z and F is facepalm. I left E and N on the emoji_picker where it can pop up, and I can search for emoji. As you're thinking about these shortcuts you're going to use, I think Z means emoji. I think in my mind, "Z-moji." Then I have to think of the character, like B is blush.

[11:10] If my mind thinks I want a cry emoji, I can do ZC. It's Z-moji cry. You do your best to make these memorable to save yourself all these steps in the future. Now to demonstrate how quickly I can set these up, I'm going to duplicate this line. I'll add a Q shortcut. Let's make this the quiet emoji. I'll bring up my emoji_picker. I'll bring this shh emoji. Then I'll just call this one "Quiet."

[11:38] Then, hopefully in the future, I can think, "Oh, I want ZQ for quiet." Or I can duplicate that line, come in here, change this to R. Then I can delete this. We'll drop in the race car. Now we can say this is our race car. When I hit save, everything automatically updates. I can hit ZR, and a race car pops up.

[12:07] Jumping into this file, creating new lines, and mapping into things is a simple copy-and-paste action. For me, even if I have this file closed -- say I'm over here looking at this image -- I have a shortcut of OK, or I have O-mode for opening things and K for Karabiner. If I do my OK, it'll bring up my Karabiner file.

[12:32] Anywhere in my system, I can quickly jump in here, update a shortcut, then create a new one. I always have this file open. I'm always coming back to it. I'm always updating it, playing with it, and practicing and memorizing my shortcuts. If I search for my open-mode, you'll see this shortcut right here. Open-mode is my O key.

[12:52] When I hit K, it'll launch VS Code in this directory with this file. I have similar ones where I can type OC, OB, or OZ, launch these other directories, and jump to specific projects, folders, and files with a simple keyword shortcut. If I go OJ, this will open this file, which just brought it into focus on top of my ScreenFlow screen. I've hit OK. I'll go back. OJ, back, OK, back.

[13:24] I can hop between projects, quickly opening the files. Snippets is a concept you're probably already familiar with, so I use my quote key. When I pull down this and tap keys in here, then I can trigger off some snippets. Say, for example, quote J or quote C or quote N. You'll see it fires off whatever I have in here.

[13:49] If I want control over going back so it's in between characters, then you use this long form. Or, if I just want to type something out, I have a type template. I can use just pass-in text. Now it's something I use all the time because I'm a developer, is my spacebar-mode. I use this for all the symbols on my keyboard, so brackets, parens, braces, and less than.

[14:17] If I just hold down spacebar -- let me comment this out -- and just type stuff like that, I just typed out all those keys. Because ASDF is open bracket/closed bracket, open paren/closed paren, I can just roll my fingers to create a markdown link.

[14:34] I've had years of practicing these, so I don't really use mnemonics for these. If you need to, this could be like array. You could think, "This is an array" or "This is a JavaScript object, so that's the curly brace there." I use these because they're on the home row. Back to resting, I'm resting my hands in the home row. I'm still typing out all the characters I use when writing code.

[15:01] Space equals space is one of the most common things that I type because it's assignment. I would do that by holding down my left shift and typing the spacebar. That's space equals space, like this type going to space equals space by doing a combination of left shift and spacebar, which is something you'd never really think of to hold down this key and then tap this key.

[15:24] Or the other keys in the home row, like this is G. This is H, or this is space and quote, so a bunch of those tiny things where I do not have to move my fingers at all. My thumb rests on the spacebar. My fingers rest on the home row. I'm typing all of these characters without reaching or twisting or stretching at all.

[15:43] This works anywhere on my system whether I'm typing in Chrome, in Code, just in a text file, or anywhere. I can use all of these shortcuts and snippets. The last thing I want to talk about is really advanced. It's finding keys to trigger scripts and passing in arguments. I showed this briefly with the code project targeting files and opening files like that.

[16:05] There's much more advanced scenarios where, if I type QS, this'll pop up an Alfred box where I can search for some word to find a synonym. This will query a synonym API. I can choose a word, then hit Enter, and it'll paste that word in. Similarly, if I type QD and type in a word, you'll see it'll find words that describe that word like most awesome, more awesome, or such awesome.

[16:32] I could enter and paste that word in. The options are pretty limitless as far as how far you want to take this. If you look at how I set up my query template, you'll see it's using AppleScript to trigger Alfred and run a trigger by passing in that synonym or describe or antonyms, arguments. Then Alfred can run other scripts and do things inside of there.

[16:56] You can bind keys to really do anything. You'll see I have a modify where I can actually select some text. I could tell this to modify this text. This capitalized it. I told it to title-case it. I'll show that again. I can title-case that. That's using my modify template. One I'm really proud of is this open-Chrome template where I can hold down tab and hit T. That'll fire open Twitter.

[17:26] I can hold down tab and hit R, which will open Reddit. If I type T, it'll find that Twitter's already open and go back to Twitter. Y would be YouTube. I can just jump around my tabs. Even if I navigate away from them, I can jump back to Twitter really quick and just check it for one second. Then quickly jump back to working on my Karabiner file.

[17:51] Tab T was Twitter. OK was my Karabiner file. I'm thinking new tab, Twitter, so tab T or open Karabiner as my ways to memorize those advanced commands and how I'm navigating my machine.

[18:06] I'm working on a course on how to set all this stuff up. It's mostly just configuration. Then you just copy and paste things, change the keys you want, and bind them to the things you want them to do. The setup can be confusing at times if you don't fully understand it. I'll make sure and walk through everything so it all makes sense.

[18:22] Then the next level even beyond that is using your trackpad. It can count how many fingers are down on the trackpad. Then you can change keyboard shortcuts and your keyboard based on how many fingers are on the trackpad. If you have three fingers on the trackpad and you hit F, you could have that do something.

[18:38] That's something I've been using a lot, especially in ScreenFlow, Ableton, and other media software where I'm using the pointer a lot. I want to do various actions inside the applications. Thank you very much for your time. I really appreciate you watching. Please let me know if you have any questions.