Published at
Updated at
Reading time
10min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

What's the status of Apple's PWA disaster? Should you self-host everything to avoid serverless horror stories? And what do you need to know about the new core web vital INP?

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

Konrad listens to "Cousins like shit - Barbie" and says:

"I love the text & message - go all in when the chorus kicks in"

Do you want to share your favorite song with the Web Weekly community? Hit reply, and we'll listen to it together!

Everybody's testing React Server components these days. And apart from the smaller bundle sizes (yay!) and massively increased build complexity (not yay!), the idea of streaming (some might call it simply lazy loading) content is quite nice.

If there's heavy computation involved, send everything ready quickly and enrich the UI with the slow parts later.

But real talk: do you need React for this?

<div hx-get="/graph" hx-trigger="load">   <img  alt="Result loading..." class="htmx-indicator" src="/img/bars.svg"/> </div>

You can do similar things with htmx if you want to. πŸ‘† htmx is lighter and simpler than React and doesn't require build process magic. Cool.

But could you do similar things with even less?

<!-- Loads /flower.html onto #my-element --> <a href="/flower.html#my-element" target=htmz>Flower</a>

The Filament Group already experimented with iframe hacks in 2019, and we've seen this pattern reborn with htmz. These techniques are definitely in hacks territory, but hey β€” yolo!

But looking at all this, it feels like we're lacking some HTML primitives here, and I was knocked off my chair when I discovered there's been a spec for this.

<esi:choose> 
    <esi:when test="$(HTTP_COOKIE{group})=='Advanced'"> 
        <esi:include src="http://www.example.com/advanced.html"/> 
    </esi:when> 
    <esi:when test="$(HTTP_COOKIE{group})=='Basic User'">
        <esi:include src="http://www.example.com/basic.html"/>
    </esi:when> 
    <esi:otherwise> 
        <esi:include src="http://www.example.com/new_user.html"/> 
    </esi:otherwise>
</esi:choose>

Unfortunately, the ESI spec from 2001 didn't go anywhere. But could there be more ways to stream content lazyly?

Be ready because now it gets wild.

What if you could stream in UI elements with web components?

<div>   <template shadowrootmode="open">     <header>Header</header>     <main>       <slot name="content"></slot>     </main>     <footer>Footer</footer>   </template>    <div slot="content">     This div will be rendered inside the slot above     without JavaScript. More magic!   </div> </div>

Now that all browsers ship declarative shadow DOM, you can also delay heavy computation and pipe slow content into already defined web component slots.

With React / Next.js being at the forefront of reselling these lazy content patterns, I think it's only a matter of time until leaner approaches to "delayed content" land, and I'm there for it!

Something that made me smile this week

Hey. Will you build me a website?

Here's the only valid response to people asking you to build a website for them. πŸ˜‚

Conquer the request!

Open tabs

iOS PWAs are back in the EU

Apple backs off killing web apps, but the fight continues

After last week's major dramaΒ (Apple planned to drop PWA support for all iOS Safari users in the EU), Cupertino listened to the web community and rolled back thanks to many loud concerns, CEO letters and the Open Web Advocacy group.

A win for the open web!

Support the open web

In the meantime, Safari 17.4 was released, and it improves web app integration in macOS. This entire topic is nothing but bonkers.

A better way to create tooltips

A slider that controls a tooltip tick.

Temani Afif does what he does best: writing some wild CSS. If you're using pseudo-elements for your tooltip ticks, here's a nicer a clip-path approach.

Drop the pseudo-elements

Let's not think about this...

 ServerlessHorrors β€” Stories you never want to feel on your own skin

I'm in the "buy instead of build" camp β€” 100%. Full stop.

My blog's content is in Contentful, the site's hosted on Netlify; for simple data storage, I connect to Airtable. Web Weekly runs on Buttondown. These are all great services, and I'm either on a free or reasonable pricing plan for all of them.

But what if one of my providers sent me a high bill? Sure, that happens occasionally, but I'm not talking about a few hundred dollars (even though that's a lot of money already), but an invoice over $104,500.123 (the bill was cleared by now)?

If you're a strong soul, ServerlessHorrors lists these incidents. But be warned, you probably will have a strong urge to put some server metal into your living room.

Be scared about SaaS

The "perfect" storm

The perfect storm?

The web community took a knock over the last year. And Geoff Graham is right β€” it feels like a storm is coming up.

