As you may be aware, I’ve been doing a fair bit of work with baseline grids this past couple of weeks. As part of that work, I’ve created two tools to help with displaying the grid.

One, Baseliner is a JavaScript tool, that creates a baseline grid overlay. There is an accompanying bookmarklet%7Bvar%20_grid_height=10;if(window.baseliner)%7Bbaseliner.toggle();%7Delse%7Bvar%20_already_loaded=document.getElementById(‘baseliner-script’);if(_already_loaded)%7Breturn;%7D;var%20_baseliner=document.createElement(‘script’);_baseliner.id=‘baseliner-script’;_baseliner.type=‘text/javascript’;_baseliner.src=‘http://files.keyes.ie/baseliner-latest.min.js';document.getElementsByTagName('body')%5B0%5D.appendChild(_baseliner);var%20loadFunction=function(evt)%7Bif(window.baseliner)%7Breturn;%7D;baseliner=new%20Baseliner(_grid_height);baseliner.toggle();%7D;_baseliner.onreadystatechange=loadFunction;_baseliner.onload=loadFunction;%7D;%7D)();), which means it’s easy to drop a grid over any page. The other, Baseline Background, is a web app that generates PNGs that can be used to create your baseline grid (Baseliner uses this).

There are a few reasons why I’ve published these, the most important being that I enjoy creating things. That aside, I believe it’s important to continue learning new skills and to hone current ones. So when creating these works I tried to do achieve it with some technologies that I hadn’t used before.

My first cut of Baseliner was jQuery powered. It’s too easy to turn to jQuery when writing any JavaScript for the web. So one of my first tasks after the initial release, was to remove this dependency, and to write pure JavaScript. There is nothing groundbreaking involved, but it felt good to do some work at that level.

Early versions also used PNGlib, a JavaScript library, for generating the background images. I then referenced these images using data:uris and base64 encoded images, again a first for me. That led an investigation into browser support and the inevitability that it wouldn’t work in IE6 and IE7.

Another aspect I dived into was how to deliver the latest version of Baseliner for the bookmarklet. I had to host it somewhere, so I decided to use CloudFront, not because it was necessary, but because it was something else that I hadn’t used before.

Then I decided to drop the PNGlib dependency and setup a web app to serve the PNGs. My first stab at this was a simple PHP script. That was to prove the concept, then I thought this would be a great opportunity to try a Django deployment on Heroku. This was something that I’d wanted to try for a while, so the timing couldn’t have been better. The app is now running at baselinebg.keyes.ie.

The two apps are [MIT licensed][10] so feel free to have a look around. Even with a simple problem, you can learn something while implementing it’s resolution.

Maybe the next time you have a smallish problem, you’ll use a new tool to resolve it. It’s just another reason why I love the web, it provides great opportunities for continuous learning.

[10]: http://jkeyes.mit-license.org/