haykranen.nl

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

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.

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

Ik heb een aantal simpele snelle recepten met weinig ingrediënten van deze geweldige thread op Metafilter vertaalt naar het Nederlands. Veel kookplezier!

Snelle noodles

noodles * courgette * evt. kip * evt. roerbaksaus

Kook noodles. Roerbak courgette, eventueel met kip. Voeg de noodles toe en eventueel een roerbaksaus.

Pasta met Boursin en erwten

pasta * boursin * erwten

Kook pasta. Giet af, maar bewaar een kopje van het water. Meng pasta met de Boursin en (ontdooide) erwten. Voeg het kookwater toe voor een iets dunnere saus.

Pasta met kip en tomaten

pasta * kip * tomaten * knoflook * verse basilicum

Kook pasta al dente. Bak kipfilet. Fruit wat knoflook in olijfolie, en voeg dan tomaten en verse basilicum toe en uiteindelijk de kip en pasta.

Gnocchi met pesto

gnocchi * pesto * halve ui * 1-2 teentjes knoflook * 1 deel balsamico azijn * 3 delen witte wijn

Kook gnocchi volgens verpakking. Fruit een uitje en knoflook. Voeg de gnocchi toe samen met wat balsamicoazijn en wat witte wijn. Laat de wijn inkoken en breng op smaak met peper en zout.

Geitenkaas en rozijnencurry

2 kopjes witte rijst * geitenkaas * 2 handjes rozijnen * rode aardappelen * halve rode ui * blikje kokosmelk * kerrie, chili, paprikapoeder

Snipper ui en snij de aardappels in blokjes. Bak aardappels en ui en olijfolie. Voeg kokosmelk toe, samen met de kruiden. Voeg de rijst toe, laat sudderen voor 8 minuten. Voeg dan de rozijnen en verkruimelde geitenkaas toe en laat nog een minuutje pruttelen.

Chinese tomaten met ei

1 middelgrote tomaat * 2 eieren * rijst * evt. halve ui

Snij tomaat en ui in blokjes. Wrijf een pan in met olie en kook de tomaten in een bodempje water zodat het net niet aanbrand. Voeg een beetje suiker toe. Haal de tomaten uit de pan. Maak roerei. Terwijl de eieren nog zacht zijn voeg je de tomaten toe en meng met de eieren voor een paar seconden. Serveer met rijst.

Ook leuk voor korte recepten, en als u op Twitter zit: tweetrecepten: Recepten in 140 karakters.

I’ve been experimenting a bit with the <canvas> tag. And hey, what’s a better way to use it right now than to make a browser screen full of snow? It even works in Internet Explorer (using excanvas) although pretty slow. For best results view in your favorite non-crappy standards compliant browser.

View a demo here. And if you want to tinker with it, download the sources from Google Code (open source under the MIT/X11 license).

Want to learn more about the <canvas> tag? Try this tutorial from diveintohtml5.org or the one from Mozilla.

Merry christmas!