Back to top

Guides

    Game Changing CSS Trick (for Noobs Like Me)

    OK, I just learned a brilliant CSS technique I wish I knew about much sooner! This is probably old news for most of you wizards out there - but maybe this little post can be useful for some fellow newbies?

    This is one of my "Noob teaching noobs" posts. Some experts are excellent teachers - but not all. Hopefully, these posts can be helpful due to their layman nature, but please contact me if I'm misinforming!


    Here are some examples of selectors I could see myself using:

    h1 {} -> Styling Header 1 (h1) elements.

    h1:hover {} -> Style when hovering h1.

    h1::after {} -> A pseudo-element (like a line) related to h1.

    h1:hover::after {} -> The pseudo-element when I hover over h1.

    h1 a {} -> A link (a) within an h1 element.

    h1 a:hover {} -> When I hover over one of those links.

    .page-content h1:hover {} -> When I hover an h1 that’s within .page-content.

    Put into context, I could do:

    Read More

    šŸŒ± Why Smart Bulbs > Smart Switches

    I really like my smart light setup ā€” and later I will write a guide on how I set it up. (I promise!) But in this post, I want to explain why I think smart light sources are a better option than smart switches (with regular light sources).

    (Click here to go to the TL;DR!)

    Some notes on costs

    Smart lights ain’t cheap. And while I will argue that I don’t think going for smart switches is that much cheaper than smart light sources ā€” my main focus is on what gives the best smart light experience. And then it’s up to each person to evaluate what feels “worth it”, or even possible, to them and their budgets.

    I also think the experience is way better if you get the consistency of having (more or less) every light in your home be smart ā€” so keep that in mind as well. I’m not arguing against those who say “Yeah, I only wanted these four lights to be smart, and then it was cheaper to go for a couple of smart switches”. What I am arguing against is those who say going for smart switches is better than smart light sources ā€” and hopefully giving some valuable insights to those who haven’t decided yet.

    Why smart lights at all, though?

    Images from Philips.

    To me, there are three main reasons (in no particular order):

    1. In my apartment, I have some light switches that are in idiotically placed. I also have several lights I wish had more than one switch. So the fact that I can easily place switches wherever I want, by just sticking a little button to the wall (or whatever), is very nice. And so is the fact that it’s trivial to have one switch control several lights, or have several switches controlling one light.
    2. I want nothing to only be controllable by my phone. But I do think it’s nice that I can use it to control my lights ā€” even when I’m not home. I also like that I can create automations, like turning off the lights when I leave.
    3. I really, really like to vary the colour temperature of my lights throughout the day.

    The two approaches to smart lights

    Read More

    šŸŒ± Some Quick Mastodon Client Reviews

    One of my favourite things about Mastodon, is that, as opposed to most other social networks, the service is completely open for other developers to make their own clients. And this has lead to a remarkable ecosystem of third-party options.

    Now the official ones, are pretty mediocre (especially the web app, IMO) ā€” but I like this prioritisation. They could’ve sacrificed precious dev time to make their own clients great ā€” but this would have to come at the expense of improving the core service. And the only thing we would gain, is “another great way to use Mastodon”.

    “How good are the default apps?” is a far less important question than “How good are the best apps for Mastodon?”. Also, what’s a good app isn’t the same for everyone ā€” so why on earth should there only be one client (like Instagram, Facebook and, now, X)?


    If you’re new (or old) to Mastodon ā€” don’t be afraid to test different clients! They can be used in complete parallel ā€” so you could just download a bunch on your phone, and log into each of them with your username. And then you could just “main” one of them for a couple of days (turning on notifications on that one, for instance), and then move to another one.

    But let’s get to the main point: Some quick reviews of some of my favourite clients!

    Read More

    A Very Good All-Round Game Controller, With One Major Flaw (for Me)

    A quick review of the 8BitDo Ultimate Bluetooth Controller

    The controller in question, in black and in its charging cradle. It’s standing in front of my Nintendo Switch, and next to an Apple TV with an Anbernic RG35XX on top.

    I mostly play boring strategy šŸ–‡ļø games that are just as good to play with a trackpad as anything else.

    But every so often, I’ll play something that’s best played with a controller. That’s usually on my Switch, where I’ve used the joy-cons with a charging grip ā€” but that’s never been great. Also, my joy-cons have started to driftā€¦

    So I wanted to buy a single controller that could fit all my use-cases, and my choice fell on the 8BitDo Ultimate Bluetooth Controller šŸ–‡ļø. And it’s a great controller, with many smart features. But did you know that a controller can support 2.4 GHz, Bluetooth, Switch, PC, Steam Deck, Android, iOS and iPadOS, but not support macOS?? Well, I didn’t.

    Read More

    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?

    Two screenshots he added, that shows links with either blue text and underline, or just blue underline.

    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.

    A GIF of the aforementioned hover effect.

    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

    The text is white and underline blue before hover. When I hover, the underline fades away, and the text fades to having the gradient on itself.

    Read More

    šŸŒ± 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>
    
    Thatā€™s a lot of manual work for each video!

    Read More

    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ā€¦

    Scrolling the timeline, with a picture of a great sunset making a nice blur below the header.
    Ooh, look at that nice blur!

    Then I opened the submenu:

    When opening the submenu, you can see that the blur effect isn't on it - so that you see way too much of the text beneath.
    MotherfĆøcker!

    There it was ā€” the same bug! Iā€™m not alone!

    The fix

    Read More

    šŸŒ± A Good Way to Get Home Row Mods on a Mac

    Lenke til norsk versjon

    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.

    Letter keys A, S, D and F, with icons for modifier keys on them.

    The home row letters on the right side is usually used as well, mirrored from the left. Image from the guide.

    Image of the ZSA Voyager split keyboard.

    Many users of this completely gets rid of the regular modifier keys. But it can be benefitial as a compliment to those as well, by reducing the amount you use them.

    Tapping vs holding

    But whatā€™s constitutes a tap and what constitutes a hold? Thatā€™s the central question hereā€¦

    Read More

    šŸŒ± How I Manage Windows

    Lenke til norsk versjon

    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

    • quarters,
    • halves,
    • and wholes (not fullscreen mode).

    Here are some examples:

    Read More

    šŸŒ± My Tech Setup

    Lenke til norsk versjon

    Iā€™ll make separate posts for my software and bass guitar setups, but hereā€™s my current tech hardware setup.

    My screen, screen light, microphone, numpad, keyboard, trackpad, wrist rests, Airpods and iPad. I have a monitor stand (but the screen is not on it).

    The overview. Details incoming!

    Read More

    My Ergonomics Voyage: Part 1

    Prologue, and the first steps

    Lenke til norsk versjon

    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:

    Apple Studio Display with height adjustable stand. iPad next to the screen. Electric standing desk. Trackpad, keyboard and numpad, with wrist rest ahead of it.

    Not visible in the photo, is my Herman Miller Aeron chair, foot rest, and standing pad.

    Good things about my setup

    Read More

    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!

    A new product series gives (false) hope

    I prefer always-on tuners that you mute elsewhere (volume pedal or otherwise), and this makes foot-switches redundant. That’s why I like the idea behind Boss TU3-S.

    Boss TU-3S. It looks like a regular Boss tuner, but with the stomp part chopped off.

    The only pedaltuner that can't be muted or turned off?

    The four tuners in the series. A large rack mounted one and three different pedal variants.

    Shiny!

    So, when I saw the new(ish) Korg X tuners, I was stoked ā€“ especially for the XS. The pedal to display size ratio is great, the switch design is cool, and I like that it’s more squared off than your typical mini pedal. This allows it to fit into odd slots on pedalboards.

    The XS tuner, which is a nice looking black (almost) square.

    Read More

    šŸŒ± Guide to card sleeves

    Lenke til norsk versjon

    Ā«Why?Ā»

    Card protectors, or sleeves, are perhaps the most common accessory for games. There are two main reasons for sleeving your games:

    1. To protect the cards (kinda says so on the tin)
    2. To increase the sense of quality, much like component upgrades

    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:

    Read More

    šŸŒ± Wallpapers for Home.app

    Lenke til norsk versjon

    Example background. Purple background and a cartoony house with trees around it.

    Here’s a remake of backgrounds from this thread that I made since the links were dead. These were inspired by u/rzalexander and made with free illustrations from illustrations.co. I’ve tried to adapt the illustrations to iOS 16’s new home app, so that the text and icons are visible.

    I’ve also made companion backgrounds for use with iPad and Mac. Since those windows resize all the time, using two tone and illustrations was a no-go. So they are just one colour backgrounds (I have one using the dark colour and one using the light one. I’ve used the latter).

    iPhone screenshots of three different rooms: Home, Bedroom and Living room.

    Mac screenshots of the same rooms.

    I've made backgrounds for 13 different rooms (3 versions for each room).

    Read More

    šŸŒ± 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:

    • One million seconds ā‰ˆ 12 days
    • One billion seconds ā‰ˆ 31 years

    So, itā€™s forgiven that people think 4k and 5k are pretty close. However, 5k resolution has _a lotĀ _more pixels:

    Chart showing the amount of pixels the different resolutions have. Numbers mentioned below.

    Read More

ā† Newer Posts