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.
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?
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.
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.
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.
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.