Skip to content
academia.sh
tr
Log in

Course Intermediate

The Browser and the Web Platform

By the end of this course

Start course

01

The Document and Events

The API that reads and modifies the node tree, an event's capture-target-bubble journey, managing many elements with a single listener, and intervening in the browser's default behavior.

  1. 01 The DOM API The interface that reads and modifies the document tree; the node-versus-element distinction, the difference between a live collection and a static list, the attribute-property duality, and the cost of batch changes.
  2. 02 The Event Model The path an event follows from root to target and back from target to root; capture, target, and bubble phases, listener order, the two forms of stopping propagation, and listener identity.
  3. 03 Event Delegation Serving many elements' events with a single listener bound to an ancestor; telling the target apart from the current target, finding the closest matching ancestor, carrying identity in the markup, and delegation's limits.
  4. 04 Default Behavior and Cancellation The browser's built-in response to events and the request to cancel it; the cancelability condition, why cancellation is not the same as stopping propagation, the passive listener's constraint, and when cancellation is legitimate.
  5. 05 Focus and Keyboard Interaction Determining the single element that receives input; focusability conditions, computing tab order, the bubbling behavior of focus events, the information key events carry, and a navigation layout leaving a single stop within a group.
  6. 06 Form Events The flow from value change to submission; the distinction between input and change events, building the entry list, the submitter's contribution, the states of constraint validation, and accessible reporting of an error.

02

Browser APIs

Storage layers, history and address management, observers, frame-aligned updates, formatting, and worker threads that offload the main thread.

  1. 01 Storage APIs Layers that hold data outliving the page; the distinction between session and origin lifetime, the string store's type and serialization losses, quota and eviction, cross-tab notification, schema migration, and data that should not get stored.
  2. 02 History and Location Writing page state into the address and managing the history stack programmatically; the address's parts, which state belongs to the path, the query, or the fragment, the distinction between pushing and replacing, the navigation event, and the server side's share.
  3. 03 Observers The observer family that reports visibility, size, and tree changes in a batched, asynchronous way; the intersection ratio's calculation, root margin and threshold, the content-versus-border-box distinction, batched delivery of records, and the observer's contribution to layout cost.
  4. 04 Timing and the Paint Cycle The browser's frame-preparation order and fitting an update into that order; the frame budget, the alignment drift a fixed-delay timer causes, the frame callback's rules, separating reads from writes, and splitting long work.
  5. 05 Internationalization API Doing number, date, and sorting according to locale; the locale tag's structure, splitting formatted output into parts, the time zone's role, sorting's dependence on the alphabet, and the formatter's setup cost.
  6. 06 Media and Device APIs Access to capabilities that require permission; permission's states and preconditions, the secure-context and user-gesture requirements, feature detection and graceful degradation, media tracks' lifecycle, and the privacy balance of location access.
  7. 07 Web Workers Moving computation outside the main thread; the non-shared memory model, message passing, structured cloning's scope and cost, transferable objects, worker types, and when the separation pays off.

03

Web Components and Offline

Custom elements' lifecycle, shadow tree encapsulation, templates and slots, intervening in requests, and the cache freshness trade-off.

  1. 01 Custom Elements Introducing a new tag name into the browser's element registry; the naming rule, the order of lifecycle callbacks, upgrading an element that entered the tree before its definition, and attribute-property reflection.
  2. 02 Shadow DOM A separate document tree opened inside an element; where the selector stops, style's two-way isolation, inheritance and custom properties crossing the boundary, open versus closed mode, and how an event's target gets retargeted.
  3. 03 Templates and Slots The markup container that stays unrendered and the rules for copying it; the slot assignment algorithm, fallback content, the flattened tree, and which tree placed content still belongs to.
  4. 04 Service Workers A layer that lives independent of the page and can intervene to answer requests; the scope rule, the install-wait-activate cycle, the request-handling contract, and how a bad deployment is rolled back.
  5. 05 Caching Strategies The division of labor between the browser's two cache layers, the freshness decision given with headers and conditional requests, cache key production, the result four strategies give in the same states, and versioning with cleanup.
  6. 06 Progressive Web Apps The pieces that turn a page into an installable app; the web app manifest's fields and internal consistency, installability criteria, the responsibilities display mode brings, the permission model, and the offline outbox.

04

Developer Tools

The question each of the element inspector, network panel, performance recording, memory snapshot, and breakpoint tools answers, and how it is read.

  1. 01 Element and Style Inspection The question the Elements panel answers; the difference between the live tree and the source text, the declared-computed-used value distinction, reading cascade order, tracing inheritance, and interpreting box measurements.
  2. 02 Network Panel Diagnostics Which cause a request's timing stages point to; the distinction between transferred size and resource size, headers' role in diagnosis, reading a dependency chain in the waterfall, and making a measurement reproducible.
  3. 03 Performance Recording The main thread's breakdown of work over time; the distinction sampling produces between self time and total time, the long-task and frame-budget calculation, counting layout thrashing, and traps in interpreting a recording.
  4. 04 Memory Inspection Defining a leak through reachability; shallow size, retained size, and retainer path computation, comparing snapshots, the measured difference between strong and weak references, and browser-specific leak sources.
  5. 05 Source Debugging Stopping a program at a chosen point and reading its state; the question each breakpoint type answers, stepping and reading scope, resolving a location in production output back to source with a source map, and deploying the map.

Start typing to search.

↑↓ ↵ Esc navigate · open · close