Intermediate everything in Frontend Dev, page 27
Design System Governance: Preventing UI Chaos
A design system governance model defines the rules for evolving your UI library, preventing a free-for-all of conflicting changes. It dictates how new components are proposed and approved.
Atomic Design: Building UIs from the Smallest Parts
Atomic Design treats UIs as thoughtful hierarchies, building interfaces from the smallest parts up. This methodology helps create robust design systems for rolling out consistent UIs faster across countless devices. The footgun is seeing it as a rigid process.
Sass Control Directives: Logic in Your Stylesheets
Sass control directives bring programming logic—if/else, loops—into your CSS preprocessor. Use them to generate component variations or utility classes without repetitive code.
Source Maps: Debug Your Compiled CSS
Source maps are a decoder ring for your browser's dev tools, translating minified CSS back to the original SCSS or LESS files you wrote. This lets you debug styles in your source code, not the unreadable compressed output.
PostCSS Preset Env: Write Future CSS Today
postcss-preset-env is like Babel for CSS, transpiling modern syntax into code older browsers understand. Use it to write features like nesting or color-mix() today. The footgun: it only polyfills Stage 2+ features by default; you must opt-in for more.
Mobile-First Design: Start Small, Then Scale Up
Mobile-first design means building for the smallest screen first, then enhancing for larger ones. This ensures a solid baseline experience on phones, where most users are. The footgun is thinking it's just CSS, not a content-first strategy.
CSS Combinators: Targeting by Relationship
CSS combinators target elements by their DOM relationship, not just class or ID. They let you select an element inside another (div p) or right next to one (h2 + p). This is key for styling nested menus or spacing adjacent items.
CSS Masking: Using Stencils for Web Elements
CSS masking is like a stencil for your elements. You provide a shape, and only the parts of the element under the stencil's cutout are visible. Use it for non-rectangular shapes, like text cutouts.
color-mix(): CSS's Native Color Blender
color-mix() lets you blend two colors directly in CSS, like mixing paint. Use it to generate theme variations, like hover states, from a base color. The chosen color space (e.g., srgb, oklch) dramatically changes the result, so always specify it.
CSS Scroll Snap: Guiding User Scrolling
CSS Scroll Snap turns a free-scrolling container into a slideshow, guiding users to land perfectly on predefined points. It's ideal for image carousels or full-page sections where partially visible elements look sloppy.
The Popover API: Native Tooltips and Menus
The Popover API creates tooltips and menus with just HTML, placing them in a top layer above all other content without z-index hacks. Use it for action menus or notifications.
CODEOWNERS: Auto-Assigning PR Reviewers
A CODEOWNERS file maps repo paths to owners, auto-requesting their review on PRs. It ensures experts review changes to their code, like a platform team owning CI configs. The footgun: owners aren't notified for draft PRs and must have write permissions.
Automated Accessibility Testing: Your First Line of Defense
Think of it as a linter for usability, scanning your code for machine-detectable issues like missing alt text or poor color contrast. It's often run in CI pipelines to catch regressions. The footgun is relying on it exclusively, as it misses most issues.
Design System Build Pipeline: Automating UI Consistency
A design system pipeline treats UI rules like code, syncing design tokens from a single source of truth (like Figma) to your codebase. It prevents drift between design and code, but the biggest footgun is not starting one, leading to manual, error-prone…
Visual Regression Testing: Spot the Difference for UIs
Visual regression testing is like an automated 'spot the difference' for your UI, catching visual bugs functional tests miss. It's used in CI/CD to compare screenshots before and after a code change.
Monorepo: Managing Multiple Projects in One Repository
A monorepo puts multiple projects into one repository, creating a single source of truth. It's great for design systems, allowing atomic updates to shared components and consuming apps.
CSS :focus-visible: Smart Focus for Accessibility
:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.
Accessible Name Computation: The UI Naming Algorithm
Browsers follow a strict algorithm to find a name for UI elements to announce to screen readers. It runs on every interactive element, creating the data source for assistive tech.
WAI-ARIA Roles: Semantics for Custom Components
WAI-ARIA roles are job titles for HTML elements, telling assistive tech what a generic <div> is meant to be, like a tab or button. Use them for custom UI components that lack a native HTML equivalent.
tabindex: Control Element Focus and Tab Order
The tabindex attribute lets you control an element's keyboard focus. Use tabindex="0" to make custom components tabbable in document order, or tabindex="-1" to make an element focusable only by script, like for a modal.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles