Skip to main content

Web Weekly #200

Guten Tag! Guten Tag! šŸ‘‹ 

Do you know that fetch has two phases? Are you wishing for a better way than CSP to control outgoing network connections? And should you ship import maps in your sites?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Web Weekly Jukebox

Joshua Idehen - Mum Does The Washing

Ellen says:

The first time I heard it, I laughed out loud. The second time, I laughed quietly. The third time, I got up and hung out the laundry that had been sitting in the drum since Friday and had, by then, developed a worldview of its own. Give the song a listen. Ideally while folding laundry. Or, let's be honest, while watching someone else fold it.

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.

I asked you to participate in the State of Dev survey in Web Weekly 197. The results are in, so let's have a look at how the 5,463 respondents feel about the industry. šŸ¤ž

The intro covers all the topics that I and probably you felt over the last 12 months. I don't want to start this email with a downer and only look at one stat in this topic area. The current emotions about the tech industry in the intro summarize things fairly well for me.

Which emotions best describe how you currently feel about the tech industry? 1. Exhausted 2. Disillusioned 3. Curious 4. Overwhelmed 5. Anxious

This is pretty wild: if you include the folks that said that staying and leaving tech are about as likely, 50% of the participants think that not working in tech in 5 years is a real possibility. I also joke around that I will do something "real" eventually, but I'm surprised that it's so many of us. Let's all meet in the forests to chop some wood then!

Within the next 5 years, how likely do you think it is that you will have to change careers due to reasons beyond your control? Very unlikely: 23%, Somewhat unlikely: 27%, Equally likely/unlikely: 24%, Somewhat likely: 18%, Very likely: 8%

28% of the people type on the "not so great" Apple keyboard? Wow! If that's you, take care of your wrists and join #teamSplitKeyboard! It really does make a difference.

What kind of keyboard do you typically use for work? Apple keyboard: 28%, Mechanical keyboard: 25%, Logitech 15%.

And to close this small highlight section: the favorite video game is Clair Obscur: Expedition 33, and the most-read book is Dungeon Crawler Carl. I haven't heard of either. Are they that good? Should I try them? I'll get a new PlayStation for GTA 6 anyways... šŸ«£

Generally, I'd say that the survey results are more positive than I thought they would be. And that makes me happy, because I tend to doom spiral every now and then. Not today, though, so let's get into some good web stuff!

If you enjoy Web Weekly, share it with your friends and family.

A quick "repost" really helps me out. Thank you! ā¤ļø

Web Weekly Housekeeping 

You might have noticed that I sent out the last Web Weekly four weeks ago. What happened to the "weekly"?

First of all (and I mentioned that a couple of times already), doing something every week is way harder than you might think. Running Web Weekly caused me a lot of stress and anxiety over the years, and I needed to learn that the world won't end if I skip a week or two. Shocking, I know.

And second of all, I have been very busy. I reentered the conference game and spoke at two events in the US and Greece. And on top of that, I participated in two "kinda ultra" cycling marathons (for the Strava bike nerds, let's connect!). And with these events lined up, there was frankly no time to read the news or write the newsletter. But here we are again. So let's get to it! šŸŽ‰

This week's bag of karma points goes to Daniel and David.

A big shoutout this week goes out to Daniel and David! Thank you so much for supporting Web Weekly. 58 people now help me out with a little bit of money. Thank you all!

These small gestures really keep me going in these tough times of unlimited slop grenades. If you also want to support indie publishing, you can do so on Patreon or GitHub Sponsors.

Something that made me smile this week 

My website destroyed by a tiny character.

I had a hard time capturing this site's awesomeness, but, honestly, this is very good!

If you ever wanted to destroy a website, today's the day because you can instruct this little "funny orange guy" (not the president) to shoot at elements. The jumping around on headings and images is very smart, too.

Destroy elements

No code 

  • Sometimes it's better not to say anything ā†’ "[Social media dialogue] is a lot of saying and not much listening. Which is why it often degrades into the lowest forms of communication: the name-calling, the ridiculing, the mocking, the shouting, the insulting."
  • On being proud of doing the work ā†’ "People recognize what you did when they see (or understand) how much work went into it."
  • I don't want the details ā†’ "I realised that 'I don't want the details' wasn't being dismissive."

From the future: linked parameters in SVG 

Three different ways to use linked parameters

I already shared link parameters in Web Weekly 196. What are they about?

You probably know the problem: you load some SVGs from somewhere external and would like to pass in some colors or variables. That hasn't really been possible until now. Firefox Nightly has now shipped the first parts of the new Linked Parameters Module spec.

Ollie published a TL;DR on it if you want to learn more, but for a more practical example Vadim has you covered. šŸ‘‡

Link some values

The two phases of fetch 

const response = await fetch(url) // awaits the headers const body = await response.json() // awaits the body

Did you ever wonder why you need to await twice to access the response body using fetch? I didn't but was honestly annoyed by it. However, after reading Gabor's post, things make more sense. The first await will wait for the response headers to come in. The second await waits for the response body. And generally, I didn't know that response.body is a ReadableStream.

If you want to nerd out about fetch and JS internals, you'll dig this article.

Understand fetch

Mobile zoom tips 

Snippet: <meta name="viewport" content="width=device-width, initial-scale=1.0"> with a highlight telling the "initial-scale" isn't needed anymore.

I just redeployed my site because Vale reminded me that I'm using a relic of the past. Today I learned that initial-scale isn't needed to prevent iOS from doing weird zoom things anymore.

Clean up

.button { touch-action: manipulation; }

And speaking of zoom actions, have you ever used the touch-action CSS property? Andy explained when it can be helpful.

Ignore the double taps

A new way to control the network 

Connection-Allowlist: ("https://api.example.com/*" response-origin)

Do you ship a content security policy (CSP) on your site? Be honest, I won't judge.

I do on stefanjudis.com, and it's quite something. CSP has always been powerful but also seemed way too complicated. And what do you do when an old standard is too complicated? Correct, you invent a new one. In this case (as always) it feels okay, though. I like having a quick way to block/allow connections. What do you think?

Stay in control

It sucks, though, that there are no real MDN docs for this yet... It seems like the web platform docs are slowly slipping...

The wonderful weird web 

A colorful scene with a zebra.

I shared many weird web things over the years, but this site is definitely in the weirdness top three. I can't even describe (or understand) what is going on here but man... I love the weird internet.

Collect things?

Problems with bidirectional text 

<p> He opened the gift and said <bdi>Ś†Ł‡ Ł‚Ų“Ł†ŚÆŁ‡!</bdi> and then started crying. </p>

I've never had to build sites shipping in languages that are read right-to-left. That's gotta be tough for sure. Mojtaba explains what it takes to mix and match left-to-right and right-to-left text. Be ready, there'll be dir=auto (which I haven't seen before), the bdi element, and the U+200E / U+200F Unicode characters.

