15 Apr 2015

As I noted in my previous post about Fronteers 2014 there were not as many talks about usable new techniques or tools as I would have liked. This doesn't mean that no interesting new terms were mentioned. That's why I will supply a list of the subjects that were new to me.

A Spacecraft for All

An interactive documentary about the ISEE-3 spacecraft. A Chrome experiment using WebGL.


from the lecture by Paul Kinlan

Blobs (Binary Large OBjects) are common in most programming languages but relatively new in JavaScript. The File API is based on Blob and Blob content can be read with a FileReader object.

CSS Animate

from the lecture by Nathan Ford

CSS generator for CSS 3 keyframe animations at http://cssanimate.com/.


from the lecture by Paul Kinlan

The experimental Dialog HTML element is a semantic element that can be used for e.g. modal dialogs. It's only supported in Chrome 37+ at the moment. Naming conventions around this common component are very unclear (modal, dialog, "popup" and backdrop, fade, "fog", overlay) so it would make a very useful addition, in my opinion. Check out this jsfiddle (Chrome only).

ES6 Compatibility Table

An overview of supported ES6 features for different platforms (polyfills, browsers, runtimes).

Flexy Boxes

from the lecture by Nathan Ford

CSS generator for flexbox at http://the-echoplex.net/flexyboxes/.


from the lecture by Swetank Dixit

API for accessing video/audio devices from the browser. See many demos here, e.g. a real-life color-picker. As noted in the talk, using https will allow for the browser to store the permission to access the multimedia devices. A very detailed tutorial can be found on html5rocks. In this tutorial getUserMedia is also combined with CSS filters to apply real-time effects to a video stream.


from the lecture by Nicholas Gallagher

The Intern is a test framework for JavaScript like Karma and Testem, focused on compatibility.


from the lecture by Kyle Simpson

Istanbul is a JavaScript code coverage tool. Of course, there is a grunt plugin.


from the lecture by Kyle Simpson

JSComplexity is an online tool for complexity analysis of JavaScript projects. Fortunately, it has a grunt plugin.

Line-mode browser

from the lecture by Nathan Ford

Rebuild by CERN of the original line-mode browser from 1992. See the line-mode browser.


from the lecture by Dave Olson

A node module (with a grunt plugin and an online tool) to generate the critical path of CSS to speed up page rendering. The browser waits with displaying any page until the CSS is loaded or times out eventually, resulting in a blank page. Of course it is always recommendable to have the CSS combined and minified (and gzipped), but if performance is important it might be an option to load it inline (!) to prevent failing on bad connections.

Instead of loading all the CSS inline, you can convert the critical CSS for the first page (the above-the-fold CSS) to inline CSS in the document head and load the full CSS in the bottom of the body, where the JavaScript sources should be as well. Extracting this critical CSS is what Penthouse does.


from the lecture by Thomas Palef

Phaser is an open source framework for building browser based games. See also the games that Thomas built.


from the lecture by Kyle Simpson

Plato is a JavaScript source code visualization, static analysis, and complexity tool. And yes, it has a grunt plugin.


from the lecture by Paul Kinlan

A ServiceWorker is a type of JavaScript Worker. A Worker is a solution to run background processes by spawning isolated threads. Service Workers run separately from a web page (just like an OS level service) but still runs in the browser. It can be used to improve the off-line experience of an app. See this introduction and this implementation.

Shadow DOM

from the lecture by Nicholas Gallagher

The Shadow DOM lets you manipulate parts of an HTML document that are normally invisibly encapsulated within another HTML element. An example is styling the controls (play, rewind) of the video tag with CSS. This introduction shows some examples. It's part of webcomponents, allowing you to create custom components and hiding the contents in a shadow DOM. It also enables scoping of styles. I also made an example in this fiddle.


from the lecture by Dave Olson

Grunt plugin to create a spritesheet. I use Compass' magic sprites to do this in Sass, but it might be useful if you want to use libsass or LESS.


from the lecture by Nicholas Gallagher

SUIT CSS is a reliable and testable styling methodology for component-based UI development. It offers a.o. a naming convention, a pre-processor and CSS testing.


from the lecture by Sara Soueidan

A library for inlining SVGs with client-side JavaScript. This combines the benefits of storing the resource in an external file with the benefit of using CSS (normally only for inline SVGs).


from the lecture by Kyle Simpson

The Traceur compiler lets you write in ES6 syntax and compile it back to ES5 so you can use ES6 features in today's browers. According to the ES6 compatibility table it supports 63% of ES6 features at this moment.

Ultimate CSS Gradient Generator

from the lecture by Nathan Ford

CSS generator for CSS 3 linear and radial gradients at http://www.colorzilla.com/gradient-editor/.

Webpack Module Bundler

from the lecture by Nicholas Gallagher

Webpack Module Bundler is an alternative to RequireJS that isn't necessarily optimized for async loading like RequireJS but supports the much simpeler CommonJS syntax.


from the lecture by Dave Olson

Very powerful tool for testing performance of sites. The Chrome plugin SPOF-O-Matic helps to test how sites react when external CDNs are unavailable.


from the lecture by Swetank Dixit

Peer-to-peer connections in the browser, supported in FF and Chrome at the moment. Using the data channels, it was even possible to create a client-side streaming torrent client.


from the lecture by Rachel Nabors

The CSS property "will-change" is a new feature (Chrome 36, FF 36) that can inform the browser beforehand that certain CSS animation may be applied to an element, helping with optimization. See the docs or this in-depth article on Sitepoint.


from the lecture by Dominic Szablewski.

A web based 3D shooter by phoboslab.org build with the Impact Game Engine. Play it here. It now even offers WebVR support.


from the lecture by Arnout Kazemier

"Tiny but linear growing unique id generator." A function to create better cachebusting variables, now formalized as an NPM package.