Search

Post types:
Categories:
🔖

The two Reacts

Read Note

A very well written overview of when client-side functionality and server-side functionality make sense to use for a …

🔖

React TypeScript cheat sheet

Read Note

"Official" documentation on how to pair React and TypeScript. Very useful in conjunction with the GitHub …

🔖

React server components tips

Read Note

A quick overview of React Server Components and some of the mental models that are useful when thinking about how they might be applied, in …

🔖

React modal using <dialog> element

Read Note

An extremely detailed overview of how to use the native <dialog> element in React to build a state-driven modal component. As ever, the answer is significantly more complicated than it would be …

Published:
Categories:
  • HTML & CSS
  • JavaScript
Tags:
📖

React Summit 2020 Notes

Read Article

Notes from the fully remote React Summit 2020 (or at least the talks I tuned in for). Lots covered, from static-site generators and the Jamstack through to React state management and accessibility. What a fun day!

🔖

Guide to React plus TypeScript

Read Note

I find navigating the type options in React (and decoding what they actually do/mean) really difficult. It's layers of abstractions on top of layers of more abstractions 😄 Luckily, this guide …

🔖

CSS variables for React devs

Read Note

Josh breaks down why and how you can use CSS variables more easily in React, specifically using styled-components. Honestly it feels a little terrifying how much is needed just to get basic …

🔖

React Testing Library: custom hooks

Read Note

Another great overview of how to use the `react-hooks` extension for the Testing Library suite, with some more complex examples than many other …

🔖

How to use React Context Effectively

Read Note

I guess I'm reading up on React Context a lot today. Kent provides a useful step-by-step guide in his normal steady manner, which I found pretty easy to grasp. He also makes a very valid …

🔖

The self-fulfilling prophecy of React

Read Note

I've been saying for years that React feels like jQuery did circa 2010: it's used everywhere, its devotees are numerous, but the leading edge left it in the dust a while ago. I do think that Hooks …

🔖

Making sense of React Server Components

Read Note

A superb breakdown of the changes being made in React 18+ around the new React Server Components paradigm. Josh has a knack for explaining complex problems in simpler ways, and this is no exception; …

🔖

Common mistakes with React Testing Library

Read Note

I've been getting a lot of hands-on time with React Testing Library recently and, for the most part, I really like it. Still, I get caught out from time-to-time, and this article has a lot of great …

🔖

How to test custom React hooks

Read Note

I've been doing a fair amount of testing React hooks recently. Part of that has been learning the `react-hooks` extension for the Testing Library suite, which took a while to wrap my head around. …

🔖

Three ways to autofocus in React (that almost always work)

Read Note

Whilst accessibility means you largely want to steer clear of autofocus on web forms, sometimes it can be beneficial. In HTML, we can now reach for the handy autofocus attribute, but as I recently …

🔖

Why using an index value for a React key is a bad idea

Read Note

Solid reasoning – with a clear example – of the potential dangers of using an array index as the key value in ReactJS. Not something I'd ever considered (and something I do a lot) but …

🔖

Manage Global State with Contact API and Hooks

Read Note

Jonas has put together a useful overview of why the "new" Context API in React is probably a better option than Redux for many simple use cases, as well as step-by-step instructions on how to set up …

🔖

Beep boop! Announcing "use-sound"

Read Note

Sound has definitely been abused on the web, but I agree with Josh that it shouldn't be ignored completely. There is still a time and place for using sound to great …

🔖

Compare front end framework code patterns

Read Note

A brilliant site for comparing common component patterns across most of the major front end frameworks. Want to learn Svelte and already know React? Select both, pick the pattern you're wanting to …

🔖

The great gaslighting of the JavaScript era

Read Note

I'm not sure I agree fully with everything Jared has written here – and there's a strong feeling of bias-tinted vision to some of the claims – but I enjoyed the overall trend of the argument and …

🔖

Accessible chart & data library

Read Note

Easily the most comprehensive and impressive charting and data visualisation library I've come across. Graphs and charts are keyboard accessible, well-labelled, meaningfully marked up, with colour …

🔖

Core web vitals reporting

Read Note

A semi-official reporting tool to interrogate trends in web technologies versus Core Web Vitals (including the upcoming INP metric). Things look particularly bad for React-based frameworks, but …

📖

Pass API Data to the Stylesheet with CSS Variables

Read Article

I keep running into the same problem: how to set a style attribute in the CMS and have that be dynamically rendered on the front-end, without relying on inline styles. Turns out it's a great use case for CSS variables!

📖

Adding Search with Algolia (Gatsby, Craft CMS - Part 1)

Read Article

Static sites don't make search functionality easy, but luckily there are some excellent services that do. I've been messing around with Algolia and finally have it working with Craft and Gatsby the way I want it... on the backend, at least.