Notes

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

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.

Post type: share Kirby 3.5.6

I eventually got around to update this site to Kirby 3.5.6. Not a huge update, but I like what came in the previous version 3.5.5. It allow setting the page cache expiry right from your controllers, which is quite a nice, new feature. Of course both versions came with fixes and other improvements.

Post type: Note All You Need to Know About Image Optimisation

Well, the title really says it all. “Image Optimization" by Addy Osmani is a powerhouse of a book, packed with 700 and then some pages of knowledge that can take years to learn. This book is a great resource to get up to speed with image optimisation, image formats new and old, progressive rendering techniques, responsive images, lazy-loading and anything else that comes to mind when thinking of images on the web.

An inside spread of the book with an illustration of a monster with a small person facing the reader with its back on the left page, below the text 'Combat Bloat'. The right page is a simple, black and white text page

Personally I really dig the Blue and the lovely illustrations throughout. Find more details or even buy it! on the Smashing Magazine website.

Post type: share Kirby 3.5.4

Today I finally found the time to give this site a little love and updated to the latest version Kirby 3.5.4. This release is a security release, which luckily doesn't happen so often, but deserves to be installed for sure. I‘m posting this to mainly remind myself to write more again.

Post type: share Tweetbot Synch Issues

For the simple fact that this might help someone fix their issue, because I could not find anything current on the web this time: Simply turning iCloud off and on again in the iCloud settings on iOS fixed the Tweetbot synchronisation issue between macOS and iOS for me. Cheers and have a good day! ☀️

Post type: share How to Favicon in 2021

I’m a fan of simplicity and welcome ideas that decrease complexity instead of the other way around. Pretty sure we’ve all been in the situation of not knowing which icons to add when. Here’s the guide to “How to Favicon in 2021: Six files that fit most needs”. Enjoy!

Post type: share Geldingadalur Volcano Live Feed

I've been looking at this a few times over the last few days and the eruptions and the flow of lava are simply beautiful and fascinating.

A webcam is now broadcasting live from Fagradalsfjall, facing Geldingadalur, where a fissure eruption began last night.

Watch here.

Geldingadalur Volcano Live Feed
The view on the volcano at early sunrise

Post type: share Adventures in Typography

I really like the idea of this newsletter, "Adventures in Typography" by Robin Rendle. Anyone interested to learn things about, with and around typography should have a closer look.

A weekly love letter to the written word by Robin Rendle. Topics include: calligraphy, lettering, display type, micro type, books about fonts, type specimens, neon lights, posters, morse code, stamps, literature, web design, and books about seeds.

Have a look at the archives or sign up here.

Post type: share Coding Fonts

Every once in a while I do like to change my coding font, just to get a bit of a feeling of "new" into daily routines. Usually this happens when I come across a new typeface that I like, try it out and like right away.

Screenshot of Coding Fonts showing ont list and code preview of a font

Coding Fonts on CSS-Tricks and is a good resource with font choices, so we don't have to wait to come across a new find to change.

Post type: share The Webmentions Are Back

I finally found the time to update @sebastiangreger’s webmentions for Kirby 3. It’s been a pretty smooth process, including the migration, and it seems that everything works…

Post type: Note Captain Edward Font

This must be the fastest purchase of a font (or almost anything to be honest) that I‘ve ever made in quite some time. It looks beautiful and it fits perfectly to what we are currently working on (suspense… I know…), hence it’s been an absolute no-brainer to buy it.

Captain Edward is an all-caps display serif inspired by Cooper Black’s lighter-weight siblings & the pirates that terrorized the Atlantic. Includes letters, numbers, basic punctuation & a few swash-y alternates.

Captain Edward Font

Besides the beautiful font part, I like how Dan approaches the license agreement for his fonts. This is the kind of business I want to do business with:

Super Simple License Agreement

  • Don’t distribute the font
  • Don’t modify and then distribute the font
  • Don’t be a jerk
  • Purchase the appropriate license
  • Be kind and wash your hands

I’m already looking forward to present how this font will see its day of light, captain!

Have a closer look at pirates and your license here.

Post type: share Design Horoscopes

This is the best thing I have seen in a while, it made me laugh so hard. While this example might be on the other side of the extremes when it comes to what's possible with and on the web, I would love to see more of such things. Especially in times like these, it would be good to make more people laugh, be entertained or kept busy creating. Absolutely 💯

Enjoy a laugh with Pablito Planeta, Design Astrologist.

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: learned Clearing a classList (with the JavaScript Spread Operator)

Previously I have mostly used toggling, adding oder removing classNames from a classList with JavaScript. As these names suggest, they work with classList.toggle('className'), classList.add('className') and classList.remove('className'). For a recent project, I wanted to empty the complete classList of all its className tokens, which made me wonder what the best way to do so would be.

Just like the ways to Rome, there are multiple ways to remove all of your classNames in a class attribute, which all yield the same result. Let's have a look at the possibilities:

First, it is possible to toggle a className, which removes the className if it exists and otherwise adds ist to the classList. Yet this didn’t solve my problem.

element.classList.toggle('is-hidden');

One simple way to completely remove all tokens is to set the class attribute with setAttribute to an empty string, like so:

element.setAttribute('class', '')

Another option is to iterate over all the classNames in the classList and remove the first className as long as classNames can be found. By looking at the following code, I’m not sure why I would pick this, just for the amount of code required. Yet it works absolutely fine.

var classList = element.classList;
while (classList.length > 0) {
   classList.remove(classList.item(0));
}

What I didn’t know is that with ES6, the spread operator (which consists of three periods) offers another simple way to clear a classList. The spread operator description says: “Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.“ This is exactly what was needed in this case.

For my classList example with the spread operator, the syntax also is a one-liner, as compact as the first example above:

element.classList.remove(...element.classList);

From a quick search on the performance difference between setAttribute and using the , it seems that the latter is slightly slower, but performance is not an issue for what I’m using it for.

I hope this has been helpful and thanks for reading this far. The documentation lists lots of other helpful cases for use of the spread operator, it’s worth checking out.

Update:
Thanks to Šime Vidas via Twitter here‘s the probably simplest one-liner that again does the same thing:

element.className = ''

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: Note And That Was That

Some things have to end and this time, after more than three years, it is Colloq.io that we are shutting down at the end of March 2021. It’s quite sad, but at this time the sensible thing to do. It’s been a fun ride, I learned a lot, we build some great things. We had our “ethical shit” together and went privacy-protect-crazy, yet unfortunately, it needed more than that (or maybe less?), and in the end we didn’t make it work out.

But hey, as they say: If one door closes, another one opens. Or in this case, re-opens. Here’s a small sneak peek of what I’m currently working on.

Post type: Note Return

It's been exactly one year to this day that I posted “Escaping the Virus”, which in hindsight makes an interesting read and perspective, because we had no idea what was yet to come…

A lot of things happened during that last year and the situation somehow resulted in me taking a big break from blogging and social medias of all kinds. I didn’t miss it much, but it’s a good time to return now and show this site some love again.