Color Contrast

ETL (Extract, Transform, Load) is an automated data processing pattern where data is extracted from source systems, transformed into a desired format or structure, and loaded into a target system like a data warehouse. Modern variations include ELT, where raw data is loaded first and transformed in place. ETL pipelines are essential for automating data integration, reporting, and feeding clean data into ML training workflows.

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.

BEM (Block Element Modifier) is a CSS naming convention that structures class names as `.block__element--modifier` to create clear, predictable relationships between HTML and CSS. For example, `.card__title--highlighted` identifies a highlighted title element within a card block. While modern tooling like CSS Modules and utility frameworks have reduced BEM's necessity, it remains widely used in large codebases and design systems where explicit naming conventions aid team coordination.

Git hooks are scripts that Git executes automatically before or after events like commits, pushes, and merges. Common examples include pre-commit hooks that run linters and formatters, commit-msg hooks that enforce message conventions, and pre-push hooks that run tests. Tools like Husky and lint-staged make it easy to manage hooks across a team, catching issues before they reach the remote repository.

Reconciliation is React's algorithm for comparing the previous and current Virtual DOM trees to determine the minimum number of changes needed to update the actual DOM. React uses heuristics like element type comparison and the `key` prop to efficiently decide whether to update, replace, or remove DOM nodes. Understanding reconciliation explains why unique `key` props on list items matter — without them, React can't reliably track which items changed, leading to bugs and poor performance.

Infinite scroll is a UX pattern where new content loads automatically as the user scrolls toward the bottom of the page, eliminating traditional pagination. It's commonly used in social media feeds and content discovery interfaces. While it increases engagement and feels seamless, it can hurt performance without virtualization and makes it difficult for users to reach footer content or bookmark specific positions.