Registering Angular.js Components, ChainyJS

07 Jul 2014 | By Alex Young | Comments | Tags angularjs articles modules libraries data flow-control

Registering Angular.js Components

In Registering Angular.js Components without Hassle, Konstantin Raev discusses a way to automate component registration in AngularJS. The solution is based around Require.js and gulp.js, and he even has examples in TypeScript.

It goes against AngularJS’s design a little bit, but the author is obviously experienced with inversion of control containers so he’s adopted an approach that might be more familiar to Java or C# developers.

ChainyJS

ChainyJS (GitHub: chainyjs / chainy, License: MIT, npm: chainy) is a library for handling data in a similar way to jQuery’s DOM API. The author has published an introductory talk, and the GitHub wiki has documentation for each of the main features.

Chainy supports some built-in data flow actions: set, action, done, and map. You can use them like this:

require('chainy').create().require('set map')
  // Set the chain's data to an array of two items
  .set(['some', 'data'])
  .map(function(itemValue) {
    // Capitalize each item
    return itemValue.toUpperCase();
  })
  .action(function(currentChainValue) {
    // Join the chain's data and add an exclamation
    return currentChainValue.join(' ') + '!';
  })
  // Handle an error (if applicable), and log the output
  .done(function(err, resultChainValue) {
    if (err) throw err;
    console.log('result:', resultChainValue);
  });

The map and action methods can be asynchronous – just include an extra argument to get a callback.

The map method is actually a plugin. Plugins are extensions that extend API calls. You can bundle plugins using the Chainy command-line tool, and npm peerDependencies can be used as well.

Powered by JavaScript Conference

04 Jul 2014 | By Alex Young | Comments | Tags events

Powered by JavaScript

Powered by JavaScript is a conference organised by Manning, the publisher of my book Node.js in Practice. My co-author, Marc Harter, is speaking, along with Tim Caswell and Ben Acker. For a full list of speakers see http://www.manning.com/poweredbyjavascript/.

The conference will be held in St. Louis on September 17, 2014. Early bird tickets are $250, and tickets at the door will be $500.

Manning are looking for sponsors, and there’s a PDF with more details.

Moving Atom To React

03 Jul 2014 | By Alex Young | Comments | Tags reactive atom

There’s a post on the Atom blog about some performance improvements that you can optionally enable: Moving Atom To React. It discusses how Facebook’s React library was used to improve the performance of the text editing component:

Right out of the box, React’s virtual DOM got us a long way toward our goal of treating the DOM with kid gloves. Though we worked with raw DOM nodes in a few places for performance and measurement reasons, it offered a declarative abstraction that relieved us of the tedious state management typically associated with DOM updates. In addition, React’s well-defined reconciliation strategy and lifecycle hooks made it easy to reason about the sequencing of the manual DOM interactions we did have to perform.

With the React editor, these kinds of changes can now be performed with the new decorations API. Decorations allow metadata to be associated with markers, instructing the editor to render classes on lines and line numbers, or draw highlight regions. Using decorations is faster and more convenient than manual DOM interactions, and we plan on introducing more APIs for common DOM interactions going forward.

This highlights several things that React is good at:

  • It’s relatively small and self-contained, so you can drop it into an existing project
  • The virtual DOM is fast
  • It helps to improve managing state

I’ve been using Knockout for a while now, and I’m even thinking about using RxJS for some projects. However, after reading this I think a combination of Knockout and React might work well for the messier parts in my Knockout view models that deal with the DOM.

Node Roundup: SocketCluster, i18n-generator, generator-gulp-angular

02 Jul 2014 | By Alex Young | Comments | Tags modules node internationalisation WebSocket

SocketCluster

SocketCluster (GitHub: TopCloud / socketcluster, npm: socketcluster) is a WebSocket server designed with clustering in mind. The developers have tested for memory leaks and included benchmarks. It handles client reconnection if a server crashes, and has a clustered memory store for temporary session data.

SocketCluster lets you store session data using the socket.session object. This object gives you access to a cluster of in-memory stores called nData. You can effectively invoke any of the methods documented here to store and retrieve session data: https://github.com/topcloud/ndata

