Skip to content
tezvyn:

All bites

The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.

8668 bites

Page 41

Design Systems1 min read

Minimizing library bundle-size impact on consumers

Track size in CI with size-limit, support granular imports, externalize peers, lazy-load heavy parts, audit with bundle analyzers.

Design Systems1 min read

Building a visual regression testing pipeline

Snapshot Storybook stories per PR, freeze nondeterminism, set diff thresholds, manage baselines via approvals.

Design Systems1 min read

Syncing design tokens from Figma to code

Export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI.

Design Systems1 min read

Bundling a library for tree-shaking and multiple formats

Externalize peers, emit ESM and CJS, preserve modules for tree-shaking, set sideEffects false, ship types.

Design Systems1 min read

Releasing a breaking change without forcing upgrades

Ship a major bump, keep the old major published, document migration, automate with Changesets.

Design Systems1 min read

Monorepo vs polyrepo for a design system

Atomic cross-package changes and shared tooling versus build orchestration, caching, and versioning complexity.

Design Systems1 min read

CSS-in-JS vs pre-compiled CSS for distribution

Runtime cost and dynamic theming of CSS-in-JS versus cacheability and SSR simplicity of static CSS.

Design Systems1 min read

Storybook's role in design system infrastructure

Isolated development, living documentation, visual and interaction testing, shared review surface.

Design Systems1 min read

Publishing a component to a private NPM registry

Configure package.json fields and scoped name, build dist, set registry auth, npm publish with access restricted.

Design Systems1 min read

Measuring design system documentation effectiveness

Search-with-no-results, time-to-first-component, support-ticket deflection, tied to analytics and registry data.

Design Systems1 min read

Documenting component anti-patterns and don'ts

Paired do/don't examples, explain the why, enforce with lint rules.

Design Systems1 min read

Auto-generating component API docs from source

Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc.

Design Systems1 min read

Structuring Storybook stories for visual states

One named story per state with explicit args, plus argTypes and controls.

Design Systems1 min read

Designing a multi-step wizard form pattern

A wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps.

Design Systems1 min read

Architecting a composable DataTable API

Separate a headless data/state core from rendering, use a column-definition config with custom cell renderers, expose composition over dozens of flags.

Design Systems1 min read

The slots pattern for a PageLayout component

Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents.

Design Systems2 min read

Decoupling Form state from its Field components

Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field.

Design Systems1 min read

Designing a Modal with controlled open state

Parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.

Design Systems1 min read

Designing a responsive Grid with breakpoint props

Accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop.

Design Systems1 min read

Building a flexible Card with optional content

Use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering.