Web Weekly #25

Welcome to Web Weekly #25!

Ciao friends!

How's your week been? Surprisingly, I spent my Friday night on a rooftop terrace looking at the TV tower listening to chilled house music. It was beautiful!

Before we jump into web stuff, here's a pupper from my hidden collection. Look at this energy bundle! 😆

A dog jumping off a bed

This week's Web Weekly includes:

  • Nerdy URL facts
  • A CodePen embed alternative
  • How styled components work

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

Ready? Steady. Go!

How a reframed question can change its outcome

When I first became a professor, I’d pause from time to time during class and ask, “Does anyone have a question?” Nine times out of ten, no one would raise their hand. I’d move on, confident that I’d done a stellar job of explaining the material. I was wrong. The exam answers made it clear that there were plenty of students who weren’t getting it.

Look at these two questions:

  • "Are you facing any challenges?"
  • "What challenges are you facing right now?"

Both questions ask for the same information, but they probably lead to very different results. Ozan Varol wrote a great article explaining why the way we formalize our questions matters.

Ask different questions

What's allowed in URLs?

Query A "query" component in a URL follows a "?" characters and... is basically not well defined at all. You could put just about anything into the query, including characters that would otherwise not be possible, such as "/" and "?":

Jan Schauman wrote a nicely nerdy post about URLs. It includes many lesser-known facts and will make you the winner of your next URL trivia game. The article is pretty long but worth it!

Nerd out about URLs

My TIL highlight from this post: enter about:about in your URL bar to find all browser internal web pages and functionality. (works in Chromiums and Firefox)

Positive feedback that lasts

List: Situation, The team was at the weekly planning meeting; Behavior, Emily interrupted Dale after she noticed he interrupted you; Impact, This gave you space to express your thoughts and impress the team, which you don’t often get to do; Request, Please continue making space for everyone to communicate their ideas.

When giving constructive feedback, I try to be very careful to deliver it the best way. There are many approaches to framing the "negative feedback"; SBIR (Situation, Behavior, Impact, Request) is one. For good feedback, many people (myself included) go with a quick "Great job!" or "Well done!". That's not memorable, though.

Should we frame and deliver the positive feedback the same way we do the constructive one? The following article gives great examples to get started.

Give great positive feedback

How styled components really work

Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood.

Josh Comeau wrote a tutorial explaining how React code such as styled.h1`font-size: 1.5em;`​ works. And as usual, Josh includes various examples to teach the concepts. Great work!

Demystify styled components

Colorful browser UI

Screenshot of stefanjudis.com with a colorful Safari nav bar

Safari's new theme-color support entered the Tech Preview channel. Many people started playing around with it. Manuel Matuzović used it to show form validation errors, and Adam Argyle checked if one could animate it. 🙈

Be aware, though, in some cases, Safari picks a color by analyzing the page. You might want to define a theme-color before the feature is supported in stable releases and Safari chooses a color for you!

Optionally chained function calls

Source code: // execute functions with `?.()` to not throw an exception // in case it is not defined console.log(someObject.foo?.() || 'notDefined'); // 👆 logs 'someValue' because `someObject.foo?.()` returns 'someValue'

I looked up the browser support for optional chaining in JavaScript, and to my surprise, it's all green these days! 😲 But did you know that you can optionally chain function calls with ?.()?

Optionally chain your functions!

Emoji fun facts

Burrito, mind blown and salad emoji

Emojis are fascinating. Everybody around the world uses the tiny symbols. The following article includes many stories and facts about emojis (e.g. why google moved away from the weird blobs or why the salad was changed to be more inclusive).

Learn more about Emojis

The reason for this "weird" import JSON syntax

A natural question to ask is why a JSON module couldn’t simply be imported like this: `import json from './foo.json';`

I shared a link to import assertions in a previous Web Weekly. Even though I read more about it, I still didn't understand why we needed this new syntax (import data from 'https://example.com/data.json' assert { type: 'json' };). Thankfully, Dan Clark explains why on the V8 blog.

What's the reason for this syntax?

Learn fingerspelling right in the browser

Screenshot of fingerspelling.xyz/game showing the "o" letter and a "hand analyzer"

I probably won't learn to fingerspell very soon, but if I'd need to, I definitely would give fingerspelling.xyz a try. It's a well-made app that analyzes your hand gestures. Great work! Go web!

Learn to fingerspell

A lightweight CodePen embed alternative

Indiepen code editor that looks similar to codepen

Henrik and André released IndiePen – an independent and privacy-friendly solution to present your code examples to the people.

I love the project's minimalistic approach. And the project is open source, too, which means that if you want to analyze the code or modify it, go for it! Thanks, both!

Embed code snippets

Open source shout out 💙

"web-vitals" element showing various web vitals metrics

This week's shout out is about an open-source contribution. Nico Domino uses my <web-vitals/> custom element on his site and updated various things in the project. I didn't realize how many dependencies were out of date. Thank you, Nico!

Display web vitals on your site

Three valuable projects to have a look at

A new Tiny Helper

Instruction to convert pasted text to markdown

This week's tiny helper is a handy utility that converts any text in your clipboard to markdown. Super handy!

Convert all the things

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

A quote to think about

How do you deal with things that aren't going as planned? This article on the "Barking up the wrong tree" blog explains the attitude of welcoming complications in life, and it includes this week's quote.

Life is a game. We can try and fail and try again. Games are fun. Frustrating, at times, but still fun. Life can be the same way if we welcome its obstacles.

A song that makes you stop coding

Cover of "Kyodai - Music Rises Up feat. Stee Downes"

This week's song is a house track that I heard on Friday. "Music rises up" comes with a catchy chorus and (as usual) some piano tunes. Close your eyes and let it sink in. The song will grow on you!

Listen to "Music rises up"

Thank you for reading!

And that's a wrap for the twenty-fifth 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.