Matt Kirman

My Git Workflow; Introducing Flit

Matt — Fri, 27 Aug 2010 21:42:19 +0000

I’ve been a Git convert, and version control geek, for over a year now so I’ve sort of become the unofficial Git consultant at the office. If anythings breaks or something weird happens I’m usually the one called in to sort it out.

In order to preserve at least some of the remnants of our sanity I decided, after my colleague managed to corrupt his entire local repository, that I needed to enforce some sort of system. What I finished up with is this fairly typical workflow:

Find a feature (or bugfix, ticket, etc.) to work on
git checkout -b my_new_feature
Hack away at some code
git commit early and often. Small diffs are the key.
When I’ve finished git checkout master
git pull any changes
git checkout my_new_feature
git rebase master
Fix any merge conflicts that I may have. If there are conflicts, fix them and keep going. Merge conflicts should be kept off the master branch if at all possible.
git rebase -i so that I squash all the commits in my branch down into one. This keeps the master branch nice and tidy.
git checkout master once the code is ready
git merge my_new_feature
git push

Once our code is ready for staging we push our code to the staging branch, and likewise to the production branch. The master branch is reserved for bleeding edge code.

I then started thinking, surely there must be a much easier way to manage this workflow? A minimum of seven separate commands to merge my changes into master and push it back to the server?

Introducing Flit

Flit is a command line utility that eases the typical Git workflow that I’ve outlined above. Setting up Flit to work with either a new or existing Git repository is a simple as flit init. If you haven’t already created a Git repository then Flit will create one for you.

Then, whenever you want to start, or continue with, a feature or bugfix simply do flit start feature my_new_feature. Flit will create, or switch, to your feature branch, ready for you to start hacking away.

You can then use Git as normal, committing your changes as and when you see fit. Once you’ve finished work for the day on your feature or bugfix, flit stop will return you back to your development branch.

Once your feature is complete flit finish feature my_new_feature will pull down changes in master, rebase them into your feature branch and then merge your feature back into master.

Caveats

Flit is an extremely early alpha. Features may be broken or just plain missing, but getting this code out into the open-source community where people can start hacking away with it is much more important.

To that end, the entire codebase is hosted on GitHub. If something’s missing just fork the code, add your fix and send me a pull request.

Requirements

Git 1.6.4 or greater
Ruby 1.8.7 or greater
RubyGems

Installation

The easiest way to install Flit is through RubyGems:
gem install flit --pre

Alternatively you can install Flit from source:
rake gem && rake install

YUI Compressor TextMate Bundle

Matt — Fri, 13 Nov 2009 13:14:25 +0000

Even though the Google Closure Compiler is very useful for compressing JavaScript it has absolutely no support for CSS, something that the YUI Compressor excels at. I give you the YUI Compressor TextMate bundle, an almost direct port of the Google Closure Compiler TextMate bundle but with a different compression library.

It has support for compressing multiple JavaScript and CSS files at the same time; just select the files you want to compress and hit ⇧⌘Y.

Requirements

The YUI Compressor bundle requires:

The YUI Compressor
Ruby version 1.8.7 or greater (installed as default on Mac OS 10.5 and above)
and TextMate (obviously)

Please make sure you read the README before installing. The YUI Compressor TextMate bundle is licenced under the GPL Licence. This bundle has only been tested with the latest versions of Mac OS X (v10.6.2) and TextMate (v1.5.8) but should work with earlier versions as long as the requirements above are met.

Get It

Using this bundle? Got any suggestions? Let me know in the comments!

Google Closure Compiler TextMate Bundle

Matt — Tue, 10 Nov 2009 15:51:12 +0000

I’ve been trying out the brand new Google Closure Compiler instead of the YUI Compressor. I’m not going to go into any detail about the Closure Compiler as there’s plenty of information out there already, but I can say that it looks like another solid offering from Google.

Anyway, in an effort to make a pretty good piece of software even better I decided to make a TextMate bundle for it so that it’s never more than a keystroke away (defaults to ⇧⌘G).

Requirements

The Google Closure Compiler bundle requires:

The Google Closure Compiler (not included in the bundle)
Ruby version 1.8.7 or greater (installed as standard on Mac OS 10.5 and above)
TextMate (obviously)

Make sure you read the README file before installing. The Google Closure Compiler TextMate bundle is licenced under the GPL Licence. This bundle has only been tested with the latest versions of Mac OS X (v10.6.2) and TextMate (v1.5.8) but should work with earlier versions as long as the requirements above are met.

Get It

[Update] The bundle is now available via the GetBundles TextMate bundle. Simply search for “Google Closure Compiler” (Recommended)
Downloads
Source code

Using this bundle? Got any suggestions? Let me know in the comments!

Equal height columns with pure CSS

Matt — Mon, 12 Oct 2009 11:46:36 +0000

A common problem when designing for the web is how to create equal height columns. The usual solution is to either resort to JavaScript or CSS absolute positioning, here I will show you how to create equal height columns with pure CSS using the margin, padding and float properties.

HTML

The HTML of our page is going to look something like this:

CSS

Our page is going to be 500px wide, with a 300px content area and a 200px sidebar. The CSS:

#wrapper {
margin: 0 auto; /* Center the wrapper horizontally */
overflow: hidden;
width: 500px;
}

#content, #sidebar {
margin-bottom: -10000px;
padding-bottom: 100000px;
}

#content {
float: right;
width: 300px;
}

#sidebar {
float: left;
width: 200px;
}

The Demo

Putting this together you end up with something like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page 1
Page 2
Page 3

Why does this work?

The key to creating equal height columns using this method are the overflow: hidden selector on the wrapper and the large padding-bottom and negative margin-bottom. Any padding is hidden when setting the overflow of the container to hidden. Basically, this means that by setting a large enough padding-bottom then we can effectively stretch the background colour of the element to the bottom of the page. If 10000px isn’t enough then just make it even larger.

The large negative margin-bottom then tells the browser where to render the bottom of the box (I think. Don’t quote me on that). If we had set a height of the container this wouldn’t have worked, and without the negative margin-bottom we would have ended up with a container over 10000px tall.

When using this method always make sure that you set the margin-bottom to be equal and negative of the padding-bottom.

And the best bit of this method? If you decide that you now want your sidebar on the right, simply set float: right on the #sidebar and float: left on the #content.

Blog redesign #4 (and why the WordPress Plugin API needs fixing)

Matt — Thu, 08 Oct 2009 14:18:18 +0000

Whilst I was redesigning my blog (what do you think by the way) I decided that what I really needed to finish it off was an ajaxy live search. Now normally I would have looked for a jQuery version, but as I’ve been trying my hand at a bit of MooTools recently I decided to write my own plugin. By the way, if you want to use it on your own site it’s available for download on GitHub.

After a few minutes hacking it together on my local web-server I had a pretty good implementation, even if I say so myself. However, once I’d installed it onto my live server it stopped returning any results. The reason for this? I had WP Super Cache installed on my live server, but not on my local server, and was messing up the JSON output by putting a comment at the bottom. Obviously, the JavaScript function refused to parse it as valid JSON. When I turned WP Super Cache off everything returned to normal.

As a developer this was simple enough to debug and fix, but for the average user who just wants to use WordPress, install some plugins and then start blogging away this incompatibility simply isn’t good enough. Before you know it you’ll end up with your support forums full of posts such as “Your plugin doesn’t work with xxxx, please fix it“, even if you have already stated this issue in your readme and installation guides.

Then it struck me: the WordPress Plugin API is broken. As developers we shouldn’t have to rely on users checking that their plugins play nicely together, the plugin should know before it has even been activated. An excellent example of this is the RubyGems framework. I propose, therefore, Glimmer – the next-generation plugin manager for WordPress. Now, that’s a pretty bold claim to make, but I strongly believe that this is the route that WordPress ought to be going down. But just don’t take my word for it, let’s have a look at what’s planned for Glimmer Alpha 1:

Dependency checking: Utilise the hours of work carried out by other developers by building on their plugins. The user is prompted if a required plugin is missing. Glimmer can then, in some cases, automatically install missing plugins. Glimmer can even check to make sure that the correct WordPress version in installed and that certain PHP functions and extensions are available.
Incompatibility checking: Known issues with a third party plugin? Don’t rely on the user, Glimmer can warn them about possible incompatibilities before they have even activated the plugin on their site.
Easy distribution: You are no longer forced to use the WordPress hosted SVN if you want to provide automatic updates of your plugin. Glimmer uses Appcasts, a RSS variant, to distribute your code from any web server. If users have already installed Glimmer they can ask it to install from the your-plugin-name.glimmer file which gets distributed with your plugin, saving them the need to upload your plugin via FTP (and potentially getting it wrong).
Awesome updates: Glimmer automatically checks for plugin updates. Better still, Glimmer supports multiple development branches (e.g. providing a legacy branch for a previous version of WordPress) and scheduling future updates via the RSS pubDate element. You can also embed any release notes in the feed to be displayed to the user before they update.
Glimmer is an extension, not a replacement: Users who haven’t got Glimmer installed will still be able to use your plugin but just without all the fancy features and improvements that Glimmer provides. If you want to Glimmer-ise an existing plugin simply add a your-plugin-name.glimmer file to the plugin directory.

