Frontend Focus Issue 310

Essential Image Optimization for the Web

A free ebook on modern image optimization techniques. Formats, decoders, techniques for efficient compression and more are covered.

ADDY OSMANI

CSS Grid Gotchas And Stumbling Blocks

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

The Future of Accessibility for Custom Elements

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

ROB DODSON

Introduction to Vue.js with Sarah Drasner

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.

Fundamentals of Responsive Images

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

MARC DRUMMOND

HTML 5.1 2nd Edition is a W3C Recommendation

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

W3C

Integrating SVG Into Your Site

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
ALLIGATOR.IO

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
MICROSOFT

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.
STRIPE

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

SentinelJS: Detect New DOM Nodes using CSS Selectors CODE
ANDRES MOREY

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

A Comic Book Style Layout Example with CSS Grid and 'clip-path' DEMO CODE
REN AYSHA