Live Reloading Chrome Apps, Chrome Extensions with React, sendMessage Tutorial

18 Apr 2014 | By Alex Young | Comments | Tags chrome extensions browsers

Live Reloading Chrome Apps

The Chrome Store itself is a pile of rubbish apps with very few exceptions.

Working with Chrome extensions and apps is pleasant enough in some ways – the JavaScript APIs are generally intuitive, and you can make native-feeling UIs without too much effort. However, the development experience feels a little bit dated and painful in places.

Konstantin Raev sent in Live Reloading Chrome Apps, an article about using Gulp with Chrome apps. It shows how live reloading isn’t as easy as it could be, and how to fix it. There’s also a full example on GitHub: bestander / clock-chrome-app-livereload-example.

Creating Chrome Extensions with React

Brandon Tilley sent in Creating Chrome Extensions with React:

If you’re into client-side web development to any extent, you’ve probably heard of Facebook’s React library. I was working on a Chrome extension, and decided to see how well React fit in to the development I was doing.

He also uses Browserify as well, which I’m interested in because I tried using RequireJS for sharing code between Chrome extensions and Firefox add-ons, and I struggled to get it to work in Firefox. My Firefox add-ons are using the Jetpack SDK rather than the old XUL way.

Passing data around in Chrome extensions

Passing data around in Chrome extensions by Erica Salvaneschi is an introduction to using chrome.runtime.sendMessage and addListener:

We wanted to get data from the current web page and then use it to populate a form that appears in a new window. It was easy to create a context menu item that triggered an event, but sending data based on the current page to the new window wasn’t obvious.

You might find this useful if you’re just getting into Chrome extensions and want more concrete examples than what Google provides.

Browser Synths with Code Studio

17 Apr 2014 | By Alex Young | Comments | Tags node modules audio
Code Studio running polytropon.

Code Studio (GitHub: substack / code-music-studio, License: MIT, npm: code-music-studio) by substack is a tool for “designing musical algorithms”. It provides a browser-based interface that allows you to return functions that manipulate amplitudes. You can experiment and share sounds using studio.substack.net, or install it with npm and run it locally.

If you want to find some code to play with, look at substack’s Twitter account, or /-/recent.

The audio API is based on baudio, which works by accepting a function that takes a time value and returns an amplitude value between -1 and 1.

That means you can generate a sound just by running something like this:

return function(t) {
  return sin(441);
  function sin(x) { return Math.sin(2 * Math.PI * t * x); }
}

That example creates a function called sin that generates values for a given pitch. Code Studio will render an oscilloscope so you can visualise the output as well as hear it. The waveform is rendered using amplitude-viewer, another module by substack that creates graphs with SVG.

If you’re interested in the server-side portion of the code, then take a look at bin/cmd.js. This uses Node’s http module, and ecstatic for static assets.

I think my favourite example so far is polytropon. It has a function called Moog, so you can’t go wrong!

Node Roundup: Do We Need peerDependencies, lazy-install, Time Require

16 Apr 2014 | By Alex Young | Comments | Tags node modules npm benchmarks

Do We Need peerDependencies?

Isaac Schlueter asked this question on Twitter:

Recently, peerDependencies has gotten more and more contentious. Srsly considering deprecation/removal. Thoughts? github.com/npm/npm/issues/5080

The discussion on Twitter and GitHub seems strongly for removing peerDependencies. I agree with it simply because I hate explaining how it works.

Eran Hammer made an interesting point about the idea of a compatibleWith property:

What we need is compatibleWith concept that simply warns you when you are using bad combinations. I think we can rename peerDeps and with some minor adjustment keep the functionality without annoying everyone. Making it a warning sign instead of a blocking feature would remove the “hell” part and those who chose to ignore warnings (as many already do with node versions) can continue to ignore.

lazy-install

If that isn’t enough npm craziness for you, then how about this? lazy-install (GitHub: adamrenklint / lazy-install, License: MIT, npm: lazy-install) by Adam Renklint can be used to install dependencies based on “group” names.

Let’s say you wanted to specify dependencies for your production and test environments. Your package.json could look like this:

{
  "name": "myProject",
  "lazyDependencies": {
    "server": {
      "express": "4.0.0"
    },
    "test": {
      "mocha": "1.18.2"
    }
  }
}

Then in your code you can run lazy.install to trigger an npm install with the right options. In fact, the module itself is basically a wrapper around npm.

Time Require

Time Require

How much time did that require take to require? Now you can find out, with time-require! (GitHub: jaguard / time-require, License: MIT, npm: time-require).

It shows the execution time for each module by changing require, and then displaying the elapsed time for each file once the 'exit' event is emitted on the process object.

You can use it by adding a require('time-require') as the first line of your main script.

Responsive SVG with VLEX

15 Apr 2014 | By Alex Young | Comments | Tags responsive vlex

VLEX

VLEX (GitHub: indus / VLEX, License: MIT) by Stefan Keim is a library for defining the logic necessary to resize SVG images. It works using a vlex attribute that controls how things are resized, and there’s also a VLEX function for initialising and updating elements.

A “vlexpression” contains property descriptions separated by semi-colons. Using a $ allows predefined values to be referenced: $x is element.clientWidth, and $cX is $x / 2 – the horizontal centre. Using a colon allows a value to be set: key:value.

Given those rules, you can centre a circle with cx:{$cX};cy:{$cY}.

Internally it splits the expression with String.prototype.split(';'), and then splits on : to get the keys and values. It’s a fairly simple parser, but it seems small and flexible enough to do get some clever effects using SVG. Take a look at the examples in the readme to see what’s possible.

Reactive X-Tags

14 Apr 2014 | By Alex Young | Comments | Tags elements xtag

Reactive Elements

Here’s a cool idea I haven’t seen before: ReactiveElements with X-Tag. X-Tag is a library from Mozilla that uses JavaScript to provide support for the current W3 Web Components draft. This basically allows modern browsers to use custom elements:

X-Tag allows you to easily create elements to encapsulate common behavior or use existing custom elements to quickly get the behavior you’re looking for.

X-Tag provides several powerful features that streamline element creation such as: Custom events and delegation, mixins, accessors, component lifecycle functions, pseudos and more.

The PixelsCommander / ReactiveElements project by Denis Radin is a small MIT licensed library that builds on X-Tag so you can use it with React.js.

First you create a React component definition:

MyComponent = React.createClass({
  render: function() {
    console.log(this.props.items);
    return <ul><li>React content</li></ul>;
  }
});

xtag.registerReact('my-react-component', MyComponent);

And then you can use my-react-component in your HTML and see items if it has been specified as an attribute.

I like the idea of combining these two libraries, it has an AngularJS feel while embracing upcoming standards.

The BMEAN Stack and Offline-First Design

11 Apr 2014 | By Daishi Kato | Comments | Tags express node caching
This is a guest post written by Daishi Kato.

Many of you would know the MEAN stack, the software stack consisting of MongoDB, Express, AngularJS and Node. However, the BMEAN stack might be new to you. The B stands for Breeze, a data management library with support for client caching.

The current trend in web development is mobile first design. Recently, the “offline first” approach got attention for contributing toward better mobile user experience. Breeze allows you to develop offline web applications easily thanks to support for querying the client’s cache.

Breeze provides a sample BMEAN application called Zza, but it’s not an offline application. I thought there could be a simpler but more practical application using social-cms-backend.

Social-cms-backend is Express middleware and it demonstrates how to develop a simple Twitter clone in a matter of minutes. I updated social-cms-backend so that it supports Breeze and you don’t have to code the server side logic.

Using the new social-cms-backend and the BMEAN stack, I developed a sample application called notes-app-sample. It’s an offline application with HTML5 cache manifest thanks to connect-cache-manifest.

The usage of the application is pretty straightforward: you write text which will be stored in localStorage. Once you login, you can synchronize data with MongoDB on the server. The login is handled by passport, and currently it works with the Facebook strategy.

The source code of notes-app-sample is available here and the working application is available here.

I hope these sample applications give you some ideas about how to use Breeze with your MEAN apps.

