WDRL — Edition 293: AI translations, the golden ratio, line length challenged and sticky solutions

Celý článek

Hey,

every year towards the end of it I want to remind you that if you like my work, you can help financing this newsletter by giving a contribution. At this point I want to say thank you to every single reader, to everyone who supports me, sends me feedback or suggestions. I love this project so much because my readership (you!) is so amazing.

When I looked up something these days in my archive, I realised how true the introduction from last year is still today.

On the topic of creating for the web: I personally think micro-typography, good translations and good content writing matters a lot to the success of a product. So I wrote an article on well crafted translations and why automation isn’t good enough yet, showing some prominent examples that just aren’t good enough.

News

• PHP loses one of its main contributors but the good part is that this triggered a process of building the PHP foundation. This is cool because it’s a new level of stability for the product that most of the internet builds on.
• Each year, a couple of big companies publish the news color trends for the upcoming year. This time, I found Shutterstock’s Color Trends 2022 and have to say I like their way of defining it, showing it and just delivering one hex color code for it. With Pantone Color Trends it’s more tricky and I just realised they now sell an entire book on trends and only publish some fashion color trends for the next year without providing any useful color codes anymore.

Generic

• Arjuna Sky Kok wrote a pretty complete guide on how to create, retrieve and format date and time in PHP.
• Brent Roose & Freek Van der Herten published a free modern PHP cheat sheet, serving also as summary of all awesome PHP features up to PHP8.1.

UI/UX

• Line length revisited: following the research is a in-depth article on typography and reading experience challenging the status quo of how wide a text should flow. By Mary Dyson.
• Kelley Gordon shares how we can use the golden ratio for UI design. A pretty interesting read I used a lot in past projects already since I heard of the concept in school. Back then I learned what it does, how important it is for photography and so I applied it naturally for designs as well. Nowadays I think it’s not applicable everywhere or for all projects but often helps to design better interfaces.

Tooling

• ssshape is a SVG blob/shape generator that is pretty handy for nice elements when you don’t want to open one of the big vector applications.

Web Performance

• Harsh people say Safari is the new Internet Explorer, but we should remind ourselves that real people are working on the Safari web browser. So let us treat them with respect and be friendly. On November 15th, there was an amazing Safari release. Safari Tech Preview now has lazy image loading, accent-color for browser UI controls enabled by default and supports dynamic viewport units, flex-basis: content, and rel="noopener/noreferrer" for form elements. Pretty cool for just one preview release, isn’t it?

JavaScript

• Ivaylo Gerchev shares the Vue 3 Composition API and its advantages over previous methods. If you’re using Vue, this is a cool intro and comparison what to use for which solution.
• Until near future, we need to reverse an array to find values or its index in an JavaScript array which causes an array mutation and is a memory-increasing action. Luckily, there's an ECMAscript proposal for findLast and findLastIndex.
• Rematch.js is using the best practices from Redux but without the boilerplate and it’s super tiny (2kb). It has TypeScript support, native async/await, a simple plugin API, and needs no configuration. Usable with React, Vue, Angular or others.

CSS

• A sticky footer solution by Sílvio Rosa that only needs two lines of CSS. Sticky footer means the element is on the bottom of the page even if not enough content is there while not being in fixed position on the site as well.
• Ahmad Shadeed often writes about little findings in CSS that are super useful. Such as this one where he explains why position: sticky does not work automatically with CSS Grid and how to use them in combination.
• It looks like there is finally a way to animate a dynamic height using only CSS. Nelson Menezes shows us how he achieved this in a funny and interesting read.
• This is a very interesting case of why it’s best to avoid !important: While you can use !important in CSS Custom Properties, it doesn’t work as we’re used to. Instead, it’s stripped from the definition by the parser but influences the CSS cascade. See the article to understand this better.

Go beyond…

• Habits and streaks are cool but what happens usually when we miss a day and break our streak? We tend to let the habit fall completely. When things aren’t going according to plan, Practicing with Zero is simply pausing, and deciding how we want to proceed from here. With intention.

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 like this newsletter, you can contribute to financing the project. Thank you!

Anselm