Script Roundup: Dolly.js, ngProgress

15 Oct 2013 | By Alex Young | Comments | Tags jquery plugins angular
Note: You can send your scripts and articles in for review through our contact form.

Dolly.js

Dolly.js (GitHub: LunarLogic / dolly.js, License: MIT) from Lunar Logic is a jQuery UI widget for cloning fields in tables. It works like Excel and does not make any assumptions about the underlying data structure. Rows and cells can be constrained with selectors, and the API is event-based so you can hook up listeners to cloned events.

$(cell).dolly({
  rowSelector: 'div.row',
  cellSelector: 'div.cell'
});

ngProgress

ngProgress (GitHub: voronianski / ngprogress-lite, License: MIT) by Dmitri Voronianski is a port of NProgress for AngularJS applications. NProgress looks like the Chrome for Android progress bar which is a glowing blue line that grows to fill the top of the page.

The ngProgress demo page allows you to see how it works with buttons for each API call, for example: .set(0.4) and .inc(). This is the perfect way to give people feedback when your AngularJS app makes Ajax requests to the server.

Ghost: A Blogging Platform

14 Oct 2013 | By Alex Young | Comments | Tags node modules apps gbnc

Ghost

Ghost (GitHub: TryGhost / Ghost, License: MIT) is a blogging platform built with Node and Express. It uses CasperJS for testing, and Bookshelf.js for the ORM layer.

Ghost started out as a Kickstarter project, with the aim of bettering WordPress. Ghost is run by a non-profit organisation, and released the source code today under the MIT license. Ghost is also run as a service, so you can create an account at ghost.org and try it out without having to install it.

However, fortunately it is pretty easy to install: npm install --production and npm start should get it running. It’s easy because Bookshelf.js is database agnostic, so if your system has SQLite then it should be able to use it to store posts and users.

Event better, the fact Bookshelf.js is based around Backbone.js means you should be able to start hacking Ghost without much trouble. If you’ve done any work with Express and Backbone.js then Ghost’s source will be eminently hackable.

The project is split into client and server code, and it uses popular patterns like promises, Express route separation, and Express middleware.

The architecture of the project has been shaped by the need to allow people to easily install and theme Ghost blogs, which means it deviates from the typical Express applications I write which are bespoke services. The focus on theming came from the need to create a similar designer-friendly ecosystem that WordPress has, and already on launch themes and services that sell themes are available. You can read more about this in Ghost Launches to The Public.

The fact the project started off as a Kickstarter project with hundreds of eager alpha testers means it already feels mature. And unlike many open source projects it has a dedicated team and a business model behind it, so it’s definitely off to a promising start. I recommend giving it a look over if you’re an Express developer or just tired of your own blogging platform.

Espruino: JavaScript Hardware Hacking

11 Oct 2013 | By Alex Young | Comments | Tags node modules hardware gbnc

Espruino

Espruino is a cheap and tiny microcontroller that can be scripted with JavaScript. That means you can use JavaScript and an Arduino-inspired API to communicate with sensors, motors, and LCD displays. Rather than using Arduino’s Processing-derived IDE, or Node modules to communicate with Arduino, you can use something designed with JavaScript in mind from the ground up.

There’s an official Espruino board, but there are also compatible boards that you can use. The Espruino firmware can be installed on the other boards manually, so if you’ve already dabbled with microcontrollers you should be able to get a compatible board loaded up and ready to run. The Espruino hardware reference has more details.

The Raspberry Pi has some IO pins (the GPIO connector), but microcontroller-based boards like the Espruino use much less power. That means you could leave a board running on batteries for a significant amount of time.

The project was successfully funded on Kickstarter, where they raised £100,710.

If you want to flash a compatible microcontroller check out Espruino’s downloads page. If you want to see the source, go to espruino / Espruino. It contains a JavaScript lexer and parser, because the author (Gordon Williams) found V8 and SpiderMonkey used too much RAM to run on the chips he wanted to target. Have a look at the C source code if you’re interested in seeing how it works.

Beams: Streams with Computation

10 Oct 2013 | By Alex Young | Comments | Tags node modules npm gbnc

Beam (GitHub: darach / beam-js, License: MIT, npm: beam) by Darach Ennis is a module for performing computation on streamed data.

Beams are like streams, in that they support pipes but are lightweight and work with in memory types without buffering, copying, parsing.

