Why

I don’t think I need to say anything about why we want to use the keyboard over a mouse: All the geeks love it, and it’s just more efficiency.

However when we come to web visiting, it is not easy to just use our keyboard. Of cause we can use text based browsers like links, w3m, or lynx, they are totally keyboard driven, but they also missed lots of good stuff on the web: the images, the videos, the cool AJAX thing, etc.

Today we’ll use the full featured Firefox, and make it to be fully comfortable to use with your keyboard.

First things first: How to select links with keyboard?

Because the nature of web page design, many designers won’t pay attention to make their pages suitable for keyboard navigation, for example, many of them won’t consider tab sequence. So using the tab key hardly work.

One feature that catch many eyes when Firefox was yang is its Find As You Type. You can type in a string in an active Firefox window, and Firefox will find the phase you typed in the page. You can set if you want to find in all the text or in the links only. One trick: If you type a ‘ before type in other characters, Firefox will only find links with that phase in (We’ll find out why this is handy later). So, we can easily locate links that are marked as a text.

However, what about the links with an image? For example the many menu systems on the web? First we will need to mark the links with some characters, and then we’ll type in the characters to choose the link. There are some Firefox extensions can do this, and from my point of view, HaH is the best.

HaH is a short for “Hit a Hint”. And it will allow you to hit a hint

There are two modes in HaH: the normal mode, and the magic mode.

For normal mode, you can hit the H key, and all click-able stuff will be marked with some numbers and characters. You can type in the characters on the link you want to follow, seeing the mark got highlighted. And then you can hit the RET key to follow that link. If you find out you made a typo, don’t worry, just type H again and all the marks will disappear. You can enable them again and type in the correct one.

For magic mode, you can just hit the magic key (SPACE by default) and hold it, again the marks will appear, now you can type in the characters while holding the magic key, and when you release the magic key, the current link, which is highlighted, is followed. This takes less key strokes and I find it quite comfortable.

Besides the magic key, another feature makes HaH the best is that we can configure what characters will be used for the mark. Others might just use the number keys, or maybe use the numpad. However number keys are hard to type, and some times, for example, when you are on a notebook, you don’t have a numpad. My personal favorite is “asdfqwer”, which are on the main area of the left hand. So I can hit the magic key with right hand, hit the hint with little move of my fingers, optionally hold the ctrl key for open in new tab, and finally release the magic key to follow the link.

Another reason to choose HaH is its efficiency: most others will mark all the links in the page. HaH will only mark those that are visible. This makes HaH more efficient in two ways:

• Marking part of all the links takes less time, this is significant when viewing large documents, like a manual.
• The marks use less letters, which results in less key strokes. Take my “asdfqwer” as an example, The first eight links visible will always be marked with only one letter, and the following 56 links will be marked with two letters. I seldom need to type three letters to find a link and never used four.

Make it more comfortable: Next Please!

Having keys for all the link is cool, but sometimes we want more: For example, when we are on Google or some sites that split a long article to several pages, most time we just want the “next page” link. And well, some times the “previous” page

And NextPlease is exactly what we want. By default it can find the right next link on many sites, and if it didn’t find one for you, simply right click on the link and select “mark as next” and it will learn what to do, and remember it. So the next time you are on this site, you are all set

It is extremely useful when reading documents, specially those auto generated. You can almost read with only one finger.

And the neighbors: What other choice do we have?

If you like the build in Find As You Type way, you may find yourself typing Ctrl-g (for find-next) many times. For this Unique Link Names could help you. It will add two random characters at the beginning of non-unique links or similar link names. This makes the page a little ugly, but keyboard navigation with Find As You Type becomes quite efficient.

As we said above, there are other extensions that works like HaH:

• NumberFox mark the links with numbers
• Mouseless Browsing makes good use of the numpad

Just try them out and see if you like them.

Make it your way: use keyconfig to configure your own key bindings

