UI
189 bites tagged UI — interview questions with model answers, and 60-second explainers.
Figma Dev Mode: Visually Diff Your UI
Treat UI changes like a code diff. Figma's Dev Mode lets you visually compare component versions side-by-side or as an overlay. This helps you see exactly what changed between handoffs, preventing drift. The footgun is ignoring the code and property diffs.
Figma for VS Code: Designs Inside Your Editor
Embed a live Figma inspector in your IDE to stop switching contexts. Use it to grab code snippets, check measurements, or reply to comments without leaving VS Code. The footgun: it's for inspection, not editing—you can't change the design itself.
Figma Dev Mode: From Design to Code Snippets
Figma's Dev Mode translates designs into code snippets, not just redlines. Select an element to get CSS, Swift, or Android XML with layout and style properties. The footgun is relying on this starter code; use Code Connect to link to your real design system.
Screen Readers: Designing for a Non-Visual UI
A screen reader navigates your UI's invisible DOM structure, not its visual layout. Think of it as a text adventure where headings are rooms and links are doors. This is essential for all web UIs, checked via alt text and keyboard focus.
Semantic Naming for Design Tokens
Don't name a token by its value (`blue-500`); name it by its job (`color.action.primary`). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
Kerning, Tracking, and Leading: Spacing in Typography
Kerning adjusts space between two letters, tracking adjusts space across a whole word, and leading controls vertical line spacing. These are used in UI and branding to improve readability. The footgun is confusing kerning (pairs) with tracking (groups).
SVG: Code-Based, Infinitely Scalable Graphics
Think of SVG as HTML for graphics. It's an XML file with drawing instructions, not pixels, so images scale perfectly. It's ideal for logos and icons on responsive sites. The footgun: SVGs can contain JavaScript, posing a security risk (XSS) if not sanitized.
RGB vs. HSL: Two Ways to Tell a Computer 'Color'
RGB tells a computer how to mix light (Red, Green, Blue), while HSL describes color how humans perceive it (Hue, Saturation, Lightness). Use RGB for brand colors and HSL for intuitive variations. The footgun is creating low-contrast UIs that are unreadable.
Fitts's Law: Bigger, Closer Targets Are Faster to Hit
Fitts's Law predicts that the time to hit a target depends on its distance and size. This is why mobile buttons are large and context menus appear at your cursor. The footgun is making everything huge, which sacrifices information density and visual hierarchy.
UI Typography for Readability
Good typography isn't about fancy fonts; it's about making content effortless to read by controlling size, spacing, and alignment. It's crucial for body copy, headings, and labels. The footgun is using justified text or lines over 90 characters long.
Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Nielsen's Heuristics are ten rules of thumb for evaluating if a design is user-friendly. Use them to spot usability issues in any interface, from apps to stovetops. The biggest mistake is treating them as strict laws, not flexible guidelines.
Next.js Loading UI: Instant Shells, Streamed Content
Next.js's `loading.js` shows an instant UI shell while streaming in server-rendered content. Use it for data-heavy pages to improve perceived performance. The footgun: a loading UI only wraps its own route segment and children, not parent layouts.
List Virtualization: Render the Window, Not the World
Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.
Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: `count && <Component />` will render a "0" if `count` is 0, not nothing.
React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like `onClick={handleClick}`. This is how you make buttons or forms interactive. The key mistake is calling the function (`onClick={doIt()}`), which runs on render, not on click.
JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
React Components: Your UI Building Blocks
Think of React Components as custom, reusable HTML tags you create with JavaScript functions. Use them to build everything from buttons to page layouts, speeding up development.
Bottom Tab Navigator: Core Mobile Navigation
A Bottom Tab Navigator is the classic mobile UI for switching between top-level app sections. It lazily loads screens, mounting them only when first focused to save memory. Use it for primary navigation.
The React Native Gesture Handler State Machine
Think of a gesture handler as a state machine with six states. This lets you react to specific moments in a gesture's lifecycle—like `BEGAN` or `ACTIVE`—not just a single event. The footgun: ignoring the `CANCELLED` state, which can leave your UI broken.
Shared Element Transitions: Morphing Views Across Screens
Morph a component from one screen to another during navigation. By giving two components the same `sharedTransitionTag`, Reanimated animates the view's properties (size, position) between screens for a seamless transition.
Animated: Drive Styles with Values, Not Setters
React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting `useNativeDriver: true`, which keeps animations smooth by running them off the JS thread.
Animated.Value: The Driver for React Native Animations
Animated.Value is a single number that drives multiple UI properties, like one dimmer switch controlling many lights. Use it to fade, move, or scale components. The main footgun: you cannot read its value synchronously and must use an asynchronous listener.
Managing Splash Screens in React Native
A splash screen bridges the gap between tapping your app icon and your React Native bundle finishing its load, preventing a jarring white screen. Use it to improve perceived performance during launch.
PixelRatio: Bridge Layout Units to Physical Pixels
PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring `getFontScale()` creates a fixed, inaccessible UI.
Get UI bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.