Basic usage looks like this:

var SocketCluster = require('socketcluster').SocketCluster;

var socketCluster = new SocketCluster({
  workers: [9100, 9101, 9102],
  stores: [9001, 9002, 9003],
  balancerCount: 1,
  port: 8000,
  appName: 'myapp',
  workerController: 'worker.js',
  rebootWorkerOnError: false,
  addressSocketLimit: 50
});

The project is built with iocluster and loadbalancer, by the same authors.

i18n-generator

i18n-generator (GitHub: huei90 / i18n-generator, License: MIT, npm: i18n-generator) by Huei Tan is a library for converting i18n text files into JSON.

For example, given this input:

i18n=> | en | zh_TW | de | my
you | you | 你 | Du | kamu
I | I | 我 | ich | Saya
love | love | 喜歡 | liebe | cinta
eat | eat | 吃 | essen | makan
ilovegithub | i love github | 我愛 Github | ich liebe Github | Saya cinta pada Github

It would generate this:

{"you":"you","I":"I","love":"love","eat":"eat","ilovegithub":"i love github"}

for each language. It comes with tests and browser support.

generator-gulp-angular

I find it difficult to work on MVVM projects without some sort of build system so I can at least structure the project with CommonJS or AMD. generator-gulp-angular gives you a Yeoman generator that uses Gulp, Bowser, and AngularJS.

This generator aims to takes the best from others generators like generator-angular, ngTailor and generator-gulp-webapp to offers the best workflow to start an application with AngularJS powered by Gulp!

generator-gulp-angular scaffolds out an AngularJS application with a full featured gulpfile.js which offers all the tasks for modern web development.

It seems like a good way to get started with Gulp and AngularJS, which can actually be a little bit daunting.

WebRTC Video Mixing with Mixology

01 Jul 2014 | By Alex Young | Comments | Tags webrtc video streaming

Gearcloud Labs has open sourced their Mixology project under an MIT license. The source is available on GitHub: gearcloudlabs / Mixology.

This project allows video streams to be combined using a Node server. It uses WebRTC, the W3C standard for browser video, audio, and P2P. Google recently switched Google Hangouts over to WebRTC, which you can try in developer builds of Chrome:

Google+ Hangouts no longer requires a separate plugin to be installed in Chrome for video and voice chat to work. Using the Web Real-Time Communication API (WebRTC) and Native Client (NaCl) Google is able to provide a native video chat experience out of the box in Chrome.

Mixology uses collections of web pages that communicate using WebRTC. There’s an additional manifest file written with JSON that defines how streams are mixed:

{
  "channelName": "Your mix name",
  "topology": ["filename-basename.output-streamname | filename-basename.input-streamname", ...],
  "partitionSize": integer
}

The Node project uses Express and Socket.IO. It’s currently a monolithic file with no dependencies, so it expects you to have Express and Socket.IO installed globally. Refactoring it into a more modular Express application might be a nice exercise for someone looking to contribute to an open source project…

You are a Robot...

30 Jun 2014 | By Alex Young | Comments | Tags tutorials javascript games
That smiling face is you.

You are a robot, that smiling face represents you.

My digital residual self image isn’t what it once was, but surely I’m more than a smiling face glyph! JS Robot by Pavel Evsegneev an open source game for learning JavaScript. The GitHub repository is here: Ahineya / jsrobot.

The levels are unit tested with Mocha, and the author accepts pull requests for new levels. Levels are defined as text files, like this:

########
#_  $f #
########

The _ is the start position, $ and # are walls, and f is the finish. The player must write JavaScript that pushes the robot to the f position. The full list of symbols is defined in map.js:

var SYMBOL_TYPES = {
  '#': 'wall',
  '$': 'wall',
  'space': 'space',
  '_': 'start',
  'f': 'finish'
};

It’s a fun game that may have a few surprises for beginners learning JavaScript, and the code is clean. You could easily extend it to have fancier graphics or a different narrative, but I like the text-based interface. It would be nice to optionally play it in a terminal by installing it with npm.

