Frontend Focus
Issue 314 — November 1, 2017
While native Web Component support isn’t 100% yet, polyfills are available, and this tutorial walks through what’s involved to create your own HTML tags as components.
Ayush Gupta

The idea is to allow Web servers to send back certain headers (e.g. preload link headers) early before the main response.

Richard Rutter goes deep on how to improve the readability of your data tables.
Richard Rutter

A step-by-step tutorial on how to display and annotate PDF files inside your web app using the PSPDFKit JavaScript library. Features include cross-browser support (IE 11 and up), mobile optimized UI, and no server-side component.
PSPDFKit   Sponsor

An interesting creative attempt to create a basic ‘web app’ using nothing but HTML & CSS.
Matt Zeunert

The takeaway: Google wants you to build PWAs, reduce JS file size, use Web Components, and configure your forms to support autofill.
Dan Fabulich

How popular car selling platform Auto Trader created a high-performance search experience that regularly returns results in less than a second.
Elliot Sumner

Sam Saccone explores recently shipped performance primitives, cutting edge performance techniques, and a glimpse into what the future of loading on the web may hold.
Google Chrome Developers

A helpful overview with some simple things you can do to take positive steps towards a more accessible web. From 2015, but worth revisiting.
Ire Aderinokun


In Brief

Microsoft's Plan to Bring Progressive Web Apps (PWAs) to Windows 10 news
Paul Thurrott

W3C Invites Implementations of Preload news
This spec defines the preload keyword that may be used with link elements.

JS Kongress Munich - The Future of JavaScript on Nov 13-14 news
Join us for two days on the Future of JavaScript (inc. WebAssembly & Tooling). Topics include Frontend Architecture, webpack, Angular, React, Perf, etc.
JS Kongress Munich  Sponsor

Unlocking the Benefits of CSS Variables tutorial
The benefits of CSS variables and helpful tips and tricks for working with them.
Jonathan Harrell

How to Build an Interactive Virtual Globe with Three.js tutorial
Jeanne Castillo

3 Commands to Add SSL to 'localhost' for https://localhost on MacOS tutorial
Paul Browne

A Look at the Relatively Uncommon 'output' HTML Element tutorial
Robin Rendle

Using Redux When Building Chrome Extensions tutorial
Bruno Antunes

Emulating CSS Timing Functions with JavaScript tutorial
Ana Tudor

Getting Around a Revoked Certificate in macOS tutorial
Geoff Graham

Using ReactJS, ES6 & JSX to Build a UI (the rise of MERN) tutorial
Part 5 of our Modern Application Stack series - Why ReactJS is driving the development of modern apps.
MONGODB  Sponsor

The Web Began Dying in 2014, Here's How opinion
“GOOG and FB now have direct influence over 70%+ of internet traffic.”
André Staltz

An Animated Flexbox Playground tools
A helpful visual reminder of what effect certain Flexbox properties have.
Blake Bowen

grid-kiss: A PostCSS Plugin to Keep CSS Grids 'Stupidly Simple' tools
Sylvain Pollet-Villard

Koa11y: An Open Source Web Accessibility Tool tools
A desktop app for automatically detecting Web accessibility issues.
Jared Wilcurt

A Better Focus? demo
An attempt at a more ‘visually-pleasing focus for keyboard users’.