viewSource

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

Continue the journey of building a Next.js application as Aurooba explains how to use Supabase to handle all aspects of user authentication in your app, including user accounts, email notifications, and session data. They also dig into server vs client side differences.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/Supabase SSR - https://supabase.com/docs/guides/auth/server-side/creating-a-clientAuthUI - https://supabase.com/docs/guides/auth/auth-helpers/auth-uiGravity Forms - https://www.gravityforms.com/Next.js App Router - https://nextjs.org/docs/appBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - S2 E08 (00:08) - Intro Rant (01:43) - Decisions and Planning (04:11) - Today's Topic - Authentication (07:06) - The Supabase Admin UI (09:54) - Authentication UI in Supabase (15:35) - UI versus Config Files or CLIs (17:30) - Frontend Preview - What are we building? (20:38) - AuthUI (23:58) - Our package.json and Cookies (26:32) - Folder Structure (29:17) - Setting up a Supabase Client (35:33) - Submitting Forms to Supabase (38:45) - Session Data and Server-side Console (41:24) - Scaffolds and Boilerplates (42:29) - Flexibility vs Effort (48:40) - Next episode

In this conversation, Brian and Aurooba discuss various topics related to Next.js development. They explore the importance of deeper understanding, the decisions involved in styling and storage in JavaScript applications, the advantages of CSS-in-JS libraries, the choice of Supabase as the database solution, handling user authentication, and selecting an email service for communication.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!- StyleX – https://stylexjs.com/- Vanilla Extract – https://vanilla-extract.style/- Supabase – https://supabase.com/- Cassidy's post – https://blog.cassidoo.co/post/annoyed-at-react/- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com (00:00) - Introduction (02:09) - The Decisions You have to make in Next.js projects (04:11) - How should we style things? (06:50) - CSS-in-JS (09:35) - The problem with CSS-in-JS (11:31) - Styling Approach Options (19:15) - How will we store data? (19:35) - Say no to Firebase (20:56) - Choosing Supabase (24:35) - How will we authenticate users? (28:05) - Choosing an Email service (30:58) - Staging environments are becoming more important (31:41) - What's next?

Aurooba and Brian kick of a new series all about Next.js. What is Next.js and when is the right time to use it for a project? Along the way they spin up a new application and talk about the build process, file structure, and where you might host your Next application.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 Docs - https://nextjs.org/docsNext.js Templates - https://vercel.com/templates/next.jsWPAudit.site - https://wpaudit.site/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - S02 E06 (00:09) - Our Next Topic: Next.JS (01:20) - What exactly is Next.JS? (06:42) - What problems does Next.JS solve? (13:35) - Setup and hosting for Next.js (18:19) - Spinning up a project (23:41) - Typescript and Typed Languages (25:18) - The Directory Structure (26:28) - Scripts Styles and Optimization (30:17) - Next.js Default Frontend (31:54) - Documentation in Next.JS (35:20) - What are we building? (40:02) - Why Next.js

Brian nicknamed the WordPress 6.4 release the "warm and fuzzy" release, and we explore our favourite features that landed in WordPress Core as part of it. We also found a bug, file it, and talk about how to file a bug well so that it'll get fixed.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!- Release Page - https://wordpress.org/download/releases/6-4/- 6.4 Field Guide - https://make.wordpress.org/core/2023/10/23/wordpress-6-4-field-guide/- The lightbox bug we found - https://github.com/WordPress/gutenberg/issues/56049- Seth explains the Interactivity API - https://twitter.com/SethRubenstein/status/1722653807505531343- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com (00:00) - Introduction (00:22) - How quickly do you update? (02:20) - Our general reaction to WordPress 6.4 (04:46) - Taking a closer look at the Twenty Twenty Four theme (07:47) - The Persona Approach to the Twenty Twenty Four theme (11:57) - Renaming Groups in the Block Editor (15:26) - The Media Panel (18:43) - Image Thumbnails in List View (20:10) - The Lightbox (21:00) - The Interactivty API (22:44) - Finding a Bug in the Lightbox feature (24:59) - Filing a bug in the Gutenberg Repository (28:07) - How to file a bug well (33:31) - Conclusion

