JavaScript on a USB Stick

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

Espruino Pico

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

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

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

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

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

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

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

0.10.33 and Signing Validation

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

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

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

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

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

Node release notes verification

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

Web verification

Node.js Best Practices

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

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

Puer

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

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

Generate Concave Hulls with Hull.js

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

Problem

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

Points

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

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

Border

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

Usage

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

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

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

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

Simple polygon

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

Simple polygon

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

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

Recreating the Spectrogram Face

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

Spectroface

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

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

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

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

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

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

  return intensity;
};

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

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

The Node Advisory Board

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

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

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

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

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

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

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

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

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

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

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

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

BindingJS, 2D Space Shooter Part 2

23 Oct 2014 | By Alex Young | Comments | Tags data-binding reactive libraries tutorials games

BindingJS

BindingJS (GitHub: rummelj / bindingjs, License: MPL) by Johannes Rummel is a data binding library that seeks to separate data binding declarations from HTML. It has a Less-inspired syntax for defining bindings, which you can put in a script element with the text/binding type.

JavaScript is used to set things up, and the API is fluent, so you can chain calls to configure things like the template fragment that a binding document applies to.

The binding syntax is similar to CSS, but because it’s influenced by Less you’ll find it easier to group properties with nesting.

Data is accessed through “adapters”, so it’s fairly easy to customise it to existing applications:

There are multiple view adapter such as value, text, attr or on that are already included in BindingJS. The qualifier of an adapter is a static instruction for the Adapter and is written directly behind the prefix, if that is only one character long. Otherwise it is separated by a colon from the prefix.

I like the idea of a CSS selector data binding language, but the expressions it uses are terse so it may take some effort to get the hang of BindingJS. Also, I think it would work well with custom elements, so it would be worth experimenting with that.

Part 2 of How to Make a 2D Space Shooter in Unity

Thomas Palef sent in part 2 of How to Make a 2D Space Shooter in Unity. This is the tutorial series that uses Unity’s JavaScript API. In this part Thomas adds enemies and collision handling as well.

Node Roundup: npm's Registry Architecture, Mongeese, Synaptic

22 Oct 2014 | By Alex Young | Comments | Tags modules libraries node ai database mongodb

npm’s Registry Architecture

npm’s blog has a post about the registry’s roadmap for the second phase of its architectural development. This post has some interesting stats about the amount of traffic npm gets, and how the design is changing to make it scale up.

The new design is based around modular microservices, so it follows the trends employed by other large scale services.

We call this collection of changes “Registry 2”. It will resolve some lingering inefficiency in the existing architecture and give us even more room to scale, but more importantly it will allow us to add a bunch of new features. We’re very, very confident that it will work, because it’s already in production: npm Enterprise already uses this architecture, and the Registry 2 project is largely a matter of taking this architecture and scaling it up.

The cool thing about this is it means npm will be able to offer private packages – these are invisible packages that only your collaborators can see. The post points out that using lots of small packages is the “Node way”, but npm doesn’t currently help us achieve that due to the reliance on public packages.

The way I get around the lack of private packages is to host private modules on GitHub with an OAuth2 token in the URL. I find this approach better than Git submodules, but it lacks the ability to easily control what version of a package is included so it’s not really suitable for deployments that I don’t have complete control over.

But if you write code that is closed-source, or is just too specific to your own application to make a good public module, your options right now are full of friction and split-brain thinking. Why can’t you just npm publish and npm install all the private packages in your app, the same way you can with public packages? People kept asking us to make it possible to do this, so we did.

This should be released in early 2015. You can register for the beta using a form in the blog post.

I don’t know if private packages or “npm for teams” will be mean npm is going to offer subscription plans, but I expect to see subscriptions for some functionality next year. I don’t have a problem with that, as a long paying GitHub subscriber, but the post doesn’t seem to mention anything about paid plans. Of course, there is already npm Enterprise, but this is different from ad-hoc collaboration.

Mongeese

Mongeese (GitHub: zekenie / mongeese, License: ISC, npm: mongeese-array) by Zeke Nierenberg modifies Mongoose to make the Array class include extra async methods, including asyncEach, asyncMap, and asyncReduce. Here’s an example of asyncMap:

var iterator = function(oneKitten, done) {
  done(null, oneKitten.name)
};

someUser.kittens.asyncMap(iterator, function(err, kittenNames) {
  // kitten names -> ['fluffy', 'cuddles', ...]
});

