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

• Downloads
• Source

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

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 – something akin to the YUI Compressor bundle – 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!

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:

<div id="wrapper">
    <div id="content">
        ...
    </div>
    <div id="sidebar">
        ...
    </div>
</div>

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:

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.

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.

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.

Originally posted at Redflex.

- -

We’re really excited to annouce our newest product, Hydrogen. So what exactly is it? Hydrogen is what we like to call a “support-centric discussion area”, it is a place where you and your customers can submit any problems, questions or ideas that they may have.

We built Hydrogen for one simple reason, all the other help desk / support applications available are either too bloated or too complicated to use. Customer support should be easy, with the minimum of padding between you and your customers.

Support applications should be quick & easy

Hydrogen is designed to be quick to learn and easy for developers to extend. Set up your account in less than a minute, add your support staff and start communicating with your customers almost instantly.

Support applications should be part of your brand

You can change the design of Hydrogen, with few limitations, by adding your own custom CSS. It is even possible to keep your own domain name for your Hydrogen account. All Hydrogen accounts also get their own account.hydrogenapp.com subdomain.

Support applications should be tailored for your company

Whatever the size of your company, we’ve got a Hydrogen plan to suit. Paying plans start at a very competitive £9.95 per month with no limit on the number of products you can add to your account.

Support applications should be easily extendable

With our REST API (currently in private beta) it’s possible for third-party developers to build upon our already extensive service. We strongly believe in data portability and with an open API none of your data is locked in.

This is just the beginning

Hydrogen is a brand new product and there are already some major updates that we’ve got planned for the next few weeks. The best way to keep up with new features and updates is by keeping an eye on our blog or by following @redflex and @hydrogenapp.

So what are you waiting for? Sign up for a new installation. There’s no restrictions or credit card required for the first 15 days — what have you got to lose?

[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 <div/>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

$('#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

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.

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.

[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

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

Download rf.Highlight

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