Notes

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

Post type: share My Custom CSS Reset

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.
* {
  line-height: calc(1em + 0.5rem);
}

The full article here.

Post type: share Tool Tip: Syncthing

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 syncthing.net
The Syncthing web interface screenshot from syncthing.net

Post type: share Return to Alfred

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.

Post type: share Web Vitals Patterns

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

Post type: share 2021 Epson International Pano Awards

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.

Have a look at some of the winners’ photographs.

Post type: share Deleting the Kirby Page Cache After Deploying with DeployHQ

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.

rm -rf /path_to_kirby_installation/site/cache/domainname.tld/pages

This way I can be sure that all updates are visible on the site right away and no outdated pages are served.

Post type: share Volume Controls Reimagined

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.

Post type: share OpenMoji - An open source icon library

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.

Visit the website of OpenMoji.

Post type: share Color And Contrast

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 how the color contrast ratio is determined, and what that means for you (and your palette).

Read the full article here

Post type: share The Provenance Framework

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 claims mean and how it can be measured.

Read about the framework or jump straight in.

Screenshot of the provenance.org website

Post type: learned Removing Empty Array Keys in PHP

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 be removed.

In its simplest form, suitable for the use case from above, the array_filter function looks like this:

$params = [];
$params = $_GET( $params );
$params = array_filter( $params );

This code will return the array with only the keys that do hold a value. There’s always something new to learn…

Learn more about array_filter in the PHP.net manual

Post type: share Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading

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 hard-coded at 1200px and 60%/55%, respectively, which works well for me so far. Mileage might vary.

For a future iteration I want to add a field for image width and quality, but for now this simple version will do.

Find the code in this Gist.

Post type: share Preload, Preconnect, Prefetch

Recently I’ve been playing around with preload and prefetch to optimise request priorities on uforepublic.com and the below snippet shall serve as a little future sneak peek for myself.

The excerpt below is from Prioritize resources on web.dev where you can find further information on these new link types and how to use them.

There are three different declarative solutions, which are all relatively new  types.

<link rel="preload"> informs the browser that a resource is needed as part of the current navigation, and that it should start getting fetched as soon as possible.
<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
<link rel="prefetch"> is somewhat different from <link rel="preload"> and <link rel="preconnect">, in that it doesn't try to make something critical happen faster; instead, it tries to make something non-critical happen earlier, if there's a chance.

Post type: share Pantone Color Hong Kong Tram Green

Such a nice story in these rather depressing times.

Recently Pantone Color Institute collaborated with HK TRAMWAYS to create a new signature green shade that pays tribute to the Hong Kong Tram and its historical and cultural significance within Hong Kong.
The Pantone Colored HK Tram - Photo Credit: HK Tramways
HK Tram Green is a vivid and verdant deep grassy green shade that celebrates the heritage and cultural significance of HK Tramways and its unique distinction as a globally recognized iconic mobile landmark.
Pantone Chip Card for Hong Kong Tram Green

The full announcement can be found on the Pantone website.

Post type: share Going First

I can‘t remember where exactly I found this article, but I’m glad I did. It’s one of the better ones I have read in a while and I really like the idea of “going first”, it’s an interesting experiment and a nice thing to incorporate into daily life. I have started to (try) do this on a daily basis, yet as always it’s not easy to make it a new habit.

“I’ll go first. If I’m at checking out at the store I’ll say hello first, if I’m coming across someone making eye-contact I’ll smile first. Not all times, but most times — it comes in your favor.” — Gabrielle Reece

Give it a read here. It’s worth it.

The effect you have on others is one of the greatest gifts you can offer in life. Don’t waste it. Go first, take a leap. After all, when you go first, more than nothing can happen.

Post type: share The Performance Impact of Browser Extensions

An interesting look into the performance impact of browser extensions. It‘s been a known fact, but nevertheless good to see some real benchmarks and extensions which cause the most issues. After reading this, I deactivated some more which I will now only activate when needed, since I don't use them frequently enough—extensions on demand if you will.

Read the full article.

Post type: share Tool Tip: Renaming Files with Name Mangler on macOS

There are some tools in my box that have stayed with me over the years and I continue to keep using. I thought it might be a good idea to share these tools and what I use them for, since some people might find it beneficial, helpful, interesting. Here is the very first of my tool tips, as they will come in no particular order.

Whether it’s large batches or only a handful of files, renaming files is often necessary or other times simply a cosmetic duty.

NameMangler is a great tool that let’s you quickly rename files in various ways. The most notable options are Grep replacements, pre- and suffixing. It also allows you to chain different commands together, which can then be dragged to rearrange. A great tool for a small price that has really helped me out many times over and over.

Check it out here: https://manytricks.com/namemangler/

Screenshot of the Name Mangler User Interface
The simple user interface of Name Mangler

As pointed out after this post by Tom, macOS does have its own rename machine, apparently since 2015… I did not know! For further info on how that works, see osxdaily.com.

Post type: share Sans Bullshit Sans

Such a fantastic, fun idea, there should be more things like this. It also is a good reflection on how bullshit jargon made it into everyday life.

The font that replaces every buzzword by a Comic Sans-styled censorship bar.

Sans Bullshit Sans.

Post type: share Personality

As promised some time ago, I will publish all the drafts, which I have not finished or published before. This unpublished post was dated February 6th, 2020, which was shortly before I left for Phuket last year. In hindsight this is an interesting note to me, because I was already thinking about the ever-present design-sameness and a more creative direction for what we do. Read the draft for yourself:

This post got me thinking a little more about what a blog is and since it’s so personal, I think a blog has to also “be” and look more personal. I’ve been thinking about this for a quite some time, mainly with so much “sameness” out there. Over the months I have been changing a few things here and there, but it should probably be much more drastic changes to better reflect personality. It’s hard to do, but I will try to improve and change it over time more and more. It’ll be fully finished in infinity.