Frontend Focus
Issue 285 — April 12, 2017
A fantastic round-up of concepts, tools, and things to consider when doing one of a developer’s most important tasks: debugging.
Sarah Drasner

A major release for Edge that includes WebVR, CSS Custom Properties, Payment Request API, and experimental WebAssembly support. Test in the latest Edge using a VM image or for free on BrowserStack.
Microsoft

Frontend Masters
A free, thorough and open source guide anyone could use to learn about the practice of front-end development.
Frontend Masters   Sponsor

A practical guide on how to add accessibility information to HTML elements using the WAI-ARIA (Accessible Rich Internet Applications) spec.
W3C

Available as a Chrome Extension, command line app or Node module, Lighthouse is a Google-built tool for auditing Web pages for a variety of issues.
Google Developers

An attempt to shed some light on the invisible parts of CSS, such as the rendering process, the box model, and more.
Mike Riethmuller

Thoughts on why React has become so popular, so quickly, along with a demonstration of the core principles.
Samer Buna

Jobs Supported by Hired.com

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

In Brief

Chrome Introducing 'Scroll Anchoring' to Eradicate Page Jumps news
Google

Getting Started with Neat 2.0, A Lightweight and Flexible Sass Grid tutorial
Thoughtbot

Case Study: My First Practical CSS Grid Layout tutorial
Tyler Sticka

CSS Grid Layout and PostCSS: Now 'KISS' tutorial
What happens when you combine a new powerful specification with a great processing tool?
Sylvain Pollet-Villard

Augmented Reality in 10 Lines of HTML (with AR.js and A-Frame) tutorial
Alexandra Etienne

Individualizing CSS Properties with CSS Variables tutorial
Dan Wilson

Block Formatting Contexts and Lists with 'display: flow-root' tutorial
Resolves the issue of weird padding/margins around floated elements.
Paul Bakaus

Debugging CSS for UI Responsiveness tutorial
CSS properties and values that trigger reflows are costly when it comes to page and UI responsiveness.
Tiffany Brown

The Ultimate Guide to Hiring a Front-end Developer 
Our team has coded thousands of web and mobile projects. Learn how we hire the best front-end developers.
Code My Views  Sponsor

Automated Web Accessibility Testing with aXe video
A11ycasts

Creating Music with the Web Audio API video
A well produced 30 minute talk.
Rich Williams

Stylelint: A Modern CSS Linter With Over 150 Checks tools
.. and support for the latest CSS features.
Maxime Thirouin, David Clark, Richard Hallows

mq-scss: A Sass Mixin for Formulating Media Queries tools
Daniel Tonon

Try Bugsnag, and Get a Free T-Shirt 👕 tools
For a limited time, get a free shirt when you sign up and try Bugsnag for automatic JavaScript error monitoring.
Bugsnag  Sponsor

Embedo: A Modern Social Media Embed Plugin code
For Facebook, Twitter, Instagram, YouTube and Pinterest content.
Shobhit Sharma

SVG Icons for Popular Brands and Technologies code
Quite developer/tech focused and lots to choose from.
Simple Icons

Across Tabs: Easy Comms Between Cross Origin Browser Tabs code
Further info, documentation and a demo.
Wingify