Beams have some interesting properties:

  • Events are executed in order
  • Events can be filtered
  • Beams can be branched and joined together

Example

I’ve taken one of Darach’s basic examples and interleaved it with comments to explain the major concepts. The goal is to pipe numbers through an operator that can square numbers.

First, load the module and create a sink.

var Beam = require('beam');
var sink = Beam.Sink();

sink.on('data', function(data) {
  console.log('d:', data);
});

Sinks emit a 'data' event whenever data is received, so they can be used to capture results. Operators can be used to transform data – this example just squares each value:

var square = Beam.Operator.transform(function(x) { return x * x; });

Sources can be connected to sinks with pipe, much like streams:

var source = Beam.Source();
source.pipe(square).pipe(sink);

Values can be sent to a source with push:

for (var i = 0; i <= 10; i++) {
  source.push(i);
}

This example introduces sinks, sources, and operators, but it doesn’t even scratch the surface of what Darach is aiming for with Beams. The next step is to define a filter and declare a pipe that uses it:

var even = Beam.Operator.filter(function(x) { return x % 2 == 0; });
source.pipe(even).pipe(square).pipe(sink);

Now only even numbers will be squared. The Beams module also has built-in functions, which you can find in Beam.bifs. These are operators and filters that you can use to filter and compare values in beams:

var mod2 = source.pipe(b.mod(2))
mod2.pipe(b.eq(0)).pipe(sink1);
mod2.pipe(b.eq(1)).pipe(sink2);

To see all of the defined Bifs, see _beam_bifs.js.

Node Roundup: Great British Node Conference Edition

09 Oct 2013 | By Alex Young | Comments | Tags node modules npm events gbnc

Yesterday was the Great British Node Conference, which took place in London at the Shoreditch Works Village Hall. Speakers included Julian Gruber, Darach Ennis, Anton Whalley, and Tim Ruffles.

I did a talk about Node’s internals that went from the JavaScript core modules down to some libuv basics, with the aim of encouraging the audience to look at Node’s source for themselves. I want to break this talk down into a deeper analysis of uv and V8 while still remaining relevant to JavaScript developers.

Substack

Substack did a short talk about abstract syntax trees, Browserify, and a project he’s working on to remove unreachable code. He mentioned testling, which I haven’t seen before – it’s another way to run headless browser tests. I was recently trying to rethink the way I do this, so I’m going to give it a try.

Milo Mordaunt and Harry Dalton did an interesting talk about some games they created based on British government data. One of the games used Max Ogden’s voxel-engine project.

In the audience I talked to Sven Lito who is one of the creators of Hoodie. Hoodie is a noBackend project that aims to make web applications easier to build. It reminded me of Meteor, but my initial impression was that it’s more closely reliant and influenced by the Node community, so I’d like to spend more time looking at it.

Over the next week or so I’ll write a little bit more about the projects and technologies I learned about at the conference.

jQuery Roundup: Ideal Forms 3, httpinvoke, jquery.brightness.js

08 Oct 2013 | By Alex Young | Comments | Tags browser server node

Ideal Forms 3

Ideal Forms 3 (GitHub: elclanrs / jq-idealforms, License: GPL/MIT) by Cedric Ruiz is a library for working with responsive HTML5 forms. It uses JavaScript to adapt form controls to the size of the container, so it works without using media queries. It supports keyboard shortcuts, custom checkboxes and file inputs, and a date picker.

The CSS now uses Stylus, and it uses classes in the HTML markup for denoting field types.

httpinvoke

httpinvoke (GitHub: jakutis / httpinvoke, License: MIT, npm: httpinvoke, bower: httpinvoke) by Vytautas Jakutis is a module for making HTTP requests that works with Node and browsers. It’s designed with a focus on promises, and Node’s callback-style API:

httpinvoke('http://example.org', 'GET').then(function(res) {
  console.log('Success', res.body, res.statusCode, res.headers);
}, function(err) {
  console.log('Failure', err);
});

The readme has full documentation for each API style and the accepted options. It’s unit tested, and also available through Bower.

jquery.brightness.js

jquery.brightness.js is a small plugin by Kozo Yamagata that detects CSS background colours and returns the brightness. Calling $(selector).brightness() returns either 'light' or 'dark'. It’s distributed as a Gist as it’s a short and sweet little snippet.

Harp

07 Oct 2013 | By Alex Young | Comments | Tags browser server node

Harp

