Notes

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

Post type: Note Tiny Helpers - Free, Single-Purpose Tools

Tiny Helpers is exactly what it says on the tin.

A collection of free single-purpose online tools for web developers

started and curated by Stefan Judis plus many of other people from the community. It’s a lovely project and it indeed lists lots of useful tools from A as in Accessibility to V as in Videos.

Worth checking out, or submit your own favorite tools to the pot.

Post type: Note Bionic Reading

I came across Bionic Reading on Twitter and their reading mode in the below example makes reading of the text block incredibly easier and a lot faster. The wonders of how our brains work. Bionic Reading offers an API to convert texts, and I’m thinking if it would be a good idea to add this to pages with longer texts. It could either work as a plugin (in my case for Kirby) or an on-page toggle, so users can opt-out in case they perfer otherwise. The latter would probably be the better idea. I’d be interested to hear what other people think about it?

Two blocks of text next to each other, one with normal text and one with bionic reading styles applied

Post type: Note Predatory Community

Quite a read on the NFT crypto space.

A man sits at his computer and types out the story he has fabricated for the Fame Lady Squad NFT project: “we wanted to create an image of a strong and independent woman of the NFT community.” The project draws in $1.5 million from buyers, who talk of their excitement when they found a project they felt was bringing diversity to an overwhelmingly male space, and that was “all about women’s empowerment”. They later find out that the “all-female led project” created by “Cindy”, “Kelda”, and “Andrea” was in fact created by a group of three white men.

The above and more in the full article.

Post type: Note Priority Hints

Priority Hints. What they are, how to implement them, plus a comparison of methods for loading and managing priorities of your assets. Currently these are only supported in Google Chrome, released with stable 101. Yet interesting to keep an eye on.

Post type: Note CSS Contextual Spacing

In Contextual Spacing For Intrinsic Web Design Stephanie Eckles talks about properties and functions for intrinsic design, which allow you to do some really nice things. You can get rid of using some of your media queries. There are quite a few examples of new properties and functions that, when used properly, will make your code a little prettier, a little more modern and a little more fun, because new ;) One of my favorite examples in this article is the following code, which basically can serve as your new version for a centered container (wrapper) class, spacing included:

.container {
  width: min(100vw - 3rem, 80ch);
  margin-inline: auto;
}

Below you can find the slightly more advanced rule which uses a CSS custom property with the 80ch value from above as the fallback, in case custom properties are not supported. Pretty neat.

.container {
  width: min(100vw - 3rem, var(--container-max, 80ch) );
  margin-inline: auto;
}

So far I haven't worked much with clamp() and friends yet, but this definitely is something to pack into the toolbox for 2022. I usually don't mind writing media queries, but I’m always game to reduce some of the code required, even if only for convenience. Worth a look at.

Post type: Note Reluctant to New Things

This thought has been triggered by On Design Thinking, an article with great points on where good design for the web has gone.

It [Design Thinking] sold out Design in an attempt to impress those in power, and in so doing lost its heart.

One thing I notice frequently is that a lot of clients are reluctant to be open and sign off on new, creative ideas, or unconventional ways of designing. There are many ways of how we can design and build things for the web, yet people want to stick with what they know. The things everyone uses for their site. Hamburger menus. Carousels. Modals. Many others. The things that have been confirmed as “working well” by the mass market. They offer security, the safety net of “so many people can’t be wrong”. This is an unfortunate fact, because there are lots of ways how things on the web could be better and less boring. Unfortunately the majority often isn’t right, they go with what they can find, out on the cheap and free design template market. As a result, the opinions on what’s best practice get skewed. Just because one solution works for one, doesn’t mean it will work as well for another.

Post type: Note Ahead of The Curve

As developers (who are constantly learning and “operating” in the bubble) we are so far ahead of the curve. One of many such examples is that recently a friend told me about dark mode and how it apparently is the latest trend. When we built Colloq some time ago, we implemented dark mode, which back then was pretty much hot off the press and we wanted to try it out. There are many more of such examples. Showed me again how far ahead of the mainstream curve we are. This is likely the reason that often (most of the time??) it can difficult to explain to people, clients, friends what’s going on in our, or particularly in my head in regards to the web. The knowledge gap exists and it can only be bridged with good communication skills.

Post type: Note Better Writing - Wrong Side of Write

I’m always interested in resources to improve writing. This one is particularly good, and it has lots of useful tips which are written in a fun way. I recommend subscribing to the RSS feed.

Visit Wrong Side of Write and learn some cool things for better writing.

Post type: Note … when you're invisible - Webrocker

Yesterday I have remotely “attended” the second day of Beyond Tellerrand Conference and it’s been fun. Obviously I would have preferred to attend in person, as this was the first edition in two years, but for many reasons, I can’t complain.

Manuel Matuzović’s “Lost in Translation” has been absolutely great and was packed with great insights and a lot of hard truths. I’m glad I caught it.

Tom wrote down a few of his thoughts on this talk. These indeed are questions that have been on my mind for a long time, too.

I don't want to spoil too much, but one of the reasons he sees is the gap between "Design" and "Development", to put it simply.
"(visual) design" -> understanding what structure this implies -> translating this into the correct HTML -> "development"“

