How to choose keyboard shortcuts

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

How to choose keyboard shortcuts

There are four kinds of keyboard shortcuts:

  1. Single-key shortcuts
  2. Single-key with modifiers
  3. A sequence of keys
  4. A sequence of keys with modifiers

Single-key shortcuts

Single-key shortcuts are shortcuts that activates with a single keystroke. For example, you can use b to open “Boards” in Trello.

Pressing b on Trello opens up Boards.

Another example. You can press c to compose a new email in Gmail.

Composing gmail

Some sites implement shortcuts with lowercased keys only. An example is Trello. Nothing happens if you hit b with the Caps lock turned on.

Other sites, like Gmail, implement case-insensitive shortcuts. The compose new email window opens when you hit c, regardless whether the Caps lock is turned on.

Note: Shift + c is different from CapsLock turned on + C. Shift is a different modifier from Caps lock. Developers may use shift to trigger other shortcuts.

Shortcuts with modifiers

Modifiers are keys like Comand, Control, Alt and Shift. We’re used to keyboard shortcuts with modifiers. Examples:

  1. Cut: Command + x on a Mac (Ctrl` + `x in Windows)
  2. Copy: Command + c on a Mac (Ctrl` + `c in Windows)
  3. Paste: Command + v on a Mac (Ctrl` + `v in Windows)

Sequence of keys

If you have a shortcut that requires users to press two or more keys in a specific sequence, the shortcut falls into this category.

One example of a shortcut like this is from GitHub. If you’re on a repository, you can press g + i to go to the issues Tab.

Jumping to the issues page.

Sequence of keys with modifiers

Here, you press two or more keys (with or without modifiers) to activate a shortcut.

These kind of shortcuts are complicated to use and remember. They’re only used as a last resort. You only need them if you’re building something for extreme power users. An example would be a text editor like Visual Studio Code or Sublime Text.

Shortcuts in Visual Studio Code

Pros and Cons of each approach

Single-key shortcuts

Single-key shortcuts are easy to implement (for us developers) and easy to remember (for users). Most web applications use single-key shortcuts.

Here’s the only downside: Users may be afraid of triggering shortcuts accidentally when using the site. (They may also get screwed if their cat walks over their keyboard 🙄)

Shortcuts with Modifiers

You may want to use modifiers to create keyboard shortcuts. This is normal because we’re using shortcuts with modifiers.

The real downside to creating shortcuts with modifier is:

  1. You need to be wary of overwriting system (Mac or PC) shortcuts
  2. You need to be wary of overwriting browser shortcuts
  3. They can be a pain to implement (if you use vanilla JavaScript)

Sequence of keys

I don’t recommend sequences because people find it hard to remember sequences. However, there are cases where sequences make more sense.

One area where sequences make sense is when they’re used for navigation. Here are some examples.

On GitHub:

  1. Go to the code tab: g + c
  2. Go to the issues tab: g + i
  3. Go to pull requests tab: g + p

On Gmail:

  1. Go to inbox: g + i
  2. Go to starred conversations: g + s
  3. Go to drafts: g + d

Key notes for sequence-based shortcuts:

  1. Use as little sequences as possible
  2. Start your sequences with the same key (g for example)
  3. DO NOT attach single-key shortcuts to your sequence’s first key (g in this case)

Sequence of keys with modifiers

Don’t bother using sequences with modifiers. You probably don’t need them. Even Gmail doesn’t need sequences with modifiers!

You only need sequences with modifiers if you’re building something that needs a TON of keyboard shortcuts (and you exhausted all the options above).

(They may be useful for easter eggs though 😏)

Implementation strategy

If you use Vanilla JavaScript, I recommend sticking to single-key shortcuts. They’re easy to remember and implement.

If you want to include modifiers or sequences, I recommend using a keyboard shortcut library. There are many libraries out there on the internet. I also wrote a library myself after researching about keyboard shortcuts 😅. (Unfortunately, I lost the library when my computer crashed 😭).

Let’s start by learning how to create single-key shortcuts.