Write HTML Faster with Sparkup (Vim and Textmate)

words by Brian Racer

I recently came across a really great Vim(and Textmate) plug-in called sparkup.vim that “lets you write HTML code faster”. It’s actually a small python script, but has editor plug-ins to work with Vim and Textmate. It allows us to write HTML faster by leveraging the terse css selector syntax and converting it the much more verbose HTML.

Selector Expansion

Selector expansion is the plug-in’s primary purpose. It lets you write in a CSS selector syntax that get expanded to full HTML:


If you type that into vim and then press Ctrl-e on that line it will be expanded to:

<div id="album" class="photo">|</div>

This next one is a bit more complicated, I’ll explain what’s going on:

#container > #nav > ul > li.first {Home} + li*2 + li.last {About Us} < <  #content > p*2 < #footer > span.copyright {(c) 2010 Jetpack LLC}
  1. Creating a div with the id of “container”
  2. Creating a div with an id of “nav” that is a child of the “container” div. The > specifies we are creating a child element in the DOM tree.
  3. Creating a ul tag that is a child of “nav
  4. Creating an li tag with the class name “first“. Text in brackets will be plain text placed in-between the tag we are creating.
  5. Creating two sibling li elements. The + denotes what comes next will be a sibling. The * is a multiplier to create any number of similar elements.
  6. Creating an li tag with the class name “last” as a sibling to the previous li elements we have created. It will contain the text ‘About Us‘.
  7. Next now use the < symbol to go up two levels of the DOM tree.
  8. Next we create a div with the id of “content” that will contain two paragraph tags.
  9. We go back up a level and add a footer div that will have a span with the class of “copyright” that contains some boilerplate copyright text.

If we press Ctrl-e on that line, it will be expanded to the following:

  <div id="container">
    <div id="nav">
        <li class="first">Home</li>
        <li class="last">About Us</li>
    <div id="content">
    <div id="footer">
      <span class="copyright">(c) 2010 Jetpack LLC</span>

It will also place your cursor in the first empty tag denoted by the |. You can jump around to other empty tags with Ctrl-n (I change this mapping, more on that in a second).

If you are a fan of HAML but forced to use standard HTML in your projects this plug-in might make you a bit happier.


The other piece of functionality this plug-in provides is a snipMate like shortcuts feature. These act much like snipMate snippets except they are hard-coded into the python script. However most are still quite useful and you can view the python script to review them.


After installing this plugin I was having tabbing/tab-expansion issues. I believe it’s Ctrl-n mapping which allows you to jump around to empty tags was conflicting with some other plug-in I had installed, possibly SuperTab. I remapped it by putting the following in my .vimrc:

let g:sparkupNextMapping = '<c-x>'

That doesn’t seem to conflict with anything for me, and since it only gets used in normal mode it doesn’t conflict with Tim Pope’s excellent ragtag plug-in (read more on that here).

Video Demonstration

Some of this might make more sense when you see it in action, so watch the following YouTube video(make sure to switch it to 720p for crisper text):


Have fun writing faster HTML! You can see more examples on sparkup’s Github page.

Mac OS X like Alt-Tab Mouse Selection in Ubuntu

words by Brian Racer

I like how in OS X when I Alt-Tab I can pick a window or icon with a mouse click. I recently figured out how do get Ubuntu to perform in a similar fashion. First we need to install the CompizConfig Settings Manager (yes, you will need to be using compiz for this):

sudo apt-get install compizconfig-settings-manager

Next navigate the system menu to System -> Preferences -> CompizConfig Settings Manager. The app should start so next scroll down to the Window Management section and click on Static Application Switcher. Next click the Behavior tab and the last option will be ‘Allow Mouse Selection‘. Enable that check-box and exit the application.

It’s not quite as nice as OS X – you can only select by clicking, just mousing over won’t make each item the active target, but it’s better than nothing!

Rails autocompletion in MacVim when using Macports

words by Brian Racer

In moving much of my development over to OS X, I started receiving errors when trying to use vim’s omnicompletion in Rails projects. An excerpt from my vim config to enable that functionality looks like this:

" Turn on language specific omnifuncs
autocmd FileType ruby,eruby set omnifunc=rubycomplete#Complete
autocmd FileType ruby,eruby let g:rubycomplete_buffer_loading = 1
autocmd FileType ruby,eruby let g:rubycomplete_rails = 1
autocmd FileType ruby,eruby let g:rubycomplete_classes_in_global = 1
autocmd FileType ruby,eruby let g:rubycomplete_include_object = 1
autocmd FileType ruby,eruby let g:rubycomplete_include_objectspace = 1

When I tried to auto-complete something(Ctrl^X^O), I would receive the following error:

"-- Omni completion (^O^N^P) -- Searching...Rails requires RubyGems >= 1.3.5 (you have 1.0.1). Please `gem update --system` and try again. Error loading rails environment"

Long story short, I was using MacPort’s ruby/gem packages, but a binary snapshot of MacVim that I downloaded off their website was using the libraries that come with OSX. There is not really a clean workaround for that, but luckily it turns out macport’s macvim builds the latest snapshot. So all you need to is to install macvim with ruby support:

sudo port install macvim +ruby

And you will get nice auto-completion:


Textmate and GNU screen error in Leopard

words by Brian Racer

When running mate from inside a GNU screen session in Leopard, I was getting this error:

$ mate .
mate: failed to establish connection with TextMate.

I read reports of falling back to a previous version in macports, but a simple solution is to put this line in your .profile config:

alias mate='open -a TextMate.app'

That will fix the problem.