Web developer and bike enthusiast from London, UK
The hidden cost of state updates As described in the React docs , component renders happen in a three-stage process: trigger, render and commit. Stage 1 : Trigger occurs from either the initial render or from a state update. Stage 2 : Render calls your component to see what has changed. Stage 3 : Commit applies the changes to the DOM. Most developers focus on stage 3 when discussing performance…
Using a SharedWorker to share a WebSocket connection Consider an online shopping site that uses a WebSocket connection to notify users of events such as order updates, the amount of people viewing the same item or the status of promotional deals. Users may typically open a few browser tabs to the same site with different products they are interested in purchasing. Without a SharedWorker each…
Pipeline structure and requirements The Style Dictionary build transforms styles from design tokens in JSON format through to code for use in Lit web components. The library comes with built in formats to generate tokens for different platforms but there doesn't yet seem to be a standard approach for combining light and dark color schemes into a single set of tokens that use the light-dark CSS…
Carousel? Nah, scrollable tabs! Recent examples of new experimental scroll features in the CSS overflow module use the Carousel pattern as a demonstration. This post by Adam Argyle provides an in-depth explanation of the features with a gallery of inspiring examples. Similar carousels also featured in some talks at the latest Google IO event and got me thinking about other areas where we can use…
A shared benefit of TDD and AI assisted development With a traditional software development process like Test-Driven Development (TDD), instead of writing code first, we write tests that define the expected behavior. A common approach for TDD named Red → Green → Refactor breaks the development process into an iterative cycle of three distinct phases: Red : think through the problem and create…
Where did the test ID come from? Mature testing tools like Selenium WebDriver provide a somewhat limited set of methods for selecting elements and asserting state. This limitation led to the rise of the test ID pattern used by developers to apply an attribute to elements for the sole purpose of selecting them in tests. If I recall correctly, the birth of this pattern came from the logic of…
An argument for custom elements Setting aside the recent debate on the usefulness of custom elements in this world of component based JavaScript frameworks and libraries, custom elements provide the perfect opportunity for us to build framework agnostic components that support web development projects now and into the future. Before version 19, React had limited support for custom elements and as…
Polymorphic components React frameworks often have a concept of component polymorphism. You can see examples of this in the component prop of MUI and Mantine or the Slot element in Radix. This polymorphism provides a mechanism to render an alternative element than the default use case but have the same styling and behaviours applied. In web components features of the slot element provide similar…
What is FOUC and how does it apply to web components? A flash of un-styled content (FOUC) occurs when content on a web page is visible before it has had styling applied to it. This can happen for a few reasons, often while loading images that are used in the site layout, using web fonts that either don't appear until loaded or show differently or more commonly with JavaScript that applies styling…
Keeping HTML element attributes and properties in sync If you've worked with HTML elements previously you'll likely be aware that attributes declared on an element have no default mechanism to reflect their value to properties on the underlying object in JavaScript. While this isn't true for all elements and attributes it makes sense because object properties can represent any type of data and…