Frontend Focus
Issue 278 — February 22, 2017
Create animation magic with keyframes, and animation properties like timing, delay, play state, animation-count, iteration count, and more.
Ibrahim Nergiz

Follow-up to a recent discussion on if there’s a need for a heading element without implicit order.
Jake Archibald

“The wall between “native” and the Web is falling, and developers will be able to seamlessly use the same libraries in both contexts.”
Mozilla Hacks

Don’t wait for users to tell you when your gnarly code inevitably breaks. Sentry’s open source error tracking and notifications for Javascript — and every other major language in your stack — will let you know exactly when and where you went wrong.
Sentry   Sponsor

A fun site where the only messages you post are essentially tiny pieces of JavaScript that render simple demos into canvas elements. See this one for example.

Some neat techniques to achieve responsive CSS patterns while we wait for element and container queries to be available.
Andy Kirk

Add screenshots and screen recordings of any visual changes to your pull requests so reviewers can visually see what’s been changed instantly.
Joanne Daudier

A deep look into Flexbox sizing — and how you can leverage it to build adaptable and beautiful layouts.
Scott Domes

Cody Lindley’s popular guide to the practice of front-end engineering, how to learn it, and what tools to use, has been updated for 2017.
Cody Lindley

Jobs Supported by

  • Front End Engineer at VSCO (Oakland, CA)We're looking for a Front-End Engineer who can face unique challenges in implementing web designs and craft great accessibility for users. VSCO
  • Frontend Developer at X-Team (Remote)We're looking for a frontend developer with an extensive knowledge of Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-Team
  • Software Engineer, Web - Zürich, SwitzerlandCentralway is seeking an experienced programmer to come and join the team. The right candidate will be responsible for building and maintaining high performance web applications with cutting-edge technologies. Centralway Numbrs

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

In Brief

Customize Media Notifications and Handle Playlists news
With the new Media Session API in Chrome 57 you can customize web media notifications and respond to media related events.
Google Developers

ForwardJS: Live Angular 2 & React workshops in San Francisco, Feb 25-Mar 5 news
Last chance for tickets to 9 days of JavaScript lectures and workshops by industry experts.
ForwardJS & Forward Swift  Sponsor

ECMAScript 2016+ Support in Firefox news
A technical update on new JavaScript feature support in Firefox.

Opera Completely Redesigns Its Desktop Browser news
Web Designer Depot

CSS Grid: One Layout, Multiple Ways tutorial
How to create the same ‘Holy Grail’ layout in three different ways, all using CSS Grid properties.
Geoff Graham

CSS and Progressive Enhancement tutorial
Where CSS can ‘fail’, why fallbacks are important and how to progressively enhance CSS.
Michael Scharnagl

The Dark Side of Polyfilling CSS tutorial
A thorough look at how writing good CSS polyfills is quite tricky.
Philip Walton

Modal Dialogs and Accessibility: A Tricky Minefield tutorial
Of course, the simplest solution is to stop using them.
Shwetank Dixit

Switching to HTTPS tutorial
A general how-to on getting your site moved over to HTTPS.
Tobi Reif

Creating Non-Rectangular Page Headers tutorial
Erik Kennedy

How to Use Mobile Emulation Mode in Chrome tutorial
Craig Buckler

Two Ways of Optimizing GIFs for the Web tutorial
Ire Aderinokun

[Whitepaper] The Future of JavaScript—2017 and Beyond 
2017 predictions for the key and rising JavaScript libraries and frameworks and JS’s New Frontiers in this whitepaper.
Progress  Sponsor

An Introduction To PostCSS Tooling video
A rundown of PostCSS’s diverse plugins. Helping you cherrypick the right ones for your next project.
Richard Hallows

unfetch: Bare Minimum 'Fetch' Polyfill in 500 Bytes code
A very lightweight ‘barely polyfill’ that implements a subset of the full Fetch API.
Jason Miller

AR.js: Efficient Augmented Reality for the Web code
Jerome Etienne

Perfomant CSS Animation for Beginners demo
“there are only 4 properties which you can animate whilst maintaining a silky smooth experience for your users”
Ian Hazelton