WDRL — Edition 286: A few words, a few articles towards the end of 2020.

Celý článek

Hey,

It’s nearly the end of the year and the world is still different than we could imagine before 2020. We still don’t know how to deal with the new kinds of diseases short and long-term. We still have no real clue and conclusion how to save our planet (means us humans, the planet will survive). Many of us now are in a state of uncertainty, of frustration, of stress. Working remotely isn’t easy for all of us, the split between childcare and work is hard, and our social contacts have been reduced to the minimum. That’s definitely not a combination that makes our lives easy, calm and ourselves happy. That’s why I found this writing so useful: News is the last thing we need right now but it’s addictive like a drug. Reading this made me finally block all the major news sites. I’m already two weeks in, and it feels quite good. And fear not, it’s not that I don’t know about the important news, there are still enough ways to get them from other people. It’s simply that you don’t fetch them actively and don’t fall into the trap of getting caught by another handful of articles.

I hope you all can enjoy the end of the year, make it a calm and nice time despite of all the things happening all over the world, despite all the articles here, all the news around us and all the other people sharing their fears, their concerns and annoyances with us. Let’s try to reframe it, show empathy, listen to people and try to understand them. Read you in 2021 again, thanks for everything to you, your support, your money gifts, your article suggestions, your conversations via email. I’m really grateful for this audience.

Generic

• Eric Bailey on how we can create more eco-friendly websites. Some pretty handy tricks in there, some very simple ones, some that can’t be applied to every project.
• AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Now this article shares a couple of things we should know before we blindly use this new format for everything. WebP, for example, performs better for thumbnails, and if the picture has a high entropy, JPEG can still deliver better results at a smaller size. Funnily, JPEG2000 which never kicked off really still challenges most of the other formats today. And if you’re now unsure what to do, using mozJPEG is still one of the best compromises you can use today.

UI/UX

• Adam Silver shares why we should be more careful designing tab styles for use cases that aren’t or shouldn’t be tabs.
• Scale is a nice set of illustrations for free, even for commercial projects. The nice thing? You can set the main color easily in the SVG and adapt them to your brand color.

Tooling

• Blurhash is a nice library that creates blurs for image placeholders. Now here’s alos a pure PHP implementation of it.
• Plaiceholder is a simple online tool where you can upload an image and get a CSS, SVG, Base64, Blurhash, or React element that acts as blur placeholder until the real image is loaded. A nice tool for when you just need this a once or a couple of times.

Web Performance

• Kilian Valkhof shares concepts and examples of how we can integrate the prefers-reduced-data setting into our websites. With it, we can disable web font loading, not load background images, or using picture and its media query attribute to load smaller images than normal. We can even prevent preloading or autoplay of videos, disable infinite scrolling preloads (we could improve the example using IntersectionObserver). It’s super cool to see these practical implementations which don’t even require much effort but have a huge benefit to users with a limited data budget (international roaming, etc).
• James Ross shares how we can use Cloudflare Workers and CSS to deliver new image formats like AVIF. It’s pretty cool that James has some real use cases here and even shows the real life impact data.
• Noam Rosenthal on how they made their Wikipedia page previews fast. A nice insight into JavaScript’s heavy functions and how to easily or not replace them.

HTML & SVG

• Robin Rendle explores what we can do with the <details>/<summary> elements in HTML and CSS. Ever thought that we could de-animate (pause) a gif? We can do inline-block footnotes or build tooltips with it!

JavaScript

• Jeremy Keith created a simple gist to save form input via localStorage to avoid content being lost when something happens to the client browser or the server resets the connection due to security.

CSS

• Ever tried to build a visual calendar with CSS? You may end up with tables and styling a lot of things. What’s much simpler is now that we have CSS Grid using this cool technology to build a basic calendar in three lines of CSS.
• If you want to have a clickable card interface, things can easily get tricky due to the fact that we can’t nest links in HTML. Christian Heilmann shares a way how to do it the right way but always keep in mind that UX and accessibility may still be impacted by this design pattern which is why nested links aren’t a native thing in HTML.
• Bramus Van Damme writes how to use the new aspect-ratio CSS property in browsers to replace these ugly padding-top hacks we used to apply to iframe embeds. Unfortunately, this is not baked into stable browsers yet but we can already use the setting and later strip the fallbacks from the codebase.

Go beyond…

• It makes me really happy to see such an amazing project: Field Notes: Snowmaker. A story how to make 99999 unique snow flakes. My dream? Brendan (or someone else) is allowed and paid for drawing all these snow flakes by hand. Nature is amazing, craft is amazing and we should embrace it. Thanks Field Notes for doing this project.

Thank you for reading this. 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