You are currently browsing the archives for the release tag.

JSlide, JavaScript slideshows

A few days ago I came across S5, a nice script for doing slideshows in the browser. However, I didn't like a few things in it, and one of them is that one presentation has to take up all the space on the screen. One nice thing I wanted to be able to do is to embed a presentation in, say, a blog article. That's how I came with JSlide…

You can watch an example here, and see how it degrades when there is no javascript here.

Here's the way to create your own presentations :

First you have to download the following files (and the prototype library) :

Next, add the following markup to your page/article/whatever :

<div style="width:400px; height:300px; margin:0 auto">
  <div class="jslide">
    <!– Meta information : each line is optional –>
    <div class="meta">
      <div class="title">[title]</div>
      <div class="author">[author]</div>
      <div class="company">[company]</div>
      <div class="date">[date]</div>
    </div>

    <!– This generates automatically the titlepage –>
    <div class="frame titlepage"> </div>

    <!– A simple slide –>
    <div class="frame">
      <h3>[title]</h3>
      [content]
    </div>

    <!– A slide, shown steps by steps –>
    <div class="frame">
      <ul class="steps">
        <li>[step 1]</li>
        <li>[step 2]</li>
        <li>[step 3]</li>
      </ul>
    </div>
  </div>
</div>

That's it. You can also add the fullscreen class to the div having the jslide class if you want the slideshow to start in fullscreen (of course, this will work for only one slideshow on the page…).

Pattern matching in JavaScript

This morning I was wondering if it would be possible to do some kind of pattern matching using JavaScript. So I fired up my vim and I started coding just after lunch, and I'm pretty happy with what I came up with : the answer is yes.

If you are impatient, you can jump to the example page1. If you are not, please read on.

My first thought was that when one does pattern matching, the idea behind is to be able to discriminate values (über switch) and be able to deconstruct complex structures. The latter requires the use of variables in the pattern. Without touching to the syntax, it is tricky to come up with something more elegant than the following solution :

    // — snippet — //
    var id = Math.random ();
    var idname = Math.ceil (10000 * Math.random ());

    this.variable = function (name) {
      var o = {};
      o.name = name;
      o['__match_pattern_id'+idname] = id;
      return o;
    }

    function is_variable (s) {
     return (s &&
       s['__match_pattern_id'+idname] &&
       s['__match_pattern_id'+idname] == id);
    }
    // — snippet — //

Basically, each object is assigned to unique ids, and those are used to create objects which can be easily recognized without using too much black magic. The rest is pretty straightforward : it's some really basic one way unification, without any priority.

var m = new Match_Pattern ();
var _ = m.variable;

function fact (n) {
  return m.match(n,
  [
    [    0  , function ( ) { return 1                    }],
    [ _("n"), function (a) { return (a.n * fact(a.n -1)) }]
  ]);
}

The syntax is pretty clear too : match takes two arguments : first the element to match, and second an array of "couples" (in fact, arrays). Each of those contain a pattern and a function to call if the pattern is matched. As I said beford, all variables in the pattern are in fact dummy (recognizable) objects which will be detected while going down the structure of the pattern, and bound to the correct value.

There was one last point though : how to access the unified values in the function ? I went with the most obvious solution : dump everything in an object and pass it as an argument. This has one major drawback : it is not possible to use twice the same variable, but this is actually a good and sane thing.

Moreover, as I said before, there is no notion of priority based on how deep the matching goes, the first matched pattern is selected2. And there are of course no guards, though these would be quite easy to implement.

Feel free to comment.

Downloaded : 306 times
File : pattern_matching.js
Size: 2.7 ko
  1. Note : if something has cross browser problems, it's definitely the displaying functions, not the core []
  2. Actually, it works a lot like OCaml pattern matching works… []

Joo, JavaScript on OCaml

