Open Mail window

Here’s something that has annoyed me ever since I got a Mac: when switching applications using the keyboard (e.g. ⌥-Tab), choosing Mail would not actually open a window if there wasn’t one open already. It seemed this was only good for switching to windows, not applications.

Although this bugged me, I never got round to finding a solution, until now. It struck me that you can switch between mailboxes using ⌘ and a number key. So ⌘1 will actually open my Inbox nicely.

Test apache configuration syntax

Recently my Mac OS X stock install of Apache failed to launch properly. The regular system preferences interface stopped and started Web Sharing without complaining, but I could not find httpd actually running using ps -ax | grep httpd in the terminal.

I was at a loss to explain why, until I found this little gem that you can use to syntax-test your configuration files with: apachectl -t will report on any errors in httpd.conf or any of your other included files.

It appeared that some time ago when I was attempting a manual upgrade of my Subversion install to 1.6.9 some Apache modules were corrupted. As I have no use for them I disabled them.

That did the trick, and now I’ve got my local development environment up and running again.

jQuery custom selectors

I like writing jQuery plugins, so I can separate functionality into distinct units. But applying the plugin sometimes requires some logic I’d rather have in my plugin itself.

Example code

Say I want to create a plugin that creates a lightbox-style image zooming effect. I want to apply it to all links pointing at an image:

<a href="/images/photo1.jpg"><img src="/images/photo1.jpg"></a>

Here’s how I might call my awesome plugin in my main javascript file:

$(function() {
    // One option: create complex inline selectors:
    $('a[href$="jpg"], a[href$="png"]).awesome_plugin();

    // Second option: filtering
    $('a').filter(function() {
        $(this).attr('href').match(/\.(png|gif|jpe?g)$/);
    }).awesome_plugin();
});

These both might work, but they move typical plugin logic to my javascript initializer. That’s not what I want.

Custom selector

The solution is so obvious I wonder why I did not think of it before: write a custom jQuery selector:

$(function() {
    $('a:to_image').awesome_plugin();
});

Awesome: concise and with clear intent. Here’s one way to implement it:

// Somewhere in my plugin
$.expr[':'].to_image = function(obj, index, meta, stack) {
    return $(obj).attr('href').match(/\.(png|gif|jpe?g)$/);
};

Now all the logic is nicely tucked away in my plugin.

Internet Explorer, Javascript and base elements

Internet Explorer treats the base element a bit diffently from other browser. I ran into the issue when trying to change the current page’s hash through javascript:

window.location.hash = 'some_value';

Internet explorer took the entire base URL and prepended it to the hash, resulting in an URL like http://domain.tld/http://domain.tld/#some_value. That’s clearly not my intention.

The trick lies in the href attribute for links. This actually points to the faulty long url, while its actual attribute value is only the hash:

<a id="link" href="#some_value">...</a>
// IE: http://domain.tld/#some_value
// other browser: #some_value
$('#link').attr('href');

The trick is to replace anything before the pound when reading the href value, like so:

$('#link').attr('href').replace(/^.*(?=#)/, '');

And when trying to find links pointing at #some_value to not be too restrictive with your selector:

// finds 1 in other browsers, nothing in IE
$('a[href="#some_value"]')

// works like expected in all browsers; Note the *
$('a[href*="#some_value"]')

Tricky stuff!