Frontend Focus
Issue 294 — June 14, 2017

If you're in the UK or Europe, we've teamed up with White October to bring a two day ES6 workshop with You Don't Know JS author Kyle Simpson to London. Tickets are available now :-)

Last week we linked the video, now here’s a full write-up focusing on the Paint Timing API.
Google Developers

A recent demo from Tyler Sticka demonstrated how to break content out of a CSS Grid layout and go full width, here Rachel explains how/why the technique works.
Rachel Andrew

Focusing on how many declarations we use in our style sheets, how many of those declarations are unique, and what that means.
Jens Oliver Meiert

Bugsnag
Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. Learn more.
Bugsnag   Sponsor

font-display controls how and when Chrome displays text content while downloading fonts. Other features include support for the Payment Request API, the Web Budget API and the availability of the CSS :focus-within pseudo class.
Google

A snappy 25 minute talk on modern techniques to improving page loading performance from the front-end perspective, particularly from a mobile POV.
Addy Osmani

Representatives for four different browsers present 10-15 min updates on where those browsers are at. The videos cover Chrome, Edge, Firefox, and Brendan Eich’s Brave.
YouTube

Louis Lazaris breaks down the results of SitePoint’s recent survey, shedding light on developer practices in CSS tooling, technologies, and knowledge.
SitePoint

Jobs Supported by Hired.com

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

In Brief

Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path news
Completes the transformation of Firefox into a fully multi-process browser.
Mozilla Hacks

Latest Updates to the Credential Management API news
Google Developers

Introducing FilterBubbler: A WebExtension Built using React/Redux news
A text analysis toolkit using the new WebExtensions API.
Mozilla Hacks

Cross-Browser Extensions, Available Now in Firefox news
WebExtensions APIs are inspired by Chrome’s extension APIs, supported by Opera, Firefox, and Edge.
Mozilla Hacks

ForwardJS Tickets on sale today 
Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July.
ForwardJS  Sponsor

A Complete Guide To Switching From HTTP To HTTPS tutorial
Covers the individual components and steps required to get setup with HTTPS.
Vladislav Denishev

CSS Shapes, Clipping and Masking, and How to Use Them tutorial
Firefox 54 introduces new CSS clip-path features.
Mozilla Hacks

Build A Minimalist HTML Card in Just 53 Lines of Code (with Flexbox) tutorial
Brandon Morelli

Cropping Images in CSS With 'object-fit' tutorial
Alligator.io

When Large Isn't Large Enough: Designing With Hero Images tutorial
Nick Babich

How Pure CSS Images Helped Me Understand React Components story
Michael Mangialardi

WebAssembly and How It Works in WebKit story
WebKit

Bojler: HTML Email Boilerplate and Guidelines tools
Focused on rendering well on the most popular email clients.
Slicejack

Now UI Kit: A Bootstrap 4 UI Kit tools
Creative Tim

country-flags: SVG and PNG Renders of All Countries' Flags tools
Hampus Joakim Nilsson

$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

billboard.js: A Chart Library, based on D3 v4+ code
80+ examples here.
Naver Corp

ZangoDB: A MongoDB-Like Interface for HTML5 IndexedDB code
Erik Olson

Amplitude.js: A Modern HTML5 Audio Player code
No dependencies required. Demo here.
521 Dimensions