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 149
Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
UI Patterns: Reusable Recipes for Interfaces
UI patterns are reusable recipes for common interface problems, like tabs or accordions. They create a shared language for building predictable, accessible components. The biggest footgun is creating a component that looks right but lacks accessible behaviors.
Designing Durable Component APIs
The best component API is often no API. Design from the user's perspective by first writing the ideal usage snippet, a "dream-driven" approach. This ensures intuitive components that boost design system adoption.
W3C Design Tokens: A Standard Format for UI Decisions
A standard design token format is a universal translator for your UI's style, defining colors and spacing in a JSON structure any tool can read. It lets design tools and codebases pull from one source of truth.
Style Dictionary: A Build Tool for Design Tokens
Think of Style Dictionary as a compiler for your design system. It takes abstract design tokens (like brand colors and fonts) and automatically generates platform-specific style files for web, iOS, and Android, ensuring consistency everywhere.
Composite Design Tokens: Bundling Style Properties
A composite design token bundles multiple style values into a single, semantic unit, like a "style kit" for shadows or typography. Use them to apply complex, multi-property styles like borders or text styles with one reference.
W3C Design Tokens: A JSON Standard for Design Systems
The W3C Design Tokens format is a universal translator for your design system's variables. It's a standard JSON structure that lets design tools and codebases speak the same language for colors and spacing.
Design Tokens: Automating UI with a Build Pipeline
Think of design tokens as design decisions stored as data. A build pipeline consumes this data to auto-generate code for multiple platforms, ensuring consistency. The footgun is exposing all raw 'option' tokens instead of curated 'decision' tokens.
Custom Elements: Create Your Own HTML Tags
Think of Custom Elements as creating your own Lego bricks for the web, defining new HTML tags with custom logic. Use them to build reusable components like a <product-card>. Be wary of extending built-in elements, as Safari does not support this.
The HTML <template> Element: Inert, Reusable Markup
Think of <template> as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
HTML Slots: Making Web Components Customizable
The <slot> element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a slot attribute goes to the default slot.
CustomEvent: Sending Custom Data with Events
CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the detail property. Don't forget detail!
Shadow DOM: A Private Bubble for Your Components
Shadow DOM gives a component a private bubble, keeping its styles and structure isolated from the main page. This is key for building reusable Web Components and microfrontends.
CSS :host: Style a Web Component from Within
The :host pseudo-class lets a web component style itself from the inside out. Use it inside a shadow DOM to apply styles to the host custom element, making components self-contained. The key footgun: it only works inside a shadow DOM; it has no effect in.
::slotted(): Style Content Passed into Web Components
The ::slotted() pseudo-element lets a Web Component style external content passed into its slots. It's how a component's internal CSS can style the "light DOM" elements it receives.
CSS ::part(): Style Inside a Web Component's Shadow DOM
The ::part() pseudo-element lets you style specific elements inside a web component's Shadow DOM. It's a contract allowing consumers to theme designated "parts" of a component without breaking encapsulation. The main footgun: it only styles one level deep.
Storybook: A Workshop for UI Components
Storybook is a workshop for UI components, letting you build and test them in isolation without running your entire app. It's used to develop component libraries, document design systems, and test hard-to-reach states.
Form-Associated Custom Elements: Your Own Inputs
Make your custom elements behave like native inputs within a <form>. This lets them carry a value, be validated, and submit with the form. Use it for custom widgets like tag inputs. The footgun: its state won't submit if you don't call setFormValue().
Constructable Stylesheets: Share Styles, Not Bloat
Create and share CSS in JavaScript without duplication. Constructable Stylesheets are ideal for theming multiple Shadow DOM components from a single source; updates to the sheet propagate to all consumers. A key footgun: @import rules are ignored.
ElementInternals: Making Custom Elements Form-Friendly
ElementInternals lets your custom elements act like native form inputs, integrating with validation, submission, and labels. Use it for custom inputs in a design system. The footgun: forgetting to call setFormValue() means its state won't be submitted.