All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8667 bites
Page 370
Semantic HTML: Describe Meaning, Not Just Looks
Semantic HTML uses tags that describe the content's role (e.g., <article>), not just its appearance. This helps screen readers and search engines understand your page, improving accessibility and SEO. The footgun is using <div> for everything.
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.
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.
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().
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.
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.
::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 :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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.