My readers might have noticed that I really like JavaScript and OCaml. Thus, it's natural to write a webserver in OCaml which serves scripts written in JavaScript. Crazy ? Maybe a little, but as the guys from mod_js said: others do worse.

I started by modifying Thumper which I slightly modified (in order to deal with post queries). Then I added OCaml CGI to encode and decode queries, SpiderCaml which includes SpiderMonkey in OCaml and OCaml Mysql to use MySQL. Actually this was more like doing Lego than coding…

What can it do ?
URIs are parsed as : /module/action/arg1/arg2/arg3. This will execute Module.action(arg1, arg2, arg3), where Module is defined in the file modules/module.js. The default module being home and the default action, index.

This being said, their is a Joo object in the global namespace which contains useful stuff:

// headers
for (e in Joo.Headers) print(e+" "+Joo.Headers[e]+"<br/>");

//  GET
for (e in Joo.Get) print(e+" "+Joo.Headers[e]+"<br/>");

// POST
for (e in Joo.Post) print(e+" "+Joo.Headers[e]+"<br/>");

// a mysql wrapper
Joo.mysql.connect({
    host:"localhost",
    user:"user",
    name:"database"
  });
Joo.mysql.query('select * from foo');
while(r = Joo.mysql.fetch()) print(r.id + "<br/>");

// an include function
Joo.include('foo/bar.js');

Note : the print function just adds text to the output buffer, their is no control on the flushing, sorry. Everything is sent at the end.
Moreover, I have added the MIME types only for html and jpeg files, you may want to add other MIME types in main.ml

Downloaded : 168 times
File : joo.tar.gz
Size: 47.1 ko

JavaScript key binder

A simple script which allows to bind keys (or sequence of keys) to actions in javascript.

// initialize the binde
Bind.init();

// the function to bind
function aux () {
  alert('42 !');
}

// let's bind it to 't'
Bind.bind('t', aux);

// let's bind an anonymous function
Bind.bind('a', function () { alert('a')});

// binding some modifiers
Bind.bind('ctrl-a', aux);
Bind.bind('alt-a', auxi;
Bind.bind('shift-a', aux);
Bind.bind('ctrl-shift-a', aux);

// binding sequences
Bind.bind('alt-a return', aux);
Bind.bind('tab tab', aux);

That was the basic environment. The following is a little more advanced:

// limit to a single element of the page
Bind.init('id_de_mon_element');

Some pages require different states (or modes), it's possible to bind a key to a function if the page is in a particular state:

var state='state0';
Bind.init(window, 'state');

// bind t when state is state0
Bind.bind('t', function () {
  alert ('t in 0');
}, 'state0');

// bind t when state is state1
Bind.bind('t', function () {
  alert ('t in 1');
}, 'state1');

// change the current state
Bind.bind('s', function () {
  state = state == 'state0' ? 'state1' : 'state0';
});

Of course, you can also bind the following keys : tab, return, up, down, left, right, delete, backspace, escape, space. By the way, it is not case sensitive, so alt-t and AlT-T are equivalent.

The code is right below, and requires Prototype.

Downloaded : 251 times
File : bind.js
Size: 3 ko

Sandclick

Often when I feel depressed I have this imperious need to create something, anything. And those days, I'm not so well, so I code quite a lot. Let me introduce you to Sandclick, a stupid little game written in less than an hour in OCaml. The code is awful, but nevermind…

First, what does it look like ?

I bet most of you have already played to those games where you have to click on colored boxes on a grid to make them disappear. Sandclick is exactly this king of game, the only difference is in the way it deals with falling boxes.

Usually, in those games, when a colored block is above and empty space, it falls into it. In Sandclick, blocks fall like sand : grains can fall on the side, here is what happens when there is an empty space:

  • if there is something above, this something falls down
  • if not, then the content of what is on the top left or top right falls

And it goes on and on until it stabilizes.

Downloaded : 174 times
File : sandclick.tar.gz
Size: 9.5 ko