It's the fourth and final episode of our series exploring Laravel. Brian takes us through the deployment process using Laravel Forge and AWS. Aurooba discusses "modern" WordPress development and how WordPress solutions like SpinupWP compare to tools like Netlify and Forge.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!Suggest an episode - https://suggest.viewsource.fm/All the code - https://github.com/viewSourcePodcast/suggest-episodeTailcolor (Tailwind Color Generator) - https://tailcolor.com/Laravel Forge - https://forge.laravel.com/Spinup WP - https://spinupwp.com/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - S02E04 - Laravel pt 4 (00:07) - Our Completed Laravel App (02:34) - Tailwind and Colors (04:56) - AlpineJS and Package Bloat (07:57) - Single Page Apps on Laravel (09:43) - Brian's Three Open Terminals (11:52) - Scaffolds and CLIs in WordPress (15:03) - Handling Build Assets in your Deployment (18:36) - Deployment - Forge (and SpinupWP) (24:25) - Connecting AWS to Forge (27:44) - Automated Git Deployments (31:20) - Git vs SFTP in Managed WordPress Hosting (34:33) - Other cool things like queues (37:14) - Final Thoughts

Continuing on in the Laravel series, Brian adds suggestion submission capabilities to the Suggest an Episode app and discussed routing, content relationships, and the ease of templating in Laravel versus 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!Demo Project - https://suggest.viewsource.fm/Project Repo - https://github.com/viewSourcePodcast/suggest-episodeLaravel Debug Bar - https://github.com/barryvdh/laravel-debugbarBerlinDB - https://github.com/berlindb/coreBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (01:14) - Submitting a form in to create a new suggestion (04:17) - Blade Templating Conditionals (06:51) - User roles and permission conditions (08:08) - The basics of Laravel Routes (09:10) - Routes and CRUD (10:36) - Error Handling in Routes (11:51) - Passing information to Routes (12:36) - How to create a Laravel Route (15:09) - Looking at the Suggestion Controller (18:36) - Comparing Laravel Scaffolding to WordPress Features (19:21) - Creating the Destroy function (21:25) - Comparing Routes in WordPress (23:07) - When the Data Model needs to change (25:09) - Content Relationships in WordPress (28:40) - What are the next steps of the application? (29:42) - Conclusion

Breaking down Laravel and the MVC framework by building our first model and view. Along the way, Aurooba and Brian talk about Breeze, Artisan, database migrations, and Query Builder - all fundamental components of Laravel- and how they work.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!Laravel Breeze - https://laravel.com/docs/10.x/starter-kits#laravel-breezeEloquent ORM - https://laravel.com/docs/10.x/eloquentCode from this episode - https://github.com/viewSourcePodcast/suggest-episodeBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:08) - What are we building with Laravel? (02:48) - Frontend Demo and Laravel Breeze (04:17) - MVC - The Model (07:20) - MVC - The View (09:22) - MVC - Controller (11:40) - Artisan Migrations to set up Database tables (16:52) - Our New Suggestions Model (18:01) - Strictness in a Framework (21:53) - Query Builder (25:16) - Views and Blade Templates (32:29) - Coding Standards in Laravel (35:13) - Next Steps and Outro

What exactly can you use Laravel for? How does it differ from WordPress? When does it make sense to use Laravel versus WordPress, and what can we learn from the Laravel approach to open source work? Come on an adventure with us as we dive into Laravel and build a mini project over the course of the next few episodes and compare and contrast it with our experience in the WordPress world.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!Demo Project - https://suggest.viewsource.fm/Project Repo - https://github.com/viewSourcePodcast/suggest-episodeLaravel Breeze - https://laravel.com/docs/10.x/starter-kitsWordPress Performant Translations plugin - https://make.wordpress.org/core/2023/09/05/call-for-testing-performant-translationsCanonical Plugins in WordPress - https://make.wordpress.org/core/2022/09/11/canonical-plugins-revisited/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:58) - Getting into Laravel (03:12) - How Laravel is Different from WordPress (04:38) - Introducing the viewSource Laravel mini project (07:18) - When should you and shouldn't you build with WordPress? (11:26) - The Laravel Ecosystem (15:44) - Documentation in the Laravel world (18:06) - Using Breeze to spin up a login system (20:22) - How Laravel gives you momentum (21:28) - Every framework has a learning curve (23:46) - How to get started with Laravel (26:44) - Conclusion

