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.

fixmyjs, Front-end Development Tools

02 Oct 2014 | By Alex Young | Comments | Tags modules libraries lint design chrome

fixmyjs

fixmyjs

Sindre Sorhus sent in fixmyjs (GitHub: jshint / fixmyjs, License: MIT, npm: fixmyjs) by Josh Perez. It automatically rewrites JavaScript based on linting rules. There’s a command-line tool available through npm, and a web version.

It supports things like semi-colon insertion, case correction, missing curly braces, and removes debugger statements. Sindre said Addy Osmani wrote an article about it, where he points out some important things that fixmyjs can get wrong:

As mentioned earlier, the current version of the module uses Escodegen, which rewrites your source and doesn’t take into account original styling information (i.e it will strip it). This makes it easier for the author to support complex new rules as they operate with an AST rather than relying on less reliable approaches like string replacement.

You can avoid this by using the legacy option.

If you use Atom, then you can install Sindre’s Atom plugin for fixmyjs. It uses legacy by default, and can be run on a whole file or a selection.

56 Expert’s Favourite Front-end Tools

Bauke Roesink sent in a big list of front-end development tools, picked by 56 experts. Coincidentally, I happened to notice Sindre Sorus is on the list.

Several people picked Chrome, probably because the development tools have progressed so much over the last year or so. It’s increasingly common to see people testing design ideas or puzzling over CSS quirks by editing HTML and CSS in the inspector. I’ve recently started using the device emulation tab a lot for responsive designs as well.

Node Roundup: Node 0.11.14, svgexport, node-webkitgtk

01 Oct 2014 | By Alex Young | Comments | Tags modules libraries node

Node 0.11.14

libuv

Node 0.11.14 has been released, with updates for uv, http_parser, npm, openssl, and v8.

There seem to be fixes for almost every core module: cluster has been reverted to the 0.10 setupMaster behaviour, console.dir accepts options, events now outputs the event that is leaking – there are loads more changes that you should be aware of before updating.

The version of uv included in 0.11.14 is rc1. Also, when I went to check the recent commits for uv I noticed it now has a cool dinosaur/unicorn logo.

svgexport

svgexport (GitHub: shakiba / svgexport, npm: svgexport) by Ali Shakiba is a command-line tool for converting SVG files to PNG, JPEG, and PDF.

It’s based on PhantomJS, and the author has been using it to automatically convert icons for iOS and Android projects. This seems like a cool use for Node/Gulp/Grunt as part of a non-web-native build chain that I hadn’t thought of before.

node-webkitgtk

node-webkitgtk (GitHub: kapouer / node-webkitgtk, License: MIT, npm: webkitgtk) by Jérémy Lal is a set of webkitgtk bindings for Node. The API is chainable, so you can do things like this:

WebKit().load('http://github.com').png('github.png').pdf('github.pdf')

It’s designed to be used headlessly, so it’s useful for things like generating website thumbnails, or maybe integration testing but I haven’t tried that.

HTMLjs, Building an Angular List

30 Sep 2014 | By Alex Young | Comments | Tags angularjs libraries html mvvm

HTMLjs

HTMLjs (GitHub: nhanaswigs / htmljs, License: MIT) by Nhan Nguyen is a data-binding and template rendering library. It supports browsers back to IE7. Rather than using declarative HTML, it’s more JavaScript-driven. For example, given a simple input field, you could bind a validation handler to it like this:

var username = html.data('')
  .required('Username is required.')
  .maxLength(15, 'Max length for username is 15 characters.');

html('#username').input(username);

I don’t think declarative templates are a bad thing, but the detail most people consistently get wrong with Knockout is incorrectly binding prototype methods or values. This API circumvents that by relying on simpler markup. The author has provided lots of examples so you can get a feel for how it works without downloading it.

Building an Angular List: Using ng-repeat

Building an Angular List: Using ng-repeat is a tutorial by David Posin about how to use ng-repeat. It’s a simple introductory tutorial, and David includes a screencast so you can see exactly how it works.

