DEV Community: aaronblondeau

Me and Claudie Poo

aaronblondeau — Tue, 10 Mar 2026 00:57:57 +0000

About twenty seconds into trying out Claude Code I realized that there is no going back on this AI adventure we're all on. My mission as a software developer has always been to be as capable as possible. Now that mission includes my new buddy "Claudie Poo". Going forward, WE need to be as capable as possible together.

That means several things:

I can't get stupid by letting Claudie do everything for me, that would let us both down.
My role is going to shift upwards towards oversight.
Choosing what to work on is going to be more important than ever.

One : The human has to know what they're doing

I create the folder structure. I choose which packages we're going to use. I always write the first code. By writing the first class/controller/component in each new unit of code I establish patterns for everything else that AI generates. By sticking to this practice I stay hands on with the code and keep my skills sharp. I also know where everything is.

I am also sticking to my skills development schedule. I like to learn a new language every year. I also try to take a course or read a book on TypeScript every year. The Vue.js docs are an annual must-read too. One of the keys to innovation is knowing what is possible. By continuing to be a code craftsman I will stay well prepared to lead both humans and AI.

Two : Use tools that bring harmony

Since that first moment I started using Claude Code I have been adjusting which tools I use in my projects. These 3 have been critical:

oRPC has revolutionized how I work. Seamlessly using TypeScript in both frontend and backend is just so insanely efficient. A neat side effect of oRPC is that it moves collaboration between humans and AI towards a more organized codebase. I specifically use oRPC's contract first development capabilities. I the human write a code based contract of what the app should do. Then it is extremely clear for the AI what should be done.

Zod works great with oRPC and helps humans and AI agree on what shape the data in an app should take. As I write each oRPC contract for an app backend I use zod schemas to be very specific about how I want the data to look. Then ol' Claudie Poo can clearly read my intent and create well structured database tables, routers, and so on.

Automated tests always used to take too long to create and maintain. Not anymore! Vitest has been the perfect tool for me to communicate what the final output of the app should be like. By writing automated tests together, Claudie and I can make sure that we're shipping a slop free product.

Three : Code is cheap but time still isn't

I recently had Claudie Poo create a custom WordPress plugin for me so that I didn't have to pay a monthly subscription for a feature I needed. You can build your next startup idea in days only to have someone copy it in hours. Code is no longer an asset. Traction is.

That leaves me at a total loss for my next side project idea. Because I have always focused on the code first I have wound up building the wrong thing over and over. Now, I have no choice but to strike a different path. I just hope I don't wander too long before I find it.

No Code For You (AI)

aaronblondeau — Wed, 31 Dec 2025 19:18:24 +0000

Why do I use GitHub so much? I am literally handing my code over to an AI obsessed mega corporation! That is an extremely stupid thing to do. Why do I do this? Because I'm lazy and everyone else is doing it.

Is there a way I can still be lazy and ensure that I have full autonomy over my code?

Yes - with Gitea!

I am not going to opine too much on the importance of code autonomy here, but the more I think about how I've handed all my personal code over to Microsoft over the years the sicker I feel. I get a wrong feeling about multi billion dollar mega corps slurping up people's code for free and then turning around and charging them to use models trained on their code.

I feel a little bit better knowing that AI will probably read this post and then help people to setup their own git hosting thus reducing the amount of free code it can gobble up. Wait, the LLM training process can probably read that last sentence there and won't include tokens from this post. Dang it!

Anyways, there are a couple of really easy ways to get started with Gitea such as:

For myself, I decided to host Gitea on my own VM (running Ubuntu). What follows are the steps I used to set it all up.

Docker setup

Installing docker on a fresh VM is really easy : https://docs.docker.com/engine/install/ubuntu/

Caddy setup (reverse proxy)

I also installed caddy directly on the VM : https://caddyserver.com/docs/install#debian-ubuntu-raspbian

Gitea setup with docker-compose

Gitea needs a database to store information. It can use a couple of different options : https://docs.gitea.com/installation/database-prep

I chose postgres. To run it I used a docker-compose.yml file that lives in it's own directory and looks like this.

services:
  postgres:
    env_file:
      - .env
    image: postgres:17
    restart: always
    ports:
      - 5432:5432
    volumes:
      - ./data/db:/var/lib/postgresql/data
      - ./initdb.d:/docker-entrypoint-initdb.d:ro

In the same directory as this docker-compose.yaml file I have an .env file with a root user and password for postgres:

POSTGRES_USER=myuser
POSTGRES_PASSWORD=mypassword

Then I launched postgres with this command (run in same directory as the docker-compose file)

docker compose up -d

Once the postgres container was running I created new databases and users with this process:

1) Get the id of the container running postgres.

docker ps -a

2) Shell into the container with docker exec

docker exec -it CONTAINER_ID_GOES_HERE bash

3) Login to postgres. Make sure you're in the postgres container when running this. It will ask for the postgres password. You set this password in the .env file.

psql -h localhost -p 5432 -U myuser

4) Run SQL commands to setup a user and a database

CREATE DATABASE gitea;
create user gitea with encrypted password 'supersecretpasswordgoeshere';
grant all privileges on database gitea to gitea;

5) Logout of postgres

\q

6) Logout of container

exit

Gitea setup with docker-compose