Game Graphics with CutJS

10 Apr 2014 | By Alex Young | Comments | Tags html5 graphics 2d games
CutJS demos and examples.

CutJS (GitHub: piqnt/cutjs, License: MIT) is a new game graphics library by Ali Shakiba. It’s aimed at 2D graphics for cross-browser development, with support for desktop and mobile browsers.

The API is jQuery inspired, but because it works with the Canvas the author has introduced an interesting way of styling elements called “pinning”:

A CutJS app consists of a tree of nodes, each node is pinned (transformed) against its parent and have zero, one or more image cutouts. Image cutouts comes from either image textures or Canvas drawing.

Each rendering cycle consists of ticking and painting the tree. On ticking nodes adjust themselves to recent updates and then on painting each node transforms according to its pinning, pastes its cutouts and then delegates to its children.

Cut “apps” are created by calling Cut with a function, and then textures can be added and manipulated with tween animations and events.

// Create new app
Cut(function(root, container) {
  // Subscribe to Cut.Mouse
  Cut.Mouse(root, container);

  // Set view box
  root.viewbox(500, 300);

  // Create an image node
  Cut.image('base:box').appendTo(root)
    // on mouse click on this node
    .on(Cut.Mouse.CLICK, function(ev, point) {
      // Tween scale values of this node
      this.tween().clear().pin({
        scaleX: Math.random() + 0.5,
        scaleY: Math.random() + 0.5
      });
      return true;
    });
});

// Register an image texture
Cut.addTexture({
  name: 'base',
  imagePath: 'base.png',
  cutouts: [
    { name: 'box', x: 0, y: 0, width: 30, height: 30 }
  ]
});

There’s a cool Asteroids game example that shows off some of the main features of the library.

Node Roundup: npm and Heartbleed, sipster

09 Apr 2014 | By Alex Young | Comments | Tags node modules npm audio telephony voip

npm and Heartbleed

The npm blog has an article about npm and Heartbleed:

We started patching machines within 30 minutes of the revelation of the bug, and our last vulnerable machine was patched at 7.30am Pacific today.

There has been no evidence so far that our keys were compromised during this period, but nevertheless we are regenerating all our SSL keys anyway and will be rolling them out over the next couple of days (we are very cautious about testing and rolling out new certs since an earlier incident in which we broke a lot of older npm clients while doing so).

sipster

Brian White sent in sipster (GitHub: mscdex / sipster, License: MIT, npm: sipster), a pjsip binding for Node. This is the basis for the SIP driver used by Asterisk 12+. He hasn’t yet been able to get a working build environment set up for Windows, but it should work for Unix systems.

Here’s a list of what Brian says it can do so far:

  • Make and receive calls
  • Play either individual or a playlist of wav files (ulaw, alaw, or pcm)
  • Record audio to wav file (ulaw, alaw, or pcm)
  • Hook up audio streams from different calls (e.g. create your own conference or record a mix of streams to wav)
  • Adjust volume levels of audio streams
  • Detect/Send DTMF digits
  • Hold/un-hold
  • Call transfer

The API is event based – for example: call.on('dtmf', cb), and I think the C++ binding is a cool example of a Node native module: src/binding.cc.

AngularJS Localization

08 Apr 2014 | By Alex Young | Comments | Tags ui libraries AngularJS

Sebastian Tschan, also known as blueimp, is the author of the hugely popular jQuery-File-Upload project. It turns out he also writes AngularJS modules. His recent AngularJS project is dedicated to localization, and works well with a Grunt task that builds locales:

By running grunt locales:build you can get a set of JavaScript locale files that can be used to help translate content.

The basic angular-localize directive is used by adding the localize attribute to a tag. The text in the element will be used as the translation key, but you can use localize="key" to specify the key instead, which is useful if the final content hasn’t yet been copy edited.

The localize directive also observes data-* attributes and passes them as objects to translation functions, so data can be inserted into text dynamically.

There’s also a localize service for translating text in your JavaScript code, and there’s even a localizeFactory for creating your own attribute-based localize directives.

Avow-CI

