DEV Community

loading...

Going (almost) mouseless: browsers

bgord profile image Bartosz Gordon Updated on ・3 min read

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.

Discussion

pic
Editor guide
Collapse
link2twenty profile image
Andrew Bone

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

Collapse
bgord profile image
Bartosz Gordon Author

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 Author

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 Author

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 Author

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
rolypolie profile image
Sky

Great info , some of these didn’t work for me in Firefox for some reason , but the most useful ones did so thanks for this.
The less I can move my mouse the better. 👌

Collapse
bgord profile image
Bartosz Gordon Author

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...