@mayank@front-end.social avatar

mayank

@mayank@front-end.social

design engineer and tinkerer. always listening to prog.

posts are about HTML, CSS and other web stuff. will auto-delete after N days.

trying to build a less broken, more accessible web

This profile is from a federated server and may be incomplete. Browse more on the original instance.

mayank, to random
@mayank@front-end.social avatar

POV: when you use a google browser to surf the interwebs

mayank,
@mayank@front-end.social avatar

in case it's not obvious: chrome is literally injecting its own sign-in banner in front of webpages. this is not coming from wikipedia.

yes, it's a banner intended for reddit.com.

no, it's not photoshopped.

mayank,
@mayank@front-end.social avatar

@keithjgrant those are obnoxious, but at least the blame can be placed on the site embedding them

mayank, to webdev
@mayank@front-end.social avatar

i created a tiny (~10LOC) custom element to demonstrate how easy it can be to avoid repetition of shadow dom templates.

why can't we have something like this built into ? seems fairly safe and uncontroversial

https://www.mayank.co/notes/use-html

mayank, to CSS
@mayank@front-end.social avatar

this is a @kizu appreciation post.

the more i play with cyclic #CSS toggles, the more i grow to love it. it's so fucking useful! https://kizu.dev/cyclic-toggles/

mayank, to random
@mayank@front-end.social avatar

📝 new blog post: "web components" considered harmful

https://www.mayank.co/blog/web-components-considered-harmful

mayank,
@mayank@front-end.social avatar

this is my first blog post in couple months. didn't quite turn out exactly how i'd like (words are hard), might improve later.

also if you disagree, that's okay lol. it doesn't really matter what you call them, i'm just trying to advocate for better clarity.

mayank,
@mayank@front-end.social avatar

@tbroyer i guess one difference is that any unknown element with a hyphen in its name is officially reserved for author use. browsers will never add new elements that clash with them

mayank,
@mayank@front-end.social avatar

@tbroyer true yeah, but those examples are just "unknown elements", whereas a tag name with a dash explicitly creates a "custom element" (which may or may not be defined later).

aardrian, to random
@aardrian@toot.cafe avatar

I have no recollection why I made this a couple years ago, but stumbling across it just now brought me joy. I mean, not the kind of joy others might feel, because I am kind of fucked up.

https://codepen.io/aardrian/pen/OJvQdjK

mayank,
@mayank@front-end.social avatar

@aardrian <header role=button tabindex=0> when?

geoff, to random
@geoff@front-end.social avatar

Funny Container Query Defaults https://geoffgraham.me/funny-container-query-defaults/

mayank,
@mayank@front-end.social avatar

@geoff yes! we should just drop the style()

these two look distinct enough to not need disambiguation through size() or style():

@container (inline-size > 69ch)  
@container (--prop: whatever)
mayank, to random
@mayank@front-end.social avatar

TIL iOS Safari doesn't respect the system-wide font-size preference.

there is a per-site slider but it's more akin to page zoom than font size.

in other words, using rem and em units has no effect in iOS by default. it does not scale with user's base font size and behaves identically to px.

(thanks to @ben for testing)

mayank,
@mayank@front-end.social avatar

i said "by default" because there is a proprietary CSS value you can use:

font: -apple-system-body;

(credit: @colingourlay
https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0 )

it's wild that we need to do this to support a "modern" browser in 2024

mayank,
@mayank@front-end.social avatar

