Artboard 16Google Sheets iconSwift icon
Published at
Updated at
Reading time
6min
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 that SVGs provide more pointer events than HTML elements? Or that the inert attribute is now cross-browser supported? Or want to learn about CSS blend modes?

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

Usually, Web Weekly starts with some thoughts about web development, but today's special.

I sent the first Web Weekly in January 2021. Fast forward two years and 99 emails; today, it's the hundredths Web Weekly edition. This email started as a little Sunday project but has now become a part of who I am.

Thank you for being one of the 3.7k people hearing from me every week. πŸ’™

Something that made me smile this week

Screen of a game showing a tiny character β€” "it's a doorable"

Have some fun with this "adoorable" one-minute-long mini-game. It comes with a little surprise at the end. πŸ˜‰

Open the door

A πŸ’™ for interactive blogs

Blog post including an interactive example and a live preview

If you want to get started with fancy CSS blend mode effects, Brad Woods' published a tutorial with plenty of interactive examples.

Blend in

Web perf optimizations on the edge

Slide showing an example URL with query params for "find" and "replace"

WebPageTest shipped performance experiments a while ago. The feature allows you to test site changes and evaluate if they improve performance without deploying these changes.

Scott Jehl shared how WebPageTest experiments work and how you could build your own. πŸš€

Experiment

1-1s that are going somewhere

Towards better 1-on-1s: an awkward manifesto

Tyler Cipriani shared how he structures his 1-1s as a manager, and I love his approach.

Plan your 1-1s

Single-element CSS ribbons

A green and a red ribbon.

I shared Temani Afif's css-tip.com last week, but it's so good that I have to plug it again. πŸ˜… Look at these CSS ribbons; they're made with a single HTML element and without pseudo-elements. Magic!

Check the magic

The wonderful weird web – The space elevator

Space elevator

The highest paper airplane flight happened at 35k meters and was launched from a balloon. How do I know? I took the space elevator on neal.fun.

Go to space

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

New features on the web

New to the web platform in April β€” Discover some of the interesting features that landed in stable and beta web browsers during April 2023.

Rachel Andrew summarized the recent browser releases. The biggest news: inert finally ships in all browsers. πŸŽ‰

Learn about the new stuff

How to get started with AI art

Colorful artsy picture of a dog.

"I need to make art prints for my art wall!" was Jake Dahn's first reaction to all these new AI image-generation tools. And he was so kind to share how he created a painting of his dog.

Get into AI art

Lookbehind assertions are supported in all engines

const regex = /(?<=\(vegan\))\s(\w+)/g;

For the regular expressions lovers: as the last browser, Safari 16.4 shipped lookbehind assertions, and they're now cross-browser supported.

Look behind

WebDev tricks in the new Next.js redesign

The Next.js site with a button and animated lines going to the button.

Rauno Freiberg shared how he's built the Next.js website, and it's full of creative little tricks.

Make sure to browse his blog, too. It's a piece of art! πŸ’―

Learn some tricks

Random MDN – EyeDropper

Color picker example.

From the unlimited MDN knowledge archive...

Unfortunately, Chromium-only: but did you know that you can there's color picker JS API? Now you do!

Pick colors

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

TIL recap – SVG pointer events

.foo {   pointer-events: visiblePainted;         }

A quick note from five years ago: I've learned that SVGs come with additional pointer-events CSS values. 🀯

Control you SVGs

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

Three valuable projects to have a look at

A new Tiny Helper

Photopea

This one's been around for a while, but I use it almost every day. Photopea is a free Photoshop replacement running in your browser.

Edit your photos

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

Thought of the week

Svelte maintainer, Rich Harris, gave a talk full of web development hot takes, and there's definitely some truth to this statement.

The web doesn't suck because of frameworks, the web sucks because of capitalism.

A song that makes you stop coding

Foals – Spanish Sahara

I don't know if Foals are still in the game, but "Spanish Sahara" is one of my every time favorites because it's one of these songs building up power to the end! πŸ’™

Listen to "Spanish Sahara"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.6k 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! πŸ‘‹

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

Related Topics

Related Articles