Original: https://codingcat.dev/podcast/1-5-mdx-with-chris-biscardi
▶ Watch on YouTube & Subscribe to CodingCat.dev
**MDX with Chris Biscard **is a CodingCat.dev podcast episode featuring Chris Biscardi alongside Alex Patterson and Brittney Postma focused on Firebase, Next.js, Sanity. MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. We talk about MDX and the technology surrounding MDX with Chris Biscardi. 1.5 - MDX with Chris Biscardi: https://codingcat.dev/podcast/1-5-mdx-with-chris-biscardi 0:00 - Intro
1:25 - What is MDX
2:15 - How MDX came to be
3:40 - Why MDX over Markdown (md)
5:00 - Writing MDX (mind shift)
6:25 - Markdown history and portability
9:20 - Portable text vs. Markdown
12:00 - MDX Provider
16:27 - MDXjs.com
18:0 Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.
What is MDX?
Markdown for the component era
MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.
Questions
- Why would you use regular markdown?
- What makes MDX so powerful?
- If you have HTML tags in md do they need to be converted to JSX?
- How do you get compilation at Build Time, if a component is used?
- How does MDX perform at scale?
- Digital Garden’s with MDX, what framework would you recommend to get started with one right now?
- So, you’ve created a new ESM first framework built on Preact called Toast. Is MDX built into it out of the box? https://www.toast.dev/
Technical Overview: MDX with Chris Biscard
1.5 - MDX with Chris Biscardi: https://codingcat.dev/podcast/1-5-mdx-with-chris-biscardi 0:00 - Intro
1:25 - What is MDX
2:15 - How MDX came to be
3:40 - Why MDX over Markdown (md)
5:00 - Writing MDX (mind shift)
6:25 - Markdown history and portability
9:20 - Portable text vs. Markdown
12:00 - MDX Provider
16:27 - MDXjs.com
18:0
When applying the concepts from MDX with Chris Biscard in a production codebase, teams working with Firebase, Next.js, Sanity, Serverless should align their implementation with the Firebase Documentation (Firestore, Data Connect, Authentication, App Check, and Cloud Functions). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.
Key Engineering Takeaways
- **Core Topic Focus: **Practical strategies for Firebase, Next.js, Sanity, Serverless covered in "MDX with Chris Biscard" (MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. We talk about MDX and the technology surrounding MDX with Chris Biscardi.).
- **Production Implementation: **Combine the architectural patterns demonstrated in this podcast with the official Firebase Documentation for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: **Follow along with the live coding demos and discussion on YouTube (MDX with Chris Biscard) and subscribe to CodingCat.dev on YouTube for weekly deep dives.
Video Chapters & Timestamps
Jump directly to any segment of MDX with Chris Biscard on YouTube using the timestamped chapters below:
- 00:00: Intro
- 00:00: What is MDX
- 00:00: How MDX came to be
- 00:00: Why MDX over Markdown (md)
- 00:00: Writing MDX (mind shift)
- 00:00: Markdown history and portability
- 00:00: Portable text vs. Markdown
- 00:00: MDX Provider
- 00:00: MDXjs.com
- 00:00: CodingCat.dev MDX backend
- 00:00: Hashicorp MDX renderToString
- 00:00: Hasicorp MDX hydrate
- 00:00: StreamYard Shout out
- 00:00: MDX at scale
- 00:00: MDX 2.0
- 00:00: MDX for digital gardens
- 00:00: Toast ES Modules based Jamstack framework
- 00:00: ES Module Chat
- 00:00: MDX 2.0 update and CMS
- 00:00: Purrfect Picks
Resources, Links & Official Documentation
- *Watch on YouTube: *MDX with Chris Biscard Full Video (plus Subscribe to CodingCat.dev)
- *Show Pick: *Circle - The all-in-one community platform for creators & brands (picked by Alex Patterson)
- *Show Pick: *Spline a place to design and collaborate in 3D (picked by Alex Patterson)
- *Show Pick: *2021 NG-Conf (picked by Alex Patterson)
- *Show Pick: *Build a Toast Site with MDX and Tailwind, Learn with Jason (picked by Brittney Postma)
- *Show Pick: *Party Corgi Network (picked by Brittney Postma)
- *Show Pick: *swc (picked by Chris Biscardi)
- *Show Pick: *Salsa - a generic framework for on-deman, incrementalized computation (picked by Chris Biscardi)
- *Show Pick: *Bevy - A refreshingly simple data-driven game engine built in Rust Free and Open Source Forever! (picked by Chris Biscardi)
- Chris Biscardi Guest Profile & Episodes on CodingCat.dev
- Chris Biscardi on GitHub
- Firebase Documentation: Firestore, Data Connect, Authentication, App Check, and Cloud Functions
- Next.js Official Documentation: App Router, Server Actions, and rendering architecture guides
- Sanity.io Content Operating System Docs: GROQ queries, Portable Text, Content Lake, and Agent Context
Related CodingCat.dev Tutorials & Podcast Episodes
- Unlocking the Jamstack with Auth0: James Q Quick is an expert on all things Jamstack and authentication, we were able to sit down and chat about Auth0 and his past experiences.
- Next.js 10: Talking with Guillermo Rauch about Next.js 10 and Vercel. Including plans for 2021.
- Sanity.io: Talking with Knut about Sanity.io and how it fits into your Jamstack requirements.
Frequently Asked Questions (FAQ)
What are the main takeaways from MDX with Chris Biscard?
MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. We talk about MDX and the technology surrounding MDX with Chris Biscardi. 1.5 - MDX with Chris Biscardi: https://codingcat.dev/podcast/1-5-mdx-with-chris-biscardi 0:00 - Intro
1:25 - What is MDX
2:15 - How MDX came to be
3:40 - Why MDX over Markdown (md)
5:00 - Writing MDX (mind shift)
6:25 - Markdown history and portability
9:20 - Portable text vs. Markdown
12:00 - MDX Provider
16:27 - MDXjs.com
18:0 Throughout this podcast, Chris Biscardi breaks down real-world implementation details for Firebase, Next.js, Sanity so developers can apply these patterns directly in production.
How do you implement Firebase best practices in production?
When adopting Firebase and Next.js in a production stack, start by validating your configuration against the Firebase Documentation (Firestore, Data Connect, Authentication, App Check, and Cloud Functions). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
Where can I watch the full MDX with Chris Biscard walkthrough and find related code resources?
You can watch the complete video session for MDX with Chris Biscard on the CodingCat.dev YouTube channel. For a deeper dive into Firebase, check out our related guide: Unlocking the Jamstack with Auth0.
Top comments (0)