Design by Typing

I got asked about my three preferred web development tools, and I really wanted to answer with simply “Vim”. The reason I like Vim for HTML is things like cit ("change inner tag"), ci" (change inner quote), and the visual selection and manipulation possibilities created by these motions.

Coincidentally I ran into Design by Typing, a site dedicated to screencasts for Vim and modern web development. It includes examples for things like responsive layouts, SVG, and publishing with npm.

The responsive photo grid example shows the author navigating and editing HTML with motions that you might find useful if you find the idea of working with HTML in Vim difficult.

I’ve seen web designers looking at me using Vim as if I’m doing something incomprehensible, but I think it’s a totally legitimate way to work. You also get a good feel for how to properly structure web pages rather than inventing things in an image editor that are inherently hard to implement.