TOGETHER WITH ▶ Whiskey Web and Whatnot

#​578 — February 1, 2023 | Read on the web

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)

🎨 RELATEDSticking with the topic of handling color in CSS:

▶  React Isn’t Great at Anything Except Being Popular — You may have seen the controversial blog post by Josh Collinsworth about React not being the best choice anymore. In this episode, we dive into why React hasn’t aged well and what the best frameworks are today.

Whiskey Web and Whatnot sponsorpodcast

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


📙 Tutorials, Articles & Opinion

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 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.


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

A Better Way to Work With Number and Date Inputs in JavaScript
Steve Sewell

Screen Readers' Support for Text Level HTML Semantics
Steve Faulkner

How to Lazy Load Disqus for Improved Site Performance
Alex MacArthur

🔧 Code, Tools & Resources

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.


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

clamp() Calculator: A Handy Tool for Getting Viewport-Based Clamped Values
Chris Burnell

CodeImage: A Tool to Manage and Beautify Your Code Screenshots
Riccardo Perra

🧑‍💻 JOBS

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.