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

is there a way to listen to the "opening" of top-layer elements _without patching globals_?

i want to run some code whenever a `<dialog>` or `popover` opens.

(sorry if i'm out of the loop)

#WebDev #HTML #JavaScript

you know it's December when Hulu and Hbo both want you to watch Elf 200 times

you know it's December when YouTube recommends shit like "lofi christmas". also michael bublé in four different playlists.

google literally knows about every song i've ever listened to in my entire life. it would be so easy for them to give me something relevant. it doesn't have to be like this

i could just accept it as "the way things are". but i choose to keep being angry at how most software sucks in so many little ways (by design).

this doesn't even cover the worst aspects of capitalism, but it's a good read: https://www.wheresyoured.at/never-forgive-them/

playing https://neva.game/ and it's beautiful!

the spinners need to be spun when the javascript is happening

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