Writing

2022

Building a share button custom element

The web share API allows access to the native share menu from a web page, and a custom element is a great way to add this capability to your site or app.

Building a better menu with roles and ARIA state

Using roles and ARIA can take a menu from a list of fairly innocuous items to something that is semantically very clearly a menu.

Marking external links with CSS

Adding some kind of indicator to links to third party websites is good practice, hinting to the user that they're about to leave the site they're reading. By combining a few CSS tricks and techniques it's possible to add these automatically.

2021

July 31

Setting up a new Mac

Whether you're starting a new job or buying your own hardware, it's pretty normal for a couple of years to pass between new machines and the set up required to start writing code. This is how I do it.

Next.js with web components and a 0kb bundle

Often, by choosing React you're burdening users with a lot of JavaScript they don't need. Can we get all the benefits of good developer experience without impacting users as a result?

CSS environment variables

Not all viewports are perfect uninterrupted rectangles. How can the user agent help us tailor the experience to account for this?

2020

February 15

Future responsiveness

Using media queries to adapt layouts for screen size has defined responsive design for a long time, but now we can respond to more.

2019

November 22

Make your own website

There are a lot of places to quickly post some content. It's quick, convenient but ultimately bad for you and your work.

Detect, set and save Dark Mode

Dark Mode is mainstream. Supporting it is reasonably easy, but what about giving users the option to contradict their OS settings and remembering that choice?

React Render Props

The React documentation is really detailed and extensive, but the explanation of Render Props wasn't quite simplified enough for me as a beginner. Let's use Render Props in a really simple, real world example.

Webpack and Babel for React

There so many ways to bootstrap a React app without touching any config. Let's put together a sensible config from scratch in order to better understand what's going on under the hood.

2017

May 1

WordPress and Composer

WordPress should be treated as a dependency like any other. With Composer and a little time it's not too hard to get there.

Icons with SVG Sprites

First there were sprite sheets. Then icon fonts. Then SVGs. Now there are SVG sprites. Do we finally have the solution?

2016

June 5

Handling z-index with SASS

It's not uncommon for z-indexes across your app to become a tangle of bigger and bigger values, all fighting to come out on top. SASS can help you manage that.