Frontend Focus
Issue 241 — May 25, 2016
Linting is a common practice for cleaning up code. This article looks at stylelint, a linter for style sheets.
Aleks Hudochenkov

Paul Irish and Sam Saccone show off new tips, tricks and features in DevTools to help you debug the performance of your site.
Google I/O 2016

Many people know that you can scan your credit cards in Mobile Safari. But how many web developers know how to create a form that supports that feature?
Jason Grigsby

Red Gate
Boost the performance of your .NET application with ANTS Performance Profiler. Get rich performance data on your code and database queries to find your application's bottleneck fast. Try ANTS Performance Profiler on your application now.
Red Gate   Sponsor

If you understand how the W3C defines property values at a technical level, you’ll more easily be able to understand any of the W3C’s CSS specifications.
Russ Weakley

A Content Security Policy (CSP) is a great way to reduce or completely remove Cross-Site Scripting (XSS) vulnerabilities.
Heiko Webers

From Google I/O comes a talk looking at the PaymentRequest API, a W3C API that could eliminate checkout forms and standardize payment collection.
Google I/O

This video covers ServiceWorker, web manifests, add-to-homescreen banners, IndexedDB and BackgroundSync APIs.
Jake Archibald

Jobs Supported by Hired.com

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

In Brief

Webmention Now A W3C Candidate Recommendation news
Provides a mechanism for a site to notify other sites being linked to.
W3C News

Menus, Sharing, and Dynamic CSS Classes in AMP news
A look at new AMP tags supporting accordions, social sharing, sidebars, and more.
Accelerated Mobile Pages Project

Chromium Issue: Can't Navigate Back using the 'Backspace' Key news
Chromium

W3C Expands Emmy-Winning Subtitles Work for More Accessible Web Video news
Has published TTML Profiles for Internet Media Subtitles and Captions 1.0 IMSC1 as a W3C Recommendation.
W3C

An Updated Working Draft for CSS Grid Layout news
W3C CSS WG Blog

New Angular 2 Course with Lukas Ruebbelke and Scott Moss rawurl course
Angular 2 is a powerful evolution of AngularJS. Discover why Angular 2 is half the framework with twice the power.
Frontend Masters  Sponsor

Using the CSS3 box-shadow Property tutorial
Digs into some areas you may not have touched before.
bitsofcode

HTML5 Video and Multiple Caption Track Display tutorial
There’s a playable demo.
Ian Devlin

6 Ways of Injecting a Line Break with CSS tutorial
Inserting a line break using CSS to avoid using a ‘br’ element.
Chris Coyier

The PostCSS Guide to Improving Selectors and Media Queries tutorial
PostCSS has a variety of plugins aiming at implementing polyfills for the newest CSS features.
Pavels Jelisejevs

Let's Talk About MIDI (on the Web) video
A look at MIDI, the Web Audio API, the MIDI Show Control, and using the MIDI BLE standard from the Web.
Ruth John

Practical Lessons From A Year of Building Web Components video
Monica Dinculescu

AMP + Progressive Web Apps: Start Fast, Stay Engaged video
Alex Russell

The Future of JavaScript - 2016 and Beyond rawurl opinion
Learn what is coming around for the most popular JS frameworks in 2016 and beyond in this free whitepaper.
Telerik Kendo UI  Sponsor

Web Image Effects Performance Showdown opinion
CSS filters, blend modes, Canvas and SVG filters are put up against each other
Una Kravets

More Meaningful CSS opinion
A defense of liberally using class names and class-based systems in CSS.
Jonathan Snook

caniuse-cmd: A Command Line Tool to Query 'caniuse' tools
Sam Gentle

Bideo.js: Easy Fullscreen HTML5 Background Video code
Rishabh

Family.scss: 20 Smart Sass Mixins for :nth-child-ified Elements code
e.g. @include first(3) to target the first three elements of a certain type
Luky Vj

Starability.css: Accessible Star Rating Widget with Cute Animations code
Accessible and customizable using standard radio input elements.
Anna Migas

Exporting An Indie Unity Game to WebVR demo
Includes a fun VR game you can play in the browser (can be played without VR).
Mozilla Hacks

Displacementmap Image Transitions using HTML5 Canvas demo
CodePen