Vi(m) Playground
Vim is a powerful tool, and every popular code editor has a plugin that emulates its features. Yet, many have never tried it. This post will give you a taste of its navigation basics if you’re one of them.
Let me start with a quote from the book Clean Code by Uncle Bob:
…the ratio of time spent reading vs. writing is well over 10:1.
We are constantly reading old code as part of the effort to write new code.
Uncle Bob uses the 10:1 reading vs. writing ratio as an argument for why writing readable code is essential.
But it also works well as an argument for why we should optimize for reading in our editors. And Vim shines at that. It has several modes between which the user can switch, and the default mode is called Normal.
But don’t let the name Normal fool you! There’s nothing ordinary about it if you’re new to Vim. That’s because Normal mode isn’t for typing. So when you press a key like j, instead of printing the letter on the screen, it performs ↓. Arrow keys from the comfort of your home row! To me, this comfort/ergonomy is no.1 reason why I enjoy the Vim way of doing things. The efficiency that arguably comes with it is just a cherry on the top.
The interactive playground below supports only a small subset of commands from Normal mode, but I hope they’ll give you an idea of how it feels. Have a look at the Vim cheat sheet if you’re curious to see more.
There are three groups of rectangles in the playground below:
- Black stand for alphanumeric characters
- All the other colors are special characters (
(,{,") - And gaps are spaces, just like in normal text
The blue cursor should move when you press one of the supported keys. The on-screen keys respond to click for improved touchscreen a11y, but if you’ve got a physical keyboard, I recommend using that.
And that’s it, I hope you played around for a while and that you won’t be scared by Vim anymore!