Bootstrap

Twitter’s Bootstrap library is one of the most popular front-end frameworks, with an amazing adoption rate by various web sites, from small to large. Bootstrap provides:

• Responsive Features: Enables seamless transitions between desktop, tablet, and mobile view sizes, with intuitive look-and-feel switching and custom single-view overrides.
• Layout Support: Fixed and fluid grid systems for web design.
• Style Components: Really nice looking form helpers, fonts, tables, etc.
• UI Components: Dropdown menus, buttons, accordions, alerts, progress bars and more, with JavaScript support.

Essentially, Bootstrap makes it easy to design a responsive website (that looks good in desktop or mobile views) and add user interface components that keep with the overall user experience.

Moving Loose Bits to Bootstrap

Loose Bits (this blog) previously had a non-responsive design - the main heading bar was far too wide when viewed on a mobile phone (like my iPhone). I had been itching to make this site mobile-friendly, and finally decided to bite the bullet and integrate Bootstrap.

I downloaded the full bootstrap build from source, so that I could customize parts of the framework and only add in what I needed. As this blog is hosted as an open source project on GitHub, the source code and build system is available for checkout or download at my Loose Bits repository.

CoffeeScript

CoffeeScript is self-described as “a little language that compiles into JavaScript”. CoffeeScript implements a subset of the full JavaScript language and adds a little bit of common boilerplate code to take out some of the less savory parts of JavaScript. CoffeeScript works both in Node.js on the backend, as well as in the browser.

I gave a short survey talk at the August 15, 2012 Node.DC meetup, “5 Things I Like About CoffeeScript”.

![CoffeeScript Talk][img_talk] [img_talk]: http://loose-bits.com/media/img/2012/08/16/nodedc-coffeescript.png

The talk’s source is available on GitHub, and uses the awesome deck.js presentation framework with the CodeMirror plugin to enable editable and runnable code samples. I further hacked up the CodeMirror plugin to additionally make the CoffeeScript code examples executable (CodeMirror only does JavaScript by default).

Node.js Streams

Node.js provides an extensible and fast platform for web servers, proxies, and middle-tier services. Node.js applications often utilize some transformation from one data format (e.g., a database or cloud store) to another (e.g., an HTML or JSON page).

Most folks are familiar with the callback-style of hooking together various JavaScript data components in a Node.js program. However, an often overlooked and very powerful data binding abstraction for Node.js is found in the stream class.

Streams are an abstract interface for data objects in Node.js which can be readable and/or writable. They can be hooked from one to another in a similar style to Unix pipes – in fact, the stream operation we’ll mostly focus on here is the not-coincidentally-named pipe(). Some potential advantages of stream pipes over other binding styles include:

• Often much less code for the actual binding (can just call pipe()).
• Streams can handle pausing / resuming of data flows. Implementing classes, however, have to implement this logic internally if supported.
• Don’t have to set specific callbacks or listeners for intermediate data events – just pipe() the stream and forget it.
• Avoiding buffering by processing data and re-emitting it directly to another stream (unless all of the data is required in one chunk).
• Compatible with the many Node.js core modules that already implement streams, including HTTP, HTTPS, and file and process I/O.

For a brief example, we can create a download client to retrieve a web page and write it to a file as follows (ignoring error handling):

// Get Google's home page.
require('http').get("http://www.google.com/", function(response) {
  // The callback provides the response readable stream.
  // Then, we open our output text stream.
  var outStream = require('fs').createWriteStream("out.txt");

  // Pipe the input to the output, which writes the file.
  response.pipe(outStream);
});

Notice that we didn’t set any explicit “data” listeners or buffer any of the data, even if it came in as chunks. We simply pipe()‘ed it with our two stream objects: response and outStream. The output of response is hooked to the input of outStream and we’re done.

More importantly (as we’ll get to below), we can add many more pipe() calls to do other transformations / data-slinging inline to our chained call. Ultimately, it just takes a little bit of glue code to hook together data flows in a terse and efficient manner with streams.

The Stream Interfaces

So how do we do this for our own classes and objects?