Using Vim as a Text Editor

This is a guest post by Alan Bailward a long time advocate of Vim and friend.

Introduction

When Curtis first asked me to write about my programming workflow, I thought to myself “why would anyone care about a simple setup like I have?”, and told Curtis as such. Then a few days later I was showing him something or other at the FV.rb and I did something in Vi to a surprised “what was that”. A few more tips passed on, and a few more “how do I do that’s” and I realized it might be interesting, at least a little, to others.

The “elevator pitch” for what I do is “you make it pretty, I’ll make it work.” I work with a couple of small design companies who mock up a site and then hand it over to me, and I turn the static files into fully dynamic pages with working elements, create the admin backend to manage it, deal with making contact forms email out properly, and so on.

Most of my work is Perl, old school, none of this fancy “framework” or “php” stuff for me, nosiree! Actually this isn’t by choice, it’s due to it being legacy code, and the effort to re-write it all just isn’t worth it. Don’t cry for me though, now and then I do get a chance to work on some of the fancy-schmancy new stuff, and the setup is pretty much the same.

Working Setup

My set up is actually one of two setups. Some days I do my work on a MacBook Pro sitting on the couch, and some days it’s on an older desktop computer hooked up to a 21″ LCD downstairs in the office.

The hardware itself is pretty old, an AMD XP3000+ with 4G of RAM, an nVidia video card just capable of some of the 3D effects that modern operating systems provide, and basically all the best that 2002 had to offer. Too bad it’s 2010, but my Windows workstation has been on the receiving end of the last round of upgrades, as that’s my gaming box.

However, since my OS of choice for programming is Linux, the older hardware isn’t that big an issue. The version is 10.04, “Lucid Lynx”, which was installed when it came out. Other than a few extra bits of software installed (more on that in a second) and a tweak here and a poke there, it’s a pretty Plain Jane setup.

