Sign up to save your podcasts
Or
Share viewSource
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
viewSource
By Aurooba Ahmed, Brian CoordsTechnology
viewSource episodes
- Explore one of the coolest new features of WordPress 6.2
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-processor
- Aurooba'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-1420787816
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- PHP Inline SVG helper function from Ian – https://gist.github.com/ian-svoboda-prom/b7a436d5397e007b7d8d5427465ff161
- Gist to get the file contents of an SVG – https://gist.github.com/rugor/1decc15655891825d15a7024a06d898b
- WP SVG Helper functions – https://gist.github.com/kingkool68/6d72977fe8c82eeb9a85295ac3623cde
- How 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/
30 min - Managing State in React
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-components
- The React series playlist – https://www.youtube.com/watch?v=TtmY2Ck_6i0&list=PLqKZJzLBhX4LYt7vhrs3CvJdPrWBugPJ9
- The episode on debugging in WordPress – https://www.youtube.com/watch?v=7g0Mlh71PYk
- Brian's website – https://www.briancoords.com
- Aurooba'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
31 min - Transitioning from ACF Flexible Content Fields to ACF Blocks
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
36 min - Tips on how to to debug your WordPress code
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
39 min - Reusable Components in React
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
30 min - Building an accessible accordion
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
30 min - What is a React Component?
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
20 min - Getting started with React inside WordPress
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
25 min - Communicating When You Work Remotely
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
32 min - Building Websites with CSS Frameworks like Bootstrap
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
31 min
About viewSource
From the publisher's feed
A biweekly conversation around tech, web development, and WordPress with hosts Aurooba Ahmed and Brian Coords.