Tag Archives: tricks

Binding to an specific host with express.js

The documentation on the listen method is really vague, but the way you can make your server listen to an specific address only is this:

var server = app.listen(3000, '127.0.0.1', 511, onServerListening);

In this case I want the server to respond only to connections using the 127.0.0.1 host name. Not 0.0.0.0, and not localhost. Only 127.0.0.1.

The reason for this is that I am playing with Twitter’s OAuth and I was stumbling upon this issue because express insisted in binding to 0.0.0.0 by default (i.e. any address), but it wouldn’t work well when Twitter redirected back after authenticating.

For reference, another thing I tried and didn’t work:

var server = app.listen(3000, '127.0.0.1', onServerListening);

Notice that the 511 parameter is missing. So effectively it would take onServerListening as if it was the 511 parameter, which according to the documentation is “the maximum length of the queue of pending connections” and it wouldn’t call the callback. Booo.

lute

I found this little development server built with node.js and I thought I’d recommend it to you since it fixes most of the annoyances I have with the traditional SimpleHTTPServer Python solution. You can install it globally with:

npm install -g lute

And then you can enjoy…

1) Automatic port management

It will find a new available port if the default is in use, so you don’t have to manually manage this, which can be cumbersome when you need to have several local servers running at the same time. Just type

lute

and TA-DA! you get a local server with autoassigned port, serving the files in the current directory.

Or you can also force it to use an specific port:

lute -p 3030

2) It can trigger the ‘open’ action in your browser

You can write this on your command line

lute open

and it will open localhost at whatever port it found, using your default browser.

3) Automatically injects livereload in your scripts

This can be both a blessing and an annoyance–it is not playing too well with HTML imports:

A call to document.write() from an asynchronously-loaded external script was ignored.

An issue has been diligently filed.

If you’re not using HTML imports you will be able to enjoy changing things on your code and getting them instantly autoreloaded in the browser–so you can save a few keystrokes!

Failproof AJAX requests in Firefox OS

Have correct values in the manifest

The app type has to be at least privileged. No, web (hosted) apps won’t work with different domains if CORS is not enabled there.

Add the systemXHR permission too, or your XMLHttpRequests to domains without CORS enabled will instafail.

Example of the syntax for these two things in the manifest:

{
  "type": "privileged",
  "permissions": {
    "systemXHR": {
      "description": "Allows loading remote content"
    }
  }
}

Add the “magic word” when creating XMLHttpRequest objects

The magic word being the mozSystem property:

request = new XMLHttpRequest({ mozSystem: true });

You should now be able to use the request in the usual way. Remember to add an error handler in case it fails!

We are using these superfailproof requests in our privileged app template to load definitions from MDN. Have a look!

For more info

Modules in PhantomJS

PhantomJS has support for CommonJS modules, or as they call them, “user-defined modules”. This means that if your script called main.js is in the same directory as your other script usefulScript.js you could load the second from main.js, using require in the same way that you would use when using nodejs.

However the official post announcing this new feature says that you should use exports to define your module’s exposed functions, but that doesn’t work. The right way to do it is to use module.exports, like this:

function a() {
    // Does a
}

function b() {
    // Does b
}

module.exports = {
    a: a,
    b: b
};

And then in main.js (which is executed with phantomjs main.js):

var useful = require('./usefulScript');
useful.a();
useful.b();

I thought you could only load npm-installed modules by referencing the module by its full path (including node_modules, and referencing the ‘entry point’ script directly), but a superhelpful commenter pointed out that maybe I could just require as normally. And it works! Of course, the modules should be compatible with the available modules and API calls in PhantomJS too.

First an example referencing the whole path:

var nodeThing = require('./node_modules/nodeThing/main.js');
nodeThing.doSomething();

The same could be rewritten as:

var nodeThing = require('nodeThing');
nodeThing.doSomething();

as long as there’s a package.json file in the module that defines what the entry point of the nodeThing module is. For more information, here’s the documentation for the package.json files.

Sorry if this seems a silly post, but I’m quite new to PhantomJS and I’ve been unable to find this answer anywhere else, so hoping this will help more people looking on how to include or use external scripts in their PhantomJS code.

classList: easily manipulate CSS classes with plain JavaScript

You might already know you can change the class of an element with the className property:

var title = document.getElementById( 'title' );
title.className = 'active';

But what if you also wanted to add another class name to the class attribute? What if you wanted to add, for example, ‘animated’, without knowing a priori which classes are there already? You could just append to the existing value:

title.className += ' animated';

and pray that ‘animated’ wasn’t already there.
Continue reading