Frontend Focus
Issue 271 — January 4, 2017
A Web designer wanted to try switching to PostCSS to benefit from its tooling and the cssnext plugin in particular. This is how it went and what he learned along the way.
Tyler Gaw

CSS Grid is coming to browsers, unprefixed and out from behind flags this year. This post covers some frequently asked questions.
Rachel Andrew

What ‘writing modes’ are, how they can be engaged via CSS, and what use they have to you.
Jen Simmons

Frontend Masters
Pick your skill level and get course suggestions ordered! Choose from four learning paths: Beginner, Intermediate, Advanced & Designers Learning Code.
Frontend Masters   Sponsor

A thorough post that covers the concept of Virtual DOM in a detailed yet easy-to-understand fashion.
Raja Rao DV

Names can sometimes be difficult to pronounce. Vocalizer.js, developed by Atif Azam, helps solve this problem on the Web.
Atif Azam

Pesky nesting issues are a thing of the past if we ‘learn from Lego’ and envision web content blocks in a Lego-esque fashion.
Samantha Zhang

A simple proxy that strips away CSS so you can check how your site behaves when styles fail to load.
Daniel McLaughlin and Eric Bailey

Jobs Supported by

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

In Brief

Facebook Implementing Payment Request API Into An In-App Browser Experience news
Roy McElmurry

Intent to Implement and Ship: CSS display:flow-root news

Taking HTML5 Device Orientation for a Spin tutorial
A look at the HTML5 Device Orientation API and how to work with it on your own pages.
Drew McLellan

Improve Your Site's Accessibility with WAI-ARIA tutorial
Louis Lazaris

Shaping Curves with Parametric Equations in WebGL tutorial
Matt DesLauriers

Building a Reactive Audio App with WebVR tutorial
How to build a VR app using Three.js and the WebVR API.
Alex Kempton

Create a Stylish News Feed Layout in Ionic 2 tutorial
How to build a stylish news feed layout in Ionic 2 using a parallax header and frosted glass effect.
Josh Morony

PostCSS: Sass's New Play Date tutorial
Nicoláas J. Engler

Has the Internet Killed Curly Quotes? story
Glenn Fleishman

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design story
Yury Vetrov

Front-End Developers Are Information Architects Too opinion
Francis Storr

In Defense of Font Size Widgets opinion
Jeffrey Zeldman

What to Learn in 2017 If You’re A Frontend Developer opinion
Artem Sapegin

Translating Backend Data to Frontend Needs Using GraphQL video
Sashko from Meteor shows how GraphQL can be used to solve issues between backend and frontend requirements.
Compose  Sponsor

Why Inline SVG is Best SVG video
Front End Center

simplehttp2server: A Simple HTTP/2 Server for Development tools

The Web Bluetooth Module for Angular tools
Wassim Chegham

Diffy.js: A Dependency-Free Motion Detection Library for the Browser code
Uses the webcam.
Mani Nilchiani

HTML5 Canvas Gauges code
Radial, linear, temperature, and more.
Mykhailo Stadnyk

vizflow: An ES6 Interactive Visualization Engine code
A small library for adding transition effects and interactive visualizations to HTML5 documents.

LoadJS: A Tiny Async Loader for Modern Browsers (710 Bytes) code
Andres Morey

Rowing Monitor: A PWA Using Web Bluetooth to Connect to A PM5 Monitor code
A Progressive Web App that connects to a monitor commonly used with rowing machines to track exercises.

Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper 
If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.
Progress  Sponsor