Mayank
LightNews LightNews
mayank.co
Mayank
@mayank.co
3.7K followers 410 following 510 posts
front-of-the-front end developer.

usually writing CSS or listening to prog (or both).

they/them
Posts Replies Media Videos
mayank.co
ok :D
Screenshot of a portion of a CSS reset highlighting scrollbar-gutter: stable on the html element. Full snippet: :where(html) { -webkit-text-size-adjust: none; color-scheme: dark light; tab-size: 2; scrollbar-gutter: stable; interpolate-size: allow-keywords; line-height: 1.5; } :where(html:has(dialog:modal[open])) { overflow: clip; }
September 19, 2025 at 12:51 PM
mayank.co
the next generation of stalebots
Screenshot of a conversation on github. Someone said "Dosubot, the issue still persists", after which dosubot removed the stale label but also closed the issue with the following comment: "Thank you for your response! We appreciate your input regarding the issue. Since you mentioned it still persists, we'll go ahead and close this issue for now."
July 19, 2025 at 6:09 PM
mayank.co
how i sound at work
Natalie from The Bear, on the phone, saying "and we can still make two components work."
June 26, 2025 at 1:47 PM
mayank.co
this feels good
git diff: 660 lines added, 5001 lines removed
December 6, 2024 at 4:54 PM
mayank.co
stop fucking with links. why do you think i clicked the link?
Dialog overlaying the whole screen. The text reads "Leaving Bluesky. This link is taking you to the following website" followed by a wired.com URL.
November 27, 2024 at 2:14 AM
mayank.co
every JS monorepo MUST have multiple copies of esbuild inside node_modules
Screenshot of terminal output showing 4 different versions of esbuild running their postinstall step.
November 25, 2024 at 11:16 PM
mayank.co
yup, it's my daily driver. i love that it's based on firefox, so i get all the nice things: dev-tools, tab containers, sync for mobile
screenshot of this very post in zen browser
November 23, 2024 at 5:46 PM
mayank.co
i hope bluesky never pulls this move for logged out users
A popup dialog that says "Stop: Classified. Just kidding. Simply sign up for free to dive into the limitless, effervescent worlds right here on Tumblr. You won't regret it. In fact, it might just be the best decision you ever make. Sign up or log in with google, apple or email. Coming from Twitter/X? Sign up." Above these words there is a somewhat cute, animated illustration meant to represent what Tumblr would feel like.
November 22, 2024 at 2:40 AM
mayank.co
i didn't want to "lose" this particular tweet, because it has sentimental meaning to me and it resonated with so many other people.

it was shown by @una.im at CSS Day. youtu.be/dkBeBxs48os
Una talking at CSS Day, displaying my "CSS ten years ago" tweet on the slide. The tweet contents are displayed in full, along with my name at the bottom. The slide is stylized with a fun geometrical theme, instead of displaying a boring tweet embed.
November 16, 2024 at 1:37 AM
mayank.co
so it begins
git diff showing replacing the astrojs/vercel/serverless adapter with the astrojs/netlify adapter
November 7, 2024 at 12:57 AM
mayank.co
working on this and it doesn't feel right.

the notification-count is app-wide state, whereas this is specific to the feed. i need do it in a roundabout way, lifting state up that probably shouldn't be lifted up.

@danabra.mov what do you think of the phanpy-style button? bsky.app/profile/maya...
Cropped screenshot showing a blue dot anchored to the "Home" icon button in the Bluesky navigation bar.
November 6, 2024 at 1:14 AM
mayank.co
i pulled the bsky repo just so i could remove that thing
November 2, 2024 at 2:57 PM
mayank.co
there are so many nice UX details in Phanpy.

- all engagement numbers hidden in timeline
- long tap post for options
- scroll up to hide "scroll to top" button (so it's not in your face all the time)
- tap profile for quick "peek" (alternative to hover cards)
October 29, 2024 at 12:29 PM
mayank.co
it's a good change. i just find it funny that they had to reiterate it multiple times
Dynamic: If you're still iterating or building a highly dynamic dashboard, you can wrap the component in a <Suspense> boundary. <Suspense> opts into dynamic data fetching and streaming. You can also do this in your root layout or use loading.tsx. This ensures that the shell of your app remains instant. You can continue adding more data inside your Page, knowing it will all be dynamic by default. Nothing is cached by default. No more hidden caches. Static: If you're building something static and don't want to use dynamic functionality, you can use the new use cache directive.
October 27, 2024 at 12:49 AM
mayank.co
10. you can build a "scroll shadow" using scroll-driven animations! no JS needed

it's chrome only rn but that's ok. great candidate for progressive enhancement

demo from @bram.us: scroll-driven-animations.style/demos/scroll...

article from @davatron5000.bsky.social: daverupert.com/2023/08/anim...
October 25, 2024 at 8:16 PM
mayank.co
9. switching gears, did you know you can mix two colors using CSS `color-mix`? developer.mozilla.org/en-US/docs/W...

great for things like hover effects, where you want to slightly adjust the existing color. no need for defining extra tokens.
Screenshot of the following CSS: button { background: var(--bg); &:hover { background: color-mix(in srgb, var(--bg) 100%, white 10%); } }
October 25, 2024 at 7:48 PM
mayank.co
8. !important works a bit differently inside layers.

while styles in a lower layer normally lose to styles in a subsequent layer, this order is flipped for !important.

this means you can use !important to "seal" off CSS declarations that you are confident should never be overridden.
Screenshot of the following CSS code: :where([hidden]:not([hidden='until-found'])) { display: none !important; }
October 25, 2024 at 7:33 PM