Jerome Etienne.js Blog

Around JavaScript, node.js, WebGL and cool HTML5 game stuff

Debug.js: Automatic Globals Detection in Javascript

This post is about detecting global variables in javascript and eradicating them :) This is a first post about debug.js, a library to make javascript easier to debug. Global Detection is one of the features of this library. I came up with the idea back in May 2012 at Web Rebels at Oslo. So i was quite enthusiatic and started coding right away on the plane back home. Now, debug.js has quite a bit of features. In future posts, we will detail them and explain how they can be useful in your own code.

Debug.js: assertWhichStop.js

This is post presents assertWhichStop.js. assertWhichStop.js is a simple library which provide an assert() which stops… who would have guessed :) You may find that surprising but in your browser, javascript’s assert() does not stop the execution of the code but it does in other languages. assertWhichStop.js will make your assert stop even in your browser.

assertWhichStop.js is a part of debug.js library, which we talked about in previous posts. This post will explain why it is usefull to stop and how to use assertWhichStop.js. This library is very small , barely 10 lines full total at the time of writing. It is based on a little gist we did in collaboration with jens arp. Ok now let’s see more deeply what is assert.

console4Worker - Console API for Worker

console4Worker is console API for WebWorkers. WebWorkers are hard to debug. On top of that, console API is unavailable in WebWorkers. It doesn’t help.

console4Worker is a simple library which tries to fill this gap. It provides the console API , the same api you are used to. It implemented in most browser, node.js, even part of commonjs. See the demo in the examples/ directory.

On the Worker Side

First you include the script with this line.

1
importScripts('console4Worker-worker.js');

And you are done! Now you can console API as you would normally do, even if you are in a webworker. Lets say something like

1
console.log("console call made from inside a webworker");

Pacmaze Update

Pacmaze just got an update. it was long overdue, i admit, other matters distracted me from it. It is good to be back on it tho. It is version 5 now. It is a major performance update, 5 time faster in some cases. The game is now embeddable in external pages. Additionnaly, Packy has been renamed Pucky as a reference to the original name of pacman, ‘Puck-Man’. You can read all about the history of pacman in the pacman dossier.

Embedded game

See an embedded version below. Use AWSD keys to play or play the full page version.

MicroCache.js - Cache Micro Library

microcache.js is a micro library to handle in-memory cache. It is less than 20 lines and works in node and browser. It is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Install it

To install it on node

1
npm install microcache

To install the browser version, download it and include it like that

1
<script src="microcache.js"></script>

GoWithTheFlow.js - Async Flow Control With a Zen Touch

GoWithTheFlow.js is a javascript asynchronous flow-control micro library which works in node.js and in browser. It allow to control how your asynchronous code is executed, sequentially or in parallel. Flow() is only 30lines.

How to use it

Let start with a basic example. 2 jobs run in sequence. The first job is a timeout so the result is delivered asynchronously, and a second job is run only after the completion of the first.

1
2
3
4
5
6
7
8
9
Flow().seq(function(next){
    console.log("step 1: started, it will last 1sec");
    setTimeout(function(){
        console.log("step 1: 1sec expired. Step 1 completed");
        next();
    }, 1000);
}).seq(function(next){
    console.log("step 2: run after step1 has been completed");
})

It will display the following

step 1: started, it will last 1sec
step 1: 1sec expired. Step 1 completed
step 2: run after step1 has been completed

Javascript Class Inheritance Ala vapor.js in 3 Lines

This post describes a standalone way to add class inheritance in your javascript code. We will do that ala vapor.js, so no dependancy or external framework. A vaporjs inheritance is only 3 lines!

Lets get started, say you got a class animal. It gonna have a constructor and a method talk.

var Animal = function(opts){}
Animal.prototype.talk   = function(){ return 'mumble';  }
Animal.prototype.sleep  = function(){ return 'zzzzz';   }