The JavaScript blog.


node project-management modules apps slides presentations react

NewSprint, Spectacle

Posted on .


NewSprint (GitHub: rodati/newsprint, License: MIT, npm: newsprint) from Rodati is a command-line Node tool for generating a mobile-friendly email based on Trello cards.

I use Trello for project management, and for a while I archived each week (or sprint) into a list so it was easy for management to see what we've completed recently. This process could be automated with NewSprint, by sending an email with card summaries. The emails look very nice, and I like the fact it uses a command-line tool with JSON files for configuration.



Ken Wheeler sent in Spectacle (GitHub: FormidableLabs/spectacle, License: MIT, spectacle), a React-powered presentation library.

With Spectacle you can write slides with JSX. It supports tags like <Deck>, <Slide>, and there are even layout tags for making text appear in the right place without too much fiddling about with CSS. Here's a very basic example of a slide:

export default class extends React.Component {  
  render() {
    return (

It even supports a presenter view, so you can see the next side and the current time. If you're currently addicted to React then this will probably be preferable to messing around in Keynote/PowerPoint/etc.


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.


google-maps react polymer services ui libraries

Isomorphic Google Maps, MyScriptJS

Posted on .

Isomorphic Google Maps

Ivan Starkov sent in an isomorphic Google Maps component for React (GitHub: istarkov/google-map-react, License: MIT, npm: google-map-react). It provides several useful features, including rendering any React component over maps, lazy loading of the Google Maps API, and isomorphic rendering.

By rendering maps on the server, you can improve search engine visibility, and render maps without requiring JavaScript in the browser. Naturally you could also do other cool stuff with server-side libraries that would otherwise be made difficult in the browser.

The ability to render any React component over a map means you make dynamic map features that feel very fast -- Ivan's library calculates the co-ordinates independently of Google Maps, so you can treat your React code separately instead of worrying too much about how it relates to Google Maps.

Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.

This algorithm allows you to tweak hover probability of map objects, for example making some objects "more hoverable". distance_hover example with different hover probabilities

The main example shows a map combined with fast infinite scrolling, SVG icons, and balloons made with React.


MyScript is a service for handwriting and handwritten shape recognition. Gregory Pakosz sent in some Polymer MyScript components for interacting with the service. The components are built with MyScriptJS, and they cover things like mathematical expression and text recognition.

MyScript Web Components

The demos on the MyScript Web Components homepage are interactive, so if you select the <myscript-math> example and press play you should be able to draw some equations and see the results.


ui react ES6 libraries

FluxThis Router, React Transitive Number

Posted on .

FluxThis ES6 Router

Josh Horwitz wrote in to say that FluxThis has a new router that takes advantage of ES6 syntax. It has an API that is inspired by Koa for defining routes with middleware that drops through a stack using the yield statement:

export default function (router) {  
  router.use(function *(next) {
    // do some stuff
    yield *next;
    // do some stuff after everyone else

  router.all('/user*', function *userAuthHandler(next) {
    document.title = 'User Profile';

    // perhaps do some authentication stuff?
    if (authFails()) {
      return; // short circuit the middleware chain

    yield *next;

The idea is to use middleware without using deeply nested callbacks, which the generator syntax seems to solve quite nicely.

FluxThis is a Flux implementation by the developers at AddThis.


react-transitive-number (GitHub: Lapple/react-transitive-number, License: MIT, npm: react-transitive-number) by Aziz Yuldoshev is a React component that transforms numbers into stateful counters with animations. The author has a demo that compares plain HTML with the TransitiveNumber version.

To use it, just wrap a number with a <TransitiveNumber> component. The animation looks like a tumbler from an old clock, and apparently it was inspired by Groupon's old countdown timers.


frameworks libraries react

The Maple.js Framework

Posted on .

One thing Polymer developers advocate is the idea of WebComponents. Adam Timberlake sent in an ambitious React-based framework called Maple.js (GitHub: Wildhoney/Maple.js, License: MIT, npm: maple.js) that helps you to organise React projects by using WebComponents in a very Polymer-inspired way. That means you can use React with a more Polymer-style component approach, including HTML imports, custom elements, and ES6 modules.

Given the typical Flux architecture where components reside in their respective components directory, we continue that trend in Maple, where one component can register one or many custom elements – but each HTML document can only have one template element.

Because each document only has a single template element, it means that any associated stylesheets are "namespaced" to that component. This means CSS doesn't bleed over to other components. This level of encapsulation is important because components work best when they're highly self-contained. I'm not sure if Adam is advocating using standard CSS over React-Style -- the stylesheets in JavaScript approach has some advantages, but I believe Maple's approach will be more accessible to Polymer developers.

During development you can use a dynamically transpiled and JSX-parsed app, but Mapleify should be used for generating the production build. This is similar to Polymer's vulcanize tool.

Maple solves several problems that React users have to solve when starting from scratch, so I think it's worth trying, particularly if you like Polymer. There's a getting started with Maple video where Adam demonstrates how to build an app. There's also a demo application on Heroku.