Season 2 starts in October! Tune in to find out what we'll be chatting about in this second season of viewSource and when it begins.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!- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com (00:00) - Season 2 Trailer (01:49) - Next.js 13 and Browser APIs (03:18) - Laravel is like WordPress for Applications (05:23) - Learning JavaScript (more) Deeply (06:33) - GraphQL vs REST API (09:18) - What can we learn about WordPress from other frameworks? (10:45) - What is the future of bespoke WordPress? (13:44) - Preview of season two

The Season 1 finale of viewSource is a draft style episode where we reflect on our favourite WordPress conversations over the last 20 episodes, chat about what's coming next for both WordPress, viewSource, and both Aurooba and Brian. A fairly chatty episode where we touch on topics like Brian's hatred of JSX, Aurooba's recent struggles with Webpack, and booking flights for WordCamp US 2023. Listen in for a conversations with many twists and turns, hints about a secret project, and what you can expect from Season 2.A full transcript of the episode is available on the website. Watch the video podcast on [YouTube](https://www.youtube.com/watch?v=Yjdv3W2a42A) and subscribe to our channel and [newsletter](https://viewsource.fm/subscribe) to hear about episodes (and more) first!- Digging into ACF for the Block Editor – https://www.youtube.com/watch?v=NowGadjZHR4- Exploring different kinds of Gutenberg Blocks – https://www.youtube.com/watch?v=Ti7emRBeNSo- The episode where Brian schooled Aurooba on Bootstrap – https://www.youtube.com/watch?v=OfuDUQ-MPPo- Wishlist for modern WordPress – https://www.youtube.com/watch?v=aqLZedTj_FE- MRW's Events Calendar Reset – https://mrwweb.com/the-events-calendar-reset-on-github/- Just in time learning – https://www.briancoords.com/just-in-case-vs-just-in-time-learning/- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com (00:00) - Introduction (00:43) - Introducting the viewSource Draft (02:33) - Favourite WordPress conversation of the season (09:40) - Favourite side effect of doing season one (13:40) - Something cool we learned in the lasts 6 months (14:10) - Brian digs into React (17:01) - Dealing with change in the WordPress community (17:55) - Aurooba's relationship with build tools (21:48) - The concept of "just in time" learning (23:09) - Being a beginner at something (24:59) - Looking towards Season Two (26:21) - WordPress is turning a corner (27:57) - When will Season Two launch? (29:03) - Aurooba's next course: React in WordPress (30:33) - viewSource at WordCamp US (33:22) - A secret project releasing soon

Season one moves closer to an ending as Aurooba and Brian share their biggest wish list items for modern WordPress development. With a focus on both User Experience and Developer Experience, they cover topics like extensibility, documentation, and user onboarding.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!Turbo-Admin - https://turbo-admin.com/Performance Report - https://make.wordpress.org/core/2023/05/25/wordpress-6-2-server-performance-analysis-summary/Sustainability Team Proposal - https://make.wordpress.org/project/2023/05/30/proposal-establishment-of-a-formal-wordpress-sustainability-team/Gutenberg Phase 3 - https://make.wordpress.org/core/2023/03/24/phase-3-collaboration/UX and Polish - https://github.com/orgs/WordPress/projects/96The bird theme https://make.wordpress.org/core/2021/10/06/introducing-twenty-twenty-two/Gutenberg Examples Repo - https://github.com/WordPress/gutenberg-examplesQuick Post - https://wordpress.org/plugins/quickpost/ Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:43) - Remembering the Site Editor (01:50) - Remembering the TT3 Theme Release (03:34) - What are WordPress themes now? (06:20) - Our WordPress "Pre-Phase 3" Wishlist (08:00) - A Unified Dashboard (10:11) - The track record of extensibility in WordPress (14:08) - Block Editor UI Nice-to-haves (15:56) - What's a "power user"? (17:21) - User Onboarding and Default Themes (19:26) - The Query Loop Block (20:46) - Writing Code Instead of Using UI (21:41) - The Different Types of Developer Documentation (26:59) - WordPress Scripts and Build Processes (32:43) - Classic and Hybrid WordPress (33:41) - Shortcodes are still out there (37:24) - Communication and Feedback in the Community

