Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
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.
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.
Component Feature Flags: Opt-in to Breaking Changes
Component feature flags are a temporary opt-in switch for new versions, letting you adopt breaking changes before a major release. Design systems use them to roll out updates without forcing an immediate migration.
How Design Systems Lower Your UI Bug Rate
A design system is a factory for pre-tested UI parts. By using standardized components instead of hand-crafting them each time, you reduce one-off bugs. This is a key metric for proving a design system's ROI, but teams often fail to track it.
Who Can Change the Button? Design System Contribution Models
A contribution model defines who can change the design system, balancing consistency with evolution. It dictates whether you can fix a typo or must lobby for a new component.
Forced Colors Mode: When the User Overrides Your Palette
Forced Colors Mode is an accessibility feature where the browser overrides your site's colors with a user-defined, high-contrast palette. This ensures readability for users who depend on it. The footgun is disabling it and making your UI invisible.
Accessibility Linters: Automate Compliance in Your Design System
An accessibility linter is like a spellchecker for WCAG compliance, automatically flagging component errors like bad contrast or missing labels. It runs in CI/CD to catch bugs early, preventing them from propagating. The footgun: it can't catch everything.
Image Alt Text: What Screen Readers Say About Pictures
Alt text tells screen readers what to say when an image can't be seen. For a photo, describe the scene. For a button, describe its action ("Submit form"). For pure decoration, use an empty alt="" to tell screen readers to skip it.
WCAG Conformance Levels: A, AA, and AAA
WCAG levels are a tiered rating for web accessibility. Level A is the minimum, AA is the widely accepted standard, and AAA is the highest. This helps teams set clear, testable goals. The footgun: don't require AAA for an entire site, as it's often impossible.
Chromatic: Visual Regression Testing for Components
Chromatic is a smoke detector for your UI's appearance, taking snapshots of every component on every commit to catch unintended visual changes. It's used in CI/CD to prevent visual regressions when refactoring. The footgun is relying on it for business logic.
Figma-to-Code: From Pixels to Production Code?
Figma-to-code tools act as translators, turning visual mockups into code. This speeds up bootstrapping new components or prototypes, but the output is rarely production-ready and often needs heavy refactoring to be performant and maintainable.
Unit Testing UI Components: Beyond the DOM Mock
Unit tests for UI components verify individual pieces in a mocked browser environment (jsdom). This is standard for checking component logic with Jest or Vitest, but it can't test visual rendering, element sizes, or layout, creating critical blind spots.
Storybook: A Workshop for Isolated UI Components
Storybook is a workshop for building UI components in isolation, separate from your app's business logic. It's ideal for developing edge cases and documenting a design system.
Automated Prop Docs with Storybook Autodocs
Treat your component stories as the single source of truth for documentation. Storybook's `autodocs` reads your code to generate interactive docs automatically. It's used in design systems to prevent stale docs. The footgun: sparse types yield sparse docs.
Writing Accessibility Docs for Your Components
Accessibility docs are the user manual for your component's a11y features. They guide consumers on correct usage, like required ARIA attributes or keyboard behavior.
The Slot Pattern: Making UI Components Composable
The Slot Pattern makes components flexible by defining areas for custom content, like a picture frame for your UI. It's used in Cards or Modals to allow varied content in a consistent frame. The footgun is that too much flexibility can break consistency.
Skeleton Screens: Faster by Faking It
Skeleton screens create the illusion of speed by showing a wireframe-like preview of a page while content loads. They're used for full-page loads to set expectations about the layout. The footgun is showing just the app frame, which gives no structure.
Master-Detail: Show a List, Focus on One
The master-detail pattern splits your UI into a list of items (master) and a view for the selected one (detail). It's used in email clients and file explorers to manage information density. The footgun is a master list so sparse it forces users to click.
Header Components: An Exception to Reusability
Treat your site header as a unique beast, not a reusable component. Its complexity—managing branding, responsive navigation, and sticky positioning—makes abstraction brittle. The footgun is reusing the entire header instead of just its internal components.
Modal Dialogs: The Focus Trap Pattern
A modal dialog is a "focus trap" that overlays the UI, forcing a user to complete a task. It's used for critical confirmations or focused inputs, like a date picker. The main footgun is failing to trap keyboard focus, letting users tab into the inert.
Footer Layout Patterns
A footer is a safety net for users who reach the bottom of a page without finding what they need. Use a "Big" footer for complex sites, "Medium" for standard ones, and "Slim" for simple pages.
WAI-ARIA: A Script for Custom UI Accessibility
WAI-ARIA gives custom UI a voice for assistive tech. It's the script telling a screen reader what a `<div>` acting as a button is and if it's "pressed." Use it for custom widgets when native HTML can't.
Style Encapsulation with Shadow DOM
Shadow DOM creates a private DOM tree for a component, acting like a one-way mirror for CSS. This prevents style collisions in complex UIs, ensuring a button's CSS doesn't break a header.
Component-Driven Development: Build UIs Bottom-Up
Component-Driven Development (CDD) builds UIs bottom-up, like assembling a car from its engine and wheels. It's used to manage complex UIs by creating small, independent components first. The footgun is building components too coupled to app-specific logic.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.