js ts learning roadmap - Serbipunk/notes GitHub Wiki

Happy to. Here's a roadmap built around your profile: skip beginner material, anchor on the runtime model, and get to graphics-adjacent code fast. Roughly 8–10 weeks at a part-time pace, though you'll likely compress it — and it dovetails nicely with your MDS start on July 20, since game programming increasingly touches web tooling anyway.

Phase 1 — Modern JS core (1–2 weeks)

Primary resource: javascript.info (The Modern JavaScript Tutorial). It's free, current, and well-organized. With your background, read Parts 1–2 at skim speed but slow down for: closures and lexical scope, prototypes, this binding, iterators/generators, and the "everything is an object reference" model. These are where C++ intuition actively misleads.

Supplement: MDN (developer.mozilla.org) as your reference manual — treat it like cppreference.com. For depth on the object model, the free book series You Don't Know JS Yet by Kyle Simpson (on GitHub) is the classic — the "Scope & Closures" and "Objects & Classes" volumes especially.

Phase 2 — Async and the event loop (1 week)

This is the single most important "system" concept. Resources:

  • Jake Archibald's talk "In the Loop" (JSConf, on YouTube) — the canonical visual explanation of tasks vs microtasks vs rAF.
  • javascript.info's chapters on Promises, async/await, and microtasks.
  • Philip Roberts' "What the heck is the event loop anyway?" plus the Loupe visualizer, if you want a second angle.

Exercise worth doing: write a small frame-loop animation with requestAnimationFrame and deliberately block the main thread to see jank happen. Your rendering background makes this phase almost recreational.

Phase 3 — TypeScript (1–2 weeks)

  • The official TypeScript Handbook (typescriptlang.org/docs) — genuinely good documentation, read it cover to cover; it's shorter than you'd expect.
  • Follow with the TypeScript playground to poke at type behavior interactively.
  • For the advanced type-level programming (conditional types, mapped types, infer), the free exercises at type-challenges on GitHub are excellent — they'll scratch the same itch as template metaprogramming.

Key mental shift: structural typing and type erasure. Types are compile-time assertions, not runtime entities — no RTTI equivalent.

Phase 4 — The browser platform + graphics (2–3 weeks)

This is where you connect to your strengths:

  • MDN's WebGL2 tutorial, or better, WebGL2 Fundamentals — you'll fly through it since it's just OpenGL ES 3.0 with a JS binding, but it teaches the JS-side idioms (TypedArrays, buffer management, avoiding GC pressure in the render loop).
  • Then WebGPU Fundamentals — WebGPU is the present/future and its explicit API will feel closer to Vulkan, which pairs well with your in-progress Vulkan course.
  • Three.js docs and examples if you want a scene-graph layer; its source code is also very readable TS-adjacent JS.

Phase 5 — Tooling and Node (1 week)

  • Learn the module system (ESM), package.json, and npm basics — MDN and the Node.js official docs cover this.
  • Vite (vitejs.dev) as your bundler/dev server; its docs are short and it's the de facto standard for front-end dev in 2026.
  • Skim how tsconfig.json works (the Handbook covers it).

Phase 6 — Performance and V8 (ongoing, as needed)

Now V8 earns its place: the v8.dev blog posts on hidden classes, inline caches, and garbage collection; Chrome DevTools' Performance and Memory panels (MDN + Chrome developer docs have tutorials). Profile something real — ideally cam_synth's web layer.

Capstone suggestion

Rather than tutorial projects, extend cam_synth: port a piece of the pipeline UI to TypeScript, or build a small WebGPU visualizer for the reconstruction output. A real project with your existing WASM/ONNX stack will teach interop (JS ↔ WASM memory, TypedArray views over the WASM heap) better than any course — and it doubles as portfolio material for VFX/games roles.

One deliberate omission: I'd skip paid platforms (Frontend Masters, etc.) entirely — for someone at your level, the free canon above is strictly better than most courses.