Frontend Focus
Issue 262 — October 19, 2016
Chrome 54, now on the stable release channel, includes support for Custom Elements v1, the BroadcastChannel API, and an origin trial of foreign fetch.
Google Developers

Nolan argues that the ‘HTML-first’ approach to progressive enhancement (i.e. without JS) fits a narrow view that may no longer be applicable to the modern web.
Nolan Lawson

Catch up now on Polymer Summit 2016, including a look at how to upgrade to Polymer 2.0, an under the hood look at Polymer 2.0, and a fun live coding demo (yes, this is a fantastic session).

Frontend Masters
Brian Holt (Netflix) introduces you to React plus surrounding ecosystem including: Redux, React Router v4, Jest for testing, Webpack 2, Yarn and more.
Frontend Masters   Sponsor

A JavaScript implementation of the full HTML5 form validation and constraints API that replaces or polyfills the browser’s native methods.

“We should be able to build a baseline structure of text in a way that works for most users, regardless of their eyesight. So, as a physicist by training, I started looking for something measurable.”
Kevin Marks

A quick look at some less popular browsers with unique approaches, such as Brave, Ulli, and Blisk.
Chris Brandrick

How to detect when a browser ‘autocomplete’ occurs so that the impact of autofill on forms can be measured. Paul argues that autocomplete is a net-positive for users and businesses.
Paul Kinlan

How Eduardo Bouças built SpeedTracker, an open-source service that runs on top of WebPageTest to build up and visualize web page performance metrics over time.
CSS Tricks

Jobs Supported by

  • Senior Web Developer (Minnesota, USA)We're seeking a dev who loves creating polished web experiences. The right candidate needs the skills to create smooth animations, and an ability to make artistic decisions, turning static designs into interactive interfaces. Plaudit
  • Find Your Perfect Fit - Try HiredFinding the right role can be daunting, but not on Hired. Get empowered to find the right role with multiple job offers and free personalized support. Hired

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

In Brief

Introducing Chrome Canary for Android news

Chrome Dev Summit 2016 news
Chrome Dev Summit 2016 will take place at the SFJAZZ Center in San Francisco, CA on November 10-11. Join Chrome VP Darin Fisher for two full days of announcements and talks from the Chrome team. Register now with code FRONTENDFOCUS
Google Inc.  Sponsor

How To Build Honest UIs And Help Users Make Better Decisions tutorial
Smashing Magazine

How to Read Web Specs Part I – Or: WebVR, How Do You Work? tutorial
A look at the WebVR API spec in its current form, and how to navigate and “parse” it for yourself.

A Pure CSS Content Filter tutorial
Harry Roberts

Change The Styles on Autocompleted Fields in WebKit Browsers tutorial
Use the -webkit-autofill pseudo-selector to target those fields and style them.
Geoff Graham

Introduction to SVG Animation tutorial
Why animating SVG is different from animating in CSS, and some hiccups you might experience.
Sarah Drasner

Magic Randomisation in CSS with nth-child and Cicada Principle tutorial
Charlotte Jackson

How Different Types of HTML Form Fields Handle Invalid Values tutorial
Raymond Camden

SVG and Media Queries tutorial
One of the great things about SVG is you can use media queries to add responsiveness to images
Jake Archibald

Understanding the SVG viewBox tutorial
Dudley Storey

How to Make HTML Disappear Completely tutorial
How to make HTML elements invisible by hiding them, making them transparent, or moving them off screen.
Quincy Larson

Autodeploying Angular Applications to AWS OpsWorks tutorial
Amazon OpsWorks is an excellent, low-cost option for Platform-as-a-Service hosting. Follow these step-by-step instructions.
Corgibytes  Sponsor

The CSS 'quotes' Property video
Not often seen or used, but useful nonetheless.
Guy Routledge

Laying Out The Future with Grid and Flexbox video
25 minutes.
Rachel Andrew

Dos and Don'ts on Designing for Accessibility opinion
A handy set of posters you could print out for your office.
Karwai Pun

Current State of HTML5 Game Development in 2016 opinion
Andrzej Mazur

8 Simple Rules for a Robust, Scalable CSS Architecture opinion
Jarno Rantanen

14 SVG Charting Libraries tools
Chris Coyier

Swip: A Library to Create Multi Device Experiments tools
Expand canvases or active Web page space across multiple device screens placed next to each other.
Paul Sonnentag

Pure CSS Minesweeper in Fewer than 400 Lines of Sass demo
Bali Balo

Meshi the CSS Dog: A Cute CSS Only Animation on Codepen demo
David Khourshid