The DE{CODE} Podcast

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/

Will Johnston announces the new open-source WP Engine Headless WordPress framework, Faust.js ™ . 

• 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.