i am unironically looking forward to a chromium monopoly one day (even if that's "bad" for a whole bunch of reasons)

apple has consistently and relentlessly shown that they cannot be trusted to build a reliable browser. this is a multi-Trillion dollar company!

the really ugly thing about this is, unless you buy their thousand dollar iPhone, you won't even know what's broken. apple finds ways to break basic functionality that should be taken for granted (see https://www.mayank.co/blog/safari-focus )

mayank,
@mayank@front-end.social avatar

this is not to say chrome/android doesn't have its own quirks. (see https://matuzo.at/blog/2023/how-browsers-zoom-text from @matuzo)

but it's still a gotcha that makes it unnecessarily difficult to build websites.

all the advice around "use rems for [content] and pixels for [spacing]" now needs to be heavily caveated.

mayank, to random
@mayank@front-end.social avatar

one day we'll have "real" HTML modules and CSS modules

(i can hope)

mayank,
@mayank@front-end.social avatar

sometimes i get frustrated that we still don't have important features like HTML modules. (the need is so obvious!)

my frustration comes from multiple angles:

  • in absence of platform features, we need to reach for tools (which can suck majorly).
  • proposals are skewed by library maintainers/users who sometimes have strong one-dimensional opinions on how the platform should work.
  • discussions are dominated by the needs of big tech companies, alienating those who don't have the same constraints
zachleat, to random
@zachleat@zachleat.com avatar

the public perception of AI has been permanently damaged by shitposting in training models

…we all understand what needs to happen next, right

mayank,
@mayank@front-end.social avatar

@zachleat Here's how you can make your own password manager for free:

  1. Create a passwords.csv file containing usernames, passwords, and site URLs (comma-separated and one account per line).
  2. Serve it from the root of your website! Now you can access all your passwords on any device at <your-website>/passwords.csv
  3. (Optional) Add the following line to your robots.txt file to let password crawlers know where your passwords file is located: Passwords: /passwords.csv

Done!

mayank, to random
@mayank@front-end.social avatar

since i switched instances this week, i thought i'd do a (re) .

hi! my name is Mayank. i go by they/them pronouns.

i'm a design engineer (or "frontend developer" in less fancy terms) trying to build a less broken, more accessible web.

i write a lot of HTML/CSS/JS, so i post a lot about it too. web standards stuff yes, but also framework stuff. anything relevant for building websites.

here's my website that i can never find enough time to work on: https://mayank.co

mayank,
@mayank@front-end.social avatar

i blog semi-frequently about new-ish frontend stuff. you might like my post about shadow dom: https://www.mayank.co/blog/declarative-shadow-dom-guide

more recently, i gave a talk at 11ty conf about the cascade: https://conf.11ty.dev/2024/dont-fear-the-cascade/ (blog post pending!)

i also tend to run my mouth, both on here and on my blog (see https://www.mayank.co/blog/safari-focus for example)

what you'll find in my posting is that if i see some bullshit (and there's a lot of bullshit in tech), i'll call it out. i don't like pretending things are fine.

mayank, to CSS
@mayank@front-end.social avatar

now has round() and it's a big deal!

unlike say, Sass math.round(), this is much more powerful because it can round across units, and at runtime.

this is super useful when you have something like a percentage value that normally evaluates to a fractional pixel value.

top: 50%; /* computes to 662.27px */  
top: round(50%, 1px); /* computes to 662px */

rounding such values will make them fit better in the pixel grid, avoiding potential blurring issues on some (windows) devices

mayank,
@mayank@front-end.social avatar

here's something CSS also has now: rem()

no, it doesn't convert things to the rem unit. it does something completely unrelated. 😐

https://danielcwilson.com/posts/mathematicss-rem-mod/

aardrian, to accessibility
@aardrian@toot.cafe avatar

Chrome / TalkBack bug I first reported in 2020, and which was fixed for a time (?) appears to be back. Looking for confirmation before I file yet another one.

A named region with a tabindex does not expose its contents. Chrome / TalkBack only announces its accName and role.

I think I have an ugly workaround (“Shawarma” heading).

Test case:
https://codepen.io/aardrian/pen/ExzyadL

Similar to issue I filed earlier this month, which I limited to APG tab panels.

#accessibility #a11y

mayank,
@mayank@front-end.social avatar

@aardrian can confirm

mayank,
@mayank@front-end.social avatar

@aardrian it "works", but i think it's not quite the same as having one continuous paragraph

mayank,
@mayank@front-end.social avatar

@aardrian
Talkback 14.2, Chrome 125, Android 14, Pixel 7

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines
    •