Well if you are really a keyboard lover, after settle down the problem of selecting links, you’ll want to do everything with your keyboard: calling menu items, switch to the next tab, etc, and customize the default key bindings to fit your style.

For this, keyconfig is a must. After installing it and restarting Firefox, press Ctrl-Shift-F12 and the main configure window will show up. Here you can find all the functions that are available for a shortcut. You can assign new key bindings to a function, resolve shortcut conflicts (a primary reason “why this keyboard shortcut won’t work for me”), and even write your own functions and assign a key shortcut for it. This, makes Firefox catch up the customization level of Emacs, just with Javascript instead of elisp

Keyconfig friends: Functions for keyconfig and surfkeys

Well keyconfig is good, sometimes some “common” functions are not build in. Don’t worry, you won’t need to do Javascript programming if all you want is the “common” ones. There a two extensions that are best friends of keyconfig: they provide the most commonly used functions with rarely used keyboard shortcuts, so you can assign the keyboard shortcuts you like to the functions you want, easy, just as any other build in functions. And they are: functions for keyconfig and surfkeys.

In the keyconfig main menu, you can sort the functions with their names (the first column). All functions from functions for keyconfig start with f4kc_ and those from surfkeys start with sk. Note there are some duplicates from these two, you can use either one you like. Or, you can set different shortcuts to similar functions, for example, j for skScrollDown and Ctrl-n for f4kc_ScrollLineDown, so both Emacs users and VI users are happy

And more for Keyconfig: some more functions

And finally, if you still didn’t find the right function you want, you may need to start doing Javascript programming. But before that, here is a list of what I’ve got. Some were written from scratch, and some were copied or modified from the Internet.

This will focus the content, in case you don’t know where the keyboard focus is:

This will paste what is in the clipboard into the location bar, open it in a new tab, and focus on that tab:

If you don’t want to focus on the new tab, use this one:

In the Firefox options dialog you can choose if you want to focus on the tab to the right of the current one or the last visited one after closing a tab. This snip will focus on the one to the left of the closed one:

The following four will move the location of the current tab, on the tab bar list, useful if you have a lot of tabs and want to organize them.

To the end:

To the beginning:

To the left:

And to the right:

And if you are using Separe to help organizing your tabs, this will open a new Separe for you:

Deal with the forms: Mozex

Nowadays the web becomes more and more interactive, and we need to fill more and more forms. Though we can use DEL, backspace, and arrow keys to do basic editing there, the textarea are always too small to be comfortable with and don’t have those cool shortcut keys we like.

Note: for Emacs users on a Unix like system: put the following two lines (You may need to change the path name of the first line to fit your system):

into your ~/.gtkrc-2.0 file and you could get some familiar key bindings in the testarea. But what about all the other users?

Mozex is an extension that can call external programs within Firefox. We will just use its ability to handle textarea here: Open the setup dialog of Mozex and go to the Textarea tab, here you can specify your favorite editor, and among many other options, you can set the hotkey for it.

Now if you want to write a loooong comment, just press that hotkey, and your favorite editor will show up and all your facilities are there. If you do a save in your editor, all what you have right now will appear in the textarea. And if you close the newly opened document in your editor, everything will be in the textarea too.

To make this more convenience, if there are more than one textarea in the page, Mozex will popup a window with names of all of them, and you can choose one with the arrow keys and RET. No mouse is needed, everything is handled

The new way to use bookmark: My Portal

Everyone uses the bookmark system. However, navigating the bookmarks with the arrow keys is a suffer, especially if you have a lot of bookmarks.

One trick is that you can type the first letter of the bookmark name, Firefox will find the first bookmark matched. And if you hit the same letter again, the second match is focused.

Another trick is to use the search function of the bookmark sidebar, activated by Ctrl-B by default. You can quickly find the bookmark with the keyword you want. If there are several bookmark matched, you can hit TAB once and then use the arrow keys to select the one you want.

However, sometimes, those are just not enough… My Portal comes handy if that’s what you think

My Portal will make a web page, a live web page, from all your bookmarks. Just type in myportal:// in the location bar and you are there. On this page you can select folders, sub-folders, and bookmarks. All the tools we talked about in First things first: How to select links with keyboard? works here. So, feel at home

GreasMoney scripts to make the life more easier: Linkify Plus, GoogleAutoPager, and pagerization

GreasMonkey is, well, Grease Monkey It allows you to customize the way webpages look and function. (from the official web site). It is another extension that makes Firefox catch up the customization level of Emacs.

Among the several thousands scripts available, lots of them can help our Firefox life with keyboard. Here are two that I find useful:

• Linkify Plus will make URLs in plain text into links. That is, this text:

  http://www.mozilla.com/firefox

  is an URL, but you can’t click it with a mouse or follow it with the keyboard, cause this is not a link. Linkify Plus will search the whole page, and make anything like this into a link. So again, all the tools we talked about in First things first: How to select links with keyboard? are available. And we can easily follow this URL with our keyboard.

• GoogleAutoPager, and pagerization are doing the same thing: Instead of making the next page available with a key stroke, like what NextPlease does, they automatically fetch the next page, and append it at the end of the current page. So when you are scrolling down, no matter what keyboard shortcut you are using, the next page just shows up

  The difference between these two is that GoogleAutoPager only works on google.com, and pagerization works on many other sites. You are fine most of the time if you only use pagerization, however if you also use some of the Google experimental features, well, at least for now, you’ll need GoogleAutoPager too.

To make these all together

OK, after making all these tools together, now with Firefox, we can follow links, access functions, use bookmarks, arrange tabs, and we have many tricks to make our web life with keyboard easier.

Now the only thing left is how to do Right Click with keyboard. Crazy? Shift-F10 will do some help on most systems, but it is not context sensitive, that is, it won’t take where the mouse pointer or keyboard focus is into consideration. If you know a solution, please let me know

Share This

Just go and get the web developer plugin. And go to options->options in the web developer toolbar. In the “view source” tab, there is a “view source with” field. Here you can define as many editors as you like, and have shortcut keys for them.

Nice? They are also available in the “view source” button on the web developer toolbar

SSRSDA

Share This

And many people using Firefox are using the quick search. To add this
feature to the quick search, just add
“esrch=RefinementBarLhsGradientPreview&” to the Location. For me,
currently it is like this:

http://www.google.com/search?esrch=RefinementBarLhsGradientPreview&q=%s&hl=en&lr=&newwindow=1&safe=off&rls=org.mozilla%3Aen-US%3Aofficial

So, quick access to the left navigator. And there is right hand
navigator too.

Share This

This is, because when Firefox find out what I type is not an URL (there’s space in it), it will look the string as search keyword and return me the result of the google feeling lucky feature. Most of the time this is what we want.

And to make firefox start this feature, you’ll need to make the input like a search string, or don’t like an URL. For example, if you input “internet”, firefox will add “www.” as prefix and “.com”, “.org”, or “.net” etc as postfix (depending on your settings) and won’t send this to google. Adding two or more kewords seperated by a space is the most comfortable thing. And if you are a Non-English user like me, you can try type in your language. For me, If I type “北京” (The Chinese words for BeiJing, the captial of China), it will bring me to http://www.beijing.gov.cn/. Pretty good match.

And finially, for the tech stuff, according to this page, these two about:config settings are related:

keyword.URL

URL to use for keyword lookups. Default value is http://www.google.com/search?btnI=I%27m+Feeling+Lucky&ie=UTF-8&oe=UTF-8&q= in Firefox 1.0.

keyword.enabled

Determines whether to use keywords True (default): Send non-URLs entered in the Location Bar to the URL specified in keyword.URL False: Disable keywords

So this is on by default. Of cause if you don’t like the feeling lucky feature and want to see the list of search result, you can go and change the URL, or even switch to another search engine. Personaly I have quick search for google bind to “g” so I can archive the search result list by “g fvwm manual” in the address bar, and this combination makes me “feeling lucky”

