CSS color-mix() — Browser support is lacking right now, but the CSS color-mix() function is set to ship in Chrome 111. It can be used to take any colors, in any of the supported color spaces, and mix them directly from your stylesheet. This post explains how.

Adam Argyle (Chrome Developers)

Easy SVG Customization and Animation: A Practical Guide — Adrian Bece notes that devs may often feel discouraged from editing SVG markup and experimenting with animations, thinking it’s a significant time investment or there is a need to use a complex animation libraries. Here, he showcases some of his favorite SVG tricks, making the process streamlined and fun. Plenty of neat examples here too to help things along.

Smashing Magazine

Building an Accessible Theme Picker — This is an attractively presented and easy to follow tutorial for a handy site feature, complete with keyboard navigation and screen reader support.

Sarah L. Fossheim

Three Attributes for Better Web Forms — They’re inputmode, enterkeyhint, and autocomplete.

Jeremy Keith

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Adam Argyle (Chrome Team)

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly Clubhouse.io) sponsor

Accessible Hamburger Buttons Without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Pausly

Creating a High-Contrast Design System with CSS Custom Properties — Managing our colors can truly help people to access our content — as such, this article takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.

Brecht De Ruyte

Greater Styling Control Over Type with initial-letter — An overview of the new CSS property initial-letter for more styling control over the first letter.

Stephanie Stimac

Your Web Performance is Too Reactive; It’s Time to Do More Than Put Out Fires - Calibre — Notes that a ‘wait-and-see speed strategy’ isn’t the best for your site, before offering up some pointers on being proactive with web performance, how best to test, and how to get buy-in from your team.

Karolina Szczur

Why We Switched CDNs: How Google's Core Web Vitals Led Us to Cloudflare Pages — In order to deal with issues with time to first byte (TTFB) in their Core Web Vitals assessment, this post compares TTFB results from Netlify, Vercel, Cloudflare Pages and Gatsby Cloud.

Michael Orenstein

Sailboat UI: A Modern UI Component Library for Tailwind CSS — Includes a common set of 150+ ready-to-use components and is easy to theme to your liking based on configuration settings.

Sailboat UI

Shoelace 2.0: 'A Forward-Thinking Library of Web Components' — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way.

Cory LaViska

Need an Extra Pair of Hands on Your React Project? Contact Us 🚀

UpgradeJS by OmbuLabs sponsor

GradienMood: Generate a Gradient from a Mood — This is different! Type a word or prompt representing a “mood” and this AI-based tool will show you a copy/pasteable CSS gradient that matches what you typed (try 'calm looking gradient that is purplish color' for example). There’s also a gallery of “moods” to browse.

GradienMood

Theme Toggles: A Small Set of Unique, Animated Dark Mode Toggles — They’re all built with SVG, accessible, and can be included as inline SVG or React, and of course you can try out each one directly on the page.

Theme Toggles