Frontend Focus
Issue 284 — April 5, 2017
It’s in Chrome Canary only for now, but it shows you which lines were and weren’t used in each JS/CSS file.

A question that might be on your mind after the blitz of CSS Grid articles lately. In short, not exactly, but there are some good examples here.
Robin Rendle

David Gilbertson assesses each of the reasons for why you might use these units of measure.
Hacker Noon

Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server.
linode   Sponsor

A 24 level online game where you write CSS to grow a garden with the goal of learning CSS Grid along the way.
Thomas Park

Edge was the first browser to support CSS Grid, but it’s in a slightly different, older form. You can check progress here.

A crash course in DOM manipulation with vanilla JavaScript, using functions like querySelectorAll and addEventListener.
Sebastian Seitz

How to be more aware of the diverse range of people and devices that may access your sites of when developing for the Web. (Part 2.)
Bruce Lawson

Jobs Supported by

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

In Brief

WebAssembly Library Supercharges Web Video Apps news
The WebDSP library features algorithms for building web applications operating on media data and provides better performance than JavaScript.
Paul Krill

New Inspector and Debugger Features for Firefox 54 news
Some improvements to the responsive design mode in Firefox Developer Edition 54.
Mozilla Hacks

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

Styling Vertical Chinese, Japanese, Korean and Mongolian Text tutorial
How to use CSS to produce vertical text for languages such as Chinese, Japanese, Korean, and Mongolian. The CSS specification contains a lot of implementation-specific information.

CSS Viewport Units: A Quick Start tutorial
An introduction to the use of CSS viewport units for responsive typography and layout elements.
Asha Laxmi

Quickly Setting Up Gulp and Sass (for Beginners) tutorial
Petar Vukmanovic

Grid 'Fallbacks' and Overrides tutorial
A cheatsheet to help create good fallbacks/overrides for Grid Layout.
Rachel Andrew

Using CSS Transitions on Auto Dimensions tutorial
Brandon Smith

A 17 Minute Overview of Twitter's Front-End Architecture video
Giuseppe Gurgone

Playing with CSS Grids opinion
“Front-end design is finally making print-like design easier to achieve.”
Marco Barbosa

CSS is Broken: My Dime a Dozen Opinion opinion
Jeremy Wagner

Test your application against full-sized database copies in seconds tools
Create SQL Server database copies in seconds & test your application as you develop using SQL Clone. Try free.
Red Gate  Sponsor

Microsoft Announces Edge Testing in Partnership with BrowserStack tools
Run Microsoft Edge ‘inside’ your browser on macOS, Windows, or Linux for free.

CSS Cursors: View CSS Cursors Your Browser Supports tools
Wes Bos

SweetAlert2: An Accessible (WAI-ARIA) Replacement for JS Alerts code

Pure.css: Small, Responsive CSS Modules code
Very lightweight, covers grids, forms, buttons, tables, and menus.

Creating A Responsive Site Without Media Queries demo
A simple Flexbox and CSS Grid demo showing a responsive layout without media queries.
Jonathan Snook