Issue 539 - The complexity of color on the web (16)

Linear-Style Cursor Glow — This is a lovely little motion effect, adding a cursor glow that illuminates the currently hovered element. Recreated here using CSS variables, radial gradients and an inset. It's inspired by the Linear site, as explained in this tweet.

Feedback Fin: An Open Source Widget to Collect Feedback Anywhere on Your Site — Just drop in the script and add a few lines to initiate the widget, which is customizable and accessible.

'Web Color Is Still Broken' — Whether it's handling display profiles, transparency, scaling, or color mixing, the author claims one thing is clear: “the web is still doing color wrong”. Here’s the Hacker News discussion on this issue, with plenty of food for thought on this complex matter.

Lexical: An Extensible Text Editor Library (That Does Things Differently) — Fresh out of Meta (Facebook) comes a new text editor framework that puts accessibility, performance, and reliability at its heart. It’s only 22KB gzipped, and a (native) iOS version is on the way too.

The Ultimate Guide to Push Notifications for Developers — If you find yourself needing to implement notifications, then it will become clear quickly that they can be tricky to get right. Here’s an explainer on how to implement them and which practices are best to follow.

A Practical Guide to Centering in CSS — This reference explains various methods to center elements using CSS, including techniques for Grid & Flexbox. Quite possibly the most evergreen of frontend topics. 😅

Non-Interactive Elements with the inert Attribute — How the inert attribute provides an efficient way to hide elements from assistive technology and disable element interactions such as being focused, clicked, edited, or selected. FYI, this property is currently in the Safari 15.5 beta.

Reducing Spam From mailto Links — Not necessarily the best way to solve this age old problem (I remember seeing JavaScript being used for this in the 90s!) but an interesting approach.

Evaluating Design System Adoption using Custom CSS — How one team uses custom user CSS to easily and visually audit component and design token usage in its live products.

▶  Animate From display: none — Here’s a useful tutorial going through how to animate when working with display: none — a non animatable property.

Mastering CSS Transitions with React 18 — How to use the new useTransition hook that arrived with React 18 to perform a wide variety of web animation effects.

Introducing Material Symbols — The rather lovely open-source Material Icons set is now available in a customizable, variable version. You can fine-tune weight, fill, optical size, and grade. Available on Google Fonts (or via a new Figma plugin).

Fluid Type Scale: Generate Responsive Font-Size Variables — Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.

Retool Makes It 10x Faster to Build Custom Internal Tools for Any Company — Build internal tools in minutes with Retool, where visual programming meets the power of real code.