le accidental occurrence

Been looking into the awesome node.js project, “evented I/O” server-side Javascript running on V8.  I got introduced to node.js while attending a Bayjax meeting back in May dubbed Cinco de Node.js with node.js’ creator Ryan Dahl presenting (video).

My little side project (more on that later) involved delving into the internals of the node.js Javascript library and figuring out how a network connection was made.  It turns out to be quite nontrivial with the myriad async calls and network socket handshaking.  I started to document the connection process and wanted to share it.  Perhaps others will find it useful also.

A typical client-server connection code can found in the node.js test harness, eg, test-http-1.0.  Create a server:

var server = http.createServer(function (req, res) {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("hello world\n");
})
server.listen(PORT);

and the client:

var c = net.createConnection(80);
c.setEncoding("utf8");
c.addListener("connect", function () {
 c.write( "GET / HTTP/1.0\n\n" );
});

c.addListener("data", function (chunk) {
 console.log(chunk);
 });

c.addListener("end", function () {
 c.end();
 server.close();
});

The server goes through the regular socket(), bind(), listen() routine.  It then kicks off its readWatcher which listens() for any connections.  Once a connect request comes in, it creates a  peer socket and pairs it to the incoming connection.  It sets the peer’s socket error state to zero (0), which tells the peer that the connection was successful. Finally, it kicks off connectionListener(), which waits for incoming data.  The server logic is shown in this diagram: (click for full image)

node.js server connection diagram

Meanwhile, back at the client, net.createConnection() calls the doConnect() routine which calls socket connect().  If a server is found at the address:port, the client’s socket state is set to ‘connect in progress’ (EINPROGRESS), and the socket is made writable.  This triggers the client’s writeWatcher, which checks the client’s socket error state for zero (connected).  When the socket is connected, the client’s readWatcher is kicked off which listens for response data, and it emits the ‘connect’ event, indicating the client is ready to make a request.  The client logic is show in the following diagram (click for full image):

node.js client connection diagram

The exact sequence of events and calls may change as node.js is under fast-paced development (the diagrams correspond to roughly v0.1.96).  But it should give a good overview of the sequence of events and relation to the callbacks.

More node.js goodness will be coming.

- Moos

- (Bewildered)

- It's my stage name.

- Are you an actor?

- No, I'm a programmer.
  And the web is my stage.

Quick demonstration of enabling sounds effects using HTML5 <audio> tag.

Click the bookmarklet below to enable old-style typewriter sounds effects on this page. Drag it to the browser toolbar to enable on any web page.

Try taptapFx bookmarklet now.

Volume control will show on top right corner of screen.

Tested on FF3.6, Chrome 4, Safari 4. Probably works on Opera, iPad/iPhone browsers as well. Not IE8, but maybe IE9!

See test area.  View taptapSfx.js source at github.

Underscore.js is an excellent, compact Javascript  library extending the language with useful tools.  Most of the utils are drawn from Prototype and/or been inspired by languages such as Ruby. Underscore reverts to native code where it is supported.

A hand-full of so-called Collection functions which operate on arrays & objects, such as _any(), _all(), _map(), and _detect(), take an iterator function as an argument:

if ( _.any([1,2,3], function iterator(value){
    return ! _.isNumber(value);
})) {
    // ...
}

_.isNumber() is one of a dozen or so type checking routines provided by Underscore, in addition to, _isString(), _isFunction(), _isArray(), and others.

Often times the iterator is a simple type-checking, like above, or some sort of expression that needs to be evaluated.  So why not just enter the expression:

if (_.any([1,2,3], "!isNumber")) {
 // ...
}

This is what _xiterator, an add-on for Underscore, provides.  It is simply the meat of the iterator in a compact semantic.

Let’s throw in some range checking:

if (_.any([1,2,3], function iterator(value){
    return ! _.isNumber(value) || value < 0 || value > 10;
})){
    // ...
}

can be replaced by:

if (_.any([1,2,3], "!isNumber || < 0 || > 10")){
    // ....
}

Expression iterators

The expression is composed of valid Javascript code.  In the case of relational operators (<, <=, ==, etc.) the left operand is implied to be the value of the iterator.  The expression is evaluated in global scope.

Any of the Underscore _.isXXX type-checking routines can be used without the argument (the _.  part is implied).  In addition, three new routines are added: isBlank, isOdd, isEven.

Parenthetical expressions are fully supported:

 _.any([1,2,3], "(isNumber && > 0) || (isString && !isBlank)");

Validating functions:

 function checkZip(value) {...}

 _.any(zips, "!isBlank && checkZip(__value) ");  // __value is the placeholder

In addition to __value, __key and __list placeholder variables, corresponding to the formal arguments of the iterator, are available.

How about a regular expression:

 _.all([1,2,3], /\d+/);   // either as string or RegExp object

Of course, functions are still supported and will work as before.

Accessing original methods

Since the expression string needs to be parsed, runtime performance will be affected.  Performance sensitive applications involving huge sets should use the original routine.

The original routines  can be explicitly accessed by passing no argument, eg.

