Lo-Dash v3, g5-knockout.js

26 Jan 2015 | By Alex Young | Comments | Tags lo-dash libraries articles knockout

Harder, Better, Faster, Stronger Lo-Dash v3

I’ve noticed that Lo-Dash is a popular module on npm, and it’s recently had a major release for version 3.0. This version brings some new features and interesting internal changes.

Gajus Kuizinas sent in Harder, Better, Faster, Stronger Lo-Dash v3, a post that explores version 3, like lazy evaluation, pipeline computing, deferred execution, and newly available methods.

Version 3 is the biggest update to Lo-Dash ever3. With ever increasing user base, modular code base, and cross-browser compatibility, Lo-Dash is the go-to utility library for years to come. With that in mind, there is an going competition with lazy.js and undescore.js, both of which are in active development.

Knockout/Browserify Base App with Events

Working with Knockout and Browserify is a pretty solid choice for many client-side projects, but because these are libraries rather than frameworks you need to know what you’re doing before getting started. Greg Babula has created g5-knockout.js which you can use as a foundation for your next MVVM project. It includes an event bus for decoupling, and this is based on Node’s events module, which is made possible thanks to Browserify. I also noticed Greg uses Lo-Dash.

Greg included a blog post in his submission which explains the concept and decisions behind the main dependencies. You can look at the source to see things like how view models are made.

EvenNode, Mozaik, Marko

23 Jan 2015 | By Alex Young | Comments | Tags node modules libraries sponsored-content hosting

EvenNode

EvenNode is a new hosting service that is dedicated to Node.js. You can get a free app instance which even includes MongoDB, so it’s great for quickly deploying MEAN apps. The paid tiers start at €6, which gets you 1GB storage and 256MB RAM. One interesting thing about the paid tiers is they all get unlimited custom domain names, so it’s easy to use multiple domain names for each application.

EvenNode

EvenNode supports multiple versions of Node, starting at 0.8.6. You can deploy with Git, and WebSockets are supported out of the box. For more technical details, take a look at the documentation. Sign up only requires an email address and password, so you don’t even have to hand over credit card details to try it out!

Mozaik

Mozaik

Mozaik (GitHub: plouc/mozaik, License: MIT, Demo) by Raphaël Benitte is a Node-based web-app for showing dashboards. It includes some widgets for CI and monitoring, but you can add more. It also comes with five themes. Of course, you can create your own widgets and themes.

Other than the very clear and attractive design, one feature that I liked was rotating dashboard layouts. This would be cool if you’ve got multiple teams in the same office that perform different roles. You could rotate between support information, developer tickets/CI, and server monitoring.

Mozaik is built with React and Express.

Marko

Marko (GitHub: raptorjs/marko, License: Apache 2.0, npm: marko) by Patrick Steele-Idem is a templating language for Node and browsers that uses HTML with custom tags. It’s being used at eBay as part of their Node stack, and it has been covered by some cool blogs like the StrongLoop blog.

There’s a live demo where you can try out the syntax. The markup uses attributes for data binding and iteration, so you can say if="notEmpty(data.colors)" and repeat elements with for="color in data.colors". I haven’t seen this syntax before, but I think it would be easy to learn if you’re used to declarative template systems.

One thing about Marko that makes a huge amount of sense to me is the fact it’s asynchronous. You can stream output with Node’s HTTP response objects, which will fit in extremely well with frameworks like Express. The design philosophy statement for Marko says “it should be possible to render HTML out-of-order, but the output HTML should be streamed out in the correct order”, and I think this is extremely useful.

The documentation is great and you can extend it with custom tag libraries – why not try it out now?

Terminal.js: A Terminal Emulator Library

22 Jan 2015 | By Alex Young | Comments | Tags client-side node libraries modules

Terminal.js

These days the terms VT100 and terminal are synonymous with either text-based interfaces or a shell. But there was a time when terminal referred to “computer terminal” – a machine that allows you to input commands into a computing system and view the results. This includes CRTs and teletype printers. The VT100 terminal was based on an Intel 8080, and if I remember my computer history correctly represents a transitory stage between the era of remote mainframes and local minicomputer systems.

The thing that’s interesting about the VT100 is it implemented some of the ANSI escape code sequences that we still use to annoy people on IRC and make quirky command-line tools. So when you see a terminal emulator set to VT100, it means it supports the features the VT100 had for cursor movement, clearing the display, and so on.

