TypeScript, Web Internals & Git — Web Development

Phase Goal

Read TypeScript fluently, understand what actually happens when you visit a URL, and use git like a senior would expect.

Mini Projects

Typed Earthquake Feed Boundary

Projects

Typed Air-Quality Advisory

Phase 3 Checkpoint

Compile-time safety, refactor superpower, IDE autocompleteCost: a small upfront friction, huge long-term ROISetup: npm install -D typescript && npx tsc --initAlways strict: true

string, number, boolean, null, undefined, bigint, symbolArrays: number[] vs Array<number>Tuples: [string, number] for fixed shapesany (avoid), unknown (preferred for unknown), never (impossible)

Let TS infer; annotate at boundariesHover in VS Code to see inferred typesWhen to annotate explicitly (function params, public APIs)

Parameter types + return typeOptional params (name?: string)Default params + inferenceFunction signatures: type Add = (a: number, b: number) => number

Convert a Day 24 module to TSFix the errors strict mode gives youNo anys allowed

Both describe object shapesinterface for objects you might extendtype for unions, primitives, computed typesWhen in doubt, type

Union: string | numberIntersection: A & BLiteral types: "GET" | "POST"Narrowing with typeof, in, instanceof, discriminated unions

function identity<T>(x: T): T { return x }Constraints: <T extends { id: string }>Multiple type paramsDefault type params

Partial<T>, Required<T>, Readonly<T>Pick<T, K>, Omit<T, K>Record<K, V>ReturnType<typeof fn>, Awaited<T>

apiGet<T>(url: string): Promise<T>Use it for a public earthquake-feed endpointDefine the response type

Mini Project

Typed Earthquake Feed Boundary

Build a reusable apiGet<T>(url) boundary, define the uncertain earthquake-feed response separately from the normalized event model, and render typed magnitude/location results without assertions leaking into the UI.

DNS: domain → IPTCP: connection setup (3-way handshake)TLS: encrypted channel (handshake basics)HTTP: the request/response cycle

Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONSStatus codes: 200/201/204/301/302/400/401/403/404/409/422/500/503Headers: Content-Type, Authorization, Cookie, CORS headersREST conventions: nouns, plurals, hierarchy

Parse HTML → DOM, CSS → CSSOMRender tree → layout → paint → compositeWhat blocks: synchronous JS, render-blocking CSSdefer vs async on <script>

Cookies: sent with every request to that domainhttpOnly cookies inaccessible to JS (key for auth)localStorage: 5–10MB, no auto-sendsessionStorage: per-tab, cleared on close

Origin = scheme + host + portBrowser blocks cross-origin requests by defaultServer opts in via Access-Control-Allow-OriginPreflight OPTIONS for non-simple requests

init, clone, status, add, commit, push, pullWorking tree → staging → repo mental modelInspecting history: log, log --oneline --graph

main = always deployablefeature/* short-lived branchesswitch -c feature/x; later: switch main && merge feature/xDelete merged branches (clean repo)

Merge: preserves history, makes a merge commitRebase: rewrites your branch on top of latest mainRebase before pushing; never rebase shared branchesInteractive rebase: rebase -i HEAD~5 for cleanup

Read the markers <<<<<<<, =======, >>>>>>>Open both versions side-by-side in VS CodeAfter fix: git add → git rebase --continue (or commit if merging)When stuck: git rebase --abort and try again

.gitignore + gitignore.iogit stash / stash popgit restore <file> to undo unstaged changesgit switch / git switch -c (modern alternatives to checkout)

Imperative subject ≤ 50 chars: "Add login form"Optional body explaining why, not whatConventional commits format (feat:, fix:, chore:)

Fork → clone → branch → push → open PRPR title + description templateLinking issues with "Closes #123"Self-review before requesting review

Review: critique code, not the personAuthor: don't take feedback personallyUse suggestion blocks for tiny fixesApprove, request changes, or comment

Issue templatesLabels: bug / enhancement / docs / good first issueProject boards (kanban)Milestones for shipping a version

Squash and merge (most common for feature branches)Rebase and merge (clean linear history)Merge commit (preserves topology)Pick one and document it for the team

Workflows live in .github/workflows/Triggers: push, pull_requestA simple CI: install + lint + test on every PRStatus checks blocking merge

Start from a deliberately untyped air-quality response fixtureRewrite in TypeScript with ViteType the open-meteo response (use the actual schema)Strict mode on; zero any

npm create vite@latest air-quality-advisory -- --template vanilla-tsMove state and helpers to typed modulesFix every TS error properly (don't suppress)

Project

Typed Air-Quality Advisory

A strict TypeScript advisory that normalizes station readings, represents missing measurements honestly, and explains health bands without any unchecked API assumptions or `any`.

Open it as a PR against your own repoWrite a real PR description with screenshotsSelf-review the diff line by lineSquash-merge to mainTag a release v1.0.0

Capstone

Phase 3 Checkpoint

The Typed Air-Quality Advisory ships through a real issue, branch, review, squash, and release workflow. You can defend its types, trace its network request, and contribute without rewriting history.

Phase Complete!

After this phase, you'll be able to:

Read & write modern TypeScript with strict mode
Explain DNS → TCP → TLS → HTTP → render
Confident git branching, merging, rebasing, conflict resolution
Real PR + code review workflow
Basic GitHub Actions CI

You can join an open-source project or a real team without git/TS friction.

Phase Goal

Day 27: TypeScript Fundamentals

Why TypeScript

Primitives, arrays, tuples

Type inference

Function types

Practice

Day 28: Interfaces, Types, Generics

interface vs type

Unions, intersections, narrowing

Generics

Utility types you'll use forever

Mini build: typed fetch

Typed Earthquake Feed Boundary

Day 29: How the Web Actually Works

From URL to bytes

HTTP essentials

Browser internals

Cookies vs localStorage vs sessionStorage

Same-origin & CORS

Day 30: Git Like a Senior

Git basics (recap if needed)

Branching strategy

Merge vs rebase

Resolving conflicts without panic

Daily utilities

Writing commit messages future-you can read

Day 31: PRs, Reviews, GitHub

Forking & opening a PR

Code review etiquette

GitHub Issues, projects, milestones

Merge strategies

GitHub Actions intro

Day 32: Mini Project — Typed Air-Quality Advisory

Spec

Build

Typed Air-Quality Advisory

Real PR workflow

Phase 3 Checkpoint

Phase Complete!