This is a neat site that offers open source alternatives to a lot of proprietary SaaS tools. I just tried it out; as I’m in the rather slow (and non-urgent) process of finding a new password manager and indeed, it did show a few options that I haven’t heard of yet. Definitely worth trying out if you are looking for alternative tools to replace some of what you are using. Via the fantastic Dense Discovery newsletter.
February, 2nd, 2022. A special day. A palindrome day. All twos. I couldn’t pass up on the opportunity to write a short post on this special date. Kinda fun. It’s also a good opportunity to start to write again, as in the last few weeks all my good intentions of writing more frequently went quickly down the drain.
After months of fairly little work load, it suddenly got super busy, as it always happens. This is a good problem to have. Yet, for as long as I can think, it’s always either one of the two: super quiet or really busy. Some time in the future I will need to work on better planning, or rather on keeping the planning as it was supposed to work. This time the main issue is a project, where at first everything stalled, then it needs to get finished soon, as it’s not helping the rest of my timeline. Stuff like this happens once in a while and maybe it needs to be that way.
Blogging frequently is so much harder than one would think and here’s a Tiny Thought from FS that touches exactly on this topic.
In other news, Hong Kong is currently experiencing what the rest of the world has seen a year or more ago and we’re in sort of a (soft) lockdown, which today has been extended until mid to end of April. As we all know, it’s not much fun. At least it allows me to get a lot of work done, with little to no major distractions. This too shall pass and we’ll see what’s next.
With all the worrying and unpleasant things going on in the world right now, I want to end with this quote:
We have to be willing to confront the world as it is, not as we want it to be if we’re going to be successful.
Developers and Open Source authors now have a massive amount of services offering free tiers, but it can be hard to find them all to make informed decisions.
A great resource for developers to find and compare as-a-service software of all kinds that include free tiers. It’s a massively long list of things, and it’s pretty incredible that we have all these affordable/free things at our hands nowadays.
Unlike many parts of CSS, Flexible box layout or Flexbox can be difficult to understand just by using it. It wasn't until this most recent update of CSS Master that I even sort of grokked it.1 I hope to untangle its mysteries in this post.
The super-comprehensive explainer of how flexbox works. Likely lots to learn.
I read a fair bit of blogs via RSS, for which I’m using News Explorer on macOS and iOS.
When swiping through the articles or looking at the list of blogs in its sidebar, sometimes it’s difficult to know the author/source of an article, because it has an ~arbitrary~ non-specific RSS page title. As an example, a title of “RSS feed of all posts” unfortunately doesn’t say much at all and could pretty much be every blog out there (with an RSS feed!).
I (and probably everyone else?) prefer when your name, the name of the blog or its URL are included in the <title> of the XML document. Most of the time, this should be the template default, but I sometimes come across a few, where it constantly confuses me, that I can’t at a glance make out at who it’s from what I’m reading. Especially when I like it ;)
Like most of what’s ruined the internet, NFTs started as a good idea. When the concept was demoed in 2014, it was presented as a way for digital artists to easily sell and control their work. But the market has been flooded by grifters who exploit artists, or who just sell NFTs of an artist’s work without telling them.
As with all of the articles about Web3, NFTs, crypto et al, this one is opinionated as well, but it is a) very fun and entertaining to read and b) IMO does have some good points. I have a lot of thoughts on the whole new Web3 thingy, but currently just don‘t want to find the time to write about it. This year shall be about more positivity, so enjoy this fun read for now, with the bickering saved for later.
I‘m actually linking to a humor site, and I swear I haven‘t been on one of those in years. I haven‘t missed them either. 2022, here we come! 🙃
When doing accessibility audits (or even daily web use), too often I come across sites that are missing focus styles. When navigating via keyboard, it can be difficult to see which element you are currently on and hence, lose sight of where you are on a page.
To quickly find the currently focused element, we can use the activeElement read-only property of the Document interface. Despite its rather confusing name, it does return the focused element.
To use it, open the DevTools Console (cmd + i, then ESC, or click the Console tab) and type the following, short command:
document.activeElement;
This will give you an instant preview of the focused element name. Press Enter and Console will expand the output and return the currently focused element, including its content. You can then hover the Console output to see the highlighted element in the browser window.
The next time you are styling focusable elements, aka links, buttons or form fields, it‘s a great idea to take the extra time to add visible :focus styles. It can also look great and will show the care of your craft. It will make navigating pages more usable and enjoyable, especially when relying on visible focus styles for navigation.
Update:
As pointed out by Manuel Matuzo on Twitter, it‘s possible to tie document.activeElement to Chrome DevTools Live Expressions, which allows you to log the current element automatically when changed. Makes a lot of sense when you think about, but I was not aware that this feature exists. Since Chrome 70. Very helpful indeed.
To start using Live Expressions, click the eye button (outlined below) under the Console tab, type your expression and start focus tabbing away.
The button to enable Live Expressions in Chrome DevTools under the Console tab
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.
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 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!
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..
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.
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.
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.
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.)
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.
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.
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.
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 from syncthing.net
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.
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.
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.
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.
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 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.
Open Source Alternatives
