Node Roundup: Faucet, Node Compiler, Tumblr

08 Jan 2014 | By Alex Young | Comments | Tags node modules testing tap

Faucet

Faucet (GitHub: substack / faucet, License: MIT, npm: faucet) by Substack is a human-readable TAP summariser. You can pipe TAP text into the faucet command-line script, and it’ll generate prettier yet concise output.

If you type faucet, JavaScript files in test/ will be executed using tape and then automatically piped through faucet.

Substack has created some nice animated gifs that show what the results look like under various conditions. One of them even shows Mocha using tap through the -R tap command-line option.

Node Compiler

Node Compiler

Sonny Lazuardi sent in Node Compiler (GitHub: sonnylazuardi / node-compiler, License: MIT), a web-based tool for building C++. It uses g++ with execSync, wrapped up with an Express-based API.

The web interface uses the Ace editor, which supports traditional editor features like syntax highlighting. I think it’s quite an audacious idea, but it might be a little dangerous to leave on public servers.

Tumblr

node-tumblr (GitHub: meritt / node-tumblr, npm: tumblr) by Alexey Simonenko is a Tumblr API wrapper for Node. It supports OAuth, and allows you to query posts, links, answers, and the other resources Tumblr provides.

Gulp, bLazy, grunt-bowercopy

07 Jan 2014 | By Alex Young | Comments | Tags bower grunt build images node modules

Gulp

Gulp

Last night I was reading a post about Gulp by Martin Genev. Martin traces the appearance of Gulp into the JavaScript community, through GitHub comments and Tweets.

Apparently Gulp is a new build system made by Fractal, a Node consultancy with several popular Node modules under their collective belts.

Gulp is built around streams, so it feels more like idiomatic Node. You can pipe files through processors, so if you had a set of LESS files you could convert them into CSS with something like gulp.src('less/*.less').pipe(less()).pipe(minify()).pipe(gulp.dest('styles/screen.css')). It supports tasks as a unit of work, and tasks can have names and dependencies.

The project has 13 contributors already – most of the work is by Eric Schoffstall who you’ll see all over Fractal’s other projects. It has tests written with Mocha, and some decent documentation already.

bLazy

bLazy (GitHub: dinbror / blazy) by Bjoern Klinggaard is a lazy loading image script. It doesn’t have any dependencies, and supports callbacks for loading failures:

var bLazy = new Blazy({
  success: function(ele) {
  },
  error: function(ele, msg) {
    if (msg === 'missing') {
      // Data-src is missing
    } else if (msg === 'invalid') {
      // Data-src is invalid
    }
  }
});

There’s a blog post about bLazy that documents the full API.

grunt-bowercopy

I seem to waste a lot of time detangling Bower dependencies to make my client-side builds more efficient. Timmy Willison may have solved this with grunt-bowercopy (GitHub: timmywil / grunt-bowercopy, License: MIT). It allows you to specify where dependencies should go, and can reduce the amount of duplication when creating builds.

It looks like it works the way I expect Bower dependency management to work in Grunt, so I’m going to go back and look at my Grunt/Bower projects to see if I can clean then up with this.

Lukis, Backbone.Controller, lrDragNDrop

06 Jan 2014 | By Alex Young | Comments | Tags node modules testing types

Lukis

Lukis (GitHub: keripix / lukis, License: MIT) by Keripix is an experimental image editor, built with Twitter’s Flight and Fabric.js.

It’s event driven, so each main drawing component is nicely decoupled. This is based on Flight’s API, where behavior is mapped to DOM nodes.

Backbone.Controller

Backbone.Controller (GitHub: artyomtrityak / backbone.controller, License: MIT) by Artyom Trityak is a Backbone controller that supports declarative routes. It makes Backbone feel more like traditional MVC, which may appeal to you if you’re brainwashed by other MVC frameworks.

Artyom has included some documentation showing how to bind routes using Backbone.Controller.extend, and there’s also a RequireJS AMD snippet so you can get started quickly.