s/Ampersand.js/Backbone and Express/

27 Jun 2014 | By Alex Young | Comments | Tags frameworks node

Ampersand.js from &yet is a new web framework. It follows the trends that I’ve been using for my own applications:

  • Everything is CommonJS
  • Client-side dependencies use npm (for a list of modules, see http://tools.ampersandjs.com)
  • State and data binding is Backbone-inspired

It has a heavy focus on client-side development, so it leans on the MVVM approach. Most of these ideas come together in the form documentation:

The quickest way to build out a starting point for a form in your project is to point ampersand-cli at a model file to generate a form for editing it. We’ll eventually make more “official” input views types. But the idea is, if you want to write a color picker, or a date input view, or a username-checker-input that does server-side validation, or a password field with a strength indicator, you can write a view for that and as long as it follows the form view conventions in the list above and it will still work happily with the rest of the form.

This is further explained explained in what is a view?

It doesn’t matter if your “view” is an instance of ampersand-view or not. Any object can be a view if it follows a few rules.

The example on that page looks like Backbone as well.

When generating a new Ampersand application, it prompts for the server-side module. You can use either Express or hapi. It makes a demo app, which almost entirely client-side JavaScript. The payload that gets served is just this:

<!DOCTYPE html>
<link href="/dailyjs.nonCached.css" rel="stylesheet" type="text/css">
<script src="/dailyjs.nonCached.js"></script>

It runs using a livereload module, so you can edit files and the client will be updated. As the documentation says, it treats the browser as a runtime.

Ampersand seems like a way to unify Node and Backbone development. I don’t yet know how well Ampersand works in production on services like Heroku, or how easy it is to test, but I’m definitely enthusiastic about the idea of blending Node and libraries like Backbone or AngularJS.

V8 Optimization Killers

26 Jun 2014 | By Alex Young | Comments | Tags node v8 performance

Bluebird gets a lot of respect for its performance and API style, and reading Optimization killers on the Bluebird wiki reinforced my own inclination to use it over the dozens of other competent promise libraries.

Dug up by diggan on Hacker News, this wiki page explores some ways seemingly innocent JavaScript can cause V8 to avoid optimisation. It contains a code sample that allows you to detect if a function has been optimised, which I’ve been playing with:

// Function that contains the pattern to be inspected (using with statement)
function codeToTest(a, b) {
  if (arguments.length < 2) b = 5;
}

function printStatus(fn) {
  switch(%GetOptimizationStatus(fn)) {
    case 1: console.log('Function is optimized'); break;
    case 2: console.log('Function is not optimized'); break;
    case 3: console.log('Function is always optimized'); break;
    case 4: console.log('Function is never optimized'); break;
    case 6: console.log('Function is maybe deoptimized'); break;
  }
}

// Fill type-info
codeToTest(1, 2);

%OptimizeFunctionOnNextCall(codeToTest);
// The next call
codeToTest(1, 2);

// Check
printStatus(codeToTest);

%OptimizeFunctionOnNextCall causes V8 to to check if a function can be optimised, and then marks it for optimisation. Running it and then calling %GetOptimizationStatus will get debugger information so you can see if a given function can be optimised.

To run this example, the Bluebird wiki suggests using the following Node options:

node --trace_opt --trace_deopt --allow-natives-syntax test.js

The --trace_opt option logs the names of optimised functions, and --trace_deopt logs “deoptimisations”. The --allow-natives-syntax option allows you to use the V8 functions that start with a percent, like %OptimizeFunctionOnNextCall.

If this all sounds interesting but you’re focused on client-side development, then you might like to look at the Web Tracing Framework from Google. It can use some of V8’s extra tracing options, and has both Chrome and Firefox extensions with rich instrumentation features. You’ll need to enable some flags to use it.

Node Roundup: husky, grunt-npmcopy

25 Jun 2014 | By Alex Young | Comments | Tags node modules npm grunt git

husky

husky (GitHub: typicode / husky, License: MIT, npm: husky) by typicode is a module for helping to avoid bad commits being pushed using Git hooks.

It basically sets up Git hooks for your Node projects:

So what makes husky different?

First, other modules often replace or delete existing hooks. husky won’t ever replace or modify an existing hook, so it’s a safer choice for a team or an open source project. In other terms, people who have set up their own hooks won’t be impacted by husky.

I think also that husky is more easier and straightforward to use compared to others. husky’s README is just a few lines and setting up hooks should be simple.

And last, usually other modules introduces unconventional package.json fields, husky uses only valid package.json fields.

grunt-npmcopy

grunt-npmcopy (GitHub: timmywil / grunt-npmcopy, License: MIT, npm: grunt-npmcopy) by Timmy Willison allows you to use the same package manager for Node and client-side projects. It helps place client-side dependencies in the right directory by using a Grunt task called npmcopy.

The npmcopy task takes source and destination options so you can avoid copying lots of extra files into your publicly accessible asset directories.

Have you ever wondered why we have so many package managers? NPM, Bower, Component. Why don’t we just pick one? Well, after much deliberation with developers like you, I’ve decided to support the idea that NPM might just be able to handle it all.

Small and Reusable Browser Modules: npm-dom

24 Jun 2014 | By Alex Young | Comments | Tags npm dom modules libraries

npm-dom (GitHub: npm-dom) by Azer Koçulu, Damon Oehlman, Max Ogden, Jake Verbaten, and Tim Oxley is a GitHub organisation that publishes DOM-related modules through npm.

So far there are small modules like new-element (https://github.com/npm-dom/new-element) and siblings (https://github.com/npm-dom/siblings), but also larger modules like domquery (https://github.com/npm-dom/domquery).

There are quite a few modules already. If you work with Browserify then you might like the way these modules can be consumed. As an example, take a look at class-list:

var elem = someElement;
var ClassList = require('class-list');
var cl = ClassList(elem);

cl.add('foo');
cl.remove('bar');
cl.toggle('baz');

Azer was inspired to create another organisation called npm-flickr, which is a set of Flickr-related libraries.

Gifffer, Composing Discrete Events with RxJS

23 Jun 2014 | By Alex Young | Comments | Tags gif animation reactive

Gifffer

Gifffer (GitHub: krasimir / gifffer, License: MIT) by Krasimir Tsonev is a small library for adding a play control to animated gifs. It works by drawing a play button over the image, and dynamically inserting an image element when play is clicked. To prevent the gif from playing when the page loads, the data-gifffer attribute is used instead of the src attribute.

Krasimir has a blog with gifs that illustrate browser features, so he wanted to be able to handle playing gifs more elegantly than the default behaviour. Here’s an example: Gifffer example. You can click it to toggle playback.

Composing Discrete Events with RxJS

Composing Discrete Events with RxJS by Sergey Bolshchikov is a post that compares addEventListener with RxJS. If you’ve ever used Reactive Extensions then you should be at home with the use of selectMany, combineLatest, and so on.

Here’s the full example:

var mouseDowns = Rx.Observable.fromEvent(document, 'mousedown');
var mouseMoves = Rx.Observable.fromEvent(document, 'mousemove');
var mouseUps = Rx.Observable.fromEvent(document, 'mouseup');

var moves = mouseDowns.selectMany(function(md) {
  var start = {
    x: md.clientX,
    y: md.clientY
  };
  return mouseMoves.combineLatest(mouseUps, function(mm, mu) {
    var stop = {
      x: mu.clientX,
      y: mu.clientY
    };
    return {
      start: start,
      stop: stop
    };
  }).takeUntil(mouseUps);
});

moves.subscribe(function(res) {
  var body = document.querySelector('body');
  body.innerHTML = 'Start: x = ' + res.start.x + ', y = ' + res.start.y + '; Stop: x = ' + res.stop.x + ', y = ' + res.stop.y;
});

Google's Web Starter Kit

20 Jun 2014 | By Alex Young | Comments | Tags node gulp sass boilerplate
Web Starter Kit

Web Starter Kit (GitHub: google / web-starter-kit, License: Apache 2.0) from Google is a boilerplate for developing responsive websites. It supports multiple devices, has a gulp.js build script, and has support for synchronising pages across devices during testing.

If you’re a Node developer, then you might like the gulp.js-based environment. Typing gulp will build and optimise the current project, and gulp serve will run a server. There’s also gulp pagespeed that uses Google’s PageSpeed insights.

The sync feature for testing is powered by BrowserSync. BrowserSync is a Socket.IO-based Node application that automatically sends changes to pages as you edit files. It also has a gulp.js module that you can use with your own projects.

If you’re wondering why a Node/Ruby project has come out of Google, then take a look at the Web Starter Kit contributors: it seems like it’s another project by Addy Osmani and Sindre Sorhus, just like Yeoman.

Although this is a boilerplate project, the style guide makes it look more like something like Bootstrap. If you find Bootstrap too heavy for your projects and would prefer something lighter with workflow tools, then give Web Starter Kit a try.

Bridge Node and PhantomJS with phridge

19 Jun 2014 | By Alex Young | Comments | Tags node modules npm phantomjs

I use PhantomJS for integration testing and PDF generation, but I find working with its API awkward. That means I often put as much logic as possible into a Node wrapper before handing off the bare minimum to PhantomJS.

Johannes Ewald sent in a module that attempts to improve on this workflow: phridge (GitHub: peerigon / phridge, License: Unlicense, npm: phridge).

For comparison, here is an example of a standard PhantomJS script:

phantom.addCookie('cookie_name', 'cookie_value', 'localhost', function() {
  phantom.createPage(function(page) {
    page.set('customHeaders.Referer', 'http://google.com', function() {
      page.set(
        'settings.userAgent',
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5)',
        function() {
          page.open('http://localhost:9901/cookie', function (status) {
            page.evaluate(function(selector) {
              return document.querySelector(selector).innerText;
            }, function (text) {
              console.log('The element contains the following text: ', text)
            }, 'h1');
          });
        }
      );
    });
  });
});

With phridge, however, you can do this:

phantom.run('h1', function(selector, resolve) {
  var page;

  // This code runs inside PhantomJS
  phantom.addCookie('cookie_name', 'cookie_value', 'localhost');

  page = webpage.create();
  page.customHeaders = {
    Referer: 'http://google.com'
  };
  page.settings = {
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5)'
  };
  page.open('http://www.google.com', function() {
    var text = page.evaluate(function(selector) {
      return document.querySelector(selector).innerText;
    }, selector);

    // Resolve the promise and pass 'text' back to node 
    resolve(text);
  });
}).then(function(text) {
  // Inside node again
  console.log('The element contains the following text: '+ text);
});

The phantom object has its own API that is specific to phridge. Phridge works by starting a small HTTP server from within PhantomJS to act as an API entry point from Node. It uses a shared secret to reduce the potential for abuse – this is documented in the readme, under a note on security.

The approach used by phridge is similar to my own homebrew solutions that have evolved over the last year or two, so I’m hoping I can replace my ad-hoc code with phridge to make my PhantomJS dependent projects more maintainable.

Node Roundup: Node 0.8.27 and 0.10.29, BipIO, Reducto

18 Jun 2014 | By Alex Young | Comments | Tags node modules npm

Node 0.8.27 and 0.10.29

You may be surprised to see a Node 0.8 release here, but 0.8.27 and 0.10.29 have been updated to fix an OpenSSL and UTF-8 encoding issue:

Additionally these releases address the fact that V8 UTF-8 encoding would allow unmatched surrogate pairs. That is to say, previously you could construct a valid JavaScript string (which are stored internally as UCS-2), pass it to a Buffer as UTF-8, send and consume that string in another process and it would fail to interpret because the UTF-8 string was invalid.

This breaks backward compatibility for the specific reason that unsanitized strings sent as a text payload for an RFC compliant WebSocket implementation should result in the disconnection of the client. If the client attempts to reconnect and receives another invalid payload it must disconnect again. If there is no logic to handle the reconnection attempts, this may lead to a denial of service attack.

