JulesBlom.com

A recipe for a map with a minimap, using d3-geo, nested SVGs, `viewBox`, and ``

A dive down a rabbit hole recreating and redesigning the line diagrams I saw on Dutch railway platforms, in code.

A recipe to make a zoom loupe that follows the pointer, using nested SVGs, `viewBox`, and ``

Deduplicating SVG definitions in React by portaling them into a plain object that impersonates a DOM node, the trick behind React Aria's Collections.

Colocating SVG definitions with the components that use them, using portals and context.

Understanding how parent and owner components affect context updates can help you write more performant context providers

An in-depth look at what `ReactDOM.flushSync` does and what it’s good for.

Being aware of the distinction between parent and owner components can help you isolate updates and improve rendering performance.

There are two, similar but different component trees in React.

A visual guide to dealing with multiple promises efficiently using the Promise concurrency methods.

React’s API includes several optional and alternative parameters which provide additional behavior like optimization or other extras that occasionally can come in useful.

My visual, spatial overview of the React v18 API.

A first look at the useSyncExternalStore React hook, its rationale, its caveats and its non-library purposes.

A ref callback is a little known feature in React, it's a function to perform an action when React attaches or detaches a reference to a DOM element.

An explorable visualization of the modern HTML elements.

An interactive timeline showing how a React component with hooks runs including a quiz of React Riddles to test your knowledge.

Cleaner conditional rendering in React by matching values using component maps, optionally, lazy-load components to make a “lazy component map”

useReducer is not just for complex state-updating logic, it can be used for commonplace state updates; state updates that are not complex, and not super simple either; medium, mundane reducers.

There are a few cases where the React devtools can’t infer a name for a component, use the displayName property to avoid anonymous components in the devtools.

useReducer is not just for complex state-updating logic, it can be used for very simple state updates.

Some small React tricks you may or may not have seen before.

In React, you can reuse state updater functions by moving them to module scope.