TypeScript

Dom Selection & Manipulation

Master the essentials of working directly with the DOM to build responsive, interactive interfaces without frameworks.

Rendering & DOM Construction

Learn to build DOM the way a maintainable frontend does — as pure render functions over typed data instead of ad-hoc jQuery-style mutation. Renderers take data and return fresh nodes, never reach into the document, and stay independently testable without a page. A single mount helper owns container mutation. The topic covers list rendering, exhaustive state rendering (loading / empty / error / list) over discriminated unions, safe text handling that resists XSS by using textContent and URL allow-listing, and template-driven filtered lists that re-render only what should change while the form retains user input. The recurring lesson: separate pure logic from DOM ownership, and every render leaves the container with exactly one child no matter what came before.

Forms & Input Handling

Build production-shaped form flows in Vanilla TypeScript. The topic covers pure validate functions that return typed error maps, per-field render helpers that manage aria-invalid and aria-describedby, touched-on-blur error surfacing, submit gating tied to live validity, dirty tracking against a baseline with beforeunload prompts, conditional field groups driven by a discriminant that also shape the outgoing payload, and async submission with confirmation and rejection paths. The recurring lesson: pure logic decides what's wrong, small render helpers put that decision on the page, and payloads leaving the form are trimmed, typed, and contain nothing from a hidden field group.

Modules & Code Organisation

Structure a small TypeScript codebase across modules the way a real front end does. The topic covers splitting helpers into cohesive named-export packages with an acyclic import graph and no window writes, centralising configuration behind a single accessor module that hides a raw global from every consumer, dynamic import() for lazy code-splitting with deduped concurrent calls and success caching (but no cached failures), and shared bootstrap plus per-view entries whose init functions are idempotent — safe to call multiple times without duplicating listeners or work. The runtime tests enforce the seams: no side effects at import time, no global mutation, no duplicated registrations on repeat init.

Arrays & Data Transformation