August 16, 2017


Frontend Focus

Issue 303 — August 16, 2017
Two years in the making, the popular front-end framework is taking some key steps forward. For starters, it’s switched from Less to Sass and is now Flexbox based.
Mark Otto
David Gilbertson makes a plea that “if you’re making a site, and you’re just about to go searching for that perfect web font, please, at least consider using system fonts instead”.
Hacker Noon
A high frame rate often equals a high level of responsiveness and user satisfaction, but what’s involved in getting high frame rates for Web pages?
Emily Hayman

The Polymer Summit will be taking place in Copenhagen, Denmark on 22-23 August! Attend talks and workshops with Polymer & Google engineers! If you can’t attend in person, you can watch the livestream on the event site.
Google, Inc.
  Sponsor
The Paint Timing API landed in Chrome 60 and allows us to gather paint timing metrics from end users.
Jeremy Wagner
Page size matters, but Tammy Everts outlines how it’s perhaps not in the way you think.
Tammy Everts
A complete walkthrough of bringing together browsers’ speech recognition support with Node and a third party natural language processing service.
Tomomi Imura
A lot of new features in this test release, including 8- and 4-digit hex color support in CSS, the Smooth Scroll API, and the Device RAM API.
Google
Michael Romanov explains how to build a frame-by-frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers.
SitePoint

Jobs

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

In Brief

Proposal to Republish Previous Versions of HTML and XHTML as Obsolete Recommendations news
W3C

Building a simple To Do web app with Stitch, React, and MongoDB tutorial
This short tutorial will get you started with MongoDB Stitch.
MONGODB  Sponsor

Drawing a Horizontal Tree Using CSS Pseudo Elements tutorial
Gaurav Sehrawat

The Difference Between Explicit and Implicit Grids tutorial
Grids are flexible enough to adapt to their items, so just how explicit do you have to be?
Manuel Matuzovic

Lazy Loading Images using Intersection Observer tutorial
How you can lazy load images without tapping the scroll event.
Dean Hume

Offline POSTs with Progressive Web Apps tutorial
Providing a great offline experience in your PWA.
Andreya Grzegorzewski

The Web Font Loading Glossary tutorial
A beginner-friendly glossary of terms relating to web fonts.
Zach Leatherman

Designing The Perfect Feature Comparison Table tutorial
Vitaly Friedman

How to Create a QR Code Reader for Your Mobile Site tutorial
..using just HTML, CSS and JavaScript.
Dmitri Lau

WebAssembly: What Is It And What Does It Mean for the Web? tutorial
Philipp Spiess and James Swift

Using Passive Event Listeners for Better Scroll Performance tutorial
Web Incubator CG

CSS Hex Colors Demystified tutorial
In-depth but relatively beginner level.
Dave Gash

SVG Can Do That? slidedeck
A great slidedeck exploring the possibilities of what SVG can achieve.
Sarah Drasner

Don’t Mistake Common UI Patterns for Best Practices opinion
A hard look at how the browse experience translates in the digital space.
Callie de Roussan

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

Online WebP Converter tools
Convert your image files into the more efficient WebP format.

Gradient World: CSS Gradients Generated From Nature Photographs tools
Charlie Clark





Source link