# Web Engine 2026

> Production-grade reference architecture and 34 interactive engineering labs covering Modern HTML5, Web Standards, Tailwind v4, TS6, Nitro, Hono, Bun, Deno, Node 26, Drizzle ORM, Better Auth, S3/R2 Storage, Containers, and Edge Cloud.

## Overview
Web Engine 2026 is an interactive reference architecture and engineering lab suite demonstrating modern full-stack web standards, including Svelte 5 runes, Tailwind CSS v4 CSS-first theming, TypeScript 6 strict types, Drizzle ORM, Neon Postgres, Better Auth, and serverless Edge deployments.

## Curriculum Modules

### Track 01: Foundations & Tooling

- [01. Modern HTML5, Semantics & Web APIs](https://web-engine26.pages.dev/foundations/html5)
  - **Category**: HTML5 & Standards
  - **Technologies**: <dialog>, <details name="...">, Web Standards, Streams API, Web Crypto, URLPattern
  - **Description**: Master native accessible modals, exclusive accordions, clientless form validation, and core browser Web Standard APIs including Streams and Web Crypto.

- [02. Tailwind CSS v4, Styling & Asset Architecture](https://web-engine26.pages.dev/foundations/styling-assets)
  - **Category**: Tailwind CSS v4
  - **Technologies**: @theme Tokens, @container Queries, Asset Pipeline, AVIF / WebP, Immutable Cache
  - **Description**: Explore Tailwind CSS v4 CSS-first token configuration, container queries, modern layout systems, responsive image formats, and immutable asset delivery.

- [03. TypeScript 6 & Strict Engineering](https://web-engine26.pages.dev/foundations/typescript)
  - **Category**: TypeScript 6
  - **Technologies**: satisfies operator, Const Type Parameters, Discriminated Unions, Exhaustiveness, Strict Modules
  - **Description**: Enforce sound type boundaries, literal type preservation with satisfies, const type parameters, discriminated unions, and strict modular compilation.

- [04. Modern Icons & Responsive Favicon Systems](https://web-engine26.pages.dev/foundations/icons-favicons)
  - **Category**: Icons & Assets
  - **Technologies**: SVG Favicons, Dark/Light Media, Web App Manifest, CSS Mask Icons, DOM Optimisation
  - **Description**: Design theme-reactive SVG favicons, Apple touch icons, PWA manifest configurations, and high-performance single-node CSS mask icon systems.

- [05. PNPM Workspaces, Monorepos & CI/CD Pipelines](https://web-engine26.pages.dev/foundations/pnpm-ci)
  - **Category**: Tooling & CI/CD
  - **Technologies**: pnpm-workspace, catalog: Protocol, ci.yml Matrix, GitHub Actions, Strict Lockfiles
  - **Description**: Configure high-speed PNPM workspaces using the catalog protocol, immutable lockfile validation, and multi-OS GitHub Actions CI matrix pipelines.

### Track 02: Runtimes & Engines

- [06. Modern JS Runtimes: Node.js 24, Bun & Deno 2](https://web-engine26.pages.dev/runtimes/engines)
  - **Category**: JS Runtimes
  - **Technologies**: Node.js 24 LTS, Bun 1.2, Deno 2.2, Granular Permissions, Cold Starts, Web APIs Parity
  - **Description**: Benchmark execution speed, cold-start latency, package management performance, security sandbox permissions, and Web API parity across top runtimes.

- [07. Vite 6 Architecture & Library Packaging](https://web-engine26.pages.dev/runtimes/vite-packaging)
  - **Category**: Build & Packaging
  - **Technologies**: Vite 6 / Rolldown, HMR Pipelines, TypeScript d.ts, unbuild, package.json exports
  - **Description**: Understand Vite 6 next-gen bundling internals, lightning-fast HMR, TypeScript declaration generation, and multi-format npm library packaging with exports.

- [08. Universal Server Engines: Nitro & Hono](https://web-engine26.pages.dev/runtimes/nitro-hono)
  - **Category**: Server Engines
  - **Technologies**: UnJS Nitro, Hono Framework, Universal Presets, Typed Middleware, Hono RPC
  - **Description**: Build portable server backends with UnJS Nitro (universal presets & auto-imports) and deploy ultra-lightweight, zero-overhead edge APIs with Hono.

- [09. Modern Project Types & Directory Structures](https://web-engine26.pages.dev/runtimes/project-structures)
  - **Category**: Project Architecture
  - **Technologies**: Full-Stack App Hierarchy, Library Architecture, Monorepos, SSG vs Full-Stack, Server Isolation
  - **Description**: Architect production-grade codebases across full-stack applications, static sites, component libraries, and enterprise monorepo workspace hierarchies.

### Track 03: Modern ECMAScript

- [10. Precision Math, Maps & Modern Iterators](https://web-engine26.pages.dev/ecmascript/math-and-maps)
  - **Category**: ECMAScript
  - **Technologies**: Math.sumPrecise, Map.getOrInsert, Iterator Helpers, TS6 Strict Modules
  - **Description**: Eliminate floating-point accumulation bugs with Math.sumPrecise, leverage Map key memoization, and compose lazy data pipelines with Iterator helpers.

- [11. Binary Streams, Buffers & Container Layouts](https://web-engine26.pages.dev/ecmascript/binary-streams)
  - **Category**: ECMAScript
  - **Technologies**: Uint8Array.prototype.toBase64, toHex, Array.fromAsync, Tailwind v4 @container
  - **Description**: Execute native browser-level Base64 and Hex conversions, stream async iterables, and construct modular container-responsive interfaces.

- [12. Discrete Transitions & DOM Interactivity](https://web-engine26.pages.dev/ecmascript/discrete-transitions)
  - **Category**: HTML5 & Standards
  - **Technologies**: HTML5 inert, CSS @starting-style, allow-discrete, View Transitions API
  - **Description**: Orchestrate smooth zero-JavaScript entrance animations from display: none, isolate background accessibility trees, and apply modern popovers.

- [13. Resource Scopes & Explicit Management](https://web-engine26.pages.dev/ecmascript/resource-scopes)
  - **Category**: TypeScript 6
  - **Technologies**: using keyword, Symbol.dispose, Promise.withResolvers(), Deterministic Teardown
  - **Description**: Enforce automatic resource cleanup on block-scope exit with explicit resource management and decouple asynchronous lifecycle resolvers.

### Track 04: Rendering & Architecture

- [14. Rendering Strategies: SSG, SSR, Hybrid & CSR](https://web-engine26.pages.dev/rendering/strategies)
  - **Category**: Rendering Strategies
  - **Technologies**: Prerendering (SSG), Server-Side Rendering (SSR), Hybrid / ISR, Client-Side Rendering (CSR), TTFB vs FCP
  - **Description**: Compare static generation, dynamic server rendering, hybrid incremental regeneration, and client-side single page app models for speed and cost.

- [15. Hydration Engines & Data Serialisation](https://web-engine26.pages.dev/rendering/hydration-serialization)
  - **Category**: Hydration & Serialisation
  - **Technologies**: Hydration Pipeline, Island Hydration, Streaming SSR, devalue, SuperJSON, Data Boundaries
  - **Description**: Examine the client hydration lifecycle, partial/island hydration models, streaming SSR, and safe complex data serialisation with devalue.

- [16. Security: Strict CSP, Nonces & View Transitions](https://web-engine26.pages.dev/rendering/csp-transitions)
  - **Category**: Web Security & Transitions
  - **Technologies**: Strict CSP, Nonce-based Security, Frame Sandboxing, View Transitions API, Morph Transitions
  - **Description**: Harden web applications against XSS with cryptographic CSP nonces, strict headers, and coordinate fluid page animations with View Transitions.

### Track 05: APIs & Data Architecture

- [17. Schema Validation & Type-Safe RPC](https://web-engine26.pages.dev/apis/schema-rpc)
  - **Category**: API Architecture & RPC
  - **Technologies**: @standard-schema/spec, Zod / Valibot, Hono RPC, OpenAPI OAS 3.1, Remote Server Functions
  - **Description**: Enforce runtime boundaries with Standard Schema, auto-generate OpenAPI documentation, and implement end-to-end type-safe RPC contracts.

- [18. Real-Time Streaming & Webhook Signatures](https://web-engine26.pages.dev/apis/realtime-webhooks)
  - **Category**: Real-Time & Streaming
  - **Technologies**: Server-Sent Events (SSE), WebSockets, HMAC-SHA256, Timing-Safe Verify, Idempotency Keys
  - **Description**: Stream real-time telemetry over SSE and WebSockets, verify incoming webhook signatures with timing-safe HMAC, and prevent replay attacks.

- [19. Database Engines: Neon, Turso, libSQL, SQLite, PostgreSQL & postgres.js](https://web-engine26.pages.dev/infra/databases-orm)
  - **Category**: Backend & Data
  - **Technologies**: Neon Serverless, Turso & libSQL, postgres.js, SQLite & better-sqlite3, PostgreSQL (pg), Drizzle ORM
  - **Description**: Architect high-performance data layers across Neon Serverless Postgres, Turso edge libSQL, postgres.js, embedded SQLite, and stateful PostgreSQL with Drizzle ORM.

- [20. Edge Caching & Sliding Window Rate Limiting](https://web-engine26.pages.dev/infra/redis-ratelimit)
  - **Category**: Backend & Data
  - **Technologies**: @upstash/redis, @upstash/ratelimit, Sliding Window Algorithm, Distributed Locks, Edge Tokens
  - **Description**: Deploy stateless HTTP Redis caching, defend APIs against brute force attacks with sliding window algorithms, and manage distributed edge state.

- [21. Modern Authentication, Passkeys & Better Auth](https://web-engine26.pages.dev/infra/better-auth)
  - **Category**: Auth & Security
  - **Technologies**: Better Auth, WebAuthn Passkeys, HttpOnly Cookies, Session Rotation, PKCE OAuth
  - **Description**: Implement passwordless biometric passkeys, secure HttpOnly cookie session rotation, and modular authentication plugins with Better Auth.

- [22. Object Storage: S3 Client, Cloudflare R2 & Presigned Uploads](https://web-engine26.pages.dev/infra/storage-s3-r2)
  - **Category**: Object Storage & R2
  - **Technologies**: @aws-sdk/client-s3, Cloudflare R2, Presigned URLs, Zero Egress, Multipart Uploads, Bucket Policies
  - **Description**: Architect scalable media and file storage with AWS SDK v3, presigned client upload tokens, and zero-egress Cloudflare R2 buckets.

### Track 06: Cloud, Operations & Licences

- [23. Cloud Platforms: Cloudflare Workers, Vercel & Netlify](https://web-engine26.pages.dev/cloud/platforms-deployment)
  - **Category**: Cloud & Deployment
  - **Technologies**: Cloudflare Workers / Pages, Vercel Serverless & Edge, Netlify Edge, V8 Isolates vs Node, Deploy Options
  - **Description**: Evaluate deployment strategies across Cloudflare Workers, Vercel, and Netlify, comparing V8 isolate latency with containerised nodes.

- [24. Modern Testing Architecture: Vitest & Playwright](https://web-engine26.pages.dev/operations/testing)
  - **Category**: Testing & Quality
  - **Technologies**: Vitest, DOM Testing Library, Playwright E2E, Mock Service Worker (MSW), Coverage Reports
  - **Description**: Build a rock-solid test suite: ultra-fast unit testing with Vitest, accessible component testing, and resilient browser-driven end-to-end testing with Playwright.

- [25. SEO, Metadata & Privacy-First Web Analytics](https://web-engine26.pages.dev/operations/seo-analytics)
  - **Category**: SEO & Analytics
  - **Technologies**: HTML5 <head> Meta, Open Graph & Twitter Cards, JSON-LD Schema, Plausible / PostHog, Core Web Vitals
  - **Description**: Maximise search engine visibility with standard semantic metadata, Open Graph cards, and JSON-LD structured data while tracking cookieless analytics.

- [26. Site & Project Monetisation Models](https://web-engine26.pages.dev/business/monetization)
  - **Category**: Monetisation & Billing
  - **Technologies**: Polar.sh MoR, Stripe Billing & Webhooks, LemonSqueezy, Tiered Pro Access, Usage Metering
  - **Description**: Monetise developer tools and SaaS platforms with Merchant of Record tax handling, subscription checkouts, paywalled feature gates, and usage metering.

- [27. Software Licence Types & Open Source Matrix](https://web-engine26.pages.dev/business/software-licenses)
  - **Category**: Software Licences
  - **Technologies**: MIT / Apache 2.0 / BSD, GPLv3 / AGPLv3, MPL-2.0, BSL / FSL Source-Available, Licence Matrix Selector
  - **Description**: Navigate permissive, copyleft, and source-available software licences with a comprehensive decision matrix and interactive legal compatibility advisor.

- [28. Containers, Orchestration & IaC: Podman, Docker, OCI, ECS & Terraform](https://web-engine26.pages.dev/cloud/containers-iac)
  - **Category**: Containers & IaC
  - **Technologies**: Podman Rootless, Docker & OCI, AWS ECS / Fargate, Render PaaS, Terraform / OpenTofu, Wrangler IaC
  - **Description**: Compare rootless daemonless Podman with Docker, evaluate Container as a Service (ECS/Render) vs FaaS, and declare infrastructure with Terraform.

- [29. Developer Workstations: Windows 11 WSL2 vs Fedora 44, VS Code vs VSCodium & Node 26](https://web-engine26.pages.dev/operations/dev-environments)
  - **Category**: Developer Workstations
  - **Technologies**: Windows 11 WSL2, Fedora 44 Linux, VS Code Remote, VSCodium (Open VSX), Node.js 26 LTS, pnpm v12 Catalogs, OpenRemote
  - **Description**: Benchmark development workstation environments across Windows 11 WSL2 and native Fedora 44 Linux, comparing VS Code, VSCodium, Node 26, and OpenRemote.

### Track 07: Security, Privacy & EU Regulations

- [30. Modern Web Security: Strict CSP Level 3, Nonces & Isolation](https://web-engine26.pages.dev/security/defensive-headers)
  - **Category**: Defensive Web Security
  - **Technologies**: Strict CSP Level 3, COOP / COEP / CORP, Subresource Integrity (SRI), Trusted Types API, Sanitizer API, Permissions-Policy
  - **Description**: Harden full-stack web applications with strict cryptographic CSP Level 3 nonces, Cross-Origin Opener/Embedder Isolation, Trusted Types, and fine-grained Permissions Policy.

- [31. Web Privacy Engineering, Tracking Defenses & Anti-Fingerprinting](https://web-engine26.pages.dev/security/privacy-fingerprinting)
  - **Category**: Privacy & Tracking Defense
  - **Technologies**: Global Privacy Control (GPC), Anti-Fingerprinting Jitter, CHIPS Partitioned Cookies, CNAME Cloaking Defense, Link Decoration Stripping, Ephemeral Storage
  - **Description**: Protect user privacy against canvas/audio/font entropy fingerprinting, bounce tracking, CNAME cloaking, and implement Sec-GPC compliance with partitioned cookies.

- [32. Web Anonymity: Oblivious HTTP (OHTTP) & Private State Tokens](https://web-engine26.pages.dev/security/anonymity-oblivious)
  - **Category**: Oblivious Protocols & Anonymity
  - **Technologies**: Oblivious HTTP (RFC 9458), Private State Tokens (RFC 9578), Onion-Location Header, Blind Signatures, Zero-Knowledge Verifiers, Differential Privacy
  - **Description**: Decouple client network identities from application payloads with Oblivious HTTP (OHTTP), issue fraud-preventing Private State Tokens, and integrate onion routing.

- [33. Robots, AI Web Scrapers & Bot Mitigation Architecture](https://web-engine26.pages.dev/security/bots-crawlers-scraping)
  - **Category**: Bot Governance & Anti-Scraping
  - **Technologies**: RFC 9309 Robots Protocol, llms.txt Discovery, X-Robots-Tag: noai, EU Article 4 TDM, JA4 TLS Fingerprinting, Proof-of-Work (Altcha / Turnstile)
  - **Description**: Govern AI/LLM crawlers with RFC 9309 and llms.txt, enforce machine-readable EU TDM reservations, analyze JA4 TLS fingerprints, and deploy zero-tracking Proof-of-Work bot defenses.

- [34. EU Data Regulations: GDPR, ePrivacy, DMA/DSA & EU AI Act](https://web-engine26.pages.dev/compliance/eu-regulations)
  - **Category**: EU Compliance & Governance
  - **Technologies**: GDPR DSAR Automation, ePrivacy Cookieless Model, DMA / DSA Portability, EU AI Act Disclosures, EU Sovereign Data Residency, Audit Trails
  - **Description**: Implement robust compliance architectures for GDPR erasure/export webhooks, ePrivacy consent state machines, EU AI Act content transparency, and EU data sovereignty routing.

## Core Technologies
- Svelte 5 (Runes, snippets, reactive effects)
- Yaxa UI (Powered by yaxa-svelte v1.10.0 headless primitives, SEO helpers, and tokens: https://yaxa.vercel.app)
- Tailwind CSS v4 (@theme CSS-first engine)
- TypeScript 6 (Strict literal inference, const type parameters)
- SvelteKit 2 (Static prerendering, edge adapters)
- Better Auth (Session management, passkeys)
- Drizzle ORM + Neon Postgres (Serverless edge database)
- Upstash Redis (Distributed rate limiting)