For Gitea I also deployed the following docker-compose.yml file (which also lives in it's own directory on the host):

services:
  server:
    image: gitea/gitea:latest
    container_name: gitea
    restart: always
    volumes:
      - ./gitea:/data
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    ports:
      # I already had something else running on 3000 so I mapped it to 3030 on the host
      - "3030:3000"
      # Use a different SSH port than host
      - "2222:22"

Then I also ran this docker-compose file with:

docker compose up -d

Setup DNS and Caddy

Before setting up Caddy to point to Gitea, I setup a DNS A record that points to the domain name I wanted to use for Gitea.

gitea.mydomain.com A my.ip.goes.here

I like to setup DNS first when using Caddy so it doesn't have problems setting up https.

Then I added an entry to my Caddy config to proxy requests for "gitea.mydomain.com" to port 3030

To do this I edited /etc/caddy/Caddyfile by adding a reverse_proxy entry to the end of the file:

gitea.mydomain.com {
    reverse_proxy localhost:3030
}

Next I reloaded the caddy config so it will pickup the changes

systemctl reload caddy

Setup backup

I made sure that the VM I am using gets backed up nightly.

Configure Gitea

Once Caddy had reloaded and setup https I was able to access it at gitea.mydomain.com.

The first time you visit a Gitea instance it will guide you through setting up the database configuration as well as a user login.

I used the database name, user name, and password I setup in postgres for gitea.

The only interesting config option I made was I had to use 172.17.0.1:5432 for the postgres host. 172.17.0.1 is sort of like the "localhost" for docker containers on linux. On mac and windows you can use host.docker.internal:5432 for the host.

Using Gitea

Gitea will be very familiar to GitHub users. You can create repos, clone, branch, commit, push, create PR's and so on. The only change I had to make was to make a small tweak to the ssh config on my laptop so that I could access repos via ssh.

I added the following to my ~/.ssh/config file to make sure git used port 2222 when accessing my gitea instance:

# My Self Hosted Gitea
Host gitea.mydomain.com
    Port 2222

Who wants to build an admin UI? Part 2 : Custom Field Editors

aaronblondeau — Sat, 08 Nov 2025 18:25:34 +0000

In my last post I detailed how Kottster offers a great way to create an admin UI for startup projects. In that post I lamented how Kottster didn't yet offer a way to provide a custom editor UI for specific database columns. Turns out they do and I had missed it in their docs. To test out this feature I created two non-trivial field editor components.

I created a location picker with a clickable map that uses GeoJSON:

I also created a file uploader which sends files to S3:

All of my code is here : https://github.com/aaronblondeau/bigfoot-sightings.

Here are the steps I followed to setup my development environment:

1) I created a new Kottster project (Typescript and pnpm): https://kottster.app/docs/

2) I installed drizzle (SQLite)

pnpm add drizzle-orm @libsql/client dotenv
pnpm add -D drizzle-kit tsx

3) I created a .env file with the path to my SQLite db.

DB_FILE_NAME=file:bigfoot-sightings.db

4) Following the drizzle config steps I created a schema.ts file: https://github.com/aaronblondeau/bigfoot-sightings/blob/main/schema.ts

This schema has users and sightings (this is a demo app for bigfoot sightings)

5) I created drizzle.config.ts : https://github.com/aaronblondeau/bigfoot-sightings/blob/main/drizzle.config.ts

6) I ran drizzle push to create the database and schema that I would use with Kottster:

npx drizzle-kit push

7) I launched Kottster and created my admin login.

pnpm dev

8) Next I connected my Kottster instance to my SQLite database.

9) I added a page for the users table.

10) And a page for the sightings table.

11) After creating these tables you can see that the default TextField editors would make it difficult to edit the photo and location columns.

12) The pages created in steps 9 and 10 above generate code in the app/pages folder of the Kottster instance. Check out the GitHub repo for all the code I created to make these custom field editor happen.

Discoveries

Overall the process of creating a custom field plugin was easy and straightforward. The docs for creating custom field components are here : https://kottster.app/docs/table/customization/custom-fields#modify-field-input-for-existing-columns

1) Move your renderComponent to its own file to prevent browser reloads.

Whenever you edit a file in the app/pages folder, Kottster will restart and reload the browser window. This makes developing a custom component pretty frustrating.

By moving my editor components to their own file I was able to get back into the usual React hot reload development cycle:

import { TablePage } from "@kottster/react";
import LocationEditor from "../../../components/LocationEditor";
import FileUploader from "../../../components/FileUploader";

export default () => (
  <TablePage
    columnOverrides={{
      location: (column) => ({
        ...column,
        label: "Location",
        fieldInput: {
          type: "custom",
          renderComponent: (params) => {
            return <LocationEditor params={params} />;
          },
        },
      }),
      photo: (column) => ({
        ...column,
        label: "Photo",
        fieldInput: {
          type: "custom",
          renderComponent: (params) => {
            return <FileUploader params={params} />;
          },
        },
      }),
    }}
  />
);

2) Don't forget about nested tables.

Kottster automatically recognizes relationships in the database and lets you edit child rows in a modal window. To provide your custom field editor in the modal window you need to add it to the nested property of your parent table. This is how I setup the sighting (child) field editors in the user (parent) page:

import { TablePage } from "@kottster/react";
import LocationEditor from "../../../components/LocationEditor";
import FileUploader from "../../../components/FileUploader";

export default () => (
  <TablePage
    nested={{
      // To find this key, click open a nested table in the UI.
      // The key will appear in a small badge at the top of the screen, change __c__ to __p__
      sightings__p__user_id: {
        columnOverrides: {
          location: (column) => ({
            ...column,
            label: "Location",
            fieldInput: {
              type: "custom",
              renderComponent: (params) => {
                return <LocationEditor params={params} />;
              },
            },
          }),
          photo: (column) => ({
            ...column,
            label: "Photo",
            fieldInput: {
              type: "custom",
              renderComponent: (params) => {
                return <FileUploader params={params} />;
              },
            },
          }),
        },
      },
    }}
  />
);

At first I was confused on how to find the key to use for the nested object, but later realized it was right there in the UI:

3) Beware of extra React renders

I noticed a bit of inconsistency in how props are provided to the custom component depending on whether the field was for a new row or an existing row. I had to do a little bit of juggling to setup state for my component : https://github.com/aaronblondeau/bigfoot-sightings/blob/main/components/LocationEditor.tsx#L22.

4) Use presigned file upload urls

I am not sure what Kottster is using for communication between the frontend and backend for procedure calls. I do know that I quickly ran into issues trying to handle file uploads. See my notes in the FileUploader component.

