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.
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.
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
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.
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
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
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.