October 18, 2017


Frontend Focus

Issue 312 — October 18, 2017
The story behind the redesign of Slack’s home on the web — powered by CSS Grid and optimized for performance and accessibility.
Mina Markham
Improved Network Information API, support for OpenType variable fonts, new ways to capture media, and Payment Request API support on iOS.
Google Developers

Join Kyle Simpson, author of the popular “You Don’t Know JavaScript” book series, as he deep dives into JavaScript’s core mechanics like scope, closure, this and prototypes ..plus new features in ES6 and more.
Frontend Masters
  Sponsor
A look at an approach to creating an experimental CSS-only image gallery, which doesn’t break the experience on older browsers.
Chen Hui Jing
The various ways that you can name lines and areas in CSS Grid Layout to enable easier placement of items by name rather than number.
Rachel Andrew
Top-level await operators in the console, new screenshot workflows, CSS Grid highlighting, better cache debugging, and more.
Google Developers
Ember.js lets you scaffold and build complex front-end web apps quickly. Graham Cox explores this popular, batteries-included JavaScript framework.
SitePoint
An in-depth look at an API currently only available in Chrome 60+ for accessing and reporting Web page ‘paint’ metrics from JavaScript.
Umar Hansa

Jobs

In Brief

Kranky Geek WebRTC Event Returns to San Francisco on Oct 27 news
A Google-hosted WebRTC event later this month.
Kranky Geek

Webinar: Build Better React Apps Faster with Kendo UI for React news
In this webinar we’ll show you the power of Kendo UI and how easy it is to use it in your React development.
Kendo UI  Sponsor

An Introduction to CSS Grid Layout tutorial
A two part series (part 2 here) from Mozilla Hacks.
Dan Brown

Rendering ‘Metaballs’ with SVG and CSS tutorial
Essentially blobs that merge into one another. A nice effect.
Varun Vachhar

Writing Smarter Web Animation Code with GSAP tutorial
Carl Schoof

Animating a Blur Efficiently tutorial
Google Developers

Building a ‘Modem’ with Web Audio tutorial
An interesting way to transmit data in audio form.
Martin Kirkholt Melhus

Thoughts on Tabbed Interfaces tutorial
The art of creating an accessible tabbed component, and whether you should.
Inclusive Components

Learn a CSS Framework in 6 Minutes with Bulma tutorial
Bulma is a modern, Flexbox-based CSS framework.
SitePoint

Safari’s Implementation of ‘srcset’ Is Buggy opinion
The srcset attribute appears to fail in some common use cases in Safari.
Ben Halpern

Web Typography: Working with Numerals opinion
Tips on using old-style numerals and sub/superscript numerals.
A List Apart

5 Reasons To Use BEM, the CSS Naming Convention opinion
The author argues it “keeps the world of CSS safe from clutter”
Joanna Erd

Rapid Prototyping Playground for JavaScript/Typescript in Your Editor tools
Run any code & see the results immediately right in your editor. Supports VS Code, Atom & JetBrains IDEs.
Wallaby.js  Sponsor

Micromodal: Tiny JS Library for Creating Accessible Modal Dialogs tools
Just 1.9KB minified and gzipped.
Kalpesh Singh and Indrashish Ghosh

Smooth Scrollbar: Customizable, High Performance Scrollbars code
If you want more control over your page’s scrolling..
Dolphin Wood

Anime.js: A JS Animation Library for the Web code
Julian Garnier

handorgel: Accessible Web ‘Accordion’ Widget Written in ES6 code
Manuel Sommerhalder

Netflix Style Text Animation with CSS demo
Nooray Yemon





Source link