Velocity UI Pack

29 May 2014 | By Alex Young | Comments | Tags animations ui jquery

Julian Shapiro has announced the Velocity UI Pack. There’s a screencast that introduces the effects and how to use them.

This is an additional dependency for the Velocity.js library, which is a performance-focused jQuery plugin that improves on $.animate(). With the Velocity UI Pack you can perform animations on sets of elements, which is ideal for drawing attention to content as it’s loaded using Ajax.

It supports a stagger option which adds a delay after each animation. Given a set of elements, you can apply an animation in sequence simply by using $divs.velocity('callout.shake', { stagger: 75 }). If you’re loading an array of records using Ajax, then you can render the resulting elements and display them with .velocity('anim', { stagger: time }).

One thing that I like about this library is the animations don’t result in blurry text. Julian has gone to a lot of trouble to make it easy to use and fast, so it’s worth checking out the demo and the screencast.

Node Roundup: mongo-select, asynctrace

28 May 2014 | By Alex Young | Comments | Tags node modules npm testing mongodb

mongo-select

mongo-select (GitHub: dschenkelman / mongo-select, License: MIT, npm: mongo-select) is a module for creating projections on results from mongodb.

You can specify the fields to include using select.include:

var select = require('mongo-select').select();
var projection = select.include(['name', 'email', 'children.name']).make();

console.log(projection); // { 'name': false, 'email': false, 'children.name': false };

There are also methods for excluding fields (exclude) and ignoring the _id field (noId). These methods can be chained:

select.noId()._exclude(['name', 'email', 'children.name']);

Using it with MongoDB queries looks like this:

var select = require('mongo-select').select();
var mongodb = require('mongodb');

var MongoClient = mongodb.MongoClient;

MongoClient.connect('mongodb://127.0.0.1:27017/test', function(err, db) {
  if (err) throw err;

  var users = db.collection('users');

  users.find(
    {},
    select.include(['name', 'email']),
    function(err, result) {
      // code here, access to only result[i]._id, result[i].name and result[i].email
    }
  );
});

asynctrace

asynctrace (GitHub: Empeeric / asynctrace, License: MIT, npm: asynctrace) from Empeeric is a stack trace API based on AsyncListener. By requiring asynctrace, you’ll get stack traces that include details on asynchronous boundaries.

It’s built using the shimmer module, which is meant to help safely replace functions by wrapping them.

If you use Mocha then you can optionally use it by specifying it on the command line: mocha --require asynctrace. That means you don’t need to modify your code to use the module during testing.

Fluxxor for React

27 May 2014 | By Alex Young | Comments | Tags reactive facebook
Flux

Fluxxor (GitHub: BinaryMuse / fluxxor, License: MIT, Bower: fluxxor) by Brandon Tilley is a library designed to work with Facebook’s React. It provides an application architecture that’s based around a dispatcher, stores, and views.

Instantiating a Flux application looks like this:

var flux = new Fluxxor.Flux(stores, actions);

The stores object contains classes that are created with Fluxxor.createStore, and the actions object is a set of methods that invoke that dispatcher:

var actions = {
  addTodo: function(text) {
    this.dispatch("ADD_TODO", {text: text});
  },

  toggleTodo: function(todo) {
    this.dispatch("TOGGLE_TODO", {todo: todo});
  },

  clearTodos: function() {
    this.dispatch("CLEAR_TODOS");
  }
};

These examples were taken from the Fluxxor quick start guide, which explains how to write a to-do list with Flux.

Fluxxor provides more tools as well. Fluxxor.FluxMixin can be used to make Flux instances available to React components, and Fluxxor.StoreWatchMixin allows you to watch for change events on Flux stores.

You can use Fluxxor outside of React, and it’s installable with Bower as fluxxor. Brandon, the author of the library, pointed out that Fluxxor is his personal implementation of the Flux pattern which was created by Jing Chen at Facebook.

ngActivityIndicator, angular-cog, dijs

26 May 2014 | By Alex Young | Comments | Tags angularjs di ajax

ngActivityIndicator

ngActivityIndicator

ngActivityIndicator (GitHub: voronianski / ngActivityIndicator, License: MIT) by Dmitri Voronianski is an Angular provider for loading indicators, which you can use on directives, controllers or services.

Adding an indicator to a controller looks like this:

var app = angular.module('exampleApp', ['ngActivityIndicator']);

app.controller('MainCtrl', ['$activityIndicator', '$timeout',
  function ($actvityIndicator, $timeout) {
    $actvityIndicator.startAnimating();
    $timeout(function () {
      $actvityIndicator.stopAnimating();
    }, 3000);
  }
]);

There’s a directive called ng-activity-indicator which can be used to inject the indicator into the DOM automatically.

angular-cog

angular-cog (GitHub: chinmaymk / angular-cog, License: MIT) by Chinmay Kulkarni is a library for writing declarative Ajax requests with Angular.

The full set of directives are as follows:

<div cog-verb="{url}" 
        cog-model="{ng-model}" 
        cog-success="{angular.expression}" 
        cog-error="{angular.expression}"
        cog-trigger="{angular.expression}"
        cog-no-spinner="{true|false}" 
        cog-absolute-url="{true|false}" 
        cog-config="{object}">
</div>

Requesting JSON content should place it in the $data variable, so you can access it in cog-success and then pass it to something bound in $scope.

The documentation includes notes on how to set up a loading indicator – maybe you could try ngActivityIndicator?

dijs

dijs (GitHub: cmtt / dijs, License: WTFPL) by Matthias Thoemmes is a dependency injection module for Node and browsers that’s inspired by Angular. There are methods for defining a namespace, describing the modules, and resolving dependencies.

For describing dependencies, it supports function notation and array notation:

// Function notation
var mod = Di();
mod.provide('Pi', Math.PI, true);
mod.provide('2Pi', function(Pi) { return 2*Pi; });

// Array notation
var mod = Di();
mod.provide('Math.Pi', Math.PI, true);
mod.provide('2Pi', ['Math.Pi', function (Pi) {
  return function () {
    return 2*Pi;
  };
}]);

There’s a lot more to it than this, and you might find it useful if you’ve got used to DI through Angular but want to use it elsewhere.

Ramda, AniJS ScrollReveal

23 May 2014 | By Alex Young | Comments | Tags functional libraries animation

Ramda

Ramda

Ramda (GitHub: CrossEye / ramda, License: MIT, npm: ramda) by Scott Sauyet and Buzz de Cafe is a functional library that is similar to Underscore, but has a very different API style.

In Underscore you might filter arrays like this:

var validUsersNamedBuzz = function(users) {
  return _.filter(users, function(user) { 
    return user.name === 'Buzz' && _.isEmpty(user.errors); 
  });
};

But in Ramda you can pass the function first and the array last:

var validUsersNamedBuzz = R.filter(R.where({ name: 'Buzz', errors: R.isEmpty }));

All of Ramda’s functions curry automatically, which makes composition easier:

Because the API is function-first, data-last, you can continue composing and composing until you build up the function you need before dropping in the data. (Hugh Jackson published an excellent article describing the advantages of this style.)

These API decisions mean Ramda feels like native JavaScript with less syntax than you might expect.

ScrollReveal Using AniJS

ScrollReveal (GitHub: anijs / examples / scrollreveal) by Dariel Noel Vila Plagado is an AniJS helper function that animates components as they enter the viewport.

The syntax for animating items looks like this:

<div id="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal">
  Cuba 2022
</div>

Node Roundup: webpack, Mitm.js, musicmetadata

22 May 2014 | By Alex Young | Comments | Tags node modules npm build-systems network

webpack

webpack

Vignesh Anand sent in webpack (GitHub: webpack, License: MIT, npm: webpack) by Tobias Koppers. It’s a bundler for CommonJS and AMD packages, based around asynchronous I/O, and supports preprocessors like CoffeeScript.

With webpack you can load chunks of dependencies on demand, so you can reduce the initial payload. It only supports JavaScript by default, but there are modules for loading resources like CSS (css-loader). To understand how it works, the getting started tutorial provides a high-level overview.

Vignesh pointed out that Instagram uses webpack, and it already has a lot of support on GitHub.

