Frontend Focus
Issue 292 — May 31, 2017
A run through some of the ‘good bits’ of the CSS Flexible Box Layout specification.
David Gilbertson

Scrolling opens a lot of doors to designers but isn’t without its drawbacks. Some tips on how to approach ‘long scroll’ experiences.
Nick Babich

Google will remove support for PNaCl early next year from “everywhere except inside Chrome Apps and Extensions” shifting their focus over to WebAssembly instead.
Brad Nelson

Red Gate
Get a full history in your source control system. See who made changes, what they did & why. See how.
Red Gate   Sponsor

In this session from Google I/O, Addy Osmani covers PWA best practices, patterns for efficiently loading websites and the latest tools for getting fast and staying fast.
Google Chrome Developers

TJ VanToll explains why, despite the ridicule CSS sometimes gets from the developer community, he still loves it for its flexibility, simplicity and power.
Telerik Developer Network

Slides and a thorough write up of a talk on accessibility within the context of responsive web design.
Scott Jehl

Browserlist provides information to tools like Autoprefixer and postcss-normalize (and more) to let you specify which browsers you want to target.
Chris Coyier

A look at why “writing your styles in JavaScript isn’t such a terrible idea after all”.
Mark Dalgleish

Simon Codrington illustrates some UI design ideas using CSS animation and gradients.

Jobs Supported by

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

In Brief

Page Scroll Animations Made Easy with the AOS Library tutorial
Gajendar Singh

On-Scroll Morphing Background Shapes tutorial
A decorative website background effect where SVG shapes are morphing and transforming on scroll. Powered by anime.js and scrollMonitor.js.
Mary Lou

Full Page Background Video Styles tutorial
Tips and approaches for using videos as backgrounds.
The Media Temple Blog

Making Custom Properties (CSS Variables) More Dynamic tutorial
Dan Wilson

Accurately Checking for CSS Grid Support in Microsoft Edge tutorial
Greg Whitworth

The CSS Fractional Unit (fr) In Approachable, Plain Language tutorial
Ohans Emmanuel

How to Create Perfectly Centered Text With Flexbox tutorial
Craig Campbell

👞🕷 [Free until June 26] Squash Common JavaScript Bugs Course 
Join Todd Gardner's course on Debugging and Fixing Common JavaScript Errors. You’ll be armed to squash bugs for good.
Frontend Masters  Sponsor

Chrome Won opinion
”’s safe to say that Chrome is eating the browser market, and everyone else except Safari is getting obliterated.”
Andreas Gal

What is the Future of Front End Web Development? opinion
Chris Coyier

HTML5: Where The Core Web Technology Is Headed Now opinion
Paul Krill

Muuri: Create Responsive, Sortable, Filterable and Draggable Grid Layouts tools
A JavaScript powered layout tool. Demo here.

Flexbox Cheatsheet: Click to Copy Flexbox Properties to Your Clipboard tools
Valery Liubimov

Firefox Screenshots: A New In-Beta Web Screenshot Tool tools

$20 Free Credit on a new account. 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
linode  Sponsor

VideoContext: Experimental HTML5+WebGL Video Composition and Rendering API code

Elongated/Extruded CSS Text Shadows code

Progress Nav: An Example of Page Navigation That Shows Progress demo

HN PWA: Hacker News Clients as Progressive Web Apps demo
Along the lines of TodoMVC, these are example PWAs built with different frameworks.