Notes on engineering, developer experience, design systems, and agentic engineering.Page 4 Tue, Jan 06, 2026 CSS only scroll fade example that I implemented on ibrewmyown.coffee :
@supports ( animation-timeline : scroll ()) { @property --fade-left { syntax: "<length > "; inherits: false; initial-value : 0px; } @property --fade-right { syntax: "<length > "; inherits: false; initial-value : 0px; } .scroll-fade { --fade-distance : 40 px ; mask-image : linear-gradient ( to right , transparent 0 , #000 var ( --fade-left ), #000 calc ( 100 % - var ( --fade-right )), transparent 100 % ); mask-size : 100 % 100 % ; mask-repeat : no-repeat ; animation : fade-in-left 1 linear both , fade-out-right 1 linear both ; animation-timeline : scroll ( x self), scroll ( x self ); animation-range : 0 % 12 % , 88 % 100 % ; } @keyframes fade-in-left { from { --fade-left : 0 px ; } to { --fade-left : var ( --fade-distance ); } } @keyframes fade-out-right { from { --fade-right : var ( --fade-distance ); } to { --fade-right : 0 px ; } } } Mon, Dec 15, 2025 wojtek.im
Wed, Dec 03, 2025 ibrewmyown.coffee
Tue, Nov 18, 2025 resilient-ui.com
Wed, Nov 05, 2025 motion.dev
Wed, Nov 05, 2025 resilient-ui.com
Thu, Oct 23, 2025 Preserve modal aspect ratio across viewport sizes This is one of those that feels like it should be easier than it ends up being, but here is where I landed at to ensure a modal image preserves its 3/2 aspect ratio no mater the viewport width/height.
.modal { aspect-ratio : 3 / 2 ; height : min ( calc ( 100 vh - 2 rem ), calc (( 100 vw - 2 rem ) * 2 / 3 )); margin : auto ; position : relative ; } See it in action on I Brew My Own Coffee .
Sun, Sep 28, 2025 It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.
In this alternative approach I am using color-mix to create a similar disabled effect without the opacity.
< button class = "bg-[color-mix(in_srgb,var(--color-blue-500)_50%,var(--color-background))] text-[color-mix(in_srgb,var(--color-white)_50%,var(--color-background))]" disabled > Hello world </ button > Sat, Sep 20, 2025 dither.floriankiem.com
Fri, Sep 19, 2025 vercel.com
Fri, Sep 12, 2025 I’ve been fortunate to work with some amazing people over the years and a couple of those folks are open for new opportunities . Scoop them up.
Sat, Sep 06, 2025 Fixing folks list alignment one PR at a time.
Fri, Sep 05, 2025 Two fantastic pieces of web inspiration:
Fri, Sep 05, 2025 ui.alexcarpenter.me
I’ve been slowly working on my own shadcn/ui registry while learning more about the whole component distrubution setup at work. So far I have the following components:
<InfoList /><InlineText /><PricingTable /> Tue, Aug 26, 2025 ethanniser.dev
Tue, Aug 26, 2025 jakub.kr
Mon, Aug 25, 2025 Another use case for absolute positioning elements within inline text to support hanging punctuation.
Supports varying sizes of text, without the need for custom negative text indent values.
< p class = "relative inline-block" > < span class = "absolute right-full" >“</ span >Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste officia quasi fugiat, dolores ab nam repellendus voluptate” </ p > Sat, Aug 23, 2025 silkhq.com
Mon, Aug 18, 2025 github.com
Mon, Aug 18, 2025 Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I shared last week to vertically center it.
< p class = "relative inline-block pr-[1.25em]" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, ducimus < span class = "absolute ml-[.25em] inline-flex h-[1lh] items-center" > < Icon name = "arrow-up-right" class = "size-[1em]" /> </ span > </ p > Picked this tip of from John Phamous some time ago.
4 / 7 Next