Top picks — 2024 February

It seems I’m not very good at posting regularly, so I thought I might borrow an idea I first saw on Paweł Grzybek’s blog and try posting a monthly roundup of links.

Here are my most interesting links from February.

Links:

Offloading JavaScript With Custom Properties

Heydon Pickering makes use of applying CSS custom properties in an Intersection Observer which can then be used in CSS to apply animations. Nothing to revelatory here, but I found it to be a very nice example of using the right tool for the job.

In Loving Memory of Square Checkbox

As someone who spends a lot of time working on design systems, it really bothers me when people mess with intuitive design. I really hope the round checkboxes in VisionOS get rolled back, or at the very least, don’t spread to other Apple operating systems.

How To Use forwardRef With Generic Components

If you’ve worked with React components that accept a generic prop that also needs to be wrapped with React.forwardRef, you’ll know that it doesn’t work. Matt Pocock shows you how to work around it with a wrapper component that fixes the types.

Even better (in my opinion) if you’re just using these components in your app, and you don’t need to bundle them, you can use module augmentation to "fix" the types so you don’t need to use the wrapper:

declare module 'react' {
	function forwardRef<T, P = {}>(
		render: (props: P, ref: React.Ref<T>) => React.ReactNode
	): (props: P & React.RefAttributes<T>) => React.ReactNode;
}

Don’t Disable Form Controls

Really great article on why you really shouldn’t be disabling form controls (including submit buttons).

When will Apple focus on Safari?

I can’t, for the life of me, understand why Apple doesn’t allow tabbing through buttons and links by default. It’s one of the first things I change whenever I set up a new Mac, and I always end up having to look it up 😡

The Importance of Feedback Loops

Sweat the small stuff, before it becomes the big stuff.

Avoiding Hydration Mismatches with useSyncExternalStore

Hydration mismatches have to be one of the most frustrating things to debug in React.

I wouldn’t have thought to use useSyncExternalStore for this, but it after reading it makes sense. The ClientGate component is also a clever idea.

React Labs: What We’ve Been Working On – February 2024

Really looking forward to the Canary features that are exposed in Next.js to finally become stable. Kudos to the React team for taking the time to get these things right. React 19 is going to be awesome, and I’m really looking forward to never having to worry about useMemo or useCallback ever again when React Compiler becomes stable (hopefully later this year).

Tempo

5 kB, tree-shakable date library that has first-class support for working with time zones? This could be good...

Things Unexpectedly Named After People

I don’t think I knew about any of these.

Syntax Highlighting code snippets with Prism and the Custom Highlight API

Bramus Van Damme talks a bit about syntax highlighting and introduces an interesting new browser API that enables syntax highlighting without excessive use of <span> elements.

The Great Fiction of AI

I love a good art-directed post.

YouTube:

Social media: