The JavaScript blog.


rest array ES7 JSON

Array Future, JSONFormData

Posted on .

Array Future

Kiko Beats sent in array-future (GitHub: Kikobeats/array-future, License: MIT, npm: array-future), a module that collects together several ES7 proposals for instance methods on Array:


[1, 2, 3].average();
// 2

[1, 2, 3].first();
// 1

[1, 2, 3].shuffle();
// [ 2, 3, 1 ]

[1, 2, 3].includes(3);
// true

The includes method is implemented as described by this documentation. Each method is tested with Mocha, and there's documentation in the readme.


I've been doing a lot of work with the FormData API, and I found a JSONFormData polyfill by Roman Liutikov in the DailyJS submission queue. It implements the W3C HTML JSON form submission API:

Instead of capturing form data as essentially an array of key-value pairs which is the bread and butter of existing form encodings, it relies on a simple name attribute syntax that makes it possible to capture rich data structures as JSON directly.

This implementation lets you submit data to servers as JSON by setting a form's enctype to application/json. It also supports REST API HTTP verbs like PUT and DELETE.

Submitting data with JavaScript is similar to FormData -- just use new JSONFormData(form).formData to get an object based on the form.

If you're writing RESTful services with JSON and want to make a quick web interface, then JSONFormData should help speed things up.


libraries JSON ui

DefiantJS, Mprogress.js

Posted on .


DefiantJS (GitHub: hbi99/defiant.js, License: MIT) by Hakan Bilgin is a library for searching JSON documents with XPath expressions.

Do you need to query large JSON structures? Do you end up coding loops to parse the JSON and identify the data that matches your query? DefiantJS offers a better way. DefiantJS extends the global JSON object with a "search" method that enables lightning-fast searches using XPath expressions.

It comes with something called "snapshot search" that allows you to quickly search large documents. It's used like this:

var snapshot = Defiant.getSnapshot(data);  
// Snapshot search - this is more than 100 times faster than 'regular search'
found = JSON.search(snapshot, '//item');  

You can also use DefiantJS to apply JSON to XSLT. This may be useful if you have existing XSLT documents that you want to use with a newer JavaScript project.

The project's documentation has interactive examples that you can try out, so you can get a feel for how XPath expressions work.


Mprogress.js (GitHub: lightningtgc/MProgress.js, License: MIT) is a Material Design-inspired progress bar. It can display a progress bar at the top of the screen like Android applications, but you can also place it within other page elements as well.

It uses a simple constructor function called Mprogress, and you can start the progress indicator animation with start. When the task has finished you call end:

var mprogress = new Mprogress();  
// Slow things happen here

It has other methods as well, like set for changing the position, and it supports video-style "buffering" indicators where two bars are used to show the current playback position and the point at which the data has been buffered. The project's GitHub page has animated gifs that illustrate each of the animation types.


libraries JSON node modules react json-schema

Syphon, json-schema-benchmark

Posted on .


Syphon (GitHub: scttnlsn/syphon, License: MIT, npm: syphon) by Scott Nelson is an implementation of the Flux architectural pattern for React. It helps you to structure applications around a single immutable state value, and implements the dispatching of actions to various state-transitioning handler functions.

The application's state is stored in an immutable data structure that you create with the atom method. To access a value, you deref it, and you can also modify it by using swap:

var state = syphon.atom({ foo: 'bar' });

state.swap(function(current) {  

  return current.set('foo', 'baz');

// => { foo: 'baz' }

Responding to state changes involves writing handlers, which takes the form of functions with two arguments: value and currentState. The application's state is available in the second argument.

Syphon's author recommends using the multimethod module to deal with handlers that branch on multiple values.

Syphon includes the root method for mounting your component hierarchy, and a mixin for adding helpers to components for accessing application data and dispatch values.


I may need to create some JSON schemas in the near future, so it was fortunate that Allan Ebdrup sent in json-schema-benchmark. This is a benchmark for JSON schema validators, and covers the following modules:

It also shows test failures when run against the official JSON Schema Test Suite. One cool addition is a summary of tests that caused side-effects, so you can see which validators altered values.


JSON react careers

Dynamic-json-resume, JSnoX

Posted on .


I don't know about you, but I hate putting together my résumé. I start to focus too much on the presentation even though you're meant to keep it simple. Dynamic-json-resume (GitHub: jrm2k6/dynamic-json-resume, License: MIT, npm: json-resume-dynamic) by Jeremy Dagorn is a module for generating résumés from a simple JSON format. You can output PDFs, and use it with a Node application.

Because your CV is now represented by a structured data format, you can reuse it in other places. For example, your personal website could render it in a sidebar.

James Long's article, Removing User Interface Complexity, or Why React is Awesome, inspired the project. React seems like the perfect way to manipulate and render your JSON CV.


What do you do if you like React but dislike JSX? Shawn Price sent in his coworker's project, JSnoX (GitHub: af/JSnoX, License: MIT, npm: jsnox), which provides a simple React markup API that works in pure JavaScript:

var d = require('jsnox')(React)  
var LoginForm = React.createClass({  
  submitLogin: function() { ... },

  render: function() {
    return d('form[method=POST]', { onSubmit: this.submitLogin }, [
      d('h1.form-header', 'Login'),
      d('input:email[name=email]', { placeholder: 'Email' }),
      d('input:password[name=pass]', { placeholder: 'Password' }),
      d(MyOtherComponent, { myProp: 'foo' }),
      d('button:submit', 'Login')

This API sidesteps the issue of JavaScript's lack of multiline string handling for embedded templates, while not requiring too much fiddly syntax for handling DOM attributes.


libraries animation JSON forms

Tweene, JSON Forms

Posted on .


Tweene (GitHub: SkidX/tweene, License: Artistic License 2.0, npm: tweene, Bower: tweene) by Federico Orrù is an API that wraps around popular animation libraries so you can switch implementation more easily. Rather than having to worry about whether you need to use translateX or just x, you can use Tweene's API instead.

These are the supported libraries right now:

To create animations, you have to make tween instances using Tweene, and then call methods that set the duration and easing. It actually has several API styles based on GASP, jQuery, and Velocity, but I prefer the fluent API:

  .to({ opacity: 0, left: '+=50px' })
  .on('complete', completeCallback)

The documentation for Tweene is detailed, and there are some examples on CodePen.

jQuery JSON HTML Forms

Cezary Wojtkowski sent in jquery-html-json-forms, a project that aims to support the W3C HTML JSON form submission specification:

This specification defines a new form encoding algorithm that enables the transmission of form data as JSON. Instead of capturing form data as essentially an array of key-value pairs which is the bread and butter of existing form encodings, it relies on a simple name attribute syntax that makes it possible to capture rich data structures as JSON directly.

This basically means you can use an enctype attribute of application/json in forms. This makes it a lot easier to create forms that send data to JSON APIs, rather than using the standard form encoding.

Cezary's project allows you to use enctype='application/json' and then get JSON out with $(formElement).JSONencode(). You can also enable and disable the plugin.

The HTML JSON form specification is new to me, but it seems really cool for those of us who create lots of JSON APIs.