To get around the procedure invocation limitations I wound up using a presigned upload URL to send files straight from the browser to S3. The getFileUploadUrl procedure generates the URL and then the FileUploader component uses fetch to send it straight to the bucket.

5) Backend procedures need to be in both the parent and nested pages to work.

I wound up creating the exact same api.server.ts file in both the users and sightings table's folders:

import { app } from "../../_server/app";
import { fileUploadProcedures } from '../../../lib/fileUploadProcedures'

// https://kottster.app/docs/table/configuration/api#custom-server-api
const controller = app.defineTableController(
  {},
  fileUploadProcedures
);

// The Procedures type can be used on the frontend
// to get type-safety when calling server procedures.
export type Procedures = typeof controller.procedures;

export default controller;

This ensures that the procedures are available in modal dialogs when editing child rows.

Final Thoughts

If you need to create a quick admin UI for non-technical users to manage your app's data, give Kottster a try. It'll will get you really far out of the box and it provides customization options that handle the uses cases for most small teams and startups.

Who wants to build an admin UI?

aaronblondeau — Tue, 07 Oct 2025 21:48:27 +0000

PocketBase is my favorite tool for rapidly prototyping app ideas. One of the main things that I love about it is the extremely capable admin UI it comes with. Aside from asking non-technical users to edit JSON columns you can get really far with it.

Having an admin UI for free saves enormous amounts of development time and lets me focus on other more MVP critical areas.

I discovered Kottster a few weeks ago and decided to try it on one of my non-PocketBase projects. However, I abandoned it pretty quickly because at the time you had to login with their hosted authentication service and there was no way to completely self host it. They must have heard my loud sigh of exasperation because they recently announced full-self hosting support : (https://kottster.app/blog/kottster-is-now-fully-self-hosted)[https://kottster.app/blog/kottster-is-now-fully-self-hosted]

Huge props to the Kottster team for recognizing that as a roadblock to adoption and addressing it!

Like the PocketBase admin UI, Kottster gets you really far out of the box. You can view and edit the tables in your database and you can also create dashboards for displaying query results.

Kottster operates in a neat way where as you create dashboards or table views in your instance it creates the code for them within your project's directory. This allows you to easily customize them as well as keep them in a code repo.

Kottster also allows you to create custom admin pages where you are set loose with a react component for the frontend page content, and a server side controller for the backend.

Here is what some of the server side code looks like:

import { app } from '@/_server/app';

/*
 * Custom server procedures for your page
 * 
 * These functions run on the server and can be called from your React components
 * using callProcedure('procedureName', input)
 * 
 * Learn more: https://kottster.app/docs/custom-pages/api
 */

const controller = app.defineCustomController({
  // Define your procedures here
  // For example:
  getMessage: async (input: { name: string; }) => {
    return { message: `Hello, ${input.name}!` };
  },
  getSetting: async () => {
    // .env files work just fine
    return { value: process.env.WIDGET_SETTING }
  },
  getWidgets: async (input: { page: number, perPage: number }) => {
    // I had to reverse engineer things to create this code,
    // but direct access to the db via knex is available!

    // Another cool note is that the input and output types of
    // procedures are available in the frontend react component!

    const pg = app.dataSources[0]
    const client = pg.adapter.client
    const results = await client.from('widgets').select('*').limit(input.perPage)
    const totalResult = await client.from('widgets').count('*')
    return { widgets: results as {
      id: string
      name: string
      description: string
      // A json col...
      options: {
        label: string
        value: string | number | boolean
      }[]
      created: Date
      updated: Date
    }[], totalWidgets: totalResult[0].count }
  }
});

export default controller;
export type Procedures = typeof controller.procedures;

Calling a backend procedure from the frontend React component is really easy:

const widgets = await callProcedure('getWidgets', { page: 1, perPage: 20 })

See my next post for info on how to create custom field editors for Kottster!

I'd highly recommend you give Kottster a try. It seems like a fairly young project but is on a good trajectory and solves a problem that I think a lot of devs have.

Self hosted maps for (practically) free

aaronblondeau — Wed, 04 Jun 2025 00:46:04 +0000

Using OpenStreetMap, ProtoMaps, Maputnik and MapLibre to self host custom maps is a really fun tech adventure! These low cost and serverless maps work on the web, react native, android, and iOS. Break free from Google Maps, Apple Maps, and Mapbox!

Note that the ProtoMaps API is a great way to get started with custom maps without having to do all the technical stuff below!

Background

With OpenStreetMap as its foundation, the open source mapping community has some truly amazing projects. Protomaps is a project that elevates the entire open mapping community.

Traditionally map data has been broken down into small "tiles" of either pre-rendered image data or raw map data. These small tiles of data are then downloaded one at a time and stitched together into a map on your web browser or mobile app. It has always been a difficult task to either store map data in a database or pre-process data into enormous numbers of pre-cut map tiles. The Protomaps team solves this problem by storing map tiles in one large file using a format called PMTiles. Clever use of HTTP range requests allows clients to download individual map tiles from this one file source. Farewell expensive Posgres instances!

Step 1 : Get map data from geofabrik

Use Geofabrik's OpenStreetMap data extracts site to choose and download a region (.osm.pbf) of the world that you wish to map : https://download.geofabrik.de/. I recommend you choose an extract that is less than 500MB to get started with. I live in Colorado so you'll see colorado-latest.osm.pbf referenced in the code and commands below.

Important Note : the process described in this post will work to host maps that span the entire world. If you do this, make sure you understand the costs associated with uploading and distributing the data via your hosting platform of choice. See more info about hosting .pmtiles files here : https://docs.protomaps.com/pmtiles/cloud-storage.

Step 2 : Install Tilemaker

Tilemaker is tool for transforming map data. We can use it to take our source .osm.pbf file and transform it into a .pmtiles file. The best thing about Tilemaker is that you can use a lua script to organize map features into layers however you want. In this post I am going to take trail data (osm tag highway=path) and make it available for much higher zoom levels than it is normally available. I want my map to show trails when zoomed really far out.

Get Tilemaker installed on your system : https://github.com/systemed/tilemaker/tree/master?tab=readme-ov-file#installing.

You can also use the docker image if you don't want to install directly or you're on Windows.

Step 3 : Customize .json and .lua config files for tilemaker

To process the OpenStreetMap data you are going to need two config files. A .json file that describes the layers in your map, and a .lua file that processes map data and packs it into the layers. The /resources directory in the Tilemaker repo is where I got started : https://github.com/systemed/tilemaker/tree/master/resources.

Since Tilemaker has great docs I am not going to dive into all the details here, but I basically took the config-example.json file and the process-example.lua file and built them up a bit with some extra logic. Note that if you use the "openmaptiles" examples you need to run the get-coastline.sh, and get-landcover.sh scripts (in the root of the repo) to get some additional map data.

My .json file can be found here : https://gist.github.com/aaronblondeau/0327534340e2a04c1acb4a53df00faa6
And my .lua file can be found here: https://gist.github.com/aaronblondeau/20efcaffb0d799c0f191de68952d609c

Step 4 : Run tilemaker

Once the config files are ready you can run Tilemaker with a command like this:

tilemaker --input ./data/colorado-latest.osm.pbf \
          --output ./data/colorado-latest.pmtiles \
          --config ./config-demo.json \
          --process ./process-demo.lua

All of Colorado processes in under a minute on my machine, so iterating on the .json and .lua files was quick and easy.

Step 5 : Preview data

Once you have a .pmtiles file you can inspect it at https://pmtiles.io/.

A couple of notes : make sure to check the background box so you can pan/zoom to find your map's region. Data may not appear right away if you're using a large .pmtiles file, so give it a minute to load.

Step 6 : Upload .pmtiles to S3

Once your .pmtiles file is ready to go the best way to use it to is to upload it to a cloud storage provider that supports HTTP range requests. AWS S3 is what I used. If your .pmtiles file is large, make sure you understand the costs associated with uploading and hosting it!

If you use S3, you'll need to at a minimum:

1) Allow public read access to your .pmtiles file
2) Set a CORS policy that allows web clients to read the file.

