Frontend Focus
Issue 328 — February 21, 2018
Chrome has now begun to block ads that don’t meet the Better Ads Standards. What does this mean and how does it work?

How variables work natively in CSS, and how to use them to make your life a lot easier.
Ohans Emmanuel

An explainer on why GitHub began to focus on system fonts, how they coded and tested it, and what they’ve done since making the change.
Mark Otto

Instantly know whats broken and why. Get real-time monitoring, alerting, analytics for JavaScript errors, and worry less about breaking things. Learn more.
ROLLBAR   Sponsor

Headed to a job interview any time soon? Here are some questions (and answers) worth being prepared for.
Yangshun Tay

Starting this July, with the release of Chrome 68, non-HTTPS sites will be marked as ‘not secure’. This post is an extensive review of HTTPS ubiquity, how we got here, and what happens next.
Patrick R. Donahue

Interesting proof of concept using CSS to log keypresses under certain conditions.
Max Chehab

A neat HTML/CSS only experiment, using CSS Custom Properties to order a table and sort its contents by ascending/descending order.
Roman Komarov

Dives deep into the dos and don’ts of designing a responsive Web-based product configurator, with a checklist of things to use and keep in mind.
Smashing Magazine


In Brief

Our Mobile Focused Newsletter: Mobile Dev Weekly 
Each week we cover the vast mobile landscape, spanning the web, hybrid and native app development.

Progressive Web Apps Coming to All Chrome Platforms tutorial
…and how to try it.
Kenneth Christiansen

Handling Long Titles with Truncation via CSS or JS tutorial
Luke Whitehouse

Fallback Font Stacks for More Robust Web Typography tutorial
Chris Coyier

Things You Need to Know About Working with SVG in VS Code tutorial
Burke Holland

Building a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 3) tutorial
Deploy our Lambda function using the AWS Command Line Interface and verify that the bot fully works as expected.
MONGODB  Sponsor

What the Heck is the 'Shadow DOM' Anyway? tutorial
Rowan Lupton

Spicing Up the Bootstrap Carousel with CSS3 Animations tutorial
Maria Antonietta Perna

How to Build a Responsive Site with Bootstrap tutorial
Syed Fazle Rahman

Whitespace on the Web with CSS Grid video
Jen Simmons

CSS Grid Like You Are Jan Tschichold video
Jen Simmons

Save Time with the Best, Fastest Angular Spreadsheets & UI Components tools
GrapeCity JavaScript Solutions  Sponsor

GradPad: A CSS Gradient Generator and Gallery tools
Our Own Thing

Gifski: A High Quality GIF Encoder tools
Kornel Lesiński

Pressure.js: Handle Force Touch, 3D Touch, and Pointer Pressure code
Works with Surface, iOS devices, MacBooks, and more, with a single, simple API.
Stuart Yamartino

Slice Revealer: A Reveal Effect Where Slices Cover and Uncover An Image demo
GitHub repo.

3D iMacs with Parallax Effect Created Entirely with CSS demo
A well-executed, convincing effect.
James Mellers

Linux Cloud Hosting Starting at 1GB of RAM for $5/mo 
Linode Cloud Hosting  Sponsor