Frontend Focus
Issue 281 — March 15, 2017
A simple guide to creating a scrollable panel for touch use, augmented with click and drag functionality for mouse input.
Ben Frain

“scrolling is still the most fundamental interaction on the web, and perhaps the most misunderstood.”
Nolan Lawson

A tool (built in Node) that removes unused styles from your stylesheets by filtering out selectors not used in the associated HTML.
Giacomo Martino

Progress
Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps.
Progress   Sponsor

A VR developer on Mozilla’s VR team goes in-depth on creating a room scale WebVR Minecraft-style demo using A-Frame and just 11 HTML elements.
Kevin Ngo

Using slightly advanced CSS selectors to highlight potential problem areas (invalid, unsemantic, or inaccessible markup) in your HTML.
Ire Aderinokun

An incredibly thorough guide to different approaches being taken to test service workers by the Chrome DevRel team.
Matt Gaunt

An introductory look at CSS Grid Layout from WebKit’s perspective. You can play with it in their Safari Technology Preview.
Manuel Rego

Now considered feature complete, Polymer 2.0 is ready to test and try. A key focus has been on improved interoperability with other libraries and frameworks.
Dan Freedman

Jobs Supported by Hired.com

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

In Brief

What's New in Chrome 57 for Developers? news
Grid based layouts, the Media Session API and more.
Google Developers

How setTimeout() Behavior Has Changed in Firefox 52 tutorial
Ben Kelly

A Simple Use Case for 'vmin' tutorial
Chris Coyier

Celebrate CSS Grid Support by Re-Creating The iOS Calculator in HTML and CSS tutorial
Robert Mion

Golden Guidelines for Writing Clean CSS tutorial
Tiffany Brown

Your First '5K From OSS In 14 Days' Sprint course
If you want to stop competing with code-chimps, model what works. Finish this can’t lose “5K From OSS” Sprint.
HookOps  Sponsor

Deep Dive CSS: Font Metrics, line-height and vertical-align tutorial
Vincent De Oliveira

A (Non-Standard) Way to Stroke/Outline Text on the Web tutorial
Chris Coyier

Recording to an Audio File using HTML5 and JS tutorial
Coding using AIR

How to Order and Align Items using CSS Grid Layout tutorial
Nitish Kumar

Learn About Color Fonts tutorial
Already well supported by Edge and Firefox.
Fontself

Making a Stacked Paper Effect in CSS tutorial
Geoff Graham

Pinterest's Utilities for Creating and Testing Service Workers tools
Pinterest

Animista: CSS Animations on Demand tools
Tweak and download a collection of ready to use CSS animations.
Ana Travas

How to find and fix the slowest code in your .NET application tools
Find bottlenecks in your code or database boost performance with new ANTS Performance Profiler 9. Try free.
Red Gate  Sponsor

Waffle Grid: An Easy to Use Flexbox Grid System code
Lucas Gruwez

blurify.js: Image Blurring from JavaScript code