Focus Management

GitHub Actions is a CI/CD and workflow automation platform built directly into GitHub. Developers define workflows in YAML files that trigger on events like pushes, pull requests, or schedules, running jobs on GitHub-hosted or self-hosted runners. Its marketplace offers thousands of reusable actions for tasks like linting, testing, deploying, and publishing packages.

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for complex page layouts. Unlike Flexbox which works in one axis at a time, Grid allows you to place items precisely in both horizontal and vertical directions using named areas or line numbers. Features like `grid-template-areas`, `auto-fill`, and `minmax()` make it possible to create responsive layouts with minimal code.

Props drilling is the practice of passing data through multiple levels of intermediate components that don't actually use the data themselves, just to get it to a deeply nested child that needs it. This creates tight coupling between components and makes refactoring painful. Common solutions include React's Context API for global-ish state, state management libraries like Zustand or Redux, or component composition patterns that restructure the tree to reduce nesting depth.

JSX (JavaScript XML) is a syntax extension for JavaScript used primarily in React that lets you write HTML-like markup directly within your JavaScript code. It gets transpiled by tools like Babel or SWC into regular `React.createElement()` calls before reaching the browser. JSX supports embedding dynamic expressions with curly braces, conditional rendering, and mapping over arrays, making it a powerful and intuitive way to describe UI structures declaratively.

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.