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.
BlobAPIfrom the lecture by Paul Kinlan
CSS Animatefrom the lecture by Nathan Ford
CSS generator for CSS 3 keyframe animations at http://cssanimate.com/.
Dialogfrom 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 Boxesfrom the lecture by Nathan Ford
CSS generator for flexbox at http://the-echoplex.net/flexyboxes/.
getUserMediafrom 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.
Internfrom the lecture by Nicholas Gallagher
Istanbulfrom the lecture by Kyle Simpson
JSComplexityfrom the lecture by Kyle Simpson
Line-mode browserfrom the lecture by Nathan Ford
Rebuild by CERN of the original line-mode browser from 1992. See the line-mode browser.
Penthousefrom 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.
Phaserfrom the lecture by Thomas Palef
Platofrom the lecture by Kyle Simpson
ServiceWorkerfrom the lecture by Paul Kinlan
Shadow DOMfrom 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.
Spritesmithfrom 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.
SUIT CSSfrom 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.
SVGInjectorfrom the lecture by Sara Soueidan
Traceurfrom 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 Generatorfrom the lecture by Nathan Ford
CSS generator for CSS 3 linear and radial gradients at http://www.colorzilla.com/gradient-editor/.
Webpack Module Bundlerfrom the lecture by Nicholas Gallagher
WebPageTestfrom the lecture by Dave Olson
WebRTCfrom 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.
will-changefrom 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.
Xibalbafrom the lecture by Dominic Szablewski.
Yeastfrom 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.