Josh Betz

Engineer, Automattician, Wisconsin Badger

CSS Dark Mode

MacOS Mojave introduced Dark Mode, which allows MacOS users to enable a darker interface. According to Apple:

In Dark Mode, the system adopts a darker color palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds.

In Safari Technology Preview 68, they’ve also added support for websites to add support for Dark Mode with a new media query:

@media (prefers-color-scheme: dark)

I’ve added support to my theme, which now looks like this in the latest Safari Technology Preview if you’ve got Dark Mode enabled:

Pi-hole

I’ve been running Pi-hole, the “black hole for Internet advertisements” for a while now. It started out as an excuse to get a Raspberry Pi, but I consider this a somewhat important security appliance now. One of the nice things about Pi-hole is, like Ghostery, it’s easy to see what’s being blocked. Unlike Ghostery, though, it works for the entire network. So things like the Xbox and smart TV are included. For example, I noticed that TCL TVs track what you’re watching even if you “Limit ad tracking”.

I also run Unbound on the Raspberry Pi, which forwards to Cloudflare and OpenDNS over an encrypted connection. The Docker configuration I use for Unbound is on Github.

Nginx Cache WordPress

There are tons of caching options for WordPress. Some of the popular plugins are Batcache, WP Super Cache, and W3 Total Cache. There are also services like Cloudflare and Fastly. On VIP Go, we use Varnish instances distributed across the world and route traffic to the nearest server over our Anycast network. I’ve used almost everything on my blog over the years, but this time I wanted to keep it simple. Since I already use Nginx for SSL termination and proxying to a Docker container, I decided it would be easiest to cache the HTML there.
The configuration is pretty basic:
  • 404s are cached for 30 seconds
  • 301s (permanent redirects) are cached for 24 hours
  • Everything else is cached for 5 minutes
Pages are only cached if they’ve been accessed 3 times to avoid filling the cache unnecessarily. If you’re logged in or have a cookie that looks like it could be valid, you bypass the cache completely to avoid caching logged in data. One of my favorite parts is that I can serve stale content if there’s a server error. So if I break the Docker container, ideally people won’t notice 🙂 The goal is to prevent my tiny Digital Ocean VM from being overwhelmed if lots of people visit at once. The short cache TTL means I don’t really need to worry about purging anything, which further simplifies this. Ultimately this is easier to maintain than any of the other things I’ve tried and just as effective. The full configuration is on Github.

Why I’m Switching Back To Firefox

Not me, I still use a combination of Safari and Chrome Canary.

Firefox greets me with a page explaining my rights as a user of open source software. Chrome greets me with… sigh… Chrome greets me with a fucking advertisement for a Chromebook.

It’s an interesting article though.

Webkit Animation Performance

Paul Irish explains when translate() is better than top/right/bottom/left. I think the most interesting part of this is how he uses the tools in Chrome to diagnose the problem.

Next Page »