Deploying to Heroku with Mercurial

Despite all the arguments for why git is better than x, Mercurial suits my purposes just fine. The only problem was I really wanted to start using Heroku for web app hosting, but their platform requires you to deploy via a git push.

It turns out there’s a nifty plugin for mercurial called Hg-Git which enables pushing to, and pulling from, a git repository. It’s beta software, but it seems to work just fine.

Once the hg-git is installed, follow the getting started guide for Heroku up until pushing to the remote server. You can then replace the git push instructions with

hg push git+ssh://<your-heroku-app-name>.git

To make life even easier, create an alias in the local hgrc:

push-heroku  = push git+ssh://<your-heroku-app-name>.git

and push away with

hg push-heroku

The only problem with this systems is that the Heroku command line utility tries to determine the Heroku app name from the local git repository. Since there isn’t a git repository, you must specify --app <your-heroku-app-name> whenever using the Heroku tools.

jQuery 1.4 is out

jQuery 1.4 is out and the new version looks like a very strong update. Rather than bloating with a lot of new features this release builds on the current strengths of the library. Some impressive performance improvements are also included, and the internals have undergone significant restructuring.

Of the API changes that do bring new features my favourite would have to be quick element construction with an object literal:

var newAnchor = $('<span>', {
    id: 'confirm',
    text: 'Click me',
    css: {
        background: 'red',
        color: 'white',
        fontWeight: 'bold',
        padding: '4px'
    click: function() {
        return confirm('Are you sure?');

14 Days of jQuery has an extensive rundown of the new features and changes in version 1.4.

Full Frontal 2009

Full Frontal 2009, a one day JavaScript conference, wrapped up yesterday in Brighton.

A few highlights, in no particular order.

Despite being a new conference the all the sessions were excellent. Ajaxian has a great set of posts covering most of the talks in greater detail.

Optimise PNG images with PNGSquash

PNGSquash is simple little utility for compressing stripping bytes from PNG images to achieve smaller file sizes.

NetBeans as a JavaScript IDE

Most of my Javascript code is created in text editors. My preferred editor, Texmate, does a great job with snippets and syntax highlighting. Lately I’ve been trying NetBeans which has a background parser as well as the regular code folding and syntax highlighting features.

Some first impressions:

More info:

Writing a quick jQuery plugin

I needed a short snippet of Javascript code to scroll the browser window for a usability enhancement I aside from the variations in IE/Firefox scrollTop property, the code is pretty straightforward:

function scrollTo(element) {
    g = jQuery(element).offset().top; 
    smoothScroll = setInterval(function() {
        var distance = (document.body.scrollTop || document.documentElement.scrollTop) - g;
        if (Math.ceil(distance) > 5) {
            window.scrollBy(0, 0 - distance / 5); // scroll the window
        } else {
            clearInterval(smoothScroll); //  we have arrived, so cancel the interval
    }, t);

scrollTo(jQuery('#error_message')); // now call the script

The distance remaining is divided each time to slow down the scrolling speed as we approach the target. This gives a nice smooth effect.

This project used jQuery heavily, so wouldn’t it be nice just to add scrollTo() on the existing code? All I need to do is attach the function to jQuery as a plugin.

jQuery.fn.scrollTo = function(duration) {
    return this.each(function() {
        var t = duration || 20,
            g = jQuery(this).offset().top; // only scrolls to first matched element
            smoothScroll = setInterval(function() {
                var distance = (document.body.scrollTop || document.documentElement.scrollTop) - g;
                if (Math.ceil(distance) > 5) {
                    window.scrollBy(0, 0 - distance / 5);
                } else {
            }, t);

Now I can do:


or even:


It could do with a little cleaning up - weird effects will happen if you pass in more than one object to scroll to, but it’s a good start. This script can now be easily dropped into other projects using the jQuery library.

Speed optismisation trick on Songza

Songza is simple music serach tool. It’s intended as a user interface showcase so there’s some fancy Javascript and CSS going on. External JS and CSS files are loaded through a wrapper:

<link rel="stylesheet" type="text/css" 
    href="/c/?files=css/songza.css,css/flower.css,css/thickbox.css,css/humanmsg.css" />

Each of the CSS files exists on the server seperately, but the c script concatenates them all together before sending to the server. It also seems to strip out whitepsace (but doesn’t gzip them).

It’s a clever idea - they are using over a dozen external files so there’s a big saving in reducing the number of HTTP requests.