CSS-Tricks β€” the number-one CSS resource β€” was bought and is now abandoned. What was this stunt good for? Nobody knows.

Fun fact: Chris Coyier even tried to get it back. Without success, though.

As good as it was, CSS-Tricks isn't the only place to find good web dev content. If all goes down, we still have MDN, right?

Well... Mozilla, of course, is also riding the AI wave by now. A lying bot even made it into the MDN core docs. And is it just me, or are there more ads on the site now? I've never had strong feelings about tiny ads on MDN, but sponsored blog posts on the general web docs feel somewhat different, don't they?

Mozilla: the organisation that can no longer be trusted β€” I want to be absolutely clear that I wholeheartedly support MDN. I think it’s fantastic. I think it’s under the wrong stewardship though.

What will happen to the global web platform docs? Andy Bell formalizes strong concerns, and I'm with you, Andy. We need to question the current MDN situation. Think of it: our primary web dev resources are owned by a single company. And no company can be trusted.

Should there be an independent group for web docs? It's a tough question to answer, but either way, I think Geoff is right β€” it feels like we're entering stormy weather. But maybe this is a perfect opportunity.

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Dead simple sites

The most minimal sites on the web, curated in one place.  No overly animated content.  No scroll jacking.  No excessive storytelling.  Less, but better.

Dead Simple Sites has you covered if you're looking for some minimal design inspiration.

Make it simple

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

Infinity in CSS

Two boxes. One with z-index 999999999 and one with calc(infinity). The infinity one is on top.

What's the highest possible z-index value? It's 2147483647. But of course, no one will remember it. How could you set this number without Stack Overflowing it? Easy, use calc(infinity).

Will Boyd looked at infinity in CSS.πŸ˜…

Put infinity into your styles

Git config options you should know

So I asked about people’s favourite git config options on Mastodon:  "what are your favourite git config options to set? Right now I only really have git config push.autosetupremote true and git config init.defaultBranch main set in my ~/.gitconfig, curious about what other people set"

Julia Evans came around with another banger about popular git config options. There are many useful things in there, and my favorite is merge.conflictstyle zdiff3. Check it out!

Improve your Git

Side note: Do you follow what's happening in Git land? There's now a rebase alternative β€” git replay. And git switch allows you to switch branches without worrying about file checkout.

It's time for INP

INP is a pending Core Web Vital that will replace FID in March 2024.

You probably know Google's Core Web Vitals. Google uses these metrics to evaluate how fast your sites are. And speed plays a role in your Google search ranking. Google Search is important. And faster is better. Easy.

So far, the core metrics were:

  • LCP (Largest contentful paint)
  • FID (First input delay)
  • CLS (Cumulative layout shift)

And there's news. Next week, on March 12, INP β€” Interaction to Next Paint will replace FID. 😱

Our friends at Speedcurve shared what you need to know and how you can improve your INP scores.

Speed up!

Random MDN – hyphenate-character

Demo showing `hyphenate-character` with words broken by the "πŸŽ‰" character

From the unlimited MDN knowledge archive...

Do you know you can control the character that's used when CSS hyphenates words? Now you do!

Change the hyphens

TIL recap – Stacked Grid elements

Visualization showing how to stack elements with CSS Grid.

I'm using grid stacking less than I should, but dropping some absolute positioning seems always like a good idea.

Stack with grid

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

New on the platform

Backdrop showing that it inherits from its orginating element

The initial ::backdrop spec included this line:

It does not inherit from any element and is not inherited from.

It seems harmless, right? Unfortunately, this meant that ::backdrop hasn't had access to custom properties defined on :root. And while not super terrible because you could redefine all the backdrop properties, it was also slightly annoying.

The specs were changed, and backdrop inheritance works as you expect across browsers (it's not visible on MDN yet), and Bramus shares what you need to know!

Style the backdrop

Classifieds & friends

Three valuable projects to have a look at

A new Tiny Helper

 PDFcheckβœ“ β€” Immediately check one or one hundred PDF files for signs of inaccessibility

Heads-up! I know nothing about PDF accessibility, but PDFcheck seems like a good quick checker. πŸ˜…

Make your PDFs accesible

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

Thought of the week

Rach Smith on AI. πŸ’―

If a bot can write for me, what is the point of me writing in the first place?

This is all, friends!

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 11 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles