viewSource Aurooba Ahmed, Brian Coords

Aurooba and Brian dig deeper into the WordPress Interactivity API. This episode mostly focuses on the HTML directives they used in their custom blocks, how they work with block markup, and how the Interactivity API uses them to hydrate data. Along the way they also compare it to other templating and logic tools like the ones in Laravel and Next.js from previous episodes.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api?discussions_q=is%3Aopen+category%3A%22Interactivity+API%22https://twitter.com/SethRubensteinhttps://twitter.com/DevelopWoohttps://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-referenceBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com
(00:00) - S03E14 Sequence
(00:09) - Introduction
(01:21) - Packages vs Feature Plugins
(04:24) - Browsing the Documentation
(08:24) - Preview of our frontend block
(09:53) - HTML Directives
(13:12) - Conventions for binding and events handlers
(16:31) - Callbacks and Actions
(18:37) - State, Context and Loops
(20:04) - Using Attributes and Hydration
(24:01) - Wrapping up and Next Steps

So begins another project! This time back inside WordPress. Brian and Aurooba discuss the Interactivity API in WordPress. They explore how to use the API, the challenges they faced, and the benefits it provides. They also touch on JavaScript modules and how they are used in the context of the Interactivity API. The conversation ends with a discussion about future topics to cover in the series as they build out the plugin using the API.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
Quick Start Guide - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/#quick-start-guideInteractivity API Proposal - https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/WP Movies - https://wpmovies.dev/Our demo repo - https://github.com/viewSourcePodcast/vs-reading-listBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com
(00:00) - Introduction
(01:12) - Introducing the next project!
(03:23) - What is the Interactivity API?
(06:00) - The WooCommerce usecase
(07:18) - How Interactivity API fits into the larger picture
(10:02) - The Alpine.js Comparison
(11:57) - So what project are we building?
(15:24) - Tracking the list with Local Storage
(16:44) - Using a resource already being loaded on the site
(19:55) - How do you get started with the Interactivity API?
(21:45) - What are JavaScript Modules?
(32:56) - What's next in the series?

Aurooba and Brian dig into the Font Library - a flagship feature launching in WordPress 6.5. Along the way they discuss the long road getting it into core, some user interface issues, and the future of "composability" in WordPress.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
Fonts in WP Tavern - https://wptavern.com/a-pared-back-web-fonts-api-may-land-in-wordpress-6-0-or-not-at-allRich Tabor - Composability - https://rich.blog/theme-composition/WordPress 6.5 - https://make.wordpress.org/core/6.5Brian's Tavern Article - https://wptavern.com/synced-pattern-overrides-punted-font-library-approved-as-wordpress-6-5-nears-releaseBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com
(00:00) - S02E12 - Font Library
(00:09) - Intro and WordPress 6.5
(03:08) - Font Library and Developers Naming Things
(05:05) - Release Landing Page, Playground, and WP CLI
(09:49) - Styles Panel in the Site Editor
(13:23) - Typography Panel and Tech issues
(18:05) - Variants and Variable Fonts
(19:52) - Google Fonts and GDPR
(21:43) - Saving changes in the site editor
(24:58) - Font Library's Journey to Core
(28:01) - Ongoing Discussion for the Font Library
(32:25) - The Hosting Companies Responsibility
(35:47) - Composability

Let's discuss the process of deploying Next.js applications using Vercel and explore the benefits of exploring different platforms and paradigms. We dive into the process of getting a project live with Vercel but discuss comparisons in the WordPress world, the complicated nature of deployment in WordPress, how different platforms handle them, and the role continuous integration plays into all of it.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!- Vercel – https://vercel.com/- What is utility-first CSS – https://heydonworks.com/article/what-is-utility-first-css/- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com

(00:00) - S02E11 - Next.js Part 5
(00:37) - Familar tools are easier to wrap your head around
(03:22) - On Deployment in the WordPress space
(09:02) - First Look at Vercel Deployment
(10:38) - Environment Variables
(12:56) - Errors on first Vercel Deployment
(13:31) - Using Vercel CLI
(16:16) - How Deployments work
(17:18) - Thinking in PRs
(17:57) - Exploring the Deployment UI in Vercel
(18:40) - Deployment UIs around the web
(19:15) - Comparing to Netlify
(20:21) - Taking your Vercel Project live
(22:56) - Comparing to WordPress Deployments
(24:56) - Prebuilt Deployments with Vercel
(25:26) - Can you get to this level of deployment in WordPress?
(29:29) - Continuous Integration
(32:19) - The Advantage of continuous integration tools
(34:22) - The value of not committing built files to the repo
(35:29) - Cross-pollination between WordPress and other spaces
(36:31) - Web Development is more complicated now
(37:13) - The slow modernization of WordPress
(37:50) - Takeaways from the Next.js Series
(41:09) - CSS in JavaScript: a tangent
(44:09) - What's Next?

Wrapping up the functionality of their Next.js application, Brian and Aurooba look at CRUD operations: how to create, read, update, and delete (ok, maybe not delete) data by using Supabase as a database. They talk about structuring your database, when to update state while saving data, dynamic pages in Next.js and more.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
Supabase - https://supabase.com/Next.js - https://nextjs.org/WP Audit - https://wpaudit.site/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com
(00:00) - S02E10 - Nextjs 4
(00:10) - Intro - What is CRUD
(04:52) - Supabase
(08:47) - Frontend Preview
(10:22) - Our Bug and Async Data Effects
(14:46) - Architecting Databases and Structure
(23:00) - File structure and dynamic routes
(24:59) - Client and Server Components for Supabase
(30:04) - When to visually show data
(34:40) - Planning vs Building First
(36:21) - Queries in Components
(40:39) - Planning for Database Migrations
(42:55) - Next Episode Preview

Continuing the series on Next.js, Aurooba and Brian take a look at a Next.js version of https://wpaudit.site complete with a login set up and ability to save your own checklist.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!- Next.js 14 App Router - https://nextjs.org/docs/app- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com

(00:00) - Introduction
(00:18) - Next.js' relationship with React
(04:25) - Really exploring Next.js
(07:34) - The Next.js clone of WPAudit.site
(09:08) - Styling the login page to match
(12:30) - Creating Pages in Next.js
(13:14) - Generating opengraph images in Next.js
(14:47) - Folder based page routes
(16:51) - Next.js 14 Server components
(18:41) - Caching in Next.js
(19:29) - Loading Experiences in React
(21:20) - Using Middleware in Next.js
(23:15) - Fetching data in Next.js 14
(24:51) - Server Actions in Next.js 14
(27:55) - Using Vanilla-Extract for styling
(35:01) - Why use CSS-in-JS?
(36:18) - How CoPilot helps you do grunt dev work
(39:37) - Saving the Checklist for each user
(41:16) - Looking at the Audit table in Supabase
(42:14) - Balancing current project needs with future needs
(43:53) - Conclusion