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.


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.


testing node dom modules calendar

Prüfer, Calendar Base

Posted on .


Johnathan Leppert wanted a way to generate complex DOM structures for UI performance testing. He decided to use the Prüfer sequence, and created a Node module that can generate random trees of data (GitHub: jleppert/prufer, License: MIT).

Here's an example of the usage:

var prufer = require('prufer');

// to make a tree, supply a series of integers
var tree = prufer([3, 3, 3, 4]);

// you'll get back an array of edges

I thought the Prüfer sequence sounded like a cool way to do this -- it might be useful for lots of Node-related stream tools.

Calendar Base

Wesley de Souza sent in a module for generating calendars as arrays of objects. The module is called Calendar Base (GitHub: WesleydeSouza/calendar-base, License: MIT, npm: calendar-base). To use it, you just need to instantiate a new calendar:

var cal = new Calendar({ siblingMonths: true });  
cal.getCalendar(2015, 5);  

The arrays it generates have objects like this: { day: 31, weekDay: 0, month: 4, year: 2015, siblingMonth: true }. It also has methods for changing the start date, and selecting the current date.

It reminds me of typing cal in Unix, which is still how I use calendars instead of using a fancy desktop application...


libraries ui ajax dom http rest

Databound, Typist

Posted on .



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 (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.


libraries ui ajax utilities dom http rest

Curl Converter, aja.js, sneakpeek

Posted on .

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 (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:

  .data({ firstname: 'John Romuald' })
  .on('200', function(response) {})

It also supports some DOM manipulation:


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


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.