Frontend Focus
Issue 310 — October 4, 2017
A free ebook on modern image optimization techniques. Formats, decoders, techniques for efficient compression and more are covered.
Addy Osmani

CSS Grid is such a different way of approaching Web layout that a variety of questions often pop up, some of which are answered here.
Rachel Andrew

A look at how the Accessibility Object Model may help custom elements with semantics.
Rob Dodson

Frontend Masters
Get up and running in a hurry with the Vue.js JavaScript framework. Learn how to build and maintain complex applications quickly and efficiently in this practical guide to Vue.js by Sarah Drasner.
Frontend Masters   Sponsor

A good explainer of the key concepts for responsive images, and an overview of a few different responsive image tactics.
Marc Drummond

The Web Platform Working Group has published a W3C Recommendation of HTML 5.1 2nd Edition.

Dudley Storey gets into why you should be using Scalable Vector Graphics (SVG) and how you can easily integrate them into your site in a variety of ways.
Heart Internet


In Brief

Everything You Ever Wanted to Know About Secure HTML Forms tutorial
Randall Degges

Using SVG clip-path to Change A Logo's Color On Scroll tutorial
Eduardo Bouças

Implementing a Collapsible Widget with Pure CSS tutorial

VoiceOver, Safari and `list-style-type: none` tutorial
A fix for when VoiceOver doesn’t play nice when reading out unordered lists from Safari.
Unfettered Thoughts

How to Write Better CSS with the BEM Naming Convention tutorial
Raymon Schouwenaar

2017 Video Developer Report - Free Download 
Get the 24 page report on current video technology usage and planned usage for 2018.
Bitmovin  Sponsor

How 18F Created A Large-Scale Design System for the US Government story
Maya Benari

eBay’s Font Loading Strategy story
The considerations and strategy behind eBay’s switch to using a custom font.
Senthil Padmanabhan

Microsoft Edge Extensions, One Year Later story
Microsoft Edge Team

What You Need to Know About Variable Fonts opinion
An interview with Tim Brown and Bram Stein of Adobe Typekit.
Ulrik Hogrebe

How CSS Grid Went From Idea to Reality video

Embedding a CMS anywhere you want, with any framework 
A CMS that works on any website and any platform. It’s simple to install & easy for your whole team to use.
Component IO  Sponsor

Stripe Elements: Build Beautiful, Smart Checkout Flows tools
Pre-built UI components for creating ‘pixel-perfect’ checkout flows across desktop and mobile.

CSS Grid Layout + Firefox = ❤️ code
A detailed walk-through on learning CSS Grid layout.

SentinelJS: Detect New DOM Nodes using CSS Selectors code
Andres Morey

a11y-dialog: A Very Lightweight and Flexible Accessible Modal Dialog code

A Comic Book Style Layout Example with CSS Grid and 'clip-path' demo code
Ren Aysha