757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

Episode Summary

Executive Summary: This Syntax potluck covers practical frontend and web-dev guidance: when to use light vs shadow DOM in web components, how to extract data from HTML without regex, whether Gatsby still has a future, scrolljacking and modern scroll-animation tools, self-hosting vs VPSs amid rising hosting costs, local-first offline sync patterns, and building AI search over audio transcripts. The episode also includes side discussions on podcast production issues and personal sick pics.

Main Topics: Light DOM vs Shadow DOM in Web Components: The hosts explain the trade-offs between using the regular DOM and isolated Shadow DOM, recommending light DOM for app-owned UI with global styles and Shadow DOM for reusable, externally consumed components or tighter encapsulation. HTML/Data Extraction and Scraping: They discuss how to extract content from markup using DOM APIs in-browser or server-side DOM libraries like Linkedom, with XPath as a fallback when selecting by text content is needed. The Future of Gatsby: Wes and Scott give a skeptical outlook on Gatsby in 2024, citing ecosystem churn, long build times, and reduced momentum, while acknowledging its lasting contribution: a normalized GraphQL data layer. Scrolljacking and Scroll-Driven UI Effects: They critique wheel-event-driven UI effects as often frustrating and accessibility-limiting, recommending libraries/frameworks instead of hand-rolling and pointing to the emerging scroll-driven animations API as the long-term fix. Agency Tooling and Reusable UI Systems: Advice for agencies emphasizes building reusable, skinnable component systems and investing in tooling to speed up repeated project work; web components and open-source internal tools are highlighted as strong approaches. Self-Hosting, VPSes, and Rising Cloud Costs: The hosts recommend cheap VPSs over exposing a home PC to the internet, explaining tunnels like Cloudflare Tunnel/NGROK as alternatives and framing the discussion in terms of VC-funded price inflation in hosting. Local-First and AI Over Audio Transcripts: They explain offline-first syncing with IndexedDB and outline an audio-to-text-to-RAG workflow using Whisper/Deepgram, summarization, and retrieval-augmented QA over meeting or podcast recordings.

Key Arguments: Shadow DOM is best when you need encapsulation and component portability; light DOM is better when you want global CSS and your app controls the UI. For scraping/markup extraction, browser DOM APIs or server-side DOM implementations are preferable to regex because HTML is structured data. Gatsby’s best legacy contribution is not static site generation, but its unified GraphQL data layer; however, the project itself appears to be in maintenance mode. Scrolljacking can produce polished demos, but it often harms usability and is unreliable across devices; if used, rely on established libraries like GSAP or Framer Motion. Agencies should build reusable component/tooling systems that can be shared across clients to reduce repetitive work and improve speed. For personal hosting, a VPS is generally safer and cheaper than exposing a home machine directly; tunnels are useful when you truly need to host from home. Local-first development is valid but complex; IndexedDB syncing is a starting point, but successful implementations require deeper tooling and architecture. Audio files can be made searchable by transcribing them, optionally diarizing speakers, then passing transcripts into a summarization or RAG workflow.

Data Points: Gatsby site build time: 20 minutes - Wes says his personal Gatsby site now takes about 20 minutes to build due to size growth. Gatsby commits to main/master since January: 7 commits - The hosts cite low recent repository activity as evidence of maintenance-mode behavior. Self-hosted VPS price: $10-$20/month - Suggested general monthly cost range for hosting multiple apps on a VPS. DigitalOcean small VPS price: $4/month - Mentioned as an example of a low-cost VPS option. CJ self-hosting VPS price point: $2.99/month - Referenced from CJ’s self-hosting video as an even cheaper VPS option. Upload speed: 50 megabits upload - Wes compares his available bandwidth while troubleshooting recording issues. Current upload in use: 2 megabits upload - Wes notes the recording issue is not due to maxing out bandwidth. Podcast episode references: Episode 751 and 739 - They point listeners to prior episodes on UI tooling and local-first development. Podcasting question scope: 1+ hour recordings - The audio-search question references long brainstorming sessions with more than an hour of content. One-day event at GSAP: Scroll smoother / smooth scrolling - They mention GSAP’s ScrollSmoother as a library that leverages native scrolling.

Pivotal Quotes: "I like the idea of a template and a slot. That's part of web components, but I also like access to my styles globally." — Anon / discussed by Wes: The opening question about when to use light DOM versus Shadow DOM. "Don't do it. It's dumb." — Scott: A blunt verdict on scrolljacking-style wheel-event UI effects when they get in the way of usability. "I think that's going to be a much better approach to this type of thing." — Wes: Wes explaining why he is moving his Gatsby site toward React Server Components.

Implications: Developers should favor reusable, standards-based tooling: web components for portability, DOM APIs for scraping, VPS/self-hosting for cost control, and established animation/local-first libraries rather than ad hoc hacks. Gatsby remains useful for existing sites, but momentum is shifting to newer architectures and data workflows.