In this episode, Aurooba and Brian discuss the four main challenges they faced and learned from in while producing this first season of viewSource. They also dive into the side effects of producing viewSource and how it impacted other aspects of their professional lives. This all stemmed from a technical snaffu that lost them an episode they were looking forward to releasing but does segue well into the reflective period they find themselves as in as summer break approaches.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!Riverside – https://riverside.fm/Descript – https://www.descript.com/Krisp.ai – https://krisp.ai/Transistor.fm – https://transistor.fmTrello – https://trello.comGitHub Projects – https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projectsBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:16) - Re-recording but with a new topic (01:49) - Reflecting on this season so far (03:13) - Lesson 1: it all takes longer than you'd think (04:32) - Project managing the podcast (06:38) - Lesson 2: A lot of tools but never one that has it all (10:07) - A lot goes into creating the kind of show we wanted to create (11:50) - Lesson 3: The impact of AI on podcasting (14:29) - AI in the kitchen (15:21) - AI in the podcasting workflow (16:47) - Lesson 4: Traction is slower and faster than you'd think (18:43) - The focus was never on in-the-moment things (21:38) - Coders like to see the code (22:01) - Connecting with other developers (23:46) - The result of this podcast was more than just the podcast (25:33) - Outro

Aurooba and Brian complete their accordion in React.js as part of their series on building an accordion block. They discuss how components are loaded into the Dom, binding a value to the className attribute, and thoughts on prop drilling. The episode ends with a preview of the rest of Season One and thoughts on viewSource Season Two.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!- Code from this episode - https://github.com/viewSourcePodcast/viewSource-blocks/tree/episode/accordion-content-on-page- Brian's website – https://www.briancoords.com- Aurooba's website – https://aurooba.com00:00 Introduction03:16 Previous code recap06:54 Adding a key for looping elements07:54 Components are not HTML elements09:50 className13:02 Doing expressions inside attributes15:03 Adding CSS to our component16:53 Prop drilling19:10 useContext vs Prop Drilling22:27 Attempting to remove a component 27:08 Next Steps for viewSource and Season 2 (00:00) - E17 - React & Dom & Prop-Drilling (03:16) - Previous code recap (06:54) - Adding a key for looping elements (07:54) - Components are not HTML elements (09:50) - className (13:02) - Doing expressions inside attributes (15:03) - Adding CSS to our component (16:53) - Prop drilling (19:10) - useContext vs Prop Drilling (22:27) - Attempting to remove a component (27:08) - Next Steps for viewSource and Season 2

Brian and Aurooba walk through the process of submitting a pull request in GitHub, reviewing it, and merging it into a repository – discussing best practices and perspectives to take as the reviewer and the reviewee in an ongoing pull request. In this case, the open source project was wphelpers.dev and Brian was adding a fantastic new helper: a searchable guide to the WordPress Icon library (@wordpress/icons), which they also take a look at.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!The searchable icon library – https://wphelpers.dev/iconsThe Post Status slack comment that prompted the creation of wphelpers.dev – https://poststatus.slack.com/archives/C0413TGQZ/p1645727796428859@wordpress/icons repo – https://github.com/WordPress/gutenberg/blob/3f5da7aa3b3b2f37301a498f401c7623d989bb9d/packages/icons/README.md@wordpress/icons visual reference – https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--libraryNetlify deploy previews – https://docs.netlify.com/site-deploys/deploy-previews/Netlify collaborative drawer – https://www.netlify.com/products/deploy-previews/Brian's viral tweet thread about the searchable icon library – https://www.briancoords.com/building-the-wordpress-icon-library/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:13) - A tangent on wearing a uniform everyday (02:05) - Recapping v1 of this episode we had already recorded (02:42) - Getting into the topic: collaborating on GitHub (03:46) - Introducing wphelpers.dev and how it came to be (05:04) - How the searchable icon library guide came to be (06:12) - The portability of Gutenberg packages (07:20) - Walking through the searchable Icon Library (09:23) - How wp-scripts interacts with @wordpress/icons (09:51) - Our favourite uses for the searchable icon library (11:02) - Diving into the pull request (11:41) - Creating work-in-progress PRs (12:56) - Collaborating with the deploy preview feature in Netlify (13:14) - Getting feedback early on in the process (14:16) - The netlify collaboration drawer (15:07) - The ideal opening comment on a PR (16:27) - Requesting a review in GitHub (16:49) - Determing the right time to request a review (17:47) - The features of an official review in GitHub (20:53) - Making new issues from incoming feedback (21:27) - Creating trackable history in GitHub (25:13) - Requesting changes through reviews in GitHub (26:13) - The code view in PRs and its features (27:40) - GitHub reviews allow you to post your comments holistically (30:23) - Automatic deployment with Netlify (31:35) - Using the right tool for the situation (33:21) - Discovering the existing icon library visual reference

Aurooba and Brian explore the new WP_HTML_Tag_Processor that landed in WordPress 6.2, and how handy it would be in scenarios where they've had to use regular expressions to modify HTML in their WordPress projects. They then walk through a function using the new processor to inline and safely modify SVGs, ways they could improve the function and take advantage of the processor's capabilities more, and discuss other ways the processor could enhance complicated filtering of rendered output 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!The code from this episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/episode/html-tag-processorAurooba's post with a walkthrough of the code – https://aurooba.com/inline-svgs-in-your-wordpress-code-with-this-helper-function/The Dev Note – https://github.com/WordPress/gutenberg/issues/44410#issuecomment-1420787816Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.comPHP Inline SVG helper function from Ian – https://gist.github.com/ian-svoboda-prom/b7a436d5397e007b7d8d5427465ff161Gist to get the file contents of an SVG – https://gist.github.com/rugor/1decc15655891825d15a7024a06d898bWP SVG Helper functions – https://gist.github.com/kingkool68/6d72977fe8c82eeb9a85295ac3623cdeHow to Modify HTML in a PHP WordPress Plugin Using The New Tag Processor API – https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/

Aurooba and Brian are back with the series on building with React inside WordPress! In this episode, they dive into how state works in React and why ternary expressions are more common in JavaScript than they are in PHP. They break down the code of the accordion they've been building in React over the course of this series, focussing on exactly how it manages which item stays open or closed.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!The code from the episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block-componentsThe React series playlist – https://www.youtube.com/watch?v=TtmY2Ck_6i0&list=PLqKZJzLBhX4LYt7vhrs3CvJdPrWBugPJ9The episode on debugging in WordPress – https://www.youtube.com/watch?v=7g0Mlh71PYkBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:25) - Recap of where we are in the React series (02:03) - Rerenders in React (06:39) - What is state in React? (10:40) - The expand() function (14:30) - How a ternary expression works (16:55) - Why are ternary expressions more common in JavaScript? (20:33) - Where it makes sense to use a ternary experession (26:09) - What's next? (27:28) - Taking the editing experience into account when making a block