The post includes an example with Buffer, and demonstrates how even if you’re not explicitly creating Buffer instances from strings Node might still do it behind the scenes.

BipIO

BipIO (GitHub: bipio-server / bipio, License: GPLv3) an API platform for consuming and composing APIs based on graph definitions and pipelines. You can run your own server, and there’s a closed source web UI that you can sign up to:

If you’re familiar with Yahoo Pipes, IFTTT, Zapier, Mulesoft, Cloudwork or Temboo - the concept is a little similar. The server has a small footprint which lets you create and automate an internet of things that matter to you. It can be installed alongside your existing open source app or prototype for out-of-band message transformation, feed aggregation, queuing, social network fanout or whatever you like, even on your Rasberry Pi.

It uses MongoDB and RabbitMQ, and the readme has help for setting it up on a server with Monit.

Reducto

Reducto (GitHub: michaelleeallen / reducto, License: MIT, npm: reducto) by Michael Allen is configuration framework for Express that aims to simplify the creation of routes for APIs.

The main goal of reducto is to break apart the routing mechanism into smaller, more cohesive components. By reducing your app to just middleware, data transforms, and reusable service calls you end up with a smaller set of code to reason about and thus make your app easier to write and maintain.

You can create routes using JSON files that map middleware, service handlers, data fixtures, and transform functions to routes. It also supports services, which are callable HTTP endpoints. It comes with an example application that shows weather for a given zip code.

