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

Post type: share A Sunny Second

The start of the year has been a very relaxing one this year, especially convenient with the second day being a Sunday. It should always be like that! We‘re also very lucky with the weather these days, and besides the unfortunate amount of air pollution, it‘s been stunning. Today we had dim sum lunch by the beach, followed by a short walk around the bay.

Palm trees in the sunny sky
Sunset over Deep Water Bay

Post type: share Hello Twenty Twentytwo!

A happy, healthy and successful new year to all of you! ✨

The new year has finally arrived, and I want this year to be better than the previous one. The first day has been a pretty nice start.

Small bonfire burning on the terrace above a garden
The view of the best garden in Hong Kong and where we spent new years eve.

The new years hike around Lamma island has been a great start into 2022.

I want this year to be more creative, more honest, more wild, more daring, more fun, more beatiful, more challenging and more rewarding. Onwards and upwards!

Post type: share The Third Web

You are here because you are somehow interested in what the “Web3” or “NFT” thing is about. Maybe someone gave you this link, maybe you follow me somewhere. In this document I’ll try to explain what those terms mean, what ideas and politics they are based on and what I think about them. I will do my best to represent the Web3/NFT ideas as fairly as possible but for transparency’s sake I should note that I am not a fan.  

This is a good article that explains some of the Web3 concepts, how things do or don‘t work. Definitely worth reading to get a better understanding of the various parts involved, to then form–or expand on–your own opinions about the recent hype of Web3 and all that comes with it..

You can find the complete article on

Post type: share Bartender - A macOS Menu Bar Utility

Bartender is a small macOS app that‘s “giving you total control over your menu bar items, what's displayed, and when, with menu bar items only showing when you need them.

Quite a nice idea, and especially convenient when you have a lot of items in the menu bar which clash with the application menus.

One of the options is the bartender bar, to reveal and display hidden menu bar items.

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 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) {
  then( function(registrations) {
    for(let registration of registrations) {

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
The Syncthing web interface screenshot from

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

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