Frontend Focus
Issue 286 — April 19, 2017
CSS Custom Properties (aka CSS variables) are now supported in all major browsers and they offer a lot of possibilities to Web developers, as seen in this thorough overview.
Serg Hospodarets

“Now that CSS Grid Layout is a reality, I wanted to see what it would take to replace an existing grid framework with CSS Grid.”
Dan Brown

New support for CSS Masks and display: flow-root, plus several pre-existing Chrome WebExtension APIs are now supported.

An easy to integrate and versatile HTML5 based MPEG-DASH and HLS player for desktop, mobile, VR Headsets, Chromecast, AirPlay, AppleTV and SmartTVs. Including a WebGL based VR and 360 video component and a completely customizable HTML5/CSS UI.
Bitmovin   Sponsor

How and why Geckoboard uses CSS Variables in combination with React to re-style their web app on the fly.
Dan Bahrami

Responsive Web design has changed the way we build sites. Here, Smashing Magazine looks at responsive navigation techniques, in particular.
Chris Poteet

Heather Migliorisi covers two accessibility issues to keep in mind when implementing smooth scrolling: focus management and animations.
CSS Tricks

position: sticky doesn’t work in Edge yet, but this provides similar ‘sticky header’-style functionality in under 2KB.
Dollar Shave Club

The Firefox team are getting rid of the Aurora channel and basing the Developer Edition on the beta build.
Mozilla Hacks

Jobs Supported by

  • Frontend Developer at X-Team (Remote)We seek a developer with extensive Frontend knowledge. We're 100% remote and provide the funding needed to help you achieve your goals and grow. X-Team
  • Frontend Engineer at FR8StarWe are looking for a Frontend Engineer to help us revolutionize the trucking industry. FR8Star
  • Frontend Web DeveloperCreate an exceptional community experience for over 100 million users. Join our team now! Runtastic GmbH

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

In Brief

CSS3 Pseudo-Classes: The Basics tutorial
Some uncommon ones here such as :read-only and :in-range
Goldstein, Lazaris and Weyl

Focusing a background-image on a Precise Location with %ages tutorial
Jay Sitter

On Hiding Content tutorial
How the hidden attribute works, how it differs from aria-hidden and how it relates to just hiding with CSS.
Hidde de Vries

Creating Testable, Modularized Chrome Extensions tutorial
Nathaniel Woodthorpe

Encoding Data in CSS to Be Reused in JavaScript tutorial
Alex Gyoshev

Building a CSS Grid Overlay tutorial
Andreas Larsen

Full-day Workshop: Using ES6 and React with Netflix's Brian Holt course
React eschews the traditional MVC architecture, a counter-intuitive approach Brian explains along with JSX, React best practices, and the React component lifecycle.
Forward Courses  Sponsor

A Modern Front-End Workflow video
In 30 minutes, learn various DevTool secrets and how to adopt a modern development and debugging workflow.
Umar Hansa

The Benefits of Server-Side Rendering Over Client-Side Rendering opinion
Walmart Labs

Stop Using Device Breakpoints opinion
Content breakpoints give people better experiences no matter what size device they have.”
Adam Silver

cssnano: A Modular Minifier, Built On Top of The PostCSS Ecosystem tools
Ben Briggs

CSSPeeper: A Smart CSS Viewer Tailored for Designers tools
A Chrome extension for inspecting items and styles.
Dawid Młynarz and Jędrzej Sadowski

SQL Source Control: track each change to your SQL Server database tools
Get a full history in your source control system. See who made changes, what they did & why. See how.
Red Gate  Sponsor

RAGrid.css: A Grid Framework with Auto-Layout Features code
Adam Argyle

WebVR Experiments demo
Google recently launched WebVR Experiments, a site featuring a dozen or so interactive WebVR apps and their source code. Associated blog post here.

A Pure CSS Crossword using CSS Grid demo
Adrian Roworth