It works by using the async module and lodash. Because it modifies Mongoose it may cause issues with future API changes, but you may like it if you use a lot of arrays.

Synaptic

Synaptic (GitHub: cazala / synaptic, License: MIT, npm: synaptic) by Juan Cazala is a neural network library. There are some cool demos, like an image filter based on training a perceptron.

This library includes a few built-in architectures like multilayer perceptrons, multilayer long-short term memory networks (LSTM) or liquid state machines, and a trainer capable of training any given network, which includes built-in training tasks/tests like solving an XOR, completing a Distracted Sequence Recall task or an Embeded Reber Grammar test, so you can easily test and compare the performance of different architectures.

The readme explains what each of the module’s classes do, to the extent that it reads like an introduction to neural networks. It also has some powerful features, like being able to export a network as a single JavaScript function, so you can use trained networks without any dependencies.

Morearty.js, ngDroplet

21 Oct 2014 | By Alex Young | Comments | Tags angularjs react libraries

Morearty.js

Marat Bektimirov sent in Morearty.js (GitHub: moreartyjs / moreartyjs, License: Apache 2.0, npm: morearty), a state management library inspired by Om. It’s based on the immutable data structures in immutable.js – the idea is components and subcomponents only have access to a nested version of data that is synchronised with the original binding. That means each component only knows what it should, which should improve encapsulation within the application.

Morearty detects any changes automatically and triggers re-rendering. Each component gets a correctly defined shouldComponentUpdate method that compares the component’s state using straightforward JavaScript strict equals operator ===. So, only the components whose state was altered are re-rendered.

This might sound similar to Omniscient.js, which I wrote about recently. Omniscient could technically work with other immutable libraries, but is similar to Morearty. Libraries like these help you focus on generic state change operations so you don’t get too bogged down in DOM structure.

Morearty’s binding methods return this, so you should be able to chain calls. It comes with tests and has high test coverage.

ngDroplet

ngDroplet (GitHub: Wildhoney / ngDroplet, License: MIT, Bower: ng-droplet) by Adam Timberlake is a new HTML5 file uploading library for Angular that supports drag and drop and image previews. You can set the allowed extensions and show upload progress if your server sends the X-File-Size header.

It uses the custom droplet element or a data-droplet attribute, and it uses a DropletModel object that contains the metadata for selected files.

Linting Backbone Apps, Hybrid Mobile Performance

20 Oct 2014 | By Alex Young | Comments | Tags backbone performance mobile

eslint-plugin-backbone

eslint-plugin-backbone (GitHub: ilyavolodin / eslint-plugin-backbone, License: MIT, npm: eslint-plugin-backbone) by Ilya Volodin is a Backbone-specific ESLint plugin. It can verify collections and views, which will help you find common mistakes like direct jQuery usage inside views.

Each of the rules is documented, and the documentation describes when not to use the rule as well. This is good if you’re hitting a lot of linter errors for specialised behaviour that should be ignored.

Because the rules are so well documented you might like to use it to brush up on your Backbone best practices as well.

Hybrid Mobile Performance with browser-perf

If you’re developing cross-platform apps powered by technologies like Cordova, how do you benchmark them? browser-perf by Parashuram is a Node module for gathering rendering performance metrics. The author has recently published a blog post called Cordova Apps - Rendering Performance that describes how to use browser-perf with hybrid mobile apps.

When developing a mobile app, one of the concerns of using the Hybrid approach is performance. Achieving smooth experience like a native app is important for Hybrid apps and developer tools for Android and iOS have been helping to a great deal.

For Android, Chromedriver is used with the Selenium JSON wire protocol. iOS uses Appium, but Parashuram had to enable performance logs before this worked.

Angular Custom Element, AngularJS in Depth

17 Oct 2014 | By Alex Young | Comments | Tags books angularjs

Angular Custom Element

Angular Custom Element (GitHub: dgs700 / angular-custom-element, License: MIT) by David Shapiro allows you to use custom elements in a W3C-approved way. This means you can take your declarative markup to the next level.

To register custom tag names you can create custom element providers then call register:

$customElementsProvider.register('tag-name1', { elemConfigObj1 })
  .register('tag-name2', { elemConfigObj2 })
  .register('tag-name3', { elemConfigObj3 });

Once the service has been injected into the matching element directive, it will automatically bind the element’s custom properties and attributes. Behind the scenes there is cross browser support, so this should even work in IE9.

If you’ve never heard of custom elements before, then take a look at Custom Elements at html5rocks.com. The basic argument is to avoid lots of nested div elements by defining reusable, context-specific elements with new behaviour.

The thing that’s cool about Angular Custom Element is it lets you think in terms of custom elements, which may help future proof reusable components. Rather than building things that are heavily framework-specific, they can be described in terms of the DOM API.

I also noticed in Dave’s readme that he’s written a book: Web Component Architecture and Development with AngularJS. This is a pay what you want kind of deal, so be generous if you’re interested!

AngularJS in Depth

I’ve been invited to the AngularJS in Depth early preview. This is a book aimed at people who have already built applications with Angular and want to take their skills to the next level. The first chapter is free, and eleven chapters have been planned so far.

It’s written by David L. Aden and Jason L. Aden, and is published by Manning who are also publishing the Node book that I’m working on. The early preview has two chapters so far, but I really like the idea of books aimed at more advanced AngularJS programmers because it’s a hard thing to learn well.

AngularJS in Depth costs $39.99 for the early access preview and the final eBook, or $49.99 for the print and eBook versions.

Omniscient.js, Paths.js Update, React Example Shopping Cart

16 Oct 2014 | By Alex Young | Comments | Tags reactjs apps graphs graphics

Omniscient.js

Omniscient.js (GitHub: omniscientjs / omniscient, License: MIT, npm: omniscient) by Mikael Brevik and Torgeir is a React library for rendering components using immutable data. This is ideal for use with Immutable.js, but other libraries could be used as well.

It uses cursors, so the outer immutable structure swapped when a component’s data is changed. This might sound like it would perform badly, but it only re-renders component trees that reference changed data.

The module is used by wrapping components with the omniscient function. The author’s examples call this “component”. These components only deal with their own piece of data, so they’re nicely encapsulated and potentially easier to reuse.

The project has lots of examples and documentation, so it’s worth reading through the readme first to get a feel for it.

Path.js Update

Path.js

Andrea Ferretti wrote in to say Paths.js has been updated to include tree charts, waterfall diagrams, Sankey diagrams and a preliminary version of force-directed graphs.

This is what the tree chart looks like:

tree = new Ractive
  el: '#tree'
  template: template
  data:
    Tree: Tree
    data: ducks
    children: children
    width: 350
    height: 300
    leaf: (point) ->
      not (children(point)?.length)

tree.on 'toggle', (event) ->
  node = event.context.item
  node.collapsed = not node.collapsed
  @update()

The author is also working on performance improvements and lots of other cool stuff, so it’s worth keeping an eye on this library.

Coinbolt Cat Shop

JP Richardson sent in Coinbolt Cat Shop (GitHub: coinbolt / catshop, License: MIT). This is an example of a React.js shopping cart, intended to be used with Bitcoins.

The author points out that you can actually use it with fake Bitcoins for testing purposes.

Node Roundup: node-android, typed-morph, stdio

15 Oct 2014 | By Alex Young | Comments | Tags modules libraries node io streams iterator-protocol android

node-android

node-android (GitHub: InstantWebP2P / node-android, License: MIT) is a Node port for Android. It uses libuvpp and libuv-java, and is mostly compatible with Node 0.10.x. The authors haven’t yet implemented the crypto modules, but it supports most of the other core modules as far as I can tell.

To use it you need to open the source in the Android Developer Tools plugin for Eclipse.

The people behind this project are based in Shanghai, and have also created some interesting peer-to-peer modules for Node. I don’t know what kind of commercial work they do, but there’s a lot of activity on the InstantWebP2P GitHub organisation.

typed-morph

typed-morph (GitHub: pjsteam / typed-morph, License: MIT, npm: typed-morph) by Damian Schenkelman is a set of iterators implemented using the iterator protocol so you can map, reduce, and filter typed arrays without using intermediate arrays.

The evaluation is delayed until the results are consumed, so chained calls are basically lazy:

var elements = new Uint16Array([1,4,7,10]);
var iter = wrap(elements)
  .map(function(e) { return e + 1; })
  .filter(function(e) { return e % 2 === 0; });

// at this point no processing has taken place
iter.reduce(function(value, current) { return value + current; }, 0);

expect(sum).to.equal(10);

stdio

stdio (GitHub: sgmonda / stdio, License: MIT, npm: stdio) by Sergio García is a module for general standard input/output management. You can use it for things like supporting command-line options, reading input by line, and prompting for input.

Command-line options are specified using a nice JavaScript object format:

var stdio = require('stdio');
var ops = stdio.getopt({
  check: {key: 'c', args: 2, description: 'What this option means'},
  map: {key: 'm', description: 'Another description', mandatory: true},
  kaka: {key: 'k', args: 2, mandatory: true},
  ooo: {key: 'o'}
});

And options can also have a multiple flag, so you can support expressions like -f a.txt -f b.txt -f c.txt.

stdio can also automatically generate help, and it comes with Jasmine tests and documentation in the readme.

Make Slicker Progress Bars with ProgressBar.js

14 Oct 2014 | By Alex Young | Comments | Tags ui design libraries

ProgressBar.js

Kimmo Brunfeldt sent in ProgressBar.js (GitHub: kimmobrunfeldt / progressbar.js, License: MIT, Bower: progressbar.js), a library for creating responsive progress bars. It uses animated SVG paths, so the results look very clean and cool.

The library has some built in shapes: Line, Circle, and Square. You can provide properties that are used to style the elements:

var element = document.getElementById('example-line-container');

var line = new ProgressBar.Line(element, {
  color: '#FCB03C',
  trailColor: '#aaa'
});

line.animate(1, function() {
  line.animate(0);
});

If you want to include a number in the progress bar, then you can just set the text of a node. There’s a clock example in the documentation that does this:

var element = document.getElementById('example-clock-container');
element.innerHTML = '<header id="clock-seconds"></header>';
var textElement = document.getElementById('clock-seconds');

var seconds = new ProgressBar.Circle(element, {
  duration: 200,
  color: '#FCB03C',
  trailColor: '#ddd'
});

setInterval(function() {
  var second = new Date().getSeconds();
  seconds.animate(second / 60, function() {
    textElement.innerHTML = second;
  });
}, 1000);

You can also add arbitrary shapes with ProgressBar.Path. There’s a really nice example that uses the Plough (Big Dipper) and connects each star together.

Part of the magic behind the animation in ProgressBar.js is powered by Shifty. This is a tweening engine created by Jeremy Kahn which can “tween” numbers or even CSS strings.

I really like the look of the progress bars Kimmo has used in the documentation, so I expect these will start appearing on websites soon.

Compare Code Similarity with jsinspect

13 Oct 2014 | By Alex Young | Comments | Tags node modules libraries code-quality

jsinspect

jsinspect (GitHub: danielstjules / jsinspect, License: MIT, npm: jsinspect) by Daniel St. Jules is a tool for detecting copy-pasted and structurally similar JavaScript. It also detects boilerplate and repeated logic, so you could use it to extract code into methods or help find dead code.

Installing it with npm gets you a command-line tool that can be used to analsyse multiple paths. You could also use it as part of a project’s build process, perhaps during a linting phase. I ran it on the source to Ghost, and it found matches in the server code between password reset and invitations, which makes sense. The command I used was jsinspect -t 30 -i core/server.

This project is based on the Acorn ECMAScript parser. Acorn is used to generate lists of nodes that are compared based on a similarity threshold (set by -t).

You have the freedom to specify a threshold determining the smallest subset of nodes to analyze. This will identify code with a similar structure, based on the AST node types, e.g. BlockStatement, VariableDeclaration, ObjectExpression, etc. For copy-paste oriented detection, you can even limit the search to nodes with matching identifiers.

For bonus points, you can try combining jsinspect with a script that searches for the copied code on Stack Overflow!

Google's Cloud Platform Library

10 Oct 2014 | By Alex Young | Comments | Tags google modules libraries

JJ Geewax announced the gcloud node (GitHub: GoogleCloudPlatform / gcloud-node, License: Apache 2.0, npm: gcloud) client library for Node. It allows you to access things like the Google Cloud Datastore database and Cloud Storage. You should be able to use it with Google Compute Engine or a Google Developer’s service account.

I had a look at this module and there are a few interesting things to note:

  • They use Mocha for tests, and there are lots of tests
  • The API and code formatting are in line with the Node community
  • The documentation looks modern and uses AngularJS (it’s generated with dox)

There’s a blog post about the project here: gcloud-node - a Google Cloud Platform Client Library for Node.js which demonstrates the API.

With a little bit of configuration, getting data from the API is as simple as dataset.get:

dataset.get(dataset.key(['Product', 'Computer']), function(err, entity) {
  console.log(err || entity);
});

With cool Node libraries like this, AngularJS, and MEAN on Google Compute Engine, I’m just waiting for someone at Google to bring a first-party Node IDE to my Chromebook!

Angular Chart, pragmatic-angular, ng-boilerplate-app

09 Oct 2014 | By Alex Young | Comments | Tags modules libraries angularjs graphs boilerplates

Angular Chart

Angular Chart

Angular Chart (GitHub: jtblin / angular-chart.js, License: BSD) by Jerome Touffe-Blin is a set of native AngularJS directives for Chart.js.

It works by allowing you to define data and labels in the Angular controller, so your markup basically just has to define what kind of chart to use. The advantage of this is it’s reactive, so it works really well if your data changes.

pragmatic-angular

What if you’ve got lots of jQuery plugins but don’t have AngularJS event bindings? Lars Gersmann has written pragmatic-angular (GitHub: lgersman / pragmatic-angular, License: GPL/MIT), which allows you to declaratively bind jQuery plugins to elements in markup.

If the plugin has custom events then you can handle them with ng-on. This works with both native and custom events, so you could use ng-on="{ click : onClick}" to add a click handler.

Even though the plugin is technically very simple, Lars has provided some useful real world examples in the readme so you can see how it’s used.

ng-boilerplate-app

I’m a big fan of writing AngulaJS/Knockout/etc. applications with Browserify, so I thought Mattia Franchetto’s ng-boilerplate-app (GitHub: mtfranchetto / ng-boilerplate-app, License: MIT) was pretty cool. It’s a boilerplate for Angular/Bootstrap applications, and includes file watching, live reloading, CSS vendor prefixing, code coverage, and more.

Node Roundup: Nightmare, Prototypes, node-libpq and node-pg-native

08 Oct 2014 | By Alex Young | Comments | Tags modules libraries node npm phantom postgres

Nightmare

Nightmare

By far the most brittle and confusing part of testing is full stack integration testing. I’ve used lots of different approaches, whether they’re based on PhantomJS or Selenium, but they always cause me trouble.

One issue is often the API – PhantomJS itself has a strange API if you’re more used to Node development. That’s why I was excited to hear about Nightmare (GitHub: segmentio / nightmare, License: MIT, npm: nightmare), which aims to simplify Phantom’s API.

If you want to try it out be aware that you’ll need to install PhantomJS on your system. This can be done using Homebrew on a Mac, and there are packages for other platforms on the main site.

Nightmare has a chainable API that allows you to evaluate JavaScript on the target page’s DOM. If you’ve got a page with jQuery on it, for example, then you can access $ in the evaluate callback.

Here I’ve loaded a web app that starts a server (in app.js), then filled out a sign in form and submitted it. The code in the evaluate method will be executed on the page, so I can use jQuery to do DOM stuff.

var server = require('./app');
var Nightmare = require('nightmare');
new Nightmare()
  .goto('http://localhost:3000')
  .type('input[name="email"]', 'alex@example.com')
  .type('input[name="password"]', 'password')
  .click('.sign-in')
  .evaluate(function() {
    return $('.sign-out').is(':visible');
  }, function(visible) {
    assert(visible, '.sign-out should be visible');
  })
  .run(function() {
    server.close();
  });

Naturally you can use this for the general chores you’d use Phantom for, but I think it might be quite cool for testing projects with complex client-side code.

Prototypes

Alex Fernández sent in prototypes (GitHub: alexfernandez / prototypes, License: MIT, npm: prototypes). This module modifies prototype objects, so use it with caution, but you might find some of the methods useful.

Here are some examples:

'pepitus'.startsWith('pep');
'hi.there'.substringFrom('.'); // 'there'

{ a: 1, b: 2 }.forEach(function(value, key) {
  console.log(key, value);
});

node-libpq and node-pg-native

node-libpq (GitHub: brianc / node-libpq, License: MIT, npm: libpq) by Brian M. Carlson is a set of native bindings to the PostgreSQL libpq C client library.

This module attempts to mirror as closely as possible the C API provided by libpq and provides the absolute minimum level of abstraction. It is intended to be extremely low level and allow you the same access as you would have to libpq directly from C, except in node.js! The obvious trade-off for being “close to the metal” is having to use a very “c style” API in JavaScript.

Brian is the author of the popular pg PostgreSQL library, and has also recently released node-pg-native. node-pg-native is a high performance PostgreSQL module that uses node-libpq.

Sean Levy sent in node-pg-native because he’s excited about the synchronous API:

var rows = client.querySync('SELECT NOW() AS the_date')
console.log(rows[0].the_date) //Tue Sep 16 2014 23:42:39 GMT-0400 (EDT)

It’s really that simple!

Definitive Guide to Generators, Golden Layout

07 Oct 2014 | By Alex Young | Comments | Tags libraries design layouts articles

Definitive Guide to Generators

Gajus Kuizinas read through many ES6 generator articles before he understood them properly. I admit I’ve had the same problem: beyond the basic API, how do you do things like delegate yield statements, or raise and handle errors? And even with a good understanding of the API it can be hard to know when to use generators.

This confusion resulted in Gajus writing a detailed article about generators. It has lots of examples, including a handy gif that illustrates the flow of execution in a debugger.

Gajus’ article covers pretty much everything I can think of, but even so I think it would be nice to see more practical examples to show you generators can improve real world code. I’ve been looking at how Koa projects use generators by searching for open source apps on GitHub, so that can be a useful way to see how people are using them.

Golden Layout

Golden Layout

If someone says “build me an admin area!” or “we need a dashboard!” I immediately reach for Bootstrap. But there are other options, and some may be a better fit depending on what you’re working on. Golden Layout is a new “layout manager” for web applications that supports resizable windows.

It reminds me a little bit of an X11 window manager, a concept that has been tried many times in web development but has always felt a little unnatural. The examples in Golden Layout feel fast and precise – there are no messy gradients or shadows. It may work well for projects that need to adapt to user generated data. This could be something like displaying tables or graphs, like an analytics tool or dashboard.

The examples include Highcharts, SlickGrid, and Angular. The tutorials expand on this further with RequireJS and more complex Angular projects.

This project is CC BY-NC 4.0, so you’ll need to license it for commercial use. It’s created and maintained by Hoxton One Ltd, a company based in London, and the source is on GitHub: hoxton-one / golden-layout.

RWDPerf, respimage

06 Oct 2014 | By Alex Young | Comments | Tags modules libraries responsive mobile

RWDPerf

RWDPerf report

RWDPerf (GitHub: lafikl / RWDPerf, License: MIT, npm: rwdperf) by Khalid Lafi is a tool for analysing responsive pages. It calculates the page weight, so you can see what the download bloat is like.

It works using Chrome’s remote debugging API, so it should be more accurate than a DOM simulation. It accepts arguments on the command-line for configuring things like device scale factor, width, height, and user agent.

It also has an API, which is ideal for dropping it into a build script.

respimage

If RWDPerf indicates that your page has a lot of unused images, then you might want a better responsive image replacement library. Respimage (GitHub: aFarkas / respimage, License: MIT) by Alexander Farkas is a responsive image polyfill for picture and srcset.

Respimage works using the picture element or the srcset image attribute. The srcset implementation supports descriptors for width and density.

There’s also a JavaScript API, so you can also support dynamically generated content.

Slideshow, Unity and JavaScript

03 Oct 2014 | By Alex Young | Comments | Tags games slideshows node modules tutorials

Slideshow

What do you do when Apple and Microsoft do everything they can to pull us into their walled development environment gardens? One answer is to unify both environments using a sane Node API. Ralf S. Engelschall sent in Slideshow (GitHub: rse / slideshow, License: MPL, npm: slideshow), a module for remote controlling and monitoring presentation programs like PowerPoint and Keynote.

He also wrote slideshow-forecast, which is a cool CLI and GUI for monitoring slideshows:

The motivation for this is that for large presentations which have to be given in multiple variants for different timeslots it is very hard to determine the later presentation duration during preparation time. Instead of performing lots of different dry-runs after each preparation, this tool provides a duration prognosis already during preparation time.

The slideshow command-line program itself lets you drive an application with commands like boot, open file, and start. You can also goto a given slide and stop the presentation at the end.

Internally it uses Microsoft’s cscript or Apple’s osascript to communicate with the target application, so you don’t have to worry about strange AppleScript or COM incantations.

How to Make a 2D Space Shooter in Unity

Unity

The Unity game engine is hugely popular with game developers. Many of the indie games that I’ve enjoyed have been made with it, and if I had the time I’d love to make something with it. I was aware Unity supports C#, but I didn’t know it has a compiled JavaScript language as well.

Thomas Palef has written a new tutorial about using JavaScript with Unity called How to Make a 2D Space Shooter in Unity. It shows you how to get started making a game with Unity’s UI, and includes some simple JavaScript for handling firing a bullet.

If you’re interested in Unity but thought it was something that only desktop developers can get into then you might enjoy following this tutorial.