Since this blog is a static site, I don’t have a server running to do something dynamic when I publish a new post. I was about to set up Zapier or IFTTT to auto-toot blog posts to Mastodon, until I realized I finally had a use case to give val.town a shot.

With val town you can write lambda-ish functions in a GitHub gist-ish interface. Single functions are called “vals”. The fun part is you can reference your own and other people’s vals, which creates a network of atomic actions you can stack like Lego blocks. Vals can be scheduled so you can use them as background services.

First I created a generic postToMastodon val to toot a status on Mastodon. Then I created a tootLatestPosts val that combines it with an existing @stevekrouse.newRssItems val, which fetches RSS items from a feed.

Finally, I scheduled tootLatestPosts to run every hour. Now posts from this blog automatically appear on my Mastodon profile!

I was building wireframes for a website with HTML & CSS. Since it’s a prototype, not all actions are functional. When a visitor reviewing the prototype tries to click something that isn’t hooked up, I wanted to clarify what they could interact with. This also allows visitors to click anywhere on the page to highlight what they can click.

In the past, I’ve used JavaScript to add an outline to clickable elements when something non-interactive was clicked. But with the :has and :is selectors, this is doable with plain CSS.

html:active:not(:has(a:active, button:active, label:active)) :is(a, button, label) {
outline: 2px solid blue;
}

How it works:

• html:active will match whenever you hold down your mouse on the page
• :not(:has(a:active, button:active, label:active)) will not match when you’re holding down your mouse on an a, button, or label element, to avoid the outline from appearing when the user clicks something that is functional
• :is(a, button, label) matches all a, button, and label elements on the page

View a demo on CodePen.

I started using a hyper key on macOS. A hyper key is a single key mapped to Shift + Ctrl + Opt + Cmd. Since this isn’t exactly practical to pull off with your fingers, apps don’t use this combination for built-in shortcuts. This means you have a layer for custom shortcuts without worrying about clashes.

My hyper key is mapped to Caps Lock. I actually already use caps lock as an escape key. Less travel than reaching for Esc with your pinky! Thanks to Karabiner Elements and Brett Terpstra’s guide I was able to remap it as Esc and a hyper key.

When I give Caps Lock a short tap, it functions as Esc. If I hold it and press another key, it functions as a hyper key, Shift + Ctrl + Opt + Cmd.

I still have a lot of room to map to, but for now I’m using my hyper key for a few global application shortcuts like Quick Entry in Things. In the future, I’m planning to map more Raycast commands too.

As I roam deeper into Svelte territory, I came across this talk from 2019 by Rich Harris, creator of Svelte.

Rich explains how he arrived at Svelte’s reactivity from first principles, swimming against the virtual-DOM stream other frameworks follow.

Despite being from 2019, it’s still relevant. Even if you’re not into Svelte, it’s worth watching as a great standalone talk.

Timeless advice from Derrick Reimer:

Not all projects are inherently small, but you can always break them down into smaller chunks. […]

Each incremental task brought us one step closer to a functioning v1. By shipping these tiny branches to production as we go, we became increasingly confident in the “bones” of the feature. As soon as a slice of the project was ready to test, the whole team hammered on it in production – an effective way to tease out bugs and rough spots in the user experience.