Frontend Focus
Issue 213 — November 4, 2015
‘Today marks the anniversary of the World Wide Web Consortium (W3C) declaring the HTML5 standard complete’ and other reflections on HTML5’s maturity.

A look at how a webapp leant on layout patterns well suited to the Flexible Box Layout (flexbox) system now supported by most browsers.
Smashing Magazine

Some hands-on exercises with all of Firefox’s new visual design tools. Fun stuff.

Frontend Masters
This is a practical class for students who are very comfortable with the JavaScript language but want to level up on their Data Structures and Algorithms knowledge.
Join us Nov 17-20th online or in-person.
Frontend Masters   Sponsor

Telerik’s Cody Lindley has produced a guide for ‘anyone to learn the practice of front-end development’ made up of brief insights and curated links.
Cody Lindley

Designed to add voice features to sites and apps across all major platforms. It supports 51 languages and has no dependencies. We had a lot of fun playing with this, but be aware of the licensing.

CSS image replacement is the technique of replacing a text element with an image. This post looks at the long line of techniques that have been used to implement it over the years.
Marie Mosley

Google Docs supports pulling in HTML table into a spreadsheet using a single =ImportHtml expression.
Robert Kosara

A 30 minute talk from JSConf EU 2015 coupled with slides.
Ryan Seddon

Jobs Supported by

Can't find the right job? Want companies to apply to you? Try

In Brief

'The HTML5 spec has 609,160 words in it. That's longer than Infinite Jest.' news
Paul Ford

Goo Create Adds Support for Bringing HTML into WebGL Scenes news tools
If you thought you included WebGL in an HTML document, well.. now think about including HTML documents inside your WebGL scenes as well..
Goo Create

How Google’s AMP Project Speeds Up The Web - by Sandblasting HTML news
Ars Technica

Which Input When? tutorial
A look at which form input types to use in certain contexts.
Morgan Carter

Animating the `content` Property tutorial
Robin Rendle

How to connect to a MySQL database with JavaScript tutorial
With the DreamFactory REST API platform, database connections for web apps are a breeze. In this tutorial, we lay out how to build a simple address book with MySQL, DreamFactory, and JavaScript.
DreamFactory  Sponsor

How To Style and Position SVG Text With The tspan Element tutorial
Steven Bradley

Your First Offline Web App featured
Learn how to integrate a service worker into an existing application to make it work offline.
Google Developers

Bouncing Ball Game using HTML5 Canvas Element - Part 1 tutorial
Hemant Joshi

Three Years with CSS Grid Layout opinion
Rachel Andrew

Why Static Website Generators Are The Next Big Thing opinion tools
Smashing Magazine

img2css: Convert Any Image to A Pure CSS Image tools
A tool that converts an image into an element with a colored CSS shadow for every pixel. Beware - this gets highly inefficient with images that aren’t small.
Javier Bórquez

canvid.js: Tiny Library to Play 'Videos' on Canvas Elements code
Essentially plays many small JPEG frames. Helps get around autoplay restrictions of videos.

Gendy.js: A Module for Dynamic Stochastic Web Audio Synthesis code
Andrew Bernstein and Ben Taylor

Discover 52 tips to improve your .NET performance rawurl
Our new eBook features dozens of tips and tricks to boost your .NET performance. Download your free copy.
antsperformanceprofiler  Sponsor

Google Web Font Inspiration in HTML and CSS demo
Tobias Ahlin

WebGL-powered Starmap for Star Citizen demo
A beautiful use of WebGL, based on a forthcoming space game by the creator of Wing Commander.
Roberts Space Industries