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).
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.
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.
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.
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.
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 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 💯
Color And Contrast