Alex Griekspoor sent me Harp (GitHub: sintaxi / harp, License: MIT, npm: harp) by Brock Whitten, a static web server with a focus on client-side scripting. It’s built on connect, but shifts the responsibility of building client-side projects to the server:

I wanted a lightweight web server that was powerful enough for me to abandon web frameworks for dead simple front-end publishing.

It’ll run as a command-line tool or Node module, so you can fit it into existing projects and use it for local development.

If you look at the source it’s mostly based around middleware. A major chunk of this is terraform, a preprocessor that handles partials, layouts, metadata, and caching. Terraform is available through npm, so you could use it from outside of Harp.

I’ve worked with single page web apps that are entirely server independent, or traditional client/server applications. This approach mixes both of these paradigms, and seems to be generating a lot of interest. I found a recent Hacker News thread about it, and an introductory blog post that explains the development history so far.

Bluebird

04 Oct 2013 | By Alex Young | Comments | Tags promises async libraries node

The never-ending quest for the perfect async/promises library continues. Petka Antonov’s offering, Bluebird (GitHub: petkaantonov / bluebird, License: MIT, npm: bluebird), has all of your favourite APIs, impressive benchmarks, and Mocha unit tests. It works in browsers as well.

The Bluebird API reference has explanations of each method, and code examples. Here’s an example of using promises and finally to make an XMLHttpRequest:

function ajaxGetAsync(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest;
    xhr.addEventListener('error', reject);
    xhr.addEventListener('load', resolve);
    xhr.open('GET', url);
    xhr.send(null);
  }).finally(function() {
    $('#ajax-loader-animation').hide();
  });
}

Petka points out that the finally method works like Q’s finally method. The catch/caught method also works like Q (with fail renamed to caught), which is a bit of sugar for .then(null, errorHandler).

One of the tools Petka mentions for verifying the quality of the project was async-compare by Gorgi Kosev. This project aims to compare async patterns based on their complexity, performance, and “debuggability”. The stack traces generated by libraries like Bluebird and Q are captured and curated, so async-compare can be used to measure the distance between the function that created the error and the error in the stack trace. This is useful because debugging asynchronous code is notoriously difficult.

Even though Q and popular Node modules like async are good, I think Bluebird is worth looking at because it seems to have attention to the right details.

JavaScript Allongé

03 Oct 2013 | By Alex Young | Comments | Tags books

JavaScript Allongé by Reginald Braithwaite is a free book that focuses on using functions to write simpler JavaScript with less bugs:

JavaScript Allongé provides recipes for using functions to write software that is simpler, cleaner, and less complicated than alternative approaches that are object-centric or code-centric. JavaScript idioms like function combinators and decorators leverage JavaScript’s power to make code easier to read, modify, debug and refactor, thus avoiding problems before they happen.

I found the author’s blog post, JavaScript Allonge is Free, interesting and inspiring. Technical authors don’t often get to air the stories behind their work, but Reginald goes into a lot of detail behind JavaScript Allongé and how his life has changed since publishing it:

And as a bonus, I got my dream job, and now it’s time for me to walk the freedom talk. I’m now working for a company that is trying its dambdest to help every single programmer on the planet write more software and better software. And we give something away, crossing our fingers that more software and better software will be a good thing and that we’ll make enough to keep doing what we do.

I believe in this. That’s why I write, and that’s why I work at GitHub. And you helped me get here:

It’s encouraging to hear that such a talented writer and programmer has landed his dream job and become part of the GitHub animated gif squad.

Part of why I believed in myself enough to go through the terrors of interviewing for my job is the confidence you the readers gave me when you supported my books and told me that the ideas I was trying to share were useful. I can’t thank you enough for that.

The book is available as a PDF, ePub, and Kindle-friendly mobile file.

Node Roundup: 0.10.20, Asker, AbsurdJS

02 Oct 2013 | By Alex Young | Comments | Tags node modules npm css http

Node 0.10.20

Node 0.10.20 is out which means Node 0.10 is almost old enough to drink in most US states. How about that! This version fixes that annoying error that I seem to see when deploying to Heroku which reads: npm ERR! cb() never called.

Asker

Asker (GitHub: nodules / asker, License: MIT, npm: asker) is a http.request wrapper with retries, gzip decoding, and connection pool tuning. It was created by Phillip Kovalev for Yandex and is used on the auto.yandex.ru site.

