All Notes from foobartel.com
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…
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…
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!
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.
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…
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,…
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,…
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…
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…
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.
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. The WebAIM Million is an accessibility analysis of the top 1,000,000 home pages and provides insights into various accessibility issues, from headings , images and alternative text , low contrast text , ARIA use and…
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…
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…
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…
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…
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…
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…
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,…
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…
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…
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…
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…
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…
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…
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…
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.…
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. Taba11y in action
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…
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.
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…
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…
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 .
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…
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…
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. Read the full article on web.dev
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…
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”…
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.…
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…
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…
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…
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…
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…
It’s a Sunday today. It was the first day in a week where the weather has been pleasant and we’ve seen a little sun. Today is the last day of our 7-day quarantine after we got back into Hong Kong. The government required staycation has not been too bad, the food was alright and the room served us well. The open view made quite a difference and was very enjoyable, since theses something we don’t…
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