All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 157
Long-Term Support (LTS): Stability Over New Features
LTS is a promise of stability for a specific software version, trading new features for long-term bug fixes and security patches. It's crucial for production systems like Node.js or Ubuntu. The footgun is assuming all bugs get fixed, not just critical ones.
Design System Versioning: One Package or Many?
Do you version your design system as one big package or as many small ones? The first ensures consistency, the second offers flexibility. This choice impacts how product teams consume updates.
Theme Provider Pattern: Centralized UI Styling
A Theme Provider acts like a global style guide, injecting design tokens like colors and fonts into all child components. It's used in frameworks like React to ensure a consistent look and feel. The footgun: components outside the provider won't get the theme.
CSS Custom Properties: Variables for Your Stylesheet
CSS custom properties are variables for your design system. Define a value like --primary-color once on :root and reuse it everywhere. This is ideal for theming, like switching between light and dark modes.
prefers-color-scheme: Respect User Theme Preferences
The prefers-color-scheme media query lets your CSS automatically adapt to a user's system-wide light or dark mode. It's used to create themes that respect user preferences.
Theme Object: Your Design System's Single Source of Truth
A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.
White-Label UI: Design Once, Rebrand Infinitely
White-label UI is like a WordPress theme for your product: a single design that other companies can rebrand. It lets agencies serve multiple clients without rebuilding the UI from scratch.
Dynamic Theme Switching with CSS
Let your app's theme automatically follow the user's OS setting. CSS's prefers-color-scheme media query lets you define styles for light and dark modes. The footgun is forgetting the 'no-preference' state, which can result in an unstyled default.
CSS `color-scheme`: Opting Into Browser UI Themes
The color-scheme property tells the browser your site supports light/dark modes, automatically styling UI like scrollbars and form controls to match the user's OS preference.
Theming with CSS data-* Attributes
Think of data- attributes as labels for UI state, like data-theme='dark'. CSS uses attribute selectors ([data-theme='dark']) to apply styles directly, avoiding complex class logic.
Apple HIG Compliance
Apple's HIG is the rulebook for native iOS and macOS apps. Compliance means matching platform conventions for layout and navigation. The footgun is treating it as a visual skin while ignoring interaction patterns, making apps that look right but feel wrong.
VUI Design: Making Computers Talk Like People
Think of VUI design as scripting a helpful human conversation, not just a command-line interface with a voice. It's key for voice assistants and smart speakers. The footgun is ignoring persona; if you don't design one, you'll get 'boring' by default.
Using Component Libraries in React Native
A component library is a pre-fab UI kit for your app. Instead of building every button from scratch, you get polished, ready-to-use pieces that handle platform-specific animations and accessibility.
Systematizing Haptics: Beyond Simple Vibrations
Treat haptics like a design system for touch, not just random vibrations. Use them to confirm actions or signal state changes. The biggest footgun is overuse, which turns meaningful feedback into annoying noise that users will disable.
Jetpack Compose Theming for Design Systems
Compose theming uses CompositionLocal to implicitly pass design tokens like colors and fonts down the UI tree. This is key for building a design system where you can swap themes (like light/dark) without rewriting components.
SwiftUI Theming with the Environment
Treat SwiftUI's Environment as a cascading style sheet for your app. You define design tokens like colors and fonts once at the top, and all child views automatically inherit them. This is key for building design systems or multi-brand apps.
Adaptive UI for Foldables: Thinking in Postures
An adaptive UI for foldables thinks in "postures," not just screen sizes, reacting to states like folded or tabletop mode. This is key for apps on devices like the Pixel Fold. The footgun is treating a foldable like a big tablet, ignoring its unique physical.
Spatial UI Design Systems
Spatial UI design systems define how interfaces behave in 3D space on devices like Vision Pro: depth-based hierarchy, distance-aware scale, and gaze-and-pinch interaction, replacing the flat, pointer-driven rules of traditional 2D design systems.
Design System Governance: A Process for Evolution
Design system governance is a process for when components don't meet a team's needs. It guides teams on whether to create a one-off "snowflake" or contribute a new component back to the system. The footgun is letting teams "find a way," leading to chaos.
Design System Adoption: Treat It Like a Product
Treat your design system like a product you're selling to internal teams, not just a library. Without an adoption strategy focused on real workflows, even a perfect system will be ignored, leading teams to build from scratch or create their own mini-systems.