07 Apr 2014 | By Alex Young | Comments | Tags frameworks ui libraries microsoft
Avow-CI.

I haven’t had good experiences with continuous integration systems. They seem to work fine for a few months until they go senile and I have to nuke and reinstall them. Kent Safranski sent in Avow-CI (GitHub: Fluidbyte / avow-ci, License: MIT), an open source CI server that’s built on Node and MongoDB – hopefully this one will be different!

Avow supports Git web hooks, so you can automatically run tests when commits are pushed. It can also be configured to build a specific branch, and allows manual builds to be run.

To add a project to Avow you’ll need to add an avow.json file to the project’s root directory. This describes the build process as an array of tasks. Tasks are run with require('child_process').spawn, so you could technically trigger anything – I’d like to try it with xcodebuild if I have time.

Sometimes I wish CI servers were just cron jobs that check for a non-zero exit code, but I might be able to learn to like a simple RESTful web application if it can run for a few months without exploding. The fact Avow accepts an array of commands to run is nicely simple and flexible, but I’m not sure I like the idea of having to add an avow.json file to my projects.

One thing I like about Avow is the structure of the code: the “models” are just properties on module.exports, and the HTTP routing layer is also super simple. You should take a look if you make Node web applications.

JavaScript OCR

04 Apr 2014 | By Alex Young | Comments | Tags ocr libraries emscripten
What should happen.

Konrad Dzwinel sent in a JavaScript OCR demo. It uses getUserMedia to get images from the camera, glfx.js and JCrop for user-driven image correction, and ocrad.js to handle the character recognition.

The Ocrad.js demo managed to recognise the text in my sample image. I noticed it didn’t work with white on black text – it had to be inverted for the correct text to be recognised.

Ocrad.js

Ocrad.js is an Emscripten-based translation of Ocrad by Antonio Diaz Diaz. Kevin Kwok, who put together Ocrad.js, also ported GOCR to JavaScript with Emscripten as gocr.js.

GOCR was started by Joerg Schulenburg, but has had other contributors since the original release back in 2000. Kevin compares both libraries and his experiences getting them running in JavaScript:

Anyway, I tried to compile GOCR first and was immediately struck by how easy and painless it had been. I was on a roll, and decided to do Ocrad as well. It wasn’t particularly hard- sure it was slightly more involved but still hardly anything.

He also mentions Tesseract, which is a popular OCR system but also widely known to be very large:

In fact, what’s absolutely stunning is the sheer universality of Tesseract. Just about everything which claims to have text recognition as a feature is backed by it. At one point, I was hoping that Mathematica had some clever routine using morphology and symbolic new kinds of sciences and evolved automata pattern recognition. Nope! Nestled deep within the gigabytes of code lies the Chuck Testa of textadermies: Tesseract.

I thought Konrad’s demo was cool – being able to edit the brightness, contrast, and crop the image was a nice use of client-side technology. However, so far I’ve had the problem Kevin mentioned: occasional blocks of nothing, or seemingly random text, then suddenly excellent results.

Introducing WinJS

03 Apr 2014 | By Alex Young | Comments | Tags frameworks ui libraries microsoft
The WinJS documentation.

WinJS (GitHub: winjs / winjs, License: Apache 2.0) is a new UI-oriented library from Microsoft for developing cross-platform applications with JavaScript.

Microsoft have been pushing WinJS applications for a while as Windows 8 apps that are written with JavaScript instead of what we typically think of as .NET programming languages. This library is a set of UI controls that support desktop and mobile devices, and also some modern JavaScript APIs for things we’ve come to expect: promises, networking, data binding, and templates.

The UI style fits in with Windows 8, and although WinJS applications should run in modern browsers, there’s talk of specific support for Windows Phone 8 and other Microsoft platforms in the future.

There’s an announcement post on the Microsoft News Center:

Today we’re also announcing that Microsoft Open Technologies has brought the Windows Library for JavaScript (WinJS) cross-platform apps and is open sourcing it under the Apache 2.0 license. Find the source code on GitHub. Use this powerful Windows development framework to build high-quality web apps across a variety of browsers and devices beyond Windows, including Chrome, Firefox, Android, and iOS.

I’ve been running examples on try.buildwinjs.com/ to get a feel for the API style, and it makes heavy use of promises and traditional OO wrappers:

WinJS.Binding.processAll(document.querySelector('#basicBindingOutput'), bindingSource)
  .done(function() {
    WinJS.log && WinJS.log('Binding wireup complete', 'sample', 'status');
  });
});

Some corners of the UI widgets still need aesthetic attention – the date and time pickers don’t look particularly great on Chrome on my Mac. But the APIs seem consistent and similar to other popular open source projects.

If you’re looking to make Windows 8-style applications and love JavaScript, then this is definitely worth following. The added benefit is you can run these web apps in non-Microsoft browsers as well.

Node Roundup: Money and npm, Isaac Schlueter Interview, KOAN

02 Apr 2014 | By Alex Young | Comments | Tags node modules realtime npm

Nebulous Profit Meditations

Isaac Schlueter wrote a long article on the npm blog about how npm Inc. will make money. It has some hints about the future of advertising on npm:

In my opinion, a good example of advertising done very well is the hosting page on WordPress.org. The services offered are beneficial to WordPress users, and are offered in such a way as to avoid distracting from the core product. The focused curation increases the value, and provides a strong incentive for the advertised products to maintain their quality or risk losing their position. We will be pursuing similarly focused and curated advertising partnerships on the npm website, in ways that benefit our users as well as our technology partners.

And GitHub’s influence:

When I describe our plans to people, they often nod and say, “Oh, the GitHub model, ok.” I’m sure that “public for free, private costs money” isn’t new with GitHub. However, pursuing that kind of model, while at the same time acknowledging that coding is a social activity, really was a master stroke in the history of software development. I’m very thankful that they’ve helped pave the way for people to recognize this pattern.

Meet the Face Behind npm

The Modulus hosting company blog has an interview with Isaac, with some history prior to Node and npm:

At Yahoo!, I grew increasingly frustrated that I had to switch back and forth between PHP and JavaScript, and Google had just open sourced their V8 engine, so I started trying to seriously get into doing JavaScript on the server. I got involved with the K7 project, and started studying web servers in more detail. There was also SpiderApe, and v8cgi, and a bunch of other projects. Narwhal caught my eye, and I spent a bunch of time messing with that.

I seem to remember making IRC bots with Rhino and Java sockets, then Node came along and changed everything!

KOAN

KOAN (GitHub: soygul / koan) by Teoman Soygul is a full stack boilerplate that uses Koa, AngularJS, Node, and MongoDB. Unlike other similar projects, this one has WebSocket features baked in.

A KOAN app uses JSON-RPC for syncing data with the server, and the readme has details on how to deploy this to Heroku (using labs:enable websockets).

jQuery 1.11.1, 2.1.1, PositionCalculator, YModules

01 Apr 2014 | By Alex Young | Comments | Tags jquery plugins module-loaders

jQuery 1.11.1 Beta 1 and 2.1.1 Beta 1 Released

New jQuery betas are out. These are maintenance releases with bug fixes, including a tweak that helps create builds with custom names, so you can use a different name in AMD loaders like RequireJS.

PositionCalculator

PositionCalculator (GitHub: tlindig / position-calculator, License: MIT) by Tobias Lindig is a jQuery UI Position replacement:

This plugin will not manipulate any CSS settings or DOM-trees, it only calculate values. To be more exact, it calculates the difference of current position to target position and the overflow over boundary. Thus you are all paths open to implement the positioning according to your requirements. You can apply the new position by using top and left or using the css3 transform function or by setting margin. It is up to you.

YModules

Vladimir Varankin sent in YModules (GitHub: ymaps / modules) by Dmitry Filatov is an asynchronous modular loading system that works with Node and browsers.

The syntax looks like this:

modules.define(
  'jquery',
  ['loader'],
  function(provide, loader) {

  loader('//yandex.st/jquery/2.1.0/jquery.min.js', function() {
    provide(jQuery.noConflict(true));
  });
});

modules.define(
  'my-module',
  ['jquery'],
  function(provide, $) {
    function MyModule() { /* do something here */ }
    provide(MyModule);
  });

modules.require('my-module', function(MyModule) {
  // `MyModule` will be available here after
  // Its dependencies will be resolved and its `provide` will fire.
});

It has a feature that allows existing modules to be redeclared, which can help with component-based libraries:

modules.define('button', function(provide) {
    function Button() { /* our button's constructor */ });
    Button.prototype.doAction = function() {};

    provide(Button);
});

// on the end user's space we could redefine the same Button
modules.define('button', ['jquery'], function(provide, $, Button) {
  // We're declaring the same module "button",
  // so we have an access to the module's previous definition
  // through the last define's argument (`Button` here), which
  // is appended automatically and known as "previousModuleDeclaration"
  Button.prototype.doAnOtherAction = function() {};
  provide(Button);
});

modules.require('button', function(Button) {
  Button.doAction();
  Button.doAnOtherAction();
});

Building a Node OAuth2 Server

31 Mar 2014 | By Alex Young | Comments | Tags node oauth2 authentication

Most of you have probably written an OAuth2 client using Node. I’ve used the passport module for Express and found it worked very nicely. But what about creating an OAuth2 server?

Writing a server takes more work, but as long as you’re clear about the authorisation flows that you want to use then it’s certainly possible. Erica Salvaneschi wrote Building a Node OAuth2 server, a post about our experiences building an OAuth2 service for a commercial project we’re working on at Papers:

This article is a walkthrough of Papers’ test-driven implementation of an OAuth server using Node. We decided to go for what’s known as resource owner password flow and chose node-oauth2-server to build our server.

The sample code was written using test-driven development, and depends on Express, Mongoose, bcrypt, and Mocha and SuperAgent for testing. We’ve kept the issues open on the sample code so you can give us feedback, which we’re interested in seeing as we’re new to OAuth2.

13 Steps to AngularJS Modularization, codefront.io (discount inside!)

28 Mar 2014 | By Alex Young | Comments | Tags conferences events angularjs

13 Steps to AngularJS Modularization

Christopher Hiller is writing a three part series about writing modular AngularJS:

AngularJS is not a silver bullet. It doesn’t just magically generate maintainable and extensible apps. You might get lucky with a small app and write it from scratch elegantly and efficiently, using each of AngularJS’ features correctly, and maybe you even have 100% unit test coverage. Your app might do one thing, and do it flawlessly. There are steps you can take to improve your application and get it back in shape for easy development. That means quicker bug fixes, less bugs, and the faster implementation of new features. Taking some time to knock these out will save you from experiencing a lot of pain down the road.

He outlines 13 steps that you can follow to modularise your application. Some might seem obvious, like putting assets in the right directories, but it’s surprising how often people dump files all over the place. This guide might help you if you’ve created your first AngularJS project and want to make it tidier.

codefront.io

codefront.io is a conference taking place in Austria on May 10, 2014. Tickets start at €75 for students, and go up to €150 for tickets that include food and access to the after party.

24 speakers have been listed so far, including Monica Dinculescu from Google, Andy Hume from Twitter, Vitaly Friedman from Smashing Magazine, and Kevin Sawicki from GitHub. I also noticed Lena Reinhard, who is a core member of Hoodie, which is a cool open source project you should check out if you haven’t seen it before.

The organisers sent me a discount code, so if you buy tickets with DAILYJS you may be able to get €10 off your entry fee!

Tetris with WebSockets

27 Mar 2014 | By Alex Young | Comments | Tags games node websocket
Tetris with WebSockets.

A few weeks ago I ran an introductory Node workshop at Makers Academy:

Makers Academy is a highly selective, 12 week full-time programme that teaches web development in London. We accept only the top applicants onto the course for a rigorous programme that culminates with the graduation day when we introduce them to London’s top technology companies looking to hire entry-level developers.

The workshop had a 50 minute talk where I introduced Node, then we set the students a challenge: improve our Tetris game. The challenges started at basic UI improvements and ended at intermediate Node web development.

