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 color in a design system is not a single value. It is a family: a base color, a hover state, a disabled state, and a dozen opacity variants. A component that needs a translucent background, a muted border, or a semi-transparent overlay must be able to derive those values from the base. The naive…
Navigation guards are the control points where a Vue application decides whether a route transition should proceed, be cancelled, or be redirected. They exist because navigation is not always safe: a user might be navigating to a page they are not authenticated for, or leaving a form with unsaved changes, or entering a route that…
Standalone components are Angular’s answer to the boilerplate that NgModules required for every application. Before them, every component had to be declared in an NgModule, every directive had to be exported from a shared module, and every lazy-loaded route needed its own module. The standalone flag flips the model: a component declares its own dependencies…
A route has two jobs: match a URL, and produce an element. React Router separates these. The matching is done by the route configuration, and the rendering is done by the element prop on each route. The element is a React element, not a component reference, and it is rendered when the route matches. The…
An aspect ratio is a constraint: this box must be twice as wide as it is tall, regardless of how the content inside it grows. For years, CSS had no direct way to express this. Developers used the padding-bottom hack, where a wrapper’s height was set by a percentage of its width, and the content…
A Vue Router configuration is not just a list of paths and components. It is a place to attach arbitrary data to each route—whether a page requires authentication, what transition animation it should use, or what title to set on the document. That data lives in the meta field, and it is accessible from the…
The previous chapter covered standalone components and the bootstrap without NgModules. This chapter covers the other two building blocks that the standalone model made first-class: the standalone directive and the standalone pipe. A directive adds behavior to an element, and a pipe transforms a value in the template. Both followed the same evolution as the…
A URL carries two kinds of information. The path identifies a resource: /teams/firebirds names a specific team. The query string carries options: /teams/firebirds?tab=roster&sort=name names the same team but asks for a particular view of it. React Router exposes the first through useParams and the second through useSearchParams. The two are separate hooks because they serve…
A nested grid has always been a separate grid. When a grid item becomes a grid container, its rows and columns are its own. The child tracks do not know about the parent tracks, and the content inside the child cannot align with the parent’s columns. Subgrid changes this. It lets a nested grid adopt…
A Vue Router configuration has two persistent weaknesses as an application grows. The first is that route names and parameters are strings. A typo in router.push({ name: ‘user-profile’ }) when the route is actually named ‘userProfile’ compiles without error and fails at runtime. The second is that data fetching lives inside the component’s onMounted hook,…