Compilation time is where doTemplate is excel, thanks to doT, the compilation results are stored as strings until they are requested to be converted to DOM (using toDOM() method or inserted into the dom (using the rendering methods). This allows for better compilation time and more flexibility as you can access the compiled items through the template items property, convert it into a jQuery object and access it or simply use on of the rendering methods to rendering to the document.

The template function is automatically cached and when items are converted to jQuery a data object is attached containing the source, data, compiler function and compiled string for the item being converted, this allow for creation of template based on existing data accessible in the DOM as well as based on an existing doTemplate instance.

Best thing is to try it and make your own mind, hopefully there is enough at github to help you get started

Also it’s not officially release yet laboite is starting to be at a stage where its functionalities are worth putting into the public eyes. Some of the main goals are already achieved and only few minor functionalities are missing even if many tweaks are still to come.

Like the old one the basic usage is as a jquery plugin however this one have effects and layouts objects which can be extended so that the plugin can create libraries of custom user interfaces and transition effects making customization a very easy tasks. See the readme on Github for more information on how to use those objects.

The plugin can also inject a gallery into the page instead of just offering the expected modal view which offers a lot more creative opportunities and also allows the markup to control the interface. Many options have also been added to the extend that the plugin could even be used to even create interface such as dropdown menus or preview windows.

If you want to find out more just go to the Github page, read the readme document and checkout the demo folder.

req.js is tiny script / module (sort of) management system which can:

• Load javascript files and execute callback when the requested files are loaded
• Execute callbacks in the order they were declared for multiple identical requests
• Store objects declared using req API and make them available as arguments in the callback function when requested
• Return its settings object and its module storage objects
• Set and get configuration parameter
• Can return a loaded/declared object from its storage

Usage

// load modules
req(['user','panel'], function(user, panel) {

});

// load modules in the callback scope and an external file in the global scope
req(['user','http://domain.com/data.js','panel'], function(user, panel) {

});

// set a configuration parameter
req('path','http://resources.domain.com/js/');

// set multiple configuration parameter
req({
    path: './',
    order: false
});

// get a configuration paramete
var p = req('get','path');

// get the settings object
var config = req().settings;

// declare a module
req('dummy', {
    foo: function() {
        console.log('foo');
    }
});

// request a module (the module must be loaded)
var mod = req('dummy');

// get an object containing all the modules
var list = req().objects;

// get an object of both settings and objects setting in one go (as you might have guess by now...)
var obj = req();

Minimalistic chainability

// change path
req('path','./')

// declare a module
('core', {
    init:function(){

    }
)

// load the declared module just for irony sake
(['core','module'], function(core, mod) {
    core.init();
    mod.load();
});

Get to the code

req.js on Github

is.js

is a tiny (~200 bytes) strict type checker/engine which offer a little API to test JavaScript types as well as allows the creation of custom type checkers.

is.js on Github

isFn.js

is a tiny class that allows the creation of custom type checkers.

isFn.js on Github

Core API

domglue( String selector | HTML Element | Nodelist, object data, object options);

Grab DOM elements, bind data to elements found and return an object containing methods based on the data keys which allows to update the data object.

The options object is optional and can be used to change the settings for the instance created.

Usage

<!DOCTYPE html>
<html>
<script src="domglue.js"></script>
<body>
<div id="content">
    <h1 data-bind="title">Title</h1>
    <p data-bind="message">Message</p>
</div>
<div class="loop">
    <p data-bind="foo"></p>
</div>
<div class="loop">
    <p data-bind="foo"></p>
</div>
<script>

var data = {
    title: 'Hellow World',
    message: 'I am filled in by domglue'
    },
    dg = domglue('#content', data); 

    // the content element now contains <h1>Hello World</h1><p>I am filled in by domglue</p>

    // this will update the Message in 3 seconds
    setTimeout(function() {
    dg.message('New message is now in place');
    }, 3000);

var dg2 = domglue('div.loop', {foo:'foo'});

setTimeout(function() {
    dg2.foo('Foo');
}, 5000);

</script>
</body>
</html>

Get it

domglue on github.

Mucilage is a lightweight data to template binding engine which allows to bind the updating of the template with the data. Mucilage return an object containing methods matching the data keys which can then be used to update the data object or retrieve current values.

Due to the nature of the template engine the template is re-compiled everytime the data object changes.

Mucilage also come in a “light build” which is based on a strip down version of the template engine so it allows only interpolation and doesn’t have any configurable settings.

Usage

Basic

This can be done with the light version as only interpolations.

var template = '<h1>{{=$.title}}</h1><p>{{=$.message}}</p>',
    data = {
    title: 'Title',
    message: 'Message'
    },
    muc = mucilage(template, data, document.getElementById('content')); 

    // the content element now contains <h1>Title</h1><p>Message</p>

    // this will update the Message in 3 seconds
    setTimeout(function() {
    console.log(muc.message());
    muc.message('New message');
    console.log(muc.message());
    }, 3000);

Advanced usage

Requires the full version

<div id="content"></div>
<script type="text/mucilage-template" id="templ">
<h1>Just static text</h1>
<p>Interpolation {{=$.f1   +    $.f3}} </p>
<div> JavaScript block evaluation
{{ for(var i=0; i < $.f2; i++) {
    console.log("Pass\t" + i);
    }}
    <div>{{=$.f3}}</div>
    {{ } }}
    </div>
    <div> Encoding {{!'<a   href="http://github.com"></a>'}}</div>
</script>

// original data and template
var data = {
    f1: 10,
    f2: 10,
    f3: 10,
    },
    template = document.getElementById('templ').text;

// convert data into a mucilage object
data = mucilage(template, data, document.getElementById('content'));

// update data object and update the template
setTimeout(function(){
    data.f1(5);
}, 3000);

Get it

Full feature version is around 4KB and the light version is around 1.2KB.

Available from github at https://github.com/gillescochez/mucilage see test for various usage cases.

Usage

In your HTML

<link href="qunit.css" type="text/css" rel="stylesheet" />
<script src="qunit.js"></script>
<script src="testRemoteJS.js"></script>

In javascript

testRemoteJS('script.js', function() {
    expect(1);
    ok(foo, 'foo exists');
});

Get testRemoteJS @ github

_str will also keep an history of all the modifications made so it is easy to rollback or access the all history. It is also possible to store manipulation state which can later be retrieve individually or as a all (useful if you can have one chain for all your changes but need multiple formatted version of the original strings)

_str was started only few days ago and is not ready for release yet but you can follow it’s development and/or use it as it is if you wish (a fair amount of tests are done using Qunit already)

Check it out _str@github.

Before on windows I could just get rid of the fancy skin, disable services and others to make some spaces and optimize performance but the control you have over the OS is quite small really.

Here with Ubuntu I can finally make my operating system match the minimalism of my development ways. I tried many flavour from the normal ubuntu, kubuntu, lubuntu and LXDE. LXDE seemed to be the closer to what I was looking for at first but it was still providing more than I needed.

So I had to ask myself, what do I really need from an operating system?

1. Run application I need (of course)
2. Take as little resource as possible

And that’s pretty much it, I don’t need a taskbar, a clock, icons and all those fancy application and widget, I just need a platform where I can read my email, browse the web and develop.

So in the end I went for a minimalist installation of ubuntu, text based login and openbox as my window manager, which open automatically at login and then launch a terminal, chrome and my email client respectively in desktop 2, 3 and 4. I keep desktop 1 as my workspace.

Memory usage of my idle system is now 50MB (out of 1GB) and it only passes the 200MB barrier if I have a lot of tabs opened in Chrome (also there is lighter browser Chrome has good standard so that’s my development browser of choice) And the most important thing it’s really fast for what was originally a single core Celeron processor running Vista out of the box!

I still use Thunderbird as email client, I try Sylpheed which was lighter but I had few issues with it that sent me back to Thunderbird, also I am quite tempted to try terminal based email client. (UPDATE: Actually going for Claws-mail much lighter than Thunderbird)

As for editor after trying many I settle for vim, it’s light, simple yet elegant and it just feel like the right editor to use for me.

Now I need to set it up in dual boot on my desktop system too, I’ll always keep a windows version on that one because once in a while I need to do some gaming and nothing beat a PC for that.

I’ll go over a method I use which provide a flexible solution for handling callbacks inside a jQuery plugin. It increase the overhead of a lot of method by one function call but the amount of callbacks it can handle for the footprint is quite attractive.

Basic jQuery plugin structure

A quickly made up plugin structure with options and a couple of methods.

(function($) {

    var pg = $.fn.myPlugin = function(options) {
        pg.options = $.extend({}, $.fn.myPlugin.defaults, options);
        pg.alertFoo();
        pg.alertThis('Boo');
    };

    $.extend(pg, {
        alertFoo: function() {
            alert('foo');
        },
        alertThis: function(text) {
            alert(txt);
        }
    });

    $.fn.myPlugin.defaults = {
        callbacks: {}
    };

})(jQuery);

The call method

By creating a call method inside our plugin we create a mean to run any method of the plugin through this method which give us the freedom to look for callbacks based on the method name which can occurs before or after the method is executed.

The following call method can support any number of arguments and also support returning the value if the method called returns any.

It’s important to note that methods don’t have to be call that way so if there is some methods that don’t require callbacks just call them directly to limit the overhead.

call: function(method) {

    // any before method callback?
    if (pg.options.callbacks[method+'Before']) pg.options.callbacks[method+'Before']();

    // call method
    var res = pg[method].apply(null, Array.prototype.slice.call(arguments, 1));

    // any after method callback?
    if (pg.options.callbacks[method+'After']) pg.options.callbacks[method+'After']();

    // return the result if any
    return res || null;
}

Now we can change our method calls to use the call function as such.

     var pg = $.fn.myPlugin = function(options) {
        pg.options = $.extend({}, $.fn.myPlugin.defaults, options);
        pg.call('alertFoo');
        pg.call('alertThis', 'Boo');
    };

We can now bind callbacks before and after those method by passing them into the callback options object like follow.

$('#myElement').myPlugin({
    callbacks: {
        alertFooBefore: function() {
            alert('I am called BEFORE alertFoo()');
        },
        alertFooAfter: function() {
            alert('I am called AFTER alertFoo()');
        }
    }
});

You could also overwrite the default options if the callbacks apply to multiple instances of the plugin.