Must-read thread for any WP plugin coders. I’ve written two suggestions, about using a template mechanism and about using classes and proper PHP5 OO-code.

Thanks to a Superuser question i asked a few weeks ago i discovered the wonderful iReader plugin for Google Chrome. It mimics Safari 5.0′s new Reader functionality almost to perfection (hopefully Apple won’t be pointing their copyright lawyers to this blogpost right now). The ‘Reader’ option in Safari gives you an uncluttered view of an article on a website without ads and nice fonts, a bit like Readability or Instapaper but with multi-page support.

It doesn’t quite render multi-page articles perfectly, such as the infamous Wired article on the death of the web. But Safari’s Reader doesn’t render that correctly too.

There’a also a beta version available for Firefox.

New version of jQuery targeted for mobile touch devices. Release date is somewhere end of this year.

var foo = [3, 4, 5, 2, 1];
foo.sort(function(a,b) {
    return a < b;
});
console.log(foo);

In Firefox this gives the result you expect ([1,2,3,4,5]), but in Chrome and Safari, it doesn't (and in IE too probably). When re-reading the spec at Mozilla's dev site i discovered why:

If compareFunction(a, b) is less than 0, sort a to a lower index than b. (…) If compareFunction(a, b) is greater than 0, sort b to a lower index than a.

So, the return value should not be true or false but -1 or 1. The example above should be written as:

foo.sort(function(a,b) {
    return a - b;
});

Wondering how they’re gonna pull this off security-wise.

Preferences (either from the menu or from the wrench) –> Under the hood –> Scroll down to ‘Web content’ and uncheck ‘Offer to translate pages that aren’t in a language i read’.

I didn’t know this option existed. However, i still think Chrome should have an option in the dropdown menu in the translation bar itself, for which i’ve opened a ticket.

The script is based on this version by Nicholas C. Zakas but adds an extra option to load an array of Javascript files.

Fork it on Github or get a minified version.

Here’s how  you use it:

// Loading a single file
jsDynaLoad("single.js", function() {
    alert("callback after the single file");
});

// Loading an array of files
var files = ["1.js", "2.js"];
jsDynaLoad(files, function() {
    alert("callback after the array of files");
});

// A callback is not required
jsDynaLoad("nocallback.js");

To get a better performance remember to place your scripts at the bottom of your page, close to the closing </body> tag. You can also include the minified version of loadScript inline in a <script> tag to save a HTTP request.

When using Freemarker in Magnolia, you often get errors. For example, because you tried to use an undefined value and didn’t add the required ‘!’ symbol. When that happens you see the infamous red-on-yellow “FreeMarker template error!”. During development, that’s not a problem, but on a production site you don’t want to confuse your visitors with cryptic Java errors.

Unfortunately, it’s not that easy to turn those errors off, and you probably do want people to report these errors because they might indicate a serious bug in your website.

For this purpose i wrote a small Javascript function that you can use to ‘prettify’ the Freemarker error. It replaces the stacktrace with a general error message, but the user can still see the original error by clicking on a link. The script requires jQuery, which is included in the STK or can be downloaded from jQuery.com. To run in, just add it to your $(document).ready() function.

To view the script read the Magnolia wiki page.

The Konami code is a pretty cool way to hide easter eggs on your website. If you want to include the code on your site but something like Konami-JS is a little too heavy you could try this small jQuery snippet.

function konami(fn) {
    var input = "";
    var pattern = "3838404037393739666513";
    $(document).keydown(function(e) {
        input += e.keyCode;
        if (input.indexOf(pattern) !== -1) {
            fn();
            input = "";
        }
    });
}

The function gets one argument: a function that is executed when the code is passed correctly. Use it like this:

$(document).ready(function() {
    konami(function() {
        alert("You did the Konami! W00t!");
    });
});

The first beta of WordPress 3.0 is out. That’s nice because you can update the themes that you developed to take advantage of all the new features. However, documentation for WP 3.0 is lacking, especially in terms of new functions and global variables. So, i ran PHPxref to make documentation for this new beta.

Check it out here.