Creating JSON Extracts in Supabase

8 minute read Published

How to upload and extract JSON using Postgres trigger functions in Supabase.

I loved my database courses in college. 20 years ago I could have written you a perfectly normalized relational database with a binder full of DB2 SQL queries that looked like magic. Since then much of that knowledge has begun to escape me as I haven’t had a strong desire to delve back into databases. Not because I don’t find them fascinating. But because getting them up correctly can be a pain.

Fast-forward a few years and DB2 has been superseded by Postgres and thanks to Supabase making relational databases super easy to set-up I find myself reaching back for that DB structures knowledge once again. Only now we’ll be working with something that didn’t exist back then: JSON.

In this post I’ll explain how to upload and extract JSON data into rows in a Postgres database using SvelteKit and Supabase. And though processing data this way seems like it would be a fairly common task, I wasn’t able to find a guide online describing how to do this. As a result, I thought it worthwhile to jot down how to do it.

Svelte Headless UI Starter

Launch your next Svelte app using Headless UI.

:: SvelteKit / Supabase / Tailwind CSS / Headless UI / OAuth2 / TypeScript

Launch your next Svelte app using Headless UI.

Application running in Dark Mode

Svelte Headless UI Starter is a template designed to make it easier and faster to build libre Svelte apps using Headless UI.


Turn your secrets into scannable QR codes.

:: Svelte / SvelteKit / TypeScript / Tailwind CSS / HTML5

OATHqr helps you create security credentials for use with 2FA/MFA authenticator and other OATH-enabled apps. Use it to generate scannable QR codes for OTP apps such as Aegis and YubiKey. Or skip the QR code and paste the formatted otpauth URI it creates directly into OpenPGP-activated password managers such as the remarkable Pass standard unix password manager.

Includes native build support:

Builds support Linux, Windows and macOS.

Dockerize a SvelteKit App Using PNPM

7 minute read Published

Optimized development workflow using SvelteKit, PNPM and Docker.

Developers don’t just use pNPM because they hate NPM (that’s what Yarn is for). They use it because node_modules are the heaviest objects in the universe. But there are other things to love about PNpm besides its ability to shave gigabytes off your hard disk and saving you a considerable amount of time wasted mucking around with node_modules. Here I’ll show you how to use pnpm fetch to increase the speed of your Docker builds using an --offline install.

Deadsimple Lazyloaded Images in Svelte

2 minute read Published

Easy to implement lazyloading in Svelte perfect for image galleries.

Next to text compression image lazyloading is one of the best ways to improve performance on a website. And with Svelte its no different. So here I’m going to share a radically simple way to accomplish lazyloading with Svelte.

Svelte Is The Sex Appeal React Never Had

2 minute read Published

What could be sexier than not shipping 5MB of JavaScript just to load a page?

The @sveltejs/adapter-vercel NPM module has seen some impressive growth over the last two months. In early November 2021 it was seeing about 4,000 weekly downloads. As of mid-January 2022 that number has climbed to over 18,000. What’s fueling the growth? Vercel’s zero-configuration deployments of SvelteKit perhaps? Nope, most certainly it was Rich Harris joining the Vercel team which was announced at the same time the adapter started taking off.