Together with  Userfront

#​571 — December 7, 2022 | Read on the web

The State of CSS 2022 — An always fascinating overview of the evolving CSS landscape. This year’s results highlight the speed at which changes and new features have been coming in, and the impressive rate at which they are being adopted, both by browser vendors and developers alike. The big highlights of the year? Parent selectors such as :has(), container queries, and the emerging Subgrid. An essential end of year read.


React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

A Practical Guide to CSS Media Queries — A closer look at media queries, sharing how they work, how to use them correctly, breakpoints, examples, and looking at the different device types that can be specified directly with the @media property.

Alex Ivanovs

Setting Up a Screen Reader Testing Environment — Accessibility expert Sara shares how to get set up with a screen reader — a crucial step when performing manual testing, as you’ll be able to catch and fix accessibility issues that cannot be caught by automated testing tools.

Sara Soueidan

Landmarks and Where to Put Them — An introduction to landmark elements (a bunch of elements that help you define the structure of a page, think nav, main, etc) and advice about their ideal position and structure.

Kilian Valkhof


📙 Tutorials, Articles & Opinion

▶  Accessibility: The Land That Time to Interactive Forgot — We tend to think of performance in terms of latency, code optimization, and the critical rendering path, but what happens when the browser creates an accessibility tree as well as the DOM? This half-hour talk considers the purpose of this, the ways its constructed in different browsers, and the impact it has on both performance and experience for people who use assistive technology.

Léonie Watson

Shortcut Brings Product and Engineering Together. Try It for Free — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly sponsor

▶  mask-image Lets You Do Some Really Cool Stuff — A quick six-minute look at how the CSS mask-image property can quickly add some creativity to your designs. Note, Chrome requires a -webkit- prefix for this.

Kevin Powell

Advanced Web Font Optimization Techniques — Some advanced techniques to be aware of to help make your site faster and to create a better user experience when using web fonts.

Alex Barashkov

Why You Should Be Using New CSS Features Today — A two part series on new CSS features (such as cascade layers, :has(), nesting, and more).

Brecht De Rutye

Sketchy Pencil Effect with Three.js Post-Processing — 3D development always gets my head spinning a bit, but the sketched pencil effect here is compelling and unique.

Maya Nedeljković Batić

'How We’re Making Firefox Accessible and Delightful for Everyone'
Jamie Teh (Mozilla)

▶  Top Seven Visual Studio Code Extensions for CSS
Zoran Jambor

Digging Deeper Into Container Style Queries
Geoff Graham

Reduce Image Sizes by Removing Metadata
Robert Boedigheimer

🧑‍💻 JOBS

Software EngineerStimulus is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Join our engineering team.

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 & Resources

gpu-io: A GPU-Accelerated Computing Library — ..for physics simulations and other mathematical calculations. This is a neat look at the power of what WebGL can do. Plenty of examples here.

Amanda Ghassaei

🎨 Leonardo: A One-of-a-Kind Tool for Creating, Managing, and Sharing Accessible Color Systems — From Adobe, this allows you to generate colors based on a desired contrast ratio, for better accessibility.


Automate Cron Jobs 10x Faster with Retool Workflows

Retool sponsor

   👀 Invisible Characters: The Unicode Characters You Can't See — The most common of these, all ready to copy and paste, is probably the “zero-width space”. Maybe the best part is the list of “unusual applications” (e.g. ability to create an “empty” tweet). Use for good, not evil.

Florian Pigorsch

Fontaine: Automatic Font Fallback Based on Font Metrics — A useful utility for dealing with cumulative layout shift (CLS) due to fonts not loading quickly.

Daniel Roe

a2000 / a2k: A 'Retro 2000s Feeling' UI Library — In the same spirit as React95 comes a new way to create retro-feeling interfaces with modern Web technologies. There’s also an article introducing it and the motivation behind the project.

Andrico Karoulla