A collection of thoughts, ideas and everything else that doesn't need a lot of words.
A Sunny Second
Published on
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.
Hello Twenty Twentytwo!
Published on
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.
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!
The Third Web
Published on
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 tante.cc.
Bartender - A macOS Menu Bar Utility
Published on
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.
The CSS :has() pseudo-class, aka Parent Selector
Published on
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;
}
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.
Taba11y - Tab Order Chrome Extension
Published on
A nifty little Chrome extension to display the tab order on a site.
Firefox has this feature included out of the box, which can be found unter the “Accessibility” tab in the DevTools panel.
iOS 15, AirPods Pro and the Boy Who Cried Wolf
Published on
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.
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.)
The Fonts Top 1000
Published on
Another one from the drafts: Fonts of the top 1000 websites, with a few interesting stats like font-family stacks used, font sizes, sans vs. sans-serif font usage and so on.
Unregistering a Service Worker
Published on
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 😄
Understanding Color Blindness
Published on
Came across this older post via the a11y Project archives on Understanding Color Blindness and think that it is still very relevant. Always good to get a better understanding and increase knowledge.
My Custom CSS Reset
Published on
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.
The Top 10 Web Design Mistakes of 2021
Published on
Jakob Nielsen condemns 10 awful design flaws that plague today's websites, as voted by the audience at his Virtual UX Conference keynote.
This short, but good talk about web design flaws of this year (and unfortunately previous ones) is definitely worth watching.
Watch Top 10 Web-Design Mistakes of 2021 on YouTube.
Here’s Nielsen Norman Group’s website search results of the last year’s articles.
Tool Tip: Syncthing
Published on
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.
Return to Alfred
Published on
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.
Web Vitals Patterns
Published on
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.
2021 Epson International Pano Awards
Published on
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.
Deleting the Kirby Page Cache After Deploying with DeployHQ
Published on
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.
Volume Controls Reimagined
Published on
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.
OpenMoji - An open source icon library
Published on
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.
Color And Contrast
Published on
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).
The Provenance Framework
Published on
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.
Removing Empty Array Keys in PHP
Published on
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
Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading
Published on
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.
Why Web Performance Matters for Your Business
Published on
This article will help you understand how the new Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business.
Read the business impact of core web vitals
The CSS :has() Selector
Published on
“Meet :has, A Native CSS Parent Selector (And More)” is a great roundup of this new selector from the upcoming Selectors Level 4 CSS specification.