Reading List #14

Hi ✌️

Putins’ war on Ukraine is going on for about a week now, with many thousand lives lost and already well over 1 million people turned into refugees. While it’s good to see Europe and the world uniting against this war, and impressive how brave the Ukrainians seem to fight back, it doesn’t look like the worst is over yet. The news that are coming out of Ukraine each day are just horrifying, depressing and make me feel helpless.

I’ve had a hard time concentrating on work this week, as everything seems pretty irrelevant in the light of *all of this*. But who am I to complain, sitting here in Switzerland with a roof over my head…

Initially, I had a few posts linked in here about the war in Ukraine that I’ve read this week, but I removed them as I don’t feel like I know enough or have enough to add to the conversation. Instead, I suggest you to read this post by Vitaly Friedman from Smashing Magazine: “We All Are Ukraine 🇺🇦” and to donate something to a humanitarian cause, if you are able to.

Frontend Development

🖼 Making big images fast for the Rijksmuseum

Some interesting insights by the Q42 team into how they made full screen images load fast for the Rijksmuseum website. We were (are are still) investigating different ways of constructing and calculating srcset and sizes attributes ourselves for our picu plugin, so it’s always interesting to read how others approached this.

Q42 Engineering – Big images, blazingly fast

🤖 Testing Pipeline 101

A great introduction into testing pipelines by Ramona Schwering. She starts by explaining the various test types and gives some practical examples using GitHub Actions for Unit, Integration and End-to-End tests.

Smashing Magazine – Testing Pipeline 101 For Frontend Testing

🤩 <selectmenu>

If you’ve ever tried to properly style a native <select> element, you know how hard it can be. The styling capabilities are limited, browsers handle stuff differently and some things are just not possible or only with some very nasty hacks. With Open UI there’s now an initiative that tries to solve this. It’s still experimental and only available behind a flag in Chrome Canary, but a new, fully stylable <selectmenu> element is on the horizon.

CSS-Tricks – The <selectmenu> HTML Tag

🤩 A new MDN Web Docs

Mozilla launched a new MDN Web Docs, including a dark mode and a completely new design. I still need top get used to it, but I like it so far.

MDN Web Docs

👏 Animating in a newly created element

This is a very short, but very useful tutorial on how to use @keyframe to animate an element in, that you just created. Very useful.

Stephanie Eckles – CSS Quick Tip: Animating in a newly created element


🏗 On Abstractions

While I was working on the new email functionality for picu during the last weeks, I learned a lot about Object Oriented Programming in PHP. One area I spent a lot of time, was thinking about the right level of abstractions. How much duplication of code is ok? When should I start to abstract something into its own function? This tweet by Ali Spittel sums it up perfectly:

Don’t repeat yourself too much, but also don’t abstract your code to an extent that it is not understandable.

Ali Spittel – @ASpittel

Then, in this post, Kent C. Dodds introduces the concept of AHA Programming – meaning “Avoid Hasty Abstractions” – which is also a nice way to think about it. Kent was finally referring to this post by Sandi Metz “The Wrong Abstraction” which is where a lot of his ideas were coming from originally. I really recommend reading it in full. I really liked the idea of first stripping abstractions back until your left with a lot of duplicated code again and are able to see which abstractions really make sense. Because often we abstract prematurely (I know I do, for sure) and often those abstractions are based on assumptions which can turn out to be wrong. So taking a step back to see the duplicated code can lead you to better abstractions in the end. Hope I summarized this somewhat understandable, but you should go and read her post anyway.

Sandi Metz – The Wrong Abstractions

Other / Random

✍️ What makes writing more readable?

The pudding does a great job at visualizing various things. You should definitely check them out if you don’t know them.

In this one, they take on the topic of what makes your writing readable. To get this idea across, you can switch between “normal” and an “easily readable” versions for every sentence, or for the whole article at once.

The Pudding – What makes writing more readable?

🏏 Almost Pong: Like pong, but you control the ball, not the paddles

If you need a break and something lighthearted for the weekend, here’s a fun game: Almost Pong – An online game just like pong, but instead of the paddles, you control the ball.

Almost Pong

🇺🇦 ☮️ 🇺🇦

Made with ❤️ in Switzerland