Blog
Thoughts, ideas, and opinions.
Desync has a new home with Surge Studio
Share and find inspiration from AI-generated art.
Refraction has been acquired by Twistag
We're excited for Refraction to join the Twistag family and continue our mission to help developers building great software with less effort.
A Brief Introduction to Modern Frontend Engineering
A high-level overview on the tools and technologies in frontend engineering... without getting too technical.
Streaming OpenAI completions with the Vercel Edge Runtime
I recently built my first AI-powered app on Vercel. Here's how I did it.
Making react-syntax-highlighter "editable"
react-syntax-highlighter is a great tool for highlighting code snippets, but it is not editable. Let's hack an editable state together!
Automated refactoring with codemods
Codemods are scripts that can automatically transform code from one syntax to another, making it easy to refactor or update large codebases.
Enabling HSTS Preload in Next.js
Learn how to enable HSTS preload in Next.js to improve your website's security.
Replacing JS Libraries with Intl
Strip down your bundle size by replacing some of the most popular JS libraries with native browser APIs.
Using clsx with Tailwind CSS for element style composition
Tailwind's class names can get a bit unwieldy. clsx can help.
Handy Body and Error Parsing Utilities for Next.js
A couple of useful functions for parsing and validating data in Next.js API routes.
Why Figma's AutoLayout system is brilliant for writing code
While it looks simple, Figma's AutoLayout system is actually designed on the Flexbox CSS model.
Optimizing your Next.js personal website's SEO with next-seo
Using JSON-LD utility components provided by next-seo, we can make our personal website more friendly to structured data parsers.
Creating active link class modifiers with Tailwind and Next.js 13
React 18 allows you to build client and server components, which can be tricky for adding client-based styles to elements.
Optimizing Next.js images for speed and quality
Next.js' Image component is highly reliable and configurable. Here's how to get the most out of it.
Three methods for typing strings in Typescript
How to use Enums, Union Types and Const Assertions to reduce runtime errors for strings.
Creating a no-auth Spotify playlist preview with Next.js
Let's build a simple Spotify playlist previewer without any user authentication required on Next.js!
Stripe PaymentSheet subscriptions with Apple / Google Pay on Expo and Firebase
Let's put together a full, end-to-end Stripe subscription flow in our Expo app with Firebase.
Implementing Push Notifications with Expo and Firebase Cloud Functions
Despite how complex Expo's diagrams appear, it's actually remarkably simple to add Push Notifications to your app!
Implementing a smart analytics hook for Firebase and Amplitude in Expo 44+
Let's build a unified, promise-based, error-resilient, privacy-respecting, debuggable analytics hook for Expo 44+.
Implementing a simple OTA update function with Typescript and Expo 44+
Handy scripts for handling OTA updates in an Expo app.
Neat User and Profile React Hooks for Firebase V9
Writing your own little hooks for the two most common types of Firebase objects - Users and Profiles.
Implementing Google and Apple login hooks with Expo 43 and Firebase v9
How to implement an auth system with using neat hooks and a credential-based social login system.
Adding a basic pre-commit check to a Next.js app
When building a Next.js app, it can be a good idea to add some simple checks for Typescript and ESLint when you commit new code.
Creating a standalone contact form with Next.js
Forms, files and fun with Next.js and Nodemailer.
Implementing simple, secure passphrase authentication in Next.js 10 and Vercel
I'm working on publishing some private case studies on my personal website at the moment and wanted a simple way of adding passphrase security.
Finding a user's friends in their Contacts with Firebase and Expo
How to fetch contacts off your user's phone, then see which of those contacts are also using your app.
Upload images to Firebase using Expo 39+ managed workflow
Typically, uploading images to Firebase using the JavaScript SDK is pretty straightforward. In Expo, it's a bit trickier.
Using the Firebase Local Emulator with Expo's managed workflow
While the Local Emulator Suite is super easy to set up on a web app project, it's a little bit trickier for React Native / Expo.
Implementing iOS 14.5 Tracking Transparency in Expo SDK41
Starting with iOS 14.5, iPadOS 14.5, and tvOS 14.5, developers are required to ask users for permission to track.
From Product Designer to Agency Director
A few tips and tricks for designers hoping to kickstart their own studio or agency, from our own experience.
Pure functional design and its role in products
The industrialisation of product design has had a profound impact on the modern interpretation of design.
Creating defensibility through design
Convincing your company to invest in product design and design teams can be tough, so here are a few arguments you can use.
The industrialisation of digital product design
How does the growth of systematic and reusable design systems in product design impact our creativity and freedom as designers?
A quick introduction to URLs
Galactic coordinates for the internet
Presumi
How I started a data analytics startup and partnered with SEEK.