October 8, 2017


Frontend Focus

Issue 309 — September 27, 2017
Giulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load.
SitePoint
A lot of stuff packed into this huge infographic from tags and events to canvas methods and a support grid.
Bradley Nice
A set of interfaces which expose sensor devices within Chrome (for now).
Google Developers

Most applications require some use of a data grid, and making a grid accessible can be a big challenge. Take a look at how Wijmo made FlexGrid accessible with ARIA standards and more.
GrapeCity Wijmo
  Sponsor
React 16 has been released and redesigned from the ground up to support asynchronous rendering without changing the public API.
Facebook Code
An exploration of work the Microsoft Edge team does to help developers build faster sites, and how to think of performance as an investigative activity, beyond a checklist approach.
Nolan Lawson
How travel site Trivago went from neglecting accessibility to making it an important part of what they do.
Ian Devlin
The beta of a whole new Firefox is out now, one that’s powered by a completely reinvented, modernized engine, called Firefox Quantum.
Mozilla
Eiji Kitamura, a developer advocate at Google, calls out some common misconceptions about the API and tries to comprehensively address them.
Google Dev Channel

Jobs

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

In Brief

New WebKit Features in Safari 11 on iOS 11 and macOS High Sierra news
It adds WebRTC, WebAssembly, Variable Fonts, Timing APIs and more.
Jon Davis

Changes to Chrome’s Video Autoplay Policy news
Muted autoplay will be fine, but for audio to play some conditions must be met.
François Beaufort

Chrome 63 To Label FTP Servers As ‘Not Secure’ news
Zeljka Zorz

2017 Chrome Developer Summit is coming to San Francisco news
Join us in San Francisco & on the live stream as we explore building beautiful and performant experiences.
Google, Inc.  Sponsor

Intriguing CSS Level 4 Selectors tutorial
Including :placeholder-shown and :user-error
Dennis Gaebel

Designing Websites for the iPhone X tutorial
Advice from the WebKit team for handling the iPhone X ‘notch’.
WebKit

Playing With Color: Vibrant Options For Apps And Websites tutorial
Nick Babich

An Introduction to WebRender: Firefox’s New 2D Renderer story
Nicolas Silva

Exploring Animation And Interaction Techniques with WebGL story
Karim Maaloul

Using JavaScript for Speech Recognition in the Browser video
Wes Bos

5 Things CSS Developers Wish They Knew Before They Started opinion
Andrés Galante

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

3 Tools for Working with Web Animations in Firefox tools
Mozilla

Diffee Checker: Check Visual Differences Between Sites tools
It uses CSS blend modes to do it.
Una Kravets

Logo Crunch: The Multi-Resolution Logo/Favicon Maker tools
Uses computer vision to make a high-res graphic more legible at lower resolutions.
Brandmark

winamp2-js: An HTML5 Reimplementation of Winamp 2.9 code
Demo.
Jordan Eldredge

AR.js: Efficient Augmented Reality for the Web code
Jerome Etienne

Wretch: A Tiny Wrapper Around Fetch with an Intuitive Syntax code
Julien Elbaz





Source link