Here is the CORS policy I used. More info here.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

The Protomaps folks have instructions for more production worthy hosting setups here : https://docs.protomaps.com/deploy/aws.

Step 7 : Develop map style with maputnik

Once your .pmtiles file is available online, head over to Maputnik to start developing your map style.

Hit the "Editor button" and then start by setting up a source:

The add layers:

Not seeing anything?

The maputnik editor may not be centered on your map region. Use the Search box to center on a city in your map's region.
Make sure the map zoom is set to something appropriate (like 12)
Be sure to set a color for your layer

Styling with Maputnik deserves it's own book so I won't go into all the details here, but you can get pretty far by clicking around and experimenting with layers.

A big unlock for me was to make sure I used existing fonts when trying to add trail names

You'll note that the default "glyphs" that maputnik uses is here. This is a way of pre-packaging all the fonts used by the style.

  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",

So, when adding a symbol layer:

Make sure to use a font included in the glyphs' .pbf file:

I also used the fantastic Americana map style for example code while styling some components of my map.

Step 8 : Upload map style to S3

Once your map style is ready, export it to JSON via the Save button in Maputnik.

You'll need to double check a few things with the .json before you can start using it to show maps in your apps.

1) Make sure you have a source for fonts set

"glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",

2) Make sure you have an image sprite set. To prevent errors on Android, do this even if you're not using a sprite.

"sprite": "https://americanamap.org/sprites/sprite",

3) Make sure the map has a default center and zoom and that the source layer is publicly accessible (with CORS):

"center": [-106, 38.5],
"zoom": 12,
"sources": {
"demo": {
    "type": "vector",
    "url": "pmtiles://https://somebucket.s3.us-west-2.amazonaws.com/colorado-latest.pmtiles"
  }
},

Once the map style.json file is ready, put it online too. I hosted mine in the same bucket as my .pmtiles file and made sure it was publicly accessible.

Step 9 : Use with maplibregl

MapLibre ties everything together and provides a way to render your map on the web and in mobile apps.

Here are code example code snippets for various platforms:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Map</title>
    <script src="https://unpkg.com/maplibre-gl@^5.5.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^5.5.0/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100vh"></div>
    <script>
        const protocol = new pmtiles.Protocol();
        maplibregl.addProtocol('pmtiles', protocol.tile);
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://somebucket.s3.us-west-2.amazonaws.com/demo_pmtiles.json',
            center: [-106.0, 38.5],
            zoom: 12
        });
    </script>
</body>
</html>

React Native

Follow instructions for the React Native plugin here : https://maplibre.org/maplibre-react-native/docs/setup/getting-started

import { Camera, MapView } from "@maplibre/maplibre-react-native";
import { View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <MapView
        style={{ flex: 1, alignSelf: "stretch" }}
        mapStyle={
          "https://somebucket.s3.us-west-2.amazonaws.com/demo_pmtiles.json"
        }
      >
        <Camera centerCoordinate={[-106.0, 38.5]} zoomLevel={12} />
      </MapView>
    </View>
  );
}

iOS (SwiftUI)

Follow instructions here : https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre-native-for-ios/gettingstarted#SwiftUI

Then setup a map view.

struct SimpleMap: UIViewRepresentable {
    func makeUIView(context _: Context) -> MLNMapView {
        let mapView = MLNMapView()
        mapView.styleURL = URL(string: "https://somebucket.s3.us-west-2.amazonaws.com/demo_pmtiles.json")!
        mapView.latitude = 38.5
        mapView.longitude = -106.0
        mapView.zoomLevel = 12
        return mapView
    }

    func updateUIView(_: MLNMapView, context _: Context) {}
}

struct ContentView: View {
    var body: some View {
        VStack {
            SimpleMap().edgesIgnoringSafeArea(.all)
        }
    }
}

