Frontend Focus
Issue 296 — June 28, 2017
Digging into two ways to validate forms on the front end while both taking advantage of newer web APIs and taking support back to IE9.
Chris Ferdinandi

In a 28 minute talk, the original proposer of CSS covers the history of the Web, CSS, and even doing book layouts with CSS.
Hakon Wium Lie

A guide built at Grab, a major Asian transportation platform, covering SPAs, React, Flux/Redux, and other popular front-end dev tools.
Tay Yang Shun

Frontend Masters
Join Kent C. Dodds to master the latest tooling (like Jest & Cypress) and techniques to test real-world React, Redux, and Node express apps.
Frontend Masters   Sponsor

An argument that current aspect ratio techniques are hacky, with a proposal for some new CSS syntax along the lines of 'aspect-ratio: 16/9'.
Bram Van Damme

Image Capture is an API to control camera settings and take photos, now supported in Chrome 59+. Simple demo and code here.
Google Developers

Some thoughts on how CSS methods such as Flexbox and Grid pose a problem for keyboard focus order.
Alastair Campbell

It’s not one of ours, but it’s been around a while and really narrows in on this niche area well.
Chris Lowis

Jobs Supported by Hired.com

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

In Brief

CSS Grid Support Shipping in Edge (Behind A Flag For Now) news
Stefan Baumgartner

Possible Future Directions for Data On The Web news
W3C

Conquer Email with Postal and Compose tutorial
A deep dive article on creating a custom email server with Postal and IBM Compose.
Compose  Sponsor

Designing The Perfect Accordion tutorial
How do you design the perfect accordion? The choice and position of the icon matters, and so does interaction designs. A detailed run-down.
Vitaly Friedman

Using Stickybits: An Alternative to 'position: Sticky' Polyfills tutorial
Jeff Wainwright

Building a Color Picker Component with Marko tutorial
Marko is a UI library built at eBay.
eBay

How to Apply CSS3 Transforms to Background Images tutorial
Applying transforms like rotating and skewing to background images.
SitePoint

How to Create A Checkmark Animation with Anime.js tutorial
Mikael Ainalem

10 Tips on Typography in Web Design tutorial
Nick Babich

Database Performance Monitoring Buyer’s Guide 
This guide is designed to aid when evaluating database monitoring solutions for your unique environment.
VividCortex  Sponsor

Reliably Measuring Responsiveness [PDF] slidedeck
Shubhie Panicker and Nic Jansma

Building a Better Login with the Credential Management API video
Currently a draft specification at the W3C.
James Allardice

An Interview with Chris Coyier of CodePen and CSS-Tricks Fame story
Preethi Kasireddy

Progressing The Web: Progressive Web Apps are for Everyone opinion
Jeremy Keith

Thoughts on Self-Documenting CSS opinion
A look at differing CSS comment styles, with consideration for whether they add (or not) to the code.
Keith J. Grant

Powerful Additions to the CSS Grid Inspector in Firefox Nightly tools
Mozilla Hacks

consolemock: A Small Dev Utility for Testing Console Logs code
Thomas Marek

picogl.js: A Minimal, WebGL 2-Only Rendering Library code
For WebGL 2 developers who want a simpler API.
Tarek Sherif

share-this: Medium-like Text Selection Sharing Without Dependencies code
Massimo Artizzu

Flubber: Smoothly Interpolate Between 2D Shapes code
Noah Veltman