Just wanted to leave a little thank you and share the exciting news that instagram.com is now building and serving all of its js and css assets with webpack :). @sokra you’ve been an awesome help in getting this all working, and our build step is so much cleaner and quicker because of it.

Mitm.js

Mitm (GitHub: moll / node-mitm, License: LAGPL, npm: mitm) by Andri Möll is a module for intercepting and mocking outgoing TCP and HTTP connections. Running Mitm() will enable mocking for sockets, and it returns an object that allows mocking to be disabled:

var Mitm = require('mitm');
var mitm = Mitm();

// Later:
mitm.disable()

The documentation has more examples, including how to handle HTTP requests during testing.

musicmetadata

musicmetadata (GitHub: leetreveil / musicmetadata, npm: musicmetadata) by Lee Treveil is a streaming metadata parser for music files:

var fs = require('fs');
var mm = require('musicmetadata');

// create a new parser from a node ReadStream
var parser = mm(fs.createReadStream('sample.mp3'));

// listen for the metadata event
parser.on('metadata', function(result) {
  console.log(result);
});

The project is a fork of node-id3 by António Afonso.

Script-injected Async Scripts Considered Harmful

21 May 2014 | By Alex Young | Comments | Tags async performance

Ilya Grigorik has published a post about how script-injected resource loading could negatively impact performance, in Script-injected “async scripts” considered harmful.

The inline JavaScript solution has a subtle, but very important (and an often overlooked) performance gotcha: inline scripts block on CSSOM before they are executed. Why? The browser does not know what the inline block is planning to do in the script it is about to execute, and because JavaScript can access and manipulate the CSSOM, it blocks and waits until the CSS is downloaded, parsed, and the CSSOM is constructed and available.

The example in the article shows a CSS download blocking script execution, where the scripts are short snippets that inject additional script elements to load real JavaScript files. The delay of execution causes the files to be downloaded later than desired.

If you look at the source to DailyJS you can see Disqus injecting a script that way, and when I look at the network tab in Chrome Developer Tools it seems like count.js executes after the CSS files have downloaded.

The obvious fix is to use async attributes on script tags, as long as you can live with the additional effort to support IE8 and 9. But before you rush off to reformat your sites, the last point by Ilya is interesting:

Wait, should I just move all of my JavaScript above the CSS then? No. You want to keep your <head> lean to allow the browser to discover your CSS and begin parsing the actual page content as soon as possible - i.e. optimize the content you deliver in your first round trip to enable the fastest possible page render.

Optimising for all possible browser behaviours is difficult!

Hammer.js: touch-action fix

20 May 2014 | By Alex Young | Comments | Tags mobile touch

Hammer.js has been updated, and the authors have written a notice about the scrolling behaviour in Chrome 35 and IE10. The touch-action CSS property controls how regions are scrolled with touch events – think panning and zooming.

In older versions of Hammer, this property was set to none, so it blocked scrolling. You can change the default behaviour using the behavior.touchAction property:

<script src="hammer.js"></script>
<script>
// enable only vertical scrolling on browsers that support touch-action
// for 1.0.x this is at the stop_default_behavior object
Hammer.defaults.behavior.touchAction = 'pan-y';

// ...your hammer code...etc...
var mc = new Hammer(document.body);
</script>

Realising that this would confuse people, the Hammer authors have written How to fix Chrome 35 and IE10 scrolling, so you can update your Hammer-based sites to work correctly in newer browsers.

Async Harmony Tests

19 May 2014 | By Alex Young | Comments | Tags es6 async firefox

Simeon Velichkov sent in async-harmony tests (GitHub: simov / async-harmony, License: MIT), which contains examples of new ES6 features. Each example is based on methods from async, but written using new features like generators, including arrow functions.

It only currently works in Firefox 29, but I thought the examples were quite interesting:

function eachSeries (items, job, done, kill=true) {
  var results = [], errors = [];

  var it = iterator();
  it.next();

  function* iterator () {
    for (let item of items) {
      yield job(item, (err, result) => {
        if (kill && err) return done(err);
        if (err) errors.push(err);
        results.push(result||null);
        setTimeout(() => it.next(), 0);
      });
    }
    done((errors.length ? errors : null), results);
  }
}

