I recently gave a talk at the GatsbyNYC meetup about doing art direction with images in Gatsby.

I had spoken at this meetup before about working with images in Gatsby and all of the cool stuff Gatsby does with your images out-of-the-box.

When I started exploring art direction and building an example site for the talk, I realized that there was not an obvious way of supplying alt text to my images.

Since making inaccessible websites is something bad devs do (and I want to be a good dev), I came up with a solution using state and custom Graphql…


Apollo, GraphQL, React

One of the nicest things about using ApolloClient is the automatic in-memory caching you get out of the box. When paginating your data, this allows you to go back to previous pages and have the transition be incredibly snappy. But sometimes you don’t want this data to stay cached forever. Sometimes you want to be able to empty the cache and fetch fresh data from your server. You also want this to trigger a re-render of whatever component is rendering out this data.

My problem

This was a situation I found myself in recently while building a data-visualization tool for my company…


my portfolio site in light and dark mode

I’m a huge fan of dark mode. I have dark themes for everything on my mac: VSCode, Chrome, Alfred, all of it. My background on my desktop is just the color black. So it seemed natural that I should add a dark mode to my portfolio page. I had a bit of trouble finding a good guide on how to go about updating the context of my app, since useContext()provides a read-only value. But after a few minutes of hacking and digging around stack overflow, I got it working and thought I would share here.

What is Context?

React context provides a way…


some music I once played

My background is primarily in music. I went to music school a couple of times and got a couple of degrees in “Percussion Performance and Literature.” Basically, I learned to play a lot of instruments that involve some form of hitting and spent a lot of time hitting them.

As I have made the career change from musician to programmer, I have realized that a ton of what I learned from music has helped me achieve my goals in programming. So here’s some stuff I learned in music that I have found useful.

How to suck at something

Whenever I started learning a new piece…


Constants are mutable?!

I really like Javascript. I like reading about it, writing about it, and most of all, coding in it. I am a coding bootcamp graduate and until recently, I have only ever worked with client-side Javascript, doing all of my server-side coding in Ruby. I wanted to extend my knowledge of JS so I purchased a great Node.js course on Udemy and have been working my way towards building full-stack JS applications.

Something I have noticed from questions I get about my blog posts and even from the instruction in this Node course is that a ton of people are…


Today I’m gonna talk about quicksort. Pretty exciting, right? I’ve written in the past about implementing a very basic version of quicksort in Ruby, but today I want to use Javascript and build out a more correct version of the algorithm.

More correct? Yes! I will go over why this is the case later and also show you a javascript example of the basic version. Alright, let’s get to it!

What is quicksort?

Quicksort is a divide-and-conquer, non-stable, comparison sort that can operate in-place on arrays. What does all that mean?

Divide and conquer

Means what it sounds like. A divide and conquer algorithm breaks up…


Somewhere, in all of your past googling of prime number algorithms, you might have come across something like this:

What’s this? It’s a way of checking to see if a number is prime! And you don’t even have to write a for loop!

Pretty wild, right?

I thought so too. So I figured it might be fun to break this regular expression down and explain it step-by-step in case anyone was curious.

Note: I know regular expressions (the stuff between the /’s) can look like magic but stick with me and I promise it will all make sense.

Okay so what is happening?

So basically…


Today is all about insertion sort and implementing it in javascript! Insertion sort is, as you may have guessed, a sorting algorithm. It is fairly slow compared to more powerful sorting algorithms like heapsort, mergesort, and quicksort. That doesn’t mean it isn’t worth learning though. I am of the belief that building these things out and making your brain think about these puzzles can only make you a better coder.

If you are new to coding and want to learn some algorithms as a fun way to improve your skills, insertion sort is a great one to start with as…


Get ready to rage because today we’re talking about heapsort! I’m going to walk through this algorithm with you step-by-step in a beginner-friendly manner. By the end of this post, we’ll be pros at both making and sorting heaps.

Excuse me, what is heapsort?

I’m so glad you asked. Heapsort is a sorting algorithm! More specifically, it is a non-stable, comparison-based sorting algorithm that uses a data-structure called a max-heap. So what does that all mean?

Non-stable

This means that if two elements have the same value, heapsort might switch them instead of just leaving them where they are in relation to one another.

Say you…


You know those things that you learn and then think, “Oh that should have been so obvious. Why did I not just know to do that already?”

Memoization was one of those things for me. It is such a simple solution to a problem that comes up quite often (so often in fact that rails has a built in memoize module). It’s a really good tool to know about and know when to use it. So here we’re going to look at 1) what memoization is, 2) a simple problem that can be solved without memoization, and 3) how that…

Mark Sauer-Utley

NYC-based programmer and musician.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store