iiinova — where your digital self keeps evolving

Mayank

@mayank.co

3.9K followers 431 following 628 posts

front-of-the-front end developer. usually writing CSS or listening to prog (or both). they/them

Posts Replies Media

Mayank @mayank.co · 15/04/2026

ah yes, my favorite artists: ERRA, ERRA, Unprocesse d

Tidal's UI showing "Your favorite artists", with ERRA listed twice and Unprocessed displayed with the letter d wrapping onto its own line.

120

Mayank @mayank.co · 01/04/2026

hehe position:sticky note. codepen.io/editor/hi_ma...

0200

Mayank @mayank.co · 30/03/2026

one of the recent changes they made is this frosted glass effect, which does wonderful things for legibility.

Screenshot of tidal's bottom bar, playing the track "Salva" by Karnivool. The entire thing has a frosted glass background, revealing white colors from behind. The artist name and icons are really dimmed and barely visible.

220

Mayank @mayank.co · 30/03/2026

tidal keeps updating their UI seemingly every other day, and yet large parts of it remain untouched and broken. so many design issues just in this one little screenshot.

Screenshot of tidal's mobile homepage, showing two columns of tiny cards, all of them using the media object layout. Because of the small width, the labels are truncated. Because of the small height, the sublabels (artist names) are clipped by the bottom edge. Things are also generally misaligned and visually unbalanced.

250

Mayank @mayank.co · 27/03/2026

🎯 it's the main reason i stopped writing.

screenshot of a portion of my website saying "My blog is currently on hiatus indefinitely." under the heading 2025–

140

Mayank @mayank.co · 26/03/2026

just pushed up my March 2026 music snapshot to obsessions.mayank.co 👀

Visual representation of my music listening history on a dark grainy background. The top artists are: ERRA, Halestorm, Sordid Pink, Opeth, and Gojira, all shown in different colors on top of their circular avatars scattered somewhat chaotically on the screen. The top albums are: Silence Outlives The Earth by ERRA, Sordid Pink by Sordid Pink, Sorceress by Opeth, Everest by Halestorm, and An Undying Love for a Burning World by Neurosis, each shown with their cover and varying degrees of rotation applied.

030

Mayank @mayank.co · 18/03/2026

that looks like a perfectly cromulent button, which i shall click. wait, fuck! codepen.io/editor/hi_ma...

051

Mayank @mayank.co · 13/03/2026

what's the difference between these two lines of code? the first one imports the styles into a layer named css_is_awesome. the second one imports the styles into an anonymous layer if `@media (css_tooling_sucks)` matches. i've lost so many hours to this over the years.

@import "styles.css" layer(css_is_awesome);
@import "styles.css" layer (css_tooling_sucks);

2212

Mayank @mayank.co · 28/02/2026

it's here and it's glorious! (running the bunnyPod theme: github.com/mgingras-png...)

A digital audio player placed on a hardwood surface with in-ear-monitors connected to it. The device says "HiFi Walker" in stylized all caps right underneath the screen. There's a giant scroll-wheel with a play/pause button in the middle, and a few other tactile buttons for previous/next/back, etc. The screen shows that it's currently playing Spiritbox's "Cellar Door" from the album "The Fear of Fear". The interface uses a blue monochrome planet, with several pixel-y decorative elements framing the player: a cute bunny, stars, clouds and sparkles. The song's progressbar is filled with even more shapes, like hearts!

250

Mayank @mayank.co · 05/02/2026

"CSS is my passion"

Screenshot of a corner of a screen that says "By the people who made Tailwind CSS & Refactoring UI" followed by what looks like two paragraphs of illegible text overlapping each other.

2587

Mayank @mayank.co · 28/01/2026

forgot i left this comment here lol

devToolbar: { enabled: false }, // fuck off

3151

Mayank @mayank.co · 22/01/2026

scroll shadow has got to be my favorite thing to add to tables

4302

Mayank @mayank.co · 17/01/2026

design tools and i will never be friends 💔

Screenshot of a dialog for creating a new color token with the name color-text-primary and the value oklch(1.0 0.002 210). Underneath, a red error message says "Invalid color value".

Screenshot of a dialog for creating a new font-size token with the name font-size-base and the value 1rem. Underneath, a red error message says "Invalid token value".

1180

Mayank @mayank.co · 20/12/2025

i think my copy of bluesky is bricked :(

Screenshot of Bluesky's "Age Assurance" notice asking me to add my birthdate. Full text reads: "Hi there! In order to provide an age-appropriate experience, we need to know your birthdate. This is a one-time thing, and your data will be kept private. Set your birthdate below and we'll get you back to posting and exploring in no time!"

340

Mayank @mayank.co · 19/09/2025

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;
}

120

Mayank @mayank.co · 19/07/2025

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."

0181

Mayank @mayank.co · 26/06/2025

how i sound at work

Natalie from The Bear, on the phone, saying "and we can still make two components work."

010

Mayank @mayank.co · 06/12/2024

this feels good

git diff: 660 lines added, 5001 lines removed

8774

Mayank @mayank.co · 27/11/2024

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.

4133

Mayank @mayank.co · 23/11/2024

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

120

Mayank @mayank.co · 22/11/2024

i hope bluesky never pulls this move for logged out users

251

Mayank @mayank.co · 16/11/2024

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.

161

Mayank @mayank.co · 07/11/2024

so it begins

git diff showing replacing the astrojs/vercel/serverless adapter with the astrojs/netlify adapter

0281

Mayank @mayank.co · 06/11/2024

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.

100

Mayank @mayank.co · 02/11/2024

i pulled the bsky repo just so i could remove that thing

3120

Mayank @mayank.co · 29/10/2024

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)

120

Mayank @mayank.co · 25/10/2024

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...

120

Mayank @mayank.co · 25/10/2024

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%);
}
}

181

Mayank @mayank.co · 25/10/2024

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; }

110