lrDragNDrop

lrDragNDrop (GitHub: lorenzofox3 / lrDragNDrop, License: MIT) by Laurent Renard is an AngularJS module for managing collections of items using drag and drop.

You can use it as a directive, and load it with angular.module('myApp',['lrDragNdrop']). Items can be dragged from one collection to another, copied, and sorted.

Orbit Viewer, Earhorn

03 Jan 2014 | By Alex Young | Comments | Tags webgl space instrumentation debugging

Orbit Viewer

Orbit Viewer

Orbit Viewer is a Chrome Experiment by Kevin Gill that helps visualise the orbits of comets and satellites. You can watch the famous comet Shoemaker–Levy 9, or see the current position of the International Space Station. It should work with most WebGL capable browsers.

A sort of “Where are they now” for spacecraft and comets: Check out realtime positions, along with historical and projected flight paths of our solar system’s trailblazing spacecraft and comets. All in a zoomable/rotatable 3D interface. Using historical and real-time trajectory information for NASA’s JPL Horizons system, and in-browser WebGL and Three.js rendering.

Earhorn

Earhorn (GitHub: omphalos / earhorn, License: MIT) by “omphalos” is a library for instrumenting JavaScript. You pass earhorn$ a label and a function, and then you can view the function as the values change.

The mouse example shows how this works: the source for a jQuery mousemove listener is displayed, and whenever you move the mouse the integer values for the current coordinates will be reflected in real time.

An iframe is used that loads the earhorn/index.html page which knows how to display an instrumented version of the function. Internally, Earhorn uses Esprima to generate an abstract syntax tree that is manipulated to allow the code to be observed.

It reminds me a little bit of the Watches feature in Light Table, and some of the recent improvements to WebKit Inspector.

Recipe for Express Configuration Files

02 Jan 2014 | By Alex Young | Comments | Tags node express configuration recipes

Express has a few helper methods that support configuration. There are three pairs of methods: get and set for setting values, enable and disable for toggling boolean options, and enabled and disabled for testing boolean options. Options can be set based on the current environment by using the configure method.

Here’s an example of these methods:

var express = require('express');
var app = express();
var assert = require('assert');

app.set('title', 'DailyJS');
assert.equal(app.get('title'), 'DailyJS');

app.configure('production', 'staging', function() {
  // 'emails' is an internal setting I've made up
  // It could be used to only send emails from certain environments
  app.enable('emails');
  assert(app.enabled('emails'));
});

app.configure('test', function() {
  app.disable('emails');
  assert(app.disabled('emails'));
});

The configure method is based on process.env.NODE_ENV, which is available in app.get('env'). If you access it through app.get you’ll see a default of 'development' rather than undefined. When you deploy your application you’ll want to make sure the NODE_ENV environmental variable is set to staging or production. How this is done is based on operating system or cloud provider – with Heroku it would be heroku config:add NODE_ENV=production.

These methods are useful, but sometimes you want to store settings in configuration files. It depends on the type of project you’re working on, but most of the commercial projects I’ve worked on required configuration files.

I use JSON as the format for these files because it’s easy to write and parse in Node projects. You don’t even need to use JSON.parse, you can just use require. I like to use a configuration file for each environment, so I usually end up with a directory like this:

config/development.json
config/production.json
config/test.json

You can load one of these files with require('config/development.json'), but you can go a step further by using an index.js file:

module.exports = {
  development: require('./development.json'),
  production: require('./production.json'),
  test: require('./test.json')
};

Now you can use var config = require('./config') elsewhere in your project. However, because process.env.NODE_ENV gets set, we can simplify that index.js file even further:

module.exports = require('./' + (process.env.NODE_ENV || 'development') + '.json');

Now require('./config') will return an object that contains the configuration for the current environment. I use this to do things like turn off AWS emails in my unit tests, but leave them on for the production system. By exploiting the design of Node’s module system you basically get configuration files for free.

This might not be the best solution for every project. The config module by Loren West supports YAML files, and nconf from flatiron is hierarchical – settings can be passed in as command-line options, from the environment, or from a file, and used based on precedence. It can also store settings in databases like Redis.

How do you configure your Express projects?

Node Roundup: 0.11.10, Ducky, Test-driving a Node.JS API

01 Jan 2014 | By Alex Young | Comments | Tags node modules testing types

Node 0.11.10

Node 0.11 is now pushing double figures. The three main dependencies have been updated (http_parser, uv, v8), and the core modules have a lot of fixes.

Ducky

Ducky (GitHub: rse / ducky, License: MIT, npm: ducky) by Ralf S. Engelschall is a library for querying and validating objects.

The ducky.select method accepts an object and a “path” – this path is based on dot notation. The ducky.validate method accepts an object and a string representation of its types. The validation syntax is based on JSON with some regular expression hints.

Ralf has included tests based on Chai, and you can also use this module in client-side projects.

Test-driving a Node.JS API

Test-driving a Node.JS API by Joris Ooms is a blog post about setting up a test-driven project based on Express, SuperTest, and Mocha.

At the end he says:

Often, routes are locked behind authentication (with, for example, PassportJS). We can test these just as easily with supertest, through its lower-level module superagent. I will cover this in a future blog post.

I think he’s going to talk about the technique I use for testing my web applications, where authentication is handled with SuperAgent and cookies. It’s a bit awkward to set up, so it’ll be interesting to see what he says.

AngularJS Roundup: ngDialog.js, ocLazyLoad, angular-validation

31 Dec 2013 | By Alex Young | Comments | Tags angularjs validation CoffeeScript modal ui

People keep sending me AngularJS scripts to write about, so I’ve collected a few together to start a probably infrequent AngularJS Roundup. This week we’ve got three scripts to talk about, and the first is ngDialog.js.

ngDialog.js

ngDialog.js (GitHub: likeastore / ngDialog, License: MIT) by Dmitri Voronianski is a modal dialog and popover provider. You can load it and display a dialog like this:

var app = angular.module('exampleApp', ['ngDialog']);

app.controller('MainCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {
    ngDialog.open({ template: 'popupTmpl.html' });
  };
});

The markup for the dialog can be a string, or loaded from a template:

<script type="text/ng-template" id="templateId">
  <h1>Template heading</h1>
  <p>Content goes here</p>
</script>

You can even use the ng-dialog directive. The project comes with two default themes, and you can use one of those to get started creating your own. The default theme has CSS animations and media queries.

ocLazyLoad

ocLazyLoad (GitHub: ocombe / ocLazyLoad) by Olivier Combe is a module for lazy loading dependencies in AngularJS. It’s a service provider that allows you to load files with promises, like this:

$ocLazyLoad.load({
  name: 'TestModule',
  files: ['testModule.js']
}).then(function() {
  console.log('done');
});

The blog post explains how the whole thing works, with detailed examples and explanations of how AngularJS loads modules.

Since the modules can only be loaded on startup and the application can only be launched using the ng-app directive, if we can find the app module, we can get the complete list of all loaded modules and dependencies.

Angular Validation

Angular Validation (GitHub: huei90 / angular-validation) by Huei Tan is a set of form validation directives. It supports various validation methods – watch, blur, or submit, so you can show errors when it makes sense for your application.

It has some built in validation types, but you can add your own in JavaScript by loading the validation provider, and then adding new validation “expressions”. Expressions are loaded based on the validator attribute. The readme has an example of how to do this, with the huei validator.

AngularJS with CoffeeScript

Finally, Elad Ossadon sent in an article about making AngularJS classes work better with CoffeeScript: Angular.js CoffeeScript Controller Base Class.

It’s a fairly short post with a base class snippet and an example controller module.

Mean, Survey Visualisations

30 Dec 2013 | By Alex Young | Comments | Tags express node mean survey

Mean

You want to build a web application, and you need a database. You can write JavaScript, but you’re not yet completely comfortable with Node. What do you do?

I wrote about Getting MEAN recently, a book about building web applications with MongoDB and Express. If you’re interested in this approach, a quick way to get started is Mean (GitHub: linnovate / mean, License: MIT), a module that collects everything you need together. It even includes AngularJS and Bootstrap, so you get a solid interface out of the box.

If you already understand the MVC pattern, and use AngularJS, then this is definitely a quick way to get started. It’s also a handy way of getting experiments up and running quickly, which is a great way to learn.

Survey Visualisations

Survey Visualisations

Konrad Dzwinel sent in these visualisations of the DailyJS survey. It allows you to see how answers to one question map to another. This is cool because I wanted to compare “What type of JavaScript do you write?” to “Where do you use JavaScript?” – I was expecting to see a lot of people writing side projects for the server at home, but the split is pretty even.

The visualisations are powered by D3.js, and Bootstrap has been used as well.

JavaScript MESS and the Internet Archive

27 Dec 2013 | By Alex Young | Comments | Tags games emulators emscripten

Atari 2600

if you program and want any longevity to your work, make a game. all else recycles, but people rewrite architectures to keep games alive. – Why the Lucky Stiff

Archive.org has a section dedicated to software. Inside you’ll find The Internet Archive Console Living Room, which has details on some major games consoles from the late 70s and 1980s, including the Atari 2600 and the ColecoVision.

The great thing about this project is they’re trying to keep old software alive. You can browse through titles and play them in a browser. This is powered by jsmess (GitHub: jsmess / jsmess), an Emscripten-based emulator derived from MESS:

The JAVASCRIPT MESS project is a porting of the MESS emulator, a program that emulates hundreds of machine types, into the JavaScript language. The MESS program can emulate (or begin to emulate) a majority of home computers, and continues to be improved frequently. By porting this program into the standardized and cross-platform JavaScript language, it will be possible to turn computer history and experience into the same embeddable object as movies, documents, and audio.

Running a game binary requires a suitable BIOS, but the groundwork for lots of systems has been added to MESS:

MESS and MAME were started over a decade ago to provide ubiquitous, universal emulation of arcade/gaming machines (MAME) and general computer hardware (MESS). While specific emulation implementations exist that do specific machines better than MAME/MESS, no other project has the comprehensiveness and modularity. Modifications are consistently coming in, and emulation breadth and quality increases over time. In the case of MAME, pages exist listing machines it does not emulate.

Over the last two years there’s been a flood of new browser-based emulators, supporting everything from the Amiga to the Game Boy Advance. Part of what makes these project possible is recent technologies like Canvas, WebGL, WebAudio, and FileReader. But even seemingly less buzzwordy APIs like typed arrays can help get old games running smoothly.

Node Roundup: 0.10.24, irc-message-stream, 100% Uptime

26 Dec 2013 | By Alex Young | Comments | Tags node modules security talks slides irc

Node 0.10.24 Released

Node 0.10.24 was released soon after 0.10.23. It updates uv and npm, but presumably this release was due to CVE-2013-6639 and CVE-2013-6640. These are security related patches for V8:

… allows remote attackers to cause a denial of service (out-of-bounds read) via JavaScript code that sets a variable to the value of an array element with a crafted index

If you run this example in Node 0.10.22 you should see a segfault.

var size = 0x20000;
var a = new Float64Array(size);
var training = new Float64Array(10);

function store(a, index) {
  var offset = 0x20000000;
  for (var i = 0; i < 1; i++) {
    a[index + offset] = 0xcc;
  }
}

store(training, -0x20000000);
store(training, -0x20000000 + 1);
store(training, -0x20000000);
store(training, -0x20000000 + 1);

for (var i = -0x20000000; i < -0x20000000 + size; i++) {
  store(a, i);
}

irc-message-stream

irc-message (GitHub: expr / irc-message, License: BSD 2-Clause, npm: irc-message) by Fionn Kelleher is a small parser that outputs objects based on RFC1459. The author has used it to create irc-message-stream, which is a transform stream.

