Notices by Mayank (mayank@front-end.social), page 2

a good default speed for the spinner is 1 rotation per javascript.

consider slowing the spinner to 1 rotation per 3 javascripts when the user prefers reduced motion.

if you have too many javascripts, consider not spinning, lest you violate SC 2.2.2 https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html

safari 18.2 is looking really good 👀

https://front-end.social/@jensimmons/113409669370636498

i find `scrollbar-gutter` (years-old feature, finally added in safari) just as exciting as `text-box-trim` (bleeding edge, safari-only).

both incredibly useful and important

also `blocking=render`!

`scrollbar-gutter` is finally available everywhere 🥹

https://webkit.org/blog/16301/webkit-features-in-safari-18-2/

has anybody tried building a showy-hidey sticky header using #CSS only? maybe with scroll-driven animations?

by "showy-hidey" i mean: it shows when you scroll up and hides when you scroll down. (this is anti-pattern in 90% of cases, but it can be useful when you have infinite scrolling)

if it's not accessible, you shipped too early

anybody building a cool product without any AI?

does anyone know if the system-ui font is a variable font on any OS other than macOS? https://web.dev/blog/more-variable-font-options-in-chromium-83

it looks like on windows you have to specify the font explicitly. https://tigeroakes.com/posts/segoe-ui-variable/

#CSS

i always manage to gravitate towards @astro.

currently building a vite SPA and realizing that astro would help with prerendering the application "shell".

this kind of thing is notoriously difficult with vite, which is mainly concerned with bundling.

today i finally updated chrome. i was holding off bc i knew they had added AI bullshit to dev-tools. https://developer.chrome.com/blog/new-in-devtools-131

it's so in your face — "Ask AI" is literally the first option when you open the context menu

maybe it's just me, but this thing makes me not even want to open chrome dev-tools.

1. use a chatbot to generate a product idea.
2. use a different chatbot to scaffold a project for this idea.
3. use a third chatbot to debug the CSS in this project.
4. use a fourth chatbot to implement a fifth chatbot natively in the product.
5. when the product doesn't work, put a sixth chatbot in front of the user so their feedback never makes it back to you.

i am horrified to report that safari continues to have #accessibility issues with display:contents.

this time, i found an issue (on a production website!) where VoiceOver completely skips over consecutively nested display:contents elements inside shadow DOM.

https://codepen.io/hi_mayank/pen/NWQQKaa

is there something you want to know or find confusing about using the #HTML `popover` API? what's stopping you from using it?

i've been writing a very long blog post about popovers, on-and-off for months now. hopefully it's published by the end of the year 😅

@teleclimber this was the video that got me tinkering with my raspberry pi. i want to host simple client-only websites that solve very specific problems for me.

as a frontend developer, i still find it a bit daunting tbh. it's easier for me to deploy to serverless platform 😅 i don't think my rpi can even run deno

@teleclimber yeah no, Linux is part of why it feels daunting. i'm very much a GUI person, i avoid the terminal whenever i can lol.

i'm pretty sure my rpi is 32-bit (that's what it came with, and i don't want to change it bc i already use it for my Plex server).

at least Node runs fine on it. but i still need to figure out how to serve multiple static websites and run multiple Node servers on different ports in the proper way.

this is what Jake was getting at with "it requires upfront work".

two use-cases for #WebComponents that i don't see being talked about enough:

1. micro-micro-frontends using custom elements: you can have different people build different parts of the same page (even using different frameworks), and bring them together using custom elements.

2. stateful diffing using shadow dom: you can swap out HTML of a shadow-tree without losing dom state (e.g. focus or text selection) of slotted elements.

here's a demo of 2: https://codepen.io/hi_mayank/pen/VwoRxGj

it's not "diffing" like i said in my original post, but it very well could be. setting `shadow.innerHTML` would not recreate slotted elements.

are there any hosting providers that you know for certain are not problematic in some way?

(ideally not AWS-based, because fuck amazon)

how would you markup your eyebrow? 🤨

what's an eyebrow?

oh, you already know. even if you haven't heard that term before. it was a popular design trend for a minute.

i would probably mark this up as:

```
<hgroup role="group">
<p>Augmented reality</p>
<h1>A new world all around you</h1>
</hgroup>
```

depending on how important the eyebrow is vs the heading, i might consider flipping the DOM order and then reversing it with CSS.