WDRL — Edition 288: Back again with Kirby 3 and some fresh content for you

Celý článek

Hey,

it’s been a long while and I’ll start with a big sorry to all my loyal readers over the past years. I’ve neglected this project since January this year and just now found enough time to bring it back to life. Why to life? Because I broke my setup in January and then went the bigger upgrade path and had to update and partially refactor my entire custom software for the newsletter. I’m now using Kirby 3 (previously v2) for the project together with my browser web extension to save links into my draft editions. I also switched to use TailwindCSS to understand the concept a bit better and have to say it definitely is worth it. It’s probably not the most suitable solution for this kind of project but for bigger projects in a team with many devs or if a website has to be built on a budget it’s a great option.

I’m busy with my market garden business growing lots of food which works fine despite weather surprises us here again with colder than usual temperatures and lots of rain over the past weeks. But we now serve over 40 customers, which means we give food to around 80 – 100 people every week during growing period. This is an awesome feeling!

In parallel I spend a lot of time seeing my son grow up, playing with him. When there’s enough time I work on small website projects and try to organize an event about soil and climate action in summer here in Germany. Let’s see if it’s possible to make this event real.

The political and social situation we’re currently in continues to baffle me and surprise me. Mostly not in a positive way though which means I’m spending more time reflecting on my thoughts and news, meditating for my mind and to stay sane and calm. I stuggle to accept that so many people have hardline-thoughts in a specific direction, I don’t even care so much in which one. But I think we’re still individuals and every single person should be able to think on their own and decide on their own (thinking as a social, empathic being).

News

• Safari 14.1 is an interesting one because it’s a minor update but brings great joy for us developers: Flexbox gap support, Date & Time Inputs on macOS (woohoo!), WebM support to name the big ones.

Generic

• Una Kravets recaps the new complexity of building modern responsive designs for the web. But there’s a new player called Container Queries in the house which makes many things for us developers easier to work with a component driven system.

Web Performance

• Silvestar Bistrović shares useful tools for auditing CSS.
• Barry Pollard explains how Core Web Vitals work and what we should do as developers to get a better score by Google.

HTML & SVG

• Amber Wilson shares the love story of HTML input fields and labels. A good reminder or starter to understand how these two play well together.
• Adrian Roselli shows us how to easily configure <select> elements to look custom instead of choosing a library that does get accessibility or usability wrong.
• Kitty Giraudel shares how to build a navigation. Sounds boring? Well, we probably forget a lot of the things that went into this one in our daily work.

JavaScript

• Ever struggled to understand DOM Events and their options? Here’s DOMEvents.dev to help you understand it better with an interactive playground.
• Parvus is an accessible, open-source image lightbox with no dependencies.
• Adrian Roselli shows how to build sortable table columns in an inclusive and simple way.

CSS

• Max Böck had a chance to try out container queries and shares his findings, his struggles and combines them with a good real world example.
• This tutorial by Ahmad Shadeed provides nice solutions for how to put text over images so it’s still readable.
• The folks from Sentry built a dark mode for their app. Now they share their path of cleaning up, refactoring variables, then building a new design system and then reimplementing the styles into their components.
• Lea Verou has an easy solution to implement dark mode by using inverted lightness variables. This is especially useful if you’re building new projects or one that already makes use of the hsl() color mode.
• Callum Hart shares how to name and define variables that adapt to different contexts like Chameleons do.
• Stephanie Eckles shares the updates to CSS that improve accessibility. She explains them so we understand better when and how to use them.
• Matsuko from craft cms shares how to create custom focus indicators that look great in CSS.
• Scott Kellum on why he thinks intrinsic typography is the future of styling text on the web. With detailed comparison-view examples and code suggestions he wrote a great article that’s useful for us developers.
• Stephanie Eckles explains all the modern CSS pseudo-class selectors like :any-link, :where() and others.
• Chris Coyier tried out the new CSS color-contrast() function that’s in the Safari preview. A pretty cool function when we’re working with variables and in different contexts.

Work & Life

• Leo Babauta is great at pointing out things that we all know if we think about it but we constantly forget to think about. Here’s advice for the feeling of guilt to not working more when we’re done for the day already. A habit worth integrating into our lifestyles.

I hope you’re doing fine and have a way to stay positive, find your way to make an impact and help build a better society, better friendships and make our world a little better.
If you want to support my work, you can give back via PayPal or Stripe. Thank you!

Anselm