The corresponding usage looks like this:

async.eachSeries([0,1], (item, done) => {
  done(new Error('error'+item));
}, (err, result) => {
  err.message.should.equal('error0');
  done();
});

Give them a read if you’re interesting in seeing ES6 in action.

Agenda: Lightweight Job Scheduling

16 May 2014 | By Alex Young | Comments | Tags node modules npm

Agenda (GitHub: rschmukler / agenda, License: MIT, npm: agenda) by Ryan Schmukler is a job scheduler for Node that uses MongoDB as the backend. It runs periodically, so you’d need to run it as a background process on something like Heroku or Nodejitsu.

You can control the number of concurrent jobs with the concurrency option, and jobs can be given a priority so higher priority jobs can run first.

Basic usage looks like this:

agenda.define('delete old users', function(job, done) {
  User.remove({lastLogIn: { $lt: twoDaysAgo }}, done);
});

agenda.every('3 minutes', 'delete old users');

agenda.every('*/3 * * * *', 'delete old users');

agenda.start();

The last example looks like cron, so you can use it as a cron replacement if you’re used to that syntax. The agenda.start method kicks off the process so jobs will run.

The MongoDB instance can be specified using the database method, and configuration options can be chained:

var agenda = new Agenda();
agenda
  .database(...)
  .processEvery('3 minutes')

Agenda was recently featured as an npmawesome post on Nodejitsu’s blog: Schedule regular jobs with agenda.

Trash: Cross-Platform Delete

15 May 2014 | By Alex Young | Comments | Tags node modules npm cli

Trash

Trash (GitHub: sindresorhus / trash, License: MIT, npm: trash) is a cross-platform command-line tool for safely deleting files.

Although those of us who are raised on Linux find the indignity of a Trash folder or Recycle Bin annoying, it can be a useful safety net. It has support for Windows, OS X, and Linux:

function win(paths, cb) {
  execFile('./Recycle.exe', ['-f'].concat(paths), {
    cwd: path.join(__dirname, 'vendor', 'cmdutils')
  }, function (err) {
    cb(err);
  });
}

The Linux version has a small script that wraps around trash-cli:

function linux(paths, cb) {
  execFile('./trash-put', paths, {
    cwd: path.join(__dirname, 'vendor')
  }, function (err) {
    if (err && /cannot trash non existent/.test(err.message)) {
      return cb(new Error('Item doesn\'t exist'));
    }

    cb(err);
  });
}

The test is written as an integration test, so it uses Node’s fs module to create and move files:

it('should trash files', function (cb) {
  fs.writeFileSync('fixture', '');
  fs.writeFileSync('fixture2', '');
  fs.writeFileSync('weird\\\\name\\"\'', '');
  assert(fs.existsSync('fixture'));
  assert(fs.existsSync('fixture2'));
  assert(fs.existsSync('weird\\\\name\\"\''));

  trash([
    'fixture',
    'fixture2',
    'weird\\\\name\\"\''
  ], function (err) {
    assert(!err, err);
    assert(!fs.existsSync('fixture'));
    assert(!fs.existsSync('fixture2'));
    assert(!fs.existsSync('weird\\\\name\\"\''));
    cb();
  });
});

Node Roundup: Newman, selenium-test-runner, ncc

14 May 2014 | By Alex Young | Comments | Tags node modules npm chrome http testing

Newman

Newman (GitHub: a85 / Newman, License: Apache, npm: newman) by Prakhar Srivastav is a command-line collection runner for Postman, the HTTP client for Chrome.

Newman allows you to easily run a collection, like this:

newman -u https://www.getpostman.com/collections/cb208e7e64056f5294e5 -e devenvironment.json

In this example, -e is used to supply a JSON file that has configuration options for Postman’s environment. Newman’s readme has more examples and documentation.

selenium-test-runner

selenium-test-runner (GitHub: tkambler / selenium-runner, License: MIT) by Tim Ambler is a library for writing Selenium tests in a blocking style. It uses node-fibers so you can avoid promises and chained expressions.

ncc

ncc

ncc, or node-crome-canvas, (GitHub: indus / ncc, License: MIT, npm: ncc) by Stefan Keim, uses the Chrome remote debugging protocol to build a bridge to the native HTMlCanvasElement and its 2d-Context. That means you can send drawing operations from the server to Chrome.

Here’s an example:

var ncc = require('ncc')

var canvas = ncc();

canvas.width = canvas.height = 256;

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'slateGray';
ctx.fillRect(28, 28, 200, 200)();

Wordchain: An AngularJS/Firebase Word Game

13 May 2014 | By Alex Young | Comments | Tags games firebase angular
Wordchain

Wordchain (GitHub: sonnylazuardi / wordchain, License: MIT) by Sonny Lazuardi is a multiplayer word game made with Firebase, AngularJS, the Google Dictionary API, and the Wikitionary API. It allows you to sign in with Facebook, and complete words in a crossword-like manner.

The code is all modular, dependency-injected Angular classes, so it’s fairly easy to see how it fits together. The main game logic is in js/controllers.js. Here’s the dictionary API search:

$scope.search = function() {
  angular.element('.loader').fadeIn(1000);
  $.get('https://www.googleapis.com/scribe/v1/research?key=AIzaSyDqVYORLCUXxSv7zneerIgC2UYMnxvPeqQ&dataset=dictionary&dictionaryLanguage=en&query='+$scope.word, function(data) {
    console.log(data);
    angular.element('.loader').fadeOut(1000);
    $scope.definitions = data.data[0].dictionary.definitionData;
    $scope.$apply();
  }, 'jsonp');
};

The readme has some details on running it locally, once you’ve got set up with Firebase.

Share SSH Sessions with Nutty

12 May 2014 | By Alex Young | Comments | Tags ssh meteor apps
The Nutty SSH sharing service.

Nutty (GitHub: krishnasrinivas / nuttyapp, License: GPLv3) by Krishna Srinivas is a Meteor application that allows SSH sessions to be shared via a browser. A host connects to a server which can then be shared with other people. Krishna suggests that this could be useful for pair programming or support.

The Nutty server needs some configuration before you can run it yourself – you can set up Google authentication, and it needs Amazon S3 for uploading recordings to S3. If you want to use WebRTC then you can set up PeerJS as well.

It’s an interesting example of Meteor and HTML5 being used to provide a service that would be traditionally run as a system-level daemon.

WebGL D3 with PathGL

09 May 2014 | By Alex Young | Comments | Tags webgl graphics animation d3
A PathGL particle simulation.

“PatrickJS” sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It’s a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

d3.select('canvas').selectAll('circle')
  .data(particles.unwrap())
  .enter().append('circle')
    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

d3.select('canvas')
  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you’re already used to D3 but don’t know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There’s also a page on GPGPU, a technique for offloading heavy computation to the graphics card.

Declarative Animations with AniJS

08 May 2014 | By Alex Young | Comments | Tags css animation html
AniJS

AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There’s a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for “if, on, do, to”:

AniJS

The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n
Sentence    - Definition, ... , Definition n
Definition  - if | on | do | to | before | after | helper

You can also create animations in JavaScript with AniJS.createAnimation.

The project’s wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there’s enough English in the code examples and comments that I was able to understand it.

Node Roundup: 0.10.28, 0.11.13, CSRF Vulnerability in Express, Generators in Node, Wolfpack

07 May 2014 | By Alex Young | Comments | Tags node modules npm generators testing

Node 0.10.28, 0.11.13

Node has been updated to 0.10.28 and 0.11.13.

Version 0.10.28 was a quick update to the earlier 0.10.27 release, which updates C++ dependencies (openssl, libuv) as well as several core modules. One important change was the update of openssl to 1.0.1g.

CSRF Vulnerability in Express

Connect and Express have a vulnerability in the CSRF middleware component that means you can bypass it by making a GET request with a method override parameter:

Connect’s methodOverride middleware allows an HTTP request to override the HTTP verb with the value of the method post parameter or with the x-http-method-override header. As the declaration order of middlewares determines the execution stack in Connect, it is possible to abuse this functionality in order to bypass the standard Connect’s anti-CSRF protection.

