Show HN: I built a little browser game to practice Vim commands (hjkl.duy.run)

39 pointsby dh10118 hours ago27 comments

I made hjkl to help myself remember Vim commands. It’s a little browser game you can play when you want to unwind and get a bit of Vim practice in.

There are still a lot of commands I want to add, but I hope someone finds it useful in the meantime :)

glibg10b 4 hours ago

For all of the ciw examples, ce is easier since the cursor is at the first letter of the word.

Where dw works, this game teaches vlllld instead, which is a bad habit to teach.

Ctrl+A increments the first number after the cursor, which is easier than, say, f6r7 in cases where they do the same thing. Similarly, Ctrl+X decrements.

t:t: is weird when fY is much easier.

The Vim simulator has a minor difference compared to real Vim:

    0
    0

Start on line one and do CTRL-V then j then CTRL-A. Real Vim would increment both. The simulator only increments the one under the cursor.

autuni 2 hours ago

I have considered getting into Vim a couple of times because it always seemed like the thing to do, but never did.

It does not make sense to me that I should use an editor I need to study and practice for. It can't possibly that much more efficient, especially given that usually speed is not the limiting factor for what I do.

Maybe one day I will be tempted to find out why it's supposedly worth it again.

glibg10b 2 hours ago

For me, it's about comfort. No need to bounce my right hand between the home row, the arrow keys and the mouse. No need to stretch my left pinky to Ctrl and Shift for every shortcut. Everything is near the home row in Vim, by design.

zzril 2 hours ago

Comfort and reducing context switching overhead. Targeting a specific screen area with the mouse just takes way too much attention.

ro-ka 2 hours ago

I felt the same and never got into vim. What clicked for me however is helix and I love it. Brings everything out of the box and the mental model fits me better (select, then action).

https://helix-editor.com/

wiseowise 2 hours ago

> It can't possibly that much more efficient,

It is. And I’m not even an advanced Vim user.

> especially given that usually speed is not the limiting factor for what I do.

For me it’s not so much about speed as about comfort. Jumping into VISUAL and selecting something in a block, yanking the line, jumping pages, editors, searching within the file, filtering, sorting. And the most important part is that because it is so old and widespread there’s pretty much vim mode for any editor so I can use the same shortcuts between vim, VScode, IntelliJ, etc.

bbeonx 2 hours ago

(a) vim is super powerful (b) vim is way faster to edit, navigate, etc (c) it really doesn't matter that much

do the thing you enjoy :)

TonyStr 2 hours ago

Does it make sense that you should use a keyboard you need to study and practice for? Because I'm willing to bet you didn't instantly learn touch typing the first time you laid eyes on a keyboard. I would also bet that you didn't know about ctrl c, ctrl v, ctrl x, multiple cursors, tab, and so many other things that you now take for granted in code editors and elsewhere. Vim is just like that - a little foreign in the start, but after using it for a while it becomes second nature. You can learn just the basics and be productive in a couple of days, then you have the rest of your life to learn the more advanced features like terminal mode or macros and so on. Though it seems most people (me included) get really excited about learning vim once we get into it, and start sprinting through a bunch of features. That can make it seem a bit overwhelming.

ThrustVectoring an hour ago

The real strength of vim (and emacs, though I haven't learned emacs to know this firsthand) is the expressivity of it rather than the raw speed. When you can express an edit as a sequence of key presses, you can record and replay that to easily and make the "same edit" in many places.

The funniest time I did this was with a interview screening question which had a hundred-deep chain of links with the URL for the next link embedded in some JSON with some additional formatting required to get a working link. Vim let me copy a line of text that's a curl command, shell out to replace it with the ~6 lines of JSON response, edit that as a string down to a curl command to the next URL, and wrap that entire process up as a macro to run a hundred times.

tsegers an hour ago

I still vividly remember a peer watching me carefully record a vim macro, thinking I was just editing. Right as he said "Why are you so slow?!?", I ran `100@q` to apply the edit to the whole file. Just "oh." after that.

TheBuc 22 minutes ago

Cool, this could be a big help for those just starting out!

zzril 2 hours ago

I was somewhat irritated that the exercises allow you to stay in insert mode at the end. I think it might do better at teaching the concept of an "edit" as a single, repeatable action by requiring you to go back to normal mode.

usrme 5 hours ago

I did the first challenge or exercise, but I was honestly a little surprised that Vim motions aren't able to be used to choose the next exercise(s) in the sidebar that becomes visible. That could potentially be something that the player unlocks later on as well.

dh1011 5 hours ago

Good idea! I will work on this.

parasti 3 hours ago

This got a laugh out of me. I guess I practiced vim commands in the most boring way - by using vim.

internet_points 2 hours ago

The best game to learn hjkl movement will always be nethack :)

jaydonb 5 hours ago

This is great, definitely going to be using this to practice!

One note: It might be useful to keep the "undo" prompt when the user messes up after the first two prompted lessons for a clear recovery path.

Thank you for making this!

dh1011 5 hours ago

Thanks for the suggestion! I will add that in.

francescobonomi 2 hours ago

This unlocked the memory of when I first used vimtutor and discovered the beautiful world of vim, that was also a great resource

alabhyajindal 4 hours ago

very cool! one feedback - when i selected all skills the game started with all the options of "fix a typo" first - i would like a version where all the challenges are jumbled up.

also there is an opportunity to turn this into something like vim.golf but in the browser

etuil 3 hours ago

the marker "ma" exercises are a bit confusing since you do make a marker but in most cases you don't have to go back to make a change to that marker

anil_gr 5 hours ago

Cool, a small ux issue I noticed is that the grid cells are not clickable as a whole.

dh1011 5 hours ago

Agreed, it would be nicer if the whole cell were clickable. I’ll work on this. I also recommend to use hjkl to navigate and Space to select. I think that’s more fun :).

sponno 4 hours ago

Very annoyed I cannot operate the website with the keyboard, have to do the practices then use my mouse.

syngrog66 3 hours ago

vim use is whats reliably helped me to remember vim commands. a bonus is I can use the same tactic for all other software and in many other domains where I'd like to keep related skills fresh in mind, at figurative fingertips

senectus1 5 hours ago

oh man this is great. thank you!

dh1011 5 hours ago

Thanks for trying it out!