Simple Modules, D3xter

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

Simple Modules

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

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

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

D3xter

D3xter

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

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

var lineGraph = xyPlot(index, y);

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

Alasql.js: In-memory SQL

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

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

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

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

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

var alasql = require('alasql');

var db = new alasql.Database();

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

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

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

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

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

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

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

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

npm and Front-end Packaging

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

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

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

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

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

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

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

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

npm Package Store

npm Package Store

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

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

LokiJS: Fast In-memory Database

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

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

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

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

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

McFly, React Widgets, react-separate-template

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

McFly

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

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

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

React Widgets

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

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

Separating React Templates

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

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

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

Streams, Peerflix, and node-webkit

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

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

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

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

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

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

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

peerflix

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

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

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

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

JavaScript on a USB Stick

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

Espruino Pico

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

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

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

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

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

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

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

0.10.33 and Signing Validation

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

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

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

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

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

Node release notes verification

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

Web verification

Node.js Best Practices

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

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

Puer

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

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

Generate Concave Hulls with Hull.js

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

Problem

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

Points

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

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

Border

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

Usage

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

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

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

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

Simple polygon

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

Simple polygon

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

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

Recreating the Spectrogram Face

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

Spectroface

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

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

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

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

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

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

  return intensity;
};

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

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

The Node Advisory Board

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

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

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

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

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

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

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

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

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

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

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

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

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!