The JavaScript blog.


meteor books plugins databases servers apps mysql sponsored-content jquery

Your First Meteor Application, OData Server, ItemSlide.js

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull's Your First Meteor Application is a highly focused, beginner-friendly introduction to Meteor. David updates the book regularly when Meteor changes, so it's worth checking back every so often to look for new content.

You can read the book online or download the PDF for free. If you prefer video, there are also screencasts for $39.

OData Server

The OData Server (GitHub: gizur/odataserver, License: MIT, npm: odataserver) by Jonas Colmsjö is an OData server that's backed by MySQL. It's easy to drop into an Express project, and it's designed to work as a quick "mobile backend as a service" type of app.

It has a simple HTTP API, and Jonas has included usage examples for curl that show you how to create users, databases, and insert data. It actually does things like MySQL database and schema creation, so it requires a MySQL administrator account to work correctly.

If you're interested in this and want to quickly try it out, the advanced usage guide has instructions for deploying it to Docker.


ItemSlide.js (GitHub: itemslide/itemslide.github.io, License: MIT, npm: itemslide) by Nir Lichtman is a touch-friendly carousel.

With jQuery you can set it up like this:

var carousel = $('ul');  
carousel.itemslide({ swipe_out: true });  

And it has events for responding to user interaction:

carousel.on('pan', function(e) {});  
carousel.on('changeActiveIndex', function(e) {});  
carousel.on('changePos', function(e) {  
  console.log('new pos:', carousel.getCurrentPos());
carousel.on('swipeout', function(event) {  
  console.log('swiped out slide:', event.slide);

You don't have to use it with jQuery, but if you do you'll get things like mousewheel support.


books sponsored-content meteor react WebComponent

SceneVR: Node and WebGL 3D Scenes

Posted on .


For years I've wanted to make a WebGL version of Elite (or maybe Elite II). The technical trick to making it really compelling and native to the web would be if it streamed data with WebSocket to the client... maybe huge persistent galaxies could live on clusters of Node/io.js servers!

I'm never going to have the time to make anything like that, but Ben Nolan's SceneVR project (GitHub: bnolan/scenevr, License: BSD, npm: scenevr) seems like a fun way of experimenting with interconnected virtual reality worlds. The demo allows you to walk around a 3D world with links to various games. There's a Pac-Man game, a chess game, and some other cool stuff as well.

It works by streaming XML data to the browser from a Node server. The server uses Express, and the scenes rendered on the client use HTML-like markup with CSS:

  <box id="mycube" position="1 2 3" scale="1 1 1" style="color: #f07" />

The scenes can then be scripted with JavaScript, so you can add rules to create games:

document.getElementById("mycube").addEventListener("click", function(e){  

It even supports multiplayer games by streaming player events to each client. Editing scenes also pushes data to the client, so you can live edit and quickly preview the results.

Ben has added WebVR browser support, so if you've got an Oculus Rift you can actually view scenes in VR.


libraries events books conferences strings

StringFormatter, Hapi.js in Action, FullStack 2015

Posted on .


Simon Blackwell sent me StringFormatter (GitHub: anywhichway/stringformatter, License: MIT), a string formatting library that aims to go beyond the new ECMAScript string templates. It's a bit like sprintf formatting, but includes some more complex features:

  • Numerical type formatting
  • Date formatting
  • CSS styles
  • Conditional formatting
  • Caching

It can handle expressions like currency as well, which is ideal for web applications when you want to display multiple currency formats. You can use StringFormatter.register to register a formatting for a type. For example, if you had a date formatter object you could associate it with Date like this: StringFormatter.register(Date, dateFormatter, 'Date').

The usual way to format a string is with StringFormatter.format, but you can use StringFormatter.polyfill() to add string formatting to the String object. Format strings are represented with JavaScript-inspired syntax:

  "The time is now {Date: {format:'hh:mm'}} and I have {number: {fixed: 2, currency: '$'}}.",
  new Date('2015-03-13T10:01:27.284Z'),

All format options accept an additional style string, which causes the output to be wrapped in span elements with inline styles.

Ideally this library should be used with a templating system to really cut down on format invocation boilerplate. Simon has included an example for the Ractive template engine.

Hapi.js in Action

Hapi in Action

Hapi.js in Action by Matt Harrison is a book that's dedicated to web development with Hapi.js. It has been released as an early access edition, and pricing starts at $35.99 for the eBook. The planned content includes authentication, building modular applications with plugins, testing, production, proxies, and creating streaming services.

Hapi.js in Action teaches you how to build modern Node-driven applications using Hapi.js. Packed with examples, this book takes you from your first simple server through the skills you'll need to build a complete application. In it, you'll learn how to build websites and APIs, implement caching, authentication, validation, error handling, and a lot more. You'll also explore vital techniques for production applications, such as testing, monitoring, error handling, deployment, and documentation.

The first chapter is available for free, and early access supporters can get chapters two and three as well.

FullStack 2015

FullStack 2015 is an event that's all about JavaScript, Node, and the Internet of Things, that will be held in London on 25th to 27th June. Tickets start at £375 for early bird tickets.

There's currently a FullStack call for papers, so if you're interested in speaking at the conference you've got a week to apply.


books sponsored-content meteor react WebComponent

Your First Meteor Application, CommonJS React Components, WebComponents

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull sent me Your First Meteor Application, a highly focused, beginner-friendly introduction to Meteor. One thing that's cool about this is book is David updates it regularly when Meteor changes.

You can read the book online or download the PDF for free. There are even screencasts!

CommonJS React Components

What do you do if you want to create reusable isomorphic CommonJS React components? You can install React with npm, but what's the ideal pattern for structuring these components? How should the CSS be managed?

Aaron Kaka has been working on an experiment to use CommonJS modules as a way of sharing UI components. The work is inspired by a blog post by Simon Smith, and you can find it on GitHub here: aaronkaka/commonjs-react-components.

This proof-of-concept uses events for all interactions, so knowledge of the internal library and its dependencies is not required. You can use styling through require statements -- component specific styling is scoped to the component.

It uses webpack and live reload, so it should fit in with a modern Node-based toolchain.

Using CommonJS modules and events should appeal to Node programmers who want to make reusable client-side components. If you're a little lost with React in Node, or CommonJS and React, then this repository will give you a head start.


Interest in WebComponents is growing, but unless you're involved with them it can be hard to see the benefits. Leon Revill has been working with them, and has written an article that outlines the basics of how to create WebComponents and why they're exciting. From What are WebComponents and why are they important?:

Once WebComponents are properly supported and established you should be able to write a WebComponent that can be used in all of your projects regardless of the other technologies used. Forget writing plugins for jQuery, directives for AngularJS and addons for Ember.js. Write once use many. This has a huge benefit and in my mind is one of the most significant benefits of WebComponents.

The article includes technical examples and addresses some concerns about the divergence between X-Tag, Polymer and Bosonic.


tutorials books

Holiday Reading for JavaScript Programmers

Posted on .

Hemingway and JavaScript

If you're lucky enough to be enjoying a festive holiday right now, then you're probably starting to get bored of Christmas movies and long dark teatimes of the soul. Rather than knuckling down with the family to watch Elf for the umpteenth time, why not load up your favourite reading device with some programming books and articles?

Angus Croll sent in a copy of his book If Hemingway Wrote JavaScript (No Starch Press, $15.95), which makes comparisons between literary figures and programming styles. This book started as a blog post about Hemingway, and there are amusing posts on his blog, like Animals writing JavaScript. I thought it would be hard to stretch the original idea out into an entire book, but Angus uses the concept to explore the broader question of how we write and think about JavaScript:

JavaScript has plenty in common with natural language. It is at its most expressive when combining simple idioms in original ways; its syntax, which is limited yet flexible, promotes innovation without compromising readability. And, like natural language, it's ready to write. Some of JavaScript's more baroque cousins must be edited with an IDE (integrated development environment—a sort of Rube Goldberg machine for coding). JavaScript needs nothing more than a text file and an open mind.

The question of style in programming is usually approached with defensive trepidation, but the literary conceit allows Angus to present different stylistic ideas without judging them. For example, Virginia Woolf's poetic stream of consciousness is recreated with a mix of long lines and flexible use of semicolons:

If the semicolon is the period of JavaScript, then the comma operator is its semicolon. Programmer Woolf loves the comma operator, and in her happy numbers solution, she uses it to excess. The result is a dreamy, melancholic form of JavaScript (is there any other?) made dreamier still by the heavy, almost dangerous level of n alliteration and some gorgeously expressive pairings. In To the Lighthouse, Woolf writes of night's shadows: "They lengthen; they darken"; in her happy numbers solution we get the wistfully poetic numerals.shift(), numerals.length.

I commute across London everyday and read to pass the time. Over the years I've moved from pulp sci-fi to 20th century modernists and the classics, so this book is ideal for me. I'm not sure how many literary programmers there are, however, so this is definitely a novelty that I will cherish.

Other readers have also recently sent in some interesting resources that you might like to read over the holiday. Thai Pangsakulyanont's JavaScript for Automation Cookbook contains examples for Apple's new scripting system that allows you to control Yosemite applications with JavaScript. It includes iTunes, Safari, system events, and how to use CommonJS modules with Browserify, so you can actually make maintainable automation scripts.

Eugene Abrosimov sent in a big list of Backbone.js tutorials, articles, videos, and examples. There should be a few things on there to load up Instapaper/Pocket if you use Backbone.

And, just over a week ago I received the first print of my book, Node.js in Practice (Manning, $39.99). I wrote it with Marc Harter, and we've designed the book for intermediate to advanced Node developers. Our publisher, Manning, also publishes Node.js in Action (Manning, $35.99) which is well suited to new Node programmers.