Notes

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

Post type: share Buying Creative Time

Here’s the first one from the drafts, saved as is on 2019-06-12:

Thinking about taking one month off and not doing anything. Planned holiday work. No commitments and just fun. What will happen? I want to know.

This is a fun and interesting look back, because roughly seven months later I posted “Escaping the Virus” after which I got stuck in Thailand lockdown and only returned to Hong Kong after an unexpected sort of three months sabbatical. This break was a nice to have and allowed for a big recharge.

Now I know.

Post type: share Writing Good Alt Text

Another fun episode of HTTP 203, but I have to admit I haven't watched any in a long time…
This episode is about "How to write good alt text", which seems easier said than done. There is always something to learn there, with that simple thing called HTML 🙃
Watch and find out why context and emotions do matter.

Post type: share That Inner Doubt

When I read this, I just thought to myself: Yes, yes and yes.

To be a writer, to be successful at anything, we have to create like no one is watching, listening, or reading. We have to fight that inner voice that says don’t do the thing because we are wired to question sharing our ideas based on originality.

Read the article

Post type: share Diving into the ::before and ::after Pseudo-elements

This is a very comprehensive post by Will Boyd on the ::before and ::after pseudo-elements which covers basically everything you need to know to make use of them is a variety of scenarios.
I especially like the accessibility section at the end, which is will make a huge difference if we include this little extra in the future.

I didn’t know this yet:

div::after {
  /* screen reader says "chicken nugget" */
  content: url(chicken-nugget.png) / 'chicken nugget';
}

Besides that, the fish conversation on his homepage made my day 😁

Post type: share Work with CSS, Instead of Against It

While at first I didn't like the title “Why is CSS Frustrating?”, I finally got to read it and it covers a few good points. I think I still don’t like the title much, since it seems to establish an incorrect fact, or rather a fact for some people. You could say the same thing about other languages and things to learn, depending on your experience, preference or personal learning curve.

The final sentence though makes perfect sense, and is a general good advice, not only for learning and understanding CSS.

Work with CSS, instead of against it.

Post type: share Native Lazy-Loading as HTML Standard

Pretty nice that the proposed native lazy-loading for images or rather the loading attribute now made it into the HTML standard. A while ago Chrome started out with this idea and from now on it is also supported in Firefox Nightly. I've been using native lazy-loading for images on this site for a few weeks to try it out, and added it to a Kirby plugin for optimised images. It seems lazy-loading will stay on this site for a longer time now :)

Post type: share Progressive Enhancement as Approach and Mindset

The most common misunderstanding of progressive enhancement is that it’s inherently about JavaScript. That’s not true. You can apply progressive enhancement at every step of front-end development: HTML, CSS, and JavaScript.
[…]
Separating out the layers of your tech stack isn’t necessarily progressive enhancement. If you have some HTML that relies on JavaScript to be useful, then there’s no benefit in separating that HTML into a separate payload. The HTML that you initially send down the wire needs to be functional (at least at a basic level) before the JavaScript arrives.

This is a great article on the "approach and mindset" of progressive enhancement. I really like this phrase. After so many years of talking about progressive enhancement, it’s still being widely misunderstood. Also still not cool. While I still think that the PE approach is such a great approach—it doesn't really matter what and how you’d like to enhance—I’ve always felt there are a few reasons, why it never really caught on, or rather became widely practiced:

  1. It can be a lot of work, if e.g. you want to provide a non-JS solution for everything as a fallback;
  2. A lot of budgets aren’t big enough to cover this amount of work (or PE is not important enough…);
  3. You need to know and understand a lot of web technologies. And if you do, go back to 1.

Post type: share What A Blog Is

Today I had a little time to catch up with the growing list of unread articles in my RSS reader and came across this short post on Marc’s blog. It’s so simple and I wholeheartedly agree. The below quote is from 2006, but it well stands the test of time. It is such a great answer to what a blog is:

[…] it’s this record of who you are, your persona […]

Post type: share 02022020

Today, 02.02.2020, is a special day, because today’s date is a palindrome, which can be read forwards as well as backwards. What makes it even more special is that a date like this will occur only once this century.

This rather fun and entertaining video provides the full explanation of why, how and when such dates did and will occur again, plus a few more interesting tidbits.

Post type: share Kung Hei Fat Choi - To The Year of The Rat

A happy Chinese new year! Today is already the second day of the lunar new year and this year, it is the year of the rat. It also marks the eleventh CNY to me, which takes it almost full circle in the twelve zodiacs. Hopefully this year will be a better one, the previous ones haven't been so amazing, but I've heard that this one will be good for tigers. Usually I always get and read the Chinese horoscope for the new year, but I haven’t gotten around to get one yet. It’s always a fun read and surprisingly and without being especially superstitious, it’s often been quite right in many ways. I hope that all of you will have a great year head, wether you’re into CNY or not, yet it’s always nice to get to celebrate a second start of the year.

Post type: share Digital Gardens

This article and the idea of a “Digital Garden” also got me thinking about the way information could be presented and I like the idea of curating content for sections a bit more.

For quite some time I’ve been thinking about what to do with my Notes section, if it might be redundant or could be combined with others. The more I think about it the more I start to like the idea of one section with “Everything”, that can be filtered, e.g. by long and short reads and what other content types there might be.

Every few months things want to be changed around, but the holy grail is yet to be found ;)

What are your thoughts and ideas to make blogs more interesting? What are ideas so we can push the boundaries and do things differently, even if just for the sake of exploration? There’s still so much that could be done, yet the patterns have mostly stayed the same for many years… I’d love to hear your progressive or other thoughts on this.

Post type: share Kirby 3.3.2

I did skip the last update to 3.3.1 because I didn’t find the time, but have finally managed to update my site to the latest Kirby 3.3.2. After the rather huge update to 3.3.0, the last two releases feature more fixes and enhancements, yet it’s great to see constant improvements and additions, aka active development. It’s for sure the most fun CMS I have had my site on so far and I enjoy it a lot.

Post type: share Who Can Use - Color Contrast Check

WhoCanUse is a helpful tool to test the color contrast of different color combinations and informs you about the contrast ratio and the WCAG grading. While it might not be 100% perfectly accurate, it provides a good indication of how well the colors work for the various vision types. Interestingly enough, there are a lot of vision types that I wasn‘t aware of at all.

What is whocanuse.com?
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision.

Screenshot of the homepage of whocanuse.com displaying a color contrast example with explanations
Screenshot of the homepage of whocanuse.com

Post type: share City View

Another Hong Kong view that never gets old.

Hong Kong skyline as seen from the ferry piers
Hong Kong seen from the ferry piers during the daily light show.

Post type: share Typographic Illusions

A collection of free tools for demonstrating typographic phenomena, for anyone teaching or studying typeface design.

Screenshot of the homepage of Typographic Illusions

Typographic Illusions is a great resource and the above quote sums it up nicely. Worth a look if you’re interested in typography. Cool stuff.

Post type: share The Beautiful Side

On what has been the worst weekend for Hong Kong in 22 consecutive weeks of protests, it’s good to remember and see some of the beauty of this amazing city.

The view of Hong Kong from up on Victoria Peak
The city view from Victoria Peak never gets old
The view onto the South side from below Victoria Peak
The view of the South Side isn’t bad either
Wild boars scavenging for an extra weekend meal
Wild boars scavenging for an extra weekend meal

Moments like these leave some room to escape the current status quo and remember one of the many reasons which make this place so special. 💕

Post type: share Kirby 3.3.0-rc.2

A few days ago Kirby 3.3.0-rc.2 has been released and I‘m now giving it a spin. It‘s a long list of changes, fixes and additions containing a lot of good stuff. It feels really good to run a site on a CMS that I like, is fun building with, and that is (very) actively supported.

3.3.0 is a massive new release with more than 110 closed tickets in just one month. We added dozens of enhancements and a few really cool new features. But more importantly this release is all about fixing issues and solving day-to-day problems for you and your users.

This release fixes the initial glitches of our first RC. For the full change log of 3.3.0, please checkout the previous RC: https://github.com/getkirby/kirby/releases/tag/3.3.0-rc.1

Read the rather long rc1 changelog or that of rc2 here.

Post type: share Pixelated Population

I’m a fan of data visualisations and this campaign, resurfaced from 2008, depicts the amount of animals in a certain species by the amount of pixels used in their image. This is a great way of visualising and unfortunately some of the images put it in a rather worrysome perspective :( Yet it’s a neat and creative way to display the information. I suppose the numbers aren’t correct anymore, since it’s been 10 years, and hopefully you’d think they would have improved again by now…

Pixelated image of an Amur Tiger displayed with only 450 pixels
The pixelated image of an Amur Tiger, estimated of which about 450 remain

See all the images of the campaign

Update: According to Wikipedia there were ~562 tigers around in 2015, so maybe that’s good news for 2019 onwards.

Post type: share The Last Boat Sunset

Enjoying the last sunset and evening on the boat of my friends. Always a nice getaway within the city.

The Last Boat Sunset

Post type: share From Kirby to Twitter

For a long time I wanted to be able to post newly published articles and possibly more stuff from my site directly to Twitter. I like the idea of POSSE (Publish (on your) Own Site, Syndicate Elsewhere) and this could be a good first step to many more ideas and possibilities.

Long story short, yesterday I wanted to do something fun and started to write a Kirby plugin that would do exactly that. It didn‘t take long to get a first working version up and running. It seems to work well now, even though I‘ve only tested it on the dev site so far, and after this post I will find out if it did work. Or not.

Update: It doesn‘t work yet… and I‘ll fix it soon. Bummer :(

Post type: share Owning Your Content - A Love Letter to My Website

Having my own website says I care about what I do beyond clocking in and out and cashing a paycheck. It shows I’m proud of what I create.
[…]
But the real truth is that as long as we’re putting our work in someone else’s hands, we forfeit our ownership over it. When we create a personal website, we own it – at least to the extent that the internet, beautiful in its amorphous existence, can be owned.

I really liked this article by Tobias van Schneider about his thoughts on running your own website and why owning our content is a good idea. We've been over this a few times, but it can't be said often enough I guess. And when it's well put, it's definitely worth reading and sharing. In case you don't have your own website (yet!), maybe this article is inspiration and a possible step of convincing that it is be a good idea and worthwhile thing to do to create your little, own corner on the web.

Post type: share Great Support Makes Loyal Customers

The other day I had a connectivity issue with the macOS app of ProtonVPN. The app wouldn't stop loading after launch. I couldn't find a way to solve the issue, so I send an email to customer support. I was very surprised to quickly hear back, but that's of course a very positive surprise :) I explained the issue and while there was no immediate fix it, I was still able to connect via the network settings. The next positive surprise followed soon after, when later that day ProtonVPN released an update to their app which fixed the issue.

Screenshot of the ProtonVPN macOS app update dialog

Fast and friendly customer support like this is great. It confirms that I've made the correct choice with the chosen product. It gives me the impression that the company cares, as much about their customers as the quality of their products. Experiences like this can go a long way. It makes me, as a customer, more loyal to the brand and I'm much more likely to recommend the product or service to my friends. I might even write about it.

Post type: share HEX Color Codes Explained

I really liked this thread by Corey Ginnivan explaining the theory behind HEX color codes. I always found understanding this well can help a lot with adjusting or finding matching colors. For a long time I also wanted to write a conference talk about this topic, but hey… maybe one day. Anyways, for now this little thread is definitely worth checking out.

HEX Color Codes Explained

Post type: share Quick-Fixing macOS Audio Woes

Recently the audio on my Mac sometimes stops working for an unknown reason… It‘s been happening with video in browsers and Tweetbot. I'm not sure what it is and where it‘s coming from, but here‘s a quick fix that has worked for me.

  1. Open Terminal, type sudo killall coreaudiod
  2. Press return (⮐)
  3. Start playing audio ;)

Obviously this is not the works-all-solution, but can be a possible quick fix.

Post type: share Affecting Power Usage

An interesting article on How Web Content Can Affect Power Usage, how it works and what to do to improve it.

Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.

Screenshot of Safari‘s Web Inspector Timeline Overview Tab
Screenshot of Safari‘s Web Inspector Timeline Overview Tab from webkit.org