I noticed David uses the web-based Cloud9 IDE, so you can even follow along without installing anything if you’re really new to Angular.

js13k Winners, BottleJS

29 Sep 2014 | By Alex Young | Comments | Tags games events di libraries modules

js13k Winners

Pest Control

The js13k winners have been announced. First place went to Pest Control: Weasels by Siorki, which is like Lemmings in reverse – instead of saving little critters you have to kill them. It’s a surprisingly fun game!

Felipe Alfonso came second with Extreme Mini Massacre, and Aurélio Santos came third with ap11. This is like a simplified GTA 1 clone, all in 13k!

There are 129 games listed on the site. Most genres are covered, and there are even some pretty unique ones like Whistleblower which allows you to use the microphone to whistle different pitches to defeat enemies.

The js13k participants get t-shirts and 3.5” diskettes that contain all of the entries. Just to show off how small browser games can be… For those of us without disk drives, however, the source is at js13kGames on GitHub.

BottleJS

BottleJS (GitHub: young-steveo / bottlejs, License: MIT, Bower: bottlejs, npm: bottlejs) by Stephen Young is a dependency injection micro container.

It’s inspired by the AngularJS API. You can register services with bottle.service('Service', Service), and then construct them with bottle.container.Service. Bottle supports middleware, so you can inject functions that intercept requests for providers just before they’re made for the first time.

If you’re not using AngularJS and have trouble keeping larger applications maintainable and testable, then something like Bottle might help improve your application’s structure. The readme has examples and API documentation to get you started.

verb: A CAD Library for the Web

26 Sep 2014 | By Alex Young | Comments | Tags webgl graphics libraries modules

Peter Boyer shared two modules related to 3D graphics: Flood, a visual programming language, and verb, a library for working with NURBS surfaces.

Flood (GitHub: pboyer / flood, License: MIT) behaves a bit like a 3D modelling application. It uses a Scheme interpreter that’s written with JavaScript, with immutable data and first order functions.

The beta application allows you to sign in with a Flood account, Google+, or Facebook. You can add nodes that perform arithmetical operations, shapes, and even functions.

Flood

It’s built with Grunt and Bower, and uses libraries like three.js and Bootstrap.

Peter’s other project is verb (GitHub: pboyer / verb, License: MIT), a library for creating and manipulating NURBS surfaces. It works with browsers and Node and supports advanced tools like derivative evaluation, adaptive tessellation, and intersection.

The examples include things like arcs, Béziers curves, and various extrusions. You can rotate the examples if you click and drag.

NURBS are used in CAD, I don’t think they’re particularly popular for game graphics, so presumably Peter intends to use this with the Flood project.

PrototypeJungle, Slick, Cash

25 Sep 2014 | By Alex Young | Comments | Tags modules libraries browser svg

PrototypeJungle

PrototypeJungle (GitHub: chrisGoad / prototypejungle, License: MIT) by Chris Goad is a tree-based object model and inspector. The inspector makes all of the underlying data structures visible, so you can explore and manipulate it.

PrototypeJungle

For example, this is a bar chart, displayed with SVG. You can drill down into each bar and edit things like the bar height, colour, stroke, and so on.

Elements of the model can be serialized and saved in files, and represent things of various complexities, from simple infographic marks such as bars or bubbles, to axes or legends, to complete charts.

Often, an element serves as a prototype (in the general sense). For example, consider a prototypical bubble or bar which is instantiated once for each data point. When an instance of an element is wanted, a special variety of deep copy is made which inherits as appropriate from the original using JavaScript’s prototype formalism. Subsequent adjustments to the original will be inherited by all of the instances, at least in those aspects that have not been overriden.

Chris says it’s at an early stage, but I think it’s a pragmatic look at data visualisation that readers might find interesting.

Slick, Cash

Ken Wheeler sent in some client-side projects that he’s been working on. One is Slick (GitHub: kenwheeler / slick, License: MIT), a carousel that supports a huge amount of things: CSS3 animations when available, touch and mouse gestures, infinite loop, autoplay, adaptive height, lazy loading, fade effects, and it’s responsive as well.

