Web Weekly #118

Guten Tag! Guten Tag! 👋

How can you block AI agents from using your content? Is centering elements in CSS really a problem in 2024? What's in for browser interop 2024?

This week's Web Weekly includes all the answers and much more. Enjoy!

I'm no designer. And unfortunately, I rarely have a visual sense to create really beautiful things.

But I did learn some simple rules and tricks that move my designs from the "You designed this yourself, or?" stage to "Yeah, looks okay.".

  • Give elements space to breathe.
  • Don't put pure black on pure white.
  • Distribute things evenly.
  • Don't break the visual grid!

You get the idea. And I'm really just applying the rules I know.

Visual design rules you can safely follow every time. You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every time.

And I just learned some more rules! Anthony Hobday collected a whole lot of safe design practices. They're easy to follow and put into practice.

I'll never be great at typography, though. To help out, Mike Mai has another set of rules. Noted!

Use En Dash & Em Dash. Did you know dashes have different widths?

I love that the typography guide includes content and HTML nerdery like when to use different dashes (— and –) and spaces ( ).

And if you're looking for great UI tips, Rauno Freiberg collected a loose collection of interface guidelines.

Web Interface Guidelines

Maybe I'll become a great designer after all. What are the rules you follow? If you have more, send them over.🫵😉

And with this — let's ship good stuff!

Quick links

The internet's known AI agents

Dark Visitors

Do you want to tell all the AI bots not to suck in your free content? Theoretically, you can tell them off via your robots.txt (if they respect it, that is a question for another day), and Dark Visitors lists them all.

Block all these content suckers

React Server Components (RSC) from scratch

Ben Holmes in front of his editor (picture in picture)

Ben Holmes reimplemented React Server Components in a YouTube video. Easy-peasy, right? 🤯

Implement RSC

Responsive SVGs

A responsive SVG reacting to height changes.

Nils Binder blew my mind with this responsive SVG technique.

Look at it! ☝️ This SVG changes its size, and the swirl stays at its bottom. 🤯

Ship magical SVGs

Is a Git commit a diff or snapshot? Or both? 🤔

Poll: "How to you think of a git commit?" 51% think it's a "diff". 42% think it's a snapshot. 4% think it's "history".

Julia Evans continues her journey of learning and teaching Git concepts. This time, she explains how Git commits work. As always, it's an eye-opening read! 👏

Understand Git

The wonderful weird web – futureme

Write a letter to your future self — Write. Pick a receiving date. Send. Verify. That’s it 😊 Your letter is safe with us - we’ve sent over 20 million letters in 20 years!

I'm just leaving this here for you to communicate with your future self via email. 😅

Talk to your future self

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

Centered elements in block containers

"align-content" CSS spec defining that it should work for block containers.

How hard is it to center a div? Despite being an ongoing joke, I think we solved this problem with flex and grid containers. But things got even easier now.

Apparently, align-content was defined to work in grid, flex, multicol and(!) block containers. Chromium and Webkit will ship it soon.

But be careful — align-content: center is almost impossible to feature detect. Michelle Barker shares what you need to know about it.

Center like a boss

How Vercel's new homepage was built

Vercel's hero animation explained that it's build with 6 layers.

I haven't had the time to read (or understand) the entire explanation of Vercel's redesign yet, but Rauno again delivered and shares some wild tricks to craft outstanding UIs.

Polish the frontend

Interop 2024

Graph showing interop 2023 highlighting that at the end of the year interop was 83.2%.

After waving 2023 goodbye, it's time to realign the focus for interoperability. How did browsers close the interoperability topic in 2023?

For stable releases, interop stands at 83%.

While that doesn't sound great, many things are in the pipeline, and after getting all these PRs merged, interop stands at 95%. Great news!

We’ve already seen the list of proposals. Just for kicks, I went through the whole list and tally’d up the amount of positive-emoji reactions to each one (so stuff like 👍, ❤️, and 🚀, but no votes for negative or ambivalent reactions). This is to get a sense of the “popular vote” of what any random developer thinks of the proposals. I left a few reactions myself and had my own votes a while back.

But what's on the agenda for this year? Chris Coyier had a look and scientifically counted emoji reactions on GitHub. Spoiler: there seems to be a deep hunger for JPEGXL? #wat

See what's coming in 2024

structuredClone

Problematic code trying to clone an object with sets, maps, regexes, errors and other types with the "JSON" module.

Oldie but goldie: structuredClone works across browsers since March 2022. Do you use it?

If not, Steve Sewell explains why it's so much better than the beloved JSON.parse(JSON.stringify()) hack.

Clone JS objects

Random MDN – all

Demos of the CSS "all" property on MDN

From the unlimited MDN knowledge archive...

Do you use CSS all to reset all (well... most) properties of an element?

Reset!

TIL recap – space and enter clicks

But did you know that the two keyboard clicks behave differently? Enter clicks a focused button on press (keydown) and when held, it clicks indefinitely. Space clicks a focused button on release (keyup) and won't fire multiple times when held.

Short'n'sweet: do you know the differences between clicking a button with enter and space? I didn't.

Press the keys

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

Three valuable projects to have a look at

A new Tiny Helper

TypeScript relations visualized.

If you want to understand how all your TS types and interfaces relate to each other (who doesn't?), TS Diagram visualizes them.

Understand your relationships

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

Thought of the week

I like Cole Peters' take on Redefining Developer Experience a lot.

DX shouldn't only be about hot-reloading or fast build times but also consider the result!

‘Good developer experience’ needs to be re-imagined as the enabling of developers to deliver reliable and first rate end user experiences — for as many users as possible, and for as long as possible.

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! 👋