joshua.seigler.net - technical

Angular impressions update

2026-03-27T00:00:00Z

This is a six-months-later follow up to Angular impressions

Angular is kinda good for me now that I’m used to it. Using modern Angular development practices helps a whole lot – dependency injection is less mysterious with inject, state management is actually great since I can use signals, and it looks like in a version or two maybe even Observables will be basically optional. I’ve accepted that Angular does more for you than React, and that helps with the daily experience as well.

I do miss being able to pass around components as values; in Angular if you want to make a component that accepts another component which it will use to do its rendering (maybe the user can provide a wrapper for table cells), you will be using templates. Not as elegant or simple.

But Angular finally feels expressive, and I’m no longer spending effort fighting with it.

Angular impressions

2025-10-29T00:00:00Z

I’ve been working with Angular lately. Most of my experience is with React, starting back in 2018 just before the addition of hooks, and working with it heavily into 2025. I build web and mobile applications, and React or React Native was the tool of choice across a handful of companies small and large. I’ve also built some small personal projects with Vue and SolidJS as little learning experiments.

When I try a tool that challenges my comfortable ways of doing things, the initial feeling is generally bad. That’s normal and expected. I’m using the tool, so I understand that in theory it can fit some need I have. But the way it goes about things often seems wrong because I’m not used to it. I haven’t learned to look at things from the tool’s particular perspective yet.

A good example of this discovery journey is Typescript. When I first started using Typescript, it seemed like the amount of hassle involved in making everything properly typed was not worth the occasional benefit of catching a type error. But once I got used to the language I quickly appreciated the value of working with types, and I ended up with a very positive opinion of the tool.

Getting “over the hump” and internalizing the tool’s paradigm doesn’t always mean liking the tool. Tailwind is a tool for organizing and applying CSS styles. It is the most popular example of “atomic styles”, a way of using CSS classes like inline styles, with some constraints applied to help with design consistency. With Tailwind and other Atomic CSS tools, you don’t write CSS, you apply utility classes. At first this struck me as nearly obscene. But a lot of smart people are huge fans, and I joined a project that was using it and didn’t have the social capital to rip it out, so I gave it a shot. It wasn’t as bad as I thought it would be, and I often enjoyed using it. But after becoming thoroughly familiar with Tailwind, I think that in most cases you can do better with CSS variables and scoped CSS. (I have a lot of thoughts about CSS architecture, but I’ll save them for their own post.)

Since I’ve been using Angular for a few months now, I’m coming out of the “this feels bad because it’s unfamiliar” stage and starting to have a sense of the Angular paradigm. To use Trivium terminology, I’m starting to shift my focus from Angular’s grammar and logic to its rhetoric.

Here are some of my observations:

Angular really loves dependency injection and decorators.
Angular has evolved significantly over time, so there are a lot of old and new patterns coexisting: *ngIf and @if, @Input and input(), ngOnInit and effect(). Since I’m just now learning it, I mostly use the modern patterns shown in Angular’s docs.
Angular is compiled, which lets you do creative things with template languages if you want.
Angular depends on the DOM in a way React doesn’t. Each Angular component is like a mini application with its own host element. The component’s code renders its template into the host element. In React, a JSX component is more like a persistent function invocation. It has a location in the DOM, but it doesn’t have its own host element. The component could easily emit nothing and be completely absent from the DOM. This is either difficult or impossible in Angular, it’s not even something you would try to do.
Angular is complex. Maybe I will come to appreciate DI and the Angular way eventually. But I already know that with a starkly simpler tool like React or especially Solid, I can efficiently accomplish the same result, while being able to understand how my framework functions.

Overall, I feel that Angular is certainly suitable for building web applications. But because of all the DI and decorators, it feels unnecessarily clever, which makes learning to use it more difficult, and makes deeply understanding how it works less likely. It is well tested and is as “batteries included” as it gets, which is nice for large projects.

It will be interesting to see how my feelings change with time. Stay posted.

FFmpeg audio cleanup

2025-06-26T00:00:00Z

I recently needed to process 20+ phone audio recordings. The files are mp3 recordings in stereo, made in an environment with echoes and noise from fans/heaters.

Although I could do it easily with Tenacity I didn’t want to use a manual process, since it would take days. So I tried using FFmpeg filters and Bash scripting.

I found an FFmpeg filter called compand which lets you map an input decibel range to an output decibel range. I also used the anlmdn filter to reduce noise, and the highpass filter to help with clarity.

I ran into a couple gotchas.

mpv does something special for audio playback that prevents audio from clipping. vlc plays the file as it is.
Because the compressor has an attack and decay (which is necessary for things to sound good) it can cause clipping if the volume rises sharply. Applying a delay parameter with half the duration of the attack length fixed this.

Here is the script:

process-audio.sh

