It's Time to Learn OKLCH Color — Feeling a bit overwhelmed by all the developments happening in CSS lately involving color? We’ve got several new options to consider such as hwb(), lab(), lch(), oklab(), and oklch() — here Keith makes the case for OKLCH and how to get started using it.

Keith J. Grant

Solving the CSS Layout and Source Order Disconnect — The CSS Working Group is seeking feedback on a proposed solution for “the problem of layout methods arranging items in an order that is disconnected from the source of the document”. This post explains the issue, the suggested fix, and invites your thoughts.

Rachel Andrew (Chrome Developers)

New Course by Kyle Simpson: Practical Problem Solving with Algorithms — Walk through four fun challenges with Kyle in this new video course. You'll learn how to apply algorithms with techniques like recursion, traversals, and acyclic paths, cover memoization to avoid garbage collection, and come away writing more performant code.

Frontend Masters sponsor

What's New in WCAG 2.2? — Notes on what’s changing in the upcoming 2.2 accessibility guidelines from WCAG expert Alaina Birney.

Seth Wilson & Alaina Birney

Integrating React Flow and the Web Audio API — React Flow is a component for building node-based editors and interactive diagrams, which makes it well suited for building audio signal chains. There’s a lot of depth here, some nice examples, and these techniques could prove useful for a lot of other use cases.

Hayleigh Thompson

Recreating a 'Mouse-Aware' Text Effect — The author was “so impressed with the design” of the Creative South 2023 site that she wanted to recreate the neat ‘3D’ effect seen on the title text. Here’s a quick look at how she did it, complete with code and a demo.

Rach Smith

Designing for Color Blindness — A few real-world examples of what a person with color-blindness sees. “Living with colorblindness feels like you’re constantly being pranked by the world in subtle, irritating ways”.

Andy Baio

Build and Deploy ‘23: May 3rd - Save the Date — The ultimate CI/CD virtual conference - best practices and end-user success stories from DevOps experts. Plus, a keynote from Emily Freeman, author of DevOps for Dummies.

Codefresh sponsor

Optimizing Resource Loading with the Fetch Priority API — Fetch Priority (previously known as Priority Hints) indicates the relative priority of resources to the browser — it can enable optimal loading and improve Core Web Vitals. It’s currently supported in Chrome and Edge.

web.dev

Interaction to Next Paint (INP): What Is It and How to Improve It — Page responsiveness is critical to a good user experience on the web. This post shares how best to measure and improve it with the Interaction to Next Paint metric.

Karolina Szczur

Passkeys: What The Heck and Why? — The author has been studying up and experimenting with passkeys — and the associated WebAuthn API that they are built on top of. This is a solid primer on an increasingly popular security option.

Neal Fennimore

Iconoir: 1300+ Open Source SVG Icons — A vast array of clean and simple icons, complete with ways to quickly integrate them into React, React Native, Figma, and other apps – or just using CSS, if you prefer.

Luca Burgio

Open-Source JavaScript Form Libraries: Build Multiple Forms In‑House — Make form creation secure and easy with a self-hosted no-code form editor. Store survey data with no third-party involved.

SurveyJS sponsor

Tailwind Animations: A Small Library of CSS Animations Built with Tailwind — There are animated GIFs showing off the animations here.

Canopas

Skeleton: A Toolkit for Building Reactive and Accessible UIs with Svelte & Tailwind — A cool feature of the home page is that you can try out the different built-in themes for the library, plus dark and light modes, using a drop-down at the top.

Skeleton Labs

favicon.software: Quickly Generate Favicons and HTML from a Logo or Other Image — Supports just about any image format and all conversion happens in the browser.

favicon.software

Color Contrast Checker: Analyzer and Color Suggestions — A straightforward tool for checking the contrast between colors using WCAG or APCA. It also offers up suggestions for better colors when needed.

Polypane

Reveal.js 4.5: An HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v4.5 was just released with support for jumping to specific slides, a few new themes, and with live reload working with files in subfolders.

Hakim El Hattab

Easy Email: A Drag-and-Drop Email Editor for React — Generates code through drag-and-drop editing and by employing the MJML responsive email framework.

Zalify