Editing Scala with vim

Even though it hurts my brain a little bit, learning Scala has been a pleasurable part of my job lately. It definitely isn't for the faint-hearted but it has taught me a lot about thinking precisely about the topics of immutability and shared state. The functional mindset forces you to think mainly about input and output of functions and this training, I feel, makes me a better programmer even when programming in a language other than Scala.

Tools

I'm not really an IDE lover, quite the opposite, but I have started taking a shine to the comforts that Intelli-J is offering when writing Java.

I was happy to see that Intelli-J has a plugin for Scala development and have been using that for the last couple of months. Sadly, the plugin is really, really slow which makes it pretty unusable to me.

There is no question that the languages is beautiful but the tools aren't.

Enter vim

I'm already using vim for everything other than Java so I hunted around the web in order to find plugins. I've been quite satisfied with the following combination.

vim-scala

Obviously, you will need syntax highlighting and this plugin provides that.

neocomplcache

The built-in vim autocomplete isn't great for Scala but the neocomplcache plugin makes typing out long Scala class or package names easier. There is no semantic analysis behind it so all this plugin does is string matching but I was very surprised to realise that this takes you a long way. To me at least it is adequate.

ctags

In order to enable jump-to-source navigation you need to configure ctags to index scala files. You can do that by adding the following to your ~/.ctags:

--langdef=scala
--langmap=scala:.scala
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*(private|protected)?[ \t]*class[ \t]+([a-zA-Z0-9_]+)/\4/c,classes/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*(private|protected)?[ \t]*object[ \t]+([a-zA-Z0-9_]+)/\4/c,objects/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*(private|protected)?[ \t]*case class[ \t]+([a-zA-Z0-9_]+)/\4/c,case classes/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*(private|protected)?[ \t]*case object[ \t]+([a-zA-Z0-9_]+)/\4/c,case objects/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*(private|protected)?[ \t]*trait[ \t]+([a-zA-Z0-9_]+)/\4/t,traits/
--regex-scala=/^[ \t]*type[ \t]+([a-zA-Z0-9_]+)/\1/T,types/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*def[ \t]+([a-zA-Z0-9_]+)/\3/m,methods/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*val[ \t]+([a-zA-Z0-9_]+)/\3/l,constants/
--regex-scala=/^[ \t]*((abstract|final|sealed|implicit|lazy)[ \t]*)*var[ \t]+([a-zA-Z0-9_]+)/\3/l,variables/
--regex-scala=/^[ \t]*package[ \t]+([a-zA-Z0-9_.]+)/\1/p,packages/

After having done that you need to run ctags from the root of your project directory with something like this:

ctags -R . --exclude=target --exclude=vendor

By default vim will only look for the tags file in the directory of the file open in the current buffer. If you want vim do move up the directory hierarchy until it has found the file add this to your ~/.vimrc:

set tags=tags;/

Now, if you move the cursor over a type name and press Ctrl-] you will jump to the definition of the type. That's pretty nifty!

If you want to go back to where you were before the jump press Ctrl-T.

Sorting of imports

Based on feedback from a collegue who was complaining that my imports always look messy I have contributed a command to the vim-scala plugin which automatically sorts your import statements.

You can invoke the command with :SortScalaImports and there are two modes on how your imports could be sorted. By default the command goes through the import groups (which are defined as separated by a newline) and orders them alphabetically. This is useful for when you prefer to sort your import into groups yourself like this:

// Utility imports
import com.me
import com.them

// Concurrency imports
import akka....
import scala...
import java...
import spray....

// Domain imports
import com.me.data....
import com.me.data....

The second mode can be enabled by setting the following in your .vimrc:

let g:scala_sort_across_groups=1

This will take all of your imports and puts them into 3 different groups:

1. Java/Scala core libraries
2. 3rd party libraries
3. First party code, a.k.a your own

What is considered first party code can be configured by setting the a regex. I have set it to this, which is for a standard Play app:

let g:scala_first_party_namespaces='\(controllers\|views\|models\|util\|de.\)'

The result of the sort looks like this:

