DOCSEARCHbyAlgolia
Submit Docs

kentcdodds.com Documentation

repository·main·Indexed 25 days ago

https://github.com/kentcdodds/kentcdodds.com

Source code and configuration for kentcdodds.com, a personal website built with React Router v7, Cloudflare Workers, and Vite. Includes documentation for semantic search infrastructure using Cloudflare Vectorize and R2, search-worker and site-worker runtime configurations, and the call-kent-audio-worker service.

Tokens
196.1K
Snippets
412
Records
755
Agent score
82%

What's inside kentcdodds.com

  1. Overview of Downshift for React

    main

    Downshift is a minimal, flexible library for building autocomplete and item selection experiences in React. Unlike monolithic components that provide pre-styled UI, Downshift provides the logic and state management required for complex selection patterns (like country selectors or recipient selectors) while allowing developers to build their own custom UI on top of it.

    Key characteristics:

    • Minimal by design: It provides the core logic but requires more manual setup for UI compared to 'out-of-the-box' solutions.
    • Flexible: Designed to cover various use cases with a single implementation.
    • API Patterns: Utilizes patterns like prop getters to allow developers to spread logic onto their own custom components.

  3. Review Kent C. Dodds' tech stack and services

    main

    This page provides a comprehensive list of the software, hardware, and services used by Kent C. Dodds for development, hosting, and content creation. It includes details on:

    • Services: Hosting (Fly.io), Analytics (Fathom), Image hosting (Cloudinary), and more.
    • Tech Stack: Frontend (React, Remix/React Router v7), ORM (Prisma), Validation (Zod), Testing (Testing Library, Vitest, Playwright, MSW), and Styling (TailwindCSS, Radix UI).
    • Development Environment: Editor (Cursor), Themes (Night Owl), and Fonts (Dank Mono).
    • Browser Extensions: 1Password, OctoLinker, Password Alert, React Developer Tools, and Refined GitHub.
    • Desktop & CLI Tools: macOS automation via dotfiles, Homebrew, and various CLI utilities like ripgrep, bat, and delta.

  5. Summary of tips to avoid React Hooks pitfalls

    main

    To successfully adopt React Hooks and avoid common mistakes, follow these five principles:

    1. Read the docs and the FAQ: Understand the fundamental rules and mental models.
    2. Use the ESLint plugin: Install and follow the rules provided by the official React Hooks ESLint plugin to catch errors early.
    3. Synchronize side effects to state: Instead of thinking in terms of lifecycles (like componentDidMount), think about how side effects should synchronize with the current state.
    4. Avoid premature performance optimization: React is fast by default; investigate performance issues before applying complex optimizations.
    5. Avoid testing implementation details: Test what the user interacts with (the DOM) rather than internal component state or methods.

  6. Summary of React Server Components (RSC) Discussion

    main

    This document provides a summary of a live stream discussion between Kent C. Dodds, Dan Abramov, and Joe Savona regarding React Server Components (RSC).

    Key Takeaways:

    • Core Purpose: RSC allows components to run on the server and send results to the client, enabling any number of components to be used regardless of page size. It expands the React model by allowing components to fetch their own data, promoting co-location of data dependencies.
    • Architecture Benefits: Automatic bundle splitting (unused components aren't sent to the client), reduced client-side component count, and the ability to write code in a request-response model.
    • Performance Strategies: To avoid waterfalls, place SSR on the edge and keep server components close to the data layer. Use the data loader pattern or caching to solve the N+1 problem.
    • Mental Model: Think of Server Components as a 'skeleton' that is fleshed out with client-side interactivity. Aim to let server components go as deep into the component tree as possible, using client components as 'slots' for interactivity.
    • Implementation Reference: For a concrete implementation, the speakers recommend exploring the Next.js 13 App Router.

    Full Video: Watch on YouTube

  7. Technology stack overview for kentcdodds.com

    main

    The kentcdodds.com website is a full-stack Remix application built with a focus on maintainability, performance, and complex state management. The core stack includes:

    • Framework & UI: React, Remix, Tailwind CSS, Reach UI, and Framer Motion.
    • Logic & State: TypeScript and XState (for complex component state machines).
    • Data & Backend: Prisma ORM, Express, and PostgreSQL (though the site has migrated to distributed SQLite with LiteFS).
    • Content Pipeline: mdx-bundler for compiling MDX content and Unified for Markdown/HTML processing.
    • Testing: Cypress (E2E), Jest (Unit/Component), Testing Library, and MSW (HTTP mocking).
    • Infrastructure & Services: Fly.io (hosting), GitHub Actions (CI), Cloudinary (images), Sentry (error reporting), and Fathom (analytics).

  8. View Kent C. Dodds' podcast appearances

    main

    This page lists various podcasts where Kent C. Dodds has appeared, categorized into his own productions and guest appearances on other shows.

    My own podcasts:

    Other podcast appearances:

    Kent has been a guest on numerous industry podcasts covering topics such as React, Remix, testing, career growth, and AI. Notable appearances include:

  9. Identify Call Kent stitch assets

    main

    The call-kent-audio-worker service uses specific audio assets for stitching, which are baked into the worker sandbox image. These assets include:

    • intro.mp3
    • interstitial.mp3
    • outro.mp3

    Note that while these are the production assets, the sandbox CLI tests generate their own temporary fixture assets at runtime to ensure shell-based integration tests remain independent of these production files.

  10. Understand KCD Teams and Community Engagement

    main

    KCD Teams (Red, Yellow, or Blue) are a community engagement feature on kentcdodds.com. When you create an account, you choose a team.

    Key features include:

    • Discord Integration: Connecting your KCD account to Discord sets your username to your team color and grants access to exclusive team channels.
    • Team Points: Reading blog posts earns points for your team.
    • Merchandise: Team-specific t-shirts are available for purchase.

    To participate, you must create an account.

  11. Privacy and Data Collection on kentcdodds.com

    main

    The site collects and stores the following user data:

    • Personal Information: First names and email addresses (stored in a private database and Kit).
    • Reading History: Blog posts read by the user (used for recommendations).
    • Discord Integration: If a Discord account is connected to a KCD account, the Discord ID is stored (no access tokens are stored).
    • Gamification: Reading certain posts may trigger Discord notifications/mentions for teams. Users can opt-out of being mentioned by contacting Kent via the /contact page.
    • Analytics: Publicly viewable analytics are provided via Fathom.
    • Performance Monitoring: Sentry is used for metrics. Sentry requests do not contain user information.

    Note: This privacy policy applies only to kentcdodds.com. The site owner does not have access to user accounts on course platforms like EpicReact.dev or TestingJavaScript.com. User information is never sold.