intermediate
9 courses
~406 hours
59 lessons
JavaScript & Modern Web Mastery
From Rails engineer to full-stack — JavaScript, TypeScript, React, and Node.
A complete JavaScript, TypeScript, React, Node.js, and modern web curriculum for experienced Rails engineers crossing into the frontend and full-stack JavaScript world. Built on the ecosystem's canonical books and courses, reinforced with free resources. The path runs from JavaScript foundations through React mastery to full-stack architecture and production deployment.
Join the path to enroll in courses — they unlock in order as you finish each one.
JavaScript/TypeScript & Modern Web Media Track #
Companion to: JAVASCRIPT_WEB_MASTERY_CURRICULUM.md
Purpose: Video lectures, YouTube channels, talks, podcasts, and documentaries paired to each module. JavaScript's ecosystem moves fast -- conference talks and creator interviews are the best way to understand why tools exist, not just how to use them.
Last updated: April 30, 2026
How to Use This File #
-
Watch alongside building. Dan Abramov's talks while learning React internals. Ryan Dahl's Node talk while building your first server.
-
Break weeks. Between modules, watch a documentary or creator interview to reset.
-
Mood tags: (Technical), (Inspiring), (Historical), (Fun), (Deep Dive), (Live Coding)
Module 0: JavaScript Foundations #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Fireship: JavaScript in 100 Seconds | Video | 2 min | Fun | Fastest possible JS overview. |
| Douglas Crockford: JavaScript -- The Good Parts (Google Tech Talk) | Talk | 60 min | Historical | THE talk that redeemed JavaScript. Crockford showed there was a real language hiding under the mess. |
| Douglas Crockford: The Better Parts (JSConfUY 2014) | Talk | 50 min | Historical | Crockford's updated take on JS with ES6. What he'd keep and what he'd kill. |
| Kyle Simpson: What the... JavaScript? (ForwardJS 2015) | Talk | 40 min | Fun | YDKJS author live-demoing JavaScript's weirdest behaviors. Coercion, scope, hoisting. |
| Philip Roberts: What the heck is the event loop anyway? (JSConf EU 2014) | Talk | 26 min | Technical | THE event loop talk. Everyone references this. Watch before touching async code. |
| Anjana Vakil: Immutable Data Structures (JSConf EU 2017) | Talk | 26 min | Technical | Functional programming concepts in JS, explained with wonderful clarity. |
Module 1: Modern JavaScript & TypeScript #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Fireship: TypeScript in 100 Seconds | Video | 2 min | Fun | Fastest possible TS overview. |
| Matt Pocock: Beginner's TypeScript (YouTube series) | YouTube Series | 10-20 min each | Technical | THE TypeScript educator. Start here for type-level thinking. |
| Matt Pocock: Advanced TypeScript (Total TypeScript) | YouTube Series | varies | Deep Dive | Generics, conditional types, mapped types. Watch after TS basics click. |
| Anders Hejlsberg: TypeScript Origins (2012) | Talk | 60 min | Historical | TypeScript's creator (also C#, Turbo Pascal) explains why TS exists. |
| TC39: How JavaScript Gets Its Features | Talk | 30 min | Technical | How the TC39 proposal process works. Stages 0-4 explained. |
Module 2: DOM, CSS & Browser APIs #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Kevin Powell: CSS tutorials | YouTube Channel | 10-30 min each | Technical | THE CSS educator on YouTube. Flexbox, Grid, modern CSS features. |
| Jen Simmons: Layout Land | YouTube Series | 10-20 min each | Inspiring | Apple/Mozilla engineer showing what modern CSS layout can do. |
| Chrome DevTools: Performance panel (official) | Tutorial | 30 min | Technical | Learn to profile rendering, layout shifts, and paint performance. |
| Steve Krug: Don't Make Me Think (talks) | Talk | 40 min | Inspiring | Usability testing in 20 minutes. Changes how you think about UI. |
| Jake Archibald: In The Loop (JSConf Asia 2018) | Talk | 35 min | Deep Dive | Microtasks, macrotasks, requestAnimationFrame. Visual explanation of the browser event loop. |
Module 3: React & Component Architecture #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| React Documentary (Honeypot) | Documentary | 80 min | Inspiring | The story of React: from Facebook internal tool to industry standard. Watch during a break week. |
| Dan Abramov: Beyond React 16 (JSConf Iceland 2018) | Talk | 30 min | Technical | First public demo of Concurrent React (Time Slicing, Suspense). A turning point for React. |
| Dan Abramov: A Cartoon Intro to Fiber (React Conf 2017) | Talk | 30 min | Technical | How React Fiber works internally. |
| Kent C. Dodds: Simply React (React Conf) | Talk | 25 min | Technical | Component composition patterns. Compound components, render props, hooks. |
| Kent C. Dodds: React Hooks (EpicReact) | YouTube Series | varies | Technical | Practical hooks patterns from the author of EpicReact. |
| React Conf keynotes | Talks | varies | Inspiring | Watch yearly keynotes for React direction. Server Components, Actions, Compiler. |
Module 4: Node.js & Server-Side JS #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Ryan Dahl: Original Node.js Presentation (JSConf 2009) | Talk | 45 min | Historical | THE talk that launched Node.js. Watch this. A man with an idea that changed server-side programming. |
| Ryan Dahl: 10 Things I Regret About Node.js (JSConf EU 2018) | Talk | 27 min | Historical | Node's creator explains his regrets -- and introduces Deno. |
| Node.js: The Documentary (Honeypot) | Documentary | 55 min | Inspiring | The story of Node.js, io.js fork, and the community that built it. |
| Matteo Collina: Node.js Streams (NodeConf) | Talk | 35 min | Deep Dive | The Node.js streams expert explains backpressure and pipeline patterns. |
| James Snell: Node.js Performance (NodeConf) | Talk | 40 min | Technical | Node.js core team member on performance tuning. |
Module 5: Full-Stack Architecture #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Guillermo Rauch: Next.js vision talks | Talk | 30 min | Inspiring | Vercel CEO explains the future of full-stack React. |
| Next.js Conf keynotes | Talks | varies | Technical | Annual Next.js conference. Server Components, App Router, Turbopack announcements. |
| Remix Conf keynotes | Talks | varies | Technical | Ryan Florence and Michael Jackson on web fundamentals-first approach. |
| Rails World: Hotwire vs React discussions | Talks | varies | Technical | Directly relevant to your Rails background. Where does Hotwire end and React begin? |
| Theo (t3.gg): Full-stack architecture breakdowns | YouTube | varies | Fun | Opinionated full-stack takes. Good for understanding the JS ecosystem zeitgeist. |
Module 6: Testing, Performance & DevOps #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Kent C. Dodds: Testing JavaScript (talks) | Talk | 30 min | Technical | The Testing Trophy. Unit vs integration vs e2e. Directly comparable to your RSpec experience. |
| Kent C. Dodds: Write tests. Not too many. Mostly integration. | Talk | 20 min | Technical | THE testing philosophy talk for frontend. |
| Addy Osmani: The Cost of JavaScript (Chrome Dev Summit) | Talk | 30 min | Technical | Why bundle size matters. Parse, compile, execute costs on real devices. |
| Addy Osmani: Performance Budgets (web.dev) | Talk | 25 min | Technical | Setting and enforcing performance budgets. |
| Chrome Dev Summit: Core Web Vitals | Talks | varies | Technical | LCP, FID, CLS explained. Google's performance metrics. |
Module 7: Ecosystem & Emerging Patterns #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Rich Harris: Rethinking Reactivity (YGLF 2019) | Talk | 36 min | Inspiring | Svelte's creator argues against the virtual DOM. Paradigm-shifting talk. |
| Rich Harris: The Future of Svelte (Svelte Summit) | Talk | varies | Technical | Where Svelte is heading. Runes, SvelteKit, compiled reactivity. |
| Evan You: Vue.js Documentary (Honeypot) | Documentary | 35 min | Inspiring | Vue's creator -- from Google designer to independent framework author. |
| Evan You: Vite talks | Talk | varies | Technical | How Vite reinvented the build tool space. esbuild, Rollup, and native ESM. |
| ThePrimeagen: JavaScript/TypeScript content | YouTube | varies | Fun | Entertaining JS ecosystem commentary. HTMX takes, framework wars. |
| Jarred Sumner: Bun talks | Talk | varies | Technical | How Bun reimagined the JS runtime. Speed, DX, and bundler-in-a-runtime. |
Module 8: Capstone & Portfolio #
| Resource | Type | Duration | Mood | Why |
|---|---|---|---|---|
| Indie Hackers: Shipping side projects (talks) | Talks | varies | Inspiring | Real people shipping real products. Motivation for your capstone. |
| Fireship: I built X in Y minutes | YouTube | 10-15 min | Fun | Speed-run app builds. Good for project ideas and seeing what's possible. |
| Theo: How to build a portfolio | YouTube | 15 min | Technical | What hiring managers actually look for in portfolios. |
| Jason Lengstorf: Learn With Jason | Live Coding | 90 min each | Live Coding | Collaborative live-coding with framework authors. See how experts build things. |
Podcasts #
| Podcast | Focus | Why |
|---|---|---|
| Syntax.fm | Full-stack web dev | Wes Bos and Scott Tolinski. The most popular web dev podcast. Practical, fun, opinionated. |
| JS Party | JavaScript ecosystem | Changelog's JS podcast. Panels with framework authors, TC39 members, and community leaders. |
| PodRocket | Frontend engineering | Short interviews (20-30 min) with library authors. Good commute listening. |
| ShopTalk Show | Frontend, CSS, design | Chris Coyier (CSS-Tricks) and Dave Rupert. Long-running, CSS and design heavy. |
| Frontend Happy Hour | Frontend engineering | Netflix, LinkedIn, Twitch engineers discussing frontend topics over drinks. |
YouTube Channels (Subscribe) #
| Channel | Focus | Why |
|---|---|---|
| Fireship | All web tech | 100 Seconds series, code reports. The best short-form web dev content. |
| Theo (t3.gg) | Full-stack, React, Next.js | Opinionated ecosystem commentary. Keeps you current on JS drama and trends. |
| Kevin Powell | CSS | THE CSS channel. Modern CSS, responsive design, layout techniques. |
| Web Dev Simplified | JS, React, tutorials | Kyle Cook. Clear, beginner-friendly web dev tutorials. |
| Kent C. Dodds | React, testing | EpicReact and Testing Library author. Practical patterns. |
| Matt Pocock | TypeScript | THE TypeScript channel. Type challenges, advanced patterns, quick tips. |
| ThePrimeagen | All languages, JS included | Entertaining takes on the JS ecosystem. "Blazingly fast" energy. |
| Jack Herrington | React, micro-frontends | Senior-level React content. Module federation, advanced patterns, architecture. |
Watch one talk per week. Subscribe to Syntax.fm and JS Party. JavaScript's ecosystem is best understood by hearing creators explain their design decisions -- the "why" behind every framework matters more than the API.
JavaScript/TypeScript & Modern Web Community Guide #
Companion to: JAVASCRIPT_WEB_MASTERY_CURRICULUM.md
Purpose: Newsletters, blogs, forums, conferences, and open-source projects for the JavaScript/TypeScript ecosystem. The JS community is the largest in programming -- the challenge is filtering signal from noise. This guide curates the sources that matter.
Last updated: April 30, 2026
Newsletters & Blogs #
JavaScript & TypeScript #
| Blog/Newsletter | Author/Source | Focus | Why |
|---|---|---|---|
| JavaScript Weekly | Cooperpress | JS news | THE JavaScript newsletter. Subscribe. Weekly roundup of articles, releases, and tools. |
| Node Weekly | Cooperpress | Node.js news | Weekly Node.js roundup. Server-side JS, runtime updates, packages. |
| TypeScript Weekly | Marius Schulz | TypeScript | Weekly TS roundup. Type-level tricks, compiler updates, ecosystem news. |
| Frontend Focus | Cooperpress | Browser, HTML, CSS | Weekly frontend roundup. Browser APIs, performance, accessibility. |
React & Frameworks #
| Blog/Newsletter | Author/Source | Focus | Why |
|---|---|---|---|
| React Status | Cooperpress | React | Weekly React roundup. New patterns, library releases, conference talks. |
| CSS Weekly | Zoran Jambor | CSS | Weekly CSS articles and tutorials. Modern CSS features, layout, animation. |
| Josh Comeau's Blog | Josh Comeau | React, CSS, animations | Interactive blog posts that teach through doing. "A Complete Guide to CSS" series is stellar. |
| Kent C. Dodds Blog | Kent C. Dodds | React, testing, career | EpicReact author. Practical posts on component patterns, testing strategy, and career growth. |
Deep Technical #
| Blog/Newsletter | Author/Source | Focus | Why |
|---|---|---|---|
| Overreacted | Dan Abramov | React internals, JS | Redux creator and former React team member. "A Complete Guide to useEffect" is essential reading. |
| Robin Wieruch | Robin Wieruch | React, Node | Long-form tutorials. Full-stack React with clear explanations. |
| Tanner Linsley's Blog | Tanner Linsley | TanStack, React Query | Creator of React Query, TanStack Router, TanStack Table. State management and data fetching. |
| CSS-Tricks | DigitalOcean | CSS, frontend | Now under DigitalOcean. "A Complete Guide to Flexbox/Grid" are evergreen references. |
| Smashing Magazine | Community | Frontend, UX, performance | Long-running frontend publication. In-depth articles on accessibility, performance, and design. |
Forums & Communities #
| Community | Platform | Focus | Why Join |
|---|---|---|---|
| r/javascript | JavaScript | Large, active. Library announcements, ecosystem debates, career discussions. | |
| r/reactjs | React | THE React community hub. Pattern discussions, help threads, library comparisons. | |
| r/node | Node.js | Server-side JS. Architecture discussions, package recommendations, deployment. | |
| r/typescript | TypeScript | Type-level discussions, compiler questions, migration stories. | |
| r/webdev | Web development | Broad web dev community. Career advice, project showcases, industry trends. | |
| r/frontend | Frontend | Frontend-specific discussions. CSS, accessibility, tooling. | |
| Reactiflux Discord | Discord | React | 200K+ members. Active help channels, React team members present. |
| TypeScript Discord | Discord | TypeScript | Official TypeScript community. Type challenges, help, and discussion. |
| Node.js Discord | Discord | Node.js | Official Node.js community. Core contributors active. |
Conferences (Recordings Available Free) #
| Conference | Focus | How to Access | Why |
|---|---|---|---|
| React Conf | React | YouTube (free) | Official React conference. Server Components, Compiler, and React direction. |
| Next.js Conf | Next.js, full-stack | YouTube (free) | Vercel's annual conference. App Router, Server Actions, Turbopack announcements. |
| ViteConf | Vite, build tools | YouTube (free) | Online conference about Vite and the modern build ecosystem. |
| JSConf | JavaScript | YouTube (free) | THE JavaScript conference family. Legendary talks (event loop, Node.js origin). |
| NodeConf | Node.js | YouTube (free) | Node.js focused. Core team talks, performance deep dives, production stories. |
| CSSConf | CSS | YouTube (free) | CSS-focused conference. Layout, animation, design systems. |
| JSNation | JavaScript | YouTube (free) | Large JS conference. Mix of practical and visionary talks. |
| React Summit | React | YouTube (free) | GitNation's React conference. Advanced patterns, performance, architecture. |
| All Things Open | Open source, web | YouTube (free) | Broad open-source conference with strong JS/web tracks. |
Open-Source Projects to Study #
Study these for their architecture and patterns, not just their APIs.
React Ecosystem #
| Project | What It Is | Why Study |
|---|---|---|
| Next.js | Full-stack React framework | THE React framework. Study its App Router, Server Components implementation, and middleware system. |
| Remix | Web-standards React framework | Web fundamentals approach. Study its loader/action pattern -- closest to Rails controller thinking. |
| Vite | Build tool | Replaced Webpack for most projects. Study its plugin system and native ESM dev server. |
| TanStack Query | Data fetching/caching | Best-in-class data fetching. Study its cache invalidation and optimistic updates. Comparable to what you'd build in Rails with Turbo. |
| Zustand | State management | Tiny, elegant state management. Study its simplicity -- it's the anti-Redux. |
Node.js & Runtimes #
| Project | What It Is | Why Study |
|---|---|---|
| Express | Web framework | THE Node framework. Study its middleware pattern -- inspired by Rack/Rails middleware. |
| Fastify | Web framework | Express alternative focused on performance. Study its plugin system and schema validation. |
| Hono | Edge-first web framework | Runs everywhere (Cloudflare Workers, Deno, Bun, Node). Study its Web Standards API approach. |
Tools & Infrastructure #
| Project | What It Is | Why Study |
|---|---|---|
| ESLint | Linter | JS linting standard. Study its rule and plugin architecture. |
| Prettier | Code formatter | Opinionated formatting. Study how it parses and reprints code (like RuboCop but no config wars). |
| esbuild | Bundler (Go) | 100x faster bundling. Study why a Go tool won the JS build tool war. |
| SWC | Compiler (Rust) | Rust-based JS/TS compiler. Study how Rust is eating JS tooling. |
| Turbopack | Bundler (Rust) | Next.js's new bundler. Rust-based successor to Webpack. |
Full Applications #
| Project | What It Is | Why Study |
|---|---|---|
| Cal.com | Scheduling platform | Full-stack Next.js app. Study its monorepo structure, tRPC usage, and Prisma integration. |
| Docusaurus | Documentation framework | Meta's docs tool. Study its plugin architecture and static generation. |
| Excalidraw | Whiteboard app | Beautiful React app. Study its canvas rendering, collaboration (CRDT), and state management. |
Essential Talks (Watch These) #
The 10 talks everyone in the JavaScript world references.
| Talk | Speaker | Year | Why |
|---|---|---|---|
| JavaScript: The Good Parts | Douglas Crockford | 2009 | The talk that rehabilitated JavaScript. Showed a real language hiding under the quirks. |
| Original Node.js Presentation | Ryan Dahl | 2009 | THE origin story. A man with a simple idea about non-blocking I/O that changed everything. |
| What the heck is the event loop? | Philip Roberts | 2014 | The most referenced JS talk. Visual explanation of call stack, callback queue, and event loop. |
| Beyond React 16 | Dan Abramov | 2018 | First public demo of Concurrent React. Time Slicing and Suspense revealed. |
| Rethinking Reactivity | Rich Harris | 2019 | Svelte's creator argues the virtual DOM is overhead. Compiled reactivity as an alternative. |
| 10 Things I Regret About Node.js | Ryan Dahl | 2018 | Node's creator reflects on mistakes and introduces Deno. Humility and technical honesty. |
| Hot Takes on React Server Components | Dan Abramov & Lauren Tan | 2020 | The talk that introduced RSC. Changed how we think about server vs client rendering. |
| In The Loop | Jake Archibald | 2018 | Deep dive into microtasks, rendering, and requestAnimationFrame. The event loop talk for advanced engineers. |
| Simply React | Kent C. Dodds | 2018 | Component composition over configuration. Patterns that scale. |
| The Birth & Death of JavaScript | Gary Bernhardt | 2014 | Satirical time-travel talk about JavaScript's bizarre rise. Funny, prescient, and legendary. |
The JavaScript community is enormous -- subscribe to JavaScript Weekly and Syntax.fm to stay current without drowning. As a Rails engineer, you already understand server-side thinking. Let the JS community teach you the client-side half of the story.