Vim as a Design Tool

Today morning I got really interesting email which I thought I must share..

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.

  1. Article

    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?

     

  2. Article

    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.

     

  3. Tutorial

    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.

     

  4. Article

    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.

     

  5. Videos

    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.

Source: HackDesign

Source: Hackdesign

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: