Mayank
@mayank.co
front-of-the-front end developer.
usually writing CSS or listening to prog (or both).
they/them
usually writing CSS or listening to prog (or both).
they/them
Pinned
Mayank
@mayank.co
· Nov 16
CSS ten years ago: you may have a little bit of flexbox. It's buggy but that's the best we can do, sorry
CSS now: what do you need? clamp? aspect-ratio? container queries? :has? inert? cascade layers? not only is it possible, it's already shipping!
CSS now: what do you need? clamp? aspect-ratio? container queries? :has? inert? cascade layers? not only is it possible, it's already shipping!
flashback to debugging broken layouts in safari
You ever see a weird ass bug that makes you question the existence of everything?
November 9, 2025 at 11:29 PM
flashback to debugging broken layouts in safari
Design Tokens specification reaches first stable version | Design Tokens Community Group
www.w3.org
October 29, 2025 at 3:59 PM
can any Nova users vouch for it?
as someone who dislikes Apple UX, i'm always skeptical of Mac-only apps.
but really i just need strong support for the languages of the web: HTML, CSS, JS (including TS and JSX). these languages are usually overlooked by code editors.
as someone who dislikes Apple UX, i'm always skeptical of Mac-only apps.
but really i just need strong support for the languages of the web: HTML, CSS, JS (including TS and JSX). these languages are usually overlooked by code editors.
Nova
The beautiful, fast, flexible, native Mac code editor from Panic.
nova.app
September 30, 2025 at 9:31 PM
can any Nova users vouch for it?
as someone who dislikes Apple UX, i'm always skeptical of Mac-only apps.
but really i just need strong support for the languages of the web: HTML, CSS, JS (including TS and JSX). these languages are usually overlooked by code editors.
as someone who dislikes Apple UX, i'm always skeptical of Mac-only apps.
but really i just need strong support for the languages of the web: HTML, CSS, JS (including TS and JSX). these languages are usually overlooked by code editors.
i like this rephrasing, but also: they often mean the same thing.
❌ mobile first
✅ container first
✅ container first
September 21, 2025 at 5:01 PM
i like this rephrasing, but also: they often mean the same thing.
shoutout to anyone still working on design systems in 2025. it's rough out here
September 11, 2025 at 10:41 PM
shoutout to anyone still working on design systems in 2025. it's rough out here
Reposted by Mayank
I considered writing a long carefully constructed argument laying out the harms and limitations of AI, but instead I wrote about being a hater. Only humans can be haters.
I Am An AI Hater
I am an AI hater. This is considered rude, but I do not care, because I am a hater.
anthonymoser.github.io
August 27, 2025 at 5:04 PM
I considered writing a long carefully constructed argument laying out the harms and limitations of AI, but instead I wrote about being a hater. Only humans can be haters.
an industry standard pattern:
when you scroll a page, a dialog pops up out of nowhere and autofocuses a text field, which then triggers the virtual keyboard.
peak UX right there. possibly the most elaborate way to say "fuck you"
when you scroll a page, a dialog pops up out of nowhere and autofocuses a text field, which then triggers the virtual keyboard.
peak UX right there. possibly the most elaborate way to say "fuck you"
August 1, 2025 at 8:15 PM
an industry standard pattern:
when you scroll a page, a dialog pops up out of nowhere and autofocuses a text field, which then triggers the virtual keyboard.
peak UX right there. possibly the most elaborate way to say "fuck you"
when you scroll a page, a dialog pops up out of nowhere and autofocuses a text field, which then triggers the virtual keyboard.
peak UX right there. possibly the most elaborate way to say "fuck you"
if you're wondering what working on a design system feels like
today i've already had conversations about:
- rem vs px
- logical properties/units
- color-mix
- popover API and top layer
- pointer-events/inert
- transforms and blurry text
- use of color and WCAG
- AT support
- …
(char limit)
today i've already had conversations about:
- rem vs px
- logical properties/units
- color-mix
- popover API and top layer
- pointer-events/inert
- transforms and blurry text
- use of color and WCAG
- AT support
- …
(char limit)
July 22, 2025 at 6:30 PM
if you're wondering what working on a design system feels like
today i've already had conversations about:
- rem vs px
- logical properties/units
- color-mix
- popover API and top layer
- pointer-events/inert
- transforms and blurry text
- use of color and WCAG
- AT support
- …
(char limit)
today i've already had conversations about:
- rem vs px
- logical properties/units
- color-mix
- popover API and top layer
- pointer-events/inert
- transforms and blurry text
- use of color and WCAG
- AT support
- …
(char limit)
the next generation of stalebots
July 19, 2025 at 6:09 PM
the next generation of stalebots
playing with the customizable HTML select today.
i find it weird that the `::picker-icon` is a pseudo-element that requires using old-school CSS tricks for customizing the glyph
developer.mozilla.org/en-US/docs/L...
i find it weird that the `::picker-icon` is a pseudo-element that requires using old-school CSS tricks for customizing the glyph
developer.mozilla.org/en-US/docs/L...
one day we'll have a fully customable select (open-ui.org/components/c...). but until then, the suffering continues.
Customizable Select Element (Explainer) | Open UI
Open UI
open-ui.org
July 17, 2025 at 6:09 PM
playing with the customizable HTML select today.
i find it weird that the `::picker-icon` is a pseudo-element that requires using old-school CSS tricks for customizing the glyph
developer.mozilla.org/en-US/docs/L...
i find it weird that the `::picker-icon` is a pseudo-element that requires using old-school CSS tricks for customizing the glyph
developer.mozilla.org/en-US/docs/L...
Reposted by Mayank
I have been back and forth over the span of 5 years about whether to publish this article.
All opinions and experiences in this post are my own, or from people I personally know, backed up with recent reports and statistics.
All opinions and experiences in this post are my own, or from people I personally know, backed up with recent reports and statistics.
Why Women in Tech isn't enough
Women in Tech spaces help, but fall short in the long run. Real progress needs systemic change and active involvement from men in positions of power.
whitep4nth3r.com
July 16, 2025 at 2:25 PM
I have been back and forth over the span of 5 years about whether to publish this article.
All opinions and experiences in this post are my own, or from people I personally know, backed up with recent reports and statistics.
All opinions and experiences in this post are my own, or from people I personally know, backed up with recent reports and statistics.
bluesky won't enable this switch by default, but you should.
today's a great day to make sure "require alt text before posting" is enabled in your settings and to continue to make bluesky more accessible and inclusive bsky.app/settings/acc...
July 9, 2025 at 2:54 PM
bluesky won't enable this switch by default, but you should.
i will not buy another domain.
not until i finish the project.
(this is me holding myself publicly accountable)
not until i finish the project.
(this is me holding myself publicly accountable)
July 3, 2025 at 12:43 AM
i will not buy another domain.
not until i finish the project.
(this is me holding myself publicly accountable)
not until i finish the project.
(this is me holding myself publicly accountable)
hire Nathan!
he is one of the most talented front-of-the-frontend developers out there
he is one of the most talented front-of-the-frontend developers out there
I was laid-off and am looking for a new role.
Working were design meets code is my jam. I am skilled at building accessible design system components, working with Web Components APIs, and creating scalable CSS architecture.
I work remotely from my home in Manitoba, Canada. 🇨🇦
Shares appreciated!
Working were design meets code is my jam. I am skilled at building accessible design system components, working with Web Components APIs, and creating scalable CSS architecture.
I work remotely from my home in Manitoba, Canada. 🇨🇦
Shares appreciated!
June 24, 2025 at 4:49 PM
hire Nathan!
he is one of the most talented front-of-the-frontend developers out there
he is one of the most talented front-of-the-frontend developers out there
maybe this will finally make us all collectively realize that these big tech companies are not very good at design. never have been.
or (more likely), everyone will copy the inaccessible mess.
or (more likely), everyone will copy the inaccessible mess.
June 10, 2025 at 2:57 PM
maybe this will finally make us all collectively realize that these big tech companies are not very good at design. never have been.
or (more likely), everyone will copy the inaccessible mess.
or (more likely), everyone will copy the inaccessible mess.
the "original links" part aged poorly.
bluesky links go through a tracker now (though it's still possible to copy the clean URL)
bluesky links go through a tracker now (though it's still possible to copy the clean URL)
a few things i appreciate about bsky:
- images and videos support alt text (with an option to remind you when posting).
- autoplay can be turned off.
- original links can be copied (none of that t.co nonsense).
- custom labels for displaying things like pronouns or hiding AI slop.
- images and videos support alt text (with an option to remind you when posting).
- autoplay can be turned off.
- original links can be copied (none of that t.co nonsense).
- custom labels for displaying things like pronouns or hiding AI slop.
May 28, 2025 at 4:40 PM
the "original links" part aged poorly.
bluesky links go through a tracker now (though it's still possible to copy the clean URL)
bluesky links go through a tracker now (though it's still possible to copy the clean URL)
all i wanted from Figma was better variable management.
instead, they released a feature so fundamentally broken that it continues to get roasted by devs even on the weekend 💀
instead, they released a feature so fundamentally broken that it continues to get roasted by devs even on the weekend 💀
May 11, 2025 at 3:31 PM
all i wanted from Figma was better variable management.
instead, they released a feature so fundamentally broken that it continues to get roasted by devs even on the weekend 💀
instead, they released a feature so fundamentally broken that it continues to get roasted by devs even on the weekend 💀
i like that Nate calls this out. i've used Astro on a wide range of projects, and hit those boundaries myself.
Astro excels at the "JS sprinkles" use case, and does exceedingly little to help with rich interactivity.
Astro excels at the "JS sprinkles" use case, and does exceedingly little to help with rich interactivity.
There definitely are use cases where Astro’s feature set is a bad fit! I think it’s worth pushing those boundaries for yourself. You might be surprised by the rich, powerfully interactive experiences you can build (many such cases)
But at the end of the day, use whatever helps you ship! 🚢
But at the end of the day, use whatever helps you ship! 🚢
May 11, 2025 at 12:51 AM
i like that Nate calls this out. i've used Astro on a wide range of projects, and hit those boundaries myself.
Astro excels at the "JS sprinkles" use case, and does exceedingly little to help with rich interactivity.
Astro excels at the "JS sprinkles" use case, and does exceedingly little to help with rich interactivity.
free idea: design system documentation in haiku format
May 7, 2025 at 6:31 PM
free idea: design system documentation in haiku format
was trying to use `margin-trim` today.
found that it also gets rid of negative margins, which is unfortunate.
found that it also gets rid of negative margins, which is unfortunate.
Have you ever tried to remove margins from content with `:first-child { margin-block-start: 0; } :last-child { margin-block-end: 0; }` only to feel icky, knowing the code is fragile, just waiting for the layout to break with different HTML?
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Easier layout with margin-trim
If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.
webkit.org
May 1, 2025 at 6:18 PM
was trying to use `margin-trim` today.
found that it also gets rid of negative margins, which is unfortunate.
found that it also gets rid of negative margins, which is unfortunate.
Reposted by Mayank
PSA: `content-visibility` is not ready in Safari even though it's available. If you previously were using the feature as a progressive enhancement, you should also use a Safari-specific selector to ensure it does not apply. I keep on finding significant accessibility issues with the implementation.
May 1, 2025 at 5:34 PM
PSA: `content-visibility` is not ready in Safari even though it's available. If you previously were using the feature as a progressive enhancement, you should also use a Safari-specific selector to ensure it does not apply. I keep on finding significant accessibility issues with the implementation.
it's a good day to re-share xkcd.fyi
i made a thing recently: xkcd.fyi
it's an alternative frontend to xkcd.com with some important differences:
- title text shown in an accessible way
- transcript included for every comic
- link to explainxkcd.com/ (for when you don't get the joke)
- dark mode!
it's an alternative frontend to xkcd.com with some important differences:
- title text shown in an accessible way
- transcript included for every comic
- link to explainxkcd.com/ (for when you don't get the joke)
- dark mode!
xkcd.fyi
xkcd.fyi
April 25, 2025 at 10:27 PM
it's a good day to re-share xkcd.fyi
your outie likes using tailwind
March 19, 2025 at 8:21 PM
your outie likes using tailwind
can we make this the industry standard pls
Oh shit, Assassin's Creed: Shadows has tone tags in its subtitles for non verbal subtext?!?!
Apparently called soemething like "Emotional Indicators"
I have been advocating for game devs to try this as an autism accessibility option for YEARS!!!
I can't believe someone's finally doing it!!!!
Apparently called soemething like "Emotional Indicators"
I have been advocating for game devs to try this as an autism accessibility option for YEARS!!!
I can't believe someone's finally doing it!!!!
March 19, 2025 at 6:16 PM
can we make this the industry standard pls
Reposted by Mayank
what do y'all do with your unclosed tabs?
I've been running pong inside all 240 of mine
blog with a bunch of details over here: eieio.games/blog/running...
I've been running pong inside all 240 of mine
blog with a bunch of details over here: eieio.games/blog/running...
February 20, 2025 at 7:30 PM
what do y'all do with your unclosed tabs?
I've been running pong inside all 240 of mine
blog with a bunch of details over here: eieio.games/blog/running...
I've been running pong inside all 240 of mine
blog with a bunch of details over here: eieio.games/blog/running...