marcus ramberg

If you want to write tests for your JavaScript code from Perl, Claes’ module Test::JavaScript::More comes in handy. This module works by evaling everything from the use line as JavaScript. Of course, now you’re mixing two languages in one file, which is not going to make any of your syntax validators happy. However, loading it like this will please both perl and jslint:

m| /* |; # Comment out JavaScript
use Test::JavaScript::More;
__END__ = '';  // It's is all JS from here. */
ok(1,'Success!');

One final note. I had some problems building the cpan module of JavaScript on OSX with Spidermonkey from ports. If you have the same problem, get the latest and greatest version from GitHub, which fixes this issue.

Mr Speaker is doing a series of posts on how to do 3d graphics with the HTML 5 Canvas:

JSON has become a popular data-exchange format lately, and it’s even been adopted as a config format by some. It’s apparently useful for this, with an easily definable syntax, and fairly simple to understand for the en user. However, one factor that could hamper the adoption of JSON is the lack of comment support. This is a really strange omission. After all at JSON is really just a Javascript data structure, and JavaScript does support both the // and /* comment */ style.

In any user-editable text, comments is useful both to explain sections, and to temporarily disable a section. I’ve been looking for a new generic data structure representation to replace YAML, and JSON seemed like a really promising candidate, until I found out about this limitation.

*Update: The plot thickens. According to the JSON Wikipedia Page, the JSON spec used to include support for /* comments */ (c-style). Seems they changed it. Conveniently, this helps to make JSON a YAML subset. I’m pretty sure it is not worth that tho. Anyone have a link on the process that resulted in this?*

“If you look at the history of JavaScript it was originally designed to do things like have a pushable button, but it moved beyond that to become what nobody expected; namely a programming language for web applications.

I believe that with the current race to improve javascript performance, JS stands a good chance of being the language to use both on the server and the client in the near future. It is interesting to read about Google’s motivations, since they are somewhat on both sides of the table on this issue. It’s just as important to them that other browsers improve their JS runtime as that Chrome does it, in order to support their JS heavy applications like GMail and Google Reader.

Need to deal with Uris in a structured way in your client side code? This project is inspired by the Perl URI class, which is the defacto way of manipulating Resource Identifiers in Perl.

One of Arne’s long-standing wishes for our video bookmarking site iwatchthis.com has been proper keyboard navigation. Today I finally found some tuits, and Just Fucking Did It.

Turns out that with a couple of javascript libraries, it was surprisingly easy. Step one was the keyboard shortcuts library, which let you hook up to keyboard input in this simple fashion:

   shortcut('up',function() {
        alert('Lucy in the sky with diamonds');
   })

However, rather than bore you further you with Beatles lyrics, I hooked it up to the excellent scrollTo jQuery extension, which lets you smoothly scroll to any anchor in in the page (I added anchors into the video item for convenience):

    $.scrollTo('#item_'+num, 313); // Donald number of miliseconds

I also used the URLs from the pager to allow left and right arrows to go to the next/previous page, if those links exist. (This is a simple matter of setting window.location).

shortcut("left",function() {
    var elem=$('.pager .prev');
    if (elem[0]) { window.location=elem.attr('href'); }
});

That was easy, but one issue still remained. Whenever you click inside a flash area (which most videos on iwatchthis are), flash cowardly steals the focus disabling our nice keyboard navigation, however I found a way to work around this:

$('embed').focus(function(){
    window.setTimeout(function() {$('#item_1')[0].focus(); }, 500);

})

Allows us to pilfer back the keyboard focus from the flash widgets shortly after giving it up. Note that in my tests, setting the focus on the document body rather than a link did not work. Also, it seems that this event does not trigger on safari. :/
The good thing about unobtrusive javascript like this tho, is that is downgrades nicely, rather than leaving your visitor with an unusable site. Too bad we can’t do much about the flash requirement.

Good article from alistapart showing a good workflow for debugging your javascript code with firebug and other available tools.

Joose, the javascript meta object system inspired by Moose recently released version 2.0 of their framework adding support for  offical support for types/sub types as well as coercisons. There are also a bunch of other changes, read on at the original announcement. You can also check out the project homepage.