Web Weekly #24

Welcome to Web Weekly #24!

Hola friends!

Oh well... Let me be honest, my week was very long; I felt super low, binge-watched Netflix the entire weekend, and the 30+°C here in Berlin didn't help. It was pretty challenging to sit down and write this week's newsletter (but I couldn't break the 24-week streak 🙈).

I hope you had a better week and are getting ready for the summer. We all deserve it!

Before we jump into web stuff, here's a pupper from my hidden collection. It's just too cute how she leaves the scene. 😊

Dog with a plastic thing in his mouth

This week's Web Weekly includes:

  • GraphQL terms explained
  • CSS overscroll-behavior
  • Error cause in JavaScript

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Ready? Steady. Go!

What's holding you back from being confident?

Anxiety’s not the problem. It’s your anxiety about anxiety that’s killing your confidence.

I discovered Nick Wignall's writing recently. Nick is a clinical psychologist, writer, and teacher, and his articles are very relatable and easy to read. In this post, he covers misbeliefs about being confident.

Read about confidence

A better way to wrap JavaScript exceptions

Source code: try { // ··· } catch (error) { throw new Error(`While processing ${filePath}`, {cause: error}); }

There's a new ECMAScript proposal on its way that will improve error handling and "error wrapping". The error cause proposal (currently on stage 3) allows easier error chaining, and it's a very welcome language edition. Axel covered the proposal on his blog.

Learn about "Error cause"

Worry on paper

When you write down your worries, it’s easier to see them as separate phenomena distinct from you as a person. And seeing a worry literally spelled out on paper reinforces a crucial idea: Worries are a part of you but they don’t define you.

And here's another post from Nick Wignall; Nick explains the technique of writing down your worries on paper. I'm constantly worrying about a hundred different things, and I will give this approach a try.

Start worrying on paper

Interactive code blocks

This was my wishlist: Syntax highlight, Apply multiple themes, Highlight specific lines, Highlight specific words, Interact with the content, Make specific words link to other pages, Show line numbers, Make it collapsible/expandable, Render a preview

It feels to me like coding blogs are getting more and more interactive. It all started with embedded CodePens, and then Josh Comeau raised the bar with his beautiful embedded article demos.

Pedro Duarte shared how he tackled good-looking and partly interactive code blocks with React and MDX.

Improve your code blocks

Daft Punk Cafe

With daftpunk.cafe, I wanted to create a fun corner on the internet for Daft Punk fans around the world. Listen to the radio, play some tetris or test your knowledge of track names and just have a good time!

Daft Punk announced that they wouldn't continue making music in February this year. Vadim Demedes, a huge fan, built daftpunk.cafe to celebrate their epic tracks.

I love everything about this site: the fact that Vadim built it, the site's style, the hidden YouTube iframes playing the music, ... 🙈 Microsites are just great!

List to Daft Punk on more time

If you know more microsites, send them my way!

GraphQL terms explained

"The GraphQL Spec, Simplified" by Loren Sands-Ramshaw

The GraphQL jargon is confusing. If you're wondering what fragments, directives, and subscriptions are, this post is for you!

Get ready for GraphQL

A guide to pronouns

That's why we've put together a glossary of terms relating to gender identity. Our goal is to help people communicate accurately and respectfully with one another.

Last week LinkedIn added the ability to add pronouns to their profile pages. Proper use of gender identity terms, including pronouns, is crucial to signal courtesy and acceptance of transgender and nonbinary people. If you have questions on the topic, this guide to gender identity terms will help.

Learn about pronouns

TIL – CSS overscroll behavior is a thing

Source code: /* Keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none;

I learned that you can specify the behavior of overscrolling in CSS. Use overscroll-behavior to prevent Chrome's "Pull to refresh" from showing up or scrolling that happens behind an overlay.

Learn about overscroll-beahvior

Insightful case studies and product analyses

Case Studies – Growth & UX case studies in a comic book format. Improve your product skills with real-world examples.

I discovered Dan Benoni's and Louis-Xavier Lavallee's work a few years ago. They create product case studies that are presented in easy to grasp and entertaining slides. If you're building a product, Dan's and Louis-Xavier's content is worth checking out!

View some case studies

Object creation, reduce and JavaScript performance

Wait, isn't this premature optimization?

Prateek Surana wrote a nicely nerdy post covering JavaScript performance. He explains that object spread is not always the best idea and offers solutions for making object transformations faster using Object.fromEntries.

Get into JS performance

Reader shout out 💙

Tweet from Prashil: Newsletter I love reading

Prashil shared an extensive list of newsletters (not only web development related) and included my tiny newsletter.

Thank you so much, Prashil! And thank you all for reading along. 💙

Find some great newsletters

Three valuable projects to have a look at

A new Tiny Helper

Ojoy screenshot showing some selectors to upload an image

Addy Osmani seems to be on a role. 🙈 Ojoy is a new tool that enlarges images and improves their quality. This tool will come in handy!

Make the images bigger!

A quote to think about

This Tweet by David Brady is very true and made me smile. Projects always start super clean and thought through, but then, a few sprints in, they often become the same mess as always.

90% of software development is coming to an agreement on where to make the mess.

A song that makes you stop coding

Cover: David Penn feat. Ramona Renea - Stand Up (Extended Mix)

I was out for a run, picked a random artist radio, and suddenly a rolling house track was pumping into my ears (In German I'd say "Was'n Brett!"). David Penn's and Ramona Renea's "Stand up" is a perfect running and dancing track. It feels like summer, has a funky voice and melody, and a smoothly rolling baseline!

It's one of those tracks that makes a dance floor go wild!

Listen to this "Stand up"

Thank you for reading!

And that's a wrap for the twenty-fourth Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

If you're not a subscriber, you can change that! 😉

Stay safe, and I'll talk to you next week! 🎉 👋

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.