title: More frontend dev learnings
excerpt: Some more frontend dev learnings, some inspired by learning from web.dev. This post was ready since quite a time, but I really wanted to get my site running with NextJS first and to simplify the whole publishing workflow (which is still kind of a work in progress tho). So finally my Site is ready (enough) to publish it 🎉. As always feedback is very much appreciated and I hope to be able to ship posts much more frequently from now on.
coverImage: /assets/blog/more-frontend-dev-learnings/cover.jpg
coverImageInfo: Selfmade image
date: 2022-12-18T06:35:07.322Z
ogImageUrl: /assets/blog/more-frontend-dev-learnings/cover.jpg
Some more frontend dev learnings, some inspired by learning from web.dev. This post was ready since quite a time, but I really wanted to get my site running with NextJS first and to simplify the whole publishing workflow (which is still kind of a work in progress tho). So finally my Site is ready (enough) to publish it 🎉. As always feedback is very much appreciated and I hope to be able to ship posts much more frequently from now on.
I always thought setting the image width and height in CSS is the proper way to do it and setting it in html is just a deprecated way of doing it. But I recently learned that there is a huge advantage of setting it also in html, because the Browser can respect the aspect ratio of the image before it has actually loaded and thus avoid unnecessary layout shifts. You can see it in this REPL. Recently there is also a CSS property that allows to define the aspect ratio explicit and seems to have browser support from all new versions of major browsers (aspect-ratio on MDN).
The Internationalization methods keep surprising me of what is possible in modern browsers even without using any i18n library. The last thing I stumbled upon here, was the ListFormat method. It let’s you concatenate an array in a localized way.
const inArray = ["apple", "microsoft", "google"];
const outString = new Intl.ListFormat("de").format(inArray);
console.log(outString); // apple, microsoft und google
A colleague showed me this one, which is obviously better than changing access rights via chmod in bash scripts. The problem it solves is that you might get “Accessing scriptXY.sh not allowed” warnings when you commit scripts and try to execute them in you CI/CD pipeline.