I recommend to give “… when you're invisible” a read.

Post type: Note 103 Bits of Advice I Wish I Had Known

This is a really great read, of which a lot and then some, resonated with me so much. Many people are scared of getting older, but it’s actually not that bad, because in the process, we’re gaining more and more experience. Whether that’s professional or general life experience, I personally like it a lot.

This article with 103 bits of advice is a great read and it has many nuggets in it that I would like to incorporate into my life, if I’m not trying to do that thing already.

Another one that I would like to add to the list, which has been proven well is the concept of "going first".

Read and see for yourself: 103 Bits of Advice I Wish I Had Known

Post type: Note A Note on Notes

A while ago, I had added a new TIL section to this site, which later turned into TILRS (today I learned, remember, share). I liked it a lot, and I posted all kinds of things in this section. Yet this led to the Notes section becoming more and more neglected and quite often I had difficulties to decide which post should go where. It’s been bugging me for too long and as a result, it had to be changed. I also got a bit bored with my site and this change shall be the starting point of more to come.

I have now removed the TILRS section and from today onwards, all posts will be published under Notes, unless the post is a long-form Article. For the notes I'm planning that those can be many types, whether a single picture, gallery, a quote or short text, opinion, etc.

note /nəʊt/

1. a brief record of points or ideas written down as an aid to memory.

Eventually I would like to display all these different records in a different format and design, so things will get a bit more interesting.

All of the old /tilrs URLs did get a redirect to their new location under Notes, so none of the old links will break. By now my .htaccess file looks like a huge redirection list, carrying the redirects from various changes including the move from WordPress to Kirby from back in the days. No problem.

The /tilrs feed has also been redirected and for now, /stream/feed and /feed will be the combined feeds and they are announced on all pages. Subscribe to the feed, for some better reading and to not miss any future posts! :)

Post type: share Open Source Alternatives

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.

Visit opensourcealternative.to

Post type: share 2222222

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.
Barry McCarthy​

Post type: share Free for Developers

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.

Visit Free-for-Dev.

Post type: learned Better Text Decoration With CSS’ text-underline-offset

I recently came across the text-underline-offset CSS property and I’m really surprised that I wasn’t aware that this fairly new property existed. There have been many times in the past where I wanted some more spacing between the characters and the underline and in many cases, I would then fall back on border-bottom in combination with a little bottom padding.

I have been putting this newly found, little helper into good use a few times recently, and it feels like a great improvement. Not only does it improve the visual look, but I find that it makes the underlined word, which is mostly a link, much more legible.

This is how text-underline-offset looks like in action:

.example1 {
  text-decoration: underline;
  text-underline-offset: auto;
}

.example2 {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.example3 {
  text-decoration: underline;
  text-decoration-thickness: 0.25em;
  text-decoration-color: darkseagreen;
  text-underline-offset: 0.125em;
}

Ex 1: The fairy loved to dance on top of underlined letters

Ex 2: Other times it was possible to crawl between the offset

Ex 3: A solid underline made sure she would never fall and disappear

I’m not aware of any special guidance of text-underline-offset in terms of accessibility, but it serves as a nice addition to make text links a little more legible and easier on the eye, at least for some font choices, especially at small font sizes. Other than that, it also allows for some nice, creative possibilities to make things look a little more interesting.

Post type: learned Starship Prompt - Displaying the GIT Branch in Terminal

Ever since Apple released macOS Catalina in 2019 and changed the default shell to zsh across its operating system, I’ve been meaning to follow this move and change my default shell from the good old bash to zsh.

With my current setup, I used a few lines from this profile to display the current git branch with the prompt. I never took the time to do some research and look into the topic, because all things shell is clearly not my comfort zone. Hence I also never found out how easy it could have been to get the same setup with zsh as I had all that time.

It seems that showing the git branch in Terminal is quite a common thing to do nowadays. I asked on Twitter and got some helpful pointers, and off I went into shell land.

I looked at Starship prompt, which works cross-shell, and with that I’m now running zsh as my default shell, inclusive of displaying the current git branch. Starship has a lot of options for configuration and you can easily pick the ones you need and like. It has a good documentation that without much time required, allowed me to add the options I wanted. After all, this wasn’t as scary or difficult as initially assumed.

I’ve switched my prompt to starship a few years ago and have found that largely eliminated any motivation to switch to zsh lol

That said, I’ve been doing fine with bash all those years and don’t use the shell to an extend that I’d notice all the advantages, but at least I got rid of the constant reminder of the new default shell and it feels like I’m up to date again.

I also found two more links that do the same without any additional tools, in case this is your cup of tea:

- Simplest ZSH Prompt Configs for Git Branch Name
- Add Git Branch Name to Terminal Prompt (MacOS Catalina zsh)

Post type: share How Flexbox Works

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.

Post type: share Better RSS Titles

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

Post type: share Good Read: NFTs are so, so dumb

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

Read the full piece on NFTs Are So, So Dumb. Enjoy!

Post type: share Finding the Currently Focused Element

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.

DevTools Console Live Expressions
The button to enable Live Expressions in Chrome DevTools under the Console tab

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

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.

https://www.macbartender.com

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