Web Weekly #128 | Stefan Judis Web Development

Guten Tag! Guten Tag! 👋

Did you know that you can apply padding to img elements? Or that AbortSignals have a timeout method? Or why can you use class properties in Preact but can’t in React?

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

Gustavo listens to “Dilsinho – O Choro é Livre (Ao Vivo)” and says:

This song can change my humor and mood instantaneously. When I listen to it, I can feel my energy flowing in a good way. So, I’d love to recommend playing it to start the day.

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

I received some great feedback last week (thanks, Owen!), and I keep thinking about it. Let’s talk it out.

Web Weekly focuses on web dev things, but I add other resources because I want it to be more than a list of tech links. I want it to be fun.

However, I recognize that finding articles can be tough in this mixed bag of resources.

So here’s an open question: Should we change the Web Weekly structure and group things differently?

What are your thoughts? Hit reply and let me know.

Something that made me smile this week

This is what I call a creative use of row-gap.

Say “OOOoooh”

Two 3d boxes that reveal an image.

Here’s Temani yet again with some creative CSS hacks. The catch: what you see above is done with single image elements and a clever padding / object-fit combination.

Spice up your images

How to block all these AI bots

AI companies use free content to train their models. And nobody was asked if that’s cool. What if you don’t want to feed the LLMs?

Theoretically, you could opt out of the AI feeding by disallowing bot user agents in your robots.txt. But we don’t know if the crawlers respect this convention.

You could also block AI bot user agents entirely if you don’t trust AI companies. Here’s Ethan Marcotte sharing his .htaccess to lock out these content suckers.

If you’re on cloud hosting and cannot configure servers, here’s Jeremia Kimelman doing the same with Netlify edge functions. Nice!

Running every request through edge middleware seems expensive, but I learned edge functions are cheap. Netlify and Vercel offer 1 million function runs per month for free. Holy moly — that’s far more traffic than my blog has.

Let’s believe that the AI bots keep a recognizable user agent (I don’t know why they should, though) and try to lock them out.

For two weeks, that's all I do. I just write it down. I don't tell the team everything that I think they're doing wrong. I don't show up at retro with all the stuff I think they need to change. I just watch, and listen, and I write down everything that seems deeply weird.

Joining a new team or company is the perfect moment to get fresh eyes on a project. Fresh eyes are good because the longer you work on a project, the better you become at ignoring the things that aren’t… let’s say… optimal.

But if you’re the new one, how do you give feedback without seeing the bigger picture and being a terrible smart ass? Every WTF discovery probably has a reason, right?

I love the approach of the WTF notebook. 👇

Join a new team the right way

The Cascade

One of my favorite writers, Robin Rendle, started a new blog — “The Cascade”. If CSS is your jam, you should check it out. And if you want to catch up with all the recent media query magic, this post is for you!

Use the cool queries

You’re halfway through!

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

The wonderful web – No web without women

Web without women —  A collection of innovations by women in the fields of computer science and technology.

You might have heard of Ada Lovelace and Grace Hopper, but do you know about Judith Estrin, Nicola Pellow and Sylvia Ratnasamy? This site highlights fascinating women who have contributed to the internet.

Recognize the hard work

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

window.fetch(apiUrlWithCacheBusting(), {     signal: AbortSignal.timeout(abortTimeout), })

How can you cancel a good old fetch request? This post explains how to use AbortSignal, and I learned a thing or two.

Control the timeouts

HTML element attributes vs properties

How frameworks handle the difference — Back to the example from earlier:  <input className="…" type="…" aria-label="…" value="…" /> How do frameworks handle this?

Jake Archibald came around with another primer on web fundamentals: attributes vs properties. (Yes, there’s a difference)

It’s an excellent read, but more importantly, it made something click for me. If you wonder why you can’t use class in React but it’s allowed in Preact or Vue, you’ll find the answer in the post.

Understand the difference

Two UI examples. One input limits the number of characters and doesn't show an error. The other one allows to enter more characters and give feedback to the user.

What makes a good user experience?

Good UIs give feedback quickly. They immediately tell you when you’re messing up so that you can succeed. Isn’t it surprising that many UIs don’t provide any feedback?

Disabled buttons are one reason, but there are more. Adam Silver shares why you shouldn’t use maxlength.

Ouch, I used this attribute two weeks ago…

Give UI feedback

Masonry is coming to Webkit

A text-based Masonry layout

Firefox shipped an early version of masonry grids ages ago. And I had it on my blog for a while but removed it because it looked like the new grid was going nowhere.

But there’s news: masonry just entered Safari Tech Preview, and Jen Simmons published a very in-depth article on how to use it, where it lives in the spec and why it’s about more than artsy image grids.

Use fancy layouts

Webkit’s not all shiny, though…

iOS 404 — highlighting web features that aren't implemented in iOS yet.

All the fancy new stuff aside, there are still many features missing in iOS Safari. My “favorites”: ::selection or SVG favicons don’t work in iOS Safari.

Check out this snarky web dev gem — iOS 404.

Discover what’s missing in Safari

@layer module, state;  @layer state {   .alert {     background-color: brown;   }   p {     border: medium solid limegreen;   } }  @layer module {   .alert {     border: medium solid violet;     background-color: yellow;     color: white;   } }

From the unlimited MDN knowledge archive…

Hand on heart: Do you use CSS @layers already? I don’t, but I’m still into the idea of layering larger CSS code bases.

Layer it

A complex HTML showing how to connect table cells with their headers.

Do you know that HTML table cells support a headers attribute?

Now you do!

Create good tables

Two things that caught my eye this time.

Code snippets showing URL.parse() and URL.canParse()
  1. Do you remember when URL.canParse() became available? When it appeared, everybody said “Hold on! Can we now have URL.parse(), too?”. It might take a few months, but a new way to parse URLs is coming.

Kilian shares what you need to know.

Code snippet showing align-content for block layouts
  1. Quick’n’easy: align-content: center for block layouts enters the baseline.

Three valuable projects to have a look at

Website data showing info on server location, SSL certificate and headers.

The open source project web-check.xyz squeezes out an impressive amount of information if you’re looking for a quick way to gather public intel on a site.

Analyze the web

I’ll use this quote the next time I’m in an estimation session and want to sound smart.

Refactoring has a price. Not refactoring has a cost. Either way, you pay.

💙 Support the newsletter, small donations on Patreon really keep me going.

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