Astro has dynamic tags — a way to take an element or component as a prop. I had trouble finding the feature because the React community calls this pattern the “polymorphic as prop”. Because we enjoy our pseudo-computer-science bullshit artisinally. Dynamic tags are simple to implement in Astro. No-fuss implementation Take a…

Let’s talk about console.log-driven development. We all do it. So, instead of fighting it, let's upgrade it with Storybook Actions. Feature instability and mitigations Storybook actions are a feature of Storybook 6 and 7. There’s an active design proposal to make them work like conventional testing mocks. This would be a welcome change, imo. …

If you document design systems, I’m about to save you a ton of time. Because Storybook comes with lesser-known components for organizing colors, typography, and icons. ColorPalette Display color systems with the ColorPalette component.

There’s no first-class Lucide integration for Astro. But making a custom one isn’t too hard. This is the component I made to do the job: --- const { icon, ...props } = Astro.props; const [, attributes, children] = icon; const componentChildren = children ?.map( ([shape, attributes]) =>…

The VS Code Explorer displays folders at the top of a directory. This is a common hierarchy that I like in most cases. But I hate it for content. For content sites — like chan.dev — I prefer alphabetical order. …

YouTube makes it easy to copy-paste a video embed. LOVE THAT! But, the default embed isn’t responsive so it is guaranteed to look shit wherever you embed it. I’ve drug this snippet around the internet with me for years. /* youtube embed wrapper */ [data-responsive-youtube-container] { position: relative; width…

Add a color scheme switcher to Storybook — When WhatsApp added dark mode in 2020, they said it was “the most requested feature from users everywhere.” Whether it’s just stylistic preference or an effort to reduce eye strain, dark mode is on your users’ minds. Storybook is the ideal environment to develop, document, and — with Chromatic —…

Component documentation is critical but doesn’t tell the whole story. Wouldn’t it be nice if stories could show you how a component looks after a user interacts with it? Component testing allows you to capture these interactions as stories using testing-library! In our latest YouTube tutorial, chantastic explores interactive component…

Storybook is made for teams. You set up Storybook’s tools once and they’re available on any machine, in any browser, with any skill level. Storybook Viewport allows developers, designers, and other collaborators to see components and pages in every supported device and orientation. This week chantastic shows teams how to…