javascript

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 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.

Show Latest Posts on Github Profile

4 minute read Published

How not to show latest posts on a GitHub profile. An adventure in debugging JavaScript libraries and GitHub actions when happy path is not the case.

I like to blog using the blogging tool I created called After Dark. After some time away from GitHub I began self-hosting my source code with {{ external “https://gitea.io/" “Gitea” />}}. Since the Microsoft acquisition there are some cool features in GitHub which have brought me back, at least to play around a little with what’s there.

One feature is the ability to showcase latest blog posts on a GitHub profile. I learned about this trick a couple of days ago while doing Kubernetes research for a project I’m working on during my semi-permanent remote placement in Bali.

In this post we’re going to take a look at the feature and see if it’ll be useful in helping showcase my writing for others when they visit my GitHub profile.

Reaction Commerce Debugging Primer

11 minute read Updated

How to debug a Node.js App Running inside a Docker container.

Reaction Commerce is a full-stack, self-hosted commerce platform you can run for as little as $10 on your own VPS. Think of Reaction Commerce as what WooCommerce might’ve become had it not been dependent on PHP/WordPress and instead was rewritten using modern coding languages and development techniques.

Using self-hosted commerce is like having your own personal Shopify, WIX or BigCommerce right at your fingertips. Only there’s no monthly costs to worry about just to use it. And there’s no vendor lock-in which would otherwise make it too difficult or risky to switch between platforms when the need arises.

After you’ve learned the basics of Getting Started you’re ready to dive deeper into the code and learn how things work. One of the best ways to learn any new system is to look for bugs and figure how to debug them. And in this tutorial I will show you some strategies for debugging source code in Reaction Commerce.

Putting WordPress into Hyperdrive

2 minute read Updated

Prepare for Ludicrous Speed with a 300% improvement in page load time.

After giving a talk once in Bali – where I showed how to use a $5 Vultr box and Redis with Load Impact to support up to 7000 concurrent WordPress users – I was asked to help turn some of the performance optimization work demoed into a WordPress plug-in.

It’s the first of it’s kind — and like no other performance plugin to precede it. Based on initial tests it speeds up the stock Twenty Seventeen theme about 300% and I suspect time will show even greater gains for other themes. It builds on top of a performance optimization technique called Fetch Injection, enabling external scripts to download asynchronously in parallel while preserving execution order.

Toxic Swamp

Monetize attention to earn a passive, borderless income on your website.

:: HTML / CSS / JavaScript / Mono / Docker / Wasm

Toxic Swamp is a crypto miner add-on for After Dark providing an interactive toolbar UI enabling content creators a means of monetizing their creative work.

Fetch Inject

Fetching async loader and DOM injection sequencer for the Web.

:: JavaScript / ES Module / Playwright / SvelteKit / Node.js

I conceived of a novel technique for managing asynchronous dependencies hacking away at a coffee shop called 9-11 in Bali back in 2017. Fetch Inject is a tiny JavaScript library and Node module making it possible to deep link to full-sized After Dark Image Gallery images without blocking or slowing down page load.

Managing Async Dependencies with JavaScript

4 minute read Updated

Managing asynchronous dependencies with JavaScript can be a nightmare. But there's a better way. It's called Fetch Injection.

I’ve long been inspired by the work of Steve Souders. Back in 2009 Steve published an article titled Loading Scripts Without Blocking, which I first became aware of and studied during my time at Orbitz – where every millisecond a user waited for the page to load had a measurable impact to the business.

Steve’s work was instrumental for performance-critical websites and apps, and even inspired Nicholas C. Zakas to write Loading JavaScript without Blocking the same month Steve’s book Even Faster Web Sites was published.

Tools for Building Rich Web Apps

3 minute read Updated

After recently planning to do a survey of tools for building rich web apps I stumbled across  github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.

Update 2017-04-09: This post is out of date. Lately it seems Marko JS may become the new hotness following React and, for Web dev in general, look into JAMstack.

The Holy Grail of Rich Internet Applications

2 minute read Updated

Learning about Isomorphic Web Applications from Airbnb.

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge.

Node.js Debugging Primer

5 minute read Updated

Learn how to get started debugging Node.js applications using Jake.

So I’m putting together this killer new JS front-end development stack called Brunch with Panache, which uses Jake tasks to kick off a custom set of commands for building and managing the app, and I hit a bug while code was running in Node.js. So what now?