Keep the right order

Named breakpoints without media queries 

@container style(--viewport: 'mobile') { /* Styles for the mobile bucket */ }

I'm not gonna lie, I'm still bummed about @custom-media going nowhere, but now that container style queries have reached Baseline, you can use them to name your breakpoints with a little trick.

Name your breakpoints

Bramus' custom elements tour 

HTML snippets for the "show-keystrokes", "rich-input" and "mermaid-element" custom elements.

Bramus was busy extending the web platform the last couple of weeks. If you're in need of any of these elements, give him a high five when you see him!

CSS-only custom elements 

my-card { display: grid; grid-template-areas: "header" "body" "footer"; [slot="header"] { grid-area: header; } [slot="body"] { grid-area: body; } [slot="footer"] { grid-area: footer; } }

I have mixed feelings about Burton's CSS-only approach to custom elements. But the way he uses slots is very smart! What's your take?

Style with custom elements

Random MDN ā€“ importmap 

<script type="importmap"> { "imports": { "circle": "https://example.com/shapes/circle.js", "square": "./modules/shapes/square.js" } } </script>

From the unlimited MDN knowledge archive...

Ollie discussed the need for build tools in 2026 and I'm still amazed that importmap is widely baseline available these days.

Import

TIL ā€“ Escape CSS selectors in JavaScript 

console.log(`.${CSS.escape('a:b')}`); // ".a\:b" console.log(`[href=${CSS.escape('@')}]`); // "[href=\@]" console.log(`.${CSS.escape('[jooo]')}`); // ".\[jooo\]"

Here's a funky learning from a couple of years ago: do you know that there's a CSS namespace in JavaScript that includes a method to escape CSS selectors? Why?

I explored some use cases on the blog.

Escape

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

New on the baseline 

Widely available: "checkVisibility" / Newly available: "text-box"

With Firefox 154 the new text-box CSS shorthand entered baseline newly available. If you want to control the size of text boxes and get rid of all this font-specific white space, you should check it out. It was about time...

And on the front of new widely available web features: do you know that the checkVisibility() method is a thing? Now you do, and you can use it safely everywhere!

Three valuable projects to have a look at 

A new Tiny Helper 

Make your logo brighter than white ā€” Upload a logo, choose which colors should glow, download an HDR JPEG. On HDR screens the chosen parts shine up to 7.5Ɨ brighter than #FFFFFF. Everywhere else it's a perfectly normal JPEG.

Now that's cool! You might have seen these images that are "whiter than white" in Chromium or Safari. This effect is based on some fancy HDR image tricks that I shared in Web Weekly 190. If you want to make your logos pop, too, here's a quick website to do so!

Brighten your day

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

Thought of the week 

My list of good quotes keeps being dominated by AI things because it's the stickiest topic ever. I promise there won't be an AI quote next week, but this one is just sooooooo true and worth pointing out anytime.

The further away a topic is from your expertise, the smarter an AI will sound.

Did you learn something from this issue? 

ā¤ļø If so, join 58 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends! 

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! šŸ‘‹

Join 6.5k+ developers and

Subscribe to Web Weekly