viewSource
Aurooba Ahmed, Brian Coords
All episodes
Best episodes
Seasons
Top 10 viewSource Episodes
Goodpods has curated a list of the 10 best viewSource episodes, ranked by the number of listens and likes each episode have garnered from our listeners. If you are listening to viewSource for the first time, there's no better place to start than with one of these standout episodes. If you are a fan of the show, vote for your favorite viewSource episode by adding your comments to the episode page.
04/24/23 • 35 min
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/streams
- Let’s Build a Custom Block in 15 Minutes by Nick Diego - https://nickdiego.com/wcus-2022/
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
00:00:00 Our First WordCamps
00:04:20 Brian spoke at WordCamp Phoenix
00:08:33 Our histories with ACF
00:09:24 The age of shortcodes is over. The time of the flexible content rows has come.
00:11:02 Transitioning and staying profitable
00:13:54 Live-coding a presentation
00:16:03 Looking at a standard ACF Flexible Content Rows page
00:19:04 ACF Blocks on the frontend
00:20:51 ACF Blocks in the Block Editor
00:24:10 Experimenting with Core Blocks and ACF Blocks
00:30:07 On writing the same code for the rest of your life
00: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
Building an accessible accordion
viewSource
04/03/23 • 29 min
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-a11y
- Coding 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/eCKyI12JJsw
- Using React on the WordPress frontend : https://youtu.be/TtmY2Ck_6i0
- Brian's website – https://www.briancoords.com
- Aurooba'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
04/29/24 • 29 min
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%22
- https://twitter.com/SethRubenstein
- https://twitter.com/DevelopWoo
- https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference
- Brian's website – https://www.briancoords.com
- Aurooba'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
04/17/23 • 38 min
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-objects
The code from this episode – https://github.com/viewSourcePodcast/viewSource-blocks/blob/debug-episode/functions.php
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
viewSource 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
Reusable Components in React
viewSource
04/10/23 • 29 min
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 episode
- React Developer Tools
- Brian's website – https://www.briancoords.com
- Aurooba'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
What is a React Component?
viewSource
03/27/23 • 19 min
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.com
- Aurooba'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
03/20/23 • 24 min
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/courses
- The "Learn JavaScript Deeply" moment in WordPress history – https://youtu.be/TX6dXRL-jPU?t=3536
- Brian's website – https://www.briancoords.com
- Aurooba'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
Communicating When You Work Remotely
viewSource
03/13/23 • 31 min
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 Newport
- How to communicate effectively as a developer
- Brian's website – https://www.briancoords.com
- Aurooba'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
03/06/23 • 30 min
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. 🤔
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!
- Bootstrap documentation – https://getbootstrap.com/docs/5.0/getting-started/introduction/
- Bootstrap variables.scss file – https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- (00:00) - Introduction
- (07:39) - The history of Bootstrap
- (10:32) - The pros and cons of Bootstrap
- (14:56) - Cascading style decisions with Bootstrap
- (17:12) - The variables file to rule them all
- (20:18) - Diving into utility classes
- (22:23) - Utility classes in other frameworks and WordPress
- (24:38) - When does Bootstrap make sense?
- (27:03) - Modern WordPress theming and CSS frameworks
05/15/23 • 36 min
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/icons
- The 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--library
- Netlify 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.com
- Aurooba'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
Show more best episodes
Show more best episodes
FAQ
How many episodes does viewSource have?
viewSource currently has 36 episodes available.
What topics does viewSource cover?
The podcast is about Wordpress, Open Source, Podcasts, Technology and Developer.
What is the most popular episode on viewSource?
The episode title 'Tips on how to to debug your WordPress code' is the most popular.
What is the average episode length on viewSource?
The average episode length on viewSource is 33 minutes.
How often are episodes of viewSource released?
Episodes of viewSource are typically released every 7 days.
When was the first episode of viewSource?
The first episode of viewSource was released on Jan 24, 2023.
Show more FAQ
Show more FAQ