• Check if your javascript are valid with jslint.
• Minify your javascript with Closure Compiler (optimize and minify your code).
• Watch your javascript files for jslint while you’re coding.
• Create an aggregated file of all your javascripts.

Ready.js is written in node.js and the source code is available on github.

How to install it

First, all you need it to install git and node.js. Then, you do the following :

1. run git submodule add git://github.com/dsimard/ready.js.git ready.js
2. run cd ready.js && git submodule init && git submodule update && cd ..

3. Create config file in your_project/ready.conf.js :

    { src : "./javascripts", // the source dir of js files
      dest : "./minified", // the destination of your minified files
      minifiedExtension : "min", // Extension of the minified file
      runGCompiler : true, // if should run GoogleCompiler
      aggregateTo : "./minified/all.js" // Which file to aggregate all javascript files
    }
   

4. run echo 'node ready.js/ready.js ready.conf.js' >> .git/hooks/pre-commit

Then, every time you commit, ready.js will be run. You can see alternative installations on the github page.

Why this tool?

First, I wanted to write something in node.js. Javascript is a long time favorite of mine and I’m really excited about node. Second, I wanted to have a build tool for jsKata and I hated all of them. Third, I don’t like the “cache” principle in Rails and wanted to have something else.

Try Ready.js today!

What is a singleton?

A singleton is a design pattern. When instanciating a singleton class, it will always return the same instance of the class. You can’t create more than one instance of the class no matter how many time you call the “new” operator.

Some people think that singleton shouldn’t be a pattern. Personally, I never use it in javascript because they are not “javascript-friendly” (in fact, the whole concept of OO is not javascript-friendly). Here’s what I do.

The alternatives

Just between you and me, when we want to use a singleton, it’s probably because we want to encapsulate a certain part of the code to be easier to read and understand.

Alternative #1 : simple and clean

The easiest way of encapsulating functionalities is to create an object. Sure, it’s “untyped” but types don’t mean a lot in a dynamic languge like javascript. You have to learn to work with it. Here’s how I do it (view on github).

Alternative #2 : more complex

Let’s say you have a big project and you want to really separate every functionalities in “namespaces”, it would be easier to use a more complex technique.

You can take a look at jsKata where every library I wrote has its own namespace (jsKata.undo or jsKata.timezone). jQuery is also using this technique (source code).

Let’s say you have a 2 levels deep namespace but you use the alternative #1 as described ealier. You would end up with this (view on github).

As you can see at line #6, the reference to your msg variable is pretty long. If you have a lot of code, it would become redundant.

If you want to keep your code readable, it’s a good idea to use a self-invoking function like this (see on github).

Let’s study it line by line.

var instance = (function() {
//… code is here…
})();

This is the self-invoking part of the technique. You see that function(){} is in parenthesis. So the result of the parenthesis is a function object (and not the result of the function). After these parenthesis, there’s an empty set of parenthesis. It means that the object function in parenthesis is called.

var i = {
// … more code …
}

This creates a scope. At this moment, the i variable is used as a shorthand for myApplication.instance.

hello : function() {
alert(i.msg);
}

As you can see, we can use i in the hello function to get the msg variable.

return i;

Finally, by returning i as the result of the function call, it gets assigned to myApplication.instance.

No more singletons please

When you know these techniques, I can’t see any reason of using singletons anymore. Forget about using javascript as if it was a complete object-oriented language and start using it as it is.

How does it work?

In short, this library doesn’t do a lot but saves you a lot of troubles. It returns the standard time offset of the user’s browser. From there, you can narrow the list of possible time zones for a user. To have the standard timezone offset simple call :

You can see a demo.

Other functions

Under the hood

You can’t have a named time zone in javascript (example : eastern time or central time), you can only have a time zone offset which is represented by universal time (UTC) minus the distance in minutes to it by calling dateVariable.getTimezoneOffset(). It means that if the time zone offset is -1 hours of UTC, javascript will give you 60. Why is it inverted in javascript? I have no idea.

In winter, it’s always standard time. In summer, it’s daylight saving time which is standard time minus 60 minutes… but not for every country. Plus, summer and winter are inverted in the southern hemisphere. That’s a lot of exceptions and that’s why I created the jsKata.timezone library.

I launched jskata not a long time ago and mostly talked about the undo feature. Now, I will talk about the jskata NoFreeze library to avoid freezing by splitting long processes into smaller ones.

You can look at the demo, the documentation or the source.

Old plain loop

This script loops the index variable from 0 to 1000000 and writes the current value in document.title. Unfortunately, it will freeze the page until the whole process is done.

How to write a responsive for

I’m using jsKata.nofreeze library to avoid the freeze. This script will do the same as above. But, the page will remain responsive during the whole process.

It uses closures to keep a resemblance to a good ol’ for loop.

Other loops : infinite and each

There are two other loops available. Infinite will loop indefinitely until you stop it. Each will loop through the properties of an object and loop in each one.

Take a look at the documentation to know more about them.

How to stop a process

As you see, every functions (forloop, infinite and each) return an object containing a stop function. So to stop a single process, just call it.

If you want to stop all the processes of a page, make this call :

More to come…

There’s much more you can do with that library but I wanted to keep it simple for this post. Next, I’ll talk about multi-process and other kinds of loop.

Annoucing redo in jskata.undo

I made a new version of jskata.undo still hosted on GitHub. If you look closer, it is now part of a library called jskata that is not officially announced. My next post will talk about it in details.

Demo

Take a look at the demo. The javascript of the demo is available here. You can see the complete doc on GitHub.

How does it work?

Execute an action that you can undo/redo

Doing something requires calling execute with 2 functions as parameters : the do and the undo.

Undo and redo the last action

Very easy!

Events and properties

For the moment, jskata.undo has just one event : onChange.

There are 2 properties : canUndo() and canRedo().