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 shadow is a lie about light. It suggests depth, elevation, and hierarchy on a flat screen. It is one of the most effective tools for communicating which elements float above others and which sit recessed within a surface. Tailwind provides three distinct shadow mechanisms: shadow-* for box shadows, drop-shadow-* for filter-based shadows that follow…
The watch() function requires the source to be named. The getter is written, the refs are listed, and the watcher knows exactly what it depends on. The watchEffect() is the opposite. It takes a function, runs it immediately, and tracks every reactive value the function reads. The dependency list is implicit, and it is derived…
Real apps have hierarchies — a settings page with sub-pages, a dashboard with panels, a shop with categories and products. Flattening all of those into top-level routes would produce hundreds of entries and duplicate the shared layout. Nested routes solve this: child routes render inside a parent’s <router-outlet>, sharing the parent’s template, layout, and state….
The previous chapter introduced map as the way to render lists in React and mentioned the key prop as a requirement. This chapter is about why. The key prop is the single most misunderstood part of list rendering. It looks like a prop, behaves unlike any other prop, and produces bugs that are invisible until…
Transparency is not one property. It is several. An element can be semi-transparent on its own, blend with whatever sits behind it, or filter the backdrop visible through it. Tailwind exposes each of these as distinct utility families: opacity-* for the element’s own transparency, mix-blend-* and bg-blend-* for how colors combine, and backdrop-* for filters…
A watcher reacts to a change. The default watcher reacts to the reference change: the ref’s value is replaced, or the reactive property is assigned. A nested mutation inside a reactive object does not change the reference, and the default watcher does not see it. The deep: true option makes the watcher traverse the object…
Every byte the browser downloads costs time — parse time, network time, memory. A large Angular app can easily ship megabytes of JavaScript, and loading it all up front delays the first meaningful paint. Lazy loading splits the app into chunks that load on demand. The initial bundle contains only what’s needed to render the…
A form input that holds its own state is unpredictable. The DOM remembers what the user typed, but your React component does not, unless you ask it. When you need to validate, transform, or react to input as it happens, you must take control of the value. This is the controlled component pattern: the input’s…
A transform changes how an element is drawn without changing its position in the document flow. A scaled button is still the same size in the layout. A rotated card still occupies its original rectangle. A translated tooltip still reserves its original space. This separation between layout and rendering is what makes transforms powerful: they…
A watcher runs a side effect. The side effect may be asynchronous: a fetch that is in flight, a timer that is set, a subscription that is created. When the watched source changes before the side effect completes, the old side effect should be cancelled. The cleanup is the mechanism. The watch() and the watchEffect()…