Hya: JavaScript Synths and Plugins

17 Jun 2014 | By Alex Young | Comments | Tags audio midi
A Hya session.

Cristiano Belloni has relaunched KievII Host as Hya.io. This is a web-based plugin-based audio application that supports hardware MIDI though Web MIDI, audio synthesis, sequencers, and lots of plugins.

The project has a blog with announcements about updates, plugins, and some technical background. The web interface is closed source, but the plugins Cristiano has written are open source. For example, hy-osc is an oscillator, and kmx is a mixer.

Hya supports AMD and ES6 modules. They use a simple JSON object that describes the plugin, and a constructor function. You can bind to the Hya GUI using various events, like handleMouseOver and handleMouseDown. The post Developing a canvas plugin for Hya.io explains how to create plugins in detail.

The documentation has details on MIDI interaction and the initPlugin constructor. It’s amazing to think that you could connect a MIDI control surface or keyboard to a web application.

Miminal Promises with Thenable

16 Jun 2014 | By Alex Young | Comments | Tags es6 promises async

Thenable

If you want to use ES6 promises using the Promise object in a library or module, then there’s a new implementation that you might want to check out. Thenable (GitHub: rse / thenable, License: MIT) by Ralf S. Engelschall is a Promise implementation based on Promises/A+.

This is a strictly-compliant Promises/A+ 1.1.1 implementation in just 2KB of (compressed) code, which passes the official Promises/A+ Test-Suite and includes back-references to the relevant specification statements. It just provides a minimum Promise functionality, because it is intended to be directly embedded into ECMAScript 5 based libraries and frameworks, in order to dependency-free leverage from Promises and be able to return “thenable” Promise objects to applications.

Because Thenable is a minimum implementation of Promises/A+, it’s suited to the creation of libraries that are forwards compatible, rather than for consumption in JavaScript applications. To reinforce the point, Ralf hasn’t published it to npm or Bower.

Instead, please download the raw thenable.min.js and include it verbatim into your library/framework. The usual approach for this is to temporarily emulate a CommonJS environment within your library/framework to get its Thenable object.

It has a noConflict option for browsers, and supports AMD, CommonJS, and browsers.

If you want to use Promises/A+ in your applications, Ralf recommends Bluebird, and there’s a large list of other implementations on the promises spec wiki: promises-spec / implementations.md.

Web Worker Contest, Steady.js, Jasmine Integration Tests

13 Jun 2014 | By Alex Young | Comments | Tags jasmine testing webworker ui

Web Worker Contest

The Web Worker Contest, sent in by Stefan Trenkel, is a JavaScript game where two programs compete to conquer a two-dimensional space using simple movement commands.

