oli

weird web person
previously @founderscoders
previously @ticketmaster
he/him

19 Oct article
Deploying web apps to Fly.io
With the demise of the Heroku free tier looming I've been searching for an alternative place to deploy simple web apps. It looks like Fly.io is emerging as a frontrunner, so I thought I'd play around with it and document my experience…
18 May article
Frontend testing in Node with jsdom
Sometimes you want to write some simple tests for a JS app that runs in the browser. Unfortunately this can be quite difficult, for a number of reasons. However with the right configuration the jsdom library can help us easily test our DOM code using Node so the tests run right in our terminal…
28 Jan article
Using JSDoc to check your code
It can be difficult to keep track of what each value is while you're writing code. This becomes a bigger problem in larger codebases with lots of abstraction—when data passes through several functions it's easy to forget what you're expecting to get back. JSDoc is a tool/convention that can help solve this problem…
11 Jan article
Making Git push a bit friendlier
I have always found pushing my local Git branches to a remote repository a bit confusing. In my experience mentoring beginners this definitely confuses them too. I decided to sit down and figure out practical recommendations for working with it…
24 Jul 2021 article
Building boring websites with Next.js
So Next.js is a great framework for working with React. It comes with a bunch of stuff configured out of the box that you really don't want to worry about when you're starting a project. However it has inherited a major problem from the wider React ecosystem: it massively overcomplicates making what should be a simple bloody website…
11 Jun 2021 article
Avoiding 404 errors with Single-Page Apps
I see the same problem happen again and again to juniors building their first Single-Page App (SPA). Everything works fine locally, but as soon as they deploy to a hosting platform like Netlify they get loads of "404 Not found" errors trying to load pages. There are lots of resources documenting how to fix this, so I'm also going to try to explain why this happens too…
10 Jun 2021 article
Better dev environments with npm workspaces
As of version 7 npm now includes a feature called "workspaces". This is designed to help you manage multiple separate packages within a single project…
15 Feb 2021 article
How to make your own Git hooks
It turns out Git hooks are pretty simple when you strip them back to basics. I always thought they were a sort of arcane magic. My only experience with them was trying (and often failing) to chant the right combination of Husky, lint-staged and Prettier commands required to ensure new code is formatted consistently…
6 Dec 2020 article
Responsive CSS For Beginners
Responsive Design can be a scary thing to a beginner. It's got a special name, which makes people think they need to do special things to achieve it. I'm going to explain a bit about how responsive design developed, then demonstrate making a simple web page work on any screen size with very little CSS…
13 Aug 2020 article
How to make your terminal nicer to use
I mentor a lot of junior developers, and it makes me sad to see so many stuck with the ugly, hard-to-use default terminal setup their machine came with. As a developer you probably spend a large chunk of your day using it, so it's a good idea to invest a little bit of time in making it look prettier and work more like a modern application…
4 May 2020 article
Better native form validation
All but the simplest forms need some validation to help users enter the right information. I usually want slightly more control than native HTML5 validation, but without re-implementing everything in JavaScript. I recently discovered a great technique for enhancing the browser's built-in validation…
2 May 2020 article
Build your own analytics with Netlify Functions
I recently decided I would be more motivated to write blog posts if I had some indication that people were reading them. This meant setting up some kind of analytics…
13 Mar 2020 article
Pitfalls of async functions
Async functions can seem like the holy grail for JavaScript developers who struggle to manage their asynchronous code with callbacks or promises. However there are some pitfalls that aren't necessarily obvious at first…
19 Feb 2020 article
Schedule Netlify deploys using GitHub Actions
I recently rebuilt the Founders and Coders website using the Eleventy static site generator. I hit an interesting problem making an events page: I wanted the page to be up-to-date every day, which is hard when your site is just a collection of HTML files. I could have used client-side JS to fetch the event schedule and render them, but that felt like cheating when the rest of the site is fully static. Instead I decided to rebuild and re-deploy the site at midnight every day…
23 Jan 2020 article
Where we're going, we don't need servers
One of the nicest things about building a single-page app is that you don't need a server. All your application logic can happen client-side, which means you only have to deploy some static HTML, CSS and JS files. There are a plethora of great (free!) options for this. My favourite is Netlify…
15 Dec 2019 article
Setting up a project from scratch
Setting up a project can be as daunting as starting an essay. You sit staring at the blank white page (or dark mode editor) wondering where to begin. I'm going to describe the steps I would take to create a new web project. It will be JavaScript focused, since that's the ecosystem I'm comfortable in…
11 Dec 2019 article
First-class functions in JavaScript
In JavaScript functions are treated like any other variable. This is sometimes referred to as “first-class functions”. The concept can be tricky for beginners, so I'm going to try and explain exactly what it means…
7 Nov 2019 article
A complete guide to making web pages from scratch
It can feel confusing when you're first learning to code for the web. You can get pretty good at HTML, CSS & JavaScript in isolation (using online tools like freeCodeCamp, CodePen and repl.it but struggle to put all the pieces together and create an entire web page on your own…
6 Nov 2019 article
Minimum viable GraphQL: the client
GraphQL tutorials often assume you'll be using a client-side library like Apollo or Urql to manage your data-fetching. This can make it hard to separate what's GraphQL itself from stuff implemented by the library…
5 Nov 2019 article
Minimum viable GraphQL: the concepts
GraphQL is a specification for APIs developed at Facebook. It consists of a language for querying data and a runtime that understands those queries and gets the right data. In effect it's an agreed-upon convention with well-defined rules for fetching and serving data…
13 Sept 2019 article
Two ways to conditionally set object properties
A junior developer recently asked me how they could conditionally set a property on an object. They didn't want an always-present key with a value of `undefined`, they wanted the property not to exist at all…
22 Aug 2019 article
Testing your UI with React Testing Library
Testing Library is a fantastic tool for writing UI tests. The base library works for testing anything, but there are framework-specific versions—I'll be talking about React Testing Library here…
22 Aug 2019 article
Stop exporting things, I'm begging you
I honestly believe the "one component per file" ESLint rule is the smallest thing with the most negative impact on React codebases I've worked in…
3 Jul 2019 article
Gatsby is the future
I think Gatsby is the future of the web. I'm going to explain why by comparing it to WordPress, the go-to platform for websites over the last fifteen years. I think Gatsby already meets or exceeds most of the things that make WordPress so popular, so it's well placed to become the next huge thing…
12 Jun 2019 article
Static typing in JavaScript with Flow
Flow is a library for adding types to your JavaScript. It's a way to get some of the benefits of a statically typed language whilst still writing the JavaScript you know and love…
3 Mar 2019 article
Introduction to the DOM
When I first learnt JavaScript I struggled to understand how to apply that knowledge to practical web pages. I wanted to build things that actually did stuff, rather than static HTML/CSS pages or JavaScript things that only logged text to the console…
22 Feb 2019 article
Introduction to Redux
Redux attempts to make state changes predictable by restricting how and when they happen. It separates your state management code from your UI code…
1 Dec 2016 article
Create a flickering image effect using CSS sprites
I just added a flickering faux-motion effect avatar to my About page. The technique behind it is fun (and requires relatively little code)…
16 Nov 2016 article
How to create a Ken Burns hero image effect
Lick are a shopper marketing agency with a strong focus on creative design, which meant their site needed to be visual-heavy. They wanted the top of the homepage to communicate this, whilst also subtly nodding to some of the big brands the agency works with…
11 Jul 2016 article
Why I donate 10% of my income to charity
If it is in our power to prevent something bad from happening, without thereby sacrificing anything of comparable moral importance, then we ought, morally, to do it…
8 Jul 2016 article
A readable guide to writing more readable content
Writing informative articles for the web is not like writing for other mediums. People read differently online — they open lots of links at once and flick from tab to tab, scanning up and down each page to find the information they want as quickly as possible. The easier to read and absorb your writing is, the more people you will reach…

oli

Deploying web apps to Fly.io

Frontend testing in Node with jsdom

Using JSDoc to check your code

Making Git push a bit friendlier

Building boring websites with Next.js

Avoiding 404 errors with Single-Page Apps

Better dev environments with npm workspaces

How to make your own Git hooks

Responsive CSS For Beginners

How to make your terminal nicer to use

Better native form validation

Build your own analytics with Netlify Functions

Pitfalls of async functions

Schedule Netlify deploys using GitHub Actions

Where we're going, we don't need servers

Setting up a project from scratch

First-class functions in JavaScript

A complete guide to making web pages from scratch

Minimum viable GraphQL: the client

Minimum viable GraphQL: the concepts

Two ways to conditionally set object properties

Testing your UI with React Testing Library

Stop exporting things, I'm begging you

Gatsby is the future

Static typing in JavaScript with Flow

Introduction to the DOM

Introduction to Redux

Create a flickering image effect using CSS sprites

How to create a Ken Burns hero image effect

Why I donate 10% of my income to charity

A readable guide to writing more readable content