Connect’s CSRF middleware does not check CSRF tokens in case of idempotent verbs (GET/HEAD/OPTIONS, see csurf/index.js). As a result, it is possible to bypass the security control by sending a GET request with a POST MethodOverride header or parameter.

Read more at NibbleSecurity.

Generators in Node

Generators in Node.js: Common Misconceptions and Three Good Use Cases is a post by Marc Harter that explains how generators work from a Node developer’s perspective.

Generators are function executions that can be suspended and resumed at a later point; a lightweight coroutine. This behavior happens using special generator functions (noted by function* syntax) and a couple of new keywords (yield and yield*) which are only used in the context of a generator

Wolfpack

Wolfpack (GitHub: fdvj / wolfpack, License: MIT, npm: wolfpack) by Fernando De Vega is a SailsJS model testing library that uses SinonJS to mock the database and spy on models. That means you don’t need a real database to run unit tests.

If you have Backbone testing backgrounds, this will be familiar to you. When testing a backbone model or collection, you instantiate it and provide mock data to test the methods. Rarely do you need your model or collection to communicate with the server to provide the results. That’s because you want to test your model or collection, not how or if backbone is doing what it is supposed to do.

Browser Audio Encoding, Atom Open Source

06 May 2014 | By Alex Young | Comments | Tags audio encoding mp3 ogg editors atom

Vorbis.js

Joe Sullivan sent in vorbis.js (GitHub: itsjoesullivan/libvorbis.js, License: MIT), a project based on several others that produces Ogg Vorbis from PCM data. It uses Emscripten, and has an event-based API. There’s a full example in the readme, which demonstrates how to configure the necessary memory buffers and encoding options.

Joe has also made a project called iago that can stream Ogg using web workers.

If licensing issues don’t put you off, take a look at libmp3lame.js by Andreas Krennmair. Again, this project makes use of Emscripten to port parts of lame to JavaScript.

Atom is Open Source

Atom is now free and open source. The announcement includes the minor revelation that there are now over 800 Atom packages.

I’ve seen people on Twitter running the Linux version, but people are still dubious about Atom’s performance and the 2 MB file limit. Making it open source seems like a solid first step to creating sustained interest, but it has a Google Wave feel about it.

Private Bower

05 May 2014 | By Alex Young | Comments | Tags bower build-tools

Private bower

If you’ve ever wanted to set up a private Bower repository, private-bower (GitHub: Hacklone/private-bower, License: MIT, npm: private-bower) by Barna Tóth might be what you’re looking for.

You can install it with npm install -g private-bower, and then run it with private-bower. It accepts some command-line options to change what port it listens on, but all you really need to do is add some lines to your .bowerrc file:

{ "registry": "http://localhost:5678" }

That changes the repository Bower will use. Now whenever Bower attempts to fetch a package, it will check your private server.

private-bower itself will serve packages if they’ve been downloaded, otherwise it will fall over to the public repository. It’s built using Express, and the author has put the API methods in the readme so you can see how it works.

Cammy and n3-charts

02 May 2014 | By Alex Young | Comments | Tags animations angular d3
Cammy's demo.

Cammy (GitHub: lorem–ipsum / cammy, License: MIT) by Sébastien Fragnaud (“lorem–ipsum”) is an orthogonal projection camera built on AngularJS and D3.js. The demo is completely gorgeous, so I was compelled to waste a good 15 minutes playing with it. If you look at the source you can see how the Angular directives are used to hook up the UI controls with the renderer.

Sébastien also wrote n3-charts (GitHub: n3-charts / line-chart):

$scope.options = {
  axes: {
    x: {
      key: 'x',
      labelFunction: function(value) { return value; },
      type: 'linear',
      tooltipFormatter: function(x) { return x; }
    },
    y: { type: 'linear' },
    y2: { type: 'linear' }
  },
  series: [{
    y: 'value',
    color: 'steelblue',
    thickness: '2px',
    type: 'area',
    striped: true,
    label: 'Pouet'
  }, {
    y: 'otherValue',
    axis: 'y2',
    color: 'lightsteelblue'
  }],
  lineMode: 'linear',
  tension: 0.7
};