Guides
- quarters,
- halves,
- and wholes (not fullscreen mode).
- To protect the cards (kinda says so on the tin)
- To increase the sense of quality, much like component upgrades
- One million seconds ≈ 12 days
- One billion seconds ≈ 31 years
Why Smart Bulbs > Smart Switches
Some Quick Mastodon Client Reviews
A Way To Get a Fancy Link Hover Effect
Jarrod, of (the great blog) HeyDingus.net, wanted to do something about the way his links appear on his website. He asked:
Since the first design of my site, I’ve stuck with blue text for my hyperlinks because that always seemed canonical with the web. Links = blue text, blue underline. But I’ve grown less certain with its readability with all that blue text interspersed. I’m considering a change. What do y’all think?
One thing he didn’t mention there, is that he also has a nice hover effect, that changes the underline to a gradient (that matches his logo and more) on hover.
My first idea for how to solve it sacrificed the gradient — but that just wouldn’t do. But I think I found a pretty good solution in the end!
The solution and how to implement it
A Shortcut for lite-youtube-embed
YouTube embeds take up way too much on a site - so luckily someone has made lite-youtube-embed.
“Renders faster than a sneeze.”
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
First you have to include some CSS and JS on your site. 1 And then when you want to embed a video, you could just add this piece to your post/page:
<lite-youtube videoid="CItvhGl__Mk" playlabel="Play: Beatenberg - Wheelbarrow (Official Music Video)"></lite-youtube>
This will embed the video, but over 200x faster - nice!
However, you have to manually add the videoid and the video title.
And they’ve also made a variant named “Pro-usage: load w/ JS deferred (aka progressive enhancement)”, which I think is even more optimised. But then you have to add all of this:
<lite-youtube videoid="CItvhGl__Mk" params="controls=0&rel=0&enablejsapi=1" style="background-image: url('https://i.ytimg.com/vi/CItvhGl__Mk/sddefault.jpg');">
<a href="https://www.youtube.com/watch?v=CItvhGl__Mk" class="lty-playbtn" title="Play Beatenberg - Wheelbarrow (Official Music Video)">
<span class="lyt-visually-hidden">Play Video: Beatenberg - Wheelbarrow (Official Music Video)</span>
</a>
</lite-youtube>
Chromium and Nested Backdrop-Filters
If you’re like me, you sometimes get these small (often technical) problems, that you work on for so long — and you refuse to surrender.
I had this with CSS a couple of months ago:
I had a menu, that had transparency and blur, and then I also had a submenu that I wanted to have the same. But the submenu just. wouldn’t. blur!
It works perfectly in Gecko and WebKit — but after countless hours, I found the problem: If an element has a backdrop-filter, Chromium won’t let its children have it as well. 1
I had to design around it, and moved on with my life.
A few moments later…
I recently moved to Micro.blog. And one day I was scrolling down my timeline…
Then I opened the submenu:
There it was — the same bug! I’m not alone!
The fix
A Good Way to Get Home Row Mods on a Mac
(If you already know about Home Row Mods, click here to go straight to my quick method for getting it on your Mac - even on the .internal laptop keyboard)
As part of my ergonomics voyage, I’ve been working on getting home row mods on my keyboard. This excellent guide provides tons of info on this, but the short version is this:
To contort your hands less when using modifiers (like shift and control), the letter keys on your home row serves double duty: They’re the letters if you tap them, but modifiers if you hold them.
Tapping vs holding
But what’s constitutes a tap and what constitutes a hold? That’s the central question here…
🌱 How I Manage Windows
Rafael Conde, posted on Mastodon today:
We’re sharing how we use the Desktop and how we size/position windows on our Macs on our work Slack and it’s absolute madness.
And, then followed it up with a poll:
Time to fess up, how do you primarily use windows “on your” Mac? Bonus points if you reply with a screenshot 📸
⋅ Wherever the appear, I don’t know
⋅ Centered (think Apple marketing shot)
⋅ Fullscreen (as big as you can make them)
⋅ Tiled (in a grid, like taking up half the screen)
I, as many others, have strong feelings about this. And I’d love for this to become the next «Default apps»! So I’ll start.
I’m a big tiler.
I switch between my MacBooks 14 inch screen, and my Studio Display’s 27-inch screen. But no matter which I’m on, I move my apps around quite a lot, and almost always in
Here are some examples:
🌱 My Tech Setup
I’ll make separate posts for my software and bass guitar setups, but here’s my current tech hardware setup.
My Ergonomics Voyage: Part 1
Prologue, and the first steps
I’ve been a nerd my entire 34-year-long life. So naturally, much of it has been spent in front of computers using keyboards, and I’ve never experienced any discomfort related to this.1
I don’t know if it’s due to my age, or just the fact that I’ve worked even more than usual on keyboards, but lately, I’ve started to notice discomfort. Especially in my left hand, but a bit in my right as well. Luckily, there’s nothing anywhere else, and it’s not that bad. But I want to take action to try to stay ahead of it.
A bit about my current situation
The last couple of years, I’ve been working mostly in my small home office, which was OK, but not great. Just a couple of weeks ago, I finally got my own (external) office, so the situation has improved. However, I’ve been stupid, and also worked quite a bit on my laptop on our kitchen table lately.
Here’s my current office setup:
Good things about my setup
Pedal tuners and product design
Firstly, sorry about caring a bit too much about guitar tuners. You see, as a side gig, I help people with their pedalboards (especially people using multiple guitars on stage), and I often recommend that they get a new tuner. But no tuners are exactly like I want!
While this post is mostly hard core nerd out on pedal tuners, there are also some comments on product design in general. Let’s go!
Guide to card sleeves
«Why?»
Card protectors, or sleeves, are perhaps the most common accessory for games. There are two main reasons for sleeving your games:
The protection part is especially important if the cards are of high value and/or gets shuffled a lot. Both are true with most collectable card games (CCGs), like Magic The Gathering – and this is why the sizes used for these games has the best selection. Shuffling with sleeved cards feels a lot better than unsleeved, so that affects both point 1 and 2. You can also get them with matte finish, to reduce glare.
Here’s a guide to how you should proceed if you want to sleeve:
De beste partyspilla hos bokhandelen
Why 4k ≠ 5k
And what Apple means when they say «Retina»
I’m pretty sure the Apple Studio Display is overpriced. Still, the discourse after its announcement has been plagued by people not quite understanding the difference between 4k and 5k on a 27-inch display. It’s just one kay difference — why can’t you just buy a 4k screen that’s cheaper, brighter and/or has a higher refresh rate? Why do some Apple fans crave this extra kay so much??
Marc Edwards, of Bjango, wrote an excellent piece on this, and I especially like the visual examples of 4k vs. 5k on macOS. ** As a maths teacher, I find this problem interesting, and here I will bring some light to this issue the way I would to a high school class.** Perhaps this makes it easier to understand why the issues Edwards highlight appear.
What’s in a kay?
To narrow things down, I’m mostly going to look at 27-inch screens with a 16:9 aspect ratio (so no super-wides here!). Let’s compare the three most normal resolutions at this size: 1440p, 4k and 5k.
Humans are notoriously bad at comparing large numbers. Every day, there’s a new tweet trying to help us understand the difference between a million and a billion, by reminding us that:
So, it’s forgiven that people think 4k and 5k are pretty close. However, 5k resolution has _a lot _more pixels:
