Ready.js – continuous integration using jslint, nodejs and git 2010-10-28

Ready.js is a tool to prepare your javascript files for production. It can be used in every type of web project (Rails, Django, node, etc). It does four things :

  • 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!


Alternatives to singletons in javascript 2010-10-20

Singletons are quite popular on this blog. A lot of people are coming here from that search. In a sense, I'm happy to have such a considerable traffic from google. On the other hand, I'm not proud that this post is my most popular. Why? Because I don't believe in singletons in javascript. This concept belongs to more object-oriented languages, even though we can have an half-baked OO in javascript. Singletons are just too much of a hassle compared to a simpler solution.

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.


Auto-detect timezones, time zone offsets and daylight saving in javascript 2010-10-14

I had to work with timezone on the project I'm working on and I hate it. So I created jsKata.timezone to deal with them (view documentation).

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 :

var standardOffset = jsKata.timezone.st();
/* or you can also call a shorter version */ 
standardOffset = jsk.tz.st();

You can see a demo.

Other functions

// Return the daylight saving time offset
var daylightSavingOffset = jsKata.timezone.dst();

// If the time zone has daylight saving
jsk.tz.hasDst();

// Return the standard time zone as a string (ex : -0500)
jsk.tz.stToString();

// Return the daylight saving time zone as a string (ex : -0400)
jsk.tz.dstToString();

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.


NoFreeze : a library that avoids freezing in javascript 2010-08-10

The unresponsive warning happens a couple of time a year but every time, it's frustrating. It prompts the message “A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete”.

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.

var index = 0; // index
for(index = 0; index <= 1000000; index++) {
    document.title = index;
}

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.

var index = 0; // index
jsKata.nofreeze.forloop(
    // the condition
    function() { return index <= 1000000;  }, 
    // the incrementor
    function() { index++; },
    // this is what will be executed
    function fct() {
        document.title = index;
    }
);

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.

var loop = jsKata.nofreeze.infinite(function() {//do nothing});
loop.stop();

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

jsKata.nofreeze.stop();

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.


Announcing the jsKata libraries 2010-06-15

I'm officially announcing the jsKata librairies.

Why?

I just wanted to write some public code and share it with others. Javascript has a lot of pains in the butt and jQuery is not the answer to every problem. jsKata is the answer to some of the problems that I face everyday while writing javascript.

A manifesto?

I wrote a manifesto because it helps me focusing on what and how I want to achieve with jsKata. This is the manifesto of version 0.2.

  • No internal dependence : every library can be used independently “as is”.
  • No external dependence : don’t depend on external libraries.
  • Everything is public : you know what you’re doing
  • Avoid objects : use closures
  • No unnecessary validation : if something goes wrong, an error will pop
  • No error catching : if an error pop, it goes all the way up
  • No DOM : jQuery already exists
  • No plugins : if a developer wants to add something, he will find a way around
  • Write good documentation : document as I code
  • Promote : a good library is nothing without users

What are the libraries available?

I don't consider jsKata to be a library but more a set of libraries because each one can be used independently (see #1 in manifesto). For the moment, there are two librairies.

Undo & redo I wrote about undo and undo & redo before. I took the code and put it in jsKata. You can look at the code or try the demo.

No freeze This librairy is to avoid unresponsive script warning when you have a really long loop. It cuts a loop to create digestible chunks without a warning. I'll write more about this one in the future but meanwhile, you can look at the code or try the demo.

GitHub

All the code is hosted on GitHub. I hope you will enjoy it!