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.

4330 bites

Page 149

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

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

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

Storybook's role in design system infrastructure

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

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

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

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

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

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

Building a visual regression testing pipeline

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

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

Managing keyboard focus in an accessible Modal

Move focus in on open, trap Tab inside, close on Escape, restore focus to the trigger on close.

Design Systems1 min read

Enforcing WCAG color contrast programmatically

Pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI.

Design Systems1 min read

ARIA roles and keyboard nav for a Tabs component

Tablist, tab, tabpanel roles with aria-selected and aria-controls; arrow keys move tabs, Tab moves to the panel via roving tabindex.

Design Systems1 min read

Enforcing an accessible name on icon-only buttons

Require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden.

Design Systems1 min read

Accessible toasts with ARIA live regions

A persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount.

Design Systems1 min read

Adapting CSS for Forced Colors Mode

Use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly.

Design Systems2 min read

Shadow DOM accessibility: focus and cross-boundary ARIA

IDREF ARIA can't cross the shadow boundary, so aria-labelledby and aria-activedescendant break; delegatesFocus and ElementInternals/ARIAMixin help.

Design Systems1 min read

Core roles on a design system team

Name design, engineering, product/PM, and accessibility/docs roles with clear ownership.

Design Systems1 min read

Process for adding a new component

Triage need, design and spec, build with a11y and tests, document, version, and release.