Notes

A collection of thoughts, ideas and everything else that doesn't need a lot of words.

Post type: share The CSS :has() pseudo-class, aka Parent Selector

Just in time for the holidays, the CSS :has() pseudo-class has arrived in the Safari technology preview 137, enabled by default. Cool beans! Everybody is pretty excited about this announcement, because it's basically been “…parent selector is not possible…” for a long time and now we‘re like “Cool, the impossible parent selector has actually arrived in CSSland!”. Who would have thought.

Personally I'm excited about :has(), which I believe will change the way I (or we?) will write CSS in the future.

/* Selects any <a> element, as long as it directly contains an <img> element */
a:has(> img) {
  border: 1px solid pink;
}
The result of the above line of CSS used on the homepage of this site (Safari TP 137)

While being able to select parent elements is a rather big deal, I‘m as much excited about the possibilities to check for certain element combinations and the different styling options thereof. I really like this example of :has() for form labels and nested/unnested input elements, a typical use case with text fields, checkboxes or radio buttons:

/* <input> element nested within the <label> */
label:has(> input) {
  …
}

/* the <label> element followed by <input> */
label:has(+ input) {
  …
}

In combination with :is() which I wrote about before, it‘ll make a nice selector team for future CSS.

It‘s been some time that something new has arrived where I thought that it will change the approach of writing CSS. Maybe the last big thing that did that were media queries in 2010? Anyways, it‘ll still be a little while until :has() will have good browser support, but implementations happen much faster these days, so let‘s see when it will become a daily tool of choice.

More information and examples on Bram.us and MDN.

CSS has pseudo-class browser support table

Post type: share iOS 15, AirPods Pro and the Boy Who Cried Wolf

Since upgrading to iOS 15 (at first running the beta, now official 15.2), I frequently receive a notification that my AirPods have been left behind at a previous location. Yet every time I see this notification, my AirPods are always near, which is mostly in my pocket, on my desk or even in my ear.
While I think this feature is a great addition to iOS–I like it a lot–and it will likely save many people from loosing their trusted pods, it’s a “dangerous” bug to be had. I usually get used to such notifications, start to ignore them, which in this particular case could eventually lead to losing them for real one day. I really do hope that this will never be the case though! Fingers crossed.

iOS lock screen showing notifications on AirPods left behind and AirPods connected at the same time
This is what the bug looks like in action, sometimes diplaying the “left behind”-notice, even though the AirPods are connected.

I’ve heard from others that this problem might occur because of low batteries of the AirPods, but that is not the case for me. So far I did not find a way to remedy the issue. Hopefully this bug will get fixed in the future, so this feature will turn into a useful and reliable helper. Until then: Don’t lose your AirPods, whatever you do!

(In case you aren’t familiar with the story of the boy who cried wolf, you can learn about it on Wikipedia.)

Post type: learned Unregistering a Service Worker

After some time, I eventually managed to unregister my service worker on this site, because I kept on running into fetch issues with Kirby’s panel API. I could not figure out what the exact issue was, so for now there won’t be any offline functionality anymore, but the panel will be working without problems for me again.

This article and this one helped me fix it, after I didn't manage to get it done at first try a few weeks ago. The final code block looks like this and went into the the footer of my site, instead of the registration of the same. The stumbling block for me was how to get to the registration of the current service worker, which navigator.serviceWorker.getRegistrations() returns. The script now unregisters the existing service worker from every visitor who had it previously installed, once they visit this site again.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().
  then( function(registrations) {
    for(let registration of registrations) {
      registration.unregister();
    }
  })
}

Sometimes it’s a good idea to put things aside when you can’t get it done and revisit them later. Most of the time, the second attempt works much better and faster for me, since in the meantime the unconscious has pretty much done all the heavy lifting 😄

Post type: share My Custom CSS Reset

A nice and simple reset for CSS defaults, which is pretty similar to the very few CSS resets I am using these days. As a personal preference I‘m not removing the margin on all elements, since I prefer to tweak it when required. Embrace the defaults!

I am now thinking to add removed margins & padding for figure and ul, since this is something that I almost always touch to restyle, so it absolutely makes for a good candidate.

For simplified line-height calculations across various elements Josh mentioned trying to use calc . It‘s a quick and simple way to get good line-height default values set. Yet in my opinion and for my own work (and depending on the typeface), I find it not specific enough and I‘d usually overwrite it for most elements either way.

In many situations it will work, so it is definitely worth trying out.

* {
  line-height: 1.5;
}
Instead of calculating the line height by multiplying the font-size with a number like 1.5, this alternative uses the font-size as a base, and adds a fixed amount of space to each line.
* {
  line-height: calc(1em + 0.5rem);
}

The full article here.

Post type: share Tool Tip: Syncthing

When Dropbox launched in 2007, it was the tool that everyone had been waiting for. Simple file and folder synchronisation between different computers made easy.

Over time and like so many others, Dropbox have added many more features, and I started to like it less and less. For a while I used to pay for the product, yet stopped at some point, mainly because I didn't need much storage space or used it as much anymore. Some privacy concerns did play into this decision, too.

Today I’m still using it, but am not paying for a subscription anymore. Space is limited and I sometimes run into storage limitations, which can sometimes be a little inconvenient. During our time working on the now defunct Colloq, Tobias introduced us to Syncthing, which we’ve used for internal file sharing. Syncthing used to be a little complicated to get up and running, but since then has improved and quick to get up and running.

Syncthing does a great job of synching files and folders with different computers, without the middle man of the “cloud”. It doesn’t serve as a “backup” solution, since it only synchronises files on different machines, without storing files in the cloud. Once a file is deleted, it will be removed from all other machines, if synchronised. This makes for a great deal of privacy, if you’re into that kinda thing ;)

Private. None of your data is ever stored anywhere else other than on your computers. There is no central server that might be compromised, legally or illegally.

For small teams or simple computer to computer file sharing, Syncthing is a great alternative to Dropbox. It comes as a free, open source, secure and simple piece of software. Its file size limitations are those of the machines that you are synchronising, not what a subscription plan allows. It does exactly what I got from Dropbox in the early days. One thing, namely synchronisation, done well.

The Syncthing web interface screenshot syncthing.net
The Syncthing web interface screenshot from syncthing.net

Post type: share Return to Alfred

Some software and tools do come and go all the time. Sometimes they return and make a second, or even third appearance in /Applications. After using Alfred.app for years, reduced down in its feature set to only opening applications, I ditched it for macOS’ built-in Spotlight search, which worked just as well.

With the upgrade to macOS Monterey, Spotlight somehow became so slow, that it’s not convenient anymore. After pressing cmd + space bar and starting to type the application name, the first result quickly shows, but disappears as quickly again. After that it takes a few seconds for the results list to show up. Most of the time, the first result is the correct one, but in cases where it’s not, it is an interruption to my workflow.

So today, I went back to using Alfred, which instantly displays a full list of results, much faster than Spotlight. Let’s see if I’ll also make use of some of the other features that come with it more often than before.

It seems that Spotlight isn’t caching anything, which I think it should. I rebuilt the Spotlight index already, which did not make any difference. If you have any pointers on how to speed it up again, please let me know.

Post type: share Web Vitals Patterns

A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. You can use the code in these examples to help ensure your projects stay on the right track.

Read the full article on web.dev

Post type: share 2021 Epson International Pano Awards

The top-scoring panoramic photos entered in the 12th Epson International Pano Awards have just been announced. The contest showcases the best work of panoramic photographers around the world.

There are some stunning photographs in there, and two of the winners are from Hong Kong, which always makes for an amazing view. It often shows another unseen side of the city, even after many years of living here.

Have a look at some of the winners’ photographs.

Post type: share Deleting the Kirby Page Cache After Deploying with DeployHQ

I deploy this site (which runs on Kirby, in case you didn't know) via DeployHQ and it has proven super helpful. I'm really happy with the setup, since I didn't want to move hosting, due to more than just one reason.

To make sure all the changes after each deploy appear on the site immediately, I run this short SSH command after each an every update to the site, which deletes the complete “pages” cache, leaving other caches, e.g. from plugins, intact.

rm -rf /path_to_kirby_installation/site/cache/domainname.tld/pages

This way I can be sure that all updates are visible on the site right away and no outdated pages are served.

Post type: share Volume Controls Reimagined

A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume control interface in the world:

This find can already be considered old, but it‘s quite entertaining and fun to see. While most of the ideas are completely useless, unusable or at least very difficult to use, I’m a big fan of the exploratory part of this thread. Breaking rules, finding and pushing the boundaries of what’s possible and exploring ideas, even if just for fun. I wish there was more of this all over the web, yet it’s refreshing to see it every once in while.

Check out the worst volume controls on Reddit or find a compilation on UX Collective.

Post type: share OpenMoji - An open source icon library

OpenMoji is a great initiative and open source project from students and professors of the HfG Schwäbisch Gmünd in Germany, that offers—as the name implies—open source emojis (I would rather call these icons, what gives…) for free use in your projects.

It's a very comprehensive collection with more than 3900 emojis, available in color or outlined, plus including areas of special interest, which can be very helpful.

The emoji style itself has to really fit your project, but I'm sure it can be super helpful for many.

Visit the website of OpenMoji.

Post type: share Color And Contrast

This is a nice and comprehensive article from Erik looking at color contrast ratios and explains how they work. Even if you don‘t care about the double contrast ticks in DevTools, it‘s worth a read. Guaranteed you‘ll learn a thing or two.

The color contrast ratios mentioned in WCAG can give you an insight in how usable your color palette is. How that works isn't very transparent. Learn more about how the color contrast ratio is determined, and what that means for you (and your palette).

Read the full article here

Post type: share The Provenance Framework

The open-source rulebook for communicating impact and avoiding greenwashing is a good resource to check against claims made by brands, which often are unclear to what e.g. fully recyclable, climate neutral, etc. actually encompass.

This rulebook helps brands make shopper-facing social and environmental impact claims with integrity. It can also help consumers to better understand what certain claims mean and how it can be measured.

Read about the framework or jump straight in.

Screenshot of the provenance.org website

Post type: learned Removing Empty Array Keys in PHP

TIL how to remove empty array keys that don't hold any value, e.g. when passing multiple query parameters in an array via GET, the array_filter function will help to clean your array.

array_filter — Filters elements of an array using a callback function […]
Iterates over each value in the array passing them to the callback function. […]
If no callback is supplied, all empty entries of array will be removed.

In its simplest form, suitable for the use case from above, the array_filter function looks like this:

$params = [];
$params = $_GET( $params );
$params = array_filter( $params );

This code will return the array with only the keys that do hold a value. There’s always something new to learn…

Learn more about array_filter in the PHP.net manual

Post type: share Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading

I’ve been running the new Kirby 3.6 alpha for a few versions now and my favorite new feature is the support for AVIF and WEBP image generation. I’m a sucker for better web performance and finally finished my small improvement to the image block. This version of the image block outputs a picture element with an AVIF, WEBP and the original format image. The width and quality parameters are currently hard-coded at 1200px and 60%/55%, respectively, which works well for me so far. Mileage might vary.

For a future iteration I want to add a field for image width and quality, but for now this simple version will do.

Find the code in this Gist.

Post type: share Preload, Preconnect, Prefetch

Recently I’ve been playing around with preload and prefetch to optimise request priorities on uforepublic.com and the below snippet shall serve as a little future sneak peek for myself.

The excerpt below is from Prioritize resources on web.dev where you can find further information on these new link types and how to use them.

There are three different declarative solutions, which are all relatively new  types.

<link rel="preload"> informs the browser that a resource is needed as part of the current navigation, and that it should start getting fetched as soon as possible.
<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
<link rel="prefetch"> is somewhat different from <link rel="preload"> and <link rel="preconnect">, in that it doesn't try to make something critical happen faster; instead, it tries to make something non-critical happen earlier, if there's a chance.

Post type: share Pantone Color Hong Kong Tram Green

Such a nice story in these rather depressing times.

Recently Pantone Color Institute collaborated with HK TRAMWAYS to create a new signature green shade that pays tribute to the Hong Kong Tram and its historical and cultural significance within Hong Kong.
The Pantone Colored HK Tram - Photo Credit: HK Tramways
HK Tram Green is a vivid and verdant deep grassy green shade that celebrates the heritage and cultural significance of HK Tramways and its unique distinction as a globally recognized iconic mobile landmark.
Pantone Chip Card for Hong Kong Tram Green

The full announcement can be found on the Pantone website.

Post type: share Going First

I can‘t remember where exactly I found this article, but I’m glad I did. It’s one of the better ones I have read in a while and I really like the idea of “going first”, it’s an interesting experiment and a nice thing to incorporate into daily life. I have started to (try) do this on a daily basis, yet as always it’s not easy to make it a new habit.

“I’ll go first. If I’m at checking out at the store I’ll say hello first, if I’m coming across someone making eye-contact I’ll smile first. Not all times, but most times — it comes in your favor.” — Gabrielle Reece

Give it a read here. It’s worth it.

The effect you have on others is one of the greatest gifts you can offer in life. Don’t waste it. Go first, take a leap. After all, when you go first, more than nothing can happen.

Post type: share The Performance Impact of Browser Extensions

An interesting look into the performance impact of browser extensions. It‘s been a known fact, but nevertheless good to see some real benchmarks and extensions which cause the most issues. After reading this, I deactivated some more which I will now only activate when needed, since I don't use them frequently enough—extensions on demand if you will.

Read the full article.