Frontend Focus
Issue 319 — December 6, 2017
A detailed look over the WCAG - a starting point in making your sites work better for all.
Alan Dalton

Examining the tips and tricks used to make Stripe’s frequently copied site design a notch above the rest.
Lee Robinson

Sonarwhal is a linting tool for accessibility, security, and other Web best practices.
Stephanie Drescher

GrapeCity SpreadJS
Deliver intuitive, efficient, multi-functional, pure JavaScript spreadsheets for enterprise apps.
GrapeCity SpreadJS   Sponsor

An introduction to the concept of ‘cascading web design’, an approach made possible with feature queries.
Chen Hui Jing

A speculative look into the future of CSS and Houdini’s goal of making CSS user-extensible.
Tab Atkins

An in-depth step-by-step visual walkthrough demonstrating how to audit JavaScript runtime performance and find slow rendering components.
Ben Schwarz

A more dynamic front-end development and deployment checklist based on an article we linked last month.
David Dias


In Brief

Evolution of 'img': GIFs Without the GIF in Safari news
Safari Technology Preview is now supporting loading MP4 videos via img tags.
Performance Calendar

W3C Invites Implementations of CSS Color Module Level 3 news

$20 Free on a New Linode Account 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.
Linode Cloud Hosting  Sponsor

Debugging CSS Grid Layouts with Firefox Grid Inspector tutorial
Chen Hui Jing

Providing Alternate Content for Screen Reader Users tutorial
Sam Joehl

Manageable Utility Systems with CSS Variables tutorial
A look at the difference between Sass variables and new CSS variables.
Kasey Bonifacio

Happier HTML5 Form Validation tutorial
Dave Rupert

A Frontend Developer’s Guide to GraphQL tutorial
CSS Tricks

How to Use CSS Gradients on the Web tutorial
Plenty of examples here for getting to grips with using gradients on the web.
Adi Purdila

Progressive Image Loading using Intersection Observer and SQIP tutorial
SQIP is an SVG-based LQIP (Low Quality Image Placeholders) technique.
Performance Calendar

Live Coding Session: Deploying Node.js Web Apps to App Service on Linux 
Learn how to build & package a Node app & deploy it through a CI system to Azure App Service on Linux.
Microsoft  Sponsor

AudioWorklet: What, Why, and How video
Hongchan Choi, a software engineer on the Chrome team, goes in depth about what the new AudioWorklet is, why it’s a great step for Web Audio, and how it works.
WebAudio PDX

Why CSS Grid Is Better Than Bootstrap for Creating Layouts opinion
Per Harald Borgen

Bauble Toggle: A Christmas Bauble Toggle Control demo

'Strike Off' ToDo List Animation demo code
When you tick an item, it gets struck out with an animation.
Code My UI