7 ms·
Show HN: I built a web app for learning Vim from the browser as a 17-year-old
Hey HN!
After my own experiences with learning Vim, I wanted to skip the frustrating process of configuring a new tool before even learning how to use it. In an attempt to solve this problem, I started working on Vim Ninja, a web app that would allow developers to learn Vim through interactive lessons in the browser. It’s been a couple of months, and I’m proud to say that I’ve finally released https://VimNinja.com https://VimNinja.com!
Check out a demo of the app here: https://youtu.be/reukQHKqMZE https://youtu.be/reukQHKqMZE.
On the technical side of things, I used SvelteKit to build the entire app and Tailwind, which turned out to be an amazing decision. I actually really like SvelteKit’s filesystem-based router as well as Svelte’s brevity, and Tailwind actually makes styling a fun task for me. I’m using CodeMirror 6 as a base for Vim Ninja’s code editor, and I really prefer it over more feature-packed alternatives like the Monaco Editor, which is what I started out with but soon abandoned due to its worse performance when compared to alternatives like CM6 and the sheer amount of bells and whistles that I just didn’t need.
- DouglasPC 3y agoAI NLP Voice IDE - coming soon...
- RaiyanYahya 3y agoLook really nice! congrats
- COil 3y agoLooks nice but "Sign in with Google" = No way.
- HeckFeck 3y agoYeah as nice as this is, the overlap of console editor enthusiasts and those willing to hand yet more data to Google is going to be narrow.
- moomoo11 3y agoWhat if it was email password? Would you prefer that?
- justusthane 3y agoSpeaking personally, absolutely yes.
- cloudking 3y agoYour target audience is anti-Google login lol, listen to the feedback! Great work
- moomoo11 3y agoLol I'm not the one who made this, I am just curious.
- keehun 3y agoYes! Also consider letting people learn without authenticating at all. Those who care to save state/progress can log in. If you had an opportunistic "great job on completing level 10! if you want to save your progress, register here" message, I bet more people would register as well!
- hk1337 3y agoYou can sign in but you can't sign out.
- urthor 3y agovimtutor is free. This is $15. Really?
- green_man_lives 3y agoIsn't this a forum founded by a venture capitalist/startup guy? I don't understand why you have an issue with someone charging money for something they made.
- VMG 3y agoa venture capitalist would ask this exact question
- green_man_lives 3y agoA fair point, but it seems like their issue is with monetization at all, and not with it being a poor business model.
- mrfinn 3y agoCharge for offering a service. How dare that guy.
- lucky_cloud 3y agovimtutor is free because vim is free There are tons of books and other resources for learning vim that are not free. I'm not sure why you would find that surprising.
- urthor 3y agoI own said books. Used NeoVim for years. Said books are genuinely useful, mostly. Drew Neil's explanation and POV on how to approach Vim, gradually assembling all Vim commands into repeatable period commands. Followed by bundling those commands into recordings with q. Highly endorse Drew Neil. Is incredibly useful. This website offers little more than vimtutor with fancy graphics.
- tyingq 3y ago>I’m using CodeMirror 6 as a base for Vim Ninja’s code editor Interesting. I'd assumed you would have gone with a WASM implementation of Vim, since perhaps more advanced tutorials might need more than just vim-like keybindings. Though I suppose that wouldn't come up until much later.
- conzar 3y agoWhat did you use to make your demo video? I like the focus pans!
- vlugorilla 3y agoI'd also like to know!
- forgotpwd16 3y agoI don't get those interactive learn vi(m) projects. Why not simply use vimtutor?
- nohaydeprobleme 3y agoSpeaking as a person who learned the basics of Vim from vimtutor, a friendly UI can reduce friction. Newer interfaces can also teach very useful commands at the start, making navigation much easier. I was moderately curious about Vim but didn't really need to use the tool, but eventually after many months, I got curious enough to start and complete vimtutor. The introduction to vimtutor says it should take 30 minutes, but it took me 1.5-2 hours over two days while also making notes after the exercises to better remember the lessons (in my case, my approach to vimtutor worked, as I use Vim nearly every day for personal notes to keep practicing). However, I put off vimtutor for months because it looked like work. While completing vimtutor, the process of completion also felt like work. A more friendly UI like the submitted article can help people easily get started and increase completion rates, which makes it easier to pick up the skill. I didn't check if the submitted article does this, but newer interactive Vim tutor projects can also teach commands that I believe are essential to reducing the friction of using Vim. For example, throughout vimtutor I spammed jjjjjj to get down and did the same with k to go up, but only later found out that Ctrl+B & Ctrl+F (go back or forward a half-screen) or Ctrl+U & Ctrl+D (go up or down a full screen) were far easier ways to scroll, or at least 4k or 4j (four lines up or four lines down). This makes Vim much more pleasant to use, and makes it far easier to navigate through a file. Still, I agree that vimtutor is great as it's free and in the console, but is room to make the introduction more friendly. $15 seems pretty steep, though, especially as there are other free alternatives out there to make it easier to learn Vim (at the very least, video tutorials and written guides).
- Dayshine 3y agoAm I missing something with vim tutor? It's just a very short whistle-stop tour of vim right? Nothing that actually helps you use it in any real context! I had to use a proper training tool (vim adventures) before I got enough practice for things to click. And I had to discover a handful of plugins before it was at all usable in a work environment (acejump, code aware motions, IDE integration). Vimtutor is like a jira tutorial. Yes, you're telling me what I can do with you, but what I need to know is how to use you.
- poetril 3y agoThe site looks great and I always love to see some Svelte love. But the "Sign in with Google" is a deal breaker for me. Also seems strange to charge $15 for this when so many free Vim resources exist.
- oli-g 3y agoOne could argue that it seems strange to charge X for anything when free alternatives exist. Ultimately, it is up to anyone to decide whether the "package looks pretty" and the proposed value seems worth it, or whether they want to keep on searching and/or try to build some GitHub repo.
- risyachka 3y ago>> One could argue that it seems strange to charge X for anything when free alternatives exist. Never was. You can make your own food and coffee and clothes, why don’t you?
- deleted 3y ago[deleted]
- pastorhudson 3y agoDon’t let people dissuade you from charging. I think your site looks great. I think the exercise of setting up a payment system is worth it. It did ask me to connect using google. I bailed there since I don’t really want to connect my google account to random things. I’m not actually wanting to learn vim. I know it enough to do whatever I need while ssh’d into random machine. But I do want to encourage you to keep building stuff!
- distcs 3y agoDo these vim tutor web apps provide any advantage over learning with the real Vim with the vimtutor command? Do learners not worry that the web apps might not emulate Vim accurately and the inaccuracies might make you pick up bad habits at best or learn outright wrong keybindings at worst? I mean if you are going to use Vim, you will probably run `vim` sometime. You might well run `vimtutor`. It's a simple command. It's free. It's available with Vim. The whole tutorial is less than 1000 lines long.
- nocsi 3y agoThere’s a market segment of people that do coding tutorials with their iPads at bedtime. You’re not going to sit in actual vim since really, the target audience wants micro lessons
- replete 3y agoThis is cool, but why the google botnet only login?
- abhaynayar 3y agoI wish this was available for people who are not 17 years old.
- seedie 3y agoAs a long time vim user I wonder whats in it for me, so more detail on the 12 available lessons would help. And the promise "to become a 10x developer in no time." is, in my opinion, a bit over the top. I wish mastering a text editor would result in being a "10x dev" :D Only left to say, congrats for launching vimninja.com!
- michael_snowden 3y agoThis looks great. Nice job!
- gapo 3y agoSign in with Google" = Not happening.
- enono 3y ago[flagged]
- enono 3y agoGood job! Love it
- RGBCube 3y agoThe sign in with Google is unnecessary, after all, you haven't bought the product yet.
- _ttg 3y agoI would be more willing to "Sign in with Google" if OP provided any kind of gentle nudge or onboarding a la https://www.keybr.com/ https://www.keybr.com/. It's too blatant and in-your-face as it is.
- ericskiff 3y agoAwesome work and looks great! I'd suggest looking at https://www.shortcutfoo.com/ https://www.shortcutfoo.com/ (which launched on HN very similarly like 12 years ago), and the model they followed, adding different sets of shortcuts and finding a good pricing model. I was a happy customer for years, and it's clear there's a market here. I'd love one for Figma personally
- deleted 3y ago[deleted]
- ereboucas 3y agoGood job! The first lesson was flawless
- amelius 3y agoI love Vim. The only thing that bothers me is: when I open the same file in a different terminal, I don't get the option to kill the other session cleanly.
- mcluck 3y agoNice! Maybe this will help convert some of my friends to the dark side
- Manjuuu 3y agoI misread as "leaving" and thought it was a bit much but understandable. /s It looks nice but I agree with those saying that forcing a login with google is not the best approach.
- dack 3y agoi think it was really cool that you had a working demo of the first lesson right on the main page! I did `dd` and `i hello world!` and already started to feel invested even though I am an emacs user and don't really have a desire to learn vim. I think it's because you get a quick dopamine hit from doing those lessons and also gives you a good idea of how the site might work. I almost wish that first lesson could have just kept going for a while without having to signup or anything. Maybe after you hit like 10 or 20 lessons, or when it starts getting more involved you could then ask for them to sign up / pay. Either way, nice work!
- js4 3y agoAwesome work!
- johncoltrane 3y agoAnd here is the traditional reminder that Vim comes with an extensive manual that is very easy to follow and pretty much guaranteed to take you further than any of those silly online tools: :help user-manual
- distcs 3y agoI wouldn't call it exactly "easy to follow". If you run this, you just get a long list of lessons named usr_01.txt, usr_02.txt, ... The lessons look "clickable" but if you put the cursor on them and press enter, nothing happens. How on earth do you jump to the actual lesson? You need to type CTRL-]. Not something someone just starting out with Vim is going to know. They'll just open :h user-manual and remain stuck there!
- johncoltrane 3y agoWell, if you assume absolute zero previous knowledge, then your "someone just starting out with Vim" won't even know that they have to press Enter after :h user-manual, right. The user manual is the next step after vimtutor, which teaches you how to navigate the help. No need to rush.
- tester457 3y agoDon't let people discourage you from charging because vim-tutor is free. All programming languages have free docs, but most of us do not mind spending on a book on that same language.
- IndigoIncognito 3y agoDo these "As a teen-year old" posts actually work?