How to start with Variable Fonts on the Web

#343 — June 6, 2018

Frontend Focus

How to Start with Variable Fonts on the Web — A detailed primer on using variable fonts, single font files that can behave like multiple fonts via OpenType settings. They’re supported by the latest version of all major browsers except Firefox (which has support behind a flag).

Oliver Schöndorfer

Level Up Your CSS Selector Skills — An in-depth review of interesting CSS selectors, complete with live, editable examples, plus a few that will be available in the future.

David Gwyer

Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

Critters: Webpack Plugin to Inline Critical CSS — An interesting project from Google that quickly inlines critical CSS into your pages and then lazy-loads the rest. It’s fast as it doesn’t need a headless browser to work.

Google Chrome Labs

? Designing Sites for the New Apple watchOS Breakpoint? — Web browsing, of a sort, is coming to watchOS. The breakpoint is.. 312 pixels(!) — here’s an example site. *squints*

Pixel Geek

A Reference Guide For Typography in Mobile Web Design — What’s good for the desktop doesn’t always look great when scaled down for mobile browsers so here’s what you need to pay attention to with your mobile Web typography.

Smashing Magazine

Apple Just Made Safari the Good Privacy Browser — The next version of Safari will take on ad-trackers more aggressively than ever. Here’s Craig Federighi making the announcment.

Lily Hay Newman (Wired)

WebKit’s Intelligent Tracking Prevention 2.0 — Continuing from the Safari news, above, ITP 1.0 (introduced last year) ushered in changes to how Safari handled cookies and cross-site tracking. 2.0 builds on this in several key ways to further benefit end users.

John Wilander

Fresher Service Workers, by Default, in Chrome — Starting in Chrome 68, HTTP requests that check for updates to the service worker script will no longer be fulfilled by the HTTP cache by default.

Google Developers

Experience the O’Reilly Fluent Conference for Just $199 — Access to keynotes, sponsored sessions, networking, events and more. Register today.

O’Reilly Media, Inc. sponsor

WCAG 2.1 is a W3C Recommendation — An evolution of W3C’s accessibility guidance, including expansion of mobile, low vision, and cognitive and learning provisions.

Andrew Kirkpatrick and Michael Cooper

? Jobs

Remote Front End Developer (React Native & Rails) — Join us, work remotely from North America, and help build software that matters.

Aha!

Senior Front End Developer (Charlotte, NC) — Bring your skills to create, code and optimize websites & user experiences for some of the biggest brands in the US. Join us at RV.

Red Ventures

Front-End Expert? Sign Up for Vettery — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

? Tutorials

How to Make an Animated Multi-Step ‘Wizard’ Component — A UX pattern often used in signups/onboarding in webapps.

Eder Diaz

Making an Avengers-Style ID Card with HTML and CSS — I haven’t seen the movie – sorry – but the effect is pretty neat.

Kunal Sarkar

Side-Channel Attacking Browsers Through CSS3 Features — How a side-channel vulnerability in browser implementations of the CSS3 feature mix-blend-mode allowed visual content to leak from cross-origin iframes.

Ruslan Habalov

New Course: Master Automated Web Testing With Selenium

Selenium.Academy sponsor

Specificity in :not(), :has(), and :matches()

Eric Meyer

HSL() / HSLa() Is Great for Programmatic Color Control — “If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way.”

Chris Coyier

? Don’t Use My Grid System (Or Any Others) — A review of layout and grid techniques — when to use them, what to consider, and how to roll your own layouts with minimum code.

Miriam Suzanne

Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds — Tone down that saturation just a smidge for better UX.

UX Movement

An Overview of Visual Studio Code for Frontend Developers

Vinh Le

? Code and Tools

Short and Sweet: Accessible Character Counter for Input Elements — Demo here.

Rik Schennink

Lottie: Render Adobe After Effects Animations on the Web

Airbnb

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

Linode Cloud Hosting sponsor