Blog archives

De mafste platenhoezen uit Nederland

Hommy Klein en vele anderen zien u graag tegemoet op dit prachtige weblog. Niet alleen voor de plaatjes maar ook voor het geweldige commentaar:

Dit is de eerste hoesfoto in de geschiedenis van de vaderlandse plaat, waarvan het belangrijkste deel wordt ingenomen door een blinde muur van een seinhuis.

Blog archives

Transpair: tien dagen lang een ruimte hacken

De theaterzaal van de vechtclub in Utrecht is de komende tien dagen het toneel van een experiment van interieurarchitect Loes Glandorff: Transpair. In die ruimte heeft ze een complete woning neergezet waar ze tien dagen gaat wonen, terwijl ze samen met bezoekers meegebrachte spullen repareert en ze een nieuwe functie geeft: transparing.

Tegenwoordig is het zo dat spullen als ze kapot gaan meestal weggegooid worden, met dit project wil Loes laten zien dat het einde van een ding juist een nieuw begin kan betekenen, en een mogelijkheid tot herinterpretatie.

Tijdens de tiendaagse bewoning is er een livestream te zien van de gebeurtenis, hier beneden. Meer informatie op de website. Woensdag 14 juli en zondag 18 juli zijn er open dagen, donderdag 22 juli is er een borrel en veiling van de objecten.

Blog archives

Dé finale

Op het Vrijthof in Maastricht wordt tijdens de WK-finale morgen geen alcohol geschonken. In Utrecht hebben ze besloten om uiteindelijk wel een groot scherm neer te zetten, maar dan wel op een industrieterrein. Tot overmaat van ramp heeft de gemeente Utrecht ook nog een prachtige ‘tip’ gegeven op haar website:

Na de wedstrijd kan er sprake zijn van een euforische, of van een teleurgestelde stemming. In beide gevallen geldt: laat het niet uit de hand lopen en houd uw hoofd koel!

Op naar het museumplein in Amsterdam dus morgen.

(foto Darwinist / CC-BY)

Blog archives

jsDynaLoad: Dynamic Javascript loader with multi-file support

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.

Blog archives

How to use Javascript to make Freemarker errors less intrusive

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.

Blog archives

Easy concatenation in Javascript

When developing stuff in Javascript and jQuery you often need to concat lots of HTML for output. That gets ugly pretty fast.

$("#mydiv").html('<div id="lightbox-container-image-data-box">' +
this.something + '<div id="lightbox-container-image-data"><div' + 
'id="lightbox-image-details"><span id="lightbox-image-details-caption">' +
v + '</span><span id="lightbox-image-details-currentNumber"></span>' + 
'</div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose">' + 
'<img src="'+settings.imageBtnClose+'">');

There are a few different ways to concat strings in Javascript and make your code more readable.

Using the + operator:

var html = "<table>" + 
    "<tr>" + 
    "<td>" +
    "</td>" + 
    "</tr>" + 
    "</table>";

I don’t like this notation. To make it readable you need an extra space after the closing " and you can’t nicely line up all the strings.

Another way is using the Array.join("") method:

var html = [
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
].join("");

This has the disadvantage that you need a method at the end of the array, and in modern browsers it is a little slower than native concatting.

Another way is using the String.concat() method

var html = (new String("")).concat(
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
);

I especially like this last method. Unfortunately the syntax is a little clunky. My colleague Frank suggested a slightly different notation

var html = ''.concat(
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
);

This is valid because '' is equivalent to (new String(“”)). This works great and makes passing HTML as an argument to jQuery methods a lot more readable:

$("#mydiv").html(''.concat(
    '<table>",
    '<tr><td>',
    '</td></tr>',
    '</table>'
));