Vim as a Design Tool
Adam Morse
Lesson 49
For many designers, editing and writing text comprises a large chunk of our work. Whether it's writing down ideas, editing code, or comprising an email, text-editing makes up a non-trivial part of our day. With this in mind we'll explore how and why we could use Vim, a command-based text editor, to improve our design workflow.
-
Why learn vim?
This article introduces some basic concepts of command-based editing and how it might help you design better products over time.
Think about the text editing tasks you dread / spend the most amount of time on. How could you automate them? -
How to learn vim
Vim can be frustrating to learn at first. This article covers some helpful hints and tricks on, what to read, good habits to adopt, and how to think like a veteran vim user.
-
Learning vim - vimtutor
Vimtutor is an interactive tutorial on how to get started with vim. You can launch it by opening your terminal and typing vimtutor then enter. It will walk you through step by step instructions to get going with vim.
Complete all of the steps in vimtutor. This should take less than 30 minutes. -
Learning vim - common commands
This is a comprehensive list of common vim commands used for front end development.
Read through the list of commands and practice using five that look like they might be of common use for you. Try to recognize patterns in the commands and think about different ways you might construct your own commands for common editing tasks. -
Learning vim - common workflows
This series of screencasts reviews some common workflows for front-end development. Learn how to quickly navigate files, manage windows, record macros, and more. All in the context of designing with html and css in the browser.
Adam Morse
Product Designer, Salesforce
I'm a product designer at Salesforce focused on responsive design, readability, fast page loads, and scalable systems. I mostly just try to leave the web a little better than I found it. Make fun of me on twitter or make fun of my code on github.
