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.
Angular’s dependency injection is not a flat container. It is a tree of injectors, and the tree mirrors the application’s structure — the component tree, the route tree, the lazy-loaded module tree. When a component asks for a dependency, the injector at that component tries to satisfy the request; if it cannot, it delegates to…
A form submission is asynchronous. The user clicks a button, the request goes out, and the UI must decide what to show while it waits. In React 19, that decision is made declaratively through the useFormStatus hook. It reads the pending state of the nearest parent <form> and exposes it to any child component, without…
A single-brand application has one set of colors, one font stack, one spacing scale. A multi-brand application has several, and the same component must render in each brand’s identity without being rewritten. Dynamic theme switching and multi-brand design tokens are the two halves of this problem. Theme switching changes the active theme at runtime: light…
A URL like /users/42 and a URL like /users/42?tab=posts are both requests for the same resource, but they carry different kinds of information. The 42 is part of the path—it identifies which user. The tab=posts is a query string—it describes how to display that user. Vue Router treats these two as distinct concepts with distinct…
In Angular 54 through 56, the DI’s foundation was covered: the injector hierarchy, the injection tokens, the providers, and the hierarchical resolution. This chapter is the practical companion — the recipes. A provider is the recipe that tells the injector what to create for a token. The four forms — useClass, useValue, useFactory, useExisting —…
A component that needs data from an asynchronous source has traditionally managed three states manually: loading, loaded, and error. The useEffect + useState pattern tracks each one, sets the loading flag, fires the fetch, updates the data, and clears the flag. React 19 introduces the use API, which collapses that pattern into a single read….
A responsive layout has two options for scaling. The first is a breakpoint: at md, the heading becomes 2rem; at lg, it becomes 2.5rem. The values jump at each breakpoint, and a viewport that is one pixel below the threshold shows the smaller size. The second is fluid scaling: the heading grows continuously with the…
A Vue application’s UI is rarely a single flat layer. A dashboard has a persistent sidebar and a main content area. A settings page has a navigation panel and a detail pane. A user profile has a header that stays while the tab content changes. Vue Router expresses these structures through three distinct mechanisms: nested…
The previous chapter covered the provider recipes — the four use* types, the multi-providers, the provideX functions. This chapter covers where the providers live and how long they live. A provider’s scope is the part of the application that resolves the token to that provider, and a provider’s lifecycle is when the instance is created…
A single-page application loads once and never reloads. The browser fetches the initial HTML and JavaScript, and from that point on, every navigation is handled by JavaScript. The URL changes, the view changes, and the browser’s back button still works, but no new document is requested from the server. React Router is the library that…