That means you can take a socket connection to an IRC server and pipe it through your own stream handlers:

var net = require('net');
var MessageStream = require('irc-message-stream');
var messageStream = new MessageStream();

messageStream.on('line', function(line) {
  console.log('Raw line:', line);
});

messageStream.on('data', function(message) {
  console.log('Parsed message:', JSON.stringify(message));
});

var socket = net.connect(6667, 'irc.freenode.net');
socket.pipe(messageStream);

I think this is a great way to handle IRC in Node – taking advantage of the newer streams API seems a lot more idiomatic than other approaches that I’ve seen (and made!).

Towards 100% Uptime with Node

William sent in his slides for a talk called Towards 100% Uptime with Node. The slides cover the difficulties of handling uncaught exceptions in a cluster of Node processes, and ensuring that every request has a response, even if it’s to report an error.

One of the tips he mentions is to be able to generate errors on demand for development and staging. I do this in my tests – if critical paths are expected to throw exceptions, emit 'error' events, or return error objects to callbacks, then all of these eventualities should be hit as part of automated testing.

The Node applications I work on for my day job are hosted on Heroku, and I’ve found you have to be extremely careful with code that throws errors and causes the process to stop. Sometimes Heroku gets confused about the state of a process and won’t gracefully restart it, so a worker just hangs for an undefined amount of time. The way I stopped this was to fix all the bugs, which sounds like an obvious thing to say, but it took lots of log file archaeology. Coincidentally, Heroku’s default logging is inadequate, so you have to send logs to a syslog daemon somewhere, or a service like Loggly (which I preferred to Splunk).

2013 Recap

25 Dec 2013 | By Alex Young | Comments | Tags node

This year we saw Node 0.10 released, Bootstrap 3, and jQuery 2.0. People are getting increasingly excited about WebGL gaming, and client-side frameworks like AngularJS and Backbone.js are maturing and growing in popularity.

The highlight of 2013 for me was speaking at the Great British Node Conference. I’d been researching Node’s internals for the book I’m working on, so it felt like all that work culminated in a talk that got people thinking more about Node’s JavaScript and C++.

Over the next year I expect ECMAScript 6 to become more widely used. If you want to keep track of this standard, I find @esdiscuss to be the most digestible way to keep track of things.

Griswold

Happy holidays to everyone who reads DailyJS, and I look forward to writing more over the next year!

Switchery, circles

24 Dec 2013 | By Alex Young | Comments | Tags browser ui iOS graphs

Switchery

Switchery

Switchery (GitHub: abpetkov / switchery, License: MIT, bower: switchery) by Alexander Petkov is a checkbox replacement, inspired by iOS 7, complete with animations.

The basic usage is new Switchery(elem). You can pass extra options for the disabled state, the colour, and the animation speed.

Switchery is written using CommonJS modules, but Alexander builds a standalone version that doesn’t need require.

Circles

Circles

Circles (GitHub: lugolabs / circles, License: MIT) by Artan Sinani is a small script for creating circular graphs. It doesn’t have any dependencies, and can be used like this:

Circles.create({
  id:         'circles-1',
  percentage: 43,
  radius:     60,
  width:      10,
  text:       7.13,
  colors:     ['#D3B6C6', '#4B253A']
});

Read Only References, Getting MEAN

23 Dec 2013 | By Alex Young | Comments | Tags node books harmony es6

Creating Read-Only References

I was working on an API where the desktop developers were worried I could break their code if my server had a typo in one of the API responses. The server was returning JSON objects, and some of the properties were important, so if they were spelled incorrectly it could be dangerous.

I wrote unit tests to ensure the API responses were the ones they expected, and used Object.defineProperty to make the API response properties read only. But what if you wanted some objects to have read/write access to an object, and others to be set as read only?

Sergey Bolshchikov sent in his post about this topic, called Creating Read-Only References. He suggests using Object.observe, so certain objets can subscribe to changes.

Object.observe is basically the future standard way to do databinding. Sergey mentions some polyfills for it, so you can use it in browsers.

