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.
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.
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
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.
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.
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.
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.
> These are the five most annoying inaccessible web elements I face as a blind screen reader user every day, and how to fix them.
This post helps to understand why accessibility is important and how the choices we as designers, developers and website owners make, can improve or break someone's experience on the web.
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.
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.
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.
Personally I really dig the Blue and the lovely illustrations throughout. Find more details or even buy it! on the Smashing Magazine website.
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.
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! ☀️
A great overview of what you need to know when building accessible front end components, pitfalls and what to look out for.
Read it on Smashing Magazine.
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!
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.
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.
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.
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…
Just what it says on the tin: "Beautiful image placeholders, without the hassle."
This is a great tool to create your image (gradient) placeholders in a variety of ways, including CSS, SVG and a few others. It's also now available as an NPM module as blurhash-to-css to automate in your build process.
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.
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!
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 💯
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.
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.
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.
Preload, Preconnect, Prefetch
