A panorama of Skara Brae, Orkney

Matt Kane

I'm Matt Kane. I've made high-speed flashes and beekeeping software, but I mostly spend my time making web and mobile apps with React and TypeScript. Follow me on Twitter and Github.

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

20 February, 2019

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

19 January, 2019

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

04 January, 2019

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

19 October, 2018

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

29 August, 2018

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

07 April, 2018

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

07 April, 2018

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

22 March, 2018

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…