I’ve been using the TextMate 2 alpha since christmas, but sometime in the last few weeks I got that sinking feeling that it was not getting better quickly enough and probably never would. I played around with Chocolat and Sublime Text 2 as potential alternatives and settled on Sublime because it is blazing fast and seems very stable.

It is blazing fast and stable but it’s also pretty ugly. This might not bother a lot of people, but it bothers me – this is the Mac, things are pretty here. This is what I did to make Sublime Text look, er sublime (sorry).

Replace that god-awful default theme

Aqua is a great looking theme which brings a much more mac-like feel to Sublime. I took this theme and tweaked it slightly to show file icons in the sidebar. My variation on the theme is available on GitHub or you can add the repo to package control: git@github.com:mrappleton/aqua-theme.git.

A nicer icon

I quite liked the default icon but found it really difficult to pick out when I was switching between apps with cmd-tab. I found this icon by Dmitry Svetlichny on Dribbble via a tweet from Chris Rowe. It’s easier to spot and I think much prettier too.

Syntax Highlighting

I was having trouble getting used to Sublime and I figured that it was down to things being similar but not identical to my previous editor. I switched from Railscasts to a new theme as a kind of constant reminder that I was using something different and not to expect it to be exactly like TextMate.

I love the dark on light Espresso theme included in Aqua which I have been using with a single tweak to make the background a very light grey and the line highlight white.

This tweaked version is included in my fork of Aqua.

Overall I’m really pleased that Sublime is flexible enough to allow this kind of customisation but it would be nice if the developers could spend some time on making it a more native Mac experience. In the mean time I’m really happy with my current setup.

I gave a talk at the London JS meetup last Monday evening where I compared the performance of two popular object creation patterns in JavaScript – the slides are available at Speaker Deck. Here’s a quick rundown of what covered.

Module Pattern

I like using the module pattern for a number of reasons – not least that it provides a new function scope which can be used to hide variables and methods from the public interface of the object. The module pattern looks like this:

var Module = function(arg){

  var self = {

    getArg: function(){
      return arg1;
    }
  };
  return self;
};

Constructor Functions

Constructor functionas are built in to JavaScript. Calling any function with the new keyword will cause the value of this to be bound to the function object. This means that we can assign methods and properties to this and access them later from the returned object.

var Constructor = function(arg){
  this.arg = arg;

};
Constructor.prototype.getArg = function(){

  return this.arg;

};

Performance Testing

I wanted to figure out which pattern is faster to instantiate and to call methods on so I set up a number of tests on JSPerf:

1. Object instantiation
2. Method calls on instantiated objects
3. Object instantiation and method calls
4. Object instantiation with inheritance
5. Method calls on instantiated objects with inheritance
6. Object instantiation and method calls with inheritance

Vague Conclusions

The test results seem to indicate that Constructor functions are faster at instantiating an object than the module pattern. This makes sense to me as they are built into the language.

The module patern seems faster at calling methods once the object is instantiated. Adding a level of inheritance into the mix doesn’t seem to make too much of a difference.

For me this is useful information to have in the back of my mind as I am coding. There was some interesting discussion in the Q&A after my talk about premature optimization and judging each case on its merits. We discussed

I think this kind of benchmarking is an interesting excercise and is useful to gain a better understanding of the language, but ultimately you need to be making performance decisions based on actual data from your actual code.

I’m speaking at the LondonJS meetup next Monday, 16th July. My talk will look at the relative performance of different approaches for creating JavaScript objects.

Tickets are all gone but you can get on the waiting list if you’re interested.

At some point over the last few weeks Require.js 2.0 was released. It’s a really nice update which addresses a couple of pain points which I have experienced whilst using it.

Non AMD Shim

My favourite new feature is the built in shim for loading non-AMD compatible libraries. Loading non-AMD JavaScript in 1.x either required altering the code to include a define call or using the order plugin to manually configure the load order for different plugins.

Neither option was particularly nice so in 2.0 we get the option to shim files in requirejs.config(), for example:

requirejs.config({
  shim: {
    'backbone': {
      // Define dependencies
      deps: ['underscore', 'jquery'],
      // Set a value for the file to export
      exports: 'Backbone'
    },
    'backbone.validation': {
      deps: ['backbone'],
      exports: 'Backbone.Validation'
    }
  }
});

This makes it much easier to update non AMD libraries without worrying about breaking a wrapper. There are a few caveats to using this, but on the whole it’s a big improvement.

Fallback paths

2.0 has introduced errbacks - callbacks for error states. This allows us to account for modules which don’t load. A nice use for this is to specify a fallback path for the module - e.g. if we’re using a CDN version of a file.

Again this can be set in requirejs.config():

requirejs.config({
  paths: {
    jquery: [
      '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
      'lib/jquery'
    ]
  }
});

Require will attempt to load the module from each path specified in the array until it is succesful.

Lazy evaluation

In 1.x any built file (a bundle of a number of modules produced by the optimizer) would all be evaluated on load. This has changed in 2.0 and now code is only evaluated as it is called. This is a nice performance win as it defers a lot of browser work until it is needed.

These are my favourite new features, but there’s plenty more so check it out.

I switched my shell from Bash to Zsh a few months ago and have been tinkering with my dotfiles ever since.

One cool trick I’ve found is to configure Mac-like text navigation. I’m a Textmate user and my fingers are hard coded to hit cmd ← to skip to the begining of a line, opt → to jump to the end of a word etc.

I believe that OSX’s built in terminal does this automatically since 10.7, but I’m using iTerm2 so needed something else. Turns out it’s pretty straightforward to add to your .zshrc or .zshenv file:

# Skip forward/back a word with opt-arrow
bindkey '[C' forward-word
bindkey '[D' backward-word

# Skip to start/end of line with cmd-arrow
bindkey '[E' beginning-of-line
bindkey '[F' end-of-line

# Delete word with opt-backspace/opt-delete
bindkey '[G' backward-kill-word
bindkey '[H' kill-word

# Delete line with cmd-backspace
bindkey '[I' kill-whole-line

Some of the actual aliases (e.g. '[C') might be different for you. These can be customised in iTerm → Preferences → Keys.

If you feel like it, you can check out the rest of my dotfiles on Github.

Icomoon is an in browser icon font generator. Pick from a selection of free icon fonts or pay for access to a larger collection. You can even upload your own SVG files to have them added to the font.

I used this to generate the icon font for the sidebar links on this site and I love it.

I’ve updated the site design. I’ve gone for something simpler and have tried to put more focus on the blog in the hope that it will encourage me to post more regularly.

I won’t go into too much detail as I know it’s pretty dull hearing people bang on about their own work, but here’s a brief overview of what’s new.

Design

This is a cleaner, simpler evolution of the previous design. Proxima Nova Condensed from Typekit is used throughout and the site should scale up and down nicely thanks to a custom icon font and SVG logos.

Back end

I’ve dropped Wordpress in favour of Jekyll. Jekyll is a static blog generator which means that I get to write posts as markdown formatted plain text and publish the site as flat HTML.

This is awesome for page load performance because it means zero back end processing. It is awesome for me as it means I get to keep the entire site (posts and all) in Git.

To do

Since the site is entirely static I have no means of gathering comments. I have still not decided how I want to address this but most likely I’ll either go to a Disqus / Livefyre embed or just drop comments completely.

Update: I’ve archived the old design at 2009.floatleft.com.

I’m excited to be speaking at FOWA London in October this year! I’ll be delivering a talk on Backbone.js application structure so if you’re thinking of coming along you can check it out on Tuesday afternoon.

Here’s the summary…

The Modern JavaScript Application

Backbone is an awesome JavaScript library which provides just enough application structure to allow us to make our own design decisions. It isn't a full application framework and much of the plumbing required to use it as one is left up to us.

But what should that extra plumbing look like? And how can a client side application grow and still remain organised and sane?

We'll talk about lessons learned the hard way and ways to make life simpler and focus on the app rather than the framework. We'll also look at all the auxiliary benefits of taking the time to structure our apps in a clean modular fashion.

Starting a website from scratch can involve a lot of repetitive setup each time and most developers tend to keep a barebones folder to be used as a start point.

I decided to clean mine up and make it available on Github in two flavours. First, there’s website bootstrap, containing the files and folders I tend to use for every project. This is just flat HTML, CSS and JavaScript.

Second there’s Perch bootstrap which is similar except that it is designed to be used in a PHP environment and is what I use when I’m building a site with Perch.

It’s called Perch bootstrap because that’s what I use it for, but there’s no reason it couldn’t be adapted for use with any PHP application.

There’s no kind of license on either so feel free to download, fork, redistribute or do whatever else makes you happy!

Something fun we’ve been working on at Mint. Turn your Instagrams into magnets!