UI
189 bites tagged UI — interview questions with model answers, and 60-second explainers.
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.
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.
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.
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.
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.
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.
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.
Design Systems: Stop Reinventing UI Components
A design system is a shared library of reusable UI components and rules, acting as a single source of truth for designers and developers. It ensures a consistent look across apps without rebuilding common elements.
CSS Motion Path: Animate on a Curve
Think of `offset-path` as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate `offset-distance` to move the element.
CSS `perspective`: Creating 3D Depth
The CSS `perspective` property sets a 'camera' distance for 3D-transformed children, creating a sense of depth. Use it on a container to make elements appear to recede into the screen. The main footgun: a smaller value creates a *more* dramatic effect.
animation-fill-mode: Hold Styles Before and After Animation
The `animation-fill-mode` property prevents the jarring "snap" back to an element's original state after a CSS animation. Use `forwards` to hold the final state or `backwards` to apply the start state during a delay.
CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: `ease` accelerates more sharply than the symmetrical `ease-in-out`.
pointer-events: Making Elements Click-Through
The `pointer-events` property makes elements invisible to clicks and hovers, letting events pass through to what's underneath. Use it for decorative overlays on clickable content or to temporarily disable buttons.
CSS Transitions: Animating State Changes
CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like `:hover` or when adding classes with JavaScript.
backdrop-filter: Styling What's Behind an Element
Think of `backdrop-filter` as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.
CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
Progressive Disclosure: Show, Don't Overwhelm
Progressive disclosure is a guided tour for your UI, revealing information only as needed. It simplifies complex forms and setup wizards by deferring advanced options, making apps easier to learn.
Tooltips: For Optional Hints, Not Critical Info
Tooltips are hover-activated hints providing optional, extra context for UI elements. Use them to explain why a form field is needed or what an ambiguous icon means. The footgun is hiding critical info, like password rules, inside them.
Microcopy: The Small Words with Big Impact
Microcopy is the small, functional text that guides users through an interface. It's the button labels, error messages, and tooltips that help users complete tasks.
Android Overdraw: Stop Painting Pixels Twice
Overdraw is wasted GPU work, painting the same pixel multiple times in one frame. It causes UI stutter and drains battery. Fix it by removing unneeded backgrounds and flattening your UI layouts.
Android Custom Views: Beyond the Standard Library
A custom view gives you full control over a UI component's drawing and interaction. Use it for unique elements like charts or radial menus that standard widgets can't handle. The footgun is building one when composing existing views would be simpler.
Android XML Layouts: The Classic UI Blueprint
XML layouts are the classic blueprints for Android screens, defining the structure of UI elements (Views) in a static file. You'll find them in legacy projects or when using View-based components like ConstraintLayout and RecyclerView.
Android Navigation Graph: A Map for Your UI
Think of the Navigation Graph as a visual map of your app's screens. It centralizes all navigation logic in one XML file, defining destinations (screens) and actions (paths between them), simplifying transitions and deep linking.
ConstraintLayout in Compose
ConstraintLayout in Compose lets you position elements relative to each other and to guidelines using constraints, the same model as the View system's ConstraintLayout. It solves layouts that would otherwise need deeply nested Row and Column combinations.
Get UI bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.