Fronteers 2014: A Glossary
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.
BlobAPI
from the lecture by Paul KinlanBlobs (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 FordCSS generator for CSS 3 keyframe animations at http://cssanimate.com/.
Dialog
from the lecture by Paul KinlanThe 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 FordCSS generator for flexbox at http://the-echoplex.net/flexyboxes/.
getUserMedia
from the lecture by Swetank DixitAPI 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.
Intern
from the lecture by Nicholas GallagherThe Intern is a test framework for JavaScript like Karma and Testem, focused on compatibility.
Istanbul
from the lecture by Kyle SimpsonIstanbul is a JavaScript code coverage tool. Of course, there is a grunt plugin.
JSComplexity
from the lecture by Kyle SimpsonJSComplexity is an online tool for complexity analysis of JavaScript projects. Fortunately, it has a grunt plugin.
Line-mode browser
from the lecture by Nathan FordRebuild by CERN of the original line-mode browser from 1992. See the line-mode browser.
Penthouse
from the lecture by Dave OlsonA 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
from the lecture by Thomas PalefPhaser is an open source framework for building browser based games. See also the games that Thomas built.
Plato
from the lecture by Kyle SimpsonPlato is a JavaScript source code visualization, static analysis, and complexity tool. And yes, it has a grunt plugin.
ServiceWorker
from the lecture by Paul KinlanA 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 GallagherThe 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.
Spritesmith
from the lecture by Dave OlsonGrunt 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
from the lecture by Nicholas GallagherSUIT 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.
SVGInjector
from the lecture by Sara SoueidanA 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).
Traceur
from the lecture by Kyle SimpsonThe 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 FordCSS generator for CSS 3 linear and radial gradients at http://www.colorzilla.com/gradient-editor/.
Webpack Module Bundler
from the lecture by Nicholas GallagherWebpack Module Bundler is an alternative to RequireJS that isn't necessarily optimized for async loading like RequireJS but supports the much simpeler CommonJS syntax.
WebPageTest
from the lecture by Dave OlsonVery powerful tool for testing performance of sites. The Chrome plugin SPOF-O-Matic helps to test how sites react when external CDNs are unavailable.
WebRTC
from the lecture by Swetank DixitPeer-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.
will-change
from the lecture by Rachel NaborsThe 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.
Xibalba
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.
Yeast
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.