Tech Snacks by Passionate People

This is a design report – a story about the tradeoffs and challenges that we encountered while building a medium-complexity React component in TypeScript. These include state modeling (“making illegal states unrepresentable”) basic type-level programming in TypeScript DX patterns for generically typed React components DX patterns for reusable controlled components using a Redux-like action/dispatch state paradigm These topics all deal with the external interface and TypeScript typings; lower-level implementation challenges (like optimizing drag interactions and sharing state between React and D3) have been left to a future post.

Dependency injection for React hooks. Contribute to garbles/react-facade development by creating an account on GitHub.

Understanding the spectrum of control in design systems

In the course of three years of consulting and problem solving for companies with existing design systems, one fact has become (at times, painfully) obvious: Design systems are hard to get right.

The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element

How Telegraph, the leading UK news website managed to improve their 75th percentile CLS by 250% from 0.25 to 0.1 in a couple of months.

Instant Vitals is an open source library to identify parts of your website that are degrading your Web Vitals scores.

Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.

Here's how they differ, and when it matters…

When writing front-end tests, you’ll find a lot of pitfalls along the way. Let’s explore common mistakes developers make, and how to avoid them. Testing doesn’t need to be painful, after all.

Shipped with Chromium 91 is TablesNG, a under-the-hood rewrite regarding tables. Here's a list of interesting fixes it contains.

In 2021, we will largely complete the process of designing, building and shipping RenderingNG, a next-generation rendering architecture for Chromium.

The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. Let’s get up to speed on Workers on the Web!

Query language for efficient data extraction from Wikipedia - zverok/wikipedia_ql

A fun and tricky JavaScript quiz

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Too much has been lost already. The glue that holds humanity’s knowledge together is coming undone.