Design & User Experience Topics
User experience design, frontend architecture, and design systems. Includes UX principles, accessibility, and design documentation.
Frontend Component and State Architecture
Structuring client applications for maintainability: component architecture and code organization (composition and compound components, container/presentational split, controlled vs uncontrolled components, prop drilling and context, refs and imperative handles, folder and module boundaries as a codebase grows), state management and data flow (local vs global state, state colocation and lifting, reducers and stores, selectors and derived state, normalization, immutability, one-way flow, migrating a legacy global store incrementally), how the UI framework turns state into screen updates (hooks and effect dependencies, re-render behaviour, memoization trade-offs, keys, update batching, concurrent rendering and transitions, plus the same ideas in Angular services and change detection), data-fetching patterns (server-state caching, stale-while-revalidate, optimistic updates and rollback, request deduplication, cursor pagination, normalized GraphQL caches, merging live socket events and partial failures into local state, undo and redo history), URL state and route-scoped data, micro-frontends and cross-team state ownership and isolation, framework-agnostic web components, event-bus communication between distant widgets, and rendering strategy trade-offs (CSR, SSR, hydration and mismatches, progressive enhancement). Covers designing a frontend that scales in complexity without becoming brittle. Reusable component libraries as design systems, form and dialog implementation, accessibility practice, render-speed tuning, language typing mechanics, browser storage APIs and offline persistence, conflict-resolution protocols for collaborative editing, and testing strategy are covered elsewhere.
Frontend Fundamentals: HTML, CSS, and Responsive Styling
Core web-platform implementation skills: semantic HTML and document structure, native controls versus ARIA-patched divs (button versus link), accessible markup (labels, headings, landmarks, image alt text, icon-only buttons, keyboard operability, skip links, ARIA basics, focus styles), the CSS box model, cascade and specificity (including cascade layers and taming !important), selector matching cost, display types, positioning (static, relative, absolute, fixed, sticky) and stacking contexts and z-index, flexbox and grid layout (including subgrid and masonry options), units and fluid sizing (rem, clamp, viewport units including dynamic viewport units), the viewport meta tag, media queries, mobile-first breakpoints and how to choose them, container queries, responsive images (srcset, sizes, picture, aspect-ratio), touch target sizing, right-to-left and long-text layouts, custom properties and light/dark theming, and CSS organization (BEM, CSS Modules, utility-first, Sass). Includes debugging layout bugs, progressive enhancement, @supports and cross-engine CSS fallbacks. Performance measurement, building full interactive widgets and form flows, design-system governance, WCAG audit strategy, design handoff, visual regression testing and cross-browser test coverage are covered elsewhere.
Responsive, Multi-Platform, and Localized Design
Adapting a single experience across the varied contexts real users bring to it: responsive layouts, mobile-first strategy, breakpoint reasoning, touch and gesture design, and platform interaction guidelines (iOS, Android, web), plus internationalization and localization such as right-to-left and multilingual layouts, text expansion, locale-specific formats, and cultural adaptation. Covers respecting device, platform, and regional conventions while keeping a coherent product feel, and anticipating these constraints early rather than as a late patch.
Frontend Performance and Rendering Optimization
Making web pages and single-page apps fast: Core Web Vitals (LCP, INP, CLS) and page-speed metrics, the critical rendering path, reflow, repaint, forced synchronous layout and compositing, and diagnosing loading and rendering bottlenecks with browser DevTools, long-task traces and field data. Covers bundle size, code splitting, tree shaking and lazy loading, JavaScript parse and compile cost, script loading (async, defer), resource hints and fetch priority, HTTP/2 and HTTP/3 loading trade-offs, image and web-font delivery, critical CSS, a page's own browser caching (Cache-Control, fingerprinted filenames) and service-worker caching of a web app's assets, offloading work to Web Workers, smooth animation on the compositor, list virtualization and React re-render optimization, browser memory leaks and garbage-collection jank, third-party script impact, loading WebAssembly modules, rendering-strategy trade-offs for speed (CSR, SSR, SSG, streaming and partial hydration), and measuring and defending speed: user timing, real user monitoring against synthetic tests, performance budgets in CI, regression investigation and performance targets across teams. Server-side and system latency, CDN and edge caching, distributed caches, general state-management design, and design-system or visual-design decisions are covered elsewhere.
Design Systems and Component Libraries
Building and scaling reusable design foundations: component architecture, design tokens, pattern libraries, versioning, governance, and adoption across teams. Covers ensuring visual and behavioral consistency, evolving a system without breaking consumers, and the tooling and cross-functional alignment that keep a design system healthy at scale.
UI Component Implementation: Forms and States
Implementing forms and the non-happy-path states of UI components in the browser. Covers form building (controlled and uncontrolled inputs, reusable form hooks tracking values, touched fields and errors, dynamic groups of repeating fields, multi-step flows, submit handling), client-side and server-side validation (inline errors, validation timing, cross-field rules, async validation such as username checks with stale-response handling, error summaries, mapping API error responses onto fields), and the states a component must handle: loading and pending, error and retry, empty results, disabled, error boundaries around a failing widget, and edge cases such as double submit, slow or failed networks, drafts preserved across failures, and unexpected input like pasted text or locale differences. Includes building custom inputs and widgets robustly: restricted numeric inputs, comboboxes and custom selects, and date fields with calendar popups, with labels, error association, focus management, announcing errors to assistive technology and keyboard operation. Excludes design-system library governance and tokens, optimistic-update and rollback logic in the client data layer, accessibility strategy as a design practice, and the state-management architecture of the whole application.