Today I Learned

Make all rounded corners squircles

Sun, 18 Jan 2026 08:01:44 GMT

Have you heard of corner-shape? It's the new hottest CSS property! You can use it to make corners that are notches, squircles and all sorts of other cool stuff.

It's as easy as this:

*,
*::before,
*::after {
  corner-shape: squircle;
}

It only works in Blink browsers for now, but that's okay — graceful degradation, right?

The only real issue is that, in my experience, the radii of squircle corners tend to appear about half as big as "normal" rounded corners. So I'd put something like this in my CSS reset:

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  /* ... */
}

@supports (corner-shape: squircle) {
  *,
  *::before,
  *::after {
     corner-shape: squircle;
  }

  :root {
    --radius-sm: 8px;
    --radius-md: 12px;
    /* ... */
  }
}

Define the corner radii design tokens, and then if the browser supports squircle corners, make all corners squircles and double the corner radii.

Load an import map from a JSON file

Sun, 18 Jan 2026 07:54:35 GMT

One of the cooler features of ES modules is import maps, which let you change JavaScript identifier names so you can import them as though they were Node modules.

Basically, you put a script tag like this in your HTML, before your module graph loads:

<script type="importmap">
{
  "imports": {
    "preact": "https://esm.sh/preact"
  }
}
</script>

And then you can write import { h } from "preact" rather than import { h } from "https://esm.sh/preact".

Unfortunately, the spec doesn't allow import maps to be loaded remotely — which is to say, you can't do something like this:

<script type="importmap" src="/importmap.json"></script>

You can create them dynamically, though! Baldur Bjarnason found a way: use a non-module script to inject a script tag!

<script>
  const importMap = {
    // import map goes here
  };

  const importmap = document.createElement("script");
  importmap.type = "importmap";
  importmap.textContent = JSON.stringify(importMap);
  document.currentScript.after(importmap);
</script>

But how to load our JSON file into the script? We can't import them — remember, import maps need to load before any modules — and we can't fetch, since there's no way to force the browser to wait for the response before it continues executing other script tags.

Did you know that XMLHttpRequest supports synchronous requests? If we pass false as the third parameter to XMLHttpRequest.open, it will block until the response comes back — meaning the browser won't continue executing any other JavaScript.

Once the response comes back, we can insert the import map script into the DOM and everything is hunky dory:

// make a synchronous XMLHttpRequest for the import map
const xhr = new XMLHttpRequest();
xhr.open("GET", document.currentScript.dataset.src, false);
xhr.send();

// create a <script type="importmap"> with the response text
const importmap = document.createElement("script");
importmap.type = "importmap";
importmap.textContent = xhr.responseText;

// insert the <script type="importmap"> after the current script
document.currentScript.after(importmap);

You'd use that like this:

<script src="/importmap.js" data-src="/importmap.json"></script>

Caveats abound: this will block all rendering while that XMLHttpRequest is in flight! I've been using it mostly for local development, where latency is low and the chance of a request failing is basically non-existent.

Select a previous sibling

Wed, 30 Jul 2025 11:20:48 GMT

Let's say we have this markup:

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

For a long time, we've been select an element's next siblings:

.one ~ .four {
  /* selects an element with class `four` if preceded by a sibling element with class `one` */
}

.two + .three {
  /* selects an element with class `three` if *immediately* preceded by a sibling element with class `two` */
}

But we haven't been able to select an element's previous siblings — like, an element with class one (as long as it's followed by an element with class four).

Enter the :has selector! This trick is simple enough that I'm sure it's written up elsewhere, but here you go:

.one:has(~ .four) {
  /* selects an element with class `one` if followed by a sibling element with class `four` */
}

.two:has(+ .three) {
  /* selects an element with class `two` if *immediately* preceded by a sibling element with class `three` */
}

Change the navigation bar font

Sat, 26 Jul 2025 06:01:54 GMT

I wanted to set a SwiftUI iOS app in SF Rounded. It's a system font, so I thought it'd be pretty easy. On the web, it would take like two lines of CSS.

Setting the font of the content to SF Rounded was pretty easy — just call the fontDesign(.rounded) on the root view:

@main
struct myApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .fontDesign(.rounded)
    }
  }
}

