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.

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.

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.

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?

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

via Mises Economics Blog.

Update: Looks like there is 2005 response video.

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.

The thumb-zone on the iPad is a roughly 2″ radius area around the two corners.

Thumb keys – Concept 1

Here’s a keyboard design concept with the keys arranged around the two corners within easy reach of the thumbs.

This key configuration has 39 keys, with roughly the same dimensions as the default iPad keyboard.  The main alphanumeric keys are  arranged in a 4×4 grid on each side of the tablet, with the rest of the keys on top.

One problem with this layout is that the keys do not fall within the familiar QWERTY layout, and this could impact usability.

Thumb keys – Concept 2

This design follows the QWERTY layout (with slight modification) while keeping the majority of the keys within the thumb-zone.   The Q, O, and P keys are moved up one row, but are still within the proximity of their original positions.

This layout has 38 keys, including an elongated space key.

In real life

How does the thumb keyboard play in real life.  Well, there is no iPad available yet, but my trusty composition book has dimensions remarkably close to the iPad!  Here’s what it might look like.

(This mock-up is from an earlier layout with the space key on the right.) Usability is quite good. All keys are withing range of my thumbs and in their familiar place (except the Q, O, P keys).

Any chance Apple will add this as an optional layout on the iPad?!

Update: Looks like others have been thinking along the same lines.  I like Scot Robbin’s split space bar in Concept: iPad Split Keyboard.  I’m less enthused about the duplicate keyboard design over at lonelysandwich.  Dan Moran makes a good case for a thumb-centered virtual keyboard in the text’s the thing.  Then there is the curved keypad, which although nice looking, may have usability issues.  Gizmodo contends scaling the iPhone’s keyboard to the iPad doesn’t make much sense, although that’s not what Apple thinks!