GitHub integration for Shopify

Figma, React, Sass

We just shipped a GitHub integration for Shopify. Now you can use GitHub for version control when developing Shopify themes. My small team defined the UX. I created the final UI components.

Screenshot of the organization picker component

The components draw inspiration from established GitHub patterns and conventions but use Shopify's visual style on the surface.

Screenshot of various components

Polaris Token Sync for Figma

I built a Figma plugin that automatically pulls in the latest colors from Shopify's design system Polaris into Figma. We use the plugin to keep Shopify's main Figma library in sync with our tokens. These colors then trickle down to every designer in the organization.

Figma Extension API, React, Typescript, CSS

Wind Turbines

I just found them really beautiful and decided to make a short video.

Canon 5D, Final Cut Pro

Shopify Local Delivery

Figma, React Native, Expo, Firebase

During the pandemic, many physical stores were forced to close. Shopify scrambled to help these merchants find new ways of selling. Many wanted to sell online and deliver the packages to local customers by themselves. And thus, the Local Delivery project was born.

During the first week of the project, I built a Firebase prototype that allowed us to experiment with real time data, geolocation and push notifications, long before any actual infrastructure was in place.

Photo of an iPad with a user interface that consists of two lists and a map

While my colleagues did research on user needs and flows, I was tasked with building the UI components and owning the React Native implementation. I spun up a new Expo project and got to work. Despite some hiccups with CI and distribution, building with React Native proved relatively easy and very productive.

Three iOS simulators showing a home screen, an error screen and the Local Delivery app up and running

As the project progressed, I spent equal time in Figma and React Native. It made for quick feedback loops — insights from the implementation immediately made it back into Figma.

Screenshot of a Figma file containing various screens and components

After only a few months of development, Local Delivery went live in the App Store and the Play Store. It's still early days for Local Delivery, but I'm glad we were able to ship something useful for merchants — in record time — during a critical period.

Screenshot of the App Store listing

Sign up for Facebook

I reimagined Facebook's sign up flow to be more clear about what Facebook can do with the data you give them.

HTML, JavaScript, CSS

Animated gif showing a list of facts. For each item, the user clicks a button confirming that they understand the fact.

Untitled Tank Game

I took a year off and self studied math, just for fun. Part of what I learned was a bit of trigonometry, which enabled me to build things that I wasn't able to build before.

One of the things I built was a small game where you command a bunch of tanks and try to win over the other team. The trigonometry allowed me to write the movement logic of the tanks and to calculate the direction from which enemy fire is coming. Fun!

HTML, Canvas, JavaScript

GitHub XP

To celebrate Microsoft's acquisition of GitHub, I built a Chrome extension that brings some Windows XP flair to your GitHub experience.

HTML, JavaScript, CSS, Chrome Extension API

Screenshot showing GitHub.com themed like Windows XP

Twitter Logo in CSS

When Twitter launched their new Logo, I decided to see if I could rebuild it using HTML and CSS. It worked out quite well! Hover the logo to see the individual layers.

The experiment got a bit of traction thanks to a retweet by Jack Dorsey. This later rendered us an invite to come visit Twitter HQ in San Francisco.

My colleague, a Twitter employee and myself standing at Twitter's rooftop terrace

Self Driving Lego Robot

I built a self driving robot with Lego. It continuously scans its environment using a single infrared sensor and then where there is least risk for collision. Andrej Karpathy, call me.

Lego Mindstorms