Web Weekly #87

Guten Tag!

Do you know that JavaScript provides functionality to split strings into words and sentences? Or that the CSS property visibility can be reverted for nested elements? Or how modals, popovers and dialogs differ?

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

What happens when you have a container set to visibility: hidden and one of its descendants has defined visibility: visible? I mean, a visible element nested inside a hidden one shouldn't be visible, or?

Well... logic doesn't apply to visibility.

From the MDN docs visibility:

Descendants of the element will be visible if they have visibility set to visible.

Example showing that `visibility` can be revertet in CSS.

What? 🤯

The same goes for pointer-events. Elements inside a container with defined pointer-events: none can overwrite the declaration and become clickable again!

What? 🤯🤯

But on the other hand, and to close this series of surprises, if you define text-decoration: underline for an element, you can't revert the text decoration of its descendants.

What? 🤯🤯🤯

Example showing that you can't overwrite text-decoration: underline.

My CSS understanding is shattered! 😅

Learn more about these CSS facts on the blog.

Something that made me smile this week

A dog astronaut, a duck, a pear and a toaster.

I discovered this random shop selling weird things and ordered a glowing pear as a gift. 😅 I haven't had high hopes, but it was reasonably fast delivered from the US to Germany, and oh my... cuteness overload!

As a result, I now had to get these astronauts for my desk, too!

Browse random but also cute stuff

Quick links

How to impress your colleagues

If you want to impress people you work with/for, do what you say you’re going to do. Be reliable and deliver what you have promised (almost) every time.

There's so much truth in Rach Smith's quick note. You don't need to crunch, hussle or overwork to make an impression at your job. Be reliable; that's all!

Don't overpromise

An interactive guide to flexbox

Meat on a stick

If you're following Frontend news, you probably have seen this. I usually don't include "trending" resources, but the amount of work that Josh Comeau has put into this flexbox guide is just off the charts.

If you want to know what's up with this kebap, check it out. It's worth it!

Learn more about flexbox

Thoughts on a custom web experience

Three browser windows with different fidelity. Going from a text-only to fullfledged interactive experience.

Kyle Simpson has been giving the talk "FOUC, and the Death of Progressive Enhancement" at multiple conferences. I had seen it live myself a few years ago. It's an excellent talk advocating for a more configurable web experience.

Jim Nielsen shares thoughts and ideas on what this could look like! 👏

Should the web be configurable?

Modals, popovers and dialogs

The popover attribute is meant for UI components that are: - on top of other page content - not always visible (eg just when they are relevant), also described as “short lived” or “ephemeral” - usually displayed one at the time

Hidde de Vries wrote a fantastic guide on similar yet different UI widgets. It's a great resource with many examples, that also includes the new popover attribute. 💯

Pop over!

Speaking of modals, do you remember modalzmodalzmodalz.com? 🫣

What's the Fediverse again?

@rolltime on stage with a slide "Instance-specific rules & guidelines"

If you're still confused about this Fediverse/Mastodon thing, @rolltime's talk gives a valuable overview.

Plus, I now finally know how to pronounce Fediverse.🫣

Jump onto the Fedi train

Reminder: individual transforms are cross-browser supported

.target { translate: 50% 0; rotate: 30deg; scale: 1.2; }

Short'n'sweet: if you haven't adopted the rotate, scale and translate CSS properties yet, they're supported in all browsers.

Transform without "transform"

Which level are you at?

The Seven Levels of Busy

You should check how to calm down if you're more than level 4. 😊

Check your business

TIL — How to split strings with Intl.Segmenter

JavaScript code showing how to use "Intl.Segmenter"

I discovered Intl.Segmenter which you can use to split strings into meaningful parts such as sentences and words.

Split strings

Random MDN – text-emphasis-style

text-emphasis-style demo showing with triangles highlighted text.

From the unlimited knowledge archive called MDN...

Did you know that you can emphasize text with Unicode characters? Now you do!

Emphasize!

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – window screenshots on macOS

Two windows on macOS and one is highlighted in red

Years ago, I learned that you can take window screenshots on macOS, which forever changed my workflow.

Take window screenshots

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

Three valuable projects to have a look at

A new Tiny Helper

Vector maker interface transforming comic Stefan into an SVG version.

There are a few tools out there promising to vectorize pixel images. Often the results are poor. I tried vectormaker, and it did pretty well!

Vectorize everything

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

Thought of the week

The holiday season is coming up. And with it, this tiny voice asking "What should I buy for my loved ones?" starts whispering. Mike Crittenden argues for making boring but practical presents.

I kinda agree unless you're really, really, really(!) sure your fancy gift will be a hit.🫣

Boring gifts are good gifts. Don’t optimize for the moment of opening. Optimize for the weeks after.

A song that makes you stop coding

"L'aupaire, lùisa - Lisbon" — A colorful train painting.

L'aupaire's song "Lisbon" is a chilled track that feels like summer.

Listen to "Lisbon"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.1k 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 time! 👋