Web Weekly #97

Guten Tag! 👋

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! 💙

Something that made me smile this week

Probably the best thing you'll see today. In 2017, a group of developers hilariously competed for who could create worst volume control interface in the world.

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

Don't build terrible UI

Quick links

The state of npm

One In Two New Npm Packages Is SEO Spam Right Now

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

The gold standard of interactive blogs

Three interactive examples: a person on a bike, a mechanical watch and visualisation of sound waves.

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. 💯

New to the platform

New to the web platform in March — Discover some of the interesting features that landed in stable and beta web browsers during March 2023.

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

You don't need to journal every day

While I want to document my life moving forward, I also want to start painting a coherent picture of my past. As certain memories pop into my consciousness, I want to be able to capture them and place them in the appropriate chronology. While I’m aware that my remembering self will no doubt skew any documentation of my past, it’s better than not having any documentation at all!

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

Jumping HTML tags

<!-- Source --> <button> Outer <button>Inner</button> </button> <!-- DOM --> <button>Outer</button> <button>Inner</button>

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

The wonderful weird web – A newspaper about yourself

Jennifer's newspaper

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

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

Why Playwright is a stellar end-to-end testing solution

Stefan live-coding on stage.

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

I'm planning to invest more time into my tiny YouTube channel. If you want to follow along, you know what you have to do. 😉

A new way to write and run GH Actions

Github action with validation errors in VS Code

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

TypeScript, zod and JSDocs

// Declare your schema with zod const CandySchema = z.object({ name: z.string(), type: z.enum(["chocolate", "gummy"]), }); // Extract the inferred type as a JSDoc type /** @typedef { z.infer<typeof CandySchema> Candy } */ // Instead of re-writing it as a JSDoc type like this /** * @typedef Candy * @property {string} name * @property {"chocolate"|"gummy"} type */

Jim Nielsen the other day:

And I don’t mind Typescript, especially for bigger projects — as long as somebody more knowledgeable than me sets it up and maintains it.

😆 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

Random MDN – the beforematch event

An element receives a beforematch event when it is in the hidden until found state and the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.

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

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

TIL recap – box-decoration-break

Example paragraph with broken link styles because it's spanning multiple lines.

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

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

Three valuable projects to have a look at

A new Tiny Helper

Wakamai Fondue site with a "Drop font" prompt.

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

If you wonder how I discover all these web tools, the Web Tools Weekly newsletter is a wonderful way to stay up to date with all the libraries and new helpers.

Thought of the week

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.

A selfish sentence is not a team player.

A song that makes you stop coding

Phoenix - Lisztomania (Official Video)

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"

This is all, friends!

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:

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! 👋