oli

You can speed up a single-page app by declaring static data dependencies ahead of time so the browser can preload them…

Most people associate JSX with React, but I really like using it as a general server-side templating language for creating HTML strings…

The HTMX library is getting a lot of hype lately. I thought I'd experiment with using a similar HTML-first API to progressively enhance server-rendered HTML…

Modern JavaScript runtimes make it quick to throw together server-rendered web apps using almost no external dependencies, relying on web standard APIs…

This is pretty niche and weird, but I sometimes end up writing CSS that needs to target an element nested inside an instance of itself. This is not obvious to do in Tailwind, so I thought I'd blog about it…

Logs written to files are way easier to read, explore and edit compared to scrolling through your terminal…

DuckDuckGo's customisable search results made it super easy to add search to my site without any JS…

SVG sprites are a native way to group all your icons together and reference them from HTML without needing a templating system…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

Redux attempts to make state changes predictable by restricting how and when they happen. It separates your state management code from your UI code…

I just added a flickering faux-motion effect avatar to my About page. The technique behind it is fun (and requires relatively little code)…

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…

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…

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…