On a playing area of 100 x 100 square fields two JavaScript programs compete against each other. From a randomly allotted starting point they must conquer as many fields as possible. The winner is who occupies most fields at the end. A move is to conquer from the current field either the upper, lower, right or left adjacent field. The new field can be occupied only if it was not previously occupied by the opponent’s program. If a move is possible (the new field is free) the current position changes to the desired field. If a move is not possible (the field is occupied by the opponent or you want to leave the playing area), you stay on the current position. Fields that one has previously occupied can be used again (but do not count double). The programs do not have any information about the playing area.

The contest is based on the Web Worker API:

Your own Web Worker is simply a local JavaScript file with appropriate code. In this case your own Web Worker is not uploaded to the server. This option is primarily for testing and optimizing your own Web Worker. If you want to participate in the WWC you have to upload your Worker on the Upload page.

You can view running games and read more about the concept in the guide.

Steady.js

Steady.js (GitHub: lafikl / steady.js, License: MIT) by Khalid Lafi is a library for elegantly responding to onscroll events. With Steady.js, the onscroll handler collects data, then offloads the work to requestAnimationFrame. It throttles events, and works like @media-query.

Steady.js is based around “trackers”: these provide the logic that the data collector uses. An example of a built-in tracker is scrollTop which indicates how far a scrollable element has moved from the top.

Basic usage looks like this:

var s = new Steady({
  conditions: {
    width: 400,
    scrollX: 0,
    max-bottom: 200
  },
  throttle: 100,
  handler: fn
});

s.addCondition('scrollX', 0);

The documentation has an example of a custom tracker that you can extend with your own behaviour.

Jasmine Integration Tests

jasmine-integration by Jordi Noguera is an integration testing extension for Jasmine. It allows you to run tests in browsers by using an iframe, or in headless mode using PhantomJS.

The documentation shows how to use it with Grunt, so you can execute your tests against a browser with grunt jasmine:server, or in headless mode using grunt jasmine:server:ci.

Jordi has written a sample app with tests called node-todo which demonstrates how the same specs can be used for browser testing and headless tests on the command-line.

Why Ramda?, Two-Way Data Binding Review

12 Jun 2014 | By Alex Young | Comments | Tags ui data-binding functional mvvm

Why Ramda?

Scott Sauyet sent in Why Ramda?, a post that attempts to explain the Ramda library:

To those not used to functional programming, Ramda seems to serve no purpose whatsoever. Most of its major capabilities are already covered by libraries like Underscore and LoDash.

These folks are right. If you want to keep coding with the same imperative and object-oriented styles you’ve been using, Ramda does not have much to offer you.

However, it does offer a different style of coding, a style that’s taken for granted in purely functional programming languages: Ramda makes it simple for you to build complex logic through functional composition. Note that any library with a compose function will allow you do functional composition; the real point here is: “makes it simple”.

The article builds on the functional composition idea and leads up to the kind of data-focused programming that Ramda makes possible.

Two-Way Data Binding Review

Two-Way Data Binding by Nikita Vasilyev is a review of two-way data binding in Backbone, React, Angular, Meteor and plain JavaScript.

It highlights an issue that some libraries might have if they change fields at the wrong time:

The problem is that data flows from an input field to a model, and then back to the same input field, overriding the current value even if it’s exactly the same.

React.js doesn’t have Backbone’s problem with moving the cursor position. Its virtual DOM, a layer between the actual DOM and React’s state, prevents React from unnecessary DOM changes.

There’s also an informative comment by Leo Horie about the effort required to learn each framework:

Something that strikes me about the framework versions is the amount of framework-specific knowledge required to get these examples working. It’s one thing to say “here’s a version in framework X”, and it’s quite another to actually write the code (from the standpoint of someone who’s still considering framework options and who is not familiar with the lingo and caveats for any of them.)

Node Roundup: npm's New Web Framework, Notes from the Road, TJ Fontaine Interview

11 Jun 2014 | By Alex Young | Comments | Tags node modules npm interviews

npm’s New Web Framework

In Nearing Practical Maintainability on the official npm blog, there’s a discussion about the decision to use hapi.js for npm’s new site:

Both Hapi and Express rate extremely well against our juding criteria. To choose between the two, it pretty much came down to the framework architecture: Hapi’s plugin system means that we can isolate different facets and services of the application in ways that would allow for microservices in the future. Express, on the other hand, requires a bit more configuration to get the same functionality (it’s certainly capable!).

The current npm-www has a lot of dependencies that you might have seen before: browserify, uglifyjs, moment, ejs, and nodemailer are all popular modules. I think using something like hapi.js or Express makes sense, even if it just gives the project some architectural hints.

While, yes, we could use barebones Node.js and roll our own framework, we want to avoid the same “special snowflake” situation that we’re currently in. Plus, by using a framework, we can focus more on pushing out the features our community wants and needs, instead of debugging some weird nook and/or cranny that someone forgot about.

Notes from the Road

Notes from the Road is a post on Node’s official blog by TJ Fontaine about the Node on the Road events:

These Node on the Road events are successful because of the incredible support from the community and the existing meetup organizations in their respective cities. But the biggest advantage is that the project gets to solicit feedback directly from our users about what is and isn’t working for them in Node.js, what modules they’re using, and where they need Node to do better.

From these experiences TJ has written up some notes about Node’s release schedule, future documentation improvements, and the path to becoming a Node contributor:

In an effort to make it easier for users to contribute to Node.js the project has decided to lift the requirement of signing the CLA before contributions are eligible for integration. Having to sign the CLA could at times be a stumbling block for a contribution. It could involve a long conversation with your legal department to ultimately contribute typo corrections.

TJ Fontaine Interview

Meanwhile, the Node hosting company Modulus has interviewed TJ Fontaine, where some of these points are reiterated:

If you’re looking for ways to contribute to Node itself, the website will be soon be going through an overhaul to improve our documentation. We’re going to be adding a lot more documentation, cleaning up what we already have, as well as designing the pieces to help internationalize the site. Node’s community is globally diverse, we should be working to enable Node users everywhere they are.

Node Hardware Hacking with Tessel

10 Jun 2014 | By Alex Young | Comments | Tags node hardware
Node-compatible hardware.

Imagine being able to run npm install gprs to add GPRS tracking support to a hardware project… Well, now you can with Tessel!

The idea behind hardware platforms like Tessel is to make it easier for software developers to interface with hardware. This is ideal if you’ve ever thought it would be nice to hook up a movement sensor to a camera to take a photo whenever your dog or cat moves.

Microcontrollers are chips that contain a processor, memory, and I/O. You can hook them up to sensors for input, and things like servos and speakers for output. Unfortunately microcontrollers have limitations – once you start adding the amount of RAM and processing power required for a high-level language like JavaScript then the costs add up. Also, while they can be programmed, most of them aren’t trivial to program – some have to be flashed with special hardware.

This is why Arduino was such a big deal: it made it easier for programmers and non-technical tinkerers to upload code to a microcontroller using a computer and USB cable.

Tessel and Espruino have iterated on Arduino by using slightly more powerful hardware to allow JavaScript to run. Espruino’s strength is it uses a specialised version of JavaScript that means it can use cheaper, low-powered hardware.

On the other hand, Tessel has built-in Wi-Fi and an ARM Cortex-M3 microcontroller. Because it’s so powerful, it can run thousands of standard Node modules straight from npm. And even better, Tessel has a wide selection of hardware modules, including:

  • Accelerometer
  • Audio (MP3/AAC/WMA/MIDI/FLAC/Ogg Vorbis)
  • Bluetooth LE
  • Camera
  • MicroSD
  • Relay (for controlling higher-powered devices)
  • Servo

Naturally all of these toys come at a price: Tessel with a single module costs $99. You can also buy Tessel with all available modules for $599.

I have an Espruino, but I don’t have a Tessel yet. I like the idea of using npm install with Tessel, but Espruino is already easy to connect to sensors and other hardware, particularly for those with Arduino experience.

My recommendation is to try Tessel if you’re perplexed by hardware but good at Node, and have some free time and cash.