Tutorials covering the frameworks and libraries that shape how modern applications are built — Angular, React, Vue, and the ecosystem tools that surround them. Each chapter is standalone, built around real examples and verified facts.
The static utilities cover the fixed values. The dynamic utilities cover the values the developer chooses at the class-name level. The matchUtilities and the matchComponents functions are the mechanisms: they take a name prefix and a function, and the function produces the CSS from the value the class name supplies. A plugin that registers text-shadow…
Vue components and native Web Components are two different component models that solve overlapping problems. Vue’s component model is framework-specific: a Vue component is a plain object or function that the Vue runtime knows how to mount and update. A Web Component is a browser primitive: a class that extends HTMLElement and is registered with…
Content projection is how Angular lets a parent component pass markup into a child component, and the child decides where that markup appears in its own template. It is the mechanism behind every reusable card, modal, tab, and layout component you have ever used. Without it, a component like <app-card> would be a black box…
A reducer is a pure function, and a pure function cannot fetch data, log to the console, or read the current time. The actions that produce those side effects must live somewhere else, and the middleware is the mechanism that sits between the dispatch and the reducer. The middleware sees every action, it can pass…
A variant is the prefix that modifies a utility. The hover: applies the utility on hover, the md: applies it at the medium breakpoint, and the dark: applies it in the dark theme. Tailwind ships the common variants, and the addVariant and the matchVariant functions are the mechanisms for the custom ones. The variant is…
A Vue component is a black box from the outside. It receives props, renders output, and emits events. The test should assert on those three things—what goes in, what comes out, and what the user sees—rather than on the internal refs, computed properties, or methods. Vue Test Utils is the library that mounts the component…
Angular components rarely live in isolation. A parent component often needs to reach into its own template and grab a reference to a child element, a directive instance, or a component. It may also need to inspect or manipulate content that a caller has projected into it via <ng-content>. Angular’s query system provides four tools…
Zustand is a small state management library for React. It does not have a provider, an action type, or a reducer. The store is a hook that returns the state and the actions, and the components call the hook and read what they need. The state lives outside the React tree, and the components subscribe…
Tailwind CSS v4 is a ground-up rewrite of the framework, and the center of that rewrite is Oxide, a high-performance engine built in Rust. The previous versions ran a JavaScript-based JIT compiler through PostCSS, and the v4 engine replaces it with a native binary that parses CSS, scans the source files, and generates the utilities….
A Vue component does not exist in isolation. It reads from a Pinia store, navigates with Vue Router, and fetches data asynchronously. A test that mounts the component without providing these dependencies fails with an injection error, a missing $router, or an assertion that runs before the data arrives. The three dependencies require three different…