Asker isn’t really a competitor to request, but a module designed around tailoring HTTP requests to comply with service level agreements. It makes certain things easier, like body encoding.

Node’s built-in HTTP connection pools are eschewed for a custom solution that allows you to prioritise services. This helps avoid situations where a critical service fails due to the exhaustion of TCP sockets. More is explained in the project’s readme file, and the project includes unit tests as well.

AbsurdJS

AbsurdJS (GitHub: krasimir / absurd, License: MIT, npm: absurd) by Krasimir Tsonev is a CSS preprocessor that converts JSON to CSS:

".navigation": {
  margin: "12px 0 0 0 ",
  type: "horizontal",
  a: {
    elementstyle: "button",
    responsive: "true"
  }
}

CSS isn’t all that different from JSON when you think about it, but you can’t easily include lumps of CSS in JavaScript files. AbsurdJS allows you to sidestep this problem by converting JSON to CSS. It includes a feature called storage that allows you to define custom properties that will be expanded to standard CSS.

There’s a detailed post about how it all works here: Write Your CSS with JavaScript.

jQuery Roundup: One Page Scroll, crSpline

01 Oct 2013 | By Alex Young | Comments | Tags jquery plugins animation
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

One Page Scroll

One Page Scroll (GitHub: peachananr / onepage-scroll) by Pete Rojwongsuriya enables pages to scroll in the vertical locking style like Apple’s new iPhone 5S page. It’s based around sections – any selector can be used – and jQuery’s animations:

$('.main').onepage_scroll({
   sectionContainer: 'section',
   easing: 'ease',
   animationTime: 1000,
   pagination: true,
   updateURL: false
});

I had a look at the source and it includes Eike Send’s $.fn.swipeEvents so it should work with touchscreens.

jquery.crSpline

A visualisation of movement along Catmull-Rom splines.

jquery.crSpline (GitHub: MmmCurry / jquery.crSpline, License: MIT) by M. Ian Graham is an animation plugin that moves objects along waypoints, smoothing the edges with splines.

The name crSpline comes from Catmull-Rom:

The curve is named after Edwin Catmull and Raphael Rom. In computer graphics, Catmull–Rom splines are frequently used to get smooth interpolated motion between key frames. For example, most camera path animations generated from discrete key-frames are handled using Catmull–Rom splines.

The plugin includes $.crSpline.buildSequence which can be used to generate spline animation objects. At the moment there isn’t much documentation, but demo.js should get you started.

RSS Pipes, type-check

30 Sep 2013 | By Alex Young | Comments | Tags rss node apps haskell functional

RSS Pipes

RSS Pipes (GitHub: dai-shi / rss-pipes, License: BSD) by Daishi Kato is an Express app for aggregating RSS feeds. It has a lightweight database wrapper for PostgreSQL and SQLite using the jugglingdb, which seems like a cleaner ORM that some of the Node database ORMs I’ve used, and it keeps the route handlers lightweight which is good practice in Express applications.

One of the useful features it has is filtering feeds. For example, you can filter for keywords or truncate the result set. In this respect it’s like a simple version of Yahoo! Pipes. The client-side portion of the project uses Bootstrap, so you could probably customise it if you wanted.

type-check

Haskell makes an appearance in type-check (GitHub: gkz / type-check, License: MIT, npm: type-check) by George Zahariev. It performs runtime type checking using a Haskell inspired syntax:

var typeCheck = require('type-check').typeCheck;
typeCheck('Number', 1);               // true
typeCheck('Number', 'str');           // false

typeCheck('Number | String', 2);      // true
typeCheck('Number | String', 'str');  // true

typeCheck('{x: Number, y: Boolean, ...}', {x: 2, y: false, z: 3});  // true

It works in browsers and Node, and apparently has 100% statement, branch, and line test coverage. It seems like something that might add an extra level of readability to test code, but could also be useful for validating user input.

Indentation

27 Sep 2013 | By Alex Young | Comments | Tags editing indentation

I like indenting with spaces, and it’s partly due to the types of programming languages I use. Some languages and styles depend on vertical alignment, so tabs and spaces end up getting mixed, which causes anything but a particular tab width to look weird. That was the case in the Objective-C projects at the company I’m currently working at.

The C++ programmer in our team loves tabs, however, and he pointed out Elastic tabstops. To understand how it works, take a look at the gif that shows code being edited as vertically aligned sections adapt automatically. There are several implementations of this idea, including Visual Studio and Eclipse plugins.

