Mayank

design engineer who listens to too much prog metal (and sometimes writes css)

i care deeply about accessibility and inclusivity

(previously at @hi_mayank)

Public Key

npub1m8066qm8m2jmhv6w2g7ynm83n5ahke8z22j0l09cuh58uv64ns4s9el5qh

NIP-05 Address

mayank_at_front-end.social@mostr.pub

Profile Code

nprofile1qqsdnhadqdna4fdmkd89y0zfance6wmmvn399f8lhjuwt6r7xd2ec2cpz4mhxue69uhhyetvv9ujumt0wd68ytnsw43qxpvr0s

Publishing to

relay.mostr.pub

Author Public Key

npub1m8066qm8m2jmhv6w2g7ynm83n5ahke8z22j0l09cuh58uv64ns4s9el5qh

Show more details

Last Notes

2024-08-07 19:41:40

based on how many "cards" are on the web, you'd think it'd be more common for these cards to be accessible.
most web developers are still wrapping entire cards in anchors, causing the link's name to comprise the entire title, description and image alt text. sometimes there are even secondary links/buttons nested inside the main link. it's disgraceful.

2024-08-05 16:52:44

i've made a thing: https://xkcd.fyi/
it's an alternative frontend to https://xkcd.com/ with some important differences:
- title text shown in a more accessible way (instead of abusing alt text)
- transcript included for every comic (with newer ones sourced from explainxkcd)
- link to https://explainxkcd.com/ (for when you don't get the joke)
- dark mode!
https://cdn.masto.host/frontendsocial/media_attachments/files/112/910/451/473/418/928/original/80ac0793fbe18911.png

2024-08-02 23:44:56

reading the custom elements specification this evening. it's surprisingly digestible, and way more insightful than the usual docs. https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
two points already stand out so far:
- "The constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root."
- "Any namespace-less attribute […] may be specified on an autonomous custom element."
#HTML #ReadThePlatform

2024-08-02 20:21:28

- reply

@npub1zyl…t54n it will take these corporations more than a few months to destroy everything, so i assume you'll still be able to make it to Toronto in October. should i email you for your mailing address? 👀

2024-07-31 20:48:04

- reply

@npub1zyl…t54n no problem and crap indeed.
the "keyboard-only scrolling areas" post shall continue evolving until morale improves.

2024-07-31 20:39:25

- reply

@npub1zyl…t54n can confirm, focus skips past the scrollable table.
chrome 127.0.6533.89, windows 11

2024-07-29 22:58:46

- reply

@npub1zyl…t54n i don't think apple realizes that some people navigate the web using keyboard only

2024-07-29 21:00:23

PSA since i now realize this isn't common knowledge:
if you're trying to move away from writing TypeScript files to writing JS files with types as JSDoc comments, start here: https://alexharri.com/blog/jsdoc-as-an-alternative-typescript-syntax
and refer to these docs: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
do NOT look at https://jsdoc.app as it will lead you astray

2024-07-18 01:05:05

good repo https://github.com/glitchdotcom/friendly-words

2024-07-10 20:14:38

alt text in #CSS generated `content` is now supported all modern browsers (as of firefox 128 and safari 17.4)
please hide your weird glyphs and icon fonts using an empty string like this:
```
content: "›";
content: "›" / "";
```
https://developer.mozilla.org/en-US/docs/Web/CSS/content#alternative_text

2024-07-05 18:44:09

- reply

@npub1xed…yg9w that's so meta

2024-06-19 15:14:22

- reply

is Git still useful to know? sure.
but knowing Git inside out is not a requirement for you being a good developer. it's just a tool for managing code.
personally i feel like Git sucks and most of us just deal with it, because Git is apparently the best we can do in 2024.
(that's not to detract anyone from learning it. if you start using Git and find it interesting, definitely go learn more. there's some pretty darn cool things you can do with it.)

2024-06-19 15:00:23

you don't need to know Git to be a good developer.
most of your day-to-day will involve committing code and switching branches. these days you can get by without ever typing "git" in your terminal.
i felt the need to say this, because some (white) men are being all gatekeepy about this topic lately

2024-06-07 23:24:11

can we get #CSS `hanging-punctuation` in all browsers pls?
safari has had it for five years now https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation

2024-06-07 00:44:48

- reply

@npub1zyl…t54n i sometimes use this one 🚾

2024-06-06 23:49:24

quick note about the #CSS reset that i'm using for `popover`
https://www.mayank.co/notes/popover-default-styles

2024-06-06 19:42:49

get rid of that auto-rotating carousel / animation. no one will miss it.

2024-06-05 00:36:46

POV: when you use a google browser to surf the interwebs
https://cdn.masto.host/frontendsocial/media_attachments/files/112/561/212/885/241/640/original/54d90d1c1b39ca8e.png

2024-05-31 05:01:35

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 #HTML? seems fairly safe and uncontroversial
https://www.mayank.co/notes/use-html

2024-05-29 00:50:34

- reply

@npub1zyl…t54n `<header role=button tabindex=0>` when?

2024-05-29 00:41:49

📝 new blog post: "web components" considered harmful
https://www.mayank.co/blog/web-components-considered-harmful

2024-05-27 15:35:28

- reply

@npub1vfq…57sa it's just text, so paragraph probably?

2024-05-24 09:01:16

since i switched instances this week, i thought i'd do a (re) #introduction.
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

2024-05-23 12:04:02

- reply

@npub1zyl…t54n
Talkback 14.2, Chrome 125, Android 14, Pixel 7

2024-05-22 14:32:41

- reply

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

2024-05-22 14:28:38

- reply

@npub1zyl…t54n can confirm

2024-05-21 18:58:59

one of my favorite uses of #CSS `:has()` is to change the grid layout based on what's inside the grid
```
grid-template-areas: /* simple layout */
&:has(.thing) {
grid-template-areas: /* more complex layout */;
}
```