Glimmer is open-source, it’s licensed under the GPL Licence, and is available on GitHub. If you would like to contribute to Glimmer please get in touch, by leaving a comment here, messaging me on Twitter or just send me a pull request on GitHub.

Using Capistrano to deploy PHP (or anything else in a Git repository)

Matt — Thu, 17 Sep 2009 21:56:32 +0000

Recently I’ve been looking at a way to ease the path of deploying PHP applications to my servers. I eventually settled on the excellent Ruby tool Capistrano which is very popular with the Rails crowd. Now, I’m aware of the irony of using Ruby to deploy PHP but please bare with me.

All of my code is stored in the Git VCS with a bare repository on the server, which is what you should be doing as well. Once you’ve got used to managing your code with Git over SSH you will never want to go back to FTP again. Seriously, try it.

My work-flow is fairly typical: clone the repository onto my local machine; hack away; commit the changes and push the commit back to the server. The problem arises when it comes to deploying this code – I could either set up a post-update hook in the bare repository to pull the changes into the web root or do it manually.

Using a post-update hook is not ideal. For one, I might not want to trigger a git pull every time I push a commit to the server. Furthermore, how would I go about differentiating between staging and production servers? And manually SSH-ing into the server, changing to the correct directory and running a git pull every time is just too long winded and time consuming.

Instead, I looked at a way to automate the process. I’m quite a fan of Ruby, so I naturally turned to a Ruby solution, Capistrano. Plus the blurb on their home page described the exact tool that I was looking for. That’s some really great copy writing. So, without any hesitation, I quickly ran sudo gem install capistrano and started to have a play around.

The first thing you want to do is to create a capfile in the root of your web application. This is to capistrano as a rakefile is to rake and a makefile is to make. Once you’ve got your capfile you can run cap -T to see a list of your Capistrano recipes. By default Capistrano includes the invoke and shell recipes. I’m not going to explain what these do as they are documented well enough elsewhere.

The next thing you want to do is to create your deploy namespace:

set :web_directory, "the deployed file location"
set :branch, "origin/master"

role :server, "your server address"

namespace :deploy do
desc "Updates the code on the server"
task :default, :roles => :server, :except => { :no_release => true } do
run [ "cd #{web_directory}",
"git fetch origin",
"git reset --hard #{branch}" ].join("; ")
end

desc "Rollback a single commit on the server"
task :rollback, :roles => :server, :except => { :no_release => true } do
set :branch, "HEAD^",
default
end
end

Then once you decide that your code is at the right point to be deployed to your web server, simply call cap deploy. That’s it! No more messing around with Git commands on a remote server.

This isn’t an ideal configuration, obviously there ought to be a way to decide which branch/tag is checked out. But, as a 2 minute fix, this’ll do for now.

jQuery Plugin: rf.Sparks

Matt — Wed, 20 May 2009 11:03:19 +0000

[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Sparks demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.

This month’s jQuery plugin is one that creates an effect that I like to describe as “sparks”. We are currently using it on the Redflex splash page whilst we prepare for a new product launch.

From a code point of view it is a reasonably simple effect to produce, all we are doing is creating a whole bunch of

s with an image inside them, and then move them about a bit.

For the sake of brevity I am not going to show you the whole plugin code. If you want to go into more detail than I’m going to here download the development version at the bottom of the page. Instead I’m going to dive right in and show you how to use it.

Hello, World Sparks

The simplest usage of the plugin is by calling:

$('#container').sparks();

where #container is the element that you want to display the sparks in. It renders 10 sparks with the image /img/sparks/spark.png and a speed of 5.

Customising Sparks

The plugin is very versatile, you can create as many instances with as many images and/or speeds as you want. Please note: with large numbers of sparks you may notice a significant performance hit.

Creating your own custom sparks is as simple as:

$('#container').sparks([
{
number: 10, // how many sparks to create
speed: 5, // how fast you want this to move
img: '/img/sparks/custom-spark.png' // the spark image
}
]);

If you want to have different images for your sparks (like the Redflex splash page) then you just need to add another array to the plugin options. For example:

$('#container').sparks([
// custom spark 1
{
number: 10,
speed: 5,
img: '/img/sparks/custom-spark.png'
},

// custom spark 2
{
number: 5,
speed: 3,
img: '/img/sparks/custom-spark2.png'
}
]);

Simples, eh?

Demo

Background by pareeerica

$('#sparks-container').sparks([
{
number: 10,
speed: 5,
img: '/downloads/rf_sparks/spark.png'
}
]);

Download

Minified (1.2KB Gzipped)
Packed (1.4KB Gzipped)
Development version (1.5KB Gzipped)
or fork it on GitHub

How to recreate the Konami code in Javascript

Matt — Mon, 11 May 2009 14:22:57 +0000

Facebook has featured in social media blogs recently for adding a Konami code Easter egg in their home page. In this blog post I show you how to add similar “functionality” to your site using Javascript.

First, the full code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// check to make sure that the browser can handle window.addEventListener
if (window.addEventListener) {
// create the keys and konami variables
var keys = [],
konami = "38,38,40,40,37,39,37,39,66,65";

// bind the keydown event to the Konami function
window.addEventListener("keydown", function(e){
// push the keycode to the 'keys' array
keys.push(e.keyCode);

// and check to see if the user has entered the Konami code
if (keys.toString().indexOf(konami) >= 0) {
// do something such as:
// alert('Konami');

// and finally clean up the keys array
keys = [];
};
}, true);
};

The script adds a callback function to the keydown event which stores the keycode in the keys array. It then checks the array against the pre-defined konami array (which contains a keycoded version of the Konami code).

Found the Konami code (or any other easter eggs) on the web? Let me know in the comments.

Why fee is better than free

Matt — Thu, 23 Apr 2009 12:00:54 +0000

There is a major problem with the approach of many internet based companies. Don’t get me wrong, I’m as much a fan of them as anybody, but if they want to survive they need to get smart. And fast.

Very simply, the majority of internet based companies are not self-sufficient. Without massive injections of cash from their investors/founders they would not survive their first year in business. This is due to their inability to raise any revenue from their user base.

Let’s have a look at Twitter, the media’s web application of the moment. In the three years since the application was created they have only managed to survive through their very generous investors which have pumped a massive $55 million into the company. And the best bit? They still haven’t made any money and don’t appear to have any idea of how to go about changing the status quo.

But it doesn’t stop there. According to a recent report by Credit Suisse, YouTube is on track to lose it’s parent company Google roughly $470 million in 2009 alone. By anyone’s books that is a bitter pill to swallow. And then of course there is the social network Facebook that has plumetted in value from $12 billion in 2008 to only $4 billion today.

There is a very obvious conclusion to draw from these statistics – that free, advertising supported services simply do not work in their current guise. Of course, many companies are now adopting a freemium business model with mixed success but, after all, you just can’t beat a company that is offering a similar product for free.

Therefore, I suggest that companies try to re-educate people about the true value of the price tag. It isn’t simply a way to part people from their hard earned cash – it’s a sign of company confidence in a truly great product.

jQuery Plugin: rf.Highlight

Matt — Sat, 11 Apr 2009 10:34:27 +0000

[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Highlight demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.

I needed a simple implementation of the famous Yellow Fade Technique (YFT) for a new product that we are developing at Redflex. We struggled to find a YFT jQuery plugin that was simple to use, had a small file size and supported chaining. I give you rf.Highlight.

To highlight an element simply call:

$('#element').highlight();

And, of course, it is also customisable (default values are shown):

$('#element').highlight({
color: [255, 255, 187], // rgb color of the fade (yep, it doesn't have to be yellow!)
duration: 400, // duration of the fade in milliseconds
quality: 20, // quality of the fade (the higher the number the better)
wait: 3000 // initial pause before the element starts to fade
});

Because it relies on RGBa browser support for the fade it is only compatible with Firefox 3, Safari 3.2+ and Google Chrome. On unsupported browsers you will get the yellow highlight to transparency but without the fancy fading transition.

Demo

Click me!

$('#highlight_demo').click(function(e){
$(this).highlight();
});

Download rf.Highlight

Minified (0.9KB Gzipped)
Packed (1.2KB Gzipped)
Development version (1.0KB Gzipped)