A curated timeline of thoughts, security write-ups, building in public, and software engineering notes.
@mannupaaji
Use πππππππ-πππππ‘() to stagger children of a parent without having to manually track a using --π πππππππππ or having to use an animation library .ππππ { πππππππππ: πππππ πΆ.πΊπ»π πππππ-πππ£πππ(πΆ.πΈπΈ, π·, πΆ.πΉπΌ, π·)
@mannupaaji
Using `π·ππ` instead of `π·ππ` for inline icons or logos accounts for the extra line height additions. .ππππ { ππππππ: π·ππ; π ππππ: π·ππ; } The logo fills up the visual length of the text line exactly. Change your πππππππ / ππππ-ππππππ
@mannupaaji
An upper shadow of as small as πΆ.π»ππ‘ can help your buttons stand out <ππππππ ππππππ½πππ="πππππππ-ππππ ππ-ππππππ-ππ-π ππππ-πππππππ-πΏπΆπΆ ππ-πππππ ππ‘-πΊ ππ’-πΈ πππ‘π-π ππππ
@mannupaaji
One of my favourites latest CSS property is ππππππ πππππππππππ .πππππππ { ππππππ-ππππ: --πππ; } .πππππππ { ππππππππ: πππ‘ππ; ππππππππ-ππππππ: --πππ; ππππππππ-ππππ: πππ ππππππ;
@mannupaaji
you can create a CSS only carousel with CSS `ππππππ-ππππ` .ππππππππ { ππππππππ -π‘: ππππ; ππππππ-ππππ-ππ’ππ: π‘ πππππππππ’; ππππππ-πππππππ-ππππππ: π·.π»πππ; /* πππππππ π’πππ
@mannupaaji
I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via @shadcn CLI or Open in @v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an
@mannupaaji
For dark mode box shadows, use a layered dark color for the shadow instead of white to add elevation to your cards πππ‘ππππππ : ππππ(πΆ, πΆ, πΆ, πΆ.πΊπΈ) πΆππ‘ π»πΊππ‘ π»π»ππ‘, ππππ(πΆ, πΆ, πΆ, πΆ.πΉπΌ) πΆππ‘ -π·πΈππ‘ πΉπΆππ‘, ππππ(πΆ, πΆ, πΆ, πΆ.πΈπΆ)
@mannupaaji
Create multiple lines and scales around your cards with πππππππππ-ππππππ-ππππππππ Instead of using divs and spans, use πππππππππ-ππππππ-ππππππππ and ππππ-π-ππππ-π»πΆ% for smooth set of lines <πππ
@mannupaaji
Left: ππππππ ππππππ-πππππππ-πΈπΆπΆ Right: ππππππ -ππ ππππππ -πππππ/π·πΆ ππππ-π· ππππ-πππππ/π·πΆ Shadow paired with a ring utility elevates the input boxes to a very subtle extent. i love the right one personally.
@mannupaaji
Create image reveal effects with CSS ππππ-ππππ .ππππππ { ππππ-ππππ: πππππ(πΆ π·πΆπΆ% πΆ πΆ); πππππππππ: ππππ -πππππ π·π ππππ ππππ ππππππ; } @πππ’ππππππ ππππ -πππππ { ππ {
@mannupaaji
Use the π πππππ·ππππ prop on the parent to animate children <ππππππ.πππ π πππππ·ππππ="πππππππ" πππππππ="πππππππ"> ... <ππππππ.πππ ππππππππ={{πππππππ: π’:πΊπΆ, π‘: πΈπΆ}}> ...
