As previously mentioned, when I upgraded to Catalina, some of the things I had gotten used to to for many years, stopped working. The biggest issue seemed to be the app switcher. I’ve used LiteSwitch X for many years and I liked it because it allowed me to use alt-Tab instead of cmd-Tab to switch apps. Another nice thing about it was, that it allowed me to adjust the size and screen display position of the app switcher.
For a short while I was thinking about how to get back the alt-Tab keyboard shortcut to invoke the app switcher. I then stuck with Keyboard Maestro, but running this app simply to get back my keyboard shortcut seemed a little overkill.
I had a conversation with Anselm and Tobias about it. It didn’t take long to convince me to try to get used to the default shortcuts. In any other case, it likely would mean to relearn and adjust at some point in the future, because something might change or stop working. It’s a valid point and I agreed to try it out.
I switched to using the macOS app switcher and deleted Keyboard Maestro. In the process I also removed Alfred, which I’ve been using for a long time, too. I really like Alfred, but on the other hand, I can open apps as quickly via Spotlight. The only thing I’m missing is the handy calculator, all of the other functionality I haven’t been using anyways.
Getting used to two new keyboard shortcuts has been much easier than initially anticipated. The only thing that still bugs me is that the mouse pointer sometimes interferes with the app switcher selection, probably because I used to see the switcher at a different position to where it appears now. For everything else, I find it surprising how quickly one can adjust long-trained muscle memory to changes like this and I’m happy it didn’t take me long.
Update: As a few friends have pointed out, it is indeed possible to do calculations with Spotlight. I had tried it before, which didn‘t seem to work, but I can now confirm it does ;)
On what has been the worst weekend for Hong Kong in 22 consecutive weeks of protests, it’s good to remember and see some of the beauty of this amazing city.
The city view from Victoria Peak never gets old
The view of the South Side isn’t bad either
Wild boars scavenging for an extra weekend meal
Moments like these leave some room to escape the current status quo and remember one of the many reasons which make this place so special. 💕
Every once in a while I come across a blog post that strikes a chord. It might only take one line, but that line makes you realise or understand. It’s not you didn’t know. It’s not it’s something new, yet a whole other concept. It’s that one line that connects a dot with another. Once it happens, it’s obvious. It’s great. It’s been right there, in front of you all that time. Yet it took someone else’s words to put it a way it eventually makes sense.
Many times it’s not about the stuff we know. Not the experience. It’s about the words we choose to communicate. Our story. To explain and to share and make it click with someone. Our knowledge, our experience.
These are some good thoughts from Tim Kadlec on quotes from the Shop Talk Show podcast on the web platform and how it tries to provide us with the best foundation possible. I absolutely agree that in most cases the effort that goes into creating what we take for granted every day, mostly goes unnoticed. Yet it's a tedious process and if you think about it, it‘s an amazing outcome! (A shoutout to all those who are working hard to make things better! 💪)
Use the platform until you can’t, then augment what’s missing. And when you augment, do so with care because the responsibility of ensuring the security, accessibility, and performance that the platform tries to give you by default now falls entirely on you.
In short: Don't reinvent the wheel without reason and make progressive enhancement a friend of yours. Embrace the limitations. This way you'll be able to get a lot of the goodness out of the box and likely save yourself some hassle further down the line.
A few days ago Kirby 3.3.0-rc.2 has been released and I‘m now giving it a spin. It‘s a long list of changes, fixes and additions containing a lot of good stuff. It feels really good to run a site on a CMS that I like, is fun building with, and that is (very) actively supported.
3.3.0 is a massive new release with more than 110 closed tickets in just one month. We added dozens of enhancements and a few really cool new features. But more importantly this release is all about fixing issues and solving day-to-day problems for you and your users.
I’m a fan of data visualisations and this campaign, resurfaced from 2008, depicts the amount of animals in a certain species by the amount of pixels used in their image. This is a great way of visualising and unfortunately some of the images put it in a rather worrysome perspective :( Yet it’s a neat and creative way to display the information. I suppose the numbers aren’t correct anymore, since it’s been 10 years, and hopefully you’d think they would have improved again by now…
The pixelated image of an Amur Tiger, estimated of which about 450 remain
For a long time I wanted to be able to post newly published articles and possibly more stuff from my site directly to Twitter. I like the idea of POSSE (Publish (on your) Own Site, Syndicate Elsewhere) and this could be a good first step to many more ideas and possibilities.
Long story short, yesterday I wanted to do something fun and started to write a Kirby plugin that would do exactly that. It didn‘t take long to get a first working version up and running. It seems to work well now, even though I‘ve only tested it on the dev site so far, and after this post I will find out if it did work. Or not.
Update: It doesn‘t work yet… and I‘ll fix it soon. Bummer :(
Having my own website says I care about what I do beyond clocking in and out and cashing a paycheck. It shows I’m proud of what I create.
[…]
But the real truth is that as long as we’re putting our work in someone else’s hands, we forfeit our ownership over it. When we create a personal website, we own it – at least to the extent that the internet, beautiful in its amorphous existence, can be owned.
I really liked this article by Tobias van Schneider about his thoughts on running your own website and why owning our content is a good idea. We've been over this a few times, but it can't be said often enough I guess. And when it's well put, it's definitely worth reading and sharing. In case you don't have your own website (yet!), maybe this article is inspiration and a possible step of convincing that it is be a good idea and worthwhile thing to do to create your little, own corner on the web.
The other day I had a connectivity issue with the macOS app of ProtonVPN. The app wouldn't stop loading after launch. I couldn't find a way to solve the issue, so I send an email to customer support. I was very surprised to quickly hear back, but that's of course a very positive surprise :) I explained the issue and while there was no immediate fix it, I was still able to connect via the network settings. The next positive surprise followed soon after, when later that day ProtonVPN released an update to their app which fixed the issue.
Fast and friendly customer support like this is great. It confirms that I've made the correct choice with the chosen product. It gives me the impression that the company cares, as much about their customers as the quality of their products. Experiences like this can go a long way. It makes me, as a customer, more loyal to the brand and I'm much more likely to recommend the product or service to my friends. I might even write about it.
I really liked this thread by Corey Ginnivan explaining the theory behind HEX color codes. I always found understanding this well can help a lot with adjusting or finding matching colors. For a long time I also wanted to write a conference talk about this topic, but hey… maybe one day. Anyways, for now this little thread is definitely worth checking out.
Recently the audio on my Mac sometimes stops working for an unknown reason… It‘s been happening with video in browsers and Tweetbot. I'm not sure what it is and where it‘s coming from, but here‘s a quick fix that has worked for me.
Open Terminal, type sudo killall coreaudiod
Press return (⮐)
Start playing audio ;)
Obviously this is not the works-all-solution, but can be a possible quick fix.
Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.
Screenshot of Safari‘s Web Inspector Timeline Overview Tab from webkit.org
While working on a new section for my blog, I needed to convert a directory of images into a Kirby content file structure. I‘ve had some prior scripts from when I moved my blog from WordPress to Kirby and modified one of them to do exactly that. The below script creates a content text file and moves the source images into their repectively created subdirectory.
With this structure, the folders can be moved into a Kirby content directory and will appear as listed pages. If you prefer to create unlisted or draft pages, remove ${i}_ from the script.
The script is pretty barebones and does not account for spaces in filenames or other things. It does add the required Kirby content file as foo.txt which contains a field with the filename, but if needed you can specify the fieldname and other content as required.
#!/bin/bash
# This script iterates over every JPG or PNG file in the directory and moves it into its own directory.
# The resulting directories will be named as e.g.: 1_img_0395-1567760562
# The above directory name consists of: iterator_filename-timestamp
# The file itself will not be renamed and only moved into its repective directory
# Save this script as e.g. `createdirs.sh` in the source images directory
# Run the script with `sh createdirs.sh`
i=1;
for file in *.jpg *.png; do
dir=${file%%.*}
add=$(date "+%s")
mkdir -p "${i}_${dir}-$add"
mv "$file" "${i}_${dir}-$add"
echo "imagefilename: $file" > ${i}_${dir}-$add/foo.txt
((i++))
done
The script is provided as is and hopefully will help someone to achieve something similar. Let me know if you found it useful or have any questions, in which case I‘ll try to help
A helpful tool I came across in the latest Dense Discovery newsletter:
This handy web app allows you to easily redact parts of an image. Just drag the image into the browser and start redacting. Double-click to cycle through different styles.
Example image showing three of the different styles to redact with Redacted
After seeing a short Twitter thread about laptop stickers and what others’ laptops do look like, I remembered this fun site, collecting only that: Stickered laptop lids.
Recently I wrote about the grayscale CSS filter and how I used it for an image hover effect. While I played around with it, I noticed that the filter not only works on the image it‘s applied to, but all of its applied styles as well.
As an example, the following rule will convert the image, as well as all other properties containing a color value to grayscale:
The effect of all colors being converted does make sense, yet it was slightly unexpected when I first noticed it. So in case you want to keep the colors of your properties as intended, simply wrap the image with another element and apply the filter for the image seperately.
This week is yet another rainy and wet one in HK. There‘s been way too much of that this year. And it‘s always good to have something to do when going out is not really the amazing thing to do. Unless you love the rain. So here are some conference talk videos to get you through those rainy days.
Over the last two days, Jointfuturesconf in Helsinki has been streaming all of their talks live, for everyone to access and watch. This is an amazing effort and the video stream has worked very well. They‘ve had a great lineup and fantastic talks. If you have missed the livestream—which depending on your timezone, can easily happen—the talk videos will still be available after the conference. I‘m not going to recommend certain talks, but I definitely recommend to have a look and check it out yourself ;)
And while I‘m at it and you are into learning by watching, there are many more fantastic talks available from Beyond Tellerrand, which is my favourite one. Have a look at the past talks and save some for the rainy days!
And if that is not enough, you can find much more conference coverage including videos, tweets and photos on Colloq. Have fun and enjoy your rainy days!
I would have not expected me to say this, but today Microsoft really impressed me! I saw Microsoft’s new Accessibility Insights tool mentioned in a tweet by Marcy Sutton and did have a look. This is a great piece of work with a lot of information and help on how to make sites more accessible and most importantly, allows you to test for accessibility with information on what and how to improve your very own sites. Very cool!
Screenshot of Microsoft’s Accessibility Insights Website
The tool runs as an extension for Chrome and Microsoft Edge Insider and is also available as a Windows application ”to run accessibility testing on other Windows applications“. I gave the Chrome extension a quick whirl and it’s pretty good.
The extension has three main options, which are FastPass, Assessment and Ad hoc tools. The launchpad from where you choose your actions looks like this:
Accessibility Insight’s Launchpad
After you run FastPass the tool opens a results page with the issues it has found:
Accessibility Insight’s FastPass results page
This is only a first look at the tool and I really like what I see here. I hope this will make accessibility testing easier and—more accessible! ;) I recommend to give Accessibility Insights a try and spread the word, since this tool can help web developers make the web a little bit better, one test and improvement at a time.
This codepen is a pretty interesting technique. Not sure if this is something suitable to use in production, but a cool thought experiment and result for sure. I like it 👍🏼
I’m thinking it could be quite a nice way to create a CSS light box or something similar without the need for JS. It might not be the best technique for light boxes, since it’s probably impossible to manage focus state on the page and to make it properly accessible. Still, I think it’s a neat idea and I want to have a closer look at it. It might be good for some use case.
If you’ve sometimes wondered how sorting arrays in JavaScript works, or rather how it does not work, this is a good post from Phil Nash explaining some of the gotchas and inconsistencies.
Not quite the trend anymore, yet a client wanted to see their partner logos display in grayscale and only turn colored when hovering the logos. Well, obviously I wouldn't want to use two different images for that—it reminds me so much of the early days of Dreamweaver - MM_swapImage(), anyone? ;) Instead I used the CSS filter property to adjust the rendering of the images.
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Good thing there is the CSS filter property luckily includes a grayscale function that does exactly what I needed.
The following renders an image at a 70% grayscale value. 100% renders the image as a full grayscale image. The values can be either a percentage or a number, e.g. 0.7.
filter: grayscale(70%);
filter: grayscale(0.7);
There are a few more functions for the CSS filter property. Personally I haven’t come across many use cases where I’d need them, but some are really fun just to try out. My fun favorite is hue-rotate(<angle>) which does the following:
Applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.
The other available filters include blur, brightness, contrast, drop-shadow, hue-rotate, invert, opacity, saturate and sepia. The documention and examples can be found on MDN or the official spec for Filter Effects Module Level 1.
At the beginning of this year we launched the new site for a client, who I’ve been working with for a long time. We only had a few restrictions and that’s when projects usually are more fun and you are able to produce the good work. One of the main goals for this site was to get it as fast as possible. Good performance is good user experience.
It’s been a little while, but today I took another look at the Analytics data and was delighted by what I saw. The average page load time from the time we launched in January 2019 until today, clocks in at 1.0 second. There’s been a few hick ups here and there, but overall this is a great result and I’m very happy about it.
Google Analytics page speed screenshot, showing the results from January to August 2019 with an average page load time of 1 second
In case you have a project which you believe can benefit from performance improvements to positively impact your conversions, don’t hesitate to reach out and we can talk about the possibilities of how to speed things up for your project.
There’s a new loading attribute that allows native lazy loading in Chrome. The loading attribute is not a standard yet, but it’s being worked on and I’m really looking forward to it, I think this is a really good feature.
Besides images I noticed that it’s also possible to lazy load iframes. iframes aren’t used that much these days, but when they are, it can be helpful being able to load them only by the time the user scrolls near them, instead of loading all their associated data right away. I’m thinking Google Maps, which send quite a bit of data with their iframe maps, but I haven’t looked at or tried it yet at all.
The way to lazy-load an iframe is straight forward and just the same as you would do with images:
For some time it has been bugging me that I couldn’t add optimised images to Kirby’s textarea markdown. There’s been many times I wished that I could optimise those images to my liking.
At some point I added image resizing and optimisation to the file.create:beforehook, but that only allowed to have one size and one setting for image compression. Because of the strict limitations, I didn’t like it much and removed it again.
I wanted some more flexibility and created a little KirbyTag plugin that extends the default image KirbyTag by a few options so it does what I want. It’s been a rather quick and dirty job, but does its job. I also added support for the new loading attribute that allows for native lazy-loading of images.
The plugin supports resizing by either width, height or both, an image compression and lazy-loading. Now I can simply add images with additional preferred options directly in the markdown field:
Sticking With The Defaults
