Parrot, Flush Timeouts

20 Nov 2014 | By Alex Young | Comments | Tags timers api libraries modules

Parrot

Parrot (GitHub: sailorjs/parrotjs, License: MIT, Bower: parrotjs) by Kiko Beats is a library for wrapping API calls to your server. You can register different environments, which makes it easy to switch between development and production. You can also register URLs with different protocols, so it’s possible to make WebSocket or Ajax requests.

It has a fluent API, so you can chain calls. If you wanted to register your production and development servers, then you’d call endpoint.add:

parrot.endpoint
  .add(name: 'development', url: 'http://localhost:3000')
  .add(name: 'production', url: 'http://example.com')

Specific API URLs can be added as well:

parrot.url
  .add(name: 'signup', path: 'user', method: 'post')
  .add(name: 'login', path: 'user/login', method: 'post');

Making an Ajax request to the signup route would just be parrot.ajax('signup', function(err, res) {.

This seems preferable to some client-side HTTP APIs. The author intended it to be used with Sails.js, but you could use it with other frameworks as well.

flush-timeouts

I’ve noticed a few libraries recently that aim to improve the JavaScript timer API. Alex Lawrence sent in flush-timeout (GitHub: efacilitation/flush-timeouts, License: MIT, Bower: flush-timeouts, npm: flush-timeouts), a module for overriding setTimeout.

Here’s a quick example:

require('flush-timeouts');

var i = 0;

function demo() {
  console.log('i:', i);
  i++;
}

setTimeout(demo, 500);
setTimeout(demo, 1000);
setTimeout(demo, 1500);

global.flushTimeouts();

console.log('Done');

This will cause demo to immediately run three times, and then print Done. If you removed global.flushTimeouts then it would execute based on the delays passed to setTimeout.

flush-timeouts might be useful when you’re trying to queue up tasks with setTimeout but have additional logic that determines if it’s safe to run all the tasks at once. Or perhaps you’ve got tests for code that depends on setTimeout and don’t want to wait. The author has supplied tests and build scripts so you can pick it apart to see how it works.

Node Roundup: Taunus, Root Path, Mongorito

19 Nov 2014 | By Alex Young | Comments | Tags node libraries modules google frameworks

Taunus

Taunus

Taunus (GitHub: taunus/taunus, License: MIT, npm: taunus) by Nicolas Bevacqua is an MVC framework that offers full-stack progressive enhancement. It uses server-side rendering, and will also use the browser’s history API for routing if it’s available.

Taunus can deal with view caching on your behalf, if you so desire, using asynchronous embedded database stores on the client-side. Turns out, there’s pretty good browser support for IndexedDB. Of course, IndexedDB will only be used if it’s available, and if it’s not then views won’t be cached in the client-side besides an in-memory store. The site won’t simply roll over and die, though.

It supports both Hapi and Express, so there’s some flexibility on the server. The server-side component is mainly dedicated to rendering.

There’s a getting started guide that shows how to set up a Taunus project and how to do basic things like adding a layout.

Root Path

Chris Morrell wrote a detailed response to a StackOverflow question about finding the root path for a Node project.

This resulted in the App Root Path Module (GitHub: inxilpro/node-app-root-path, License: MIT, npm: app-root-path), a small module that returns the path to the current module’s main directory. It returns a string, so you just have to do require('app-root-path') and pass the output to require.

Chris notes that the basic method for this is: path.resolve(__dirname).split('/node_modules')[0];, but there are edge cases where require.main.filename is used instead. This is all explained in the StackOverflow post.

Mongorito for ES6

If you’re using an ES6-based HTTP framework like Koa, then you might feel your database library could do with generator support as well. Fortunately, Vadim Demedes has rewritten his MongoDB module, Mongorito (GitHub: vdemedes/mongorito, License: MIT, npm: mongorito) to use ES6 generators.

Now you can load items like this:

var posts = yield Post.find();

Saving works the same way:

yield post.save(); // document created

var id = post.get('_id'); // _id automatically had been set after .save()

It’s based on the monk MongoDB module, and has good test coverage. I’ve never used a module like this in production, but I definitely like the idea of generator syntax for databases.

React Google Maps, TypeScript Tests

18 Nov 2014 | By Alex Young | Comments | Tags libraries testing typescript google-maps react

React Google Maps

React Google Maps

React Google Maps (GitHub: tomchentw/react-google-maps, License: MIT, Bower: react-google-maps, npm: react-google-maps) by Tom Chen is a React component for creating Google Maps. It has a mixin called GoogleMapsMixin that you can use to create React components for your own maps.

Tom has posted some examples that demonstrate things like click events and geolocation. These examples are based on Google’s developer documentation so you can see how React compares to the original Google APIs.

TypeScript Data Structures and Tests

Adrien Cadet sent in some TypeScript projects: Ludivine, a TypeScript data structure library, and Oscar, a test harness.

Ludivine has a wiki that describes each of the interfaces and classes. For example, LinkedList inherits from several interfaces to implement a linked version of IList.

Oscar has a getting started guide that explains how to create tests and test suites:

class MyTestClass extends UnitTestClass {
    firstTest() : void {
        // ... AAA stuff
    }

    secondTest() : void {
        // ... another AAA stuff
    }
}

This example is for testing a class called UnitTestClass. Each method that ends in Test will be run by the test suite runner.

Protractor-perf, lining.js

17 Nov 2014 | By Alex Young | Comments | Tags libraries testing performance angularjs

Protractor-perf

Protractor-perf (GitHub: axemclion/protractor-perf, License: MIT, npm: protractor-perf) by Parashuram can help you test for performance regressions while running Protractor AngularJS tests.

To use it, you can add performance-based assertions that are ignored by Protractor. These performance statements will only be used when tests are run with the protractor-perf command-line tool.

The available metrics are quite sophisticated – for a list of metrics take a look at the browser-perf metrics. Some examples are evaluateScript (the time spent evaluating the page’s scripts) and meanFrameTime (average time taken to render each frame).

Lining.js

Lining.js (GitHub: zmmbreeze/lining.js, License: MIT) by mzhou is a library for addressing lines within an element. To use it, add the data-lining attribute to an element, then add CSS to style each line. You can even apply styles to ranges with the data-from and data-to attributes.

There’s a JavaScript API which is event based. For example:

var poem = document.getElementById('poem');

poem.addEventListener('beforelining', function(e) {
  // prevent lining if you want
  e.preventDefault();
}, false);

var poemLining = lining(poem, {
  autoResize: true,
  from: 2,
  to: 3,
  lineClass: 'my-class'
});

The author suggests that it can be used for creative typography, and poems are used in the documentation which is a nice example. It also supports effects, so you can do things like animate sections of text using transitions.

Easier OAuth with Grant

14 Nov 2014 | By Alex Young | Comments | Tags oauth express middleware libraries modules node

OAuth always seems like an attractive alternative to rolling your own authentication, but it usually ends up being much harder than it looks. Grant (GitHub: simov/grant, License: MIT, npm: grant) by Simeon Velichkov aims to solve this. It’s built on Guardian.js, which was made by Nijiko Yonskai at Mashape (Nijiko has written quite a few Node modules that I’ve written about).

Grant is Express middleware that accepts options for the OAuth server. You can include things like the permissions you want to request, so for Facebook this might include friends_groups:

"facebook": {
  "key": "...",
  "secret": "...",
  // by default request publish permissions via /connect/facebook
  "scope": ["publish_actions", "publish_stream"],
  // set specific callback route on your server for this provider only
  "callback": "/facebook/callback"
  // custom override keys
  "groups": {
    // request only group permissions via /connect/facebook/groups
    "scope": ["user_groups", "friends_groups"]
  },
  "pages": {
    // request only page permissions via /connect/facebook/pages
    "scope": ["manage_pages"],
    // additionally use specific callback route on your server for this override only
    "callback": "/pages/callback"
  }
}

One nice touch is you can provide options for different environment, so it’s fairly easy to add settings for development or a CI server. Simeon has an app on Heroku that allows you to try out each provider with a friendly form: https://grant-oauth.herokuapp.com/.

I also noticed the same author has written a REST API wrapper called Purest. It embeds configuration details for dozens of providers, including Tumblr, Twitch, Google, and imgur.

To use it, you have to create an access token, then you can connect to a provider:

var Purest = require('purest');
var google = new Purest({ provider:'google' });

google.get('channels', {
  api: 'youtube',
  qs: {
    access_token: 'token',
    forUsername: 'user'
  }
}, function (err, res, body) {});

This Google instance can be used to access YouTube’s API:

google.query('youtube')
  .select('channels')
  .where({
    forUsername: 'username'
  })
  .auth('access-token')
  .request(function (err, res, body) {});

The documentation includes an excellent example that uses the request module’s streaming API to pipe files from one service to another.

Mithril: A Tiny MVC Framework

13 Nov 2014 | By Alex Young | Comments | Tags libraries modules frameworks mvc

Stephan Hoyer sent me an MVC framework called Mithril (GitHub: lhorie/mithril.js, License: MIT, npm: mithril) that’s getting a lot of positive feedback due to its small size and great documentation.

Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser’s URL.

What makes Mithril cool is the choices Leo has made: many MVC frameworks provide features that I don’t need, but I always find I want routing, data syncing features, and something like React’s virtual DOM.

There’s a short sample on Mithril’s homepage that shows most of these features:

var app = {};

app.PageList = function() {
  return m.request({ method: 'GET', url: 'pages.json' });
};

app.controller = function() {
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {
      pages().push(pages().shift());
    }
  }
};

app.view = function(ctrl) {
  return [
    ctrl.pages().map(function(page) {
      return m('a', { href: page.url }, page.title);
    }),
    m('button', { onclick: ctrl.rotate }, 'Rotate links')
  ];
};

m.module(document.getElementById('example'), app);

This example shows how to fetch data from a server and map it to the UI using a controller and a view. I like the way the app object is just a plain old object rather than a Mithril-specific construct, and the syntax for creating elements is succinct and easy to understand (m('button', ...)).

Mithril doesn’t provide two-way data-binding, but Leo has an example that shows you how to implement it:

// A data store
var name = m.prop('');

// binding the data store in a view
m('input', { oninput: m.withAttr('value', name), value: name() });

I took this from the m.request documentation which has loads of useful examples for working with web services.

Whether or not Mithril suits your requirements will depend on your project, but it has an excellent selection of features. There are testimonial tweets on the homepage where people are saying things about switching from AngularJS, which definitely grabbed my interest when I first saw the site.

Node Roundup: Eskimo, Serve-Me, Google BigQuery and Cloud Pub/Sub

12 Nov 2014 | By Alex Young | Comments | Tags node libraries modules google frameworks

Eskimo

Eskimo

Eskimo (GitHub: niftylettuce/eskimo, License: MIT, npm: eskimo) by niftylettuce is a framework for Node web applications. It has a command-line tool that is used to manage projects, known as igloos. You can add new models, views, and controllers, or create all three with mvc.

Once you’ve installed Eskimo with npm, you can generate a new app with eskimo create projectname. Projects use Express, the electrolyte dependency injection module, Redis, and MongoDB. You’ll need to run npm install from the freshly created project to get the dependencies required for running the tests.

The authors have put sensible commands in package.json for npm start and npm test, so it works like most Node web applications. It also has a Vagrant file, so you should be able to test out deploying your applications without too much hassle.

Initially the documentation made me think it was an alternative to Yeoman, but it’s actually an MVC web framework based on Express. The documentation and examples currently need expanding, but I found some cool tutorials on niftylettuce’s blog.

Serve-Me

Serve-Me (GitHub: muit/serveMe, License: MIT, npm: serve-me) by Muitxer is a small web framework that’s a bit like a mix of a static server and Sinatra. You can quickly configure it serve static pages, then add server-side route handlers with ServeMe.Routes.add('name', fn). The function has to return a string, which is why it’s more like Sinatra than Express.

The reason I liked Serve-Me is it has no dependencies – the author has used Node’s core modules for everything. The source is quite short, so you might find it interesting if you’re learning Node’s core modules.

Google Cloud Platform Updates

Google’s Cloud Platform Node module now has support for BigQuery and Cloud Pub/Sub. I read about this on Jonathan Beri’s Google+ account:

gcloud-node, the Google Cloud Client Library for Node.js, has added support for BigQuery and Cloud Pub/Sub. These Cloud APIs join Cloud Datastore and Cloud Storage. Grab it with ‘npm install –save gcloud’ or check out the source on GitHub.

The module is available at GoogleCloudPlatform/gcloud-node on GitHub. There’s a full TodoMVC example that demonstrates some of the module’s features.

Flox, Pioc

11 Nov 2014 | By Alex Young | Comments | Tags react libraries flux modules dependency-injection

Flox

I continue to receive Flux implementations, which isn’t a bad thing because they’re adapting at a rapid pace. Flox (GitHub: foss-haas/flox, License: MIT, npm: flox) by Alan Plum is lightweight and seems easy to learn – the readme has a nice introduction to the architecture.

It’s loosely based on Flux, with a pared down pragmatic approach which I like. For example, Flox doesn’t provide waitFor. Instead you should use services, which I thought made sense.

If you’re interested in Flox, read through the example in the readme. It also ships with pretty detailed Mocha/SinonJS tests.

Pioc

Speaking of services, what do you do when you want to easily switch dependencies or configuration values for different environments, like tests? pioc (GitHub: pago/pioc, License: MIT, npm: pioc) by Patrick Gotthardt is a dependency injection container that is aimed at Node but can be used with browsers through Browserify.

pioc’s goal is to help you write loosely coupled modules:

pioc is very smart about how and when to initialize your services. It supports constructor injection, property injection, static values and even module inheritance with all the parts that are needed to make it work.

The API allows you to define modules, which are known as service definitions. These services are resolved by providers. Services can be bound as values or lazily evaluated objects. By default objects are treated as singletons, which is the most common usage.

If you’re confused by all of this then try to imagine how to handle loose coupling for database modules. If you wanted to switch your database’s configuration for the test or staging environments, then DI can help because you can inject different configuration values at runtime. Also, the database module would be treated as a singleton, so you can safely refer to it in multiple places in your project without accidentally creating new instances or connections.

Patrick’s example is actually MongoDB, and this works well as a showcase of pioc’s features.

JSON File Store, Purplecoat.js

10 Nov 2014 | By Alex Young | Comments | Tags json database memory libraries ui themes

JSON File Store

I’ve been emailed a selection of in-memory databases, spurred on by last week’s LokiJS post. JSON file store (npm: jfs, License: MIT) by flosse can save JSON to files, and it also has a pretty option for producing readable output.

It can generate IDs using the node-uuid module, but it also works with custom IDs as well. It supports synchronous operations for saving and getting items. The basic usage looks like this:

var Store = require('jfs');
var db = new Store('data');

var d = {
  foo: 'bar'
};

// Save with custom ID
db.save('anId', d, function(err) {
  // Now the data is stored in the file data/anId.json
});

// Save with generated ID
db.save(d, function(err, id) {
  // id is a unique ID
});

You can toggle memory-only mode with the type: 'memory' option. I thought this project seemed like something that might be useful if you’ve got configuration or small data files files that are user editable, perhaps in a redistributable web application or daemon.

Purplecoat.js

Elle Kasai sent in Purplecoat.js (GitHub: ellekasai / purplecoat.js, License: MIT, Bower: purplecoat.js), a lightweight version of those popover tutorial libraries. It can be applied to an element with the data-purplecoat attribute, and data-purplecoat-label can be used to add a message.

Purplecoat.js is used to document Elle’s Shiori Bootstrap theme for Jekyll, which is a clean and minimal Jekyll theme with several built-in colour themes.

Simple Modules, D3xter

07 Nov 2014 | By Alex Young | Comments | Tags sql modules libraries graphics graphs

Simple Modules

If you’ve got legacy JavaScript that’s badly structured, then one early refactoring strategy that can help is to add modules. However, you might not be sure about the specific module system or framework that you’ll eventually switch to, so what do you do?

George Mauer sent in simple-modules (GitHub: togakangaroo/simple-modules, License: MIT, Bower: simple-modules), a tiny module system that lets you define modules and then require them. There’s an example that shows the main features, including a test for circular dependency detection.

George wrote an article about converting legacy code, which shows how to include Simple Modules on the page and then how to identify possible modules.

D3xter

D3xter

D3xter (GitHub: NathanEpstein/D3xter, License: MIT, Bower: d3xter) by Nathan Epstein is a D3.js-based library for plotting graphs. The functions in the library return SVG objects, so you can further customise them with the standard D3 API.

D3xter’s built-in graphs should work well with minimal configuration, so if you’re looking for a D3-friendly library then this one might be a good choice. For example, given arrays of co-ordinates, you can plot a line graph like this:

var lineGraph = xyPlot(index, y);

The readme has an additional example that shows how to query the resulting object with D3 and modify the colours.

Alasql.js: In-memory SQL

06 Nov 2014 | By Alex Young | Comments | Tags database sql modules libraries node

I recently wrote about an in-memory database called LokiJS. Most in-memory databases are NoSQL, but there are also similar projects that use SQL. Andrey Gershun sent in Alasql.js (GitHub: agershun/alasql, License: MIT, npm: alasql), a relational database that runs in browsers and Node.

It’s designed to be fast, and was created partly by using a Jison file that produces a parser for SQL statements. The author has made some benchmarks so you can compare it to other projects:

This project is different to WebSQL because it doesn’t use the Storage API. It has an impressive set of features, including joins, group by, union, and subqueries. It even has partial support for transactions, so it’s not a trivial implementation.

The API allows JavaScript objects to be mixed with SQL statements, so it’s easy to create test data:

var alasql = require('alasql');

var db = new alasql.Database();

db.exec('CREATE TABLE test (one INT, two INT)');
db.tables.test.data = [
  { one: 3, two: 4 },
  { one: 5, two: 6 }
];

var res = db.exec('SELECT * FROM test ORDER BY two DESC');
console.log(res[0].one);

To make it fast, the authors have used various optimisation strategies:

  • Compiled queries are cached
  • Joined tables are pre-indexed
  • WHERE expressions are pre-filtered for joins

So in a way it has a query planner like more established databases.

The readme includes a list of similar projects, details on the tests (they use Mocha), and there’s a to-do list where you can see what Andrey is planning.

Node Roundup: npm and Front-end Packaging, npm Package Store

05 Nov 2014 | By Alex Young | Comments | Tags video node modules libraries frontend npm

npm and Front-end Packaging

There’s a post on the npm blog about npm and front-end packaging. It directly addresses something that lots of people are confused about: is it a good idea to use npm for front-end development, even if the project doesn’t use CommonJS modules?

It’s useful to see the npm team’s thoughts on this, because it seems like some front-end developers use npm out of convenience, and others use it because their module works well in Node and browsers. Writing code for browsers has different requirements to Node, but the major ones are highlighted in this post and then potential solutions are discussed.

One future feature that will help front-end developers is ecosystems, which is a way to create a subset of packages for a common base. So in theory you could place React, jQuery, Gulp, and Grunt packages into separate sub-repositories.

Another recommendation suggested in the article is using additional metadata in the package.json file. I’ve seen lots of packages do this so it seems increasingly popular at this point.

My preferred approach to front-end development is npm with npm scripts and Browserify, so it’s encouraging to see that mentioned in the post:

We also think browserify is amazing and under-utilized, and an end-to-end solution that worked with it automatically at install time is a really, really interesting idea (check out browserify’s sweet handbook for really great docs on how to use it effectively).

Building dependencies from ./node_modules is a pain because every module seems to have a different entry point filename, so it would be really nice if more front-end developers used the main property in package.json.

If you’re looking for an example of an npm-based React project, then I recently received this tutorial from yiminghe : npm-based front-end development using browserify and browser loader library.

npm Package Store

npm Package Store

Travis Horn sent in npm Package Store (GitHub: travishorn/npm-package-store, License: MIT, npm: npm-package-store). This is a web application that shows updates for your globally installed npm packages.

It’s an Express app that queries npm for JSON using npm ls -g --json, then fetches the latest info with request from http://registry.npmjs.org.

LokiJS: Fast In-memory Database

04 Nov 2014 | By Alex Young | Comments | Tags database nosql node modules libraries

Joe Minichino sent in LokiJS (GitHub: techfort/LokiJS, License: BSD, npm: lokijs), an in-memory document database written in JavaScript. It runs in browsers and Node, and supports JSON persistence.

It uses an auto-generated binary index, which helps keep simple find operations fast. MongoDB-style find queries are naturally slower, but you can create indexes that are stored in-memory. Also, the authors have adapted it to suit mobile applications – there are several special cases for Cordova, so it should work well for mobile-first applications. You can read more about performance in Indexing and Query Performance on the LokiJS wiki.

Other than indexing, there are other advanced features that projects like this usually don’t support, including transactions and CouchDB-style views. Views are functions that can be stored with collection.storeView, then accessed with collection.view. There are examples for views, map reduce, and indexing on the LokiJS wiki.

LokiJS is tested with gordian, which is also written by Joe Minichino. There is a Gulp-based build script, and a demo application that’s meant to run on the desktop.

McFly, React Widgets, react-separate-template

03 Nov 2014 | By Alex Young | Comments | Tags react reactive widgets ui

McFly

McFly (GitHub: kenwheeler/mcfly, License: BSD) by Ken Wheeler is a Flux implementation. It uses Facebook’s Dispatcher, and provides factories for Actions and Stores.

To use McFly, create an instance of McFly then make a store with mcFly.createStore. You can then generate new actions with mcFly.createActions.

Internally, CommonJS modules are used with a Browserify-based build script to generate the final browser-friendly source, so it’s modular and easy to read.

React Widgets

If you need some UI widgets for your React projects, then you might want to try React Widgets (GitHub: jquense/react-widgets, License: MIT, npm: react-widgets) by Jason Quense. It’s influenced by jQuery UI and Kendo UI, and implements dropdown lists, combo boxes, selects, datetime pickers, and a calendar.

The usage is based on custom elements with attributes that set up the data binding to drive the widgets. Each widget has several attributes that provide a good level of flexibility, and they support keyboard shortcuts as well.

Separating React Templates

Sergii Kliuchnyk wanted to keep React HTML fragments in separate files to make it easier to work on stylesheets without building part or all of an application. react-separate-template is a GitHub repository that explores this idea.

There’s a script called conv.js that combines a JavaScript file with a corresponding HTML file to make the resulting .jsx file that you’d usually find in a React project.

There are still some issues, like the handling of attributes, but it seems like something that could be adapted to work as part of a typical Gulp/Grunt build script.

Streams, Peerflix, and node-webkit

31 Oct 2014 | By Alex Young | Comments | Tags video node modules

Recently a web service called Joker has been in the technology press. It’s a web application that downloads torrents based on magnet URIs, and allows users to stream video content and fast forward to any point in the video. Of course, it’s already been taken down, and it didn’t always work as well as my description sells it, but it was an interesting experiment all the same.

I remember being completely astounded that Popcorn Time was built with JavaScript. Porpcorn Time is a web application that runs in a desktop wrapper so you can use it in Mac OS, Windows, and even Android. The pirates know what they’re doing: cross-platform support from day one with a cool interface that integrates data from web services like IMDB.

Two things make Popcorn Time possible: node-webkit-builder and peerflix.

node-webkit-builder makes it easy to build cross-platform desktop apps with node-webkit:

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

peerflix will stream torrents from a magnet link to a HTTP server that video players like VLC can connect to. It’s based on torrent-stream, a Node stream torrent client that has a friendly API.

peerflix

torrent-stream uses lots of small modules to do the job. For example, magnet-uri can parse magnet URIs, and peer-wire-swarm is a swarm implementation.

Reading through these modules is like a showcase of Node’s stream API. Academically they’re fascinating, despite the obvious grey market connotations.

Which brings me to the TV/movie/music “PVR”-like applications. Media cataloguing doesn’t have to be for pirated content: I have lots of DRM-free music, video, and books that could be presented in a better way. Combining my music purchases from Amazon, Apple, and Google into a cool desktop media browser powered by Node with a friendly RESTful API would be really fun and useful.

There’s actually a node-webkit apps list, but I haven’t yet found my perfect Node-powered media browser. Let me know if you’ve made your own Node media browser (or anything similar) and I’ll check it out!

JavaScript on a USB Stick

30 Oct 2014 | By Alex Young | Comments | Tags hardware hacking kickstarter

Espruino Pico

Kris Bright sent in the Espruino Pico Kickstarter campaign, which is a new version of Espruino designed to run on smaller hardware. It will use a slightly modified version of the Espruino software, and they have prototype hardware so you should factor that in if you’re thinking about pledging support.

This project is currently fully funded – the goal was £15,000 but they’ve got £21,073 at the time of writing.

One novel feature of the Pico is it works with a standard USB port, so you can run JavaScript on it without any soldering or breadboards. And because the hardware is smaller it should use less power: the creators have claimed 10 years on a single AA-sized 3v lithium battery.

If you pledge £79 or more, then you’ll receive a “Geek’s Toy Kit”. This should include some cool modules that are compatible with the Espruino Pico, like an LCD screen.

I’ve got an Espruino and the thing that’s most fun about it is getting code to work with sensors and hardware like motors and screens, so if you’re interested in the Pico I recommend either plumping for the Geek’s Toy Kit or finding out how to use your own electronics with it.

Node Roundup: 0.10.33, Node.js Best Practices, Puer

29 Oct 2014 | By Alex Young | Comments | Tags modules libraries security live-reload

0.10.33 and Signing Validation

0.10.33 came out last week, which fixes the POODLE vulnerability by disabling SSLv2/SSLv3. You may find this release breaks legacy browsers like IE6:

If you wish to enable SSLv2 or SSLv3, run node with the --enable-ssl2 or --enable-ssl3 flag respectively. In future versions of Node.js SSLv2 and SSLv3 will not be compiled in by default.

If you see errors like “wrong version number” when connecting to other servers, then you may want to upgrade those as well:

If your application is behaving as a secure client and communicating with a server that doesn’t support methods more secure than SSLv3 then your connection won’t be able to negotiate and will fail. In this case your client will emit an error event. The error message will include 'wrong version number'.

On the topic of security, when I was reading the release notes I realised that they’re signed by the author’s PGP signature. If you ever want to validate these signatures then you can do so with Keybase. Keybase has a nice command-line tool that you can install with npm install keybase. After signing in, you can verify the message:

Node release notes verification

In the screenshot you should be able to see that the message was written by tjfontaine. Keybase has a web interface as well, so you can just paste in the signature:

Web verification

Node.js Best Practices

Alan James sent in an interesting and useful resource called Node.js Best Practices (GitHub: alanjames1987 / Node.js-Best-Practices). It lists some things that the author has found useful when teaching Node to beginners, like checking for errors in callbacks, use strict, and avoiding requiring modules inside functions.

One of the tips is to save a reference to this. Teaching JavaScript’s scope rules is indeed problematic, and although I often find .bind cleaner that is an additional piece of cognitive baggage that is hard to explain to beginners. Alan is open to pull requests for the document on GitHub, so it may be worth helping to expand some sections like this one.

Puer

Puer (npm: puer) is a static server for client-side development that can automatically update CSS without a page reload. It supports Connect middleware, and can mock requests.

I still use solutions that force me to reload the content in the browser, usually based on Grunt or Gulp modules. These can have a small delay that forces me to reload twice in some cases, so I’m always trying out modules like this to find a better one.

Generate Concave Hulls with Hull.js

28 Oct 2014 | By Andrey Geonya | Comments | Tags graphics libraries
This is a guest post written by Andrey Geonya.

Problem

Imagine that you have a set of points that form a shape like this:

Points

The points may represent restaurants on a map, pixels after image analysis, etc.

What do you do if you need to display a border around this shape? For example:

Border

The way to solve this is to create a polygon that fits around all of the points. So, in this article we’ll see how to solve this problem with the hull.js library.

Usage

Hull.js is very simple and consists of just one function that generates concave hull:

var srcPointset = [[168, 180], [168, 178], [168, 179], ...];
var distPointset = hull(srcPointset, 10);

The first argument is the source point set, and the second is the concavity of the hull.

To understand how the second argument works you need to look at how hull.js works. First of all, hull builds a convex hull:

Simple polygon

After that, the edges recursively flex inward while the shape contains edges with lengths less than the concavity argument:

Simple polygon

The second argument can the tuned to optimise the concavity of the resulting shape: Infinity is the least accurate, and 1 is a perfect match.

Enjoy! And feel free to ask questions and suggest improvements.

Recreating the Spectrogram Face

27 Oct 2014 | By Alex Young | Comments | Tags audio video webaudio

Spectroface

Enjoying Syro? I’ll admit I was a little bit too obsessed by the cover art, which contains a list of Aphex Twin’s expenses and a list of the audio hardware used on the album. So I thought it was pretty cool to see Spectroface by Daniel Rapp. This project uses the Web Audio API to recreate Aphex Twin’s spectrogram face that was hidden in the Windowlicker b-side.

Daniel’s website explains how spectrograms work, and the source code is heavily commented, so with a little bit of effort you should be able to follow it.

A spectrogram is a visual representation of the frequencies which make up a sound. Say you whistle a pure “middle C”, then a spectrogram would light up right at 261.6 Hz, which is the corresponding frequency for that tone. Likewise, the “A” note makes the spectrogram turn bright white at 440 Hz.

If you hover over “middle C” and “A” on the original page (http://danielrapp.github.io/spectroface) it’ll actually play the notes, which is a nice touch. I tried out Daniel’s examples and found they work best in Chrome with the webcam and mic active. You should play the sounds from the speaker rather than headphones to see the image encoding effect in the spectrogram visualisations.

The source is concise, and amazingly doesn’t require too much hacking to get the audio values translated into pixels. For example, the code that determines the shade of grey to use for position x, y in the image looks like this:

var getImageDataIntensity = function(imgData, x, y) {
  var r = imgData.data[ ((imgData.width * y) + x) * 4     ]
    , g = imgData.data[ ((imgData.width * y) + x) * 4 + 1 ]
    , b = imgData.data[ ((imgData.width * y) + x) * 4 + 2 ]
    , avg = (r+b+g)/3
    , intensity = avg/255;

  return intensity;
};

The last example treats the video as an instrument, so you can wave things in front of the camera to produce different sounds. Although it sounds extremely loud and strange, it’s very interesting and comes from a surprisingly small amount of code.

It starts acting like an instrument! Notice that if you place your finger over the webcam, the sound is muted. You can produce low-pass or high-pass filters by covering only part of the webcam.

The Node Advisory Board

24 Oct 2014 | By Alex Young | Comments | Tags node community

The Node.js Advisory Board has been announced, and it aims to be an “open governance model” that helps advise Node’s development. That doesn’t mean it will take control of Node, but help Node’s core team with certain key decisions.

Node’s leadership has changed several times over the years, but having a single leader has so far kept the project tightly focused. I love the choices for things that go into the core modules, the source code is actually generally readable, and the API style is consistent.

Now our benevolent dictatorship may be changing, if not ending. There are many reasons why this should be taken seriously:

  • Will power be taken away from the more altruistic members of the community?
  • Will Node suffer the negative symptoms of “design by committee”?
  • Will the board members put economic interests ahead of less commercial projects?

Conversely, Node itself has issues that such an organization could help solve:

  • The core team has had turnover that has slowed development
  • In some ways Node is held back by JavaScript, and industry pressure could encourage the development and adoption of new JavaScript standards

What Joyent has proposed reads like a group that will help figure out long term goals, deal with community issues, and handle the legal requirements of a popular open source project. Therefore, I don’t think it’s comparable to Python’s PEP or the W3C.

The only area that sounds PEP-like is section 7 of the Advisory Board document:

Open design: Roadmaps are discussed in the open, and designs receive input from all committers and contributors.

Some people have interpreted this move by Joyent as a knee-jerk reaction to criticism over Node’s leadership and the development of Node Forward. Node Forward is a community project that aims to help people learn Node, build and test it, and develop the roadmap.

I’m not unduly concerned about the Advisory Board, and Node Forward seems like a healthy development. However, the Node.js Advisory Board refers to Node as a “language of choice” – this post is written by Scott Hammond, Joyent’s CEO. I’m not sure if it’s acceptable for Node’s “official” Advisory Board to get this kind of detail wrong. I hope Scott changes “language” to “platform” to restore Node’s ambiguous and nebulous status that we’ve grown to love.