Frontend Focus
Issue 258 — September 21, 2016
This isn’t new but a few recommendations in here surprised me (as well as people on Twitter) so you might find Google’s advice both useful and intriguing.

Annarita Tranfici discusses what has changed since HTML5 was originally released including new HTML elements and other features that are at risk as the spec evolves.
Telerik Developer Network

These are mostly simple tips but may uncover a few features you hadn’t got around to trying yet. ($0 was a handy one I didn’t know about.)
David Gilbertson

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

Google will be supporting modern CSS more thoroughly in Gmail by the end of the month.

A look at creating a login form that uses several alignment properties alongside CSS Grid Layout, enhancing a simpler version using feature queries.
Rachel Andrew

The BBC’s Lloyd Wallis looks at the challenges the BBC has faced regarding HTML5 media playback as they move away from Flash.
BBC Internet Blog

Chris Coyier (of CSS Tricks) looks at ways to republish a WordPress blog to Apple News, Facebook’s Instant Articles and AMP.
Chris Coyier

Jobs Supported by

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

In Brief

Safari 10 Available for MacOS 10.12 and 10.11 news
CSS support for object-position, picture-in-picture video playback, and full ES6 and Apple Pay support.

Firefox 49 Fixes Sites Designed with WebKit in Mind news
The recently released Firefox 49 now includes support for various -webkit- prefixes.
Mozilla Hacks

What’s New in Opera 40 (based on Chromium 53) news
Shadow DOM v1, new MediaStreamTrack API methods, unprefixed CSS filter changes & more.

W3C on Bringing Virtual Reality to the Web Platform news
Dominique Hazaël-Massieux

Discover the world’s most trusted SQL Server comparison tool rawurl
Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.
Red Gate  Sponsor

WebGL2 Fundamentals: Learn WebGL2 from the Ground Up tutorial

CSS Floats Explained By Riding An Escalator tutorial
“If you have ever jumped on an escalator, then you can quickly understand floats.”
Kevin Kononenko

Hiding DOM Elements, and the Implications of Doing So tutorial
Rodney Rehm

Common CSS Mistakes (And How To Fix Them) tutorial
Mariano Miguel

Autoprefixing with CSS Variables tutorial
An interesting use for CSS variables I hadn’t considered before.
Lea Verou

Why We Use Progressive Enhancement to Build GOV.UK story
Does progressive enhancement have a perception problem? Here, Robin Whittleton explains why the UK government use progressive enhancement for GOV.UK.
Government Digital Service (UK)

Rise of the Web Workers slidedeck
Slides on how mainstream libraries like React or Angular use Web Workers to improve performance.
Parashuram N

Confident Frontend with Elm video
Elm is a compile-to-JavaScript language that brings some interesting ideas to frontend development.
Jack Franklin

Beyond The Tab: Executing JavaScript Across Browser Contexts video
Andrew Dunkman

6 Web Layout Myths Busted opinion
Challenge your assumptions, break out of old habits and discover what’s newly possible with layout on the web.
Jen Simmons

Browser Bug Searcher: Search for Bugs Across All Major Browsers tools

Onsen UI 2 Released: A Hybrid Mobile App Framework and Toolset tools
Onsen UI

regl: A New Declarative and Stateless Abstraction for WebGL tools
Check out the examples.
Eric Arnebäck

Performance monitoring for JS developers rawurl tools
Instantly pinpoint performance issues and build faster JS apps
Opbeat  Sponsor

gulp-css-tailor: Automatically Generate CSS From HTML Classes code
I’m not entirely sure this is a great idea, but..
Kamran Ahmed

Reframe.js: Make Unresponsive Elements Responsive code
Removes an element’s height and width attributes and wraps it in a responsive DIV.
Dollar Shave Club

wysiwyg.css: Style TinyMCE or Markdown Generated Content with a Single CSS Class code
Jeremy Thomas