In this episode, Aurooba and Brian discuss his recent recent experience speaking at WordCamp Phoenix. Then, they dig into the presentation topic: transitioning from Advanced Custom Fields Flexible Content Rows to ACF Blocks. The conversation ranges from what it takes to learn a new workflow to understanding the limitations of the block editor.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!Brian's WCPHX Talk (with slides and code) - https://www.briancoords.com/phoenix/WordCamp Phoenix Livestreams https://www.youtube.com/@wcphx/streamsLet's Build a Custom Block in 15 Minutes by Nick Diego - https://nickdiego.com/wcus-2022/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com00:00:00 Our First WordCamps00:04:20 Brian spoke at WordCamp Phoenix00:08:33 Our histories with ACF00:09:24 The age of shortcodes is over. The time of the flexible content rows has come.00:11:02 Transitioning and staying profitable00:13:54 Live-coding a presentation00:16:03 Looking at a standard ACF Flexible Content Rows page00:19:04 ACF Blocks on the frontend00:20:51 ACF Blocks in the Block Editor00:24:10 Experimenting with Core Blocks and ACF Blocks00:30:07 On writing the same code for the rest of your life00:32:18 Transitioning from ACF Blocks to native blocks (00:00) - Our First WordCamps (04:20) - Brian spoke at WordCamp Phoenix (08:33) - Our histories with ACF (09:24) - The age of shortcodes is over. The time of the flexible content rows has come. (11:02) - Transitioning and staying profitable (13:54) - Live-coding a presentation (16:03) - Looking at a standard ACF Flexible Content Rows page (19:04) - ACF Blocks on the frontend (20:51) - ACF Blocks in the Block Editor (24:10) - Experimenting with Core Blocks and ACF Blocks (30:07) - On writing the same code for the rest of your life (32:18) - Transitioning from ACF Blocks to native blocks

On today's episode, Aurooba manufactures a little bug in her code and then Brian helps debug what's going on. As they debug the code, they discuss the high level approach to debugging, some helpful WordPress tools to make finding problems easier, and discuss the role coding standards can have in helping you debug better.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!Query Monitor – https://en-ca.wordpress.org/plugins/query-monitor/Using either option or options in ACF – https://www.advancedcustomfields.com/resources/get_field/#get-a-value-from-different-objectsThe code from this episode – https://github.com/viewSourcePodcast/viewSource-blocks/blob/debug-episode/functions.phpBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.comviewSource Newsletter – https://viewsource.fm/subscribe (00:00) - Introduction (02:55) - How do you debug? (08:16) - Live debugging a little problem (09:10) - Giving context for the bug (11:13) - Using Query Monitor (14:48) - Talking through the problem (16:51) - Adding conditionals appropriately (19:09) - Debugging a functional logic error (19:44) - Let's var_dump()! (25:50) - Thinking about what should happen (32:37) - Providing code feedback (33:54) - Being more verbose in your code (34:24) - Naming variables better (35:43) - Choosing the right kind of conditionals (37:34) - Conclusion

Aurooba and Brian convert their simple React accordion into separate, reusable components and discuss the importance of components as foundational parts of the web. Next, they show how to use React devtools in Chrome to quickly examine and debug your components. Finally, they dig into the code with a focus on passing and destructuring the data you pass via props.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!Code from this episodeReact Developer ToolsBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (01:19) - Components as foundational parts of the web (03:33) - Recap of our series so far (04:15) - Using React devtools in Chrome (08:31) - Our AccordionItem Component (13:32) - Passing props and destructuring (19:20) - How many components is too many? (23:46) - Balancing and planning different approaches in React (26:48) - What comes next? A preview on state and interactivity

