How to code without a mouse

Dec 31, 2023 ยท 6 minute read

Using a mouse is slow

๐Ÿ”— According to Steve jobs, the mouse "eliminates the large body of knowledge one has to know in order to use a computer". And that makes sense, using a mouse is a very intuitive way to use a computer, just point where you want to go and click! But it's also a very slow way of using a computer. Don't get me wrong, the mouse works great for certain applications: editing complex vector graphics and gaming to name a few, but not for programming.

Let me demonstrate this with a very common developer workflow. I often find myself coding in my editor, and browsing documentation in a browser. If I'm coding and then want to go to a different part of the documentation, with mouse driven development I would:

  1. Feel around for my mouse or take my eyes off my screen to find my mouse.
  2. Once I have found my mouse, I then have to look back at the screen to orient myself to the position of the mouse.
  3. Following the mouse, I can click on what I need.
  4. Then I can use my mouse to go back to my code and put my hands on my keyboard.

Talking about it in steps like this makes it seem more dramatically slow than it really is, but this is what it looks like in real time

Now, this is what's it's like when I don't use the mouse

I know, this demonstration is not very scientific, but it's not meant to be. The important things to notice is that unlike the mouse example, I didn't take my eyes off the screen; eliminating the need to find the mouse and reorient my view on the screen, and most importantly, I DIDN'T TAKE MY HANDS OFF MY KEYBOARD - meaning I can jump right back to what I was doing before.

Now, I realize that from someone who is not used to this type of workflow, saving a few seconds to move a mouse might seem ridiculous. But these "micro saves'' add up - especially when you spend 8+ hours a day working on a computer. These are seconds that can become minutes or hours of really productive work.

So now I want to show you how my development environment is setup, to make this kind of workflow possible.

keyboard driven development environment

Text editor

To start off with let's look at what I spent most of my time in: my text editor. For this I use ๐Ÿ”— vim or more specifically, ๐Ÿ”— neovim, which is a fork of vim. Vim is a text editor that you can very literally communicate with using a series of keyboard shortcuts and commands; making it possible to perform some very intricate text edits which would be very slow in comparison to using a mouse.

To demonstrate, let's look at this simple c program that adds two numbers together using an add function and prints the result.

#include <stdio.h>

int add(int a, int b) { return a + b; }

int main() {
  int result = add(1, 2);
  printf("result: %d\n", result);
  return 0;
}

images-to-video-bin

If I wanted to change the parameters in the add function with a mouse. I would pick up my mouse, highlight the parenthesis, remove the parameters, and add the new ones.

images-to-video-bin

However, using vim, I could simply go to that line and press di( to delete the inside and type my new parameters.

This is a simple example, but it demonstrates those "micro saves" in action - because again, notice how I did all that by keeping my hands on the keyboard the whole time.

I will say that vim has a steep learning curve. It's not a text editor that you can just pickup in a day. It might take weeks or months to get comfortable using it. I have been using it for a few years and I still don't know all the shortcuts and commands, but WOW IS IT WORTH LEARNING TO USE IT.

Web browser

images-to-video-bin

Speaking about vim, let's talk about another of my most used applications: a web browser. My primary browser is Firefox, but lately I have been trying Brave. On Brave, I am using an extension called ๐Ÿ”— vimium. Vimium allows vim-like keyboard shortcuts in the browser. One of those shortcuts is the f key. Using the f key shows hints for clickable elements allowing keyboardless navigation on any website. Vimium is also available for FireFox.

Window manager

images-to-video-bin

Tying everything together is ๐Ÿ”— i3. i3 is a tiling window manager available on Linux distributions. Tiling window managers let you maximize your screen space by arranging your windows in the space available.

images-to-video-bin

This is in comparison to more traditionally floating window managers where windows can be arranged on top of one another in any configuration with the use of a mouse. One of the biggest advantages of tiling window managers is that window navigation and arrangement can all be done without a mouse using keyboard bindings. Furthermore, the bindings and features of are all customizable letting your manager behave just like you want it.

It should be mentioned that although i3 is Linux specific, there are alternatives for other operating systems. ๐Ÿ”— Yabai is a popular choice on MacOS and ๐Ÿ”— Komorebi is available for Windows.

Everything else

As awesome as this setup is, every once in a while I will come across a scenario where a mouse is required. Usually to do something small like click on a button in a GUI driven application. For this, I have a cool trick. My keyboard is a custom open source split keyboard called the ๐Ÿ”— Lily 58 Pro. It runs an open source firmware called ๐Ÿ”— ZMK. ZMK gives me extra functionality that a normal off the shelf keyboard will not have. One of those functions is actually using my keyboard as a mouse. By holding the ESC key and using vim navigation keys, I am able to move the cursor or scroll without needing a mouse. I can then use my thumb keys for right or left clicks.

images-to-video-bin If you don't have a custom keyboard that allows you to do things like this. ๐Ÿ”— Warpd is a good alternative. Warpd is a cross platform program that allows for mouse navigation using your keyboard using a vimium style hint system for your entire screen as well as a grid system allowing you to reach a specific space on your screen through a series of moves making the grid smaller each time.

Conclusion

These are a lot of new programs and concepts that you might not have heard of before, so if you would like me to go more into detail about any of them let me know down in the comments section. But this development setup has allowed me to leave the mouse all together. In fact, I code almost daily. But for the past year, I have not used a mouse. Yet I have been the most productive I have ever been by not using it.