Setting the font of the navigation bar, though, turned out to be surprisingly hard! I don't think you can actually do it in SwiftUI alone — you need to pull out some UIKit APIs.

I asked on Bluesky and got some very nice help from Mark Malstrom. A lot of resources online seem to recommend similar approaches: creating an instance of UINavigationBarAppearance and setting UINavigationBar.appearance().standardAppearance to that instance:

@main
struct myApp: App {
  init() {
    guard let descriptor = UIFontDescriptor
      .preferredFontDescriptor(withTextStyle: .headline)
      .withDesign(.rounded) else {
        return
      }

    let appearance = UINavigationBarAppearance()
    appearance.titleTextAttributes = [
      .font: UIFont(descriptor: descriptor, size: 0)
    ]

    UINavigationBar.appearance().standardAppearance = appearance
  }

  var body: some View {
    // ...
  }
}

(Some resources will also tell you to set the compactAppearance and scrollEdgeAppearance properties, but Apple's documentation says that if those are set to nil it applies the standardAppearance in those cases.)

On the other hand, some resources recommended mutating UINavigationBar.appearance() directly:

@main
struct myApp: App {
  init() {
    guard let descriptor = UIFontDescriptor
      .preferredFontDescriptor(withTextStyle: .headline)
      .withDesign(.rounded) else {
        return
      }

    UINavigationBar.appearance().titleTextAttributes = [
      .font: UIFont(descriptor: descriptor, size: 0)
    ]
  }

  var body: some View {
    // ...
  }
}

The first seems better documented, and Claude tells me that the second is a deprecated way of accomplishing it, so I went with that one.

Represent a sum type

Fri, 04 Jul 2025 10:32:20 GMT

Let's say we have two structs in Go:

type Foo struct {
  One string
}

type Bar struct {
  Two int
}

How do we create a sum type — a type that can hold either one of our structs? Go doesn't have subtypes (or does it?) but it does have a feature called interfaces.

An interface describe a set of methods that a type must implement. When a type implements all the methods, we say it satisfies the interface.

The trick here is to create an interface with a single stub method (I've called it _type here, but that name is arbitrary). We then implement that stub method with an empty function for each struct type:

type Union interface {
  _type()
}

func (u Foo) _type() {}
func (u Bar) _type() {}

When we have a variable that satisfies the interface, we can switch on its underlying type:

func PrintUnion(unknown Union) {
	switch thing := unknown.(type) {
	case Foo:
		// thing has type Bar in this branch
	  fmt.Printf("%s\n", thing.One)
	case Bar:
	  // thing has type Bar in this branch
	  fmt.Printf("%d\n", thing.Two)
	}
}

This technique was mostly cribbed from this Zack Radisic blog post about sum types in Go.

Run an HTTPS reverse proxy for local development

Sat, 17 May 2025 00:40:35 GMT

Really the title should be something like "run an SSL-terminating reverse proxy", but most of the resources on the subject talk about using "HTTPS for local development", so here we are.

The standard advice is to use a tool called mkcert, which installs a root CA on your computer and issues self-signed certificates for local domains. That works, but the drawback is that your app now needs to deal with SSL termination. It's not the end of the world, but in production SSL termination probably happens at the network layer before your app receives any requests.

That's where web-server-Swiss-army-knife Caddy comes in! Rather than using HTTPS for your local development server, have Caddy handle the SSL stuff and proxy the request back to your local development, which (none the wiser) serves plain old unencrypted HTTP.

Unsurprisingly, Caddy's documentation reveals that there's one-liner to do this:

caddy reverse-proxy --to http://localhost:8080

Replace 8080 with whatever your development server's local port is. Boom: an SSL-terminating reverse proxy (or, if you prefer, "HTTPS") in local development, with no changes to your code!

Add a Git hook on Windows

Thu, 15 May 2025 08:35:36 GMT

Git Hooks are scripts that Git runs for you when certain actions occur.

At root of every repo, there's a .git directory. Inside, there's a folder called hooks that contains a bunch of files named things like pre-commit.sample. Each of those files is an example of a Git Hook. To create one for real, create a file of the same name without the extension, and Git will automatically run the script for you at the appropriate time.

At least, that's what I thought would happen when I tried adding this pre-commit hook on Windows:

npm run typecheck

When I tried to commit it, though, I kept getting this error:

'pre-commit' is not recognized as an internal or external command,
operable program or batch file.

I tried running attrib +x .git\hooks\pre-commit, changing the extension to .bat and a bunch of other things that didn't work before stumbling upon this StackOverflow answer that held the key: Git for Windows has an embedded bash shell!

The fix turned out to be just adding a hashbang to the top of the script and write it as though it were a Unix shell script:

#!/bin/sh
npm run typecheck

Create a file without an extension

Fri, 25 Apr 2025 10:20:29 GMT

I was trying to save a file without an extension from Notepad. For some reason, even if I removed the extension from the filename and selected "All files", it still saved as a .txt.

The trick turned out to be putting the file name in quotes. So for example, rather than saving the file as filename (which results in a file named filename.txt) I needed to save it as "filename" (which results in filename — removing the quotes but not adding the extension).

Add a global .gitignore

Fri, 25 Apr 2025 10:17:17 GMT

If you use git on a Mac, chances are you've accidentally committed a .DS_Store to a repo. I used to reflexively add .DS_Store to all my .gitignore files to avoid ever repeating that mistake.

But there's a better way! You can add a global .gitignore file to your global config with this command:

git config --global core.excludesFile '~/.gitignore'

The single quotes around ~/.gitignore aren't strictly necessary; if you don't use them, the ~ will just get expanded into the absolute path to your home directory.

Under the hood, that command just adds this to your ~/.gitconfig:

[core]
        excludesFile = ~/.gitignore

Update: You can now do this without modifying your ~/.gitconfig! Not sure when this was added, but the git documentation now has this bullet point:

Patterns which a user wants Git to ignore in all situations (e.g., backup or temporary files generated by the user’s editor of choice) generally go into a file specified by core.excludesFile in the user's ~/.gitconfig. Its default value is $XDG_CONFIG_HOME/git/ignore. If $XDG_CONFIG_HOME is either not set or empty, $HOME/.config/git/ignore is used instead.

Not sure what $XDG_CONFIG_HOME is, but it hasn't been set on any systems computers I've used. On macOS and other Unix-like systems, the default is $HOME/.config/git/ignore, aka ~/.config/git/ignore. On Windows, that maps to %USERPROFILE%\config\git\ignore.

Parse a Date or string into a Date

Mon, 10 Mar 2025 02:38:02 GMT

One common pattern with TypeScript projects is using a validation library like Valibot to validate incoming data at points of ingress to your application. (Intentionally or unintentionally, this is the "parse, don't validate" pattern, coined by Alexis King in her excellent blog post of the same name.)

The pattern is a little trickier when writing code that spans network boundaries.

For example, in SvelteKit, it's common to load entities from a database (on a server) and then load those same entities from API endpoints (on a client). The node-postgres database driver will turn timestamp columns into JavaScript Date objects, but those objects will get converted to JSON before being sent over the network.

So the issue is that there are two separate forms that the same entity can take. One way to solve this is by using a union validator:

import { date as vdate, string, union } from "valibot";

const date = () => union([string(), vdate()]);

That's inconvenient, though, because then the resulting type is string | Date. And it's not just a type system thing, either: it will actually be a string or Date, and doing anything with it will require either type assertions or branching.

import { date as vdate, pipe, string, transform, union } from "valibot";

const date = () =>
  pipe(
    union([string(), vdate()]),
    transform(input => typeof input === "string" ? new Date(input) : input)
  );

Basically:

Ensure the input type is either a string or a Date.
If a string, convert it to a Date.

Boom: two different "input" representations, parsed into one consistent "output" type.