Simple progressively enhanced web apps
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…
js tags
Build simpler web apps using Bun
Modern JavaScript runtimes make it quick to throw together server-rendered web apps using almost no external dependencies, relying on web standard APIs…Redirect your log output to files for easier debugging
Logs written to files are way easier to read, explore and edit compared to scrolling through your terminal…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…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…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…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…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…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…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…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…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…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…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…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…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…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…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…