I'm Matt Kane. I've made high-speed flashes and beekeeping software, but I mostly spend my time making tools for web developers. Follow me on Twitter, DEV and Github.

Using AVIF with Gatsby

In the latest version of Gatsby you can now generate and display AVIF images. This is a next generation image format that can give considerably better compression than JPEG or WebP. Here's why this is a big deal.

How to use Drupal Paragraphs in your Gatsby site

If you’re using Drupal as a data source for Gatsby, you really should be using the Paragraphs module. It’s one of the most powerful ways of building a site. It allows you to create “Paragraph Types” that an editor can add and reorder to assemble a page. Paragraphs can be simple types such as a block of HTML or a list of images, or more complex types with many different fields. Most of the…

A more realistic HTML canvas paint tool

Creating a basic canvas drawing tool is a simple job in JavaScript, but the result is more MS Paint than Monet. However with a few changes you can make a tool that gives much more realistic result. Read on to learn how to build a canvas paint brush, bristle by bristle. Let’s start with the most basic implementation. First you need to set up a simple canvas element in the page. The basic procedure…

Create a minimal React app in less than a minute with Parcel

The simplest way to get started with React is to use (CRA), but that is often overkill. In this post I’ll take you from zero to React app in less than a minute, without CRA and without loads of dependencies. I’ll throw in TypeScript too for good measure. The main benefit of CRA is that it saves you from having to set up the Webpack and Babel toolchain. Parcel is a great replacement for Webpack…

How to force package installs to use yarn not npm

Leaving aside arguments over which node package manager is better, one thing that should be clear is that it’s a bad idea to switch between them in the same project, as conflicting lockfiles can leave the project in an unpredictable state. If you run yarn in a project that has a from npm then it does warn you about this, but npm doesn’t do the reverse. If you run in a project with a it will…

Class fields are coming: here's what that means for React

If you’ve ever written a class component in React, you probably have a contructor a lot like this: This is the pattern used throughout the React docs, and seems to be the most common approach that I’ve seen in the wild. If you’re anything like me, you forget to bind the event handler until you get the ubiquitous error. TypeScript users are probably looking at this and wondering why this song and…

Continuous deployment of a static site with CodeBuild and CloudFront. Part 1: Deploy Previews

Static site generators are awesome (particularly Gatsby), and they work really well with continuous deployment. Push to your git repo, your CI tests are run, your site builds, then it goes live. What’s not to like? Even better is when you can automatically build previews of all of your pull requests. Netlify does this, and it’s seriously cool. This blog is hosted with Netlify, and I’m a big fan…

Creating a typed "compose" function in TypeScript

I recently wrote a couple of small utility functions that turned into a deep exploration of TypeScript generics, as well as the new typed tuples in TypeScript 3. This post assumes you know at least a bit about generics in TypeScript. If you don’t, I highly recommend reading up on them, as they’re one of the most powerful features in the language. It assumes no prior knowledge of functional…

Add Disqus comments to a Gatsby blog

This blog is a static site built using GatsbyJS. This means you can’t add a comment field like on a normal blog engine such as Wordpress, because there’s no dynamic server to handle it. That’s not a problem though, as we can use a third party comment plugin, such as Disqus. This is how I added Disqus comments to this site. You should be able to see them down below. The nice thing about Gatsby is…

How to install Contenta headless Drupal on a Digital Ocean droplet

I’m working on a project that uses Drupal as a data source for a Gatsby site, and I needed a clean Drupal instance for testing. Contenta is a headless Drupal distribution that comes with sensible defaults and some useful demo content, and it seems to fit the bill. It’s even the sample used in the Gatsby “using-drupal” demo, so that’s a good start. Installing it is generally a straightforward…

Add geolocation to HTML forms in three lines of JavaScript

Addresses are some of the most common types of HTML form that you are likely to create, and most have terrible UX design. We are going to progressively enhance our form to fix one of the most common mistakes, and maybe learn some fetch and async/await along the way. This is admittedly quite a lot for three lines of code, so scroll to the bottom if you just want the tl;dr code. Unless you are…