It has an API so you can dynamically add and remove slides. It depends on jQuery 1.7+.

Ken’s other project is cash, a jQuery alternative. It supports lots of methods from jQuery’s API, and is written using separate modules so the source is quite easy to follow. The build system is Gulp. You might find it interesting if you like using or writing small libraries that don’t depend on jQuery and want to see how DOM stuff works without legacy cruft.

Node Roundup: npm 2.0, nvm for Windows, xtpl

24 Sep 2014 | By Alex Young | Comments | Tags modules libraries node npm windows templating

npm 2.0

npm 2.0 has been released, and the announcement post has lots of details on the fixes it includes and the project’s evolving release process. One major change is run-script now accepts arguments:

In npm@2.0.0, Ben changed npm run-script to allow you to pass arguments into scripts. That’s a breaking change. It’s as simple as that. Think of npm 2 as a step on the road towards getting npm right with semver. (There will be more. npm 3 will be out before the end of the year.)

The npm blog also has a post about multi-stage installs:

Multi-stage installs will touch and improve all of the actions npm takes relating to dependencies and mutating your node_modules directory. This affects install, uninstall, dedupe, shrinkwrap and, obviously, dependencies (including optionalDependencies, peerDependencies, bundledDependencies and devDependencies).

This post mentions that npm should be getting progress bars soon, and changes that bring it closer to supporting transactional installation.

nvm for Windows

Apparently, most Node version managers for Windows use batch files, so Corey Butler decided to try a different approach:

This version of nvm has no dependency on node. It’s written in Go, which is a much more structured approach than hacking around a limited .bat file. It does not rely on having an existing node installation. Plus, should the need arise, Go offers potential for creating a Mac/Linux version on the same code base with a substantially easier migration path than converting a bunch of batch to shell logic.

You can get the source from GitHub at coreybutler / nvm, and he’s got binary releases as well.

Corey also sent something called Fenix Web Server (GitHub: coreybutler / fenix, License: GPL), which is a static desktop web server powered by node-webkit:

You can quickly fire up/kill web servers through a GUI or the command line. It has push-button sharing capabilities (localtunnel). There’s also a visual webhook receiver for viewing incoming requests, which also leverages localtunnel.

I like the idea of being able to easily create a static server and then share content with a tunnel.

xtpl

Yiming He sent in xtpl (GitHub: kissyteam / xtpl, License: MIT, npm: xtpl), an Express/Koa wrapper for eXtensible Template Engine. This template language is similar to others like ejs, but also allows you to add your own synchronous or asynchronous commands.

You can actually add commands to the template language, and they can be inline, block, and asynchronous. Here’s an example:

XTemplate.addCommand('xInline', function(scope, option, buffer) {
  buffer = buffer.async(function(newBuffer) {
    setTimeout(function() {
      newBuffer.write(option.params[0] + 1).end();
    },10);
  });

  return buffer;
});

The API documentation has more examples, and xtpl’s readme has some Koa samples as well.

Automatically Start Development Servers with Katon

23 Sep 2014 | By Alex Young | Comments | Tags modules libraries node

Katon (GitHub: typicode / katon, License: MIT, npm: katon) by Typicode is a tool for managing development servers. You can use it with client-side projects, Node applications, and even other server-side technologies.

To use it, npm install -g katon and then run sudo katon install && katon start. This sets up the daemon that will monitor your development servers.

Then all you need to do is navigate to one of your projects and tell Katon how it starts. For example, katon add 'npm start', or katon add 'grunt server'.

The project is inspired by Pow and actually started life as a third-party tool for Pow.

Once you’ve set up a project you can get to it using a .ka subdomain. Pow uses .dev, but the author of Katon switched to .ka because .dev is a proposed TLD.

Here’s Katon running with Express:

Katon, Express

And Typicode sent a screenshot of Rails as well:

Katon, Express

Katon will appeal to those of you that switch between projects regularly. It’s also useful if you run web applications that depend on several microservices that you want to run locally.

On a related note, I often use localtunnel for sharing in-development work with people who are outside my network.