Terminal.js (GitHub: Gottox/terminal.js, License: MIT/X Consortium License, npm: terminal.js) by Enno Boland is a VT100 emulator that works in browsers and Node. Enno has also published node-webterm, which you can use to try out the project in a browser.

The API allows you to create a terminal object, write data to it, and get data back out. This demo uses the colors module:

var colors = require('colors');
var Terminal = require('terminal.js');
var terminal = new Terminal({ columns: 20, rows: 2 });

terminal.write('Terminal.js in rainbows'.rainbow);
console.log(terminal.toString('ansi'));

Internally, the source is split into handler, input, and output modules. The handlers are basically JSON maps between characters and internal state. For example, handler/esc.js has the escape code handlers for things like moving the cursor down a column (ESC D).

You could use this module to provide a command-line interface to web-based developer tools, or maybe even make your own Chrome OS/iOS-friendly IDE. The node-webterm example demonstrates how to connect the terminal up with WebSockets, so it actually feels pretty low latency. Check out node-webterm/index.html to see how that can be implemented!

Node Roundup: Node 0.11.15, PublicSuffixList, Robe

21 Jan 2015 | By Alex Young | Comments | Tags node modules libraries mongodb

Node 0.11.15

Node 0.11.15 is out. This is a substantial release that updates v8 to 3.28.73, npm to 2.1.6, and uv to 1.0.2. There are patches for the build system and core modules as well. I looked over the changes to the core modules and it looks like it’s mostly bug fixes, but some modules (url and readline) have had performance improvements as well.

Meanwhile, io.js was updated to 1.0.3. This upgrades v8 from 3.31 to 4.1, which the changelog notes is not a major release because “4.1” is derived from Chrome 41. There’s also better platform support, including Windows XP, Windows 2003, and improved FreeBSD support.

If you look through the commits in both projects it should be obvious that some commits are shared, but some are unique to each fork. There was a popular post on Hacker News about performance comparisons between Node and io.js, so it’ll be interesting to see how the projects diverge and converge over the next few months.

PublicSuffixList

Matthias Thoemmes sent in PublicSuffixList (GitHub: cmtt/publicsuffixlist, License: MIT, npm: publicsuffixlist), a validator for domain names and top level domains. It uses data from Mozilla’s publicsuffix.org project:

A “public suffix” is one under which Internet users can directly register names. Some examples of public suffixes are .com, .co.uk and pvt.k12.ma.us. The Public Suffix List is a list of all known public suffixes.

The module provides methods like validateTLD, validate(domainString), and you can also look up a domain to destructure it:

var result = psl.lookup('www.domain.com');

/*
result === {
  domain: 'domain',
  tld: 'com',
  subdomain: 'www'
} */

Robe

Robe (GitHub: hiddentao/robe, License: MIT, npm: robe) by Ramesh Nair is a MongoDB ODM that uses ES6 generators. The author said he couldn’t quite find the MongoDB API that he wanted, although Mongorito came close. So he used Monk to build Robe.

Because it supports generators you can yield results in the synchronous style:

var result = yield collection.findOne({
  score: {
    $gt: 20
  },
}, {
  fields: ['name'],
  sort: { name: 1 },
  skip: 1,
});

It also supports lifecycle hooks, so you can run callbacks after or before data is inserted, removed, and so on.

Robe will validate data based on your schema, so running yield collection.insert() with an invalid record will cause an exception to be raised. Finally, it also supports streams, so you can use an event-based API to handle large sets of data.

PWS Tabs, wheelnav.js

20 Jan 2015 | By Alex Young | Comments | Tags jquery tabs ui libraries animation

PWS Tabs

PWS Tabs (GitHub: alexchizhovcom/pwstabs, License: MIT) by Alex Chizhov is a jQuery plugin that helps you create modern, flat tabs, with CSS3 animations and Font Awesome Icons.

It uses data- attributes to set the tab’s title and icon. The $(selector).pwstabs method accepts options for the tab position (horizontal or vertical) and the animation effect name.

The plugin source itself is fairly leightweight, and it comes with examples that include CSS. When I reviewed this plugin I had to download the examples because I couldn’t access Alex’s site, but he does link to a live demo in the readme.

wheelnav.js

wheelnav.js (GitHub: softwaretailoring/wheelnav) by Gábor Berkesi is an SVG-based library that you can use for a centerpiece animated navigation component. This might work well for a marketing website, which is the example Gábor uses, but I think it would be really cool on a child-friendly site with lots of bright colours site as well.

The licensing is mixed – there are free versions but also more advanced paid versions.

A good example of the library can be found on the download page, which ties a spinning component in with some tabbed navigation.

angular-oauth2, angular-websocket

angular-oauth2

angular-oauth2 (GitHub: seegno/angular-oauth2, License: MIT, npm: angular-oauth2, Bower: angular-oauth2) by Rui Silva at Seegno is an AngularJS OAuth2 client module that uses ES6 internally. The author has kindly released it on npm and Bower, so it should be easy to quickly try it out.

To use it, you have to configure OAuthProvider with the server’s base URL, and then the client ID and secret. Then you can request access and refresh tokens as required. The error handling is nice because you can hook into error events on $rootScope.$on('oauth:error'.

I’ve written a few browser extensions that use OAuth, and this seems ideal for that kind of work. It will also be useful for your Angular single page web apps.

angular-websocket

PatrickJS (Patrick Stapleton) sent in angular-websocket (GitHub: gdi2290/angular-websocket, License: MIT, npm: angular-websocket, Bower: angular-websocket), which is a WebSocket library for AngularJS 1.x. It works by providing a factory, $websocket, that you can use to stream data between the server and your Angular app.

The API is modeled around the standard WebSocket API:

angular.module('YOUR_APP', [
  'ngWebSocket' // you may also use 'angular-websocket' if you prefer
])
//                          WebSocket works as well
.factory('MyData', function($websocket) {
  // Open a WebSocket connection
  var dataStream = $websocket('wss://website.com/data');

  var collection = [];

  dataStream.onMessage(function(message.data) {
    collection.push(JSON.parse(message.data));
  });

  var methods = {
    collection: collection,
    get: function() {
      dataStream.send(JSON.stringify({ action: 'get' }));
    }
  };

  return methods;
})
.controller('SomeController', function(MyData) {
  $scope.MyData = MyData;
});

In this example you would use MyData in the corresponding markup. Patrick’s example uses ng-repeat to iterate over the data.

The project includes browser tests and a build script. It doesn’t have any fallback for browsers that don’t support WebSockets, so it’s a pure WebSocket module rather than something like Socket.IO.

Gifshot, Cquence.js

16 Jan 2015 | By Alex Young | Comments | Tags libraries animations

Gifshot

Gifshot

Gitshot (GitHub: yahoo/gifshot, License: MIT) by Chase West and Greg Franko at Yahoo Sports is a library for creating animated GIFs from video streams or images. It’s client-side and uses Web Workers, so you can use it with existing sites without too much server-side work. To generate GIFs themselves it uses lots of modern APIs, like WebRTC, FileSystem, Video, Canvas, Web Workers, and (everyone’s favourite!) Typed Arrays.

Gifshot is ideal for adding overlays to animations, or for extracting thumbnails from videos. You could capture footage from the webcam and share it to users as part of a chat service or game, for example. It comes with a demo that uses Node, so you can easily see the kinds of options it supports.

The basic API is just gifshot.createGIF, which accepts an options object that specifies the type of content. For example, generating a GIF from a video stream can be done with gifshot.createGIF({ video: ['example.mp4', 'example.ogv'] }).

Cquence.js

Cquence.js by Ramon Gebben (GitHub: RamonGebben/Cquence, License: MIT) is a small animation library. The author developed it for advertising banners, and it has an interesting compositional style:

var render = combine(
  sequence(
    sleep(100),
    linear('frame3', 10000, { left: -900 }, { left: 300 })
  ),
  sequence(
    easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
    // ...

It goes against that “globals are bad” API style, but it would be possible to repackage it as a CommonJS module. It uses requestAnimationFrame and has older IE support for opacity.

There’s a demo that demonstrates the kind of sequential animations you can build up with it.

Mercury: A Modular Front-end Framework

15 Jan 2015 | By Alex Young | Comments | Tags libraries browser frameworks

Michael J. Ryan alerted me to a front-end framework called mercury. It’s written by Raynos (Jake Verbaten) who has created several useful JavaScript libraries, but mercury seems to have got lots of interest (it’s almost at 1000 stars on GitHub).

You can find it at Raynos/mercury on GitHub (License: MIT, npm: mercury). I think you’ll like it because it’s definitely a modern JavaScript programmer’s client-side framework. It has some things in common with React – the virtual DOM, state management, and render methods – but the big difference is you can almost completely forget about the DOM. It has a streamlined markup API, so there are no tags mixed in with JavaScript.

It’s still small, though, and it plays well with other libraries. The readme has examples that show mercury alongside Backbone and JSX. There are some demos as well that include things like todomvc. Here’s the basic example from the readme:

'use strict';

var document = require('global/document');
var hg = require('mercury');
var h = require('mercury').h;

function App() {
  return hg.state({
    value: hg.value(0),
    channels: {
      clicks: incrementCounter
    }
  });
}

function incrementCounter(state) {
  state.value.set(state.value() + 1);
}

App.render = function render(state) {
  return h('div.counter', [
    'The state ', h('code', 'clickCount'),
    ' has value: ' + state.value + '.', h('input.button', {
      type: 'button',
      value: 'Click me!',
      'ev-click': hg.send(state.channels.clicks)
    })
  ]);
};

hg.app(document.body, App(), App.render);

Mercury encourages immutable state, so the render methods are pure in that they take state and generate markup. However, some of mercury’s features are not immutable. Widgets are more complex and allow low-level DOM manipulation.

This idea of mixing functional and imperative programming techniques reminds me of Clojure, and perhaps even how F# feels less “pure” than Haskell because it has to interface with .NET. Raynos identifies the mixed-paradigm approach in the documentation:

Mercury is also a hybrid of functional and imperative, the rendering logic is functional but the updating logic has an imperative updating interface (backed by a stream of immutable objects under the hood).

If you want to read more about mercury, the documentation is split into several Markdown files that you can view on GitHub: mercury/docs/introduction.md. There’s nothing specifically Node-centric about mercury, but because it can be installed with npm and is made of small CommonJS modules then it feels like it would work well for Browserify/CommonJS projects.

Node Roundup: io.js 1.0.1, jsop, HAP-NodeJS

14 Jan 2015 | By Alex Young | Comments | Tags node modules libraries forks

io.js 1.0.1

io.js has now released version 1.0.0 and 1.0.1. There’s a changelog with a summary that explains what’s changed from Node 0.10.35 to 1.0.0. Things are slightly more complicated by the fact that changes from Node’s unstable branch are merged in as well:

The io.js codebase inherits the majority of the changes found in the v0.11 branch of the joyent/node repository and therefore can be seen as an extension to v0.11.

There are some important ES6 changes in io.js, partly because V8 has been updated, but also because you don’t need to use the –harmony flag for many useful ES6 features:

All harmony features are now logically split into three groups for shipping, staged and in progress features: All shipping features, the ones that V8 has considered stable, like generators, templates, new string methods and many others are turned on by default on io.js and do NOT require any kind of runtime flag.

The other binary libraries (C-Ares, http_parser, libuv, npm, openssl, punycode) and Node’s core modules have also been updated. There are even some new core modules: see smalloc and v8. The smalloc module can be found in Node 0.11.x, but v8 was reintroduced by Ben Noordhuis to io.js:

I introduced this module over a year ago in a pull request as the v8 module but it was quickly subsumed by the tracing module.

The tracing module was recently removed again and that is why this commit introduces the v8 module again, including the new features it picked up commits d23ac0e and f8076c4.

I realise that the existence of io.js is confusing and potentially worrying for Node developers. If this is new to you, take a look at the io.js Project Governance and this comment by duncanawoods on Hacker News:

In their words, io.js is “A spork of Node.js with an open governance model”.

Sporking: Creating a fork that you would really like to become the next main-line version but you kinda have to prove its awesome first (sporks are pretty awesome)

jsop

With the release of io.js 1.0.0 (and Node 0.11.13), typicode has created jsop (GitHub: typicode/jsop, License: MIT, npm: jsop), a one-way data binding for JSON files. It’s built with Object.observe, and allows you to watch a file like this:

var jsop = require('jsop')

var config = jsop('config.json')
config.foo = 'bar'

This will actually write the change to the JSON file. There’s a before and after example in the readme, so you can see how much syntax this module saves. This module is based on observed, which provides Object.observe with nested object support.

The same author also sent in homerun, which is a module that takes advantage of npm 2’s support for script arguments. This project basically allows you to get a command-line interface for free, once you’ve run npm link or npm publish.

HAP-NodeJS

Node and HomeKit

Other than watches, the smartphone/tablet vendors are trying to push the idea of the connected home. I was looking into ways to script my Wi-Fi lightbulbs and ran into HAP-NodeJS:

HAP-NodeJS is a Node.js implementation of HomeKit Accessory Server. With this project, you should be able to create your own HomeKit Accessory on Raspberry Pi, Intel Edison or any other platform that can run Node.js :) The implementation may not 100% follow the HAP MFi Specification since MFi program doesn’t allow individual developer to join.

HomeKit is Apple’s iOS 8 framework for controlling electronics in the home. The author notes that the project isn’t necessarily 100% compatible with the HAP MFi specification, but there’s a short video of it working with an iPhone. That means you should be able to get an iOS device to connect to anything that is capable of running the HAP-NodeJS server.

ngTestHarness, call-n-times, modern.IE Automation

13 Jan 2015 | By Alex Young | Comments | Tags testing libraries scripts angular

ngTestHarness

David Posin sent in ngTestHarness, a test harness for Angular scopes, controllers, and providers. It helps to reduce the amount of boilerplate needed for dependency injection during testing.

By default it loads the ng, ngMock, and ngSanitize modules. By using the ngHarness API, tests can be as simple as:

describe('Test the note-editor directive', function() {
  var harness = new ngHarness(['noteEditor']);

  it('Adds the container div', function() {
    expect(harness.compileElement('<my-note></my-note>').html()).toBe('<div class="editor-container"></div>');
  });
});

The ngHarness object manages the required dependency injections for each test context. The API documentation covers the ngTestHarness class and each method that it implements.

David notes that the project was the result of work at Team Titan at Gaikai, owned by Sony Entertainment.

call-n-times

call-n-times by Shahar Or (GitHub: mightyiam/call-n-times, License: MIT, npm: call-n-times) came about when the author was trying to make test code cleaner. Given a function, this module will synchronously run it the specified number of times:

var assert = require('assert');
var call = require('call-n-times');

function logAndReturn() {
  console.log('foo');
  return 'foo';
}

var returns = call(logAndReturn, 3);
assert.equal(returns.length, 3);
assert.equal(returns[0], 'foo');

Shahar wondered if there’s a built-in JavaScript way to do this, something closer to how it would work if you used an array and forEach. Does anyone know?

modern.IE, VirtualBox, Selenium

I expect many readers use modern.IE for testing. Wouldn’t it be nice if you could quickly create new instances so you can trash old ones, or use them as part of a test suite? Denis Suckau sent in a script called mkvm.sh (License: MIT) for automatically creating VirtualBox virtual machines with Modern IE Windows images. It’s a shell script that supports various configuration options, like the Selenium and Java environmental variables, VM memory usage, and so on.

The readme has details on how to configure it, and the background behind the project:

As the modern.ie-Machines refuses to run more than 30-90 Days (at least for more than an hour) we remove the machines on a regular basis and recreate the original Appliance with all changes needed to run Selenium.

Use it with your favored test runner (maybe Karma or Nightwatch.js) to automate JavaScript tests in real browsers on your own Selenium Grid. Other WebDriver language bindings (Python, Java) should work as well.

If you wanted to install IE 6, then you could run mkvm.sh VMs/IE6\ -\ WinXP.ova. It also supports deleting a VM, so you can delete and recreate IE 6 with mkvm.sh VMs/IE6\ -\ WinXP.ova --delete "IE6 - WinXP".

Z3d, is-progressive, Japanese Translations, textlint

12 Jan 2015 | By Alex Young | Comments | Tags webgl graphics libraries japanese translations jpeg

Z3d

Z3d

Z3d (GitHub: NathanEpstein/Z3d, License: MIT, Bower: z3d) by Nathan Epstein is a library that generates 3D plots. It gives you a Three.js scene, so you can further manipulate the graph with the Three.js API.

One of the useful things about Z3d is it has sensible built-in defaults, so you can throw data at it and get something cool out. The basic example is just plot3d(x, y, z), where the arguments are arrays of numbers to plot in 3D space.

The plot3d function also accepts a configuration argument, which allows things like colours and labels to be defined.

is-progressive

If you’re running through a checklist of website performance improvements and see image optimisation, then you might want some automated tools to do the job for you. Sindre Sorhus suggests using progressive JPEG images, and sent in a tool that can check if a JPEG is progressive or not.

It’s called is-progressive (GitHub: is-progressive, License: MIT, npm: is-progressive), and can be used as a Node module or on the command-line. The command-line use is either is-progressive filename or you can redirect data into it.

The Node module supports streams and has a synchronous API. That means you can do isProgressive.fileSync, or pipe HTTP requests through it with res.pipe(isProgressive.stream(callback)).

DailyJS Japanese Translation and textlint

Hideharu Sakai wrote in to say he’s been translating DailyJS into Japanese, here: panda.node.ws/?cat=19.

He also mentioned a nice project for linting text: textlint (License: MIT, npm: textlint). You can use it to check plain text and Markdown files for various rules which are customisable. The example ensures to-do lists are written a certain way.

You can use textlint as a command-line tool or a Node module, so you could put it into a build script to validate your project’s documentation.

Many thanks to Hideharu!

After Many Years of Desktop Programming...

09 Jan 2015 | By Alex Young | Comments | Tags webgl graphics

If you’re interested in WebGL development, then you might enjoy My forays into JavaScript by Stavros Papadopoulos. It’s basically a paper, WebGL GUI library, and terrain rendering engine all rolled into one fascinating project. The GUI toolkit is desktop and Android inspired, but it’s rendered with WebGL. There’s a live demo that loads chunks of terrain data as you fly around – the terrain is rendered offline by a Delphi program.

Project Windstorm

There are a few things that I found interesting about this project. The author is a desktop developer that is learning JavaScript, so the demo itself should be encouraging to anyone in the same position. The screenshots are incredible, and it runs fairly well (I get 30fps on a 2013 MacBook Air).

The section in the article about fetching tiles will be of interest to anyone starting out in WebGL game development. If you’ve got server-side experience then designing the API for this is an early problem that you’ll have to tackle:

A very simple and efficient way to determine the potentially visible tiles is by performing a simple intersection test against the bounding box of the viewing frustum’s projection on the Y = 0 (horizontal) plane (see first image below).

A slightly more involved but potentially better way (as long as the viewpoint remains above and relatively close to the ground) is to construct our bounding box from the points of the polygon that results from intersecting the frustum with the horizontal plane, combined with the projected points of the frustum’s near plane (got that?).

I find the GUI particularly impressive, it’s actually pretty usable and I haven’t managed to break it yet. It would be nice if Stavros released it as a library. I haven’t spent much time taking the JavaScript apart yet, so I don’t know if he’s used any libraries. In fact, I entered flight mode in the demo and ended up wasting all of my DailyJS writing time for the day!

All in all, the GUI weighs in at ~12KLOC and spans 24 files, which is quite a bit more than the terrain engine itself!

It sounds like WebGL GUIs can be complicated, depending on your requirements. In this case I think it was well worth the effort.

From AS3 to TypeScript

08 Jan 2015 | By Alex Young | Comments | Tags as3 typescript parsers

If you’ve got existing ActionScript assets but want to migrate them to another language, what do you do? One possibility is to convert AS3 to TypeScript. They share similar language features, but are different enough that the process isn’t trivial.

There’s a project called AS3toTypeScript by Richard Davey that runs through lots of simple replacements, like converting Boolean to bool. It’s written in PHP and can be used with a web interface.

In From AS3 to TypeScript by Jesse Freeman, the author converts a game to TypeScript, which seems like a typical task for an ActionScript developer. He points out that TypeScript works well because of the Visual Studio support, so it makes sense if you’re a Microsoft-based developer.

François de Campredon recently sent me as3-to-typescript (License: Apache, npm: as3-to-typescript). This is a Node-based project that includes the AS3Parser from Adobe. That means the conversion process actually parses ActionScript and attempts to output syntactically correct TypeScript.

The tests are fairly minimal given the goals of the project, but they do show what the tool currently supports. I’m not particularly for or against ActionScript or TypeScript, but as3-to-typescript is a very interesting and useful combination of technologies that might help you find new life for old game code.

Node Roundup: no-sequence, CodeOnMobile, app-notify

07 Jan 2015 | By Alex Young | Comments | Tags node modules libraries security mobile sms

no-sequence

If you’ve got a corporate policy for enforcing strong passwords, then you might want to look at what npm modules can help validate passwords rather than rolling your own. Eric Douglas sent in no-sequence (GitHub: thothJS/no-sequenceicense: MIT, npm: no-sequence), which checks to ensure passwords do not contain sequential characters:

var noSequence = require('no-sequence').checkSequence;
var assert = require('assert');
var password = '123456';
var minSize = 6;

assert.equal(noSequence(password, minSize), false);

The repository has examples and tests which show it working with character sequences and minimum and maximum sizes.

CodeOnMobile

Daishi Kato has been working on a new project that allows you to write code on phones and tablets. He notes that this is good for holiday hacking, when you’re stranded without a desktop/laptop.

CodeOnMobile

It works with GitHub accounts, and there’s a live demo here: codeonmobile.axlight.com. The source is available at GitHub under dai-shi/codeonmobile with a BSD license, and uses Codeship to deploy your app to Heroku.

app-notify

app-notify (GitHub: chovy/app-notify, License: ISC, npm: app-notify) by Anthony Ettinger is a module for sending SMS messages. You can use promises, or callbacks:

notify.sms({
  message: 'Hello world'
})
.then(function(data){
  console.log(data);
})
.catch(function(err){
  console.error(err);
});

It requires Twilio credentials for SMS, and can also send email (with nodemailer).

Qondrite and Asteroid

06 Jan 2015 | By Alex Young | Comments | Tags libraries meteor qt

There’s a library for Meteor called Asteroid that allows you to connect any JavaScript front-end to a Meteor server. That means you can use Meteor with existing applications, or your preferred front-end framework.

Attila Csipa has created a new library called Qondrite (GitHub: achipa/Qondrite, License: MIT) that is a QML wrapper for Asteroid. QML, or the Qt Meta Language, is a declarative markup language based on JavaScript for creating mobile applications. It’s used by KDE Plasma 5 and Unity.

Qondrite allows you to create Qt projects with Meteor backends. This seems like an ideal way to make an open source version of something like Parse, where you get a simple server-side system that has mobile support. I’ve never written any QML myself, but I’d be interested to see if Qt for iOS could be used with Qondrite.

Attila has posted a video where you can see the library in action: Meteor and Qt. If you want to install the library, take a look at the installation details in the readme. There’s also a demo application with a small QML file:

import QtQuick 2.0

Item {
  Loader {
    id: mainWindow
  }

  Component.onCompleted: {
    if (Qt.platform.os === "android")
      mainWindow.setSource("Android.qml")
    else
      mainWindow.setSource("Desktop.qml")
  }
}

Notice how it forks for Android or desktop. This is also reminiscent of Xamarin.

Databound, Typist

05 Jan 2015 | By Alex Young | Comments | Tags libraries dom ui ajax rest http

Databound

Databound

If you use Ruby on Rails, then you might like this Rails REST library wrapped: Databound (GitHub: Nedomas/databound, License: MIT, npm: databound, Bower: databound) by Domas Bitvinskas. The API looks a bit like the Rails syntax for database models:

User = new Databound('/users')

User.where({ name: 'John' }).then(function(users) {
  alert('Users called John');
});

User.find(15).then(function(user) {
  print('User no. 15: ' + user.name);
});

User.create({ name: 'Peter' }).then(function(user) {
  print('I am ' + user.name + ' from database');
});

Install it with npm, Bower, or as part of a Rails asset pipeline. The author also notes that you can use it with Angular as an alternative to ngResource.

Typist

Typist (GitHub: positionly/Typist, License: MIT, Bower: Typist) by Oskar Krawczyk is a small library for animating text as if it’s being typed. It can work with responsive layouts, and the author claims it has improved click-through-rates on a commercial homepage.

It doesn’t have any dependencies, and is invoked by a constructor that accepts options for the animation intervals. The required markup should specify the text to be typed in the data-typist and data-typist-suffix attributes.

Curl Converter, aja.js, sneakpeek

02 Jan 2015 | By Alex Young | Comments | Tags libraries utilities dom ui ajax rest http

Curl Converter

Chrome’s “Copy as cURL” menu item is useful, but what if you want to duplicate the same request with Node? Curl Converter (GitHub: NickCarneiro/curlconverter, License: MIT, npm: curlconverter) by Nick Carneiro can convert between cURL syntax and Node’s popular request module. It also supports Python, and can be installed with npm.

aja.js

aja.js (Bower: aja, npm: aja, License: MIT) by Bertrand Chevrier is an Ajax library that supports JSON and JSONP. It can be used to load large chunks of HTML or JSON, and can be installed with npm or Bower.

The API is fluent, so it can be used as a REST client like this:

aja()
  .method('GET')
  .url('/api/customer')
  .data({ firstname: 'John Romuald' })
  .on('200', function(response) {})
  .go();

It also supports some DOM manipulation:

aja()
  .url('/views/page.html')
  .into('.container')
  .go();

It comes with tests that can be run with Grunt, and the readme has more examples for things like posting data.

sneakpeek

If you’re looking for a library to hide the header when the page is scrolled, then sneakpeek (GitHub: antris/sneakpeek, License: MIT, npm: sneakpeek) is nice because it’s small, installable with npm, and has no external dependencies.

It’s a bit like headroom.js, but easier to use with Browserify.

Node Roundup: nchat, hulken, cult

nchat

nchat (GitHub: irrationalistic/nchat, npm: nchat) by Chris Rolfs is a terminal-based chat application that uses WebSocket, which means it’s easier to use on networks where IRC might be blocked.

Notifications are supported on Mac OS X, and the client can run as the server so you only need to install nchat itself. It supports a few IRC-style commands, like /users, and you can deploy it to hosting providers like Heroku.

hulken

Hulken (GitHub: hulken, License: MIT, npm: hulken) by Johan Hellgren is a stress testing tool for HTTP services. It can make GET and POST requests, and can be configured to send dynamic payloads.

You can use hulken as a command-line tool, or a Node module. The documentation includes all of the supported options, and you’ll need to write an options.json file to use it on the command-line.

cult

Cult (GitHub: typicode/cult, License: MIT, npm: cult) is a tool that monitors changes to a gulpfile and then reloads Gulp. You can run it on the command-line, and it uses the chalk library for pretty output. The readme has an example for supporting gulpfiles that are split across multiple files.

JavaScript: 2014 in Review

31 Dec 2014 | By Alex Young | Comments | Tags community

I can’t keep up with the libraries that people send to DailyJS – there are just too many! I’ve always felt like this is a good thing: it’s a sign the community is creative and works hard to solve problems in interesting new ways.

It’s hard to decide on a framework or library for a particular task: should you use Koa, Express, or Hapi on the server? Gulp or Grunt as a build system? Then there’s client-side development, with its rich set of libraries. This year alone I’ve used React, Angular, Knockout, and Backbone.

One of the reasons there are so many Node modules is npm is so good. There’s still room for improvement, and the npm blog has been useful for tracking new and upcoming changes to the package manager. It seems like more people than ever are using npm for client-side development as well, so it’ll be interesting to see if Bower still occupies its niche in 2015.

Speaking of 2015, I expect to see more people using ES6 features. We’ve already seen several libraries that use generators to make synchronous-style APIs for client-side modules, and server-side databases. Generators seem hard to learn so it’ll take a while for these APIs to catch on.

There’s still scepticism and even irritation in the Node community about ES6 modules. We’ve spent years writing CommonJS modules and happen to like the syntax, so ES6 modules are a hard pill to swallow. There’s a gist from 2013 about Node and ES6 modules that has comments from well-known Node programmers, and since then es6-module-loader by Guy Bedford has appeared. This library is a polyfill that provides System.import for loading ES6 modules. Guy wrote a great article, Practical Workflows for ES6 Modules with lots of details on ES6 modules from a Node programmer’s perspective.

I don’t think 2015 will see a big Node/ES6 module controversy, though. It seems like CommonJS modules are here to stay, and perhaps eventually we’ll start using both formats.

Another potential controversy is the future of Node forks. io.js got a of initial attention, but it seems to have cooled off over the last fortnight. But I think forks are positive and I’m excited to see what people do with alternative takes on Node.

If you do anything in 2015, please make more libraries and frameworks. We don’t want a totalitarian open source community, we want a big wonderful mess, because open source is an ongoing conversation with no truly right solutions.

React-Grid-Layout, Angular Debug Bar and Reading Position

30 Dec 2014 | By Alex Young | Comments | Tags angularjs react responsive layout

React-Grid-Layout

Samuel Reed sent in React-Grid-Layout (GitHub: strml/react-grid-layout, License: MIT), a grid system that is responsive. It requires React but doesn’t require any other library (including jQuery).

You can use the ReactGridLayout custom element in templates which allows you to cleanly specify how many rows and columns you’d like. It also supports props for columns, rows, responsive breakpoints, and layout change events.

Although the author states it has fewer features than Packery or Gridster, it supports some cool stuff like vertical auto-packing and dragging and resizing.

Angular Debug Bar and Reading Position Indicator

Maciej Rzepiński sent in two useful Angular projects:

angular-debug-bar allows you to including a new element, angular-debug-bar, to show some statistics about the current page. This includes a count of $watch and $listener items, DOM objects, and page load time. Each metric is defined with a registerPlugin method, so you might be able to add new metrics although I haven’t tried that myself.

angular-rpi is based on the Reading Position Indicator post from CSS-Tricks. It shows a bar at the top of the page as you scroll the document:

RPI

You can use it with the rpi directive. Both projects have a demo that you can run locally. If you want to edit the progress bar styles, then you can use the .scss file and run npm install ; bower install ; gulp.