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 39
Versioning and distributing multi-platform tokens
JSON source, Style Dictionary transforms per platform, semantic versioning, and per-platform package registries in CI.
Pixel-identical modals across platforms
Raise back-button and gesture behavior, safe areas and keyboard insets, native dismiss patterns, and accessibility differences.
Delivering one color token to three platforms
One JSON source, generated CSS variable for web, color resource XML for Android, and Swift/asset for iOS.
Preventing theme flash in SSR apps
Flash comes from server not knowing client preference; fix with a blocking inline script setting the theme before paint.
Token build pipeline for multi-platform output
JSON source of truth, a tool like Style Dictionary with per-platform transforms and formats, and CI publishing.
CSS custom properties versus Sass for theming
Custom properties are live and cascade for dynamic switching; Sass variables compile away.
Architecting a themeable React component library
A ThemeProvider supplying tokens through Context, components reading them, and CSS variables for performance.
Structuring tokens for brand and sub-brand inheritance
Tiered tokens (primitive, semantic, component), sub-brands override only semantic aliases, and references keep inheritance live.
Implementing light and dark mode on the web
CSS custom properties for color tokens, a data-theme attribute toggle, and prefers-color-scheme as default.
Automated enforcement of deprecated component removal
Lint rule failing new usages, codemods for existing ones, and a usage dashboard gating removal.
Coexisting major versions during migration
Scoped aliases or namespaced packages, isolated token scopes, and incremental migration.
Tracking design system component usage and versions
Static scan of code or lockfiles, a central reporting store, and a dashboard; data drives deprecation and roadmap.
First steps to deprecate a legacy component
Add a JSDoc @deprecated tag and IDE/console warning, document the migration, and keep the component working.
SemVer bump for a non-breaking bug fix
A backward-compatible bug fix is a PATCH, the third number; major is breaking, minor is new compatible features.
Quantifying the cost of a missing component
Scan repos for duplicate hand-rolled tables, count implementations and lines, estimate redundant build and maintenance hours plus defect rates.
Isolating the design system's velocity impact
Use comparison groups, difference-in-differences or before-after baselines, and control for confounders; cite mechanism data like component reuse.
Constructing a design system ROI formula
ROI equals (benefits minus cost) over cost; benefits from time saved, defect reduction, and faster onboarding; gather data via analytics and tickets.
Quantifying migration cost for a major release
Pre-release, scan codebases for affected usages and estimate engineer-hours; post-release, track actual upgrade lead time and effort.
Designing a UI consistency score
Combine signals like token vs hard-coded values, design-system vs off-system components, and override rates, then automate via AST scans and CI.
Tracking design system adoption technically
Scan codebases for component imports via AST, compute adoption versus off-system usage, and aggregate into a dashboard over time.