#Preview {
    ContentView()
}

Android (Jetpack Compose)

First add to build.gradle.kts (app)

implementation("org.maplibre.gl:android-sdk:11.8.5")

Then use code:

package com.example.demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import org.maplibre.android.MapLibre
import org.maplibre.android.annotations.MarkerOptions
import org.maplibre.android.camera.CameraPosition
import org.maplibre.android.geometry.LatLng
import org.maplibre.android.maps.MapView
import com.example.demo.ui.theme.DemoMapAndroidTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoMapAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MapView(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MapView(modifier: Modifier = Modifier) {
    // TODO - consider using key here to prevent recomposition
    AndroidView(
        modifier=modifier.background(color= Color.Blue, shape= RectangleShape),
        factory = { context ->
            MapLibre.getInstance(context)
            val mapView = MapView(context)
            val styleUrl = "https://somebucket.s3.us-west-2.amazonaws.com/demo_pmtiles.json"
            mapView.onCreate(null)
            mapView.getMapAsync { map ->
                // Set the style after mapView was loaded
                map.setStyle(styleUrl) {
                    map.uiSettings.setAttributionMargins(15, 0, 0, 15)
                    // Set the map view center
                    map.cameraPosition = CameraPosition.Builder()
                        .target(LatLng(38.5, -106.0))
                        .zoom(12.0)
                        .build()
                }

                map.addMarker(
                    MarkerOptions()
                        .position(LatLng(38.5, -106.0))
                        .setTitle("Major Lines Man")
                        .setSnippet("38.5 and -106.0 cross here!")
                )
            }
            mapView
        }
    )
}

@Preview
@Composable
fun MapViewPreview() {
    MapView(modifier = Modifier.fillMaxSize())
}

PocketBase + React Native

aaronblondeau — Fri, 09 May 2025 16:57:19 +0000

I have a bit of an obsession with finding the fastest way to launch apps. My goal is to be able to create fully functional MVP's and proofs of concept in less than a day. That means being able to spin up a backend and then implement a frontend as efficiently as possible. For the backend, PocketBase has been my favorite lately. On the frontend I am still trying to find a winner. I like Quasar (VueJS + Capacitor) which is fantastic for web apps, but falls a bit short for mobile apps. I've been eyeing React Native lately especially since Expo offers a ton of great plugins like Location and also supports remote updates.

Unfortunately I fell well short of being able to create a basic app in less than a day with these two. After clearing a few roadblocks, however, I think you'll be able to move much quicker than I did on my first attempt.

Broken File Attachments

Why is there always one critical thing that just doesn't work? For a PocketBase and React Native combo, that one thing is file attachments. The PocketBase SDK docs have some good examples of how you're supposed to be able to attach files to records : https://pocketbase.io/docs/files-handling/. This however does not work on React Native on mobile devices (it works fine on web).

The issue has something to do with the way that React Native handles multipart form data on mobile devices. There is also possibly an issue with the way that PocketBase handles the attachments. When using the SDK with React Native, PocketBase will save the record, but then fail to process the attachment. This leaves you with an error on the client side as well as an incomplete record in the database. Double fail.

I felt really smart when I decided to try and bypass the PocketBase SDK and use the REST API via fetch instead, but that didn't work either! Whatever ReactNative does with the networking stack breaks things for fetch as well. So, here is how I wound up getting file attachments to work with an image provided by Expo's ImagePicker:

// iOS doesn't provide fileName
let fileName = image.fileName;
if (!fileName) {
  // Parse filename from image.uri
  fileName = image.uri.split("/").pop();
}

// Prepare a FormData with the record's fields
const postUrl = pocketBaseUrl + "/api/collections/reports/records";
const formData = new FormData();
formData.append("title", title);
formData.append("description", description);
formData.append("user", pb.authStore.record?.id);

// Use custom formatted object for file attachments
formData.append("photos", {
  uri: image.uri, // Do NOT do this here : .replace("file://", ""),
  type: image.mimeType,
  name: fileName,
} as any);

// Post the record to PocketBase's REST API with fetch
const response = await fetch(postUrl, {
  method: "POST",
  headers: {
    Authorization: `Bearer ${pb.authStore.token}`,
  },
  body: formData,
});
const resJson = await response.json();
console.log(resJson);

On web I can just do this:

const data = {
  title: title,
  description: description,
  user: pb.authStore.record?.id,
  // image object provided by ImagePicker has a .file on web
  photos: [image.file]
}
await pb.collection("reports").create(data);

The trick on mobile is to set these three fields in the record sent to formData

uri : Use whatever uri is provided by ImagePicker here - do not replace file://
type : Use the mime type provided by ImagePicker
name : Derive a name from either the uri (iOS) or the fileName (Android) provided by ImagePicker

There must be some part of the networking stack in React Native that sees these fields and then loads the referenced file into the HTTP post request. Where to find that documentation is a mystery, but there are quite a few StackOverflows that cover it.

Broken Realtime

I also had to make a small tweak using the react-native-sse module to get realtime updates working on mobile. Here is how I use it to init the PocketBase SDK:

import AsyncStorage from '@react-native-async-storage/async-storage';
import PocketBase, { AsyncAuthStore } from 'pocketbase';
import EventSource from 'react-native-sse';

// SSE Polyfill : https://github.com/pocketbase/pocketbase/discussions/4893
(global as any).EventSource = EventSource;

export const pocketBaseUrl = 'https://path_to_my_pocketbase_instance_running_in_firebase_studio'

const store = new AsyncAuthStore({
  save: async (serialized) => AsyncStorage.setItem('pb_auth', serialized),
  initial: AsyncStorage.getItem('pb_auth'),
  clear: async () => await AsyncStorage.removeItem('pb_auth')
});

export const pb = new PocketBase(pocketBaseUrl, store);

Conclusion

Having waded through these two issues I now have a tech stack that allows for extremely fast app prototyping. However, I do not plan on using this in production anytime soon. Encountering issues like these are warnings that even larger show stoppers are still out there waiting to upend your project.

PocketBase + Firebase Studio

aaronblondeau — Fri, 09 May 2025 16:43:33 +0000

I needed an excuse to try out Firebase Studio so I decided to try and develop a PocketBase backend on it. It didn't work right out of the box, but it was fairly easy to get going.

First, create a Go project in Firebase Studio. Use "API server" as the environment.

At the time of writing this, the default version of Go in the environment is 1.21, but PocketBase requires 1.23.

To get a newer version of Go, open up .idx/dev.nix and update the channel to "stable-24.11":

channel = "stable-24.11";

I love that they are using NixOS for these environments as it will make them very customizable.

You should be prompted to rebuild the environment once you save this change.

Once the environment restarts, make sure you have Go 1.23+.

Your environment will have been setup to run your app via Air. You will need to customize Air in order to run PocketBase.

Create an air.toml file by running this command in a terminal window:

air init

Open the air.toml file and set args_bin to "serve"

args_bin = ["serve"]

Navigate to the terminal window that is running air. It will be titled "[onStart] run-server" Use ctrl+c to stop it.

Once the server has stopped, replace the contents of main.go with the code found here : https://pocketbase.io/docs/go-overview/

Then in a terminal window run:

go mod tidy

In the terminal window that was running air, hit the up key followed by enter to re-run the air command.

You'll notice that the output provides the PocketBase superuser setup url. This url, however, uses http://127.0.0.1:8090 as the host name which you won't have access to.

You'll need to replace the http://127.0.0.1:8090 with your project's public URL. To get this url, first click on the Firebase Studio icon in the left navigation bar. Then expand the "Backend Ports" section.

Click on the lock next to port 8090 to make it publicly accessible.

Then open or copy the link from one of the buttons under "actions".

After constructing the admin setup url it will look something like this:

https://8090-firebase-pocketbasedemo-1746757209594.cluster-rhptpnrfenhe4qarq36djxjqmg.cloudworkstations.dev/_/#/pbinstal/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJwYmNfMzE0MjYzNTgyMyIsImV4cCI6MTc0Njc1OTc0MywiaWQiOiI0MHpjOTU4MHgwbTZjcDIiLCJyZWZyZXNoYWJsZSI6ZmFsc2UsInR5cGUiOiJhdXRoIn0.f7KtQqQ9nVza39RyKi_-QjARkAIq00eooNH3sEW4iak

Open the superuser setup url, complete the setup and you'll be up and running with PocketBase!

Note 1 : Your PocketBase admin URL will be whatever you get from the backend ports section followed by a "/_/". For my environment this was:

https://8090-firebase-pocketbasedemo-1746757209594.cluster-rhptpnrfenhe4qarq36djxjqmg.cloudworkstations.dev/_/

Note 2 : To run PocketBase manually (with air stopped), you'll use the following command. This helps ensure you're using the same pb_data folder that the server uses when running with air:

go run . serve --dir ./tmp/pb_data

How to create custom WebView based React Native components

aaronblondeau — Tue, 15 Apr 2025 01:05:16 +0000

I am currently working on porting a capacitor app to React Native (Expo). One of the components I need to re-create is a signature area. Unfortunately the existing components for this are pretty terrible so I decided to create my own. It turned out to be so fairly easy and I think having my own component will ultimately save me time.

The code is here : https://github.com/aaronblondeau/react-native-signature-pad

Simple Usage

First install signature_pad from npm:

npm add signature_pad

Then add expo-filesystem and expo-asset to your project so that HTML can be loaded for the webview:

expo-filesystem : https://docs.expo.dev/versions/latest/sdk/filesystem/
expo-asset : https://docs.expo.dev/versions/latest/sdk/asset/

Copy assets/signature_pad.html to the assets folder of your project.

Copy components/MobileSignaturePad.tsx to the components folder of your project.

Copy components/WebSignaturePad.tsx to the components folder of your project.

Copy components/SignaturePad.tsx to the components folder of your project.

Finally, use the SignaturePad component in your project. See app/index.tsx for example usage.

Customizable Usage

Follow the steps above. Then copy the webview/react-native-signature-pad folder into your project.

Inside of the webview/react-signature-pad folder run

npm install

You can also run the webview code with vite

npm run dev

To update the html used in the react native project (/assets/signature_pad.html) run:

npm run build

Project Structure

The project is setup to provide support for Android, iOS and Web. When used on iOS and Android a WebView is used to render a single file HTML page containing a web app that implements the signature pad. When the React Native code is used on the web, the React component that implements the signature pad is used directly.

Implementing the web component

Here is how I created the custom signature pad component:

First I added a "webview" folder to the top level of my react native project.

mkdir webview

Then I started a react (regular react, not react-native) project with vite inside of the webview folder.

cd webview
npm create vite@latest

I chose "react-signature-pad" as the name, React as the framework, and TypeScript as the variant.

Why vite? My end goal was for the web content to be a single html file (via vite-plugin-singlefile) that is easy to embed in the react native application.

After doing some cleanup I implemented the component as a standalone web app using signature_pad from npm.

The App.tsx file contains all the code to send data and events back and forth between the web application and the react native application. It does this by adding some methods to the global namespace so that they can be called via React Native webview's injectJavaScript. Events and data are then sent back up to the webview by calling window.ReactNativeWebView.postMessage().

Note that you cannot return values from injectJavaScript calls. So if you need to get data from inside of the webview you need to call a method that then postMessage's the data you need. In order to get the PNG image data for the signature, the code first uses injectJavaScript to call a method called "emitSignatureData". emitSignatureData then calls signature_pad's toDataURL to get the data and sends it back with postMessage.

WebSignaturePad.tsx does the work of creating a canvas and setting up signature_pad. WebSignaturePad provides a few events via props and some methods via forwardRef and useImperativeHandle.

Quick react rant... What in the hell is useImperativeHandle supposed to mean? Whoever is in charge of naming things badly on the react team needs to stop being a smartass and/or go find something else to work on. I avoided using react for years because I thought "useEffect" was so stupid. Rant complete...

Note that I used the deprecated version of forwardRef because Expo isn't fully up to date with React 19 yet.

Also note that I wound up moving the WebSignaturePad.tsx component to the main react-native project in order to resolve some TypeScript errors.

Packaging the web component

There are some limitations when it comes to using webviews. The main one being that it cannot load local html files. If your content is super simple you can just use an html string. If your content is complex the webview component docs recommend you implement a local webserver.

Since using a local webserver seems like a bad idea. I decided to leverage vite to package the entire web app into a single file.

First I setup vite-plugin-singlefile

npm install vite-plugin-singlefile --save-dev

I used instructions from the module's npm page, but used "react()"" instead of "vue()"

I also tweaked vite.config.ts to make output go to ../assets/signature_pad.html instead of dist/index.html

My final vite.config.ts is here.

This setup is really nice because I can run npm build in the webview source:

cd webview/react-signature-pad
npm run build

This deploys the single signature_pad.html file needed for the webview.

Note that I didn't have to do anything special to get react native to load the .html file into a string for use with the webview. There are some instructions here that may be helpful if it doesn't work out of the box for you.

Final Thoughts

Should I move this into an npm package or is it more useful as just example code?

Hack your DNS for better focus

aaronblondeau — Sun, 02 Mar 2025 03:24:11 +0000

Keeping on top of what is flowing in and out of my house on the internet has been critical for my kids' mental health. Ultimately they will need to be able to moderate their own behavior online. In the meantime it is my job to make sure that the dopamine dealers stay out.

Same goes for me too. My dopamine dealer is YouTube. Every time I run into a difficult problem at work my brain says, "Hmmm, that looks hard, let's take a quick YouTube break." Then two hours later I find that difficult problem still waiting for me.

I've used NextDNS for years to keep our home internet safe for the kids and it works really well. Fortunately NextDNS offers API access that you can use to automate turning different internet filters on and off. Unfortunately their API docs are horrible.

Here is how I setup a tool that automatically blocks YouTube during working hours.

Step 1 : Get an API key.

To find your NextDNS API key head to your profile page and look in the API section.

Step 2 : Add YouTube to the "Websites, Apps & Games" section of the Parental Control tab.

Step 3 : Forget about the NextDNS API docs. Use a browser inspector to figure out how to turn off or on the filter.

I couldn't make much sense of the NextDNS API docs and almost gave up on this one, but then I decided to see if I could reverse engineer the calls from their own web UI. I opened up the inspector, cleared out the network traffic and then toggled the YouTube filter on and off. Sure enough the URL and payload to turn the filter off and on was easy to pick out:

Step 4 : Use Deno to create a simple script and cron

Using the information you gather from the browser inspector, create fetch calls that will make the same request. The fetch should use your API key in a X-Api-Key header.

async function updateYouTube(active = false) : Promise<void> {
  await fetch('https://api.nextdns.io/profiles/YOUR-PROFILE-ID/parentalControl/services/hex:FIND-ME-IN-INSPECTOR', {
    method: 'PATCH',
    headers: {
      'X-Api-Key': Deno.env.get('NEXTDNS_API_KEY') || '',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(
      { active }
    )
  })
}

// Good tool to help debug timezone day/time differences:
// https://savvytime.com/converter/utc-to-co-denver/jan-13-2025/3-30pm

// Switch to standard at 6pm M-F
Deno.cron("Set standard profile", "3 1 * * 2-6", async () => {
  console.log('~~ setting standard profile')
  await updateYouTube(false)
});

// Switch to workday at 9am M-F
Deno.cron("Set workday profile", "3 16 * * 2-6", async () => {
  console.log('~~ setting workday profile')
  await updateYouTube(true)
});

Note that it may take some brain wattage to get the cron times correct due to timezone issues.

Step 5 : Host on Deno Deploy

The folks at Deno have made hosting scripts like this extremely easy. The Deno.cron statements above work without any extra config! I just put my code into a GitHub repo and linked it to my account to deploy : https://docs.deno.com/deploy/manual/how-to-deploy/. Don't forget to setup the NEXTDNS_API_KEY environment variable in the service's settings.

Cover Photo by Alexander Kovalev from Pexels

PocketBase + SurrealDB

aaronblondeau — Fri, 14 Feb 2025 18:27:43 +0000

PocketBase is shockingly well engineered.

PocketBase is an open source backend that provides:

Authentication (including social auth)
Database (SQLite, with realtime support)
File storage (local or S3)
Dart and Javascript SDKs for above

What makes it so well engineered is how extensible and flexible it is. It also packs a punch for being so simple and lightweight.

It does have one core limitation in that it uses SQLite as it's storage engine. This means two things
1) Scaling can only happen vertically.
2) Support for Geo-spatial and vector data types are not available.