var originalAny = _.any();
originalAny(veryLargeSet, function(){...});

Or more compactly,

_.any()(veryLargeSet, function(){...});

Expressions cannot be used on original methods:

originalAny(veryLargeSet, 'isNumber'); //  => raises exception

The code

Details, code, and examples (including test suite) are on Github.   Released under MIT license.

Update: Just came across Functional.js.  Above technique is not too dissimilar to its string `lambda` functionality.

Remember the thumb keyboard concept for the iPad introduced earlier?  Well, here’s a real live working demo.  This demo works best on latest Safari or Chrome (although Firefox is workable too).

Try Thumboard live!

It’ll be best to try it on an actual iPad when it ships, which shouldn’t be too long now.  There is also a bookmarklet to enable the Thumboard on any website.  Try the ‘rotate’ button to simulate rotating on the iPad.

Usage

<script type="text/javascript" src="getThumboard.js" charset="utf-8" >
</script>

This will load the necessary JS/CSS/HTML files and fire up the thumboard.

Or with callback:

<script type="text/javascript" src="getThumboard.js?cb=my_init" charset="utf-8" >
</script>

where my_init() is defined in your code, eg:

function my_init() {
     var options = {enterText:'Search'};
     new Thumboard(options);
}

Who knows, now that there seems to be Dvorak keyboard support for the iPad, why not a Thumboard!?

Update: Apr. 23.  The demo has been improved and updated.   Work around for webkit bug selectionStart on readOnly inputs.  Enter key support on forms (except webkit due to another bug!)

NOTE: This code is provided purely for demonstration purposes and  may not live long.  Commercial use without express permission prohibited!

* done with tricked-up Harmony.

iPad pre-order is go — will you buy one?

Saw this nice little sketching app called Harmony, a procedural drawing tool, by Ricardo Cabello  (via Daring Fireball) that uses HTML5 canvas.   Works nicely on the iPhone too, so I thought it would be a great to have it as a webapp.

The webapp version adds:

• offline mode via HTML5 cache
• full-screen mode
• two-finger pan/zoom (upto 4x)

To use the full-screen & offline mode on your iPhone/iPod Touch(/iPad?), bookmark the page and select “Add to Home Screen”.

Desktop browser enhancements

Other added features for desktop browsers include:

• autosave feature
• session save
• undo (de facto!)

Alas, the autosave feature doesn’t work on the iPhone OS 3.1.3 due to the canvas origin-flag bug (hopefully this’ll be fixed on OS 3.2!).  It works nicely on FF 3.6, Chrome 4.x, and Safari 4.x.  After a brief delay after the last user stroke (about 5 secs), the state of the canvas and the last brush is saved to sessionStorage (or localStorage in the case of Chrome as it doesn’t fully support sessionStorage yet).

This provides a convenient undo feature as well.  Don’t like your last few stroke, F5 (refresh) and zap! (You’ve got 5 seconds to decide!)

If localStorage is available (as in the three browsers mentioned) and ‘save‘ button is clicked, the canvas is also saved to local storage.  So even if the browser is restarted, it’ll start at the last saved canvas.

Thanks to Ricardo Cabello for this great tool.

Try it: Harmony webapp.

Note: As Ricardo mentions in the comments to his post, you can take a snapshot of the canvas on the iPhone/iPod touch by pressing the power button and home button at the same time.   This is probably the best way to save/share on the iPhone.

Update 1: 11 March 2010 — fixed offline issue.  Please re-install on iPhone/iPod Touch.

Update 2: Examples of the awesome sketches being created in Harmony:

- Polish artists: http://blip.pl/tags/harmony
- alternatyves: here, here, and here
- in color
- more

Awesome footage of appears to be Market St. going towards the clock tower, pre-Earthquake.  Love the nonchalant playfulness of the kids running in front of the camera.  Little did they figure their actions would delight some hapless net-passerby a hundred years later!

via Mises Economics Blog.

Update: Looks like there is 2005 response video.

Update: Try live working demo!

iPad will be a great device for casual reading and web surfing.   Not so for writing. The lack of tactile-feedback is one reason.  The form-factor is another.

The great thing about the iPad is being able to hold it in your hands. To use the default keyboard, you’d have to hold it in one hand while typing with the other — not so comfortable.  Or lay it on a flat surface, which takes away from the form-factor benefits.

Why not use your thumbs?  You can hold it with both hands and use both thumbs for typing.  Thumb-based keyboards are a plenty:

The default iPad keyboard (as gleamed from the photos), has 37 keys.

• 26 – A-Z
• 2 – right/left shift
• 2 – right/left numeric
• 2 – punctuation
• 2 – meta
• 1 – delete
• 1 – search/enter

With inside screen dimensions (sans bevel border) of roughly 5.82″ x 7.76″, I estimate key dimension to be about .4″ for the typical alphanumeric keys, plus the space around it.

The length of my thumb is about 2 ½” long. So, including intra-key spacing, roughly four keys should be easily within reach of a single thumb.

Read the rest of this entry »