Frontend Focus

#​526 — January 26, 2022 | Read on the web

Getting Started with CSS Cascade Layers — Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Stephanie Eckles takes a look at how it works.

Smashing Magazine

Giving Web Standards a Seat at the Table — A great read on how standardization became important to the Internet Explorer team, thanks to the efforts of the Web Standards Project (WaSP) in pushing Microsoft to build what was then its most standards-compliant browser to date.

Jay Hoffmann (The History of the Web)

Manage and Ship Content with Your Favorite Tech Stack — Contentful’s headless content platform enables building for the web with your favorite frameworks and technologies. Jamstack, SPAs, static sites — you name it, Contentful supports it. Access our guides, videos and tutorials to start building today.

Contentful sponsor

What's New Since CSS3 in 2015? — CSS3 presented a huge, and modular, step forward for CSS. But how has CSS changed since? Chris counts the ways.

Chris Coyier

Three Ways We Fail to Take Accessibility Seriously — Covers perspectives on accessibility in web design that could help us bridge the ‘great divide’ between users and designers/developers.

Melanie Sumner

What’s New with the DevTools? — A decent break down of recent changes and additions to developer tooling in Chrome, Edge, Safari and Firefox.

Patrick Brosset

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Comparing CSS Specificity Values — When it comes to CSS specificity how do you compare two selectors to decide which is highest? This post digs into just that.

Kilian Valkhof

Here’s What I Didn’t Know About :where() — Manuel outlines how the where() pseudo-class might be more useful than originally thought.

Manuel Matuzović

Try Fast, Intuitive Project Management That's Built for Software Teams — Shortcut is fast and intuitive project management built for developers. Delight the scrum gods and try it now.

Shortcut (formerly sponsor

Frontend Predictions for 2022 — Thoughts on what we might see this year, including: “the return of micro-frontends, functional JavaScript & the demise of the Jamstack as we know it”.

Jay Freestone

Animate Anything Along an SVG Path — How to code creative animations with JavaScript using SVG paths and the getPointAtLength() function.

Louis Hoebregts

Context-Aware Web Components Are Easier Than You Think — A look at the four lifecycle callbacks that can be used with web components.

John Rhea

Boosting Performance with Web Workers: The Bare Basics — An introduction to the basic concept of multi-threading in JavaScript by way of Web Workers.

Kyle DeGuzman

Add Less — As developers, we love to add our tools/libraries, but it can often mean overloading an app with more than it really needs and making it slower than it could be.

Cassidy Williams

Trailing Slashes on URLs: Contentious or Settled?
Zach Leatherman

Why It's Too Early to Get Excited About Web3
Tim O’Reilly

'What Happened When We Turned Off AMP'
Henry Powderly

How Flexbox Works
Tiffany B. Brown


AI & Software Engineers — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers.

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

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.

🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

🔧 Code, Tools & Resources

mo.js 1.3: A Motion Graphics Toolbelt for the Web — Use a declarative API to get full control over animations. Check the getting started tutorial to see how it works from a code POV.

Oleg Solomka, Xavier Foucrier, Jonas Sandstedt

mmmotif: An SVG Generator for 3D-Like Isomorphic Patterns — Another tool from Sébastien Noël (we’ve featured a few others here before). This one generates SVG shape patterns with a 3D feel, which you can then save or copy as SVG.

Sébastien Noël

Identify, Track & Fix Problematic Tests with Buildkite’s Test Analytics ✅

Buildkite sponsor

metaSEO: Quickly Generate Meta Tags for any Web Page — Including the OpenGraph and Twitter card data for visually representing the page on Twitter and Facebook, say.

Vishwa Gaurav

DevToys: A Native Windows App That's a Swiss Army Knife for Developers — Includes a number of built-in utilities that work offline including formatting and converting JSON, text diffs, testing RegExp, encoders/decoders, image compression, and lots more.

Etienne Baudoux

Colourpalette: A Gallery of Beautiful Colors for Your CSS — This is a pretty simple project, but it stands out simply because it was built by an 11-year old developer. Love to see someone so young building stuff on the web!

saharsh v

PostSrc Components: 50+ Categorized Tailwind CSS Components

rasterizeHTML.js: Render HTML onto an HTML Canvas
Christoph Burgmer