Towards Richer Colors on the Web — A detailed piece covering the efforts to add richer colors to the Web platform and why that is important, plus ideas for future development on Blink/Chromium.

Felipe Erias

The 'Ugly, Geeky War' for Web Privacy Is Playing Out in the W3C — The inside story of how the World Wide Web Consortium became a key battleground in the global fight for web privacy.

Issie Lapowsky

Unlock the Power of Your Frontend Logs with LogDNA — Frontend developers can easily ingest browser logs, collect the diagnostic data that they need to understand when and why the user experience is degraded, and view browser data in context with other services (both on the client and server side).

LogDNA sponsor

Getting Lively: Firefox 90 Released — Plenty of JavaScript additions in this release, including private fields and methods for classes, String and TypedArray global objects, and more. The full developer release notes are here.

Ruth John (Mozilla)

An Introduction to CSS Refactoring — The first in a three-part series going through the CSS refactor process from the beginning to end.

Adrian Bece

Using HSL Colors in CSS — A handy primer that explains what HSL is, and how to use it, along with some useful use-cases and examples that you can use right away in your current projects.

Ahmad Shadeed

OMG, SVG Favicons FTW — Explores the fun to be had with SVG favicons. Covers adding them to HTML, using emojis, inlining them as data URIs, and supporting dark mode.

Austin Gil

Building a Dynamic Header with Intersection Observer — Ever needed to have a component respond to elements as they’re scrolled to a certain threshold within the viewport? In JavaScript, attaching an event listener to constantly fire on scroll can be performance-intensive. There’s a better way with Intersection Observer.

Michelle Barker

Organize Your CSS Declarations Alphabetically — There are a few schools of thought when it comes to organizing your CSS declarations, with the most common being… doing nothing. Eric makes the pitch for alphabetical order “because it imposes a baseline sense of structure”.

Eric Bailey

The Large, Small, and Dynamic Viewports — A look at some of the changes being proposed regarding viewport units that will finally solve that irksome ‘100vh in Safari on iOS’ issue.

Bramus Van Damme

Monitor Key Frontend Performance Metrics with Datadog — Collect your user sessions (no sampling) and receive actionable alerts in real time with Datadog. Start a free trial today.

Datadog sponsor

Using the Specificity of :where() as a CSS Reset — How you can make use of the :where() pseudo selector to change specificity rules.

Mojtaba Seyedi

Screen Readers: Hearing The Unseen — “as responsible developers, we need to treat the accessibility of our applications the same way we treat the visual attractiveness and usefulness of the graphical user interfaces we build”

Maciej Walaszczyk

What's The Difference Between The Alignment Values of start, flex-start, and self-start? — Find out the difference between these alignment values in flexbox.

Rachel Andrew

The Dilemma of Naming Font Size Variables — Is something like $mouse and $elephant a clear way to declare font size differences? Martin Lexelius ponders such things.

CSS-Tricks

Making A Strong Case For Accessibility — How to implement and advocate for accessibility from the inception of a project to the release or handoff and beyond.

Todd Libby

Get Started with the Best React Component Libraries in < 7 Minutes

Retool sponsor

AVPress: An In-Browser Video Compressor — 100% client-side and it includes a number of different settings and presets you can define including the ability to trim or crop the video.

Addy Osmani

Sequencer64: An Experimental Music Creation Tool that Works Offline as a PWA — Try it here. Includes nine instrument “kits” and you can save or download your creations.

Nick Carbone

Vechai UI: A Set of High-Quality Accessible React UI Components — Includes built-in dark mode and theme customization. All components are styled with Tailwind and you can try them here.

vechai

3D Bay: 3D Stock Images, Free for Commercial Use and Filterable by Category

CloudDevs