Frontend Focus
Issue 218 — December 9, 2015
The calc() function lets you use simple mathematical operations in CSS (almost) anywhere a length, angle, or similar number is required. It also lets you pull off tricks preprocessors can’t, such as calc(50% - 1em)
Ana Tudor

Someone watched all of the talks from the superb Chrome Dev Summit, took notes on each, and embedded the videos for you to enjoy too.
Daniel O'Connor

Rather than having a blank space while a large background image loads, you can show a blurred low res version then transition to the high res later. This is a very thorough tutorial showing how.
Emil Björklund

Get a breakdown of the digest cycle including AJAX, templating, services cache calls. See how each controller spends its time and what’s slowing your app. Sign up to the private beta.
Opbeat   Sponsor

PostCSS, a plugin based toolkit for transforming CSS, is commonly lauded as being the next big thing in working with CSS. In this Smashing Magazine article, Drew Minns gives a solid tour.
Drew Minns

A simple page that shows how every HTML5 form element looks on your current operating system and browser.
Joshua Jenkins

Provides a vocabulary for describing graphical documents for improved representation for people with disabilities.

At JSConf US, Microsoft announced that they will open-source the core components of Chakra as ChakraCore, including all the key components of the JavaScript engine powering Microsoft Edge.

The HTML Accessibility API Mappings (HTML-AAM) define how user agents map HTML 5.1 elements and attributes to platform accessibility APIs.

Jobs Supported by

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

In Brief

O'Reilly Fluent 2016 Best Price Ends Tomorrow (Mar 7-10, San Francisco) news
O'Reilly Media

Opera 34 (based on Chromium 47) Released: What's New? news
Support for Array.prototype.includes, ES6 rest parameters, requestIdleCallback, and more.
Mathias Bynens

Unity 5.3 WebGL Updates news
Unity is a popular desktop and mobile game engine which recently added WebGL export support. This has now had significant improvements.
Unity Blog

Mozilla Will Stop Developing And Selling Firefox OS Smartphones 

You Know How to Code, but How Are Your Design Skills? course
Learn UI UX design through part-time, online courses with 1-on-1 mentorship from expert designers.
Designlab  Sponsor

CSS Preprocessing with Visual Studio tutorial
Telerik Developer Network

Interactive Geographical Map with SVG and JavaScript tutorial
Dudley Storey

Intuitive Scrolling Interfaces with CSS Scroll Snap Points tutorial
Simon Codrington

Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB and WebSockets tutorial
Pedro Teixeira

Introducing sGrid: A Stylus-based Flexbox Grid System tutorial tools

Rotate Graphical Elements on Scroll with JavaScript tutorial
Dudley Storey

Remembering the Document Outline in an HTML5 World video

Why I'm Excited About Native CSS Variables opinion
Philip Walton

CSS3 Is Not Proven to Be Turing Complete opinion
Jonas Schubert Erlandsson

DreamFactory simplifies data connections for web apps tools
Free and open source, DreamFactory automatically generates REST APIs from nearly any data source. We'll even host it for you for free.
DreamFactory  Sponsor

Test CSS Flexbox Rules Live tools
A quick, handy way to see what different flexbox CSS properties do with some boxes inside a container.

Wee: A Lightweight, Logical Front-End Framework tools

Primer: The CSS Toolkit and Guidelines that Power GitHub tools code

Expressive CSS: An Approach to Writing Scalable CSS code opinion
John Polacek

CSS SANS: A CSS Font With One Div Tag Per Letter code
Yusuke Sugomori

Solid: BuzzFeed's CSS Style Guide code
Uses immutable, atomic CSS classes for rapid prototyping.

maperial.js: A JavaScript API to Create 'Dynamical' WebGL Maps code

The Story of Space Debris, in WebGL demo
The Royal Institution

An Automatically Playing 3D Snake Game using WebGL demo
Maros Hluska