import java.text.SimpleDateFormat
import java.util.{ Currency, Locale, UUID, Calendar }
import scala.collection.JavaConversions._
import scala.util.Random

import play.api._
import play.api.mvc._

import controllers.Secured._
import de.mycompany.useful.library.Class
import util._

Comments »

My 2009 dissertation using GATE

Not quite 4 years ago I left university after having graduated with a degree in computer science. I did fairly well on my final dissertation and have been meaning to publish it for quite some time but never actually came round to it.

The reason that publishing this popped back into my mind was that last week a colleague and I got chatting about a friend of his who is also wanting to write a thesis on natural language processing.

The dissertation is titled Automatic extraction and categorisation of bicycle items for sale on an internet bulletin board and its focus is on natural language processing using the software GATE developed at the University of Sheffield.

If you want to download the PDF you can also head over to the documents's page. From there you can download the original PDF on the top left corner.

Comments »

Handlebars array access

I keep forgetting and regoogling this and apparently it isn't documented anywhere I could find it, so I'm going to write it down hoping that Google will help spread the word.

So, how do I access an array in a Handlebar template?

The syntax is the following: {{ array.[index] }}

An example from an app I'm building right now

<div class="img-container pull-left">
  {{ #if imageURLs.length }}
    <img src="{{ imageURLs.[0] }}"/>
  {{ else }}
    <img src="http://placehold.it/130x130" class="img-polaroid">
  {{ /if }}
</div>

Comments »

Tools for the discerning front end developer

Pro-forma preamble

Working as a web developer and doing a lot of frontend work, over the years I have collected a rather nice tool belt (if I may say so) of things that make me more productive. Today I'd like to share some of these.

Javascript

Grunt

One of my more recent discoveries is a JavaScript build tool called grunt. Even though I guess you could use it to build node modules, it is really meant for frontend coding tasks. If you've ever written your own scripts to glue together jshint, uglify, file concatenation and rsync and wondered if there is a better way, grunt can help you. It is ideal not only for those things but has plugins for virtually everything like:

• CoffeeScript, including on-the-fly compilation if a file is modified
• CSS Compression
• LessCSS compilation
• Live Reload of a website without browser plugins (more about this in the next section)

Yes, there is a bewildering array of JS build tools (Jake, Cake, Yeoman, Buildr, custom ant scripts... the list goes on) but I found grunt so far the most pleasurable to use. Go try it out.

Grunt Live Reload plugin

Frankly, this is like magic. What this enables you to do is to hit save in your favourite text editor and have this automatically trigger a refresh of the page you are working on. And all of that without even installing a browser extension. The way this works is by injecting a little snippet of JavaScript into the page which in turn opens a Websocket connection to the development server which watches for changes on the file system. Here is an example grunt.js file to achieve this:

module.exports = function (grunt) {
  grunt.initConfig({
    lint: {
      all: ['js/*.js']
    },
    less: {
      style: {
        src: 'style.less',
        dest: 'style.css'
      }
    },
    watch: {
      files: ['*.less', "*.html", "*.js"],
      tasks: 'less reload'
    },
    reload: {
      port: 6001,
      proxy: {
        host: 'localhost',
        port: 8000
      }
    },
  });
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-reload');
  grunt.registerTask('default', 'server reload watch');
};

Who knew that development could be fun with tools like this?

CSS reload bookmarklet

If you don't need the whole live reload setup or are maybe using a web framework which doesn't play nice with grunt you can use Paul Irish's CSS reload bookmarklet. This simply iterates over all the stylesheets in the document and adds a fake parameter with a timestamp value to their URL causing them to be reloaded. The timestamp also takes care of any caching issues.

Chrome doesn't allow bookmarklets to be invoked with a keyboard shortcut but I found the following trick to be able to kinda-simulate a shortcut: You need to bind the bookmarklet to a custom search, which in turn can be triggered by a one-letter keyword.

In order to do this, create a new search, paste the bookmarklet Javascript URL into the URL field, give it a name and a one letter keyword (I have given it the letter 'r'). Now you can jump to the URL bar with ⌘ + L, then type R and hit enter and voila, your CSS is reloaded without you having to refresh the entire page.

cdnjs

This free, community-curated CDN hosts Javascript libraries like Backbone, moment.js and various popular jQuery plugins. Using this has the double advantage of not polluting your source tree with third-party libraries as well as speeding up your page load by spreading the load onto multiple servers.

An added bonus: They support SPDY for extra-parallel download for enabled browsers. You can also add a library you need to the CDN by submitting a pull request. I've done that a few times and Ryan and Thomas have always been quick and very friendly.

Twitter Bootstrap related

Bootswatch

If you can't stand the default look of Bootstrap anymore go and check out this nice selection of themes for Bootstrap.

Bootstrap Form Builder

If you're building a lot of forms with Bootstrap, you probably want to check out this little app. It gives you a nice UI for building them.

Bootsnipp

If it isn't forms specifically you're building, Bootsnipp gives you small snippets of readymade Bootstrap components and examples of what you could build with Bootstrap.

BootstrapCDN

Are you tired of re-adding Bootstrap's CSS file to your repositories over and over or using Github as a static asset server? As the name suggests this free CDN hosts Bootstrap for you. My favourite feature are the hosted versions of Bootswatch.

Misc.

Fontello

Remember the days when you had to pester your designer for small icon PNGs (most likely in plain as well as mouseover/active variations)? Thank God we have icon fonts now! The only downside is that selecting an icon character and inserting it into your HTML is quite a bit of work and may involve special programs for font managements.

Fontello is a web app that has made it its mission to take away the pain from using icon fonts. They have collected a hand full of very popular icon fonts (Entypo, for example), have given each icon character a simple, descriptive name and make this all available as single webfont file (in all formats you'll ever need) plus a handy stylesheet. This lets you create icons by simply applying a CSS class to an element, just as it is done in Twitter Bootstrap.

If you suggest this in your team, your designer will love you as this frees her/him up to do actual design. Other benefits are that you can style your icons with CSS and have a lot less HTTP requests during page load.

JSON formatting

jq is pretty nice tool for querying a JSON document but if all you need is a pretty printer you can pipe your JSON through a built in python module with the following one-liner:

echo '{"foo": "lorem", "bar": "ipsum"}' | python -mjson.tool

I have this aliased in my .profile to jsonpretty with a

alias jsonpretty='python -mjson.tool'

ack - better than grep

If the project-wide full text search of $FAVOURITE_IDE sucks, and lets be honest they all do, and grep is just a little too awkward to use then take a look at ack. It has changed the way I explore and navigate source trees. Ack is designed to search through large source code trees, searches recursively by default and excludes stuff you definitely don't want to search like git and temp folders.

Even though it is currently still in alpha state, I'm using version 2.0 for a couple of months now without any issues. Ack 2 removes the limitation of having to keep a whitelist of files to be searched and includes all text files by default. Another thing which wasn't possible in ack 1 but is in 2 is including file names without dots (i.e. Gemfile). If you want to install ack 2.0 alpha through homebrew, I have prepared a recipe for you. Just do a

brew install https://raw.github.com/lenniboy/ack2-compiled/master/ack2.rb

Testing regular expressions

To me it was a real eye opener when I discovered visual regex tools. They shorten the feedback loop drastically and make reasoning about them a lot easier (even though it still often takes a few moments to fully wrap your head around what is happening.)

My current favourite for doing that using the JS regex syntax is an obscure tool called Hifi Regex Tester. Even though its usability isn't too great (too many colours!) it is the only one that I have found which displays match groups.

If you can live without match groups, refiddle feels a lot more modern and tidied up.

Your favourites

If you liked this little list, how about you letting me know about other productivity enhancers?

Comments »

Slides for my talk at CocoaHeads Berlin

Yesterday I gave a talk at Cocoaheads Berlin, which is the iOS/OS X developers user group here. The talk was titled "CocoaPods - Sane library management for Xcode".

If you are interested in reading my HTML slide deck, I've made them available online.

Here is the same thing in a little embedded viewer:

Comments »