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

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.

📝 new blog post: "Your CSS reset should be layered". https://www.mayank.co/blog/css-reset-layer

i've been wanting to publish this one ever since i built my own CSS reset. i waited until layers were "baseline widely available"

@sarajw lessgooo CSS

i'll be curious to hear how it goes with React Aria Components. they do some weird things, is my understanding

@sarajw oh APG is a whole another topic (and yes problematic). but i was getting at something different here:
- React Aria tends to laser focus on SR experience, to the point that they add lots of code to work around SR quirks (not always a good thing).
- they abstract away the DOM too much (e.g. made-up "press" events) which could be a hindrance when you need control. they also overload the `slot` attribute, which can cause problems if you use shadow DOM.
- their components are not polymorphic.

@matovius @sarajw there's good parts and bad parts. APG only shows you how to use ARIA (which may not even be supported), it's not a production-tested pattern library to use as a blueprint. that's why there's a prominent warning on every page

@binarydigit i love that waterfox is independent and that it's one of the only browsers built upon gecko. i daily'd waterfox for a while before i moved onto zen browser, which i like more.

tbh none of the browsers are as good as they should be (or maybe i'm just too picky).

@binarydigit right? it feels half-baked and misleading. work cookies mixing with personal cookies and whatnot

@binarydigit interested in how you'll like it. my experience left a lot to be desired: https://front-end.social/@mayank/112793398800816572

i do like their AI statement https://vivaldi.com/blog/technology/vivaldi-wont-allow-a-machine-to-lie-to-you/

@aral it looks still open source (at least partially)? https://github.com/tldraw/tldraw/tree/main/apps/dotcom/client

@aral @zens this sort of thing should probably be a fragment link. currently a screen-reader user does not get any feedback after clicking the link; it's as if the link were broken. in comparison, clicking a fragment link would move focus to the target element, which gets announced by screen-readers.