I think that (Turso)[https://turso.tech/] and PocketBase could become good friends. There already is some support for this.

PocketBase's solid design and extensibility also makes it easy to integrate with other backends to access features beyond SQLite. Here is an example scenario. Let's say you're building an app like x-skies where users can report UFO sightings. Each sighting will have a description as well as a latitude and longitude. You'd like to use SurrealDB's spatial support to manage the location data and PocketBase for everything else. The data flow would look like this:

Due to PocketBase's excellent set of hooks this is very easy to do! An example with all the code can be found here : https://github.com/aaronblondeau/surreal_pocket.

Step 1 is to use PocketBase's OnRecordCreateRequest hook to watch each incoming sighting : https://github.com/aaronblondeau/surreal_pocket/blob/main/main.go#L139.

In this hook I grab that latitude and longitude that were sent by the frontend and make sure they are stored in the new record's custom data. Since I am not storing the latitude and longitude at all in PocketBase this step ensures those fields don't get lost.

Step 2 is to use PocketBase's OnRecordCreateExecute hook to save the location data in SurrealDB : https://github.com/aaronblondeau/surreal_pocket/blob/main/main.go#L161

I chose this hook because at this point PocketBase has already assigned an id to the record but not yet saved it. This means I can use the id to save the location data in SurrealDB. If there is an error when saving to Surreal it will also prevent the save from happening in PocketBase to help things stay in sync.

Step 3 is to use the OnRecordEnrich hook to re-attach the latitude and longitude as each record is returned from the server : https://github.com/aaronblondeau/surreal_pocket/blob/main/main.go#L180

OnRecordEnrich is where the PocketBase crew deserves a high five for their design work because it so incredibly useful. In this callback I simply lookup the matching record in SurrealDB and attach the latitude and longitude before it goes out the door. There was a slight trick to this though:

e.Record.WithCustomData(true)

This WithCustomData call lets me attach my own virtual fields to the records so that they seem like ordinary database fields in the frontend code.

Step 4 is to use the OnRecordAfterDeleteSuccess hook to make sure things stay in sync when records are deleted in PocketBase. You'd want a similar rig for updates as well. https://github.com/aaronblondeau/surreal_pocket/blob/main/main.go#L204

Finally add a custom route that performs spatial searches in SurrealDB and merges the results with the PocketBase data : https://github.com/aaronblondeau/surreal_pocket/blob/main/main.go#L84

And now you've got a really clean way to add spatial support to PocketBase!

Note that I purposefully made this harder than it had to be to test the extensibility of PocketBase. The latitude and longitude could be stored in PocketBase as well as SurrealDB with Surreal only providing the spatial indexing. However, I thought it would be neat to see if I could make those fields fully virtual.

Don't let PocketBase's simplicity prevent you from trying it out. Adding vector support, full text search, and all kinds of other features are possible with similar techniques.

Bow to the rectangle

aaronblondeau — Thu, 13 Feb 2025 03:09:25 +0000

Here are the steps I had to take to login to Facebook Business Manager recently:
1) Go to Facebook. I'm logged out again even though I just logged in earlier in the day.
2) Use password from my password manager.
3) Use code from authentication app.
4) Try to go to business manager.
5) It asks to validate business email.
6) Get code from business email and put that in.
7) It says my access is restricted and I have to wait 37 minutes to access business manager. Not sure where they came up with 37 but I have seen all kinds of random wait times with this.
8) Wait the 37 minutes.
9) Get asked for authentication code again.
10) Finally get to business manager, but it took so long I forgot what I was going to do there.

