BindingJS, 2D Space Shooter Part 2

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

BindingJS

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

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

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

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

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

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

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

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

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

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

npm’s Registry Architecture

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

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

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

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

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

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

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

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

Mongeese

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

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

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

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

Synaptic

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

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

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

Morearty.js, ngDroplet

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

Morearty.js

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

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

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

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

ngDroplet

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

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

Linting Backbone Apps, Hybrid Mobile Performance

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

eslint-plugin-backbone

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

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

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

Hybrid Mobile Performance with browser-perf

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

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

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

Angular Custom Element, AngularJS in Depth

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

Angular Custom Element

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

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

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

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

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

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

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

AngularJS in Depth

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

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

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

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

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

Omniscient.js

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

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

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

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

Path.js Update

Path.js

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

This is what the tree chart looks like:

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

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

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

Coinbolt Cat Shop

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

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

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

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

node-android

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

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

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

typed-morph

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

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

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

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

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

stdio

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

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

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

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

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

Make Slicker Progress Bars with ProgressBar.js

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

ProgressBar.js

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

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

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

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

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

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

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

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

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

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

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

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

Compare Code Similarity with jsinspect

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

jsinspect

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

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

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

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

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

Google's Cloud Platform Library

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

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

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

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

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

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

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

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

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

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

Angular Chart

Angular Chart

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

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

pragmatic-angular

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

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

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

ng-boilerplate-app

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

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

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

Nightmare

Nightmare

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

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

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

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

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

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

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

Prototypes

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

Here are some examples:

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

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

node-libpq and node-pg-native

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

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

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

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

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

It’s really that simple!

Definitive Guide to Generators, Golden Layout

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

Definitive Guide to Generators

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

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

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

Golden Layout

Golden Layout

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

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

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

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

RWDPerf, respimage

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

RWDPerf

RWDPerf report

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

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

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

respimage

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

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

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

Slideshow, Unity and JavaScript

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

Slideshow

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

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

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

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

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

How to Make a 2D Space Shooter in Unity

Unity

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

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

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

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.