Sindre Sorhus sent in detect-indent which is a Node module for detecting and persisting indentation. New text can be inserted with the correct indentation, and it can help configure your editor.

It also works in browsers, and can be installed with both Bower and Component.

Sindre’s example uses JSON:

var fs = require('fs');
var detectIndent = require('detect-indent');
/*
{
    "ilove": "pizza"
}
*/
var file = fs.readFileSync('foo.json', 'utf8');
// tries to detect the indentation and falls back to a default if it can't
var indent = detectIndent(file) || '    ';
var json = JSON.parse(file);

json.ilove = 'unicorns';

fs.writeFileSync('foo.json', JSON.stringify(json, null, indent));
/*
{
    "ilove": "unicorns"
}
*/

From fs.readFile to read(2)

26 Sep 2013 | By Alex Young | Comments | Tags node libuv unix

Here’s a statement you might hear used to describe Node:

Node uses asynchronous I/O to avoid using threads for fast filesystem and network operations.

This statement is false (in more ways than one), and understanding why will help you better understand Node.

First, consider the question: what is asynchronous?

fs.readFile('file.txt', function(err, data) {
  if (err) throw err;
  console.log(data);
});

That is an asynchronous API. The program will continue running after the fs.readFile. The callback may be run at some point in the future. As JavaScript programmers we like this because JavaScript’s scoping rules mean the callback gets a closure, so we find it easy to reason about what variables are available to the callback, while being able to do thing while something potentially slow (I/O, web requests) responds.

Even if you’re not a Node programmer, you’re probably comfortable with the last example. It’s not amazingly different to a jQuery Ajax request, where callbacks are passed to $.ajax.

Now, assuming you’re not a C/C++ programmer and don’t know too much about Node’s internals, here’s the amazing thing about fs.readFile – it calls a (potentially) blocking system call.

How is that possible? We know our program continues when we try to read a file, so what’s going on? The first step is to look at Node’s fs source.

Bindings

If you look at the source for fs.readFile in lib/fs.js, you’ll see binding.read. Whenever you see binding in Node’s core modules you’re looking at a portal into the land of C++. This binding is made available using NODE_SET_METHOD(target, "read", Read). If you know any C, you might think this is a macro – it was originally, but it’s now a function. The reference to Read here is a C++ function in src/node_file.cc.

Like other filesystem code in Node, Read defines a synchronous and asynchronous version using ASYNC_CALL and SYNC_CALL. These are macros used to bind to libuv. If you dig into libuv, which you can find in deps/uv or on GitHub at joyent / libuv, then you’ll discover something interesting: the filesystem code actually uses libuv’s own streams, buffers, and native filesystem wrapping code.

Filesystem Wrapping

Going back to ASYNC_CALL in Read, one of the arguments is read: the syscall read (help: man 2 read). But wait, doesn’t this function block? Yes, but that’s not the end of the story. As summarised in An Introduction to libuv:

The libuv filesystem operations are different from socket operations. Socket operations use the non-blocking operations provided by the operating system. Filesystem operations use blocking functions internally, but invoke these functions in a thread pool and notify watchers registered with the event loop when application interaction is required.

Let’s look a little deeper. The ASYNC_CALL macro uses FSReqWrap and calls uv_fs_ methods. The one that gets bound to for reading is uv_fs_read:

int uv_fs_read(uv_loop_t* loop, uv_fs_t* req,
               uv_file file,
               void* buf,
               size_t len,
               int64_t off,
               uv_fs_cb cb) {
  INIT(READ);
  req->file = file;
  req->buf = buf;
  req->len = len;
  req->off = off;
  POST;
}

What’s that POST macro at the end? It checks to see if a callback has been provided, and if so uses uv__work_submit from src/unix/threadpool.c to read the file in a thread queue. Notice I’m just talking about Unix here, but in following fs.readFile down to the syscall that does the work it’s interesting to find uv__work_submit.

In this example the Node API method fs.readFile is asynchronous, but that doesn’t necessarily mean it’s non-blocking underneath. As the libuv book points out, socket (network) code is non-blocking, but filesystems are more complicated. Some things are event-based (kqueue), others use threads, and I’m currently trying to work out what Windows is doing (I’m only a libuv tourist for now).