Getting MEAN with Mongo, Express, Angular, and Node

Simon Holmes is writing a book about Mongo, Express, Angular, and Node. I’ve used exactly this cocktail of technologies for some of my commercial work over the last two years, but I’d never thought of the acronym MEAN before. The marketing spin is it’s the new LAMP.

You can download the first chapter free, but the book is currently being written. If you buy it early you can contribute to its development by providing the author with feedback. The publisher calls this process MEAP (Manning Early Access Program).

Metawidget, Mozilla Holiday Gaming Competition

20 Dec 2013 | By Alex Young | Comments | Tags mozilla games webgl libraries ui

Metawidget

Richard Kennard sent in Metawidget:

Metawidget is a smart widget that populates itself, either statically or at runtime, with UI components to match the properties of your business objects.

I originally replied to him and said that something that talks about “business objects” and Java Struts might not be the type of thing I usually write about on DailyJS. He responded in good spirits with this:

Metawidget is a lightweight UI generator that can turn a JSON object into a UI widget in one line of code: http://blog.kennardconsulting.com/2013/08/how-to-generate-ui-from-json-objects.html

Or three lines if not using AngularJS: http://blog.kennardconsulting.com/2013/03/lightweight-json-to-ui-generator.html http://blog.kennardconsulting.com/2013/07/generate-ui-from-json.html

Also supports JQuery UI and JQuery Mobile: http://blog.kennardconsulting.com/2013/12/jquery-mobile-ui-generator.html

If you come from a C# or Java background, the style of this project might appeal to you. The introductory tutorial explains the idea of transforming data into UI elements based on types (which reminds me of my XSLT days).

Mozilla Holiday Gaming Competition

Kevin Attfield sent in a competition being run by Mozilla and Goo Technologies with $45,000 worth of prizes up for grabs.

To create your games, you will be using the Goo platform consisting of Goo Engine - a 3D JavaScript gaming engine entirely built on WebGL/HTML5 - and Goo Create - a visual editing tool running on top of the engine. For inspiration, check out this video tutorial on how to create an interactive scene in Goo Create.

Kevin works for Goo Technologies, and said they’re also looking for developers.

Choosing an MVC Framework, lrNotifier

19 Dec 2013 | By Alex Young | Comments | Tags mvc angularjs

Choosing a JavaScript MVC Framework

Deciding on a client-side MVC framework can be tough – you don’t want to invest too much time on something that isn’t the right fit for your project. Craig McKeachie sent in his article, Choosing a JavaScript MVC Framework, which reviews the most popular libraries like AngularJS and Backbone.js. He takes into account things like the community following, maturity, and code size:

How many real-world production apps are using these frameworks and how many users do these apps have? How good is the documentation and how many examples/tutorials are available? Are the examples up to date? How stable is the API? Do other developers know or are getting to know this technology?

He notes that these frameworks actually fall into subcategories, so it’s hard to directly compare each of them.

After looking at the projects by features it became clear to me that I wasn’t really comparing “apples to apples.” A more fair comparison might be to compare full frameworks like AngularJS and EmberJS with stacks that include great but less broad libraries like Backbone and KnockoutJS.

The article also introduces the main concepts used by these libraries, so if you’re confused about data binding or models then this should get you started.

lrNotifier

lrNotifier (GitHub: lorenzofox3 / lr-notifier, License: MIT) by Laurent Renard is an AngularJS directive for showing notifications. Notifications can be split into channels, allowing you to control where info, debug, or error messages will be displayed.

app.controller('myCtrl', ['lrNotifier', function(notifier) {
  var channel=notifier('channelName');

  channel.pushNotification({ message: 'hello channel', otherProp: 'other' });
  channel.info('a great message');
  channel.warn('a great message');
  channel.error('a great message');
}]);

Node Roundup: 0.10.23, 2013, Bull

18 Dec 2013 | By Alex Young | Comments | Tags node modules queue redis

Node 0.10.23 Released

