Payload CMS

Original: https://codingcat.dev/podcast/1-17-payload-cms

▶ Watch on YouTube & Subscribe to CodingCat.dev

**Payload CMS **is a CodingCat.dev podcast episode featuring Dan Ribbens alongside Alex Patterson focused on JavaScript, CSS, PHP. We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS. 1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro

01:18 - Dan working on Payload CMS

02:20 - Payload CMS JavaScript Stack

02:40 - Wordpress Comparison of Stack

04:45 - Pricing discussion

06:52 - Payload CMS Product Demo

08:50 - Data structure within Payload CMS

10:00 - Showing off the Cod Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Payload is a Headless CMS correct?
2. How does this differ from WordPress?
3. Would you compare Payload CMS to Contentful, or something more like Sanity.io where you are standing up your own environment?
4. Is Paylod CMS Open Source?
5. What are the JavaScript Technologies used?
   • Node
   • Express
   • React
6. Where would you host Payload?
   • Azure
   • Firebase
   • AWS
   • Netlify
   • Vercel
7. Does a customer working with Paylod CMS focus on content first?
   1. Before something like design?
   2. Before development?
8. How does Paylod CMS fit into Jamstack?
   1. Can you build both static and dynamic?

Technical Overview: Payload CMS

1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro

01:18 - Dan working on Payload CMS

02:20 - Payload CMS JavaScript Stack

02:40 - Wordpress Comparison of Stack

04:45 - Pricing discussion

06:52 - Payload CMS Product Demo

08:50 - Data structure within Payload CMS

10:00 - Showing off the Cod

When applying the concepts from Payload CMS in a production codebase, teams working with JavaScript, CSS, PHP, Serverless should align their implementation with the MDN JavaScript Reference (ECMAScript specifications, Web APIs, and runtime fundamentals). 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 JavaScript, CSS, PHP, Serverless covered in "Payload CMS" (We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS.).
• **Production Implementation: **Combine the architectural patterns demonstrated in this podcast with the official MDN JavaScript Reference for type safety, performance, and long-term maintainability.
• **Hands-On Video Walkthrough: **Follow along with the live coding demos and discussion on YouTube (Payload CMS) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Video Chapters & Timestamps

Jump directly to any segment of Payload CMS on YouTube using the timestamped chapters below:

• 00:00: Intro
• 00:00: Dan working on Payload CMS
• 00:00: Payload CMS JavaScript Stack
• 00:00: Wordpress Comparison of Stack
• 00:00: Pricing discussion
• 00:00: Payload CMS Product Demo
• 00:00: Data structure within Payload CMS
• 00:00: Showing off the Code
• 00:00: Admin UI create collection
• 00:00: How Webpack works for Payload CMS
• 00:00: Graphql Playground
• 00:00: Become SASS product?
• 00:00: Where to host Payload CMS
• 00:00: Is Payload better for Marketers or Developers?
• 00:00: What is the local API
• 00:00: Where does Payload CMS fit in Jamstack
• 00:00: Payload CMS Scaling
• 00:00: Binary Storage and Image Resizing
• 00:00: Access Control List Workflow
• 00:00: Purrfect Picks

Resources, Links & Official Documentation

• *Watch on YouTube: *Payload CMS Full Video (plus Subscribe to CodingCat.dev)
• *Show Pick: *Derby Festival Marathon (picked by Alex Patterson)
• *Show Pick: *Therabody (picked by Alex Patterson)
• *Show Pick: *IndieHackers podcast (picked by Dan Ribbens)
• *Show Pick: *Hilda on Netflix (picked by Dan Ribbens)
• Dan Ribbens Guest Profile & Episodes on CodingCat.dev
• Dan Ribbens on GitHub
• Dan Ribbens Official Website
• MDN JavaScript Reference: ECMAScript specifications, Web APIs, and runtime fundamentals
• MDN CSS Reference: Modern layout, Grid, Flexbox, animations, and cascade layers
• PHP Official Manual: Zend Engine runtime, security hardening, and language reference

Related CodingCat.dev Tutorials & Podcast Episodes

• Content Modeling in a Headless CMS vs. Traditional Web CMS: Learn how to model content for Headless CMS
• Let's Learn Svelte: Embrace the hype. Give Svelte and SvelteKit a try! Learn how to build modern web applications with SvelteKit, a quickly growing framework for generating static ...
• Teaching Others to Code Lessons Learned: In this episode we sit down with Prince Wilson and talk about his experience teaching at an in person bootcamp.

Frequently Asked Questions (FAQ)

What are the main takeaways from Payload CMS?

We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS. 1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro

01:18 - Dan working on Payload CMS

02:20 - Payload CMS JavaScript Stack

02:40 - Wordpress Comparison of Stack

04:45 - Pricing discussion

06:52 - Payload CMS Product Demo

08:50 - Data structure within Payload CMS

10:00 - Showing off the Cod Throughout this podcast, Dan Ribbens breaks down real-world implementation details for JavaScript, CSS, PHP so developers can apply these patterns directly in production.

How do you implement JavaScript best practices in production?

When adopting JavaScript and CSS in a production stack, start by validating your configuration against the MDN JavaScript Reference (ECMAScript specifications, Web APIs, and runtime fundamentals). 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 Payload CMS walkthrough and find related code resources?

You can watch the complete video session for Payload CMS on the CodingCat.dev YouTube channel. For a deeper dive into JavaScript, check out our related guide: Content Modeling in a Headless CMS vs. Traditional Web CMS.