10 June 2007

Html generation in JavaScript

I started playing a little bit more with JavaScript recently, and one thing that bothered me was generating HTML. For example, if you have a AJAX application of any reasonable size, it probably has to change a lot of stuff inside of the various divs or other elements as it runs. For that, you need to write a lot of ugly-looking, long-running string concatenations. So, I took an idea used by the Lisp folks or in the Ruby Markaby library and I created a library to write HTML in JavaScript. I’m not sure if I’m the first one to come up with this, but my Google-fu failed in this case, so maybe… Anyway, with my JsTemple you write something like this:

$table({cellpadding: 10},
  $tr(
    $td(
      $div({klass: 'container', id: 'main'},
        $h1('Foobar'),
        $h2('Foobar2'),
        $h3('Foobar3'),
        $h4('Foobar4'),
        $h5('Foobar5'),
        $div({id: 'layer', style: 'border: solid 3px #f00; padding: 10px;'},
          $p({klass: 'foo'},
            'foo', $strong('bar')),
          $p({klass: 'shmoo'},
            'shmoo'))))));

And you get this:

<table cellpadding="30">
  <tr>
    <td>
      <div class="container" id="main">
        <h1>Foobarh1>
        <h2>Foobar2h2>
        <h3>Foobar3h3>
        <h4>Foobar4h4>
        <h5>Foobar5h5>
        <div id="layer" style="border: 3px solid #f00; padding: 10px;">
          <p class="foo">foo<strong>barstrong>p>
          <p class="shmoo">shmoop>
        div>
      div>
    td>
  tr>
table>

I generated the necessary data about tags / possible properties from HTML 4.01 W3C specification, so all the tags should work and invalid properties should be ignored. “Should”, because the generating was a little bit tricky and I’m not 100% sure if everything is the way it should be. The dollar sign is a bit annoying, too, but my goal was to avoid cluttering of the global namespace, especially a variable name like “i” may be quite popular… I don’t know how it works performance-wise or memory-wise either (certainly some optimizations are possible), but it seems to work under Firefox, Opera, Konqueror (Safari?) and MSIE 6/7 and it even doesn’t crash any of them in a short time, what I consider a big success. I don’t really know if this is useful at all (most people don’t seem to like balancing parenthesis or don’t know a decent editor which highlight pairs of matching parenthesis, judging by Lisp popularity), but you can grab it here. To start using it simply include the js file using

One more tip: keep in mind that jsTemple just returns a string, so you can for example use it with Prototype’s Template class.

02 June 2007

Guerilla Computing

The title mem spawned in my mind as a result of two things. First, I finally tried a tiling window manager, after many people recommending it to me throughout the last year or two (most recently in the comments to “My Linux Stack”, thanks Torben!). Secondly, I didn’t have too much time recently to play with my setup, having high school final exams and getting back to work, so I found 900mb of updates waiting for me in portage.

Now, 900mb is a lot. A few years ago I had a pretty complete and useful Slackware setup on my old computer weighing 900mb. I choosed packages by hand, I used some advice from the Saving Space HOWTO, made ruthless decisions about what software I need and what not. Now, I have 12gb filled up on the partition with Gentoo. I wonder how much of it is garbage. I decided I don’t want it this way anymore and I don’t want to spend that much time on keeping up to date with the software, upgrading packages, fiddling with this stuff etc.