This site has been running on the same Jekyll and webpack setup since 2018. It worked, but every time I came back to it I had to coax a Ruby environment and a webpack 2-era build pipeline back to life before I could write a word. I've rebuilt it with Astro - same content, same URLs, considerably less machinery.
Read the article about Migrating this blog from Jekyll to Astro
Updated
When writing tests with React Testing Library, developers often run into the 'React state updates should be wrapped into act' warning.
Read the article about Fixing React Testing Library 'test was not wrapped in act' warning
Updated
I've been working with error boundaries in React. Here's how to effectively test thrown errors by components wrapped in an error boundary using Vitest and React Testing Library.
Read the article about Testing React Component Error Boundaries
Updated
I was recently writing unit tests for a project and I wanted to test whether a function in one class had been called by a parent class. Sounds simple right? I found it a bit trickier than anticipated so wanted to share my learnings.
Read the article about Mocking JavaScript Class Inner Functions With Jest
Updated
A friend of mine introduced me to Svelte and the approach impressed me. Instead of doing a lot of work in the browser inside a virtual DOM (like a lot of frameworks), Svelte is a compiler step, meaning the code is compiled to efficient vanilla JavaScript when the project is built. It results in a considerably lighter load whilst also being able to leverage useful functionality such as reactivity which might be why you're choosing to use a framework in the first place. I combined this with Sapper - since retired in favour of SvelteKit - to get a lightweight, statically generated application out of the box.
Read the article about Getting started with Sapper and Svelte
Updated
I came across a community group who had been managing a Google sheet to detail data about which local businesses were delivering during the Coronavirus crisis. I used this sheet as a backend for an API I built using Lambda and API Gateway.
Read the article about Building a REST API from Google Sheets with AWS Lambda and API Gateway
Updated
I'm a big fan of Vue.js and Pinia for state management. Combine this with Nuxt and you can generate a static version of your Vue application and give your users a speedy site served from HTML files. I cover this and how you might approach making the content of your static site dynamic using Netlify build hooks and Contentful as a CMS.
Read the article about Static and serverless with Vue.js, Nuxt.js, Vuex, Contentful, Netlify
Updated
One of things that irks me about the usability of shopping online is the inconsistent checkout experience between different merchants. Do I really need to enter the same delivery/billing address, card number, CVC code etc. into every websites specific form? Payment Request API to the rescue.
Updated
Advancing my knowledge around the topic of accessibility has been something I've been doing a lot recently. With this knowledge came the realisation that previous web applications I'd worked on could do with some improvements in this field. There are a few quick wins which could fundamentally improve the accessibility of your web application post-build.
Read the article about Improving Accessibility On Your Web Application
Updated
I was asked recently how debouncing works in JavaScript. I knew why I should use it, what it did and that the helper function I'd been using was short and easy to read through. However I didn't grasp what was going on 'under the hood'.
Read the article about Understanding how a JavaScript ES6 debounce function works