Alan Shortis is a front end developer.

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?

A locked down year

The two week lockdown started a year ago. Initial positivity in my actions didn't last and continue to be absent.

CSS environment variables

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

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.

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.

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?

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.