|
|
|
|
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 Devographics |
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 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 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 Clubhouse.io) sponsor |
|
▶ 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, 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'
|
|
▶ Top Seven Visual Studio Code Extensions for CSS
|
|
Digging Deeper Into Container Style Queries
|
|
Reduce Image Sizes by Removing Metadata
|
|
🔧 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. Adobe |
|
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 |