The day to day programming situation, or in my case, evening to evening, is sitting with with basically 3 windows open, one is a browser to run tests on the site, one is my actual programming window (sometimes several tabs of terminals, and one is tailing the log-files in the background so that I can see if anything strange is cropping up.

Tools

Main Vim Window
Main Vim Window

As you can see from the screenshot above, work is basically done in a couple of terminal windows and a browser. Code in the terminal window, reload the browser until things work. Rinse and repeat.

Of course, if that was it, that’d be the end of the article, and like I said earlier, I figured it would be.

However it seems that the tools involved in those two windows might be at least mildly interesting. Because I’ve been a Linux geek since 1994, most of the things I do are in the terminal, and therefor the tools I use are all terminal based.

While coding, I need tools that let me do three things really well:

  • See what is going on all the time
  • Quickly switch between different tools and documents
  • Make the code sing by being lightning fast inside my editor

My tool list consists of the following:

  • Vim – for all my editing needs
  • Screen – for keeping programs running and quickly switching terminals without switching windows
  • Tail – For watching log-files
  • Firefox or Chrome for a browser
  • The firebug web developer extension, along with the a few plugins (YSlow being the most prominent one)

So as you can see, not a lot there. I’ll go into a bit more detail on some of the apps and how they’re used.

Vim

Ah Vim, my old friend. I learned Vim from a huge gold book called Unix Unleashed back in my early days with Linux and Unix, sometime in the dark ages, before Kernel 1.0 (that’s 1995 for you kids out there). The reason that I prefer Vi over EMACS? Simple, the Vi chapter was first. Also I like my fingers where they were, and decided that the surgery needed to make that much use of the ctrl key wasn’t worth it compared to hitting ESC a bunch.

Note that I used Vim as well as Vi. Vi is the classic editor, available on pretty much any UNIX system since the 80’s, whereas Vim is the new and shiny version of Vi, with the same heritage, but with all the modern amenities such as syntax highlighting, tabs (in the GUI versions), multiple windows, ability to use the mouse, and so on. While I’m perfectly comfortable using “classic” Vi for most anything, for hardcore coding, Vim is the way I roll.

Vim Essentials

A working Vim Window
A working Vim Window

My Vim setup is fairly Plain Jane as well, but I do have a few settings and commands that I use all the time. Settings are stored in your “vimrc” file, which is a file named “.vimrc” and stored in your home directory. If you are working on a Unix based system (Linux, MacOS, etc) you can find this by editing “~/.vimrc”. Here’s a (very) abbreviated version of my .vimrc, with some comments:

" set syntax highlighting to work better with dark backgrounds, it defaults to 'light'
set bg=dark
" highlight found search terms
set hlsearch
" ignore case sensitivity in searches
set ignorecase
" searches for lowercase words match any case, mixed case searches turn on case sensitivity
set smartcase
" indent code properly
set smartindent
" similar setting to ensure tabs work properly
set smarttab
" if available, turn syntax highlighting on
syntax on
" switch quickly from window to window and maximize the window
map <C-J> <C-W>j<C-W>_
map <C-K> <C-W>k<C-W>_

A word of note here; despite having used Vi for 10+ years of coding, my knowledge of it is restricted mostly to the functionality that I use on a daily basis. I’d be remiss to not mention the excellent VimCasts podcast for a deep, yet beginner friendly look at some advanced functionality in Vim, and learning to love your .vimrc file.

Some of these settings should be wrapped with if/then/else’s, but just using these settings will give you the start of a much nicer experience, and you can copy and paste them into your ~/.vimrc file safely. Of course, to have an efficient workflow you need to know some commands.

As I said, I use the text version of Vim, not the GUI version. The GUI version allows you to have proper tabs, use a mouse, and fancy stuff like that, but that means you take your fingers off the keyboard, and if you take the fingers off the keyboard, you slow down, so I try to keep my fingers on the home row as much as possible. Vim’s history is in the console only dark ages of computing, so it’s well suited to this.

Here are a few “special” keystrokes that you might not know, assuming that you are familiar with Vi’s modal editing, and inserting and removing text:

ctrl-w ctrl-s

or

ESC :split

or

ESC :split <some other filename>

The first two commands will simply split the current editing window in two, allowing you to view two parts of the same file simultaneously. The last command will split the window in two and load the filename you specify into the second pane.

ctrl-w ctrl-v

or

ESC :vsplit

or

ESC :vsplit <some other filename>

Same as the above, except the window is split horizontally. Note that you can split a window as many times as you want and in combinations of “split” and “vsplit”.

ctrl-w ctrl-w

This will let you jump from window to window. If you have the mappings I use in my .vimrc you can also use ctrl-j and ctrl-k to jump between windows, while maximizing the current one. If you want finer adjustment of your window sizes, you use ctrl-w + and ctrl-w – to resize the windows.

If you’re not happy with the order of your split windows, you just need to run:

ctrl-w R

(Note the “R” needs to be capitalized). This will reverse the order of the windows.

Vim is a huge program, so this stuff is only scratching the surface, but it is a step up in terms of helping you to code from the defaults.

Screen

Screen is one of the two or three UNIX tools I’d choose to spend the rest of my life on a desert island with. That doesn’t sound too weird does it? Screen is described as a “screen manager with VT100/ANSI terminal emulation”. Not all that descriptive. The description from the man page goes something like this:

Screen is a full-screen window manager that multiplexes a physical terminal between several processes (typically interactive shells). Each virtual terminal provides the functions of a DEC terminal and, in addition, several control functions from the ISO 6429 (ECMA 48, ANSI X3.64) ISO 2022 standards (e.g. insert/delete line and support for multiple character sets). There is scroll-back history buffer for each virtual terminal and a copy-and-paste mechanism that allows moving text regions between windows.

What is means is that you can, with a single login, in a single window, control and switch between multiple windows. If you’re really old school you might have used DESQView back in the day, and this might be familiar. No one here is that old though.

Regardless, the details are unimportant compared to how it actually helps you do your job. The workflow goes something like this for me.

  1. Start a terminal window and ssh to the web server
  2. On the server, change to the correct working directory, more on this in a moment
  3. Run screen
  4. In the screen program start editing the source code that I’ll be working on today
  5. Create another screen window with the shortcut key “ctrl-a c” (IE: Hit the key combo “ctrl-a” to get screen’s attention, and then ‘c’ to create a new window) and edit another source code file in that window (note that here a “window” is actually another terminal session, displayed in the same “shell” as you are already)
  6. Open another screen window with ctrl-a c and start up the mysql command line
  7. Switch back to the first window by hitting ctrl-a <space>

Screen has only a few keyboard shortcuts you need to know to get a lot of use out of it

  • ctrl-a c – Create a new window
  • ctrl-a <space> – switch to the next window
  • ctrl-a ctrl-a – toggle between this window and the next
  • ctrl-a <ESC> <arrow keys> – scroll back in the terminal scroll-back (your terminal scroll-back won’t work)
  • ctrl-a d – Disconnect this screen session from the window, but leave it running

There are lots more, but these are the core. The last one is the most interesting though, what this does is allow you to do is to stop coding, disconnect your session, go to work, to Starbucks, whatever, boot up an ssh session to the same machine, and then start session with “screen -r” and have your session back exactly where it was, with the editor just where you left it, your programs running, etc. Extra bonus: If you forget to disconnect your session when you left home, you can run “screen -rd” to start up and disconnect the running session and reconnect to it. You can even have multiple screen sessions running at once.

How does this help? Well, it means I can have all my editing environment set up the way I like it and never shut it down, while being able to get at your currently used workspace from whatever computer you’re at, as long as you can get to the server as the same user.

Browser and Add-ons

My Firefox working setup
My Firefox working setup

I don’t have anything overly special in the browser, a few plugins that help with any HTML, CSS or JavaScript debugging I may be tasked to do. These will be pretty familiar to anyone who has done much web development work using Firefox:

  • Firebug for performance tuning and checking things like post variables and some minimal CSS/Javascript/HTML tweaking
  • YSlow for doing performance testing
  • (Sometimes) the Web Developer Toolbar for some of it’s nifty CSS/HTML revealing
  • Live HTTP Headers is also used periodically

Conclusion

So that’s about it…a very, very long way of saying that I use a web browser and a 20 year old text editor in a terminal window to do all my work 🙂

The Great Windows Code Editor Hunt: Komodo Edit

Komodo edit logo
Komodo edit logo
Komodo edit logo

Second up on my list of code editors to review is Komodo Edit. No we’re not talking about the paid IDE but the free version.

The Good

Komodo Edit is developed on the Mozilla platform which means it’s a cross-platform code editor just like Firefox is a cross-platform web browser. As I said when I started there is an extra point for any editor that is cross-platform since I do end up spending some time each week on Mac and Linux. Add that to the price tag of FREE and you’ve got a decent editor to try.

Editing code in Komodo Edit
Editing code in Komodo Edit

Komodo has lots of options for configuration. Prefer a different colours scheme? Yeah you’re only a few clicks away from having a multitude of choices. Need to change how indentation works on files? Again a click or two and you’re all changed up. Use Emacs key bindings evidently Komodo Edit supports that as well, though I don’t use them so I have no clue on how well it supports them.

Another point in for Komodo Edit is the amazing extensions. When I needed proper colour coding for HAML in a project I just opened up the extension manager typed in HAML installed, and restarted Komodo Edit and I was ready to go. Need jQuery support, no problem search your extensions.

pick your poison with addons
pick your poison with addons

When I started this whole quest I also made a project browser a requirement for a code editor to be considered. Komodo Edit has a great project browser. It’s easy to navigate and clear.

The Bad

Edit: Checkout the response from ActiveState in the comments to some of my ‘Bad’ points.

While building on the Mozilla platform gave Komodo edit a leg up by making it easy for developers to extend it, there are also some downsides. Who hasn’t given up on Firefox after you’ve been using it for a year or so and it just takes forever to get up and running? I mean my 95-year-old grandmother has done three laps around the walking track before Firefox has loaded. Komodo suffers from this as well. It seems to me that Komodo Edit is just as slow to start as Firefox is on a given system. I have Komodo Edit installed on two systems. One is a bit new and Firefox is still snappy and so is Komodo Edit. The other systems is pretty powerful but has been around on the same install of Windows for a bit and both Firefox and Komodo Edit give you enough time to go get groceries while they start. Never seems to matter if it’s warm or cold, they’re just slow.

komodo is slower than dreamweaver
komodo is slower than dreamweaver

While I said this is a code editor hunt I know some people might take issue with including Komodo Edit here. Really Komodo Edit is an IDE. Start a new Ruby on Rails project from within Komodo and you get a bunch of extra ‘helper’ files and stuff it thinks you need. While this might help a new developer it also hinders them long-term. So the extra crap is a point against Komodo Edit.

Again in the beginning I said that I gave points to an editor that was cross-platform and while Komod Edit is the Linux install is less than desireable. I was never able to get the launch icon to show up properly in my Ubutnu Netbook Remix properly. Sure there is probably some place I need to put the .desktop file but as I said last week it should just work. I should have to go hunt around for how to make it work. Komodo Edit needs to work on their install process in Linux.

While the project browser is great on Komodo Edit it also sucks. At different times I’ve had issues creating new files in the project window. This has happened while working on both WordPress and Ruby on Rails projects. I was also never able to find a way to open and close the project browser from the keyboard. While this isn’t really an issue on my dual 22′ screen desktop it is annoying on my 10′ netbook. You can close it from a button at the top of the tool bar but that is less than desireable.

Komodo Edit also adds a project file to each project. If this was it’s only fault then it would hardly be a big one but combine that with some of the others above and it’s just a pain in the ass to add yet another thing to my .gitignore file.

Conclusion

The biggest point here is how long it takes to open. Cold or warm even Dreamweaver would win a start-up race and be on its second beer by the time Komodo Edit gets to the finish line. The slowness is something I’m just not willing to suffer.

The few other big things are the fact that working on projects in Komodo can separate you from your code as it throws all it’s IDE features at a project. The the lack of a great keyboard navigation so you always have to go back to your mouse, and the less than desirable install on other platforms just put the whole package over the top. It’s something to try if you’re looking for a code editor but it’s on my list of products I wish were a bit better, then I could use them regularly.

The News: Firefox is alive, seo, and some marketing advice

Today is a great day for web designer’s. It seems that Firefox is finally over 20% of the market share in browsers. Firefox is awesome, and it is wonderful to see it reach this milestone. Hopefully this really pushes IE to be standards compliant instead of the PITA that all web designers are familiar with.

How about some marketing advice now. Mike Smith (just guessing cause of the URL) has a cool post on 17 things you are probably not doing with your marketing. Ranging from the old school but essential business cards to writing for Hubpages. I actually used to do the latter and may have to pick it up from time to time with a new article. I’m not so sure about the directory submissions though. Some reading I have done leads me to believe that one day google will clamp down on those who are listed in directories that aren’t specific to thier market.

Tieing in with the last article nicely is an article on good SEO practices. All the basics are covered here. I do believe that meta tags have some relevance to search engine results but definitely not as much as they used to have. I would advise that you have good meta tags but really concentrate on producing quality content. As the article states your title tag is very important for good rankings.

Finally today is a post on How to spot a dud client. If you’ve been freelancing for more that 2 weeks you’ve had a call from a client that just doesn’t quite sound right. Often you end up taking at least one of these dud projects on without realizing what happened. Well here are some things to watch out for. If you see them in your clients get out now.

News from around the Web

Lots of things are happening today most notably CS4 was released by Adobe. I’ll be writing another post later today going into more detail about the launch and rouding up resources for further reading, for now on we go.

There is another great post over at Design Reviver detailing 22 Firefox 3 Plugins for web developers. This list is fairly exhaustive and although I use many of the plugins I didn’t even know about some of them. Specifically Font Finder and iMarcos look very promising for saving me time everday.

Sitepoint also has a great article on Minimalist HTML documents that is a must read. Detailing efficient document layout all web coders should take a quick look through and check against their own coding practices.

Finally there are two great articles over at A List Apart. The first one deals with proper Progressive Enhancement of styling on the web. Using javascript to check for box model support you can serve different CSS to a browser based on its support of the box model. The second article takes on the topic of Web Standards and how they haven’t been the saviour of the web as was originally thought. The author details many of the problems that are plauging the implementation of standards in the web industry today.

That’s it for my round up for now. Check back tomorrow some some more in depth stuff on CS4

Switch back to IE

This is spawned from an article on ArsTechina regarding the new IE 8 beta 2. (edited) I have now also found and article on Lifehacker. Check them both out for details on IE 8

I am an avide Firefox user. That is what I use on my PC at home and my Mac at work. I use it because of the greater security offered (especially from FF2 verses IE6) but more importantly I love the extensions that you can use with Firefox. Stuff like Ubitquity which I wrote about yesterday and have been using tonnes at home and at work.

With the new version of IE 8 beta 2 out though there are some very cool features that at least entice me to try out IE 8 in the future. Probably one of the most compelling features to me is the suggested sites. Basically it suggests sites that are similar to the sites that you are on. Seems kind of like stumbleupon (which i love but kills my time). I wonder if it would help in finding some design inspiration.

Think you would view a site with cool art work and then hit suggested sites. Voila now you have other sites that have some interesting arty thing to them.

There are lots of other neat features, most of them covered in Firefox 3. The only thing that will continue to hold me back from jumping into IE 8 as my fulltime browser is the lack of my favorite extensions like Ubiquity and the web developer tool bar. If IE 8 can catch up in the extension category I would consider making the switch.

Cool Web Developments

Surfing through my RSS feeds today I came upon a number of very cool web developments that I thought I would bring to your attention.

IE 8 InPrivate browsing. Pulled from ArsTechnica. Looks like IE 8 may mean that analytics programs we use to track our site traffice will no longer work. One of the features of InPrivate will be blocking of objects embedded in your sites (like google analytics). If a user has this turned on  us web designer may never know for sure that IE 6 is dead or what screen resolutions best suited for a particular clients website. While there are benefits to this technology from a user’s privacy point of view it could be tough for people designing websites.

Our second chunk of news I first saw at Lifehacker but now also appears on ArsTechnica. Ubiquity is a prototype Firefox extension that adds a command line interface to your browser. To send a link to someone now you have to right click and then roll down to ‘send link.’ Ubitquity works something like Quicksilver or Launchy in that invoking it with a key command would allow you to start typing “email this to wife” and suggestions for the action would come up. A neat way to interact quickly with web pages but if your not already a Quicksilver or Launchy user it may be hard to get people on board. I don’t see my wife using this. If you’re interested head to the download and watch the tutorial video.

We’re almost done…. Many of us web professionals are devote followers of the Twitter (at least I am). I sometimes wonder how much information is gleaned about me from my posts. Not from the people that I follow or the ones I don’t block from following me but from the public timeline. I know that I can make my tweets private but that means I have to approve everyone and that is a waste of my time. Enter Status a project from Chris Coyier over at CSS-tricks. While not exactly like twitter there are some similarities. Many companies use twitter for tracking quickly where each other are. While twitter works for this it does expose people to the scrutiny of the wider public. Status is designed around private groups. You can start one or be invited into one. The purpose is to simply list where you are and what you are doing. This really has applications for distributed companies or companies dealing with some remote employees. I personally don’t have a great application for it right now but it has been bookmarked.

Finally how about some advice to budding web designers and developers. Basically it is a round up of advice for those that are starting out in the web industry. A good read for anyone who has been in for a long time or those just starting.

Enjoy the reading.