keyboards and web apps, my post/rant for the year

Did you know?

The keyboard as a concept for operating a machine was around for at least 35 years before the mouse came to be. And I'm actually talking nonsense, because it was longer than that. (quick mafs)

And yet.

And yet.

Building a web application to be used by a mouse is easy, reliable and expected. Building a web application so that it can be driven by a keyboard is at best a character building affair.

If you are a web developer in 2023 and your boss/friend/archenemy sweetly asks you to Add Keyboard shortcuts to your company's web app, tell them/they to go f**k themselves do it themselves instead.

Here's a short list of things that will mess with your self-confidence as a developer along the way:

  • Most npm libraries that "deal with" keyboard events use the old and deprecated keyCode API. This API gives you a number to represent the key that was pressed. 38, 38, 40, 40, 37, 39, 37, 39, 66, 65.
  • There is a new API that will tell you what key was pressed by using a set of well-define strings: ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "KeyB", "KeyA"].
    • This is cool. I approve of this. 🫶
    • This is (only somewhat) useful to you if you want to create keyboard shortcuts that are based on what motion your hand makes as they type those shortcuts.
  • Part of the new API is the attribute called "key", which lets you know what character was produced by the keyboard, by the operating system, by the keyboard layout in the operating system, and by the browser inside this operating system. To quote from the spec:
    The "Digit2" and "KeyQ" keys are writing system keys that generate "2" and "q" when the US locale is active and "é" and "a" when the French locale is active.
  • Keyboard layouts exist:
    • Keyboard layouts are a software feature provided by your operating system, that makes a different character come out from the software than the one that was pressed by your fingers.
    • People in other countries (not the US) speak languages with characters that cannot be found on a US keyboard.
    • They prefer to use their keyboards to type words that are not in an English dictionary. (French, Greek, Hebrew)
    • These are innocently called International Keyboard Layouts.
    • Some nerds like to use US keyboards, but remap the keys to mean something different than what is printed on them. (Dvorak, Colemak)
    • Some nerds build their own keyboards 😱 and I promise you you have no idea what will happen when they press a key on it.
  • There is a javascript API that will tell you what character will come out of the mess that is a modern software stack when a specific, named key is pressed.
    • Just don't have users who use Firefox ...
    • or Safari.
  • There is NOT an API that will tell you which key must be pressed in order to produce a specific character. (As an implementer of technologies, I understand, but as a user of technologies, this seems silly)
  • Keyboards have things called "Modifier keys" on them: Alt, Shift, Control, Meta and some less well-known others AltGr, Hyper, Super, Fn
    • Those things modify the meaning of the key that is pressed. Typically you hold down one (or more) of these keys while simultaneously pressing another key.
    • Ctrl-S (means save in most places), Ctrl-Z (undo)
    • Shift-a (means A in most places) etc.
    • Most operating systems have opinions about what those modifier keys might be used for.
    • On Windows, you cannot use Alt-F4 as a keyboard shortcut for anything. Meta-l (Windows L) is also usually off-limits.
    • On MacOSX, pressing the Alt key changes the character of the key being pressed: Alt-J -> Δ
    • On linux, with some window managers, Alt is reserved for dragging a window around. On other linuxes (linuxii?) anything else is possible.
  • "Keyboard events" come in flavours: KeyDown, KeyPress & KeyUp
    • If you hold a key down, it is the KeyDown event that is repeated. This is useful for panning, zooming or adding horizontal whitespace. (just kidding, do you think I'm a barbarian?!)
    • The KeyPress event comes between the KeyDown and the KeyUp event. Sometimes.
    • KeyUp is a decent choice for creating keychords with. (A keychord is a sequence of key presses that together triggers some action)
    • On MacOSX, when you hold down the Meta key, KeyUp's sometimes/often don't fire.
  • These things exist:
    • Compose keys; quoting from Wikipedia:
      A compose key (sometimes called multi key) is a key on a computer keyboard that indicates that the following (usually 2 or more) keystrokes trigger the insertion of an alternate character, typically a precomposed character or a symbol. For instance, typing Compose followed by ~ and then n will insert ñ.
    • Dead keys:
      A dead key is a special kind of modifier key on a mechanical typewriter, or computer keyboard, that is typically used to attach a specific diacritic to a base letter.
    • Alt-codes (on Windows, I believe). Example: In Afrikaans words such as these exist: wêreld & sēening. To produce those characters on a Windows PC you hold down Alt and press in sequence 136 or 137, as the case may be.
    • There's more in this category, but these are the ones I myself have used.
  • Languages that have nothing to do with ancient Rome and Latin and of which I know nothing:
    • 한글 (Korean)
    • にほん · 日本 (Japan)
    • 汉字 (China)
    • עִברִית (Israel)
    • हिंदी or தமிழ் or മലയാളം (merely 3 picked at random from Indian subcontinent)

    • Ask yourself how people who speak (and type!) in these languages use computers created by white, English-speaking men.
To get back on point. Keyboards are hard. Mice are easy. Even web applications that get it mostly right, also get it really wrong, sometimes. (❤️❤️ linear.app ❤️❤️)

If you are in this situation, I have two pieces of advice:

  • Don't. Go home. Have a beer. Kiss your favourite person. Become a carpenter, be free, roam the land. Counting is hard.
  • Are you making games?
    • Use physical keyboard codes and use the getLayoutMap() to indicate to your gamers which characters to try to type to go up or down or left or right.
    • Stick to chrome.
  • Are you making productivity software?
    • Use mnemonics for keyboard shortcuts.
    • Use key sequences for keyboard shortcuts.
    • Avoid modifiers, especially Shift, Alt & Meta
    • Ask for a raise.
☮️