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.
A variant applies a utility when a condition is true. The not-* variant applies a utility when a condition is false. It is the negation of a pseudo-class, and it is the tool for the styling that needs to apply to everything except a specific state or position. The not-first:mt-4 applies a top margin to…
A component often needs more than one two-way binding. A form component has a first name and a last name. A date-range picker has a start date and an end date. A filter panel has a search term and a category. A settings component has a theme and a language. Each of these is a…
Native HTML form elements — <input>, <select>, <textarea> — are integrated into Angular’s forms system through built-in directives called value accessors. When you write formControlName=”email” on an <input>, Angular’s DefaultValueAccessor handles the bridge between the DOM element and the FormControl instance. But the moment you need a control that is not an <input> — a…
Every asynchronous operation has three possible outcomes: it is still running, it succeeded, or it failed. A React component that fetches data must represent all three. The previous chapter introduced the three states as part of the fetch pattern. This chapter treats them as a design problem in their own right: how to model them,…
A variant applies a utility based on the element’s own state. The hover: variant applies when the element is hovered. But sometimes the state belongs to a different element. A card’s child should change when the card is hovered. A label should change when the input next to it is focused. A dropdown should open…
A component’s template defines its structure, but not all of its content. A button defines the <button> element, but the text inside comes from the parent. A card defines the border, the shadow, and the padding, but the content — the title, the body, the footer — comes from the parent. The <slot> element is…
Most front-end applications exist to communicate with a server. Fetching user data, submitting forms, loading configuration, uploading files — these are the operations that turn a static interface into a working application. Angular provides HttpClient for this purpose, a service built on the browser’s native fetch API (with XMLHttpRequest as an option) that wraps HTTP…
A custom hook is a function whose name starts with use and that calls other hooks. That is the entire definition. There is no special syntax, no registration, no framework API. A custom hook is a function that extracts component logic into a reusable unit. The logic inside it is the same hooks—useState, useEffect, useRef,…
A group is a parent. A peer is a sibling. The group-hover: variant applies when the nearest group is hovered, and the peer-focus: variant applies when the nearest peer is focused. The word “nearest” is the problem. When groups are nested, or when a parent has multiple peers, the nearest one is not always the…
A component’s content is not always a single block. A layout component has a header, a body, and a footer. A card has a title, an image, and a description. A modal has a header, a body, and the action buttons. The default slot receives one block of content, and the component decides where it…