#!/bin/bash
if [ "$#" == "0" ]; then
  echo "Error: no arguments provided."
  echo "Usage: $0 file1 file2 file3 ..."
  echo "or $0 *.ext"
  exit 1
fi

trap "exit" INT

while [ "$#" != "0" ]; do
  path="${1%/*}"
  file="${1##*/}"
  outfile="./normalized--$file"
  if [ ! -f "$outfile" ]; then
    echo "Processing $1"
    ffmpeg -i "$1" -v warning -ac 1 -af "compand=attacks=0.3:decays=0.3:delay=0.15:points=-80/-300|-45/-25|-27/-15|0/-12|20/-12,anlmdn=s=10,highpass=f=500" -threads 4 "$outfile"
  else
    echo "Skipping $1, already processed."
  fi
  shift
done

If this is useful to you please leave a comment or send an email, I would love to hear about it.

My Very Own GitHub Pages

2025-06-15T00:00:00Z

I recently started self-hosting Forgejo, but I wanted something to replace GitHub pages, which has been very convenient for publishing little website projects. My server runs Debian, so I decided to use webhook and Caddy. I’m very happy how it turned out.

The objective

When I push a gh-pages branch to any public repository on my Forgejo instance, the name of the repo is used as a domain name (e.g. marklink.pages.seigler.net) and the branch contents are automatically served with SSL. If I push updates to the branch, they are automatically published. If the branch or repo is deleted, the site is taken down.

How to do it

Debian server preparation

In case you don’t have a basic server setup routine yet, this is a good start:

Change the default root password.
Create a new user and add it to the sudo group. In my examples below the user is joshua.
Use ssh-copy-id to install your ssl pubkey for easier login.
Disable/lock root’s password.
Disable root login over ssh and change the SSL port number. Pick a new port lower than 1024.
Edit your local ~/.ssh/config so you don’t have to specify the port number every time you connect.
On the server, install and enable ufw and fail2ban. In addition to allowing your custom SSL port, be sure to enable ports 80 and 443 with sudo ufw allow "WWW Full".

Caddy

I usually use nginx, but I wanted to give Caddy a shot, and it has been a great experience. I installed Caddy using the official instructions.
Here is the Caddyfile I made—you will need to change the domain names and the email. Email could be removed, but it is there so that SSL certificate issuers can contact you if there is a problem with your certificates.

/etc/caddy/Caddyfile

# Global options block
{
	email you@example.com #### CHANGE THIS ####
	on_demand_tls {
		ask http://localhost/check
	}
}

# Webhooks
https://webhooks.subdomain.here.tld { #### CHANGE THIS ####
	reverse_proxy localhost:9000
}

# Filter for which SSL certs we will create. Prevents abuse.
http://localhost {
	handle /check {
		root * /var/www
		@deny not file /{query.domain}/
		respond @deny 404
	}
}

# This automatically handles upgrading http:// requests with a redirect
https:// {
	tls {
		on_demand
	}
	root /var/www
	rewrite /{host}{uri}
	@forbidden {
		path /.*
	}
	respond @forbidden 404
	file_server
}

# Refer to the Caddy docs for more information:
# https://caddyserver.com/docs/caddyfile

# This config based on information at
# https://caddy.community/t/on-demand-tls-with-dynamic-content-paths/18140
# checked and corrected with `caddy validate`

I also took ownership of /var/www with chown -R joshua:joshua /var/www since the webhooks will run as my login account.

Webhooks

In my home directory I defined two hook scripts:

~/webhooks/update-pages.sh

#!/bin/bash
# parameter 1 is repo name, parameter 2 is clone url
[[ "$1" == *"/"* ]] && exit 1;
[[ "$1" == *".."* ]] && exit 1;
[[ "$1" == *"*"* ]] && exit 1;
if [ -d "/var/www/$1" ]; then
  cd "/var/www/$1";
  git fetch origin gh-pages;
  git reset --hard origin/gh-pages;
  exit;
fi;
git clone -b gh-pages --single-branch "$2" "$1" || exit 1;

~/webhooks/remove-pages.sh

#!/bin/bash
# parameter 1 is repo name
[[ "$1" == *"/"* ]] && exit 1;
[[ "$1" == *".."* ]] && exit 1;
[[ "$1" == *"*"* ]] && exit 1;
[ -d "/var/www/$1" ] || exit 1;
cd "/var/www";
rm -rf "/var/www/$1";

To trigger these hooks I am using webhook which is in the default Debian repository.

Here are the hook definitions: one for creating/updating a site, and one for deleting. You will need to generate one or two secret values that the server can use to know that the webhook is authorized to run. I used linux command uuidgen -r to create mine. Save these values so you can enter them in Forgejo later.

Also make sure to replace your execute-command lines with ones referencing your username and script paths.

/etc/webhook.conf

[
  {
    "id": "update-pages",
    "execute-command": "/usr/bin/sudo",
    "pass-arguments-to-command": [
      { "source": "string", "name": "-u" },
      { "source": "string", "name": "joshua" },
      { "source": "string", "name": "/home/joshua/webhooks/update-pages.sh" },
      { "source": "payload", "name": "repository.name" },
      { "source": "payload", "name": "repository.clone_url" }
    ],
    "trigger-rule": {
      "and": [
        {
          "match": {
            "type": "payload-hmac-sha256",
            "secret": "(omitted)",
            "parameter": {
              "source": "header",
              "name": "X-Forgejo-Signature"
            }
          }
        },
        {
          "match": {
            "type": "value",
            "value": "refs/heads/gh-pages",
            "parameter": {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  },
  {
    "id": "remove-pages",
    "execute-command": "/usr/bin/sudo",
    "pass-arguments-to-command": [
      { "source": "string", "name": "-u" },
      { "source": "string", "name": "joshua" },
      { "source": "string", "name": "/home/joshua/webhooks/remove-pages.sh" },
      { "source": "payload", "name": "repository.name" }
    ],
    "trigger-rule": {
      "and": [
        {
          "match": {
            "type": "payload-hmac-sha256",
            "secret": "(omitted)",
            "parameter": {
              "source": "header",
              "name": "X-Forgejo-Signature"
            }
          }
        }
      ]
    }
  }
]

Forgejo

Forgejo supports running webhooks conditionally triggered by certain conditions.
Under my main user settings I set up each webhook:

Update pages

Target URL: https:// your domain here /hooks/update-pages
HTTP Method: POST (the default)
POST content type: application/json (the default)
Secret: omitted, use your own
Trigger on: Push events
Branch filter: gh-pages

Remove pages

Target URL: https:// your domain here /hooks/remove-pages
HTTP Method: POST (the default)
POST content type: application/json (the default)
Secret: omitted, use your own
Trigger on: Custom Events > Repository > Delete
Branch filter: gh-pages

Conclusion

It works!
Here is the marklink repo in my Forgejo instance and its contents on my Caddy server.

That repo is just HTML and JS with only a gh-pages branch, but for repos with npm build scripts, I use gh-pages @ npm to push the build to a gh-pages branch and up to the server.

I’m putting off rolling my own CI server, but I imagine that’s the next stage here. Stay tuned.

Tools of the trade

2025-05-15T00:00:00Z

Everyone has different tools that they find especially effective. Here are some I have found with a few words about why I like them.

Update: I made a /uses page that lists these tools and many others I like.

mise-en-place

Universal dev tool version manager. Specify tool versions in a config file and this tool can ensure that they are installed and active when entering the project directory. Amazing for getting a new dev environment set up in seconds. Replaces asdf, nvm, pyenv, venv, rbenv, and many other tool-specific version managers. Supports an incredible number of tools thanks to compatibility with asdf.

It also supports installing specific global tools, like angular-cli from npm, or stack-pr from pipx.

stack-pr

Open source tool for stacking PRs.

PR stacks are, as far as I can tell, the best way to manage large features in git. I first heard about this practice in a series of blog posts from Graphite, a company offering free PR-stacking software and related paid services. But you don’t need a custom CI flow or managed service for stacking to work - this CLI tool or one of the others at stacking.dev can take care of this.

If you start using PR stacks your whole company will start copying you.

xc

Markdown based task runner.

Define tasks in code blocks in markdown, and call them from the CLI. Serves as both task definition and documentation.

pd2slack

Simple python script to update the members of a Slack group such as @oncall to match the active member(s) of a PagerDuty schedule. This replaces several expensive SAAS services.

SyncThing

P2P alternative to Dropbox, supports mobile and desktop. Synchronize folders of content across all my devices.

Obsidian

For notes and reference. Sync across devices with syncthing.

KeePassXC

For passwords. Sync across devices with syncthing.

Site design updated

2024-06-05T00:00:00Z

New design! The tools I used before have a lot of unmaintained or outdated dependencies and I wanted something a little simpler. The new site uses pnpm, 11ty, and Nunjucks. Content is still in markdown.

One thing I’m proud of is a visual ping for footnotes.^[1] When you click a footnote^[2] it briefly highlights the thing you jumped to.

In the upper right I added a style toggle that applies the font from Star Wars, “Aurebesh”. I learned how to read it but sometimes want some practice. People who can read this are cool and I like them.

I also finally made a section for recipes!

May 2025 edit: I updated the design some more without changing the tech stack. The main improvements are animated clouds and a host of minor adjustments.

June 2025 edit: I have continued to alter the design. Pray I don’t alter it any further.

It highlights when you click back, too. ↩︎
Hi. ↩︎