Creating accessible web sites isn’t that hard as long as they are static. But the web isn’t static any more! As the web technology evolves we tend to make more dynamic web sites that are becoming more and more state full than the old and boring state less web. We do this with the help of JavaScript and AJAX to update a part or section of the page if the user clicks this or that button or what ever. And this makes it way harder to create accessible web sites for visitors not using a mouse to navigate or who can’t see the actual page.

But as the “regular” web technology evolves with HTML5 and such, so does the accessibility part of the web as well. I just stumbled upon this great talk from Google IO 2011, and I think this is something that every web developer who likes to call her or him self a web developer should see. At least I know what I will do the next couple of weeks! With some really small efforts we can make the web much more accessible for people with various impairities.

And I encourage every web developer to follow the Google Developer Channel at Youtube. There’s a lot of good stuff there!

Now, there are several ways to compact JavaScripts: Packer, YUI Compressor, Shrink Safe, jsmin and many more. Some of these just remove redundant white space and comments, some obfuscates the code and shortens variable and function names and what not. Many of these scripts and programs are very fine but they require you to manually minify your scripts, and that’s just a hassle!

But since we use Roxen CMS at work things get much easier if you write your own Roxen filter module which automatically minifies JavaScripts on the fly, given they meet certain criteria. And so I did!

I ported the original jsmin code written in C to Pike. Then it was just a matter of creating a simple filter module for Roxen. And then it was all done.

You can use two criteria to determine if a script should be minified or not:

1. Path glob: In the module settings you can specify any number of directory globs or full paths. If a requested JavaScript either is in a directory matching a glob or is a direct match it will be minified.
2. Query string variable: In the module settings you can define a variable name that if exists as a query string variable in the request the JavaScript will be minified. So:

   <script type="text/javascript" src="myscript.js?jsmin=1"></script>

   will minify myscript.js

And that’s that!

jsmin Roxen filter module

Anyway, I had a URI parser regexp lying which I wrote for a Vala class (before I found the Soup.URI class) and I thought that since that’s reusable I could hack up a JavaScript URI class myself. So I did!

Here’s some examples of usage:

var uri = new URI("http://poppa.se/blog/javascript-uri-class/");
console.log(uri.scheme); //-> http
console.log(uri.host);   //-> poppa.se
console.log(uri.path);   //-> /blog/javascript-uri-class/
console.log(uri.port);   //-> 80

Now, if we want to alter the host so that it contains www we do:

uri.host = "www.poppa.se";
console.log(uri.toString()); //-> http://www.poppa.se/blog/javascript-uri-class/

It’s also easy to alter query string variables:

var uri = new URI("http://host.com/?name=poppa&lang=se");
uri.variables["name"] = 'Günther';
uri.variables["lang"] = 'de';
console.log(uri.toString()); //-> http://host.com/?name=Günther&lang=de

And I think that’s pretty smooth

Download the URI class