Frontend Focus

#​504 — August 18, 2021 | Read on the web

The State of Mobile First and Desktop First — Is mobile first or desktop first still relevant today? This article explores that question, outlining the pros and cons of such approaches.

Ahmad Shadeed

Practical Uses of CSS Math Functions: calc, clamp, min, max — Another solid post from Stephanie, this time looking at the four best supported CSS math functions, and how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties.

Stephanie Eckles

Learn the Fundamentals of TypeScript — Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable. This course covers all you need to know including how to migrate your codebase to TypeScript and improve productivity while building large-scale apps with ease.

Frontend Masters sponsor

Sustainable Web Design, An Excerpt — This excerpt from Tom Greenwood’s book on Sustainable Web Design provides some much needed clear guidance on how we can track, and moreover address the carbon footprint of the websites we create.

A List Apart

Breaking The Web Forward — Thoughts on the current standing of browsers and the differing approaches of Safari and Chrome in particular.

Peter-Paul Koch

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Accessible Contrast Ratios and A-Levels Explained — A guide to understanding and making use of the labels and ratios that determine accessible contrast (those ‘A’, ‘AA’ and ‘AAA’ labels you may have seen).

Stark Lab, Inc

The Accessibility and SEO Myth — Cooper Hollmaier explains how search engine optimization and accessibility have a lot more in common than you may think.

The A11y Project

Build a Powerful Backend for Your Frontend in Minutes — Create, manage and deploy serverless backends using an intuitive interface for your web apps, mobile apps, and microservices.

Canonic sponsor

HTML is Not a Programming Language? — This discussion seems to pop up every now and again. This post looks at typical arguments, and some rebuttals.

Alvaro Montoro

CSS Nesting, Specificity and You — Native CSS nesting (like Sass or Less) is coming to browsers soon, meaning we can soon greatly cut down on repetitive selectors. Here’s what you need to know, and be careful of.

Kilian Valkhof

Loading Third-Party JavaScript — This isn’t new, but recently popped up on our radar again and remains a solid resource — learn how to optimize the loading of third-party scripts to reduce their impact on performance.

Addy Osmani & Arthur Evans

How to Find The Cause of Horizontal Scrollbars

How to Improve Cumulative Layout Shift (CLS) on WordPress
Design Modo


Frontend Engineer (React, New York) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools and Resources

SpeedVitals: Optimize Your Website for Core Web Vitals — Enter a URL and select a type of device and country to run the various Core Web Vitals tests along with results you can use to make improvements. The layout shift animation is particularly handy.


Blobbb: An Online Tool to Create Custom SVG Blobs — Choose from three blob styles, fill color, optional stroke, and whether you want a gradient and/or pattern, then grab the SVG code or download as SVG image.

Riva Yudha

React Page Scroller: Smooth Full-page Scrolling Using CSS Animations — Try out two types of demos here.

Vik Liegostaiev

Serve Your Image Library on the Fly, Using a Simple Querystring API

OMGIMG sponsor

iColorpalette: A Platform for Creating, Editing, & Sharing Palettes

Fabrizio Bianchi

Geist: A Modern and Minimalist React UI Library — Design inspired by Vercel and includes 50+ categorized components that you can view here on the documentation site.


Introducing MIDIVal: The Easiest Way to Interact with MIDI in Your Browser — Despite being 40 years old, the MIDI protocol is still heavily used by, and hugely valuable to, musicians. MIDIVal is a higher level abstraction for working with MIDI from JavaScript. Getting started tutorial.

Kacper Kula

“Saving the Internet requires a greater sense of shared ownership and fewer bystanders accepting whatever today's Internet has to offer.”

Mitchell Baker (via CodeWisdom)