Cards & Loops Cleanup – craylor.com | Agency-Grade Builds S1E13 🔗 **Source:** [Cards & Loops Cleanup – craylor.com | Agency-Grade Builds S1E13](https://www.youtube.com/watch?v=G0jwUjVIoEU) > [!note]+ Document Notes > tags: [wordpress, design-system, web-development] > author: Chris Taylor > source: YouTube > reference: https://www.youtube.com/watch?v=G0jwUjVIoEU > date created: 2024-12-19 10:30 > > # 🏷️ Title: Cards & Loops Cleanup – craylor.com | Agency-Grade Builds S1E13 > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Fix video archive redirect issue — /videos slug needs proper handling #wordpress - [H2] Build tool card component with price tier display — media card adaptation needed #components - [H3] Implement category filtering for tool archives — taxonomy query optimization #loops ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Agency-Grade Builds Playlist](https://www.youtube.com/playlist?list=PLAYLIST_ID) - [Big Scoots Hosting](https://bigscoots.com) ## 📝 Summary - Chris Taylor and team work through cleanup tasks for the craylor.com rebuild project - Focus on fixing video card loops, creating tool cards, and organizing taxonomy archives - Heavily edited 30-minute condensation of 3-hour work session without main developer Kevin - Bottom line: foundational component work completed despite being a "maintenance" episode ## 📖 Main Content This episode represents a departure from the typical fast-paced development sessions in the Agency-Grade Builds series. Chris explicitly frames this as cleanup work, condensed from three hours into 30 minutes of heavily edited footage. The session focuses on several core WordPress development challenges: managing custom post type archives, creating reusable card components, and implementing proper taxonomy queries. The team addresses a fundamental site architecture question around video content organization - whether to maintain a traditional archive page or rely on curated homepage sections. They ultimately decide against a /videos archive, instead redirecting to YouTube while maintaining featured video cards on the homepage. The bulk of the work involves adapting existing media card components into tool cards, demonstrating the balance between component reusability and specific functionality needs. Technical challenges arise around accessing custom meta fields from JetEngine taxonomies within loops, highlighting limitations in the current tech stack. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=0) — [H1] Episode disclaimer and context - Key idea: This is heavily edited cleanup work, not typical build content - Evidence: "There is nothing crazy flashy in this episode... we condensed this footage down heavily" #### ⏱️ [02:30](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=150) — [H2] Video archive strategy discussion - Key idea: Questioning whether to maintain video archive vs curated approach - Evidence: "I didn't really want this archive that's just a list of all my thumbnails" #### ⏱️ [04:15](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=255) — [H2] URL redirect issue identification - Key idea: /videos slug needs proper handling to avoid broken links - Evidence: "We got to fix that somehow. We just redirect or something" #### ⏱️ [05:45](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=345) — [H3] Loop and sorting fixes - Key idea: Need to fix category display and card ordering - Evidence: "I want to fix this loop thing so it doesn't show all the categories on each one" #### ⏱️ [07:20](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=440) — [H3] Date-based sorting implementation - Key idea: Most recent videos should display first - Evidence: "Format date. Set field. Bang... Holy shit I don't have the tab up" #### ⏱️ [09:10](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=550) — [H2] Missing category archive page - Key idea: Need bridge between category overview and individual tool pages - Evidence: "We need something to bridge the gap. When you click view all email hosting... that has to go somewhere" #### ⏱️ [11:30](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=690) — [H2] Tool card component requirements - Key idea: Need dedicated tool cards distinct from media cards - Evidence: "We need a tool single, but kind of even before that, we need like a super... tool cards" #### ⏱️ [14:45](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=885) — [H3] Video section stabilization - Key idea: Adding fourth video resolves category display issues - Evidence: "Added a new video. That's not a comparison. Aha, look at that... that section is stable" #### ⏱️ [16:20](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=980) — [H3] JetEngine taxonomy limitations - Key idea: Custom meta fields from taxonomies not accessible in loops - Evidence: "It doesn't pull the serialized data from specifically the meta fields of jet engines taxonomies" #### ⏱️ [19:15](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=1155) — [H1] Big Scoots sponsorship segment - Key idea: Managed hosting sponsor with 98% off promotion - Evidence: "2 months of premium hosting for pennies, which is basically no risk" #### ⏱️ [21:00](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=1260) — [H2] Component reusability debate - Key idea: Balancing component reuse vs specific functionality - Evidence: "How many check boxes and drop downs do we want to add to make it customizable" #### ⏱️ [23:30](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=1410) — [H3] Template copying and adaptation - Key idea: Reusing existing template structure for category archives - Evidence: "Can I copy this? Go over to our templates... paste it in here. That's amazing" #### ⏱️ [25:45](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=1545) — [H3] Tool card creation process - Key idea: Adapting media card component into tool-specific version - Evidence: "Let's just try to grab this media... we're going to call this a tool card" #### ⏱️ [28:20](https://www.youtube.com/watch?v=G0jwUjVIoEU?t=1700) — [H3] Category filtering implementation - Key idea: Successfully filtering tools by current category - Evidence: "Holy shit I'm a genius... son of a bitch I'm a genius" ## 📚 References - [JetEngine Documentation](https://jetengine.zemez.io/documentation/) - [WordPress Custom Post Types](https://developer.wordpress.org/plugins/post-types/) - [Big Scoots Managed Hosting](https://bigscoots.com/) ## 🗣️ Paraphrase - The team tackles cleanup work on card components and taxonomy loops rather than major feature development - Video archive strategy shifts from traditional listing to curated homepage sections with YouTube redirect - Tool card components get built by adapting existing media cards while maintaining component separation principles ## 📰 Newsletter **WordPress Component Architecture Insights** This week's Agency-Grade Builds episode offers valuable lessons in component design strategy and taxonomy management. The team demonstrates practical approaches to balancing reusable components with specific functionality needs. **Key Takeaways:** - Component reusability has limits - sometimes separate components serve better than over-engineered flexibility - JetEngine taxonomy meta fields have loop accessibility limitations requiring workarounds - Template copying can accelerate development while maintaining consistency **Practical Applications:** - Consider redirect strategies for unused archive pages rather than maintaining empty content - Plan taxonomy query requirements early in component design - Document component limitations to guide future development decisions Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Investigate taxonomy meta field accessibility in REST API responses - Documentation: Document component reusability decision framework - Community: Share JetEngine taxonomy limitation findings with plugin developers #### Community - Contributors: Create tutorial on component architecture best practices - Maintainers: Review taxonomy query performance implications - Sponsors: Document hosting requirements for complex component systems ## 🧪 Hypotheses - Component separation leads to better maintainability than over-flexible unified components - JetEngine taxonomy limitations could be resolved through custom REST endpoints - Video content curation performs better than traditional archive pagination for engagement - Template copying accelerates development without sacrificing code quality ### 📊 Methodology - A/B testing curated video sections vs traditional archives for engagement metrics - Performance analysis of component rendering with different prop configurations - User behavior tracking on category archive navigation patterns ### ❓ Questions - How do users actually navigate between tool categories and individual tools? - What's the optimal balance between component flexibility and maintainability? - Could custom REST endpoints solve the JetEngine taxonomy meta field limitations? ### 🔮 Future Research - Comprehensive study of WordPress component architecture patterns - Analysis of taxonomy meta field accessibility across different page builders - User experience research on content discovery patterns for tools/products ### 💡 Implications - Practice: Component architecture decisions impact long-term maintainability significantly - Policy: Need clear guidelines for when to create separate vs unified components - Education: Developer training should cover component design strategy, not just implementation - Funding: Budget for refactoring time when component requirements evolve ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 10.2 #### 👀 Visual learners - Present: Screen recordings of development process, component wireframes - Improve: Component relationship diagrams, before/after visual comparisons #### 🔊 Aural learners - Present: Conversational explanation of development decisions - Improve: Audio-only version highlighting key technical discussions #### 🗣️ Verbal learners - Present: Technical terminology explained in context, analogies used - Improve: Glossary of WordPress/JetEngine specific terms #### 🧩 Kinesthetic learners - Present: Step-by-step component building process shown - Improve: Downloadable component templates, hands-on exercises #### 🧠 Logical learners - Present: Decision trees for component reusability, systematic approach - Improve: Flowcharts for taxonomy query optimization #### 🧑‍🤝‍🧑 Social learners - Present: Team discussion and collaborative problem-solving - Improve: Community forums for similar development challenges #### 🧘‍♀️ Solitary learners - Present: Individual development work with clear narration - Improve: Self-assessment checklist for component design decisions #### 🌿 Naturalistic learners - Present: Organic problem discovery and solution evolution - Improve: Ecosystem view of how components interact within larger system ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in video chapters - Improve: Transcript with proper heading markup, code sample alt descriptions #### Keyboard navigation - Present: Standard video player controls - Improve: Chapter navigation shortcuts, code sample keyboard accessibility #### Contrast and readability - Present: Clear code editor contrast in screen recordings - Improve: High contrast mode for code demonstrations #### Text resizing and reflow - Present: Responsive video player - Improve: Transcript text scaling options #### Media and captions - Present: Auto-generated captions available - Improve: Human-reviewed captions with technical accuracy #### Forms and interactions - Present: Standard YouTube interface - Improve: Alternative formats for interaction elements ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-language content with global WordPress community focus - Improve: Multi-language caption options, international hosting examples #### Inclusive language - Present: Professional technical terminology - Improve: Avoid colloquialisms, define all acronyms #### Neurodiversity support - Present: Clear chapter divisions, predictable structure - Improve: Content warnings for rapid screen changes, consistent pacing #### Representation - Present: Technical focus with diverse tool examples - Improve: Varied use cases representing different business contexts #### Psychological safety - Present: Acknowledging mistakes and limitations openly - Improve: Emphasize learning process over perfect execution ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Component separation principles consistently applied - Inductive strength: Experience-based decisions around reusability limits - Causal reasoning: Clear cause-effect relationships in technical limitations - Analogical strength: Good comparison between different card component types #### Fallacies - Appeal to authority: "Kevin would say..." without justification - minor weakness, could explain reasoning - False dilemma: Reuse vs separate components presented as binary - could explore hybrid approaches #### Tone of voice - Overall tone: Conversational, self-deprecating, technically honest about limitations and mistakes ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacking behavior observed - Reverse victim/offender: Not applicable to technical content - Emotional cues and rhetoric: Positive, collaborative tone throughout ## 🎯 Conclusion This maintenance episode demonstrates that cleanup work provides valuable learning opportunities around component architecture and WordPress development patterns. The practical challenges of balancing component reusability with specific functionality needs offer insights applicable beyond this specific project. Key takeaway: Component architecture decisions have long-term maintainability implications that should be considered early in the development process. The team's approach of creating separate components rather than over-engineering flexibility shows mature development thinking. Next steps involve continuing the build process with Kevin's return and applying the component patterns established in this cleanup work to future development cycles. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Component architecture requires balanced reusability decisions > [!quote] [Cards & Loops Cleanup](https://www.youtube.com/watch?v=G0jwUjVIoEU) by [[Chris Taylor]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "How many check boxes and drop downs do we want to add to make it customizable?" Critical decision point in WordPress component development strategy. [view highlight](https://www.youtube.com/watch?v=G0jwUjVIoEU#H1) #xref #articleseed ID:rw_component_reusability ### [H2] JetEngine taxonomy limitations affect loop accessibility > [!quote] [Cards & Loops Cleanup](https://www.youtube.com/watch?v=G0jwUjVIoEU) > "It doesn't pull the serialized data from specifically the meta fields of jet engines taxonomies." Technical constraint impacts component data access patterns. [view highlight](https://www.youtube.com/watch?v=G0jwUjVIoEU#H2) #xref ID:rw_jetengine_limits --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Template copying accelerates WordPress development - Works for similar page structures with content type variations - Pointer <!-- deep-read:sections end -->