Cover Image for Locate Website Visitors in Next.js with IP and Supabase

Locate Website Visitors in Next.js with IP and Supabase

Using an IP lookup API, a backend database and Next.js middleware, we’ll explore how to display the location of the last visitor on a website.

Cover Image for Making the Internet More Human

Making the Internet More Human

Navigating the internet has become difficult with all the accessibility issues, pop-ups, cookie banners and advertisements. We’ll explore different ways to make the web a more welcoming place for humans.

Cover Image for Designing spring animations for the web

Designing spring animations for the web

Designing intuitive animations can be tricky. We’ll explore movement in the physical world and see how to replicate this digitally, as well as best practices for responsive animation.

Cover Image for Creating 3D models in Spline for Three.js

Creating 3D models in Spline for Three.js

We’ll cover how to use Spline, exporting 3D files and displaying them with react-three-fiber. I’ll explain the exporting workflow with an example project, and we’ll explore geometries, materials and lighting.

Cover Image for Adding search to a React/Next.js blog

Adding search to a React/Next.js blog

Implementing quick and easy client-side search functionality in React

Cover Image for Web design inspiration: Ten perfect examples

Web design inspiration: Ten perfect examples

In no particular order, here’s a collection of websites I find inspiring, both by their design and their functionality. For each website, I’ll dive into the specific details which made me want to mention it.

Cover Image for Website update: code blocks, search, lightbox and more!

Website update: code blocks, search, lightbox and more!

Exploring the changes I’ve implemented in my website and what pushed me to make them, from code blocks to lightboxes to full-bleed images, as well as post search functionality.

Cover Image for Automatically cross-publishing posts to dev.to with RSS

Automatically cross-publishing posts to dev.to with RSS

How to automate cross-publishing in a way that improves your site credibility. We’ll have a look at canonical links and RSS feeds.

Cover Image for Generating a sitemap and RSS feed with Next.js

Generating a sitemap and RSS feed with Next.js

There are different options for generating content such as Sitemaps and RSS feeds in Next.js, static and dynamic. We’ll explore the different options and ways to implement them.

Cover Image for Customizing WordPress GraphQL with custom fields

Customizing WordPress GraphQL with custom fields

Extending the capabilites of the WordPress GraphQL API by adding custom fields to posts which can be fetched by an external API.

Cover Image for Creating and ordering a custom PCB

Creating and ordering a custom PCB

As part of a home automation project, I wanted to house a thermometer, motion sensor and display in a small form factor. I decided to design and order my own PCB.

Cover Image for Next.js HTTP Authentication with JWT and cookies

Next.js HTTP Authentication with JWT and cookies

I was recently trying to figure out a way to implement simple HTTP authentication for a personal Next.js project. I augmented the basic HTTP auth with JWT and cookies.

Cover Image for Implementing online payments with Stripe

Implementing online payments with Stripe

A tutorial on setting up a credit card payment form on your NextJS site. We will cover signing up and the Stripe SDK.

Cover Image for How I built my Website

How I built my Website

Trying to figure out how to build my website was a challenge for me. As a web designer, I wanted it to be fully customisable, but I also wanted ease of use to reduce friction and make it easy to maintain.