Going (almost) mouseless: browsers

January 19, 2019

You can read that post on dev.to.

In this post, I'm going to use the Firefox browser's shortcuts as an example. Most of them should work in other — webkit based — browsers too. Prefix for given shortcut may differ based on the operating system.

Why even bother?

The reason I'm writing this article is that I see a field for improvement when it comes to performance during "standard" — mostly mouse-based — navigation.

Of course, not every piece of software has shortcuts, and that's absolutely fine. I imagine using e.g a graphic design app without mouse could be problematic and inefficient. But most of the time, given program shares a handful of them.

The good example may be your browser.

In this article, you're going to learn just enough of shortcuts to perform most frequent tasks like tabs and windows management or powerful text editing. They're grouped into 4 lessons, so you can approach them incrementally.

After you give your navigation control over to the keyboard, you will (probably) never look back. Being able to do the aforementioned things without:

  • moving your hands off the keyboard to the mouse
  • placing the cursor
  • getting your hands back on the keyboard improved my workflow and speed tremendously. This approach shines the most when you're performing many of operations in the row. Saved seconds add up!

Process of learning

The way I approach learning a new set of shortcuts:

  1. write down a few of the shortcuts you want to learn
  2. put them in a visible place — a wallpaper/note/post-it card near your desk
  3. practice until you get comfortable with them.

Then repeat the entire process starting from the first point. After some time, your muscle memory will make it a no-brainer for you.

Tab management

LEVEL 1

  • Open a new tab — Ctrl + T
  • Close current tab — Ctrl + W
  • Restore last closed tab — Ctrl + Shift + T
  • Open a new window — Ctrl + N
  • Reload a page — Ctrl + R

These five commands should already improve your tab management speed. As a bonus point, you can refresh a current tab, and restore the previously closed tab, nerves saved!

LEVEL 2

  • Go to the n-th tab — Alt + N (works for 1st-8th tab)
  • Go to the last tab — Alt + 9
  • Move current tab to the left — Ctrl + Shift + PgUp
  • Move current tab to the right right — Ctrl + Shift + PgDn
  • Focus address line — Ctrl + L

With this five shortcuts, you will be able to focus given tab and move around the tabs themselves. As a bonus point, accessing the address line has been made easier.

LEVEL 3

  • Go to the next focusable element on page — Tab
  • Go to the previous focusable element on page — Shift + Tab
  • Go back to the previous page — Ctrl + [
  • Go forward to the next page — Ctrl + ]
  • Open a new private window — Ctrl + Shift + P

By this level, you'll be able to jump between links, inputs, and other interactive elements on the page. Also, you can navigate back and forth in the current tab browsing history. Wanna open a new private window? You've got it.

LEVEL 4

  • Go to the next word — Ctrl + Arrow Right (when editing text)
  • Go to the previous word — Ctrl + Arrow Left
  • Go to the last word — Ctrl + A + Arrow Right
  • Go to the first word — Ctrl + A + Arrow Left
  • Open history — Ctrl + H

This set of shortcuts will make you more proficient during text navigation.

BONUS: In case you're familiar with VI/VIM, I recommend using an extension that emulates its keybindings. You'll probably find a decent one for your browser. Although usually it's not a one to one mapping.


Profile picture

I'm a full-stack JavaScript developer from Warsaw, Poland with main focus on React, testing, and REST APIs.