DEV Community

Bartosz Gordon
Bartosz Gordon

Posted on • Edited on

Going (almost) mouseless: browsers

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.

Originally posted on Medium.

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.

Top comments (14)

Collapse
 
link2twenty profile image
Andrew Bone

CTRL + SHIFT + T is useful it reopens the last closed tab

Collapse
 
bgord profile image
Bartosz Gordon

Definitely, I like it so much. It deserved the LEVEL 1 section :)

Collapse
 
lonelydev profile image
Eakan

Not sure if the following shortcuts you mentioned with Alt is something operating system specific.
But on windows 10 for me, it is definitely Ctrl and not Alt.

Go to the n-th tab — Ctrl+ N (works for 1st-8th tab)
Go to the last tab — Ctrl+ 9

Collapse
 
bgord profile image
Bartosz Gordon

As far as I know, prefixes may differ based on the operating system. I added an additional info about this particular problem to the beginning of the article :)

Collapse
 
kapouer profile image
Jérémy Lal

Seconded. While i hate learning odd shortcuts (think vim) i am totally fond of not having to move the arm to get that mouse to do a trivial task like click "ok". The more i get old, the more i understand how one can go from "that's cool" to "that's necessary". Accessibility rules !

Collapse
 
nans profile image
Nans Dumortier

Hey! Great article :)
Do you plan to write other articles, like "Going almost mouseless: code editor" or something like that ? I think it would be nice !

Collapse
 
bgord profile image
Bartosz Gordon

Hi, thank you! Yes, that's the plan, the next article is going to be about editors :)

Collapse
 
nans profile image
Nans Dumortier

Alright, you earned a new follower 😁

Collapse
 
porkopek profile image
Porkopek

I'm like you, I hate to interrupt my productivity by grabbing the mouse. That's why I've created an extension (well, a little js snippet) that helps me to focus on search text boxes by pressing the Esc key. Works on most sites

chrome.google.com/webstore/detail/...

Collapse
 
anduser96 profile image
Andrei Gatej

Here's another one: ALT + D + ENTER - duplicate tab

Collapse
 
agarwalakash profile image
Akash Agarwal

I'm telling ya Vimium is the way!

Collapse
 
bgord profile image
Bartosz Gordon

You got me, Vimium 4 life :) I've been using it for 2 months, ever since I entirely switched to VIM. There's no place like home row :)

Collapse
 
bgord profile image
Bartosz Gordon

Thank you. I added an additional info about this particular problem to the beginning of the article :)

Collapse
 
kapouer profile image
Jérémy Lal

For example ctrl+enter works here...