Logging in to anything these days requires multi-factor authentication. I have come to refer to getting 2FA codes as "bowing to the rectangle". (In my culture, being forced to bow down to something is a demeaning and humiliating experience)

I totally understand that our tech overlords have to address the problem of people using insecure passwords and hackers stealing browser sessions and so on. However, I get the feeling that something else is going on. What is next for Facebook login steps? Is 3FA (three factor authentication) where they come to my house and swab me for my DNA next time I try to login?

I have a neighbor who doesn't have a cell phone or a computer. He doesn't have to bow to the rectangle. Yet. I just have this feeling that with the rise of AI and the automation of everything that they will make him bow too. Good luck paying your electricity bill or getting a Dr. appointment without good old two factor authentication.

I have been thinking about this for several weeks and I have only identified three very imperfect solutions developing applications that don't require onerous authentication:
1) Fully anonymous users
2) Peer to peer applications
3) Public key (Web3/crypto) style authentication

For solution #1 there is only a small set of applications that you can create with no user authentication. To try my hand at this and to continue the conspiratorial theme of this post I created an app called X-Skies. X-Skies is an app that lets anyone post or observe Drone and UFO sightings. It was really hard for me to adjust to building an app without a login. Some design work also had to go into figuring out how to prevent abuse of a system where everyone is anonymous.

