Command Palette

Search for a command to run...

Hectal
Phase 15Advanced16 of 16 in JavaScript

Patterns, Security and Interviews

Functional and design patterns, performance, defensive web security, Web Components, interview deep dives, and a capstone task app built step by step.

This phase pulls the whole course together. First come the patterns professionals use to keep code small and easy to change: functional ideas like immutability, composition and currying, then the classic design patterns as they look in JavaScript (module, observer, factory, singleton, strategy). After that you learn to make code fast the honest way: measure first, then remove work.

Next is web security for JavaScript developers, taught defensively: what cross-site scripting (XSS) and cross-site request forgery (CSRF) are, which DOM APIs are safe, how a Content Security Policy limits the damage, and how to check that your defences work. Then Web Components: your own HTML tags with custom elements, shadow DOM, templates and slots.

The last part prepares you for interviews and for real work. Two deep dives turn scope, closures, this, hoisting, the event loop and promises into classic "what does this print?" questions, each a live example you can run. The capstone then builds a complete task app step by step: state, rendering, events and localStorage, using ideas from every earlier phase.

0/8 · 0%
8 topics ~4 h 28 code blocks & diagrams
Start with the first topic
1
15.1

Functional Patterns

Functional patterns build programs from small functions that don't change shared data: immutability keeps values safe, composition chains functions into pipelines, and currying and partial application make specialised functions from general ones.

28 min 3 code practice

2
15.2

Design Patterns in JavaScript

Design patterns are named, proven shapes for common code problems; in JavaScript the everyday ones are the module (private state), observer and pub/sub (notify listeners), factory (build the right object), singleton (one shared instance) and strategy (swap the algorithm).

28 min 3 code practice

3
15.3

Performance

Fast JavaScript comes from doing less work, not from clever tricks: measure first with performance.now, marks and the DevTools Performance panel, then remove repeated work with memoisation, better data structures and batched DOM updates.

22 min 3 code practice

4
15.4

Web Security for JavaScript Developers

Most front-end security bugs come from treating untrusted text as code: prevent XSS by keeping data as text (textContent, safe DOM APIs, escaping, URL checks), limit the damage with a Content Security Policy, block CSRF with SameSite cookies and tokens, and treat every third-party script as code with full access to your page.

29 min 4 code practice

5
15.5

Web Components

Web Components let you make your own HTML tags: a custom element is a class the browser runs for your tag, shadow DOM gives it private markup and styles, and <template> with <slot> lets page authors pass content into it.

22 min 3 code practice

6
15.6

Interview Deep Dive: Scope, Closures, this and Hoisting

Most "what does this print?" interview questions test four rules: how hoisting sets up variables before code runs, how lexical scope decides which variable a name means, how closures keep variables alive, and how a call decides this.

29 min 4 code practice

7
15.7

Interview Deep Dive: The Event Loop and Promises

Async interview questions test one model: synchronous code runs to the end, then every microtask (promise callbacks, await continuations, queueMicrotask) runs, then one task (a timer, an event) runs, and the cycle repeats; with that model you can predict any output order and write Promise.all and debounce from scratch.

33 min 5 code practice

8
15.8

Capstone: Build a Task App

The capstone builds a complete task app in plain JavaScript with one clear shape: a single state object, pure functions that compute new state, one render function that draws the page from state, delegated event listeners, and localStorage so tasks survive a reload.

27 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your functional toolkit: pipe, curry and memoize

Write three small helpers from Topics 15.1 and 15.3, then use them.

Intermediate
2

A comment box that can't be hijacked

Make the comment form work safely (Topic 15.4). On submit, without reloading the page:

Intermediate
3

Build an event emitter

Write a class Emitter (the observer pattern from Topic 15.2) with these methods:

Intermediate
4

Interview classics: Promise.all and debounce

Write the two most-asked async functions from Topic 15.7, without using Promise.all, allSettled, race or any inside them.

Advanced
5

Capstone part 1: add, tick and delete tasks

Build the core of the task app from Topic 15.8. The HTML is ready; write the JavaScript with one state array, pure update functions, **one render() and delegated events**.

Advanced
6

Capstone part 2: filters, clear done and saving

Finish the task app. The starter is a working core (part 1). Add:

Advanced