Tweene, JSON Forms

04 Dec 2014 | By Alex Young | Comments | Tags libraries animation json forms

Tweene

Tweene (GitHub: SkidX/tweene, License: Artistic License 2.0, npm: tweene, Bower: tweene) by Federico OrrĂ¹ is an API that wraps around popular animation libraries so you can switch implementation more easily. Rather than having to worry about whether you need to use translateX or just x, you can use Tweene’s API instead.

These are the supported libraries right now:

To create animations, you have to make tween instances using Tweene, and then call methods that set the duration and easing. It actually has several API styles based on GASP, jQuery, and Velocity, but I prefer the fluent API:

Tweene.get($target)
  .to({ opacity: 0, left: '+=50px' })
  .duration(500)
  .easing('easeOutQuad')
  .on('complete', completeCallback)
  .play();

The documentation for Tweene is detailed, and there are some examples on CodePen.

jQuery JSON HTML Forms

Cezary Wojtkowski sent in jquery-html-json-forms, a project that aims to support the W3C HTML JSON form submission specification:

This specification defines a new form encoding algorithm that enables the transmission of form data as JSON. Instead of capturing form data as essentially an array of key-value pairs which is the bread and butter of existing form encodings, it relies on a simple name attribute syntax that makes it possible to capture rich data structures as JSON directly.

This basically means you can use an enctype attribute of application/json in forms. This makes it a lot easier to create forms that send data to JSON APIs, rather than using the standard form encoding.

Cezary’s project allows you to use enctype='application/json' and then get JSON out with $(formElement).JSONencode(). You can also enable and disable the plugin.

The HTML JSON form specification is new to me, but it seems really cool for those of us who create lots of JSON APIs.

Node Roundup: Mailman, trayballoon, unembed

03 Dec 2014 | By Alex Young | Comments | Tags node libraries modules email windows scraping

Mailman

Mailman (GitHub: vdemedes/mailman, License: MIT, npm: mailman) by Vadim Demedes is a module for sending emails that supports generators. It uses nodemailer for sending email, and consolidate.js for templates, which means it supports lots of different template languages.

Generators are used for sending emails, so you can do this:

var mail = new UserMailer({ to: 'vadim@example.com' }).welcome();
yield mail.deliver();

Mailman expects a specific directory layout for views, but the added level of structure might help if you’ve got a big mess of email-related code in your current projects.

trayballoon

trayballoon

trayballoon (GitHub: sindresorhus/trayballoon, License: MIT, npm: trayballoon) by Sindre Sorhus is a module for showing system tray balloons in Windows. You can set the text and image to display, and a callback that will run when the balloon disappears:

trayballoon({
  text: 'Unicorns and rainbows'
  icon: 'ponies.ico',
  timeout: 20000
}, function() {
  console.log('Trayballoon disappeared');
});

It also has a command-line tool which you could use to display notifications when things like tests fail. trayballoon works by bundling an executable called nircmdc.exe which is called with child_process.spawn.

unembed

Given some “embed code” for sites like YouTube and Vimeo, unembed (GitHub: colearnr/unembed, License: MIT, npm: unembed) by Prabhu Subramanian will extract the markup and produce a JSON representation. This might be useful if you’re scraping sites that use embed codes, like blogs and forums.

I’ve never thought of applying the tiny modules philosophy to scraping, but it seems like a great way of sharing all of those hacks we use to extract data in a more structured way.

Why You Should Donate to Mozilla

02 Dec 2014 | By Alex Young | Comments | Tags community mozilla

Firefox donations

Recently Firefox prompted me to donate to Mozilla. The ad appeared on the Firefox Start Page, but you might not always see it – sometimes there’s a message that reads “Let the world know you #ChooseIndependent with Firefox.” I switch between browsers for testing quite a lot, so I’m not particularly tied to one browser. However, that day I’d been using the latest Firefox and the Firefox Developer Edition, so I was in a good mood about Mozilla and decided to donate a few dollars.

I happen to think that you should donate as well, and here’s why. The Mozilla Foundation has been involved with some projects that have been immensely useful and powerful: Firefox, PDF.js (Mozilla Labs), asm.js, and Rust spring to mind. Take a look at the Mozilla Research Projects list for more.

Something that JavaScript developers can’t live without is the Mozilla Developer Network documentation. I almost felt like I was donating to support that site alone!

Like you I also use Chrome, and I actually like Google’s email indexing and Google Now – the way it shows delivery information for recent purchases is awesome. So I’m not pro-Firefox due to any privacy issues. And Safari is totally gorgeous on Yosemite. It definitely feels like Firefox’s competition is strong, and the mainstream technology press is down on Firefox. The last few releases have felt as fast as Chrome though, and the UI is evolving to something clean and minimalist that I like.