Node v0.10.23 is out. This release upgrades uv, npm, and has patches for several core modules. I particularly liked “events: avoid calling once functions twice”. This would happen when emitting an event from inside the event hander. The fix involves using a boolean to track if the event has fired, so it’s not too drastic.

Node in 2013

If I think back over 2013, all I can remember is being punched in the face a lot by my son. He’s a year old, so I’m hoping this sort of thing stops before he gets much bigger. For those of you who still have brain cells, Gergely Nemeth sent in a timeline of Node in 2013. This includes news like Ghost getting funded, Nodeschool.io’s release, and the ScaleNPM funding drive.

Bull Job Manager

Manuel Astudillo sent in Bull Job Manager (npm: bull, License: BSD). It’s a job queue manager that uses Redis and has an API inspired by LearnBoost’s Kue.

Manuel says it’s designed with atomicity in mind. Looking at the source, it uses atomic increments and blocking operations (BRPOPLPUSH), so it should be as atomic as Redis is.

Dynatable, nanoGallery, jQuery Audit

17 Dec 2013 | By Alex Young | Comments | Tags jquery tables ui galleries chrome

Dynatable

Dynatable

Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.

Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.

JSON can also be fetched from a server. In this case you can use the dataset option:

$('#my-ajax-table').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []
  }
});

It expects a corresponding skeleton table node, with thead and tbody.

The documentation is thorough and includes examples for each of these things, and the other features provided by the library.

nanoGallery

Nobody’s sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:

$('#elt').nanoGallery({
  kind: 'picasa',
  userID: 'you@example.com'
});

It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.

Documentation for the main options and expected markup can be found in the project’s readme file.

jQuery Audit

jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.

The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.

UIkit 2.0, bitcoinprices.js

16 Dec 2013 | By Alex Young | Comments | Tags ui libraries bitcoin

UIKit

UIKit 2.0

UIKit 2.0 (GitHub: uikit / uikit, License: MIT) is a frontend framework that provides components for layout, navigation, and more complex UI widgets like dropdown replacements. It uses jQuery and FontAwesome. Version 2 has just been released, which has some new features including a Markdown editor that supports syntax highlighting and an extensible toolbar.

There’s extensive documentation and a theme tool, so you can have a look at the main features quite easily.

bitcoinprices.js

bitcoinprices.js (GitHub: miohtama / bitcoin-prices, License: MIT) by Mikko Ohtamaa is a client-side library for fetching Bitcoin prices. It supports currency selection, and uses BitcoinAverage as the price API.

BitcoinAverage itself is an open source Python project that monitors multiple exchanges for prices:

Price is a weighted average. Meaning that for every exchange the last trade price and last 24h trading volume is taken, each exchange contributes to the final price only to the extent of it’s current trading volume. For a more detailed arithmetics explanation check here.

It’s got a nice and simple Bootstrap-based website with graphs and tables.

Vim.js

13 Dec 2013 | By Alex Young | Comments | Tags vim emscripten editors
Surely the very reason Emscripten was created?

Finally, my worlds have collided! In case you didn’t know, I regularly write a Vim blog. It’s surprisingly easy to find things to say about this 22 year old text editor, and it’s been my main tool for writing code and articles for a long time. Vim.js (GitHub: coolwanglu / vim.js) by Lu Wang is an Emscripten port of Vim, allowing you to use Vim in a browser.

It runs pretty well on my computer – it seems fast, and the commands I typically use work. It’s not like these Vim layers for IDEs and other editors that miss certain motions, registers, and so on: it’s basically Vim. Split windows and tabs work, but the help files aren’t available (or I can’t find them). The way it works in the browser is to use a <span> for each terminal character, which means for the 43x115 example window there are 4945 spans!

From a JavaScript point of view, I found the Sync to Async Transformation document interesting. The author is trying to figure out how to deal with JavaScript’s asynchronous nature, given that Vim expects to have a non-busy synchronous sleep() function:

Most works are automatically done by web/transform.js, read the comments inside for more detail. But there are a few left, mainly function pointers, which cannot be automatically identified. Whenever vim.js crashes and you see callback function is not specified! in the browser console, congratulations, you have found one more async function at large.

I wonder if there are any Node developers or ES6 experts that can help with this? If you’re interested in the project, there’s a TODO which has some Emscripten issues and client-side work that needs doing.

JavaScript Developer Survey 2013: Results

12 Dec 2013 | By Alex Young | Comments | Tags community surveys

The JavaScript Developer Survey has now closed. As always the results are available to the community for further analysis:

Most people write client-side code.

51% of readers write client-side code, while 28% said they write server-side code. Last year client-side was at 98%, so I imagine this is partly due to a changing audience on DailyJS, but it’s interesting how strong server-side development is becoming.

Where do you write JavaScript? 54% said “at work”, and 45% said “side projects”. This is probably a case of people doing both – I find it’s common for programmers to be both hobbyists and professionals.

The majority of readers have been writing JavaScript for three to five years (34%). I can’t help but feel this is thanks to the growth of Node – people rediscovering JavaScript after using other languages for server-side web development, or the growth of client-side frameworks like AngularJS and Backbone.js. I can’t imagine doing design without some JavaScript skills.

78% of readers said they don’t use a language that compiles to JavaScript. I’ve noticed some of the influential members of the Node community are vocal about these languages, so it seems like our readers agree. I try to keep some coverage of these languages on the blog, but in general the focus is on JavaScript.

CoffeeScript was the most popular “compile-to” language (64%), and TypeScript was up from last year to 19%.

The style question caused much confusion. Semicolons, commas at the end, and methods with one space were popular options. It’s interesting to see 9% using tabs and 11% using spaces. Unlike some languages, JavaScript can survive a little bit of variance in tab size, so I’m not too bothered either way. Client-side veterans seem to use four spaces, though, and 8% of respondents selected this option.

The results for testing amused me:

  • Yes: 25%
  • No: 26%
  • Sometimes / Not enough / Not too much / When needed: 50%

I like your honesty. “Not enough” could be just modesty, so I’m going to read this as “a lot of readers write tests but think they could be doing better”.

Jasmine is hugely popular, with 30%. I still think tap is the best approach, but it only received 2% of your clicks. Mocha’s doing well with 27%, and QUnit is down to 16%. I think this is more evidence of a large number of Node developers doing the survey, but it could also be the fact that people see Mocha as a browser/Node module, and QUnit as something just for jQuery (which it isn’t really).

CI servers? 36% said yes. Node is definitely CI server friendly – I’ve recently been setting up a TeamCity server for Objective-C projects and it’s surprisingly hard work. Compared to switching on Travis CI for an open source Node project it’s a joke. However, Jenkins is the most popular CI server (44%), and TeamCity got 13%, so perhaps people find it easy to slot client-side or Node tests into an existing CI server in companies that use multiple languages.

AMD is extremely popular.

It turns out people like AMD! However, if we break down the stats for CommonJS, we see 17% using CommonJS and 12% using Browserify. For a long time I advocated CommonJS, but substack’s Browserify argument is convincing…

Grunt is winning at build scripts (60%). Fortunately, “npm scripts” had a good response (17%), which is encouraging because I feel like lots of tasks are simple enough to work that way, rather than needing a confusing 200 line Gruntfile.

I was surprised to see AngularJS and Backbone.js both get 25% for client-side frameworks. They have mindshare, but I can’t help but feel they solve very different problems.

The common wisdom seems to be IE support should start at IE 8 (37%). I’m going to guess that’s to support corporates, which has been the bane of my web development existence for over a decade now.

Do you use ES6 features? 85% said “No”, so you’re OK if you don’t. I probably only do to write DailyJS articles, but we’ll see this start to grow over the next year.

PHP is the most popular primary development language (24%), and C# got 17%. Hello .Net folks!

Thanks to everyone who took part in the survey! If you can use the data for something cool, I’d love to hear about it.