kg.

Gamer vs Gatsby

Kyle Gill portrait

Kyle Gill, Senior Software Engineer, Gatsby

Last updated

Taking shortcuts in code to race a world record holding speedrunner.

On March 3, 2021, I got signed up for a rather interesting battle of speed: attempting to race a world record holding speedrunner of the original Super Mario Bros.

The Rules

My task was to complete a Gatsby site from scratch and get it deployed to Gatsby Cloud Hosting. His, to complete the original Super Mario Bros. Luckily for me, I got to more or less define my goal for what I’d be building.

I planned to:

  • boostrap a new site from scratch
  • create a Git repo
  • add styles, React components, and GraphQL queries
  • use a Gatsby plugin to add data
  • deploy to a production level CDN

Getting that much done in a short amount of time isn’t easy so I had to employ some clever shortcuts, which you’ll see later.

The Competition

Kosmic the YouTuber/speedrunner was my competition, his best time is 4:55.646. Turns out he’s really consistent at hitting close to that time too.

We talked a little before the event and I found out he’d broken his own record several times, and this wasn’t the only game he was good at. It was in that moment I realized he was not the one trick pony, I was (😅).

Tools and Tricks for Speed

Kosmic had a variety of neat tricks and glitches that exploit the mechanics of Super Mario Brothers, so I figured I’d need to drum up some hacks and shortcuts in my own editor and workflow to make sure I could compete. Here’s some of what I did:

Rapidly bootstrapped Gatsby site

I used npm init gatsby to get things all set up initially. It runs an automated series of questions to install plugins and template code for yu. Right after the 3, 2, 1, go I ran the command which created a new Gatsby project, installed dependencies, and gave me a great starting point.

To make things even faster, I ran the command with the -y option like this:

npm init gatsby -y mario

The -y automatically says yes for all the options that the automated setup wizard asks, much like other CLI tools with similar init commands.

The mario is simply the name of the project that Gatsby will use to name the folder, as well as some files in the project.

Terminal functions

In order to complete a series of repetitive terminal commands over and over I used a couple functions that I defined ahead of time in my .zshrc.

The first is a command to create a new repo on GitHub:

function newrepo() {
gh repo create "$1" -y --private
git branch -M main
git push -u origin main
}

This function requires GitHub’s gh CLI. It creates a private repo with an optionally provided name, makes main the default branch, and pushes. No need to go to GitHub!

The next function speeds up the flow of adding, committing, and pushing. I like this to quickly push to the main branch:

function gitlazy() {
git add .
git commit -a -m "$1"
git push
}

Running a command like gitlazy "wip" will take wip as the $1 variable and use it as the commit message.

VSCode Custom Snippets

You can add custom shortcuts to VSCode that expand into templated code you can fill in. VSCode has a file called custom.code-snippets, on MacOS that file is at this path: ~/Library/Application Support/Code/User/snippets/custom.code-snippets. You can access it easily by pressing ⌘ + Shift + P and typing in “Preferences: Configure User Snippets” inside of VSCode.

It’s a JSON like file with options to configure custom shortcuts that will show up in VSCode’s intellisense.

The 4 shortcuts you see in my race are these:

"Auto CSS Grid": {
"prefix": "cssgrid",
"body": [
"display: `grid`,",
"gridTemplateColumns: `repeat(auto-fit, minmax(240px, 1fr))`,",
"gridGap: 16,"
]
},
"Import React": {
"prefix": "ireact",
"body": [
"import * as React from \"react\"",
]
},
"onRenderBody": {
"prefix": "orb",
"body": [
"export const onRenderBody = ({ $1 }) => {",
" $2",
"}"
]
},
"Map Data": {
"prefix": "map",
"body": [
"{$1.map(($2) => (",
" <div>",
" <div>{$2.id}</div>",
" </div>",
"))}",
]
},

When I type in the prefix and hit “Enter”, the code in the body gets filled in in my editor.

Note: I once made an Egghead video for this exact thing!

The Result

When all was said and done, I got a little slower while we were streaming since sharing my audio and video and I finished in around 6 mins. This was barely faster than Kosmic, who finished just after.

However, I’m pretty sure Kosmic died on purpose, it was on the very last room after a near perfect run after all.

You can see the completed code on GitHub or check out a live version of the site I finished.