How I Set Up A New Laptop

Well it’s that time again, migrating for one reason or another listlessly between computers as priorities and jobs change. Here’s a middle-depth breakdown of how I speed-run getting a new machine off the ground. This post is for Mac computer users who might be interested in autom … | Continue reading


@henry.codes | 6 months ago

How To Map A Number Between Two Ranges

Often in creative web projects, I find myself having to take a number, which exists in a specific range of numbers, and find the number that would be in the same position if the range were changed. Examples of this type of operation can vary anywhere from converting Fahrenheit to … | Continue reading


@henry.codes | 11 months ago

A One-Liner For Freeing Ports on OS X

TL;DR One of my most-frequently searched dev tasks over the course of my career thus far has been the “how do I find what process is on a port” to “how do I kill a given process” wombo-combo — there’s always some memory-leaky service running that ctrl+c isn’t tough enough for. Fi … | Continue reading


@henry.codes | 1 year ago

Using Focal Points, Aspect Ratio & Object-Fit To Crop Images Correctly

Before I even get into the impetus for this blog post, if you came from a search engine and you just want the code, here’s a demo. Pleasure doing business with you. Introduction In a client’s project recently, I found that their Wordpress setup required content editors to upload … | Continue reading


@henry.codes | 1 year ago

On Leaving New York City

This Is That Dreaded Blog Post That Was Foretold Every blog poster fears that one day this post will be upon them — that painfully self-important and -unaware “Why I’m Leaving ${city}” post. I’m gonna try to do this right; to make this one on the less-obstinate side to some of th … | Continue reading


@henry.codes | 1 year ago

Can You Be A Designer If You Have No Training?

I recently saw an online acquaintance of mine share a Controversial Opinion™ that I found challenging: If you do not have formal training in design you are not a designer. Right off the bat — L take, and I’m trying not to say that just because I am a designer with no training (lo … | Continue reading


@henry.codes | 1 year ago

Henry From Online | How To Make a Website

Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded. Write CSS carefully, reason your methodology and stick to it, and feel empowered to skip frameworks. When it comes time to write JavaScript, write not t … | Continue reading


@henry.codes | 1 year ago

How To Make a Website

I got an email recently from a kind online friend who said they thought my work was swell, and that they’d like to ask about my process or what makes a good website. Aside from that being a really nice email to receive, it’s also good impetus for me to be a little more candid and … | Continue reading


@henry.codes | 1 year ago

How To Distort Text With SVG Filters

A lot of the SVG filter primitive content out there is some really rad, deep-dive type content (I’ll link some of these at the end!), so I reckoned it might be nice to do a quick write-up on some effects I use pretty commonly. These are more-or-less plug-and-play; simple filters … | Continue reading


@henry.codes | 1 year ago

How To Use Contentful With Eleventy

Contentful is an immensely well-featured headless content management system, but the density of its featureset can be daunting to integrate with static site generators. The great news is, Eleventy is so well-designed and modular — it doesn’t have to be nearly so challenging. TL;D … | Continue reading


@henry.codes | 2 years ago

How To Use Vue To Template Your Eleventy Projects

Okay quick disclaimer before I kick this off — this post does not cover how to use interactive Vue components in an Eleventy project. This post covers using Vue entirely server-side! The client will not receive any Vue code. All of the code for this project can be found in this r … | Continue reading


@henry.codes | 2 years ago

What To Say When You Don't Know What To Say

I have this weird relationship with Incredible Amounts Of Grief where, like, I’ve literally been there — I know there’s nothing to say, and nothing will heal but time. When The Bad Thing™ happened, I felt angry so often with people wasting both my time and theirs trying to string … | Continue reading


@henry.codes | 3 years ago

How To Use The Spotify API and Netlify Functions To Build A “Now Playing” Widget

I recently* built this really cool feature for my personal website that allows me to use Netlify Functions to show my most-recently-listened-to tracks from Spotify. It wasn’t recently, it was in July, please don’t look behind the curtain. It’s an easy way to show some personality … | Continue reading


@henry.codes | 3 years ago

Naming Variables In Style Code

This morning, the atomic design GOAT Brad Frost Tweeted a question about variable naming for colors: Here's a fun one: what variable name would you define for `rgba(0,0,0,0.9);`? — Brad Frost (@brad_frost) December 10, 2020 I drafted up a Tweet to answer this, but it ended up bei … | Continue reading


@henry.codes | 3 years ago

Headless CMS Solutions That Aren’t Statamic (Lol)

Inspiration and research assistance for this article was extremely graciously provided by David Darnes, Robb Owen, and Andy Bell. They're good, grounded folks who care about the right things. So as it turns out, the guy who made Statamic has decided to publicize his extremely unf … | Continue reading


@henry.codes | 3 years ago

How To Convert Variable TTF Font Files to WOFF2

Impetus I’ve been working on a project lately that requires the loading of many, many webfonts. For the main UI font alone, we needed to download over 980kB of WOFF and WOFF2 files. As it happened, the client eventually developed a variable font version of the UI face, which was … | Continue reading


@henry.codes | 4 years ago

2019: Year in review

Introduction This time last year, I Tweeted out some goals for the New Year. 🗣️ Speak about CSS at a conference or school 🎓 Take a class a month 📚 Read a book a month ✈️ Go back to SF, go back to Europe 💵 Save enough to buy a house Bring it tf on, … | Continue reading


@henry.codes | 4 years ago

Let’s Talk About Banning Political Ads On Twitter

Before you get started, fair warning that this post has “takes”, some of which could be considered “hot”. This post is not about web development. So, Twitter recently stopped allowing political advertising. We’ve made the decision to stop all political advertising on Twitter glob … | Continue reading


@henry.codes | 4 years ago

How To Make an Animated Interactive Vue.js Slider

Table of Contents Introduction Getting Started Interactivity With Vue.js Animating With Vue.js and Conclusion Introduction So, I was looking for a fun example of UI interactivity to prototype on Codepen, and I stumbled upon this really cool shot that Alexsander Barhon shared. I … | Continue reading


@henry.codes | 5 years ago

Uses

This is a non-exhaustive list of the tools I use in my day-to-day operation for design, development, and life as a human. If I’m missing something, let me know! Hardware Main Computer - 2017 MacBook Pro, 15" Retina, 2.8GHz Intel Core i7 “Kaby Lake”, 16GB RAM, Radeon Pro 555. Back … | Continue reading


@henry.codes | 5 years ago

Bad UX In Everyday Life: Kitchen Nightmares

This article was originally posted on the Universal Mind blog in June 2016. It’s come to my attention lately that my kitchen is absolutely riddled with poor experiences. Most of the appliances and apparatus one uses on a day-to-day basis in the kitchen were invented or last revol … | Continue reading


@henry.codes | 8 years ago

Agile For The Rest of Us

This article was originally written for the Fusionbox blog in January 2015. The Fusionbox process takes many pages from the Great Big Book of Agile Methodology to streamline and modernize the production of web content, etcetera, but for the folks at home, what is agile developmen … | Continue reading


@henry.codes | 9 years ago