I think Mozilla does a lot for us JavaScript developers. If you’d like to donate, go to sendto.mozilla.org. There’s also a FAQ about donations. You can now even donate bitcoin!

JavaScript Developer Survey 2014

01 Dec 2014 | By Alex Young | Comments | Tags community surveys

Here is the JavaScript Developer Survey for 2014! You have two weeks from now to complete the survey (the 15th of December).

I asked for help with the questions last year, and collected pull requests and issues to improve the survey. You can view the survey repository at alexyoung/dailyjs-survey. Many thanks to everyone who has helped so far.

Please fill out the survey and share it with your fellow JavaScript programmers! I make sure the data is open so it’s not just used for planning DailyJS content, you can use it as well.

Here’s the survey link again: JavaScript Developer Survey for 2014

The survey is now closed.

Mermaid: Like Markdown for Diagrams

28 Nov 2014 | By Alex Young | Comments | Tags svg libraries diagrams

Mermaid

When I work on books my editor always seems to push for more diagrams. Diagrams are useful, but drawing tools are a chore to use. When I get really stuck I resort to pen and paper or ASCII art. Writing suffers from the same issue: people love playing with writing tools and fonts before realising writing in Markdown or something similar is far more productive.

That’s why I thought Mermaid (GitHub: knsv/mermaid, License: MIT, Bower: mermaid) sounded cool:

Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Rather than playing with stroke styles and colours, fonts, and other distractions, you can focus on the meaning the diagram is trying to encapsulate. Mermaid does allow you to include styles so you can change fill colours and strokes, but the text-based syntax might be easier to work with than GUI drawing tools under some circumstances.

I noticed Mermaid has two Jison files, which seems like a sensible way to parse the diagram syntax. For example, flow.jison is used to generate the parser that parses text graph definitions.

d3 is used for drawing, so you should be able to use Mermaid anywhere you use d3. It comes with a Gulpfile for generating optimised builds, and there are some Karma tests as well.

Material Design's Delightful Details with SVG Morpheus

27 Nov 2014 | By Alex Young | Comments | Tags animation svg libraries

SVG-Morpheus

SVG Morpheus (GitHub: alexk111/SVG-Morpheus, License: MIT, Bower: svg-morpheus) by Alex Kaul is a library for morphing between SVG icons. It implements the delightful details transition, as described by Google’s material design documentation:

The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details.

You might have noticed this in Android recently: the first-party Android apps now have a nice transition for the back icon. This is visible in the Play Store app, for example.

Alex’s library allows you to do this with SVG icons, so you can employ the same effects in your web apps. All you need to do is add an SVG icon set to a document, then instantiate SVGMorpheus:

var myIcons = new SVGMorpheus('#myIconSet', options, callback);
myIcons.to('icon1');

The options include easing and duration, so you get some control over the transition.

The project’s documentation has more details on the API and the expected markup structure.

PowerArray, Atomus

26 Nov 2014 | By Alex Young | Comments | Tags array testing libraries modules

PowerArray

PowerArray (GitHub: techfort/PowerArray, License: BSD) by Joe Minichino is a small library that attempts to replace native Array methods with faster ones. You can use PowerArray.prototype.forEach to iterate over values using a simple for loop, which is known to be faster than Array.prototype.forEach. However, it also includes PowerArray.prototype.binarySearch which performs a binary search on the array.

Thanks to Oliver Caldwell’s post for a quick version of the algorithm. Also note the contribution of Yehonatan and other authors of comments to the post which helped to optimise the implementation of binary search further.

Oliver wrote this about the binary search algorithm:

A binary search searches by splitting your array into smaller and smaller chunks until it finds your desired value. Unlike the normal indexOf which searches from left to right in a simple iteration. The binary search Wikipedia article explains it best (as always). There are a couple of downsides; It will be slower with smaller data sets (this needs proving) and the array you are searching needs to be sorted.

To use the binary search you’ll need to sort the array first, and there’s PowerArray.prototype.numericSort which just uses Array.prototype.sort with return a.id < b.id ? -1 : 1.

The project includes some benchmarks so you can try it out for yourself.

Atomus

Everytime I use a Node/DOM testing library my tests seem to suffer from bitrot and stop working after a few months. So I was glad to see a new one by Krasimir Tsonev called Atomus (GitHub: krasimir/atomus, License: MIT, npm: atomus). It’s based on jsdom, so you get a window object and browser instance that lets you trigger events like clicked and blurred.

