Composition is all you need.
youtube.com
See also vercel-composition-patterns
npx skills add vercel-labs/agent-skillsNotes on engineering, developer experience, design systems, and agentic engineering.
Page 4
When life gives you lemons, write better error messages
wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f
- Say what happened
- Say why it’s a problem
- Point out how to solve the problem
TIL you can slow down animations in Chrome DevTools.
Press cmd+shift+p (or ctrl+shift+p on Windows/Linux), then search for “animations”. An Animations panel will appear at the bottom of DevTools where you can adjust the playback speed to 100%, 25%, or 10%. All animations on the page will now run at the selected speed.
Greppability is an underrated code metric
morizbuesing.com
Annotating for agents
benji.org
21 Lessons From 14 Years at Google
addyosmani.com
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: 40px; 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: 0px; } to { --fade-left: var(--fade-distance); } } @keyframes fade-out-right { from { --fade-right: var(--fade-distance); } to { --fade-right: 0px; } } }How to target Safari with a CSS @supports media query
wojtek.im
2025 Holiday Coffee Gift Guide
ibrewmyown.coffee
RESILIENT—UI interview #002 with Hayden Bleasel
resilient-ui.com
The Web Animation Performance Tier List
motion.dev
RESILIENT—UI interview #001 with Dima Belyaev
resilient-ui.com
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(100vh - 2rem), calc((100vw - 2rem) * 2 / 3)); margin: auto; position: relative; }See it in action on I Brew My Own Coffee.
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>Dither plugin for TailwindCSS
dither.floriankiem.com
▲ Vercel Web Interface Guidelines
vercel.com
See also Rauno’s Web Interface Guidelines.
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.
Fixing folks list alignment one PR at a time.
Two fantastic pieces of web inspiration:
My shadcn/ui registry
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 />
A list component with support for items, headers, and icons slots.<InlineText />
An inline text component with an icon slot that wraps perfectly with the text.<PricingTable />
A pricing table component with support for monthly/yearly pricing.