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.
An interactive documentary about the ISEE-3 spacecraft. A Chrome experiment using WebGL.
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 generator for CSS 3 keyframe animations at http://cssanimate.com/.
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).
An overview of supported ES6 features for different platforms (polyfills, browsers, runtimes).
CSS generator for flexbox at http://the-echoplex.net/flexyboxes/.
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.
The Intern is a test framework for JavaScript like Karma and Testem, focused on compatibility.
Istanbul is a JavaScript code coverage tool. Of course, there is a grunt plugin.
JSComplexity is an online tool for complexity analysis of JavaScript projects. Fortunately, it has a grunt plugin.
Rebuild by CERN of the original line-mode browser from 1992. See the line-mode browser.
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.
Phaser is an open source framework for building browser based games. See also the games that Thomas built.
Plato is a JavaScript source code visualization, static analysis, and complexity tool. And yes, it has a grunt plugin.
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.
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.
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.
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.
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).
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.
CSS generator for CSS 3 linear and radial gradients at http://www.colorzilla.com/gradient-editor/.
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.
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.
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.
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.
A web based 3D shooter by phoboslab.org build with the Impact Game Engine. Play it here. It now even offers WebVR support.
"Tiny but linear growing unique id generator." A function to create better cachebusting variables, now formalized as an NPM package.