Web Weekly #97 (#blogPost)

Have you ever used the box-decoration-break CSS property? Or did you know that there's a beforematch JavaScript event? Or that you can use TypeScript features in vanilla JavaScript?

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

Before I get into my favorite web dev resources this week, I want to give a huge shoutout to my supporters on Patreon. I passed the threshold and am not paying for sending this newsletter anymore. 😅

And a special thanks goes to Paul Kinlan and Eli Schei for supporting Web Weekly on a higher tier.

By now, 3.5k people get this email every week, which is almost a bit scary.

Thank you for reading along and being part of the Web Weekly crew! 💙

From the category of absolute nonsense, here are the worst volume controls ever invented. My favorite is number two. 🫣

Don't build terrible UI

• New to the web: Firefox is the first browser shipping the @media (scripting: none) media query.
• WebAIM's yearly accessibility report is out.
• TIL: you can skip Netlify builds via a commit message.

The screenshot says it all: half of the newly submitted npm packages are spam. And not only that, there are 4.6k packages about Matrix's main character John Wick.

Be aware of the useless half

I love interactive blogs, and every post from Bartosz Ciechanowski is a piece of art. The posts are very long, but the attention to detail, all the little widgets, and the work that must go into these posts are exceptional. 💯

• How do mechanical watches work?
• What is sound?
• New: What forces apply when riding a bike?

Rachel Andrew does a fantastic job summarizing recent browser releases on web.dev. New features being cross-browser supported:

• the translate attribute
• constructable Stylesheets (CSSStyleSheet())
• Web Push

And many more things are entering the web platform very soon (Safari is on fire lately)! Exciting times to be a web developer!

Bet on the web

I tried to get the journalling habit going plenty of times, but it's too hard. It just felt like a burden, and I figured it wasn't for me.

Brad Frost's approach of putting down thoughts and situations from the past just to get them out of my head sounds excellent, though. I might give that a try!

Write down what matters

What happens when you nest a div inside a table? Or a button inside another button? Vadim Makeev reminds us once more why valid HTML matters.

Write good markup

I don't know Jennifer, but she publishes a weekly newspaper about herself. It's even written in the third person. I won't subscribe, and it's a little weird, but I love everything about it!

Do fun things on the web

Are you testing your sites end-to-end? If you don't, I spoke at a Microsoft meetup here in Berlin, live-demoing why it's such a wonderful tool.

Start testing

GitHub released a new VS Code extension to run GH Action. And while that's cool, there've been tools doing that for you already. But it also comes with handy validations, so you can avoid pushing your action updates ten times until they work. 💪

Run your actions

Jim Nielsen the other day:

😆 I feel you Jim!

Jim published a post explaining how to use TypeScript hints, validation and even the run time validation library zod with good'ol JavaScript and JSDoc notations.

Avoid the build step

From the unlimited MDN knowledge archive...

We're in Chromium-only land this time, but did you know that there's a hidden="until-found" attribute value and, to go even further, that the elements defining it trigger a beforematch event? Now you do!

React before it matches

When you use margins and paddings on links, it can become complicated when the text spans across lines. box-decoration-break lets you define styles across pages and lines! 😲

Style your links across lines

• holtzy/react-graph-gallery – From the Web Weekly community: Examples of React/D3 graphs.
• vercel/satori – Library to convert HTML and CSS to SVG.
• evanw/thumbhash – A very compact representation of an image placeholder.

I've been playing with variable fonts this weekend (blog post coming), and Wakamai Fondue is an invaluable tool for inspecting font axes. Check it out!

Inspect your fonts

I've been working hard on improving my writing (and speaking), and I'm always keeping in mind to keep the reader a reason to continue.

Ann Handley is, as always, on point.

I'll be seeing "We are Scientists" tonight, and in prep, I went down into a huge Indie music rabbit hole. This week's song is Phoenix's "Lisztomania" which is the perfect spring track.

Listen to "Lisztomania"

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

Or tell your friends about it:

• Share it on Twitter.
• Forward it to someone who might like 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! 👋