727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

Episode Summary

Executive Summary: The episode is a high-level guide to the modern web-development stack, walking through the main tools by category—from design and coding tools to runtimes, databases, hosting, and monitoring. Wes and Scott share their preferred defaults, emphasizing simplicity, strong developer experience, and choosing the least complex option that fits the job, while noting that the ecosystem is rapidly changing.

Main Topics: Opinionated stack overview: The hosts answer a listener request for a 30,000-foot view of major web-development tools by category, framing the episode as a surface-area map of the ecosystem rather than a deep dive. Design tools and code tooling: They compare Figma, Sketch, Adobe XD, VS Code, terminal editors, and terminal apps, recommending modern, flexible tools that closely match real-world implementation. Build tools, browsers, formatters, and CSS: The discussion covers Vite, browser dev tools, Prettier/ESLint vs Biome, and CSS choices like vanilla CSS and Tailwind, with a strong preference for modern defaults and minimal complexity. Languages, frameworks, runtimes, and backend choices: They outline the roles of JavaScript/TypeScript, meta frameworks like SvelteKit/Next/Remix/Astro, backend frameworks like Hono and Elysia, and runtimes like Node, Deno, and Bun. UI libraries, data, and ORMs: The hosts explain the range from headless UI libraries to full design systems, then move into database choices and ORM options such as Drizzle and Prisma. Deployment, hosting, CDN, CI, and finishing touches: They cover hosting and delivery infrastructure, image pipelines, application monitoring with Sentry, CAPTCHA options, and analytics tools like Google Analytics and Plausible. Tooling philosophy and pragmatic defaults: Across categories, the hosts stress using the simplest tool that solves the problem, favoring defaults like Figma, VS Code, Vite, vanilla CSS, Postgres/MySQL, and Sentry for most projects.

Key Arguments: For new developers, learning the ecosystem as a set of categories helps reduce overwhelm and makes it easier to understand how the stack fits together. Figma is the best design tool choice because it is closest to what CSS can actually implement and has strong component/reusable design support. VS Code remains the default code editor because it is the most capable and broadly adopted option for editing code. Vite is the preferred build tool because it is simple to start with and works well for modern JavaScript apps. Chrome has the best browser dev tools overall, though Firefox has useful CSS inspection features and Safari lags behind. Vanilla CSS is powerful enough for many projects, so new developers should use it before adopting extra abstraction layers like Tailwind or CSS-in-JS. TypeScript is the preferred language layer for both frontend and backend JavaScript development, and JavaScript has the advantage of using one language across client and server. SvelteKit is the hosts’ favorite meta framework for its clarity and ease of reasoning, especially for beginners. If you are choosing a database for a typical web app, Postgres, MySQL, or SQLite are the safest and most broadly useful choices. For monitoring, Sentry is recommended as a practical must-have because it helps catch frontend and backend issues before and after deployment.

Data Points: Figma adoption: biggest one - The hosts describe Figma as the most popular design tool in the category. VS Code position: king in the space - Used to describe VS Code’s dominance among code editors. Terminal editor share (poll anecdote): about half - Scott says roughly half of respondents used the terminal built into VS Code. Express requests per second: 113,000 requests per second - Scott cites this benchmark while discussing Elysia vs Express. Elysia requests per second: 2.4 million requests per second - Scott uses this benchmark to justify preferring Elysia. Recent migration timeline: about three years ago - Wes says he switched from Sketch to Figma around three years prior. Figma use history: since 2015 - Wes says he has used Figma since about 2015. iPad 3 Retina resolution: 1536 by 2048 pixels - Scott mentions the resolution of the old iPad turned into a monitor. YouTube channel scale: almost 2 million subscribers - Scott notes GreatScott! is a large electronics channel. Podcast episode reference: episode 633 - Referenced for a prior episode on ORMs. Hosting episode reference: episode 615 - Referenced for a prior episode comparing hosting providers.

Pivotal Quotes: "If you're new to this stuff, VS Code is the default. Use VS Code." — Scott: Recommendation for code editors, emphasizing the safest default for beginners. "My world view at this moment is that CSS today is fantastic just writing CSS." — Wes: Argument for favoring vanilla CSS before adding abstractions. "I would pick Figma. Big fan of it." — Wes: Direct endorsement of Figma as the preferred design tool.

Implications: Listeners should prioritize understanding the web stack as modular parts and choose modern, low-friction defaults first. The episode suggests the ecosystem is converging toward simpler tools, but many choices remain fluid and likely to shift soon.