The JavaScript blog.


libraries dom react browser

Relae, ClassNameBuilder

Posted on .


Relä (GitHub: joakimbeng/relae, License: MIT, npm: relae) by Joakim Carlstein is a library for fetching data from RESTful servers using React components. It can fetch data from a base URL, but can also filter data.

If you've already injected JSON into the initial page load, then you can bootstrap it with Relae.bootstrap(data).

To use Relä, you need to wrap a React component with Relae.createContainer. This is where you pass the REST API URL and filtering options:

Relae.createContainer(YourComponent, relaeOptions);  

This project is based on React Relay -- you can compare the API from the Relay Newsfeed blog post. The author has planned more features, but has already implemented some cool stuff like caching.


If you find yourself generating lists of class names (often done in React projects), then have you ever wondered if there's a better way to do it? Luke William Westby has a suggestion: ClassNameBuilder (GitHub: lukewestby/class-name-builder, License: MIT, npm: class-name-builder). This library offers a chainable API for manipulating class name strings. It supports conditional expressions and merging instances together:

const classNames = ClassNameBuilder  
  .always('example awesome-example')
  .if(condition, 'condition')
  .if(otherCondition, 'other-condition')
  .else(['not-other-condition', 'array'])

I'd usually do something like this with fragmentary bits of strings and logic. The advantage of this API is encapsulating the treatment of class names to generate more consistent output.


resources hardware libraries node browser

Myo.js, JavaScript.com

Posted on .



Myo from Thalmic Labs is a gesture control armband that's described as a "wearable presentation remote". Paul Bernhardt from Thalmic Labs sent me myo.js (GitHub: thalmiclabs/myo.js, License: BSD 3-Clause, npm: myo), a JavaScript library for interacting with the device. It uses WebSockets to talk to Myo Connect, which runs on your desktop.

The API is based around events. Here's a quick example:

myMyo.on('gyroscope', function(data) {  
  if (data.x > 100){
    alert('Woah now!')

It also supports "poses", for example: myMyo.on('thumb_to_pinky', cb).

The API is pretty well documented, with method documentation and examples in the readme. There's also a blog post that introduces Myo.js.



Code School, the web-based subscription tutorial site, has recently launched javascript.com. It has an interactive tutorial, a blog, and resources to help beginners.

Naturally it promotes Code School (owned by Pluralsight), but it's nice to see something useful and well designed there. It used to have a very dated internet.com page, so Code School's page is a step up.


libraries ui browser dom

sdm, CSS HTML Hint

Posted on .

Simple DOM Module

Whenever I have to write real DOM code, I get a little bit of perverse pleasure out of the fact I can remember certain arcane parts of the DOM APIs. I wouldn't describe myself as a DOM expert, but after years of high-level frameworks it's easy to forget addEventListener, parentNode.removeChild, appendChild, and the fun cross-browser issues we used to have to deal with.

awalGarg sent in a small project that attempts to make DOM code more readable without having the exact same API as jQuery. It's called sdm (License: WTFPL) and it attempts to do part of what jQuery does, but only by using the standard DOM APIs without any shims.

The API is designed around two objects: $$ and $. If you want to work with multiple nodes, then use $$, otherwise for single elements use $. The methods map neatly to DOM methods:

  • getElementsByClassName: $$.cl(className [, parent = document])
  • getElementsByName: $$.nam(name [, parent = document])
  • getElementsByTagName: $$.tag(tagName [, parent = document])

There are more methods as well, including $$.data() and $$.attr.

One interesting detail is the use of $.id instead of $('#' + id). The author said it's too easy to forget the hash symbol, and I do this all the time with CSS selector APIs, so I liked the idea.

I've noticed the tendency for people who use the newer frameworks like React and Angular to want to avoid jQuery. Most of the time you don't need to manipulate or query elements (React lets you reference specific nodes, for example), but sometimes you actually need to do things outside of the framework and have to dip back into DOM programming. Naturally pulling in the entire jQuery library feels unnecessary, so smaller libraries like this are becoming interesting again.


There's a popular and lightweight tooltip library called hint.css by Kushagra Gour. It's very simple and easy to use, but doesn't support HTML in the hints. Ivan Starkov sent in css html hint (GitHub: istarkov/html-hint, License: MIT, npm: html-hint) which overcomes this limitation.

To use it, you'll need to use the right classes and markup, but it basically involves adding the hint--html class to a container with a child that has the hint__content class. The bundled CSS looks nice, so it's easy to drop into an existing project.


browser mv* client-side frameworks

The jsblocks Framework

Posted on .

Antonio Stoilkov sent in jsblocks (GitHub: astoilkov/jsblocks, License: MIT, npm: jsblocks), a new client-side framework that claims to have a rendering performance that is faster than React. It's a full-featured framework, and has some unique features. For example, it aims to improve the debugging experience of client-side apps, so rather than getting lost in confusing stack traces and DOM trees, it attempts to display very clear error information.

jsblocks debug examples

jsblocks is made of three main modules: blocks.query, blocks.mvc, and jsvalue. You can use all three libraries, or create builds with the ones you need. Here's what each library does:

  • blocks.query: The core library
  • blocks.mvc: The "Model View Collection" implementation
  • jsvalue: A utility library that works like Underscore or lodash

Models in jsblocks are used to represent values that are rendered in views. For example:

var User = App.Model({  
  init: function () {
  firstName: blocks.observable(),
  lastName: blocks.observable(),
  fullName: blocks.observable(function() {
    return this.firstName() + ' ' + this.lastName();

App.View('Profile', {  
  profile: User({
    firstName: 'John',
    lastName: 'Doe'

Models use observables, so this example should make complete sense to those of you who are experienced with Knockout -- in some ways it reminds me of a blend of ideas from React, Backbone, and Knockout.

Collections are actually built out of observables, but the author suggests that they add an extra architectural layer to your application that can make it clearer. This definitely reminds me of Backbone.

Collections and models can also talk to the server -- both have a sync method:

var Products = App.Collection({  
  options: {
    create: {
      url: 'serviceURL/CreateProduct'

App.View('Products', function () {  
  products: Products(),

  init: function () {
      ProductName: 'Fish'

    // sends AJAX request to the create.url with the new item

Models even support validation, so you can validate user input. Because jsblocks lets you work with data it also has a utility library for iterating and filtering data. This is the jsvalue library I mentioned earlier:

  .range(1, 100)
  .map(function (value) {
    return value * 2;
  .filter(function (value) {
    return value % 2 == 0 && value < 50;

Views support routing, and the routing implementation supports hash URLs and pushState history. Views can also be rendered on the server.

jsblocks has very quickly earned a big following -- it has over 1,500 stars on GitHub. I think the reason for this is it combines almost everything you need for modern web development: data modelling with validation, server sync and filtering, server-side view rendering, client-side view components and data binding, and client-side routing.

If you're a Backbone user and want to try something new then jsblocks may appeal to you. Equally, if you're a React user but struggle with dealing with data then jsblocks might make things easier for you.


apps browser routing chat

GitterCLI, Wayfarer

Posted on .


I'm pleased to see that applications made with Blessed are starting to trickle into the DailyJS inbox! GitterCLI (GitHub: RodrigoEspinosa/gitter-cli, License: MIT, npm: gitter-cli) by Rodrigo Espinosa Curbelo is a Gitter client for the terminal. Those of us that are seasoned IRC veterans aren't too fond of web chat clients, and although Gitter has IRC access, GitterCLI could potentially take advantage of Gitter-specific features.

It uses the node-gitter module, and works using the standard HTTP authentication API implemented by Gitter. One thing I noticed was it drops authentication tokens into a "secrets" JSON file, and I couldn't work out if it checks to see if the permissions are safe (i.e., not readable system-wide). So you might want to check the secrets file when running it on a shared server. It stores the authentication token rather than your password, but naturally it still needs some level of protection.

Update: Corrected the GitHub URL.


Wayfarer (GitHub: yoshuawuyts/wayfarer, License: MIT, npm: wayfarer) by Yoshua Wuyts is a client-side router, a bit like react-router. Wayrarer is slightly different because it's a "method-less" router with an EventEmitter-inspired API and supports composition through mounting subrouters.

This is what the super-pretty ES6 syntax looks like:

const wayfarer = require('wayfarer')

const router = wayfarer('/404')

router.on('/', () => console.log('/'))  
router.on('/404', uri => console.log('404 %s not found', uri))  
router.on('/:user', (uri, param) => console.log('user is %s', param.user))

// => 'user is tobi' 

// => '404 /uh/oh not found' 

The combination of Wayfarer's API and fat arrow is very easy to follow, and the API should be easy to use with your other favourite client-side libraries.