The following snippet is taken from the bundled AngularJS test:

var b = atomus()
.html('<html><body><div ng-controller="Controller"><register-form></register-form></div></body></html>')
.external(__dirname + '/data/angular.js')
.external(__dirname + '/data/angular.register-form.js')
.ready(function(errors, window) {
  if (errors !== null) console.log(errors);

  var Controller = function($scope) {
    var runTests = function() {

      var register = b.$('#register-button');
      var message = b.$('#message');
      var username = b.$('#username');
      var password = b.$('#password');

      b.clicked(register);

      assert.equal(message.text(), 'Missing username.');

The b.clicked(register) line causes the #register-button element to be clicked, and then there are some standard Node assert calls to ensure the document was updated as expected.

I’ve used other libraries like this, including Zombie.js. They all work in a slightly different way – Zombie.js also uses jsdom but some use PhantomJS or drive browsers with Selenium. It’s worth trying a few out to see what works for your project.

Paperclip.js, bem-react

25 Nov 2014 | By Alex Young | Comments | Tags templates reactive react

Paperclip.js

Paperclip (GitHub: mojo-js/paperclip.js, License: MIT, npm: paperclip) by Craig Condon is a template engine that’s a bit like React, except it translates HTML templates into JavaScript document fragments rather than using a virtual DOM. The template is then cloned when it’s used, and requestAnimationFrame is used to prevent unnecessary DOM operations.

Craig provided some examples so you can see how it compares to other projects:

Paperclip has been used for two years in production at ClassDojo, so it sounds battle tested. It has unit tests that run in browsers and Node, and you can also use the module itself in Node.

bem-react

bem-react (GitHub: dfilatov/bem-react, License: MIT, Bower: bem-react, npm: bem-react) is a module for React that provides features to support the BEM methodology which was developed by Yandex.

BEM is a methodology of web projects development, that allows you to divide an interface into logically independent blocks. At the same time BEM contains specific tools for the typical web developers’ tasks automatization. And finally BEM gives us opportunity to create libraries of web-components for fast and efficient web-development.

With this module, you can use “bemjson” in templates instead of jsx or JavaScript, and manipulate CSS classes based on BEM.

I noticed there’s a demo app in bem-react/example that highlights the bemjson special fields, component use, and component composition.

Define.js, Combokeys

24 Nov 2014 | By Alex Young | Comments | Tags amd modules keyboard

DefineJS

DefineJS (GitHub: fixjs/define.js, License: MIT, npm: definejs) by Mehran Hatami is a new module loader. It implements the AMD pattern and also supports Promised Modules, and other new nonstandard related module techniques.

You can specify the module’s global name by including a global attribute on the script tag:

<script global="definejs" src="define.js"></script>

Now you can declare a module with definejs.define() and load dependencies with definejs.require. Promised modules are implemented by returning new Promise when declaring a dependency.

The author has included tests written with the Karma test runner, so you can run the tests against a real browser.

Combokeys

Shahar Or sent in a keyboard shortcut library called Combokeys (GitHub: mightyiam/combokeys, License: Apache 2.0), a fork of the popular Mousetrap project.

It has some cool changes: it’s been refactored to use CommonJS, and it doesn’t automatically listen on document. You can now specify which element it listens on for keyboard shortcuts. That was actually one thing that prevented me from using Mousetrap in a project.

txtjs, Useuses

21 Nov 2014 | By Alex Young | Comments | Tags text typesetting

txtjs

Ted Patrick sent in txtjs (GitHub: diverted247/txtjs, License: BSD), a typesetting engine. It provides font and glyph rendering that is indepenent of the OS and browser by using SVGPath on a canvas element.

The documentation has lots of examples so you can see how it handles things like character styling with multiple fonts and alignment. The project comes with a warning that says txtjs should be used for “creative applications” where the layout requirements exceed the capabilities of the DOM. I imagine it could be useful in a scenario where tight control is required for graphic design projects.

txtjs is part of CreateJS, an open source set of libraries including EaselJS and TweenJS.

Useuses

Useuses (GitHub: SpoonX/useuses, License: BSD-2-Clause, npm: useuses) by Wesley Overdijk is a library for handling “soft” dependencies. Given a JavaScript file, you can express the dependencies with @uses ./my-dependency.js in a comment.

Once you’ve defined dependencies you can create builds with the command-line tool, like this:

useuses -i example/main.js -o example/dist/built.js -w

There’s also a Node API, so you could hook it into a Grunt or Gulp. Wesley had created an earlier version that was for Grunt, but this is a rewritten, more generic version. He’s written a blog post about JavaScript dependency management that describes the module in more details.

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.