jonelantha: Blog


Recent Posts

How-To: Unzip a zip file in the browser, natively, no dependencies

Unzipping files from a zip file in the browser without additional dependencies

Hacking the browser animation cycle: Implementing a 'before paint' callback

Quick snippet for implementing a before paint callback or promise in the browser

How-To: Setup Gatsby on AWS using GitHub Actions [3/3]: Setup Continuous Deployment with GitHub Actions

How to setup automatic build and deployment of your Gatsby site. Any change to main gets automatically published within minutes.

How-To: Setup Gatsby on AWS using GitHub Actions [2/3]: Setup CloudFront Function for index rewrites (with optional basic authentication)

How to to set up a CloudFront Function to handle Gatsby index pages correctly

How-To: Setup Gatsby on AWS using GitHub Actions [1/3]: Setup S3 and CloudFront

Let's take a look at how to publish a Gatsby site to AWS using GitHub Actions. First step, setup S3 and CloudFront.

How-To: Use Playwright and Create React App to setup E2E component testing with a test-harness

A look at a simple yet effective approach for implementing automated browser-based testing for a standalone React component

All the Webs: Helloworld from WebAssembly and webpack

A helloworld tutorial where we setup a webpack project which compiles hand-coded WebAssembly. A purely front-end project, using purely front-end tooling.

How-To: Fix 'more than one copy of react in the same app'

A look at a common React error sometimes seen when developing reusable components

React: How to get out of useCallback & useRef hell

A look at different refactoring approaches when the hooks start to take over...

How-To: Perform password based AES encryption in the browser with zero dependencies

A quick code snippet demonstrating the use of the browser's SubtleCrypto API to encrypt and decrypt string content using a text-based password

How-To: Host serverless AWS Api Gateway and static files on the same domain

An example of how to setup Serverless Framework to deploy static front-end files and a serverless api behind the same domain name

Moving the goal posts: just how do you find the maximum possible width of an HTML element?

A look at the intricacies and pitfalls of trying to accurately fill an HTML element with exactly the right amount of content

Taming ResizeObserver errors

Here we explore common ResizeObserver errors and how you can stop them

Performing a semantic-release dry-run locally (without too much hassle...)

Are you using semantic-release in your npm package workflow? Here's a quick guide on how to setup local sanity checking of your release notes

How-To: Setup a CloudFront Lambda@Edge function to handle Gatsby index pages

How to to set up a CloudFront Lambda@Edge function to handle Gatsby index pages correctly

Refactoring your GitHub Actions workflow into a script

In this article we'll compare using different scripting engines to extract out code from a workflow file.

Create your own local js GitHub Action with just two files

Here's a handy shortcut if you've got an npm based project and you're looking for a quick way to create your own GitHub Action in the same repo with very little overhead.

Welcome to the blog!

Welcome to the blog