To make the game, I created a small Tetris game engine – using test-driven development, naturally. The idea behind the game and workshop was to get people thinking about what Node is good at, but we also had an ulterior motive: recruitment. We were struggling to hire a web junior web developer with Node skills, so Makers Academy provided us with a unique opportunity to talk to some enthusiastic new developers.

I’ve written a more detailed post about the workshop on Medium: An introductory Node workshop at Makers Academy. I enjoyed writing the game engine as a Node module, and it made me want to try making a bigger WebSocket powered game… (when my book is finished!)

Node Roundup: npm Search Ranking, shortest-route, prova

26 Mar 2014 | By Alex Young | Comments | Tags node npm modules testing

npm Search Ranking

Improved search results.

npm’s search results are now ranked by popularity:

Packages are now scored by a nifty new algorithm that takes into account the package’s popularity (i.e. number of stars and average weekly downloads over a month). The algorithm also does some proper word parsing (so you can actually find “socket.io” with the search “socket io”) and gives higher weight to things that match the search query in the package name and details.

The interface has been tweaked as well, so you can easily see how many downloads and starts a project has.

I was sceptical about the quality of the results, but I’ve recently been researching material for my book so I’ve been searching npm a lot, and generic searches now seem to get more useful results.

shortest-route

Shortest-route (GitHub: tarun29061990 / shortest-route, License: ISC, npm: shortest-route) by Tarun Chaudhary is a travelling salesman problem solver that you can install with npm.

It calculates the distance between cities using the Google Distance Matrix API, and accepts city descriptions as a pipe-separated list:

var shortestRoute = require('shortest-route');

shortestRoute.getShortPath('A|B|C', function(json) {
  console.log('data='+json);
});

Although you probably won’t need this for a project any time soon, I like the fact a hard problem is installable with npm. For more details, see Tarun’s blog post.

prova

Automatically running tests when files change.

I like tape by Substack – it’s easy to read and produces flexible test output. Azer also likes it, so he wrote prova (GitHub: azer / prova, License: GPL, npm: prova), a Node and browser test runner based on tape and browserify.

It has a built-in web application that uses watchify to automatically run tests when files change. That means you can edit code and see live results in a browser.

Slush: Streaming Scaffolds

25 Mar 2014 | By Alex Young | Comments | Tags gulp scaffolding

Slush

If you’ve been won over by Gulp, the streaming build system, then you’ve probably been wondering about scaffolding.

Slush (GitHub: klei / slush, npm: slush) takes Gulp’s streaming build concept and applies it to scaffolds, making it a Gulp-friendly Yeoman competitor.

The author, Joakim Bengtson, notes that it may take a while for the registry of available generators to update, so until then you can use the slushgenerator tag on npm.

Slush itself is fairly simple – it’s basically an interface for finding and installing generators. Like Gulp, it’s based on liftoff, the command-line tool authoring module.

Isometric Graphics with Obelisk.js

24 Mar 2014 | By Alex Young | Comments | Tags graphics libraries
Obelisk.js.

Obelisk.js (GitHub: nosir / obelisk.js, License: MIT) by Max Huang is a library for building isometric graphics.

With the simple and flexible API provided by this engine, you can easily add isometric pixel element like brick, cube, pyramid onto HTML5 canvas. Obelisk.js strictly follows the pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.

Max has written some cool examples, like a GIF to isometric convertor and text rendering.

Isometric text example.

There are also tutorials that introduce the basics, like building cubes and other primitives.

To draw a cube, you need to get an instance of a dimension, colour, and the Cube primitive. The library uses its own wrappers for colours and dimensions to set up the right co-ordinates and shading for the isometric effect:

var point = new obelisk.Point(270, 120);
var pixelView = new obelisk.PixelView(canvas, point);

var dimension = new obelisk.CubeDimension(120, 200, 60);
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY);
var cube = new obelisk.Cube(dimension, color);
pixelView.renderObject(cube);

The base class is obelisk.AbstractPrimitive, which Cube inherits from. There’s a demo/ directory with more examples.