The beast that is Vim

Vim has been my programmer’s editor of choice for years. Too difficult for beginners but once you get a hold of it you’ll wonder how you lived without it. Though now I use sublime text 2 mostly for projects, but I still use vim for quick file editing operations and of course without graphical environment for example when I’m working on a headless server through SSH, Vim is my only option. Nano is just a last resort for me.

So what makes Vim a revolutionary text editor? The idea is to keep your fingures on regular typing keys as much as possible. That makes code editing efficient and less distracting. The navigation keys h,j,k,l for moving cursor (LEFT, DOWN, UP, RIGHT) has become so popular that you’ll find it in other editors. At least sublime text 2 does that by using a package “Vintage” which is ignored by default. Works very great and I use it all the time. Even you’ll find these key bindings in web browsers like uzbl, Vimperator extension for firefox and pdf document viewers (Zathura). Some of the less known softwares but they exist and are in actively developed.

Modes! What the?

When you use these regular keys for moving cursor, how do you input these characters then? Obviously you need a mode system. Vim provides 3 basic modes:

Normal

Activated by default when you start Vim, this mode lets you navigate through text using normal keys. Following are the most common cursor navigation keys.

Key Result
h One character left
j One line down
k One line up
w One word forward (including whitespace(s) following the word)
e One word forward (excluding whitespaces)
b One word backward
i Switch to insert mode before the current cursor
a Switch to insert mode after the current cursor
l One character right
^ Beginning of current line
$ End of current line
% Go to the matching bracket
dd Delete current line
yy Yank (copy) current line
p Paste yanked text after the cursor
P Paste yanked text before the cursor
gg Beginning of the file
G End of file
I Switch to insert mode before the current line
A Switch to insert mode after the current line
u Undo
Ctrl-r Redo
gt Switch to next tab
gT Switch to previous text
n Find next
N Find previous
v Visual Mode
V Visual Mode (Line select)
Esc Switch back to normal (command) mode

But it doesn’t end just here. Vim’s real beauty lies in the effect you can achieve by combining these shortcuts. Want to yank a word? Sure, yw does just that then you can put it anywhere with p. It even interprets numbers, so y3w will yank next 3 words. Any number you like just put it there. ‘d’ is for delete, so if you want to delete from current cursor to end of line press d$. Want to delete current line and 2 more lines below? typing d2j will do that. ‘t’ is for till, so if you want to delete text from current cursor till the next occurence of semicolon; just type dt;. ‘c’ is for change. It does one extra step, it deletes and takes you to the insert mode.

Insert Mode

This is your regular mode for typing text just like any other editors. Nothing fancy here.

Visual Mode

This mode is for selecting text. Activate it with a v in normal mode then move your cursor by using any navigation key or combination of keys. It will select the text from the cursor where you started the visual mode to anywhere you take the cursor. After that you can cut it with d or x (yeah sorry I didn’t tell you about x earlier but I really don’t the know major difference between x and d. They both cut the text however in normal mode you can use x to cut a single character which is equivalent to dl) or you can yank it with y and then put it anywhere with a p (in normal mode of course).

Replace Mode

There is another less commonly used mode Replace which can be activated with an R. When this mode is activated just type your text and it will replace the already written text. To replace a single character however you don’t need to switch to replace mode. Just type small r followed by any character will replace the character under the cursor to the character you type. Quite handy!
In any mode, pressing Esc key will activate normal mode. I hope that is enough introduction for a beginner. One last important thing is how do you close vim and save your work. In normal mode you can give some commands by typing : followed by command. Here are some common commands:

Key Result
:w Save file
:q Quit currently opened file in vim
:wq Save and quit (yes you can combine both)
:q! Quit forcefully without saving

Some other stuff about Vim that I want to cover later some time in the future are:

  • Some useful plugins
  • Tabs and window splits (yes vim supports tabs too)
  • Macros

Please feel free to share any thoughts, tips, ask any question or correct any mistake.

Digg like navigation bar with CSS3 (almost)

I wonder how easy it is to create a digg like navigation bar with CSS3. No JavaScript, no images. The basic feature provided by CSS3 for such navigation bar is border-radius.

Currently, firefox and all webkit based browsers support this feature. For firefox, we use -moz-border-radius and for webkit based browsers we use -webkit-border-radius. So here it is…

The HTML:
<div id="nav">
<a class="current" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Solutions</a>
<a href="#">Contact</a>
</div>

The CSS:
#nav {
background: #90b557;
height: 32px;
padding: 12px 0 0 10px;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #334D0F;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #deeec2;
}

#nav a.current {
background: #deeec2;
color: #000000;
}

digg-nav

With a little more tweaking I was able to make a navigation bar just like smashingmagazine.com. Here is the CSS:
#nav {
background: #404040;
height: 32px;
padding: 12px 0 0 10px;
border-top: 4px solid #eb4c07;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #ffffff;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #5a5a5a;
}

#nav a.current {
background: #eb4c07;
}

smashingmagazine-nav

I have tested it on Firefox 3.0.5 and 3.1 Beta 2 and it works. I hope it also works well with all Webkit based browsers. Other browsers will not be able to render curved corners but otherwise OK.