Aurooba and Brian dig into the semantics of not only what makes an accordion accessible, but also why a11y should be a first class consideration when you build anything on the web. They also explore how different ARIA tags work and what they indicate, taking a previously inaccessible accordion and transforming it into something navigable visually, with a keyboard, and with other assistive devices. Along the way, they also think out loud about the definition of an accordion and what that really means.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!Source code for this episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block-a11yCoding inclusive collapsible sections – https://inclusive-components.design/collapsible-sections/ARIA Guide to Accordions – https://www.w3.org/WAI/ARIA/apg/patterns/accordion/Exploring what a React component is : https://youtu.be/eCKyI12JJswUsing React on the WordPress frontend : https://youtu.be/TtmY2Ck_6i0Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:15) - The importance of accessibility (03:25) - The different considerations of making something accessible (05:35) - Recapping where are are in the Accordion Block series (06:50) - Demo-ing an accessible accordion (08:36) - Defining an accordion (10:40) - Header versus heading (12:21) - Keyboard accessibility (15:32) - What does ARIA stand for? (16:03) - Coding an accessible accordion (16:43) - The components of an accordion section (17:23) - Diving into the semantics of an accordion section header (23:11) - Targetting ARIA tags in your CSS (24:21) - Digging into the accordion section panel (26:32) - Animating an accordion (27:46) - Next Steps (29:34) - Conclusion

Building on our simple React app, Aurooba demonstrates a component and sets up state to track variables. While discussing return statements, Brian cringes about JSX and mixing HTML with JavaScript. They also discuss how a function can return more than one variable in modern JavaScript.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!The source code from the episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block@wordpress/scripts – https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/@wordpress/element - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (01:10) - The Return in React Components (07:39) - Setting up State with @wordpress/element (10:25) - Destructuring and Getting Multiple Values from a Function (14:05) - Calling Event Functions in JSX (16:06) - Frontend Recap and Next Steps

Dig into what React is and how it works, especially inside WordPress, with Aurooba and Brian as they set up the basic environment and load up a little React component inside a WordPress post. Part one of a series of episodes where they'll transform their code into a working accordion block.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!The source code from the episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block@wordpress/scripts – https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/Wes Bos' courses – https://wesbos.com/coursesThe "Learn JavaScript Deeply" moment in WordPress history – https://youtu.be/TX6dXRL-jPU?t=3536Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (00:26) - Learn JavaScript Deeply (02:59) - What is React? (06:37) - Comparing React to other familiar WordPress tech (08:36) - A React-ive "Hello World" (10:02) - @wordpress/scripts and the scary part of React (11:21) - Setting up a basic index.js in React (12:12) - React and @wordpress/element (14:09) - Outputting the React app with createRoot (18:27) - Exporting and importing functions in React (22:12) - Breaking your code up into smaller files (23:39) - Concluding Part 1! (24:21) - Outro

Two long-time remote workers share their history and their best practices for working from home. Aurooba covers how to socialize yourself and fight loneliness, and Brian shares his tips for creating boundaries when you have five kids outside your office door all day. They discuss some of the tools they use, the best ways to have asynchronous conversations, and how to tame Slack.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!Cal NewportHow to communicate effectively as a developerBrian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Introduction (04:05) - Our first remote jobs (07:53) - Overall thoughts on remote work (08:51) - Socializing and loneliness in remote work (11:33) - Tools and rituals for creating boundaries (13:44) - Chrome versus Safari (17:46) - Communication, Chat, and Notifications (22:50) - Timezones and Async Conversations (26:11) - Synchronous Meetings (28:18) - Our advice for remote work

Brian walks Aurooba through how Bootstrap works and the conversation turns into a discussion about common design languages and the core concepts of CSS most people, frameworks, and systems employ. They also talk about the role frameworks like Bootstrap play in modern WordPress development and whether they are even necessary.

Continuing where they left off, Aurooba and Brian recap their experience with ACF Blocks. Next, they look at two different ways to create native WordPress blocks: using nested inner blocks and using React components. They discuss the pros and cons of all three methods, how to plan your blocks, and when to just use block patterns.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!The code from the episode - https://github.com/viewSourcePodcast/viewSource-blocksBrian + ACF Team – https://twitter.com/briancoords/status/1620442914110447619 Brian's ACF Blog Post - https://www.briancoords.com/documentation-for-dummies-like-me/Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com (00:00) - Part 2: ACF Blocks vs Native Blocks (00:12) - Introduction and ACF's documentation (03:02) - Reviewing Aurooba's ACF block (05:55) - Estimated timeframe for different types of blocks (06:58) - A native block with innerBlocks (09:57) - The native block with React components (13:08) - Inner blocks versus block patterns (17:08) - The code behind the " wrapper" block (19:47) - Deciding which type of block to build (21:37) - Building a block with React components (24:52) - Matching the block editor's UI (28:21) - Wrap up - how to decide?