Share This

The good news is, with key config and grease monkey, easy scripting like in Emacs is possible.

Grease Monkey allows several script to run when the current domain match a regrexp, which is perfect for non-interactive usage like highlight the search terms.

However some of the grease monkey scripts are urgly: I’d have a script that fill up a form if I hit a key. And when I look at the code, it hooks to every key-release event. And if you have lots of this kind of script, it will slow down your Firefox. And this is where key config comes. I’ve blog it several times. However, besides re-map the key bindings, it allows us to write our own script and assign a key to it, and/or call a function of another extension.

For example, I discovered the “freeze tab” from tab min plus today. And a single line

in prefs.js makes it easy to toggle by Alt-Shift-p. Really handy.

The only thing left is mouse customize. conquer plus drag de go could do something, but it use it’s own script and is only for search things around. All in one gesture may support scripting in the future release. I saw a “add gesture” inactived button in the interface. Anyway I’m a keyboard user and this doesn’t hurt me that much

Share This

However I found drag de go and conquer together could do a better job: “drag de go” is a folk and enhanced version of “super drag and go”. Needless to see this adds a lot of drag stuff. And one best thing is, it now support mouse gestures and can invoke conquer. So now with my current config, I can select some text, drag that to the left, and the conquer hot menu will show up and I can select which search engine I want to search my selection with. Though I’m a keyboard user, this mouse thing is really handy

Here are 2 conquer plugins I just made. I also have them in the quick search bookmark:

• search the firefox addon
• search baidu for MP3 (Chinese)

usage: download the files and copy them to your firefox searchplugin directory, and…. enjoy

Share This

• Most of the time I just swith to the left or right tab. I use the f4kc_NextTab and f4kc_PrevTab from the functions 4 Key Config extension.
• When I have some more tabs, I use the switch tab function from the Tab min Plus extension. This shows a smll window with the title of tabs and I can select by C-tab and C-S-tab. Like in opera or Alt-tab on Windows OS. I configured it to sort by visit order so it matches my Fvwm settings.
• When I have a lot tabs and I want to switch to a specific tab. I use the reveal extension. With this I can locate the tab I want by typing part of the URL or title. Like the ido-mode for Emacs. I don’t like the eye kandys so I set the image to be as small as possible.

So here it is. And as always, no mouse

Share This

• I don’t have a number pad and it’s hard to type numbers as my hands will slightly move away from its main area.
• The default style makes the page a little crappy.

However today I’ve found another extension that it’s possible to really through my mouse: Hit a hint. I prefer this over mouseless brosesing because:

1. I don’t have a num pad and it’s not very convience to hit the numbers. HaH makes it possible to use the main area of the key board.
2. Mouseless add numbers to the link of the whole page and HaH only add to the visiable links. Much faster.
3. I like the magic key! The page looks as-is when I don’t have HaH actived.

This extension with keyconfig really makes mouseless browsing possible. Well, except some AJAX sites that depends on a.hover

Share This

Checking the code and I found when this extension checks the navigator.platform to see if “\r”, “\n”, o “\r\n” should be used in unction eol(), it doesn’t take freebsd into account. This could be easily fixed by adding freebsd in. I think I’ll write the author for this.

One good thing of this extension is that it’s customizable. For example, I’m a Emacs planner user. And I take notes of web pages from time to time. Most of the time my note will take the page title and note title, with some words from that page as description, and at the end a link to that page. For this I have the following in my user.js:

And now I can copy what I want with 2 clicks, switch to Emacs planner page, type C-c C-o C-o C-y, and everything is done.

Share This

A small script myamule looks like

amulecmd –command=”add $1″
And in Firefox, set network.protocol-handler.external.ed2k to boolean true, and network.protocol-handler.app.ed2k to string /path/to/script/myamule. Firefox will ask if you want to use this external program, if you don’t like it, add network.protocol-handler.warn-external.ed2k as boolean false.

Share This