I’m collating my notes on libuv for a talk on Node’s internals at The Great British Node Conference. The talk started more as a walkthrough of the core modules and binding, but I enjoyed looking at libuv in more detail so hopefully I can fit some of this stuff in there. It’d be good to see you there!

Node Roundup: 0.10.19, klei-migrate, division

25 Sep 2013 | By Alex Young | Comments | Tags node modules npm cluster databases

Node 0.10.19 Released

Node 0.10.19 was released yesterday. This version updates uv, npm, and also some core modules: readline, stream, and tls.

When you read uv: Upgrade to v0.10.17 in the release notes, don’t you wonder what that means? If you’re interested in the changes in libuv, all you need to do is checkout the relevant tag from GitHub. In this case it’s libuv/tree/v0.10.17:

2013.09.25, Version 0.10.17 (Stable)
Changes since version 0.10.16:

* build: remove GCC_WARN_ABOUT_MISSING_NEWLINE (Ben Noordhuis)
* darwin: fix 10.6 build error in fsevents.c (Ben Noordhuis)

If you switch to 0.11.13, the latest unstable release, you’ll see a whole load of interesting changes – uv_fs_stat has been rewritten, FSEventStream is now shared between multiple filesystem watchers, so it removes the limit on the maximum number of file watchers that can be created on OS X. These are just some random changes that caught my eye, there are plenty more.

These libuv changes have a direct impact on Node’s filesystem and networking modules, so it’s worth paying attention if you can.

klei-migrate

klei-migrate (GitHub: klei-dev / migrate, License: MIT, npm: klei-migrate) by Joakim Bengtson is a database independent migration command-line tool. It also works as a module, and has a Grunt plugin.

Migrations can be created with klei-migrate new, and then run with klei-migrate run. There are also other commands designed to help deal with switching between git branches, which can be tied into a post-checkout hook.

division

division (GitHub: codename- / division, License: MIT, npm: division) is another cluster module wrapper:

division provides an easy to use, chainable API, with some built-in extensions (like signals handlers) and is built with performance, zero-downtime restart (of workers), stability and simplicity in mind. The main advantage of division is that it does not depend of other modules - less dependencies equal less places where something could went wrong.

var division = require('division');
var cluster = new division();

// Configuration for development environment
cluster.configure('development', function() {
  // Put your development configuration here
  cluster.set('args', ['--some-process-args', 'send-to-workers']);
});

cluster.configure('production', function() {
  // Put your production configuration here
  cluster.enable('silent');
});

cluster.configure(function() {
  this.set('path', 'app.js');
});

cluster.set('size', 2);
cluster.use('debug').use('signals');

// Start your application as a cluster!
cluster.run(function() {
  // `this` is pointing to the Master instance
});

jQuery Roundup: 2.1 Beta, dna.js

24 Sep 2013 | By Alex Young | Comments | Tags jquery plugins templates
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.11 and 2.1 Beta 1

jQuery 1.11 and 2.1 Beta 1 have been released. The biggest news is jQuery now supports AMD, and is built with it. Internal dependencies are also managed with Bower.

By using AMD and Bower the jQuery developers are showing that they’re receptive to the needs of modern client-side developers.

dna.js

dna.js (GitHub: dnajs / dna.js, License: GPLv3/MIT, jQuery: dna) by Dem Pilafian is a template library that uses valid HTML rather than a new syntax or inline JavaScript templates. It clones an element as many times as you need, and interpolates values.

A template looks like this:

<div>
  <h2>Featured Books</h2>
  <div id="book" class="dna-template">
    <div>Title:  <span>~~title~~</span></div>
    <div>Author: <span>~~author~~</span></div>
  </div>
</div>

And you can clone it with dna.clone('book', { title: 'The DOM', author: 'Jan' }).

Node PiGlow

23 Sep 2013 | By Alex Young | Comments | Tags node modules hardware
The PiGlow in action.

The PiGlow is a small board for the Raspberry Pi that adds 18 single colour LEDs. Each can be controlled through I2C over the GPIO header, and you can even dim LEDs.

node-piglow (GitHub: zaphod1984 / node-piglow, License: MIT, npm: piglow) by Manuel Ernst is a module for talking to the PiGlow. It uses i2c and allows you to address the LEDs like this:

piGlow.l_0_0 = 100; // lights up the first LED in the first LEG with a brightness of 100
piGlow.l_0_0; // lights up the first LED of the first LEG with maximum brightness (255)

piGlow.leg_0 = 100; // lights up the first leg (8 consecutive LEDs) with brightness of 100

piGLow.leg_0; // maximum brightness for the first leg

piGlow.ring_0 = 100; // sets LED 1 of leg 1, LED 1 of leg 2 and LED 1 of leg 3 to 100

iGlow.ring_0; // sets LED 1 of leg 1, LED 1 of leg 1 and LED 1 of leg 2 to 255

Manuel made node-piglow-load with it which uses the PiGlow to visualise system load. Since the API is very simple you could hook it up to lots of other interesting things, perhaps build status from your next big Node project. I’ve had my eye on the PiGlow for a few weeks for fun little hardware projects so I think node-piglow might make me get my wallet out.

JavaScript Y Combinator

20 Sep 2013 | By Michael Hurley | Comments | Tags functional guest-posts
This is a guest post by Michael Hurley. The original is here: JavaScript Y Combinator.

At the end of The Little Schemer, the authors lead you step-by-step through the process of deriving the Y combinator. They do this repeatedly abstracting a length function–and then magically, the Y combinator appears. It is a pretty neat trick, and certainly mind-bending on your first read through the book.

Since JavaScript has first-class functions, we can derive the Y combinator in JavaScript as well. I will take a different approach than The Little Schemer. This approach owes a lot to a couple of blog posts I read on the subject1.

Since this is a post about recursive functions, then we can use that old chestnut, factorial. Here is a possible implementation of factorial in JavaScript:

function basicFactorial(n) {
  return n === 0 ? 1 : n * basicFactorial(n-1);
}

Let’s start by making a non-recursive basicFactorial, which we’ll call nonRecursive:

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
  }
}

All we’ve done here is replace the recursive call of basicFactorial. Instead, we pass in a function that will get called. We can pass any function that returns something that supports the * operator:

nonRecursive(function(x) { return 0; })(100); // => 0
nonRecursive(function(x) { return 1; })(100); // => 100
nonRecursive(function(x) { return 10; })(100); // => 1000
// ... etc.

But it starts to get a little interesting when we pass basicFactorial in there. Then we get back … basicFactorial!

nonRecursive(basicFactorial)(4) === basicFactorial(4); 
nonRecursive(basicFactorial)(10) === basicFactorial(10); 
nonRecursive(basicFactorial)(17) === basicFactorial(17);
// ... etc.

In other words, basicFactorial is a fixed point of the function nonRecursive.

This is pointless here, since we have already defined basicFactorial. But suppose we had not defined basicFactorial. Wouldn’t it be nice if there was a function that we could pass nonRecursive to that would return the fixed point of it, i.e. the factorial function?

That is what the Y combinator does. Pass nonRecursive to Y, and out comes the factorial function:

Y(nonRecursive)(100); // 9.33262154439441e+157

Note that:

Y(nonRecursive)(100) === nonRecursive(basicFactorial)(100);

Or in other words:

Y(nonRecursive)(100) === nonRecursive(Y(nonRecursive))(100);

So if we have Y, we do not need to define basicFactorial at all, we let Y derive it from the non-recursive function nonRecursive. Now let’s look at it from the other direction, and build up to Y. Here again, is the functional nonRecursive that we want to calculate the fixed point of:

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
}
}

As noted above, pass basicFactorial in, and nonRecursive returns basicFactorial. Notice that we have pretty much defined factorial in the body of nonRecursive: return n === 0 ? 1 : n * f(n-1);–why not use that? So here’s our next try: Apply nonRecursive to itself. This requires a small change to the body of nonRecursive, to self-apply the passed-in function to get the body out and apply it to the inner argument.

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(f)(n-1); 
  };
}
nonRecursive(nonRecursive)(5); // => 120

Now we want to isolate the fixed point function. Let’s wrap that in a function g:

function nonRecursive(f) {
  return function(x) {
    var g = function(q) {
      return function(n) {
        return n === 0 ? 1 : n * q(n-1);
      };
    };
    return g(f(f))(x);
  };
}

Since inner function g does not depend on anything in closure, we can pull it out:

function g(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
  };
}

The pulled-out function may look familiar–it’s nonRecursive again. Here’s what’s left over after g (a.k.a. nonRecursive) is pulled out; let’s call it almostY:

function almostY(f) {
  return function(x) {
    return g(f(f))(x);
  };
}
almostY(almostY)(5); // => 120

