Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! πŸ‘‹

Have you seen the display multi-keyword syntax already? Or want to stop defining all these noisy sizes image attributes? Or wonder if you should define media queries in px, em or rem?

All the answers and much more are included in this week's Web Weekly. 🫣

But before I get to it, let me shout out to Jabran, Bramus, Paul, Florens, Aleksandr, Anselm, Szynom, and Manuel. All of you gave Web Weekly a boost, quote, or retweet last week.

Web Weekly has 3.8k subscribers right now, and with all your help, the 4k are in reach for June. I'm thrilled. Thank you! πŸ’™

Do you use logical properties such as margin-inline? Logical properties allow styling sites depending on the flow of text. Left-to-ride, top-to-bottom, you get the idea...

I haven't adopted them entirely and mostly use them as single-direction shorthand because the sites I'm working on are all going left-to-ride and top-to-bottom.

margin-inline: 1rem;

/* in horizontal writing mode is the same as */

margin-left: 1rem;
margin-right: 1rem;

There are also fancy units like vi or vb respecting the writing mode or direction. 🀯

Interactive playground explaining the vi / vb units.

And now there's even more logical property power! Have you seen multi-value display properties?

display: block flow; display: inline flow; display: inline flow-root; display: block flex; display: inline flex; display: block grid; display: inline grid; display: block flow-root;

They're the display counterpart for all the other logical properties and values entering the web. display: block becomes display: block flow. inline becomes inline flow. And if you use them, they're following the flow of text. Writing modes are coming to the display property!

What's the browser support, though? Firefox is already in, Safari's game; only Chromium is missing. But Chrome 115 is supposed to include it, and it's shipping any day now. Wild times!

Something that made me smile this week

Baby yoda destroying google search

I love a good easter egg. Here are my Google search favorites:

If you want to find more, Wikipedia has an entire list of Google easter eggs. πŸ˜†

And more importantly, what are your favorite software easter eggs? Hit reply! I'd love to share some great ones next week.

Yet another CSS wishlist

Things that don’t exist yet β€” Just to be clear, when I say β€œdon’t exist yet” I mean that these are things that the CSSWG aren’t working on yet, as far as I know.

I've shared some CSS wishlists previously, but here's a final summary. Elly Loel put together the best points of other lists, and it's a great reference to discover more things you didn't know you needed.

Make a wish

"We don't do that here"

I have a handful of β€œmagic” phrases that have made my professional career easier. Things like β€œyou are not your code” and my preferred way to say no: β€œthat doesn’t work for me.” These are tools in my interpersonal skills toolbox. I find myself uttering phrases like, β€œright or effective, choose one” at least once a week. This week I realized I had another magic phrase, β€œwe don’t do that here.”

I've been part of tech communities for a long time. And not as long, but over five years, I've managed communities in one way or another. And it can be challenging. People are hard.

Aja Hammerly shared a magic phrase to help deal with culture, values, and rules. I'll surely give it a try one day.

End an argument

Intent to ship: sizes="auto"

Blink:  Intent to Prototype: Auto Sizes for Lazy Loaded Images with Srcset https://groups.google.com/a/chromium.org

There's some pretty big news on the responsive images front.

Writing a somewhat complete responsive image element that also considers image formats is just painful. What if we let the browser pick the best image automatically?

That's what sizes="auto" is about. It's still early stages, but Chrome's prototyping it already. I discovered the attribute while going down another rabbit hole a while ago if you want to learn more. πŸ‘‡

Let the browser pick the best image

React reconciliation and the key attribute

Fun fact: "key" is just an attribute of an element, it's not limited to dynamic arrays. In any children's array, it will behave exactly the same way.

Did you know that you could use the key attribute in other situations than when React is telling you, "you're iterating over a list. Please use a key"?

Nadia Makarevich explains reconciliation in nice detail! πŸ’―

Learn about React's internals

The wonderful weird web – Slide to unlock with finesse

"slide to unlock" next to paths that need to slide

I've spent way too much time unlocking screens on this app. Get your phone out, and if you make it further than I did (see above), I salute you! 🫑

Unlock it

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

UI patterns explained

A dark line graph with a bubble explaining the horizontal axis

Rauno Freiberg does what he does best: building beautiful UIs and explaining how it's done. The following post describes adding an indicator to an SVG line graph.

Use some fancy frontend tricks

Make also sure to check Rauno's "Craft" section; there's some stunning stuff in there.

Media query inconsistencies when using px, em and rem

A table showing browser inconsistencies when using media queries with px, em or rem.

Keith J. Grant shared a frustrating web compat bug.

When defining your media queries in em or rem, browsers consider the users' default font size, right? At least that's the idea, but it's not working in Safari.

Respect user settings in media queries

21 web features you're not using yet

21 web features you're not using yet

Suppose you're looking for pointers to new web tech (other than this newsletter); our friends at Fireship released an 8min rapid-fire video sharing all sorts of new APIs and browser tech.

Catch up with the platform

.well-known/avatar

A Well Known URL For Your Personal Avatar

The /.well-known/ URI can be used to provide information for and to well-known services. The most known ones are probably /.well-known/change-password helping password managers to change a password, /.well-known/security.txt to indicate how to reach a domain owner about security, and as of late /.well-known/webfinger to indicate that you own a domain in the Fediverse.

Jim proposes that avatar should be part of well-known URIs, too, and I wholeheartedly agree.

Put your avatar in a well-known place

Random MDN – still suspended

 @randomMDN is suspended β€” what now?

From the unlimited MDN knowledge archive...

@randomMDN is still suspended, and that's not gonna change. I opened a GitHub issue to find out how to bring back the random MDN knowledge.

If you have an idea or want to work on it with me, let me know on GitHub.

Discuss the @randomMDN future

TIL recap – clip-path accepts values outside the 100% range

Playground showing that clip-path values can be outside the 0-100% range.

Six months ago, I learned that I can use clip-path to create custom-shaped element corners thanks to the fact the property accepts values outside of the element. πŸ’ͺ

Play with clip paths

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

Shapecatcher recognizing a doubled arrow

Okay, this tiny helper isn't new, but cool, nevertheless. Draw any shape and receive a recognized Unicode character. πŸ’―

Draw some symbols

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

I feel called out by Brian Norgard. 😒

We overvalue people we don’t know and undervalue those we do.

A song that makes you stop coding

Robyn album cover

Oldie but goldie: I used to listen to Robyn a lot, and "With every heartbeat" is such a pop song masterpiece!

Listen to "With Every Heartbeat"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.8k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 18 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles