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!

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.

Interop dashboard

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. ๐Ÿฅฐ

Something that made me smile this week

Tweet: I made this thing called LOL Verifier: a device that only lets you type lol if youโ€™ve actually laughed out loud

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

Verify you LOLs

What's coming to JavaScript?

- Change Array by Copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change. - Intl.NumberFormat V3: Additional features for Intl.NumberFormat to solve key pain points. - Symbols as WeakMap keys: Permit Symbols as keys in WeakMaps, entries in WeakSets and WeakRefs, and registered in FinalizationRegistries

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

Form attributes for a better UX

DevSheets explaining enterkeyhint and inputmode

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

How much does emphasis improve accessibility?

A table sharing that "strong" isn't announced by screen readers in default settings.

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

When to define return types in TS

YouTube cover: "Don't use Return types"

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

The wonderful weird web โ€“ MS Paint

MS Paint screenshot with a sprayed "Web Weekly"

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 are your favorite internet corners? Shoot them my way, and I'll include them in Web Weekly!

Some CSS selector nerdery

Using :is() in complex selectors selects more than you might initially think

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

vscodecandothat.com

VS Code can do that?! All the best things about Visual Studio Code that nobody ever bothered to tell you

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

A fancy bookshelf

Some books in front of vertical bars visualizing the book length

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

How to debug SVGs

SVG cat with visualized viewBox that's cutting the cat

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

Random MDN โ€“ scrollbar-gutter

scrollbar-gutter โ€” The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

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

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

TIL recap โ€“ regex lookaheads (and lookbehinds)

A regular expression with a lookahead.

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

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

Three valuable projects to have a look at

A new Tiny Helper

MIT License. Ready libraries 2,701Free ConsistentIcons

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

Find your next icons

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

Thought of the week

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.

Jamstack has become more of a "community" than a set of architectural rules.

It's still no stack or technical definition, but hey โ€” I take it. ๐Ÿคทโ€โ™‚๏ธ

A song that makes you stop coding

First aid kit โ€“ Emmylou

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"

This is all, friends!

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:

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! ๐Ÿ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 2 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.