We’ve pulled g out of almostY, but almostY still depends on g. The final step is to wrap almostY in a function that takes the functional g as an argument. Then almostY will have no dependencies.

So, let’s wrap it in a function that takes our non-recursive factorial functional and returns the fixed point of it. And since this is the last step, let’s call that function Y:

function Y(f) {
  var p = function(h) {
    return function(x) {
      return f(h(h))(x);
    };
  };
  return p(p);
}

Y(g)(6); // => 720

Holy crap! It works! But it’s not just for factorial–Y will provide a fixed point for any unary function, e.g.

function nonRecursiveFibonacci(f) {
  return function(n) {
    return n < 2 ? n : f(n-1) + f(n-2); 
  };
}
Y(nonRecursiveFibonacci)(10); // => 55

As presented, this version of Y can only handle unary functions, and it will blow up the stack for relatively low values of n. It is straightforward to extend Y to handle functions of any arity, and to memoize it.

Notes

  1. I found these articles helpful: Fixed-point combinators in JavaScript: Memoizing recursive functions and Deriving the Y combinator.

Underscore, Array.prototype, and You

19 Sep 2013 | By The Angry JavaScript Nerd | Comments | Tags node underscore

What’s the most dependent module on npm? Underscore.js! Why do people use it? Presumably because they can’t be bothered to learn how JavaScript works.

There are things I like about Underscore. No global meddling, sane internals – it’s a solid piece of work. But I occasionally find myself working with programmers who are probably better than me yet have weaker JavaScript skills, and they reach for Underscore like a drunk reaching for cheap gin.

At this point I stay their hand and point to Annotated ECMAScript, highlighting the superpowers baked into Array.prototype. Granted it lacks some of the things Underscore has, but it often does what you want.

Mozilla’s documentation is also good because it shows you how to duplicate the functionality with lengthy code samples, which is educational if you take the time to read it.

If this is new to you or you’re a little uncomfortable with Array.prototype, start with forEach then map and some. They’re the methods that crop up in my own code a lot.

Another related JavaScript quirk is array type checking. Because JavaScript says typeof [1, 2, 3] is 'object' you might want to pack your bags and give up altogether. I don’t blame you. But hiding in that ES5 documentation is a beastie called Array.isArray. You’ll find it in util in Node, which is puzzling – you’ll be OK using Array.isArray([1, 2, 3]).

I don’t think it’s a bad thing to depend on Underscore, but it makes me feel like people don’t learn Node or indeed JavaScript well enough before flinging their modules up on npm.

Node Roundup: Bedecked, Knockout.sync.js, express-promise

18 Sep 2013 | By Alex Young | Comments | Tags node modules npm apps express knockout mvc

Bedecked

Who wants to write presentations in Keynote or PowerPoint? No one! That’s why Justin Russell made Bedecked (GitHub: jtrussell / bedecked, License: MIT, npm: bedecked):

A small module for quickly and simply authoring snazzy presentations in Markdown - or Jade, or vanilla HTML. Inspired by hackynote (thiagofelix/hackynote), Bedecked splits your Markdown into slides and spits them out as a single html file that you can share with Dropbox, S3, or whatever you like.

The command-line tool allows you to transform Markdown files into presentations. It uses stdout, so you can redirect the output into a .html file.

It can also run as a server which supports live reloading.

Knockout.sync.js

Knockout.sync.js (GitHub: imrefazekas / knockout.sync.js, License: MIT, npm: knockout.sync.js) by Imre Fazekas adds syncing to Knockout, supported by a Node server. This allows data to be persisted to a server and shared between clients as desired.

Timestamps can be used to allow clients to respond to outdated data, and Socket.IO is used in the client.

express-promise

express-promise (GitHub: luin / express-promise, License: MIT, npm: express-promise) by Zihua Li is middleware for folding repetitive asynchronous operations into leaner synchronous-style operations.

This is the kind of thing you’re probably used to writing:

app.get('/users/:userId', function(req, res) {
  User.find(req.params.userId).then(function(user) {
    Project.getMemo(req.params.userId).then(function(memo) {
      res.json({ user: user, memo: memo });
    });
  });
});

But with express-promise you can do this:

app.use(require('express-promise')());

app.get('/users/:userId', function(req, res) {
  res.json({
    user: User.find(req.params.userId),
    memo: Project.getMemo(req.params.userId)
  });
});

The readme has more documentation, with examples for Mongoose and Sequelize.