Browsing the web has always been for me, a love and hate relationship with using my mouse. There’s something satisfying, but also somehow simultaneously annoying about the notch-y, grinding sound of the scroll wheel.
I should mention that I’m not a purist, and I’m neither pro-mouse or anti-mouse.
The cursor is definitely a useful tool, and for certain web applications, you won’t be able to completely avoid using a mouse.
That being said, I’m not a fan of vi/vim for text editing. Yes, I’ve used it before, and yes there are arguments to made as to why it’s better for heavy text editing (eg software development).
I can say however, that vi shortcuts are very efficient. But this post isn’t about why you should using vi.
This is about why you might want to try using vi-style keyboard shortcuts for handling 90%+ of your browser’s navigation and control.
I’ve been using Surfingkeys for a couple weeks now, and I can say that using vi shortcuts for web browser navigation is becoming a pleasurable norm for me.
Want to switch between your last used two tabs?
Need to copy the URL of the current page?
What about copying the text of an element?
Not a problem:
Or maybe you just want to click on the first textbox of a form to start filling it out?
Challenge me brah:
For pretty much everything that I do on the web (and probably much of what you need to do as well), it can be done more efficiently with a few simple keystrokes than simply defaulting to a mouse or trackpad.
Grab the browser extensions for Chrome, Firefox, or Edge (ew).
Below is a quick start list of my most commonly used shortcuts. It is by no means definitive.
These shortcuts cover about 90% of web browsing navigation/controls on a day-to-day basis for me.
Note that comments with an * mean that you have to type in the shortcut within the current page’s yellow tags attached to the links/sections of interest to complete the action.
This can be thought of as clicking a link, or selecting/copying text.
|Go to tab on immediate left
|Go to tab on immediate right
|Toggle between last used tabs
|Open a new tab
|Close current tab
The Surfingkeys shortcuts don’t immediately put the cursor in the browser bar when you open a new tab which is annoying.
x usually works with an already open page, however if you accidentally opened a new tab,
x doesn’t work.
From my experience with on Firefox, the default commands below still work more consistently for opening and closing new tabs.
|Open a new tab
|Close current tab
|Select address bar / omnibar
|Scroll half page up
|Scroll half page down
|Scroll to top of page
|Scroll to bottom of page
|Search within a page
|Go to next found text
|Go to previous found text
|Show the Surfingkeys usage shortcuts modal
|Close Surfingkeys shortcuts modal/omnibar
|* Follow a link
|* Go to edit box
|Go to first edit box
|* Open link in non-active new tab
Also, remember that
<tab> works pretty much universally on all systems to navigate through forms. And don’t forget about
<space> for ticking those form checkboxes either.
|Go back in history
|Go forward in history
|Copy the current page’s URL to the clipboard
|Copy the current page’s title to the clipboard
|* Copy a link on the current page to the clipboard
I’ll probably add more to this list as time goes on, but for now, this is what works for me.
It’s obviously not for everyone, and I still rely on my trackpad for certain things. But if you like being in states of continuous flow, and the smallest things (like using your mouse) distract you, then I think this might be worth a try.