Frontend Focus

🇺🇦 #​539 — April 27, 2022 | Read on the web

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

Hector Martin

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.


📑 PDF: Taking the Journey from Zero to 100 Deploys a Day — Elite teams capable of deploying many times a day didn't get there overnight. This book breaks down how they did it in 3 phases: Deploy 1x a week → 1x a day → many times a day. By Dylan Etkin, formerly a founding engineer of Jira at Atlassian.

Sleuth sponsor

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.

Lee Munroe

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

Alex Ivanovs

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

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.

Tim Nguyen (WebKit)

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.

Jack Childs

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code — Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool.

Retool sponsor

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.

Steve Dennis

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

Kevin Powell

How to Generate a Full Tailwind CSS Palette from a Single Color
Luka Peharda

Why Brave and DuckDuckGo Are Cracking Down on Google’s AMP
Ivan Mehta

How to Detect Dead Code in a Frontend Project
Iva Kop


Calling all Empathetic + People-Focused Sr. JavaScript Engineers — We're looking for Node + React developers who want to design architecture, lead teams, and ship features directly to customers.
Moz Group

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

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

Sarah Daily

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.

Aleksandr Hovhannisyan

Test Your Web App for Accessibility. Free axe DevTools Chrome Extension

Deque sponsor

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.


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.

David Khourshid codepen