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.
Chapter 15 covered the three hooks you use every day: constructor, ngOnInit, and ngOnDestroy. This chapter goes deeper. Angular has eight lifecycle hooks, and the remaining five — ngOnChanges, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked — handle the phases most components never need but some depend on entirely. They’re the hooks that fire when inputs change,…
State in React is the data a component owns and can change over time. The primitive values — strings, numbers, booleans — are the simplest form of state, and they are where most React state work begins. Updating a primitive is straightforward: call the setter returned by useState with the new value. But the details…
Tailwind CSS v4 eliminated a long-standing limitation: grid utilities no longer require configuration for non-standard column or row counts. Where v3 forced developers to either extend the theme.gridTemplateColumns configuration or drop into arbitrary value syntax like grid-cols-[repeat(15,minmax(0,1fr))], v4 generates utilities dynamically. The class grid-cols-15 works out of the box, producing exactly the CSS you would…
A Vue application is a tree of components. The root component is mounted to a DOM element, and it renders child components, which render their own children. Each component is a self-contained unit: it has its own template, its own logic, and its own styles. The framework handles the communication between them. This is the…
Every component can have its own CSS. Angular scopes those styles to the component’s template so a .title rule in one component doesn’t affect .title elements in another. That scoping is called view encapsulation, and it’s the mechanism that lets you write component CSS without global naming conventions like BEM, without worrying about collisions, and…
When a state update depends on the previous value, React provides a functional form of the setter that receives the current state as its argument. This is not a stylistic preference; it is the correct way to express the update when the new value is derived from the old one. The direct form — reading…
Every element on a page is a box, and the box model determines how that box is sized, how it relates to its siblings, and how its content behaves when it does not fit. Tailwind provides utilities for the four properties that define the box: display, which determines the formatting context; box-sizing, which determines whether…
