Tutorial: how to embed a react component that is part of a larger app
How to embed part of a NextJS application This article assumes you have some basic understanding of React/NextJS In recent years it is…
Posts
The Ultimate Guide to Automatic Accessibility Testing in CI/CD for React Apps
I've worked with many engineers who I consider to be extremely skilled at Frontend code, knew the web APIs inside-out... but produced very…
Making accessible interactive React components
If you are like me, you might primarily use your mouse to interact with websites. But sometimes you will open up a modal, and instinctively…
Check client (Frontend side) CPU/memory usage in JavaScript with these web API features
The web API has so many useful features, and I'm always finding new ones I haven't come across before. Today I found out about ways to…
Everything you need to know about HTML5's autocomplete
Autocomplete is the very useful feature in browsers where when a user is presented with a form, the browser can fill it in with previously…
structuredClone: native way to deep clone in JS
Summary of how you can deep clone easily with structuredClone tldr: you can use structuredClone(someObject) and it will deep clone…
Tutorial: Build your own server side rendered (SSR) React app
I used to think that server side rendered react apps was quite complex to set up. And it is - behind the scenes. But we can use renderToStr…
Rarely Used React Hooks
I think almost all React devs are familiar with useState(), useCallback(), useEffect() etc. But there are quite a few more than are less…
Tutorial: Multi-stage wizard in React, using Context
Modern web apps often have a need for a multi stage wizard. This is a guide on how to build it with React, using context. This tutorial…
Testing with React Testing Library - tips and tricks
Here are some notes/tips/tricks when it comes to testing in React. Some are quite basic things, some are things I see less frequently in…
Chrome inspector tips and tricks
Here are some features, tips and tricks for using Chrome's inspector. It is very powerful with lots of advanced tooling to help with…
Interesting CSS Topics
This page lists some CSS features that I thought were interesting and don't come up often during normal day-to-day work. This page is a WIP…
Interesting HTML (web API) Topics
WIP post, with some interesting topics about web APIs/HTML elements/etc. Get the label for an input easily I never knew that form elements…
Interesting React Topics
This is a list of some interesting (but less often discussed) topics related to React that I thought were interesting. React.Children…
NPM Dependencies (things you may not be familiar with)
If you work with JS/TS then you are going to be very familiar with dependencies/devDependencies in your package.json. As a quick reminder:…
React Typescript Cheatsheet
Short guide on some of various ways to correctly type components and related types in React. updated for React 18 Typing a functional…
Useful docker compose configs
Here are some useful snippets for quickly getting some services set up with docker. I've left some commented out lines that you may want to…
Looping in JS - all the ways to iterate
Here is a list of everything I can think of relating to looping in JS. There isn't much purpose to this post, I was just trying to find…
Tutorial: useState() + localStorage in React with custom hooks
Sometimes you want to have some basic way to persist data between tab reloads in your React app. One way to do it is with localStorage. This…
Container/presentational component pattern - and how it can be replaced with hooks
We often end up with huge apps that mutate state, run business logic, make API calls, and manage the UI rendering. This can sometimes be too…