#362 — October 17, 2018

Read on the Web

Frontend Focus

Rhythm in Web Typography — Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy.

Matej Latin

Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers — More browsers than ever are releasing frequent updates and supporting modern standards, so with code size rising fast, is it time to rethink asset delivery for the modern web?

Shubham Kanodia

Functional Programming with JavaScript. Did You Get the Cheat Sheet? — JavaScript developers, here’s a handy resource for your reference stack. Download this handy resource containing short definitions, tips, code examples of arrow functions and more. Get your copy.

Progress Kendo UI sponsor

What’s New in the Latest Microsoft Edge Update — EdgeHTML 18 is now available with the Windows 10 October 2018 Update, featuring Web Authentication API support, Service Worker improvements, new WebView features, CSS Masking, new autoplay policies, and more.

Kyle Pflug (Microsoft)

Why Don’t We Add A lovely Element to HTML? — The title is tongue in cheek, but this post explores HTML elements, why we don’t have certain HTML elements that would be useful to have, and workarounds.

Bruce Lawson

Chrome 70 Release: What’s New for Developers? — Chrome 70 brings support for desktop-based progressive web apps (PWAs) on Windows, Web Bluetooth support on Windows 10, support for public key credentials in the Credential Management API, and named Web Workers. The DevTools also have numerous improvements.

Google Developers

An Introduction to Houdini’s Animation Worklet — In future, you might not need to worry about requestAnimationFrame.. as Animation Worklet will let you create imperative animations that run at a device’s native frame rate more easily. Only in Chrome Canary for now.

Surma (Google)

? Jobs

Work on Uber’s Open Source Design Language — We’re developing Base UI, a new React component library for web applications at Uber and beyond. Join our team.

Uber

Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

? Tutorials

The MDN CSS Layout Cookbook — Now with seven handy ‘recipes’ for implementing things like breadcrumb navigation, centering an element, and sticky footers with modern Web techniques.

MDN Web Docs

CSS Animations with Finite State Machines — An explanation of state machines based around their relevance to CSS.

David Khourshid

How to Stop using console.log() and Start using Your Browser’s Debugger

Parag Zaveri

HTML for Numeric ZIP Code Inputs — Take care, because ZIP codes aren’t exactly ‘numbers’ in the traditional sense.

Chris Coyier

Lazy Loading Images with Vue.js Directives and Intersection Observer

Mateusz Rybczonek

Create a Serverless Powered API in 10 Minutes — Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare Workers sponsor

Calls Between JavaScript and WebAssembly Are Finally Fast — The interoperability between JS and WebAssembly has been a sticking point for performance, but this is changing. Here’s an amazingly accessible writeup of the how and why.

Lin Clark

?  Two Live Accessibility And Performance Audits from SmashingConf — Two talks from Marcy Sutton and Tim Kadlec focusing on assessing real sites/code.

Smashing Magazine

Valid CSS Content — What’s valid content in CSS’s content property?

Chris Coyier

? Code and Tools

The Webflow CSS Grid Playground — Build grid layouts visually with this powerful Web-based tool. (Note: An account is needed to export code.)

Webflow

Muze: Build Composable Data Visualizations for the Web — Composable, can be themed with CSS, supports dynamic binding for tooltips and other ‘reactions’, stackable layouts..

Charts.com

Build Real-Time Web Experiences with a Simple but Powerful Serverless Backend

Microsoft sponsor

An Experiment to Use QR Codes for WebRTC Signalling Data

Gorka Ludlow

Some Neat Pure CSS Toggle Buttons

Himalaya Singh

Adidas Rolls Out Mini-Site Inspired by 1990s Web Design — They’ve done a pretty good job with this fun site for some 1990s-influenced sneakers.

Adidas

Recreating the Banksy Artwork Shredder in CSS — A fun little demo, with an associated write-up here.

Lee Martin

Find, Organize, and Connect the Best Cloud Services

Manifold sponsor