Web Weekly #119

Greetings! πŸ‘‹

Does sticky content harm accessibility? Is it time for a native toggle button on the web? And what makes a good touch target?

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

But before we start, if you've subscribed to Web Weekly for a while, you might have noticed that I dropped the music picks. And I miss them.

So here's an idea: I'd love to include you and add a section that looks like this:

[YOUR NAME] listens to "[BAND] β€” [Title]" and says:

"I just love how bouncy this track is!"

Are you game? If so, let me know!

Last week, I shared "Dark Visitors" β€” a site listing known AI agents. And there are a lot! Knowing about them is good, but what should we do with this info? Do we really need to ship a robots.txt with hundreds of agent definitions to tell them all off?

PaweΕ‚ Grzybek thought the same and dreamed of a simple robots.txt convention to "block" AI bots.

User-agent: AI Disallow: /

Unfortunately, this isn't a thing, but while not the same, I discovered the noml (as in "no machine learning") specification. It defines a new noml attribute to be used in the robots meta element or X-Robots-Tag HTTP header. That's a start!

A matrix showing different results of using `noindex`, `nofollow` and `noml`.

With the three attributes (noindex, nofollow and noml) we could tell Google, that search indexing is cool, but feeding Bard is not. Seems reasonable.

But the 100k dollar question remains: does it matter what we put into the robots.txt or robots meta? Will free content not just be sucked in anyways?

I don't know, and call me naive... but I want to believe that some rules exist for a reason. πŸ˜…

Quick links

An underrated JS feature β€” Proxy

const state = new Proxy(initialState, { set(state, prop, value) { const set = Reflect.set(...arguments); console.log(`Setting ${prop} to ${value}`); return set; }, });

How often have you used the JS Proxy object? If you're not a library author, probably not that often. I haven't used it much either, but I'm amazed every time I see it. James Stuckey Weber described handling state and side effects with vanilla JS. πŸ‘

Keep state

TS: interface vs type

"if all of this is intended, what are the benefits of this design? How do they outweigh the drawbacks?" Answer: it wasn’t intended; the benefits are: backward compatibility.

Even though I've read Matt Pocock's guide explaining the difference of type and interface ten times by now, it doesn't stick. πŸ˜…

Why is this confusing stumble stone part of TypeScript?

The answer: interface is somewhat tech debt, and now we can't get rid of it. Surprise! It turns out, that designing a language is tough!

Why do we have both?

Next.js mistakes and tricks

I'll leave two links for the Next.js devs here today...

28 Advanced NextJS features everyone should know

☝️ Granted, this is total clickbait. And I couldn't resist it myself. πŸ˜… But the post delivered big times.

Common mistakes with the Next.js App Router and how to fix them

From Vercel itself, Lee Robinson shared some common mistakes with the new App router. The article is worth peaking at if you're already part of the app router crew.

The wonderful weird web – "interesting clocks"

For different clocks showing the time mentioned in a song title, YT video, news headline and the population of a US city.

I'm such a pudding.cool fanboy. This week, I discovered the "clocks project". What's special about it?

The clocks take the current time and show

  • how often it was mentioned in a song
  • how often it was mentioned on YouTube
  • how often it made news headlines
  • cities with a population matching it.

I love this!

Watch the time

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

Where should the init code go in a web component?

The bottom line is: if you’re doing something in disconnectedCallback, you should do the mirror logic in connectedCallback. If not, then it’s a subtle bug just lying in wait for the right moment to strike.

When creating a new web component, putting all the init code into the constructor is tempting. But there are better approaches than that. Nolan Lawson explains why.

Structure your components correctly

Speaking of web components...

<the-counter @click> <button @click="decrement">-</button> <span>0</span> <button @click="increment">+</button> </the-counter>

Mayank shared how a 38 LOC base class allows you to write custom elements like this. ☝️ It has a static register method, event delegation and straightforward element querying.

Are they creating a new web component framework here? πŸ˜…

Ease custom elements

The problem with sticky content

A design with sticky elements being in the way.

Doug Abrams shared interface patterns that violate the WCAG 1.4.10 Reflow criterion. The problems are based on sticky content, overflowing text and popups.

While explaining the issues, Doug shares a valid, overlooked point. When developing for mobile, we constantly resize our viewports and change the width, but most people (myself included) stay in portrait mode.

What happens to the sticky bar when there's very little vertical space?

Make things accessible

Better touch targets

Widget showing an "Enhance target size" check box that changes the UI above.

If you read one thing in this Web Weekly, this is it. Ahmad Shadeed created a reference piece on touch targets. It includes interactive demos, videos and tons of references.

Make yourself comfortable because this article is long. Very long, but worth it!

Build great UI

Random MDN – valid a element attributes

The anchor element.

From the unlimited MDN knowledge archive...

MDN lists eight valid anchor element attributes. Sure, href is one, but can you name the others?

Learn more about links

ping is my favorite. πŸ˜‰

TIL recap – input.labels

<label for="foo">Some input</label> <input type="text" id="foo"> <script> console.log(document.getElementById('foo').labels); // NodeList (1) [label] </script>

Here's some DOM trivia: did you know that input elements hold references to their labels? If not, now you do!

Access the labels

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

New on the platform β€” switch

switch

I have yet to look into it, but check this! Apple has been experimenting with a native toggle switch since Safari Tech Preview 185. Discussions about the feature are happening on GitHub as we speak.

Is a native toggle a good idea, though?

Many people mentioned that toggles are misleading and confusing. If you consider the state of the web, that's a fair argument. The toggles have different colors, shapes, direction and sometimes come with wild ideas.

But I'm not concerned about this point because I believe that if there's one native toggle, we will internalize what's ON and OFF very quickly. Let's see! 🀞

Three valuable projects to have a look at

A new Tiny Helper

Webhook.cool allows you to receive and inspect webhook requests. Use your unique webhook URL to send any webhook to it.

If you're looking for a quick way to debug webhooks, webhook.cool has the coolest smiley out there and gives out unlimited debug URLs for free.

Debug your πŸͺs

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

Thought of the week

This week's wise words come from Flavio. 🏰

If I have to create an entire castle in my head to understand how things work, it's not going to be a healthy relationship between me and that tool.

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! πŸ‘‹