This week the next major release of Kirby, Version 4 saw the light of day.
A while back I came across a post on Mastodon that mentioned the beta version of Kirby 4 being very stable already. I gave it a shot and started using it. I dint’t run into any issues and have gotten used to the new panel design so quickly, I really like it. There are lots of other improvements and Kirby just keeps on getting better and better. Huge congratulations to the team for taking Kirby to the next level.
Have a look at what’s new or treat yourself to a new license with their current promotion. I’m looking forward to easily upgrade existing projects to enjoy the new interface. Onwards and upwards!
This coming Thursday Bastian willl also talk with Marc about Kirby 4 on the Stay Curious “Kirby release podcast” issue.
Today on this glorious early winter day, a note showed up in my calendar. A little reminder on how quickly time flies, when you’re having fun. Or at least when one has a lot of things going on. The real reason for that calendar note was to remind me to write something on this site. As I don’t want to be called out on it, I take this as a good reason to start today. This site needs a little dusting, but I’m kinda looking forward to write again. But hey, now I did write something! :)
SVG Repo is a collection of 500.000+ Open-licensed SVG Vector and Icons, free to download for commercial use. Usually I'm not a huge fan of such libraries, as we mostly create our own to match a certain illustration style and appearance, yet in some cases it can be a useful tool.
Overview of some of the icons available on SVGrepo.com, organised by style and category
On the never-ending quest to better writing, I came across The Punctuation Guide, which nicely explains when to use what punctuation—including a small section on the differences between American and British punctuation. I really like the simple, yet effective style of this mini-site; onwards to better writing!
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.
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?
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.
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.
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:
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.
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.
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.
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.
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.
Another one of those posts that have been getting comfortable in the Drafts… After Manuel mentioned it in this talk at BTConf yesterday, it’s a good time to eventually publish it.
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"“
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".
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! :)
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.
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:
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.
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:
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
Kirby 4