For solution #2 there is a much broader range of applications that are possible. Frameworks like Socket Supply Co and tools like PeerJS are also available. However designing a peer to peer application that is useful and accessible to ordinary users is going to be very hard.

If you can't get ordinary folks to even use secure passwords without losing them then solution #3 is a real long shot.

So, where does this road take us. Will we have to sacrifice our privacy and dignity by being forced to use more and more invasive authentication methods. My iPhone already has my face. What will it want next?

I think that we as developers are going to need to find some innovative ways to serve people with technology without demeaning them. If we don't we'll wind up with the mark.

Cover Photo by Pixabay from Pexels

I'm not going to learn a new programming language this year

aaronblondeau — Thu, 02 Jan 2025 23:43:34 +0000

This year I am going to learn something entirely different: knitting. With yarn and needles. Like a little old lady.

For the past 2 decades I have made a goal of learning a new programming language each year. I've learned languages like Elixir, Gleam, D, Ruby, C#, Dart, PHP, Java, Groovy, Scala, Kotlin, Swift, Objective-C, and Perl.

I never used most of them. Learning new languages is not a waste of time even if they go unused. Seeing how other people think and design code is extremely valuable. I truly enjoyed diving into functional programming with Elixir and Gleam. I see ideas from that paradigm appearing my TypeScript all the time now. However, for the near term I have simply hit a point where there is too much diminishing return in learning a new language.

This year I am going to learn to knit because my brain is a mess. The feeds and the algorithms and the AI autocomplete and the constant news cycle are all running rampant. I can hardly focus. Productivity is hard, getting into flow state is hard. Finishing this post without watching something on YouTube or checking the news is hard. That's enough.

I am going to spend time disconnecting and doing something boring with my hands so that I can start to reclaim my mind. Thankfully my daughters are all kitting and crocheting experts so I don't have to go crawling right back to YouTube to learn it. I'll get to spend more time with them and they'll get to practice teaching their hard won skills to me.

My hope is that by spending this year finding ways to reclaim my ability to focus I will become a better developer and a better person.

Here is my work so far. Looks kind of like my code: full of holes and knots. I'll post updates here as I make progress!