Frontend Focus
Issue 287 — April 26, 2017
We’ve brought together the best/most useful resources and tutorials from recent weeks.
Chris Brandrick

The first in a series of posts breaking down the Grid spec. The CSS Working Group called this “How to Read the First Page of Just About Any CSS Specification”
Rachel Andrew

Maria Antonietta Perna highlights the benefits of lazy loading images on websites and shows five approaches to implement it.

Forward Courses
Netflix's Brian Holt returns to teach a full-day workshop on ES6 and React. 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

No C needed, you can now easily build browser extensions using standard Web technologies.
Benjamin Young

CSS Custom Properties give the ability to reach into a property value and change certain parts of it. This quick example should win you over.
Chris Coyier

How the adjacent sibling selector can solve complex design requirements while maintaining readable CSS.
Sebastian Eberlein

A fun look back at a time when the Web’s aesthetic was a little more.. ‘rough and ready’. Remember the dancing baby?
Dom Hennequin

Our traditional idea of the top five browsers may be over-simplified, outdated and skewed.
Peter O'Shaughnessy

Rachel Andrew covers the basics of how to use CSS Grid and how to start using it right now - without leaving older browsers out in the cold. 28 minutes.

Jobs Supported by

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

In Brief

Chrome Headless Now Supported on All Versions of Chrome 59+ news

How To Secure Your Web App With HTTP Headers tutorial
Smashing Magazine

Let’s Define Exactly What 'Atomic CSS' Is tutorial
John Polacek

Open vs. Closed Shadow DOM tutorial
The difference between using the open and closed modes of Shadow DOM.
Leon Revill

touch-action: A CSS Property for Customizing Touch Interactivity tutorial
Hui Jing Chen

Letting The Content Delivery Network Optimize Your Images tutorial
Jon Arne Sæterås

A Journey to Effective, Maintainable CSS Media Queries tutorial
Kaloyan Kosev

Create data-intensive, feature-rich web & mobile apps with Sencha Ext JS 
Learn how to design, develop and test data-intensive web apps that run on desktops, tablets, and smartphones.
Sencha, Inc.  Sponsor

The Origin of the 'IMG' Tag story
Jay Hoffman

When Does a Project Need React? opinion
CSS Tricks

Six Free Web-Based SVG Editors Compared tools

SuperTinySocialIcons: Miniscule SVG Versions of Common Logos tools
Terence Eden

$20 Free Credit on a new account. 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
linode  Sponsor

Explodal: A Modal With An Explosion Effect code

OpenLara: Classic Tomb Raider Running in the Browser demo