Hello, CSS Cascade Layers — Explores how cascade layers (a new mechanism for scoping cascade logic within discrete 'layers') work, how they will help us write CSS with more confidence in the future, along with use-cases and visual examples.

Ahmad Shadeed

Handling the Version 100 Milestone in Chrome and Firefox — Both Chrome and Firefox will reach version 100 in a couple of months. This post looks at the timeline of events so far towards fixing potential user agent string detection issues, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.

Karl Dubost, Chris Peterson, Ali Beyad

Building Progressive Web Apps from Scratch — Join Maximiliano Firtman for this detailed video course covering creating and publishing PWAs, looking at components, web app manifest, service workers, distribution, and more.

Frontend Masters sponsor

Move Over JavaScript? How Some Backend Languages are Coming to the Front-End — You might think this is about using WebAssembly to run Python in the browser or something, but no. It’s about the growing popularity of maintaining a WebSocket connection to a backend process and rendering HTML on the fly from the backend, as seen in modern Elixir and Rails stacks. Food for thought!

GitHub

The State of JS 2021 Results — The results from the annual ‘State of JS’ survey are now out, with plenty of interesting, well-presented data points to go through. React remains the top front-end framework of choice.

Sacha Greif

The File System Access API with Origin Private File System — WebKit now supports this new API (in the Safari 15.4 beta and Safari Technology Preview), making it possible for web apps to create, open, read, and write files directly, or create directories and enumerate their contents. Here's an update on how Firefox is handling things too.

Sihui Liu (WebKit)

Getting Started with the File System Access API — …and in relation to the above. Here’s a look at how you might use it.

Charlie Gerard

The Intended Wordle Font That Nobody Can See — The author explains how the number one mistake in web typography is not providing the font files. This may have happened with Wordle, too.

Oliver Schöndorfer

Perfectly Pointless Web Design Done Well — Celebrates the whimsical side of web design. Those weird, wacky, sometimes pointless sites that make the web fun.

Frederick O’Brien

How to Avoid Production Errors Caused by Content on Jamstack Sites

Kontent by Kentico sponsor

Building an Adaptive Favicon — A foundational overview of how to build an adaptive favicon which changes depending on your light/dark theme preferences.

Adam Argyle

Today, The Distant Future — On the often fast and slow world of web standards…

Jeremy Keith

Apache ECharts: An Open Source JS Visualization Library — The release notes go into plenty of detail about what’s in the newest release, including keyframe animations, custom loading animations, and a new SVG renderer with improved performance. Lots of demos here too.

Apache Software Foundation

Free Activity Feeds & Chat APIs for Qualifying Teams — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream.

Stream sponsor

SPCSS: A Minimal, Classless Stylesheet for Simple HTML Pages — Definitely best for text-based content and it will automatically render in dark mode according to system preferences. You can try it here.

Susam

Minze: A JavaScript Framework for Native Web Components — Based on the latest web component standards and it allows you to build portable component libraries that you can use on any project.

Sergej Samsonenko

Polka Dot Generator: Generate CSS for Custom Polka Dot Pattern Backgrounds — The generated code uses custom properties along with CSS gradients. You can adjust color, size, and blur of the dots.

Brian Louis Ramirez

Griffel: CSS-in-JS with Ahead-of-Time Compilation — From Microsoft, another option for a CSS-in-JS solution. This one boasts near-zero runtime, SSR support, and styles defined with JS objects, among other features.

Microsoft

pppointed: SVG Arrow Maker with All Kinds of Decorative Styles

Seb

An Inside Look at a Modern Web Browser — We featured this fantastically illustrated four-part series back when it was first published in 2018, but it's recently been doing the rounds again on Twitter. It remains an excellent explainer on how modern browsers work, with a focus on Chrome’s architecture, and how it ultimately renders code into functional sites.

Mariko Kosaka