#css

A CSS selector to highlight clickable elements

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:

View a demo on CodePen.


#macos

Hyper key

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.


#frontend #svelte / www.youtube.com

Rich Harris: 'Rethinking reactivity'

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.


#git #product / www.derrickreimer.com

Derrick Reimer: 'Ship small, ship fast'

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.


#webdesign / set.studio

A new website for Set Studio

Set Studio—founded by Andy Bell—has a new website.

Aside from the good looks, it’s refreshing to see a page of that size to load and feel so fast.


#svelte

My first experiment with Svelte: Shorthex

For the past few months, I’ve been experimenting with Svelte & SvelteKit. Svelte peaked my interest because it’s a tool molded by the web. A lot of Svelte APIs piggyback on existing web affordances like plain HTML and CSS variables.

Shorthex is a small app to transform 6-digit hex color codes to 3-digit codes. Here’s a quick overview of the features of Svelte I enjoyed using.

Read more


#programming / www.robinrendle.com

Robin Rendle: 'Tech Last'

Crypto, AI, JavaScript frameworks,… are interesting tech, but that doesn’t mean they need to be shoehorned into every product.

Set a direction, and choose the tools you’ll need to get there. Don’t choose a direction based on the tools in your disposal.

… by chasing trends we would never be the ones to set them.


#laravel #valet #php #nginx

PHP & NGINX logs with Laravel Valet

Putting this in a blog post because I always forget.

To view PHP logs from Laravel Valet:

open ~/.config/valet/Log/php-fpm.log

To view NGINX logs from Laravel Valet:

open ~/.config/valet/Log/nginx-error.log

#git

Scan for todos on a git branch

When I’m working on a feature or refactor, I often leave @todo comments to remain in flow and deal with other points later.

I don’t mind committing them to my feature branch, as long as I work them away before merging in.

On large branches, it can be easy to forget about that todo I left in there a few days ago.

class PodcastController
{
public function process(Podcast $podcast): void
{
$podcast->process();
 
// @todo Broadcast event to trigger webhooks
 
return $podcast;
}

Before I merge, I pipe git diff into a grep call to scan for changes that include @todo.

git --no-pager diff main..feature-branch | grep -i "^\+[^$]*@todo"
+ // @todo Broadcast event to trigger webhooks

#programming / www.swyx.io

Preemptive pluralization

This one’s permanently stored in my Pinboard — a conversation I had this morning triggered a re-read.

“A user is only part of one team”. Until we decide to add multi-team support, and the $user->team BelongsTo relation suddenly needs to be replaced in 50 places.

Golden advice from swyx:

It is a LOT easier to scale code from a cardinality of 2 to 3 than it is to refactor from a cardinality of 1 to 2.