DE{CODE}: Recent Episodes
Kellen Mace
Join the WP Engine Developer Relations team as they discuss all things related to headless WordPress and modern web development.
Kirk Schwenkler is a Solutions Architect for the Developer Platform at Cloudflare. Lots of our architecture at WP Engine uses Cloudflare in different ways, as I’m sure many other tech companies do as well, so we wanted to have Kirk on to unpack some of the interesting things that Cloudflare can do for you and your projects.
We dive into some of the following topics:
- Defining the role edge compute and CDNs play in web architecture
- The difference between Cloudflare workers and traditional origin servers
- The nuances of storing your data at the edge
- How the edge can work in conjunction with headless WordPress
Headless WordPress resources:
https://developers.wpengine.com
Daniel Roe is on the framework team for Nuxt, a Vue-based full-stack framework. Some of our most popular content is on Nuxt and headless WordPress. A new version of Nuxt, Nuxt 3, reached a stable release late in 2022. This new version comes packed with feature upgrades and Daniel has graciously agreed to join us to help us learn more about this new version of an awesome framework. In this podcast, we get into some of the following topics:
✔️ What's new in Nuxt 3 vs. Nuxt 2
✔️ Using the Composition API vs. Options API in Vue 3
✔️ Details about the Nuxt ecosystem
Nuxt 3:
https://nuxt.com/docs/getting-started/introduction
Daniel's Website & Twitter:
https://roe.dev/
https://twitter.com/danielcroe
Headless WordPress resources:
https://developers.wpengine.com
Jonny Harris is a London-based WordPress developer specializing in large-scale WordPress projects and runs the Spacedmonkey consultancy. Jonny has been developing websites for over 10 years. He is most known for his open-source work in WordPress core, where he’s worked on things like Gutenberg, multisite, and the REST API. His list of former clients and employers includes names like Time Inc. UK, Google, Unsplash, and Skyscanner. Over the last year or so, Jonny has worked with the performance team in WordPress core to make WordPress faster and more performant, so we’re here to pick his brain about the WordPress backend.
During this podcast, we touch on these topics:
- Jonny's innovative client work with organizations like Google, Skyscanner, and Unsplash
- Using WordPress with a low-footprint database layer like SQLite
- Scaling WordPress multisite databases with tools like LudicrousDB
- Blocks, Gutenberg, headless WordPress, and the wp-rest-blocks plugin
- Recent performance improvements to the REST API
Jonny's GitHub
https://github.com/spacedmonkey
Jonny's Website
https://www.spacedmonkey.com/
Jonny's Twitter
https://twitter.com/thespacedmonkey
In this episode, Fran and Jeff catch up with Jason Bahl, the creator of WPGraphQL to discuss a new caching extension for WPGraphQL. Jason is a figure in the headless WordPress ecosystem that likely needs no introduction, but the group discusses some of their early experiences with headless WordPress.
WPGraphQL Smart Cache makes a user's GraphQL queries more efficient by providing network and object caching layer options for users using the plugin. Jason explains a ton of interesting technical details about the caching implementations. He digs into the following things:
- Using GET/POST requests with network requests
- How cache invalidation works in this plugin in a nuanced way
- How Smart Cache can work with framework rendering patterns
- What other hosting companies can do to enable WPGraphQL Smart Cache on their platform
- How object caching works in the plugin if you can't integrate with a network hosting layer
- How a new feature called persisted queries allows you to store your queries on the server, like a SQL stored procedure
- Considerations for people using plugins or extensions to store custom data
Check out the plugin in WordPress plugin repository and leave the WPGraphQL team some feedback or a review: https://wordpress.org/plugins/wpgraphql-smart-cache/
Jason's Twitter
https://twitter.com/jasonbahl
Jason's GitHub
https://github.com/jasonbahl
WPGraphQL
https://github.com/wp-graphql/wp-graphql
WPGraphQL Smart Cache
https://github.com/wp-graphql/wp-graphql-smart-cache
WPGraphQL Smart Cache with Next.js and Apollo by Fran Agulto
https://developers.wpengine.com/blog/wpgraphql-smart-cache-with-next-js-and-apollo
In this podcast episode, Fran and Jeff talk with Rob Humar, the head of web development at Dexertos, the world's largest esports publishing platform. As a media company, Dexertos does around 60 million monthly page views. Rob walks us through some of the details of the Dexertos tech stack, which includes Next.js and headless WordPress using WPGraphQL.
Rob discusses how the primary driver of their switch to headless was new feature velocity and futureproofing their frontend stack. By sticking with WordPress as the CMS for their 80K posts, they were able to gain some of the benefits of a full rewrite without migrating CMSs. As we dig into the details, we talk about how Dexertos uses Next.js ISR WPGraphQL Smart Cache to handle some of the demands of breaking real-time news.
As an international publisher, Dexertos also has sites in French and Spanish, and Rob describes how they manage all of this using WordPress multisite for the CMS and using one Next.js codebase across all three different sites.
Rob walks us through what the experience for the content editor looks like on the Dexertos site, which limits some of the choices in the block editor and uses ACF to structure data for custom post types.
As of December 2022, Dexertos won esports coverage platform of the year, which is a testament to the work Rob and his team are doing on their platform.
In this episode, Fran and Jeff talk with Sam Bhagwat, the co-founder and Chief Strategy Officer at Gatsby Cloud, about the modular web and Sam’s new book. The group spends some time talking about Gatsby’s origins and how it serves the use cases of the content web.
During the conversation, Sam provides a good overview of the architectural patterns that underpin the modular web and we talk about some of the different ways people talk about these moving pieces: JAMstack, decoupled, headless, etc.
Sam has spent a lot of time working with organizations making the move towards modular, and he lays out a bunch of different classes of benefits as well as profiles of organizations making the switch.
The conversation shifts towards the struggle of businesses integrating 3rd party systems, and Sam gives us a sneak peek into Gatsby’s Valhalla solution. The service was launched publicly since the time of this recording.
When considering WordPress as a headless CMS, Sam shares his thoughts on how supporting the functionality of popular plugins is one of the opportunities we have in the ecosystem.
Sam’s Posts on Gatsby
Sam’s Twitter
Sam’s Book “Modular: The Web's New Architecture: (And How It's Changing Online Business)”
In this episode, Jeff and Fran chat with Salma Alam-Naylor, a Staff Developer Experience Engineer at Netlify, about the state of the JAMstack ecosystem. We kick off the discussion by exploring the values of learning in public with tech blogs and dig into Salma's background in music and teaching.
You can read Salma's evolving thoughts on frameworks for the web, and check out the WTF project itself. We touch on a lot of interesting topics about programming languages in general, current trends toward HTML-focused frameworks, and how the edge can support developers in a variety of use cases.
This is a wide-ranging conversation about some of the philosophies about the building blocks of the web. Salma is a prolific tech blogger, with tons of useful and thought-provoking posts. Please check out some her blog or catch a stream:
Salma's Website
Salma's Twitch Stream
In this episode, Fran and Jeff talk to Fred Schott, the co-creator of the Astro framework. Astro is a newer JavaScript framework that focuses on creating super fast content-focused sites. There is a ton of love in the JS community for Astro, and we dig into Astro's origin stories and some of Fred's background with build tools.
Astro aims to reduce complexity by offering a server-first, zero-JS by default experience for building sites. For WordPress developers who've done some work with PHP, Astro invokes a lot of that simplicity. Astro also doesn't ship a frontend framework by default, so you can use React, Vue, Svelte, or any other framework you want. We touch on some additional benefits of Astro as well:
- Islands architecture
- Client directives for selectively loading JS
- How Astro focuses on prioritizing content-focused sites
Fred shares with us some of the future goals of Astro and talks about how it fits into the community.
Astro Website
Astro Discord Server
In this episode, Fran and Jeff talk with Chris Wiegman, the Engineering Manager of the team working on WP Engine's Faust framework. During this quarter, the Faust framework has undergone a massive overhaul and Chris spends some time sharing details on those updates:
- Moving from GQty to Apollo for data fetching
- Implementing WP routing and template hierarchy
- Adding plugin functionality to Faust with hooks/actions
- Q4 actions towards Gutenberg support
If you're interested in the development of Faust, keep an eye on this space over the coming months.
After teasing the possibility of renaming Faust, the current name will stick for this release, but this episode was recorded while that decision was still in flux, so please excuse any artifacts of that conversation that didn't get edited out : )
Faust Website
Chris' Website
Apollo GraphQL Client
GQty
In this episode, Fran and Jeff catch up with Colby Fayock, a previous guest and a Senior Developer Experience Engineer at Cloudinary. This episode touches on how Cloudinary can help developers offload, optimize, and transform images using their APIs or use their WordPress plugin for a native integration with WP admin. The group discusses how they should approach learning new technologies and explores how people in developer relations play a role in helping developers process and filter changes. Colby also maintains a popular Next.js starter for headless WordPress, so the group discusses general thoughts about headless WordPress and its approachability.
Colby's Website
Colby's Twitter
Cloudinary
Cloudinary WordPress Integration
In this episode, Fran and Jeff catch up with Matt Landers, the former manager of WP Engine's Dev Rel team, and discuss his new role in developer relations at Google Analytics. We take a deep dive into some of the major differences between the current iteration of Google Analytics (UA) and the next evolution of the platform (GA4).
PSA: The current version of Google Analytics will be deprecated in mid-2023, so PLEASE run both tags for some period of time because the data models are very different.Matt walks us through some of the implications of using Google Analytics in a headless WP setup and shares some insights on how GA4 will handle certain aspects of privacy for our international developers. As someone who's been in the headless WordPress space for over a decade, we spend a ton of time picking Matt's brain about the origins of headless WordPress and the Atlas platform and discussing the future of WordPress as a headless CMS.
Matt's Twitter
Google Site Kit Plugin
In this episode, Fran and Jeff talk with Alexa Spalato, the co-founder of Gatsby WP Themes, a company focused on building out Gatsby themes made to work with headless WordPress. We learn how Alexa got involved in tech, discuss some of the details of the headless theme market, and get some updates about her future as a Developer Relations Engineer in the headless CMS space.
Alexa drops a ton of knowledge about how themes (of all kinds) can lower the barriers for other people, and why she decided to bet on Gatsby as a base for her own theme ventures. We hope you enjoy the episode!
Alexa's Website
Gatsby WP Themes
In this episode, Fran and Jeff talk with Lee Robinson, the VP of Developer Experience at Vercel. We take a look at some new or now stable features in Next.js, like middleware, the image component, and ISR. Both Vercel and WP Engine support a lot of open source projects as a part of their strategies, and we dig into why that's important and good for the web in general. Last we discuss many of Lee's ideas on how to build developer communities at both the global and local scale.
Lee's Twitter: https://twitter.com/leeerob
Lee's Website: https://leerob.io/
Blog Posts:
https://leerob.io/blog/dx
In this episode, we get things up and running for Season 3, with just a few changes. First, we've rebranded the podcast slightly by changing the name. Second, we have new co-hosts for the show. In this intro episode we dig into Fran and Jeff's backgrounds and talk about their developer origin stories. We're really excited about some the guest we have lined up for this season of the podcast, so stay tuned!
Fran's Website: https://www.frantheman.dev/
Jeff's Website: https://jeffreyeverhart.com/
We close out the year with Lee Robinson, the director of developer relations at Vercel. Lee talks about the current Next.js landscape within headless development, Rich Harris joining Vercel to work on SvelteKit, and whether Vercel will shift their frontends more towards SvelteKit.
Headless WordPress resources:
https://developers.wpengine.com
Links:
- https://leerob.io/blog/career
- https://leerob.io/blog/hypergrowth
- https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte
Alex Moon stops by to hype Gatsby 4. How did Gatsby 4 an up to 10x rendering speed? How is Gatsby future-proofing against React? They also talk about how well Gatsby plays with Faust.js.
Links:
- What's new in Gatsby 4
- Rendering patterns podcast episode
Want more headless content? Go to https://developers.wpengine.com/
Kellen and Grace bring in WPEngine's new Developer Relator Brian Gardner, Founder of StudioPress, Co-creator Genesis, to talk about building development communities.
Links:
- briangardner.com
- Twitter @bgardner
The De{Code} podcast welcomes our new host, Grace Erixon. Kellen and Grace talk about Grace's development history.
The DevRel team invites JSON Bahl back onto the pod to discuss Gutenberg. Jason talks about the benefits of Gutenberg, what's lacking in Gutenberg's current implementation, and what implementations exist for rendering Gutenberg in headless WordPress.
Links:
- Gutenberg and Decoupled Applications
Solutions Architect Alex Moon stops by the De{Code} pod to talk rendering in front-end development.
Links:
- The When and Where of Rendering
- React's server components
- Netlify's Distributed Persistent Rendering (DPR)
Will and Kellen give their predictions and dreams for Next.js conference 2021. What will happen on the 5th anniversary of Next.js? Increased support for Core Web Vitals? Support for Deno? What about running the Next.js API at build time?
The Atlas Content Modeler teams hop on the pod to discuss the new open-source tool.
Links:
- Github: https://github.com/wpengine/atlas-content-modeler
- https://developers.wpengine.com/blog/what-is-atlas-content-modeler
Kellen and Will welcome Phil Crum from the Web Agency 10up.
They discuss whether 10up plans to go all-in on headless WordPress over traditional, how the discovery phase with a client determines whether headless is right for them, and using Gutenberg in a headless architecture.
Links:
- Phil Crumm website: https://philcrumm.com/
Have you ever heard of Core Web Vitals? Kellen and Will teach you all the basics, including how to get a good Core Web Vital score, Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. They also break down how to measure your website against Core Web Vital principles and what tools could help you out.
After you listen, don't forget to attend the Demolish Core Web Vitals event on October 21: https://events.wpengine.com/event/a1935572-690d-425a-905e-a54cfb071669/websitePage:5bbe0ca6-fd0c-4e77-b99b-de21baff9062
Links:
- Core Web Vitals info: https://web.dev/vitals
- Measurement tools:
- PageSpeed Insights audits
- Google Search Console’s Core Web Vitals report
- Web-vitals JavaScript Library
- Web Vitals Chrome Extension
- Lightweight-embedded videos: https://github.com/paulirish/lite-youtube-embed
- Shipping polyfills: https://polyfill.io/v3/
- Tweak content-visibility: https://css-tricks.com/more-on-content-visibility/
Kellen and Will give a crash course in styling for the web. They go over traditional CSS, SASS, and CSS -in-JS. They also discuss how front-end frameworks account for styling and where UI libraries such as Charka and Material fit into the modern web.
Kellen interviews Greg Rickaby, Director of Engineering at WebDevStudios. Greg explains why WebDevStudios embraced headless development (1:30), how an open-source contribution to Next.JS lead to the creation of WebDevStudios' Next.JS starter kit (9:30), and how WebDevStudios' might utilize Atlas and other technologies in the future (1:13:12).
Links:
- Greg’s Twitter: https://twitter.com/GregRickaby
- Blog post: Building the Next.js 9.4 WordPress Example
https://webdevstudios.com/2020/06/02/building-the-nextjs-9-4-wordpress-example/ - Blog post: Using Next.js, WebDevStudios Built a 1,000 Page Headless WordPress Website https://webdevstudios.com/2021/03/09/next-js-headless-wordpress/
- Next.js WordPress Example: https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress
- WDS Next.js WordPress Starter: https://github.com/WebDevStudios/nextjs-wordpress-starter
Kellen and Will welcome Jacob Arriola from Zeek to discuss Headless WooCommerce. Jacob tells us why WooCommerce over other e-commerce solutions such as Shopify (4.18), how WPGraphQL and WooGraphQL can be used together (19.10), and the experience of building an e-commerce site the headless way and what tradeoffs had to be made to accommodate WooCommerce (39.26).
Links:
- Jacob's Twitter: https://twitter.com/JacobArriola
- Headless WooCommerce site Jacob built: https://rudis.com/
- Jacob's Blog: https://jacobarriola.com/
- Another WooCommerce podcast: https://dothewoo.io/headless-woocommerce-with-jacob-arriola/
The team announces the new open-source WP Engine Headless WordPress framework, Faust.js ™.
Upcoming Event:
Learn how to set up, build, and deploy your headless WordPress site with Faust.js and Atlas - https://events.wpengine.com/event/092db3a9-7e28-41d2-ad7e-cbb16e653eb2/websitePage:5bbe0ca6-fd0c-4e77-b99b-de21baff9062
Resources:
- Faust.js site: https://faustjs.org/
- Faust.js docs: https://developers.wpengine.com/docs/faustjs/next/getting-started
- Faust.js Git Repo: https://github.com/wpengine/faustjs
We invite Cassidy, Ben, and Tara from the Netlify DevRel team to talk about using the Jamstack architecture with Headless WordPress.
Cassidy mentions a few examples she's seen of React + Headless WordPress sites. Tara shows off a site that uses "Jamgular" (Jamstack with Angular). Ben breaks down how developers are using Vue in conjunction with headless WordPress.
Finally, we talk about Netlify Edge Handlers, producing content on Astro, and up-and-coming tech that excites the Netlify team.
- Cassidy Williams: https://cassidoo.co/
- Ben Hong: https://www.bencodezen.io
- Tara Z. Manicsic: https://github.com/tzmanics
Websites mentioned:
- https://www.harukimurakami.com/library - Website built from Angular and WordPress
- https://github.com/jamstack/jamstack.org/discussions/549 - Distributed Persistent Rendering (DPR)
- https://docs.netlify.com/configure-builds/on-demand-builders/ - On Demand Builders
- https://www.guggenheim.org/
- https://www.netlify.com/blog/
Did you know you can have custom content types in WordPress? Will and Kellen breakdown what content types WordPress gives you out of the box (1.01), how you can extend the types of content in WordPress(21.50), and the Atlas tool that could make creating custom content easier(54.30).
Links from this episode:
- WordPress database: https://deliciousbrains.com/tour-wordpress-database/
- Metadata: https://tomjn.blog/2016/12/05/post-meta-abuse/
- Post CRUD: https://www.youtube.com/watch?v=o-MQSKErREI
To kick off the new season of the De{Code} podcast, Will and Kellen have an epic conversation about authentication in headless WordPress. They give an overview of all the authentication strategies that exist in WordPress (6.40), a breakdown of how to leverage WordPress's cookie-based authentication (37.18), where in the stack auth occurs (52.11) and the difference between authentication and authorization.
To cap it all off, Kellen gives a detailed breakdown of his authentication tutorial (1.12.01).
- Kellen's Blog: https://developers.wpengine.com/blog/headless-wordpress-authentication-native-cookies
- Auth video tutorial: https://www.youtube.com/watch?v=eeWxvCZHxLs
As the DevRel team says goodbye to the esteemed Matt Landers, Matt and Will introduce the De{Code} community to Atlas. They explain what Atlas is, Node Engine, custom content types, and the future Atlas framework.
Atlas: wpengine.com/atlas
Drew Baker, technical director of Webby award-nominated web agency Funkhaus joins the podcast to talk headless. He talks about Funkhaus's experience deploying headless WordPress for clients with everything from WP GraphQL and Nuxt, how Drew's clients enjoy their fancy decoupled sites, and what might make headless more enticing to clients.
Drew's GitHub: https://github.com/drewbaker
Funkhaus: https://funkhaus.us/
Webby-nominated site: politicalplaylist.com
We pit WPGraphQL and REST API against each other. Which has better performance? How easy are caching and file uploads? Which one works best with headless WordPress?
The DevRel teams welcomes Colby Fayock, a developer advocate from Applitools. Colby breaks down his Next WordPress Starter kit, discusses the benefits and drawbacks of headless, and talks about upcoming tech he's excited about.
Colby's Starter: https://github.com/colbyfayock/next-wordpress-starter
Colby's YouTube: https://www.youtube.com/colbyfayock
Colby's Blog: https://spacejelly.dev/
Matt, Will, and Kellen give a quick overview of state management. They answer what "state" and "stateless" are, why you need states, and compare state management solutions.
Last year, the Babel Core team published a blog with the title, "Babel is used by millions, so why are we running out of money?" The De{Code} hosts use Babel as a starting point to discuss the challenges and benefits of open-source development, how such ventures can remain funded, Matt and Will's Platypi experience, and open-source maintainer burnout.
At Jamstack Conf 2020, a fireside chat between WordPress founder Matt Mullenweg and Netlify CEO Matt Biilmann turned into a heated debate about WordPress and Jamstack. Matt Landers, Will Johnston, and Kellen Mace attempt to break down each of the other Matts' arguments, leading a discussion about when to use traditional WordPress over headless and where the rise of Jamstack fits into the larger WordPress development ecosystem.
It's the first battle of the frameworks, as up and comer Next.js goes head-to-head with Gatsby. Matt, Will, and Kellen compare each framework's rendering options, plugin ecosystems, routing, and hosting options. Who will win this epic match-up?
Today, the DevRel team welcomes their newest member, WordPress developer Kellen Mace. Matt, Will, and Kellen give a breakdown of their careers, share how they started in coding, and impart some wisdom they've learned through it all.
Matt and Will welcome their second guest to the podcast, Hillary Whitworth. They talk about how she started in front-end development, the importance of mentors, and the common pitfalls of utilities.
Shout-outs:
Hillary's Twitter
Jack Herrington
Kent C Dodds
The world of JavaScript seems is so vast that it can seem impenetrable. Luckily, Matt and Will are here to give a tour of the JavaScript ecosystem, as well as some recommendations for where to start when building a new site with the language.
Shout-outs:
Node.js
webpack
Matt and Will spare no expense when speaking of their love of TypeScript. They discuss how TypeScript came to be, what problems it solves, and Will gives an epic breakdown of advanced types.
Shout-outs:
Anders
Visual Studio Code
TypeScript documentation
Basarat
Matt and Will discuss the background and philosophies of API-First development, the shift away from REST, React components, and APIs, and how headless development allows for an API-First model.
Shout-outs:
Headless tutorials and content
Join Matt Landers and Will Johnston for a comprehensive of the current state of React development, including the history React, how to React has been adopted in the wider development landscape, and some quick tips and tricks about how to get started.
Shout-outs:
Dan Abramov
Server Components Demo
Jason "JSON" Bahl joins the DevRel team to talk WPGraphQL, its beginnings, and where it might go in the future.