Web Weekly #91

Do you know what's coming to JavaScript? Or struggle to debug and hand edit your SVGs? Or want to level up your VS Code game?

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

Before we start, I want to thank the people supporting my tiny indie newsletter on Patreon. Since last week, I've been able to cover the cost of sending almost 3.5k emails every week. Thank you, Benjamin, Leanne, Leon, Daniel and Paul! You rock!

But let's get to some web stuff!

The biggest news last week was the announcement of Interop 2023. If you haven't heard of the initiative: Apple, Bocoup, Igalia, Microsoft, Mozilla and Google collaborate on pushing the web platform forward and aim to resolve the most pressing compatibility issues across browsers.

And this year's focus list is long! It includes the new and shiny container queries and :has() but also long-awaited but not cross-browser supported features. For example, I'm beyond excited to see the :user-invalid pseudo-class in the list.

If you were awaiting a particular feature to go cross-browser, browse the interop 2023 dashboard. A looooot of things will land this year! Web development just gets better and better with every year. 🥰

I don't think we really need LOL verifiers but I had indeed a good laugh about Brian Moore's invention.

Verify you LOLs

• It's unavailable on my zoom, but apparently, it supports threads and reactions these days.
• If you're using Twitter to log into things, changing your logins to a good old email/password combination might be a good idea.
• TIL: macOS offers background removal from images out of the box.

It feels like we're only talking about the new and shiny CSS features lately, but JavaScript is evolving, too! If you want to learn what's new and celebrate the new Array methods with me, this post summarizes the recent ECMAScript proposals short'n'sweet.

Catch up with modern JS

I shared my excitement about the enterkeyhint and inputmode form attributes almost two years ago. They're cross-browser supported but underused these days.

Jeremy explains what they're about and also explains the autocomplete attribute to round things up. 💯

Create stellar forms

I've been in many arguments over b and strong elements over the past 10 years. strong is semantically correct and makes a site more accessible, right?

Steve Faulkner shared that most screen readers don't announce strong or em, and in fact NVDA users complained about a test implementation because emphasis is too noisy and overused on the web. 😲

Learn more about emphasis accessibility

I still consider myself a TypeScript noob, and it always tripped me up to define types for every function definition, even though TypeScript is smart enough to detect types for many things.

But when should you define return types? Matt Pocock's take seems pretty reasonable to me.

Don't define unnecessary types

Have you been a MS Paint graffiti sprayer when you were young? Yes, me too! If you want to relive good old times, I rediscovered this wonderful piece of computer history.

Create art

What's the difference between the CSS selectors .a .b .c and .a :is(.b .c). They look similar, don't they? Bramus shares some nicely nerdy details on how they differ.

Understand your selectors

I have a slight feeling that I shared vscodecandothat.com before, but what gives... Burke Holland and Sarah Drasner created a site with many handy editor tips!

Level up your VS Code game

My own /bookshelf page has been in the making for ages, and when it's done, I hope it'll be only half as pretty as Hidde's. He explained how he built it using flexbox magic and aspect-ratio, and oh my... this is a pretty page! 💯

Share what you read

Debugging SVGs can be a real pain sometimes. Mariana Beldi shared some tricks on how to master it, and the first tip explaining overflow="visible" to tweak the viewbox attribute alone is worth your time. Trust me!

Polish your SVGs

From the unlimited knowledge archive called MDN...

Did you know you can apply CSS to avoid layout shifts triggered by scrollbars? Now you do!

Disclaimer: Safari doesn't support scrollbar-gutter yet.

Make some space

Are you up for some regex nerdy facts? Safari's Tech Preview shipped regular expression lookbehinds, and even though I haven't had the time to update my TIL post around lookaheads (and lookbehinds) yet, you can still learn what x(?=y) and x(?!y) are about.😉

Tweak your regex

• microfeed/microfeed – A lightweight cloudflare-hosted CMS for podcasts, blogs, and other curated URLs.
• leodevbro/vscode-blockman – A VSCode extension to highlight nested code blocks.
• mgechev/google-interview-preparation-problems – Leetcode problems (and solutions) to prepare for my Google interview.

If you're googling free-to-use icons for your projects, check Atlas icons instead. Just saying... 🫣

Find your next icons

I've been disliking the term Jamstack every year a bit more. It no longer describes a stack and almost became a synonym for modern web development. Static HTML? Yes, that's Jamstack. Serverless? You bet! Server-rendering? Of course!

All that said, I do like Brian Rinaldi's take.

It's still no stack or technical definition, but hey — I take it. 🤷‍♂️

I've been out on Saturday to see the folk sisters First Aid Kit live, and the show was surprisingly good and made my entire weekend.💙

Listen to "Emmylou"

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