Aurooba and Brian dig into ACF Blocks and how taking a design from mockup to built with the Block Editor requires a mindset adjustment. They also talk through the code of a real ACF Block, coding LIVE on the episode and discussing the pros and cons of ACF Blocks versus native blocks – with support from GitHub Copilot, of course. 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!ACF Blocks – https://www.advancedcustomfields.com/resources/blocks/Brian's website – https://briancoords.com/Aurooba's website – https://aurooba.com (00:00) - Digging into ACF Blocks for the Block Editor (01:18) - Our ACF origin stories (03:38) - Switching to ACF Blocks from Flexible Content Rows (06:32) - The pros and cons of JSON (08:18) - Building blocks without a build process (09:20) - The two main types of blocks (12:34) - Why Aurooba never tried ACF Blocks before (13:57) - The fragility of blocks in the early days (15:25) - Approaching design atomically instead of as rows and columns (20:06) - Building a block with ACF Blocks (23:25) - Enabling Core Supports in ACF Blocks (26:11) - Live Coding: Adding background color support to the block (31:37) - Are ACF Blocks here to stay?

Brian gets Aurooba to spill all the details about how she starts a new client website project. They discuss the tech stack, when to use WordPress, using plugins versus custom coding, and more. Then they dig into her project management and communication best practices, including her preposterous claim that she's actually taught clients how to record and send her Loom videos. Oh- and they each share their best stories of projects that went completely off the rails.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!Brian's website – https://briancoords.com/Aurooba's website – https://aurooba.com

Today's episode explores the range of local WordPress environments, starting with MAMP and making it to Docker, Vagrant, and Local WP. Brian discusses the built-in WordPress local dev tool, @wordpress/env and the state of documentation. Somewhere along the way, Aurooba explains the difference between mamp-stacks and Docker.Local WP doesn't use Docker or any kind of virtualization anymore. Thanks for the correction, Andy! Learn more about that change here.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!ServerPress is Shutting Down - https://wptavern.com/serverpress-is-shutting-downLocal WP - https://localwp.com/Block Editor Handbook - @wordpress/env  - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/MAMP PRO - https://www.mamp.info/en/mamp-pro/windows/DevKinsta - https://kinsta.com/devkinsta/Kana by Chris Weigman - https://chriswiegman.com/2022/09/introducing-kana-a-simple-and-powerful-wordpress-development-environment/Lando - https://lando.dev/Brian's website – https://briancoords.com/Aurooba's website – https://aurooba.com

Listen in as Aurooba and Brian recount their experience of trying out GitHub Copilot, debate its gender (!!), how it will affect developers in and out of the WordPress space, and what the current and possible future ethical concerns could be with AI coders. And it wouldn't be a conversation between them if they didn't digress into a tangent or two, of course.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!GitHub Copilot – https://github.com/features/copilotChatGPT – https://openai.com/blog/chatgpt/Watch ChatGPT and Midjourney build a complete website – https://www.youtube.com/watch?v=8I3NTE4cn5sBrian's article about GitHub CoPilot on MasterWP – https://masterwp.com/getting-cozy-with-github-copilot/Brian's website – https://briancoords.com/Aurooba's website – https://aurooba.com

Introducing viewSource: a weekly conversation around tech, web development, and WordPress with hosts Aurooba Ahmed and Brian Coords. Listen in to learn a little about the hosts, their backgrounds, and the types of conversations you can expect to eavesdrop on in future 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!viewSource website - https://viewsource.fm Brian's website – https://www.briancoords.comAurooba's website – https://aurooba.com