Blog
Thoughts, ideas, and opinions.
2023
- A Brief Introduction to Modern Frontend EngineeringA high-level overview on the tools and technologies in frontend engineering... without getting too technical.Jan 26Streaming OpenAI completions with the Vercel Edge RuntimeI recently built my first AI-powered app on Vercel. Here's how I did it.Jan 14Making 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!Jan 13Automated refactoring with codemodsCodemods are scripts that can automatically transform code from one syntax to another, making it easy to refactor or update large codebases.Jan 5
2022
- Enabling HSTS Preload in Next.jsLearn how to enable HSTS preload in Next.js to improve your website's security.Dec 8Replacing JS Libraries with IntlStrip down your bundle size by replacing some of the most popular JS libraries with native browser APIs.Dec 7Building an NPM APINPM doesn't have a publicly available API for fetching package info, so I built one.Dec 4Using clsx with Tailwind CSS for element style compositionTailwind's class names can get a bit unwieldy. clsx can help.Dec 3Handy Body and Error Parsing Utilities for Next.jsA couple of useful functions for parsing and validating data in Next.js API routes.Dec 1Why Figma's AutoLayout system is brilliant for writing codeWhile it looks simple, Figma's AutoLayout system is actually designed on the Flexbox CSS model.Nov 30Optimizing your Next.js personal website's SEO with next-seoUsing JSON-LD utility components provided by next-seo, we can make our personal website more friendly to structured data parsers.Nov 27Creating active link class modifiers with Tailwind and Next.js 13React 18 allows you to build client and server components, which can be tricky for adding client-based styles to elements.Nov 25Optimizing Next.js images for speed and qualityNext.js' Image component is highly reliable and configurable. Here's how to get the most out of it.Nov 22Three methods for typing strings in TypescriptHow to use Enums, Union Types and Const Assertions to reduce runtime errors for strings.Nov 19Code and ProseSome musings on writing, in any language.Nov 16Creating a no-auth Spotify playlist preview with Next.jsLet's build a simple Spotify playlist previewer without any user authentication required on Next.js!Apr 2Stripe PaymentSheet subscriptions with Apple / Google Pay on Expo and FirebaseLet's put together a full, end-to-end Stripe subscription flow in our Expo app with Firebase.Jan 29Implementing Push Notifications with Expo and Firebase Cloud FunctionsDespite how complex Expo's diagrams appear, it's actually remarkably simple to add Push Notifications to your app!Jan 29Implementing 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+.Jan 28Implementing a simple OTA update function with Typescript and Expo 44+Handy scripts for handling OTA updates in an Expo app.Jan 28
2021
- Neat User and Profile React Hooks for Firebase V9Writing your own little hooks for the two most common types of Firebase objects - Users and Profiles.Dec 24Implementing Google and Apple login hooks with Expo 43 and Firebase v9How to implement an auth system with using neat hooks and a credential-based social login system.Oct 23Adding a basic pre-commit check to a Next.js appWhen 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.Aug 20Creating a standalone contact form with Next.jsForms, files and fun with Next.js and Nodemailer.Jul 22Implementing simple, secure passphrase authentication in Next.js 10 and VercelI'm working on publishing some private case studies on my personal website at the moment and wanted a simple way of adding passphrase security.Jun 7Finding a user's friends in their Contacts with Firebase and ExpoHow to fetch contacts off your user's phone, then see which of those contacts are also using your app.May 18Upload images to Firebase using Expo 39+ managed workflowTypically, uploading images to Firebase using the JavaScript SDK is pretty straightforward. In Expo, it's a bit trickier.May 18Using the Firebase Local Emulator with Expo's managed workflowWhile 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.May 18Implementing iOS 14.5 Tracking Transparency in Expo SDK41Starting with iOS 14.5, iPadOS 14.5, and tvOS 14.5, developers are required to ask users for permission to track.May 17
2020
- Pure functional design and its role in productsThe industrialisation of product design has had a profound impact on the modern interpretation of design.Mar 10Creating defensibility through designConvincing your company to invest in product design and design teams can be tough, so here are a few arguments you can use.Mar 9The industrialisation of digital product designHow does the growth of systematic and reusable design systems in product design impact our creativity and freedom as designers?Mar 6A quick introduction to URLsGalactic coordinates for the internetJan 23