haykranen.nl

Objective best practices for WordPress plugin development

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.

jQuery Mobile | jQuery Mobile

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

Sorting in Javascript using the Array.sort() function doesn’t work how i thought it did:

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;
});

Mozilla proposes a fullscreen API for HTML5 sites

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.

I wrote a (very) small Javascript function to dynamically load Javascript files. In modern Javascript development you usually have more than one Javascript file in your page (e.g. jQuery, a few plugins, a main javascript file) that depend on each other. Loading them using the <script> tag works, but sometimes you get a dependency problem because scripts are not guaranteed to load from top to bottom in the order they appear in on the page.

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.