696: How to Build a Website or App

Episode Summary

Executive Summary: The episode breaks down a practical workflow for building websites and apps, emphasizing that the process should be shaped by your design comfort, team size, and project scope. Wes and Scott compare options for design, templating, data, CMSs, backend choices, testing, and hosting, repeatedly arguing for the simplest tool that fits the job rather than defaulting to heavy frameworks or infrastructure.

Main Topics: Choosing a design workflow: The hosts discuss starting with Figma, wireframes, or coding directly, depending on personal background and how comfortable someone is with visual design. Scott prefers quick prototyping in code; Wes often starts in Figma or by building a design system directly in code. Selecting the right front-end structure: They cover templating approaches ranging from plain HTML and server-side templates to frameworks like React, Svelte, Next.js, Remix, SvelteKit, and web components. The emphasis is on having a way to structure and reuse markup efficiently. Building components in context vs isolation: They contrast shipping components directly in the page where they live versus isolating them in tools like Storybook or custom component dump pages. Isolation is favored for large, long-lived, multi-person projects; in-context development is simpler for smaller sites. Real data, fake data, and schemas: The hosts strongly prefer using real data when available, but note that fake/generated data is useful for edge cases like long titles, short titles, and unusual names. They discuss AI tools and Faker-style generators as fast ways to create varied test data. CMS, database, and backend decisions: They explain that nontechnical content editing often requires a CMS, while databases should only be added if persistence is actually needed. SQLite, text files, and CMS adapters are presented as lightweight options before more complex systems. Choosing frameworks and testing strategy: The episode recommends choosing the technology stack based on your strongest area—front-end or back-end—and then using broad, browser-based end-to-end tests with Cypress or Playwright when possible, since they survive tech rewrites better than tightly scoped unit tests. Hosting, deployment, and right-sizing complexity: They discuss modern hosting platforms as bundles of CI/CD, scaling, caching, and CDN services, but stress that many projects only need simple HTML/CSS and can be hosted extremely minimally. The key is matching infrastructure to the actual project.

Key Arguments: Workflow is not linear; effective website building depends on personal background, team size, and the complexity of the product. If you are not strong in design, use pre-designed systems or tooling rather than forcing custom visual design. Component isolation is valuable for larger apps because it helps catch layout, theme, and size issues before they spread. Real or schema-based fake data should be used early so components are tested against realistic edge cases. A CMS is mainly necessary when nontechnical people need to update content without touching code. A database is optional for many projects; adding one should be a deliberate decision because it increases complexity. Choose the stack based on your strongest skill area: front-end people should start with a front-end framework, backend people with backend tooling. End-to-end tests are more resilient than implementation-specific unit tests when app architecture changes. Modern hosting providers often include more than deployment, bundling scaling, CDNs, and CI checks. Many websites do not need the complexity people associate with “web apps”; simple HTML/CSS is enough for a lot of use cases.

Data Points: Snowfall: A foot of snow - Scott describes sudden weather in his area, used as conversational context at the start of the episode. Existing episode reference: Syntax.fm/682 - The hosts reference a prior episode about design systems and mention short URLs for episodes. URL format: syntax.fm/682 - They discuss using short episode URLs and Spotify linking. Chip clip pack size: 20-pack - Wes recommends a 20-pack of metal chip clips for convenience. Chip clip price: $15 - Approximate price for the chip clips when purchased. Chip clip current price: $16 - Wes notes the price has risen slightly. Toilet seat price regular: $80 - Wes says the soft-close toilet seat he wanted was around this price when new. Toilet seat price used: $18 - Wes explains he found a used/returned toilet seat on Amazon for much less.

Pivotal Quotes: "You just need HTML and CSS, straight up." — Wes: He argues that many websites are overcomplicated and that simple sites can be built with minimal tooling. "Design by engineers is not cute." — Wes: He warns engineers not comfortable with design to rely on prebuilt design systems or templates instead of inventing visual design from scratch. "I like to go with real data as much as possible." — Wes: He explains that real data exposes layout and content edge cases better than idealized mock data.

Implications: Listeners should optimize for simplicity, skill fit, and real-world constraints instead of chasing the newest framework. The episode reinforces a pragmatic, right-sized approach to web development that scales from static sites to large apps.