Inviting anyone to join my stream What could go wrong!

Inviting anyone to join my stream? What could go wrong?! 🔗 **Source:** [Inviting anyone to join my stream? What could go wrong?!](https://www.youtube.com/watch?v=S7iz-lSkoh8) > [!note]+ Document Notes > tags: [twitch-stream, typescript, wordpress, community, viewer-callin] > author: Ryan Welcher > source: Twitch > reference: https://www.youtube.com/watch?v=S7iz-lSkoh8 > date created: 2025-01-15 13:45 > > # 🏷️ Title: Inviting anyone to join my stream? What could go wrong?! >  ## 🧰 Action Inbox - [H1] Experiment with Twitch viewer call-ins — first-time feature test #streaming - [H2] Work on TypeScript block development — learning process documentation #typescript - [H3] Review WP Rig plugin feedback — promised community response #wordpress ## 🧭 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 - [WP Rig Plugin](https://github.com/wprig/wprig) - [Totally TypeScript Course](https://totaltypescript.com) ## 📝 Summary - Ryan Welcher experiments with Twitch viewer call-ins on his first 2026 stream - Multiple community members join to discuss WordPress development and TypeScript integration - Paul Baron shares a plugin proposal for managing code snippets with security considerations - Live coding session demonstrates TypeScript implementation challenges in WordPress blocks - Community discussion covers caching solutions, plugin development, and WordPress core TypeScript adoption ## 📖 Main Content This stream represents an experimental format where viewers can directly join the broadcast through Twitch's call-in feature. The session covers multiple WordPress development topics while demonstrating the technical and social dynamics of live collaborative streaming. The main technical focus involves implementing TypeScript in WordPress block development, addressing the lack of proper types in core packages. Ryan works through creating custom type declarations and demonstrates common challenges developers face when migrating to TypeScript. Paul Baron presents a plugin concept for managing code snippets with dynamic settings pages, raising important security considerations around arbitrary code execution. The discussion highlights the balance between functionality and security in WordPress plugin development. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/S7iz-lSkoh8?t=0) — [H1] Stream Setup and Viewer Call-ins Introduction - Key idea: Testing Twitch viewer call-in feature for interactive streaming - Evidence: "There's this thing in Twitch called viewer calling. People can actually jump up." #### ⏱️ [02:30](https://youtu.be/S7iz-lSkoh8?t=150) — [H2] 2026 Goals and TypeScript Focus - Key idea: Dedicating 2026 to learning TypeScript for WordPress development - Evidence: "2026 for me is going to be the year of Typescript. I'm going to learn it. I'm going to work with it in every project." #### ⏱️ [05:45](https://youtu.be/S7iz-lSkoh8?t=345) — [H2] Community Poll Results Discussion - Key idea: Audience split between JavaScript and TypeScript content preferences - Evidence: "It's still 50/50. I should have taken this. Why not both out?" #### ⏱️ [08:20](https://youtu.be/S7iz-lSkoh8?t=500) — [H2] React and WordPress Block Development Resources - Key idea: Recommending learning path for React in WordPress context - Evidence: "I would learn a little bit of React for sure... go to somewhere like the block editor handbook" #### ⏱️ [12:15](https://youtu.be/S7iz-lSkoh8?t=735) — [H2] WP Rig Plugin Discussion - Key idea: Community member seeking feedback on WP Rig's block building system - Evidence: "WP rig now has a block building system in it based on create block" #### ⏱️ [15:30](https://youtu.be/S7iz-lSkoh8?t=930) — [H1] Paul Baron Joins Stream - Key idea: First successful viewer call-in with audio/video setup - Evidence: "Paul, are are you there, sir? Okay, I can see you, Paul, but I can't hear you." #### ⏱️ [18:45](https://youtu.be/S7iz-lSkoh8?t=1125) — [H1] Code Snippet Management Plugin Proposal - Key idea: Paul presents plugin for managing code snippets with security considerations - Evidence: "Managing insertion of code snippets... we split it up and you know we can actually control what is" #### ⏱️ [25:10](https://youtu.be/S7iz-lSkoh8?t=1510) — [H2] Security Concerns in Snippet Management - Key idea: Discussing risks of arbitrary code execution in WordPress plugins - Evidence: "What would keep somebody from putting a two some script tags with some malicious code in there?" #### ⏱️ [28:30](https://youtu.be/S7iz-lSkoh8?t=1710) — [H2] Troy Joins for Caching Discussion - Key idea: Second viewer joins to discuss server optimization and caching - Evidence: "We were just looking at implementing uh Surge on our servers just to get some some better full page caching" #### ⏱️ [32:45](https://youtu.be/S7iz-lSkoh8?t=1965) — [H2] Nonce Caching Problems Solution - Key idea: Addressing nonce expiration in cached forms using JavaScript - Evidence: "Load the page and then run JavaScript immediately to update portions of the page that need to be updated" #### ⏱️ [38:20](https://youtu.be/S7iz-lSkoh8?t=2300) — [H1] TypeScript Implementation Challenges - Key idea: Demonstrating custom type declarations for WordPress blocks - Evidence: "In WordPress for example in our blocks package there's no proper types" #### ⏱️ [42:15](https://youtu.be/S7iz-lSkoh8?t=2535) — [H2] Totally TypeScript Course Review - Key idea: Learning TypeScript through structured online course - Evidence: "I'm taking this course... Totally TypeScript by Matt PCO" #### ⏱️ [45:50](https://youtu.be/S7iz-lSkoh8?t=2750) — [H1] WordPress Core TypeScript Integration Discussion - Key idea: Plans for adding TypeScript support to WordPress core packages - Evidence: "I think we need it. I'm actually working on helping to get that done" #### ⏱️ [52:30](https://youtu.be/S7iz-lSkoh8?t=3150) — [H2] Community Perspectives on TypeScript Adoption - Key idea: Discussing community division on TypeScript in WordPress - Evidence: "There are Typescript enthusiasts... then there's this other side from Twitter that's oh no... they're following butterflies" ## 📚 References - [WP Rig GitHub Repository](https://github.com/wprig/wprig) - [Block Editor Handbook](https://developer.wordpress.org/block-editor/) - [Totally TypeScript Course](https://totaltypescript.com) - [WordPress Core TypeScript PR](https://github.com/WordPress/gutenberg/pull/[MISSING]) ## 🗣️ Paraphrase - Ryan experiments with interactive streaming by allowing viewers to join via Twitch call-ins, creating a collaborative development environment - The technical discussion centers on implementing TypeScript in WordPress block development, addressing missing type definitions in core packages - Community members present various plugin concepts and development challenges, highlighting the collaborative nature of WordPress development ## 📰 Newsletter **Interactive WordPress Development: Exploring TypeScript and Community Collaboration** This week's stream showcased an experimental approach to developer education through interactive broadcasting. The combination of live coding, community participation, and real-time problem-solving demonstrates new possibilities for WordPress developer engagement. Key highlights include practical TypeScript implementation strategies for WordPress blocks and community-driven plugin development discussions. The interactive format allowed for immediate feedback and collaborative problem-solving. **Practical Applications:** - TypeScript integration strategies for WordPress development - Security considerations in plugin development - Caching solutions for dynamic content Resources: [Learn WordPress](https://learn.wordpress.org/), [Block Editor Handbook](https://developer.wordpress.org/block-editor/), [TypeScript Handbook](https://www.typescriptlang.org/docs/) ## ✅ Action Items #### DevRel - Developer advocacy: Document TypeScript adoption patterns for WordPress community - Education: Create TypeScript learning path for WordPress developers - Developer experience: Address missing types in WordPress core packages - Community management: Facilitate interactive streaming for developer engagement #### WordPress - Core: Progress TypeScript integration in block packages - Core Performance: Address caching challenges with dynamic content - Community: Support interactive formats for developer education - Documentation: Create TypeScript migration guides for plugin developers - Plugins: Establish security guidelines for code snippet management plugins #### Community - Contributors: Engage in TypeScript adoption discussions - Ecosystem: Balance innovation with backward compatibility concerns ## 🧪 Hypotheses - Interactive streaming formats increase community engagement and learning outcomes - TypeScript adoption in WordPress core will improve developer experience without fragmenting the community - Security-conscious plugin development requires balancing functionality with safety measures - Real-time collaborative problem-solving accelerates learning for participants and viewers ### 📊 Methodology - A/B testing of traditional vs interactive streaming formats for engagement metrics - Survey WordPress developers on TypeScript adoption barriers and benefits - Security analysis of code snippet management approaches in WordPress plugins ### ❓ Questions - How can WordPress balance TypeScript adoption with accessibility for new developers? - What security frameworks should guide plugin development for code management features? - How do interactive streaming formats compare to traditional documentation for developer education? ### 🔮 Future Research - Long-term impact of TypeScript adoption on WordPress plugin ecosystem - Effectiveness of interactive streaming for technical education - Community response patterns to major technological shifts in open source projects ### 💡 Implications - Practice: Developers need strategies for gradual TypeScript adoption in existing projects - Policy: WordPress core needs clear guidelines for TypeScript integration timeline - Security: Code snippet management plugins require rigorous security review processes - Education: Interactive formats may supplement traditional documentation effectively - Community: Technology adoption discussions benefit from inclusive dialogue approaches ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade (technical content with accessible explanations) #### 👀 Visual learners - Present: Live coding demonstrations, plugin interface mockups - Improve: Architecture diagrams for TypeScript integration, visual security flow charts #### 🔊 Aural learners - Present: Live discussion, verbal explanations of concepts - Improve: Structured audio segments explaining key concepts #### 🗣️ Verbal learners - Present: Interactive Q&A, definition of technical terms - Improve: Glossary of TypeScript terms for WordPress context #### 🧩 Kinesthetic learners - Present: Live coding exercises, hands-on problem solving - Improve: Step-by-step TypeScript migration guides, interactive tutorials #### 🧠 Logical learners - Present: Problem-solving sequences, technical decision trees - Improve: Flowcharts for TypeScript adoption process, security decision matrices #### 🧑‍🤝‍🧑 Social learners - Present: Community discussion, viewer call-ins, collaborative problem solving - Improve: Structured peer review processes, group learning challenges #### 🧘‍♀️ Solitary learners - Present: Individual coding challenges, self-paced course references - Improve: Personal reflection prompts, self-assessment tools #### 🌿 Naturalistic learners - Present: Evolution of technology adoption patterns - Improve: Ecosystem thinking about WordPress development environment ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Live verbal descriptions of visual code elements - Improve: Alt text for code snippets, descriptive variable naming #### Keyboard navigation - Present: Live coding demonstrates keyboard-focused development - Improve: Keyboard shortcut documentation, navigation guides #### Contrast and readability - Present: High contrast code editor themes - Improve: Consistent color coding standards, readability guidelines #### Media and captions - Present: Live audio discussion with multiple speakers - Improve: Auto-generated captions, transcript availability ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global community participation through streaming platform - Improve: Multi-timezone considerations, international case studies #### Inclusive language - Present: Technical discussions using accessible terminology - Improve: Avoiding insider jargon, defining technical terms consistently #### Neurodiversity support - Present: Multiple input methods (audio, visual, text chat) - Improve: Structured agendas, clear topic transitions #### Representation - Present: Multiple community members contributing expertise - Improve: Diverse technical perspectives, inclusive participation guidelines ### ✅ Logical Validity #### Strong reasoning - Deductive strength: TypeScript benefits identified through specific WordPress development challenges - Inductive strength: Community patterns extrapolated from individual developer experiences - Causal reasoning: Security concerns linked to specific plugin functionality risks - Analogical strength: Comparing WordPress TypeScript adoption to other framework migrations #### Fallacies - Appeal to novelty: Assumption that newer technology (TypeScript) is inherently better - False dichotomy: Framing TypeScript adoption as all-or-nothing decision #### Tone of voice - Overall tone: Collaborative and experimental, encouraging community participation while acknowledging technical challenges ### 🛡️ DARVO Analysis - Deny: No denial patterns observed - Attack: No attack patterns observed - Reverse victim/offender: No reversal patterns observed - Emotional cues and rhetoric: Positive, collaborative tone focused on learning and community building ## 🎯 Conclusion This experimental stream format demonstrates the potential for interactive developer education within the WordPress community. The combination of live coding, community participation, and real-time problem-solving creates engaging learning opportunities while addressing practical development challenges. The TypeScript discussion highlights the ongoing evolution of WordPress development practices, balancing innovation with accessibility. The security considerations raised around plugin development underscore the importance of careful design in extending WordPress functionality. Moving forward, interactive formats like this could supplement traditional documentation and conferences, providing more accessible ways for community members to participate in technical discussions and collaborative problem-solving. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Interactive streaming improves developer community engagement > [!quote] [Inviting anyone to join my stream? What could go wrong?!](https://www.youtube.com/watch?v=S7iz-lSkoh8) by [[Ryan Welcher]] via [[Twitch]]. Published 2026-01-01. Accessed 2025-01-15. > "This is the first time I set this up, so this is fun. But I want to make sure that you can actually hear what Paul's saying" Demonstrates experimental approach to developer education through real-time collaboration. [view highlight](https://youtu.be/S7iz-lSkoh8?t=930#H1) #xref #streaming ID:rw_001 ### [H2] TypeScript adoption requires gradual integration strategy > [!quote] [Inviting anyone to join my stream? What could go wrong?!](https://www.youtube.com/watch?v=S7iz-lSkoh8) > "I think we need to get the types in in there first, get in and get that passing and then starting to add these types to the codebase" Shows practical approach to large-scale technical migrations in open source projects. [view highlight](https://youtu.be/S7iz-lSkoh8?t=2750#H2) #xref #typescript ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Security concerns scale with plugin --- ## Full Transcript [05:06] Hi everyone. How's it going today? [05:12] Welcome to the first game. I don't know [05:15] watching right now. Cool. If you were [05:26] all right, if you're here, say hi. Um, [05:29] I'm trying something new. Trying [05:31] something new today, which I don't know [05:34] if this is going to work out. There's [05:35] this thing in Twitch called viewer [05:36] calling. People can actually jump up. [05:40] You know what? It's really hard to hear [05:41] me when my microphone's way over there, [05:43] I'd imagine. I don't know what I'm [05:44] talking about. Okay. [05:47] Do I have audio? Let's check. Hello. [05:49] Check one, two. Check one, two. There we [05:51] go. All right. So, anyways, as I was [05:54] saying before, um, today is first stream [05:58] of 2026. Pretty excited to be back. Had [06:00] a great holiday. Um, and I uh I'm doing [06:04] something new. I might do this every [06:05] week. We're going to see how it goes [06:07] today. [06:08] Very Is the audio still very soft on [06:11] your side? I I uh realized my my [06:14] microphone is really really really far [06:16] away from my face there. So, it's [06:18] probably what it was. But audio should [06:21] be pretty crispy now. Um, let me know if [06:25] There we go. Kev XP, [06:27] how's it going? [06:30] Oh, you know what? I I didn't do [06:34] didn't connect my Firebot. There we go. [06:37] That's why I can't see anybody. Okay, so [06:39] Kevin, you're not going to get the shout [06:41] out because my Firebot wasn't connected. [06:44] Yeah, thanks. Thanks, Techies Review. [06:46] Uh, appreciate that. Um, I had my [06:48] microphone in the wrong place. Oh, [06:50] there's my dog barking. You can hear [06:52] him. There he is. [06:54] So, um, anyways, there's this thing in [06:58] Twitch called viewer call-ins where if [07:00] you have a tw a Twitch account, I think [07:01] you have to be phone enabled, uh, you [07:04] can call in and we can chat. So, if [07:07] you're [07:08] ruined your night Oh, it is night. Well, [07:10] Kevin, why don't you just jump on the [07:12] old Twitch account and come on in to [07:14] your [07:20] >> There it is. I turned the thing on and [07:22] then it realized that you chatted. So, [07:23] there you go. There's a shout out for [07:24] Kev XP. Um, [07:30] nice. You can sleep tonight. Oh, you [07:32] can't sleep tonight until you do a [07:33] viewer call in. Kevin, go get on your [07:35] Twitch channel. I know you got one and a [07:38] microphone and do a call in and you can [07:41] come on the stream with me. You can [07:43] talk. Call in. Do Yes, we'll debate [07:46] whatever you want to debate. Typescript. [07:48] You can tell me what I'm doing wrong [07:49] with Typescript. Uh 2026 for me for me [07:53] is going to be the year of Typescript. [07:54] I'm going to learn it. I'm going to work [07:56] with it in every project. Um and it's [08:00] going to be fun. [08:02] That's my plan. [08:05] So yeah, [08:08] tell me C. Actually, Kevin, if you're [08:09] interested, jump on. What's the vote [08:11] count? The vote count. Oh, did you were [08:13] Were you the one that voted or two that [08:16] voted? Let's see. [08:19] Let's take a look here. Uh where are my [08:21] posts? The vote count right now is [08:24] sitting at two votes. One for [08:26] JavaScript. If you haven't I I would [08:29] love um [08:32] some uh you were first. Nice. Well, [08:36] Kevin, you are first in my heart as [08:38] well. So, that is the the the poll to my [08:42] YouTube account that I just I'm just [08:44] trying to get an idea of what people [08:45] want to see on my um channel here. So if [08:48] you're interested, please hit that link [08:51] and go tell me what you want to see. If [08:53] there's something that's not on like [08:54] it's very generic. It's like do you want [08:55] JavaScript [08:58] now? Who? Yeah. Well, I know I know [09:00] which which vote yours was, Kev. [09:03] U JavaScript, TypeScript, PHP focused [09:06] stuff. I was thinking, you know what, [09:07] there's a lot of a lot of knowledge out [09:09] there and WordPress that um um people [09:14] who've maybe been around for a while. [09:17] I'm I'm not the other one. I didn't [09:18] vote. Um [09:21] already know. So like oh tech techies [09:24] review also curious to start learning [09:25] about React and WP just like PHP in the [09:27] good old days. What would be your go-to [09:28] sources? Um this is a good question from [09:33] uh although I can't highlight it. It's [09:35] in um it's in YouTube uh techies review. [09:38] You're more than welcome to just stay [09:40] over there in YouTube but the chat [09:41] mostly happens in in Twitch. So if [09:43] you're interested come on over. But the [09:45] question is, curious to start learning [09:47] React WP, just like PHP in the good old [09:49] days. What would you what would be your [09:51] go-to sources? Well, I would learn a [09:52] little bit of React for sure. If you're [09:55] not familiar with React at all, you [09:58] there's a million courses out there just [10:00] to get up to speed on React. And after [10:02] that, I would probably go to somewhere [10:04] like the block editor handbook and like [10:07] the getting started guide. So this is [10:08] going to teach you the the fundamentals [10:10] of block de uh uh development which is [10:12] kind of where the majority of [10:15] um JavaScript development is happening [10:17] inside of WordPress. Um, so this is a a [10:21] good place to go get started and you [10:23] could just uh you know the other thing [10:25] is you can just hang out here. Just uh [10:26] subscribe to my channel, follow me on [10:29] Twitch and Twitter and wherever and [10:31] we'll talk about stuff because this is [10:32] what we do here is we talk about [10:34] WordPress and uh and React, JavaScript [10:37] and React and stuff like well not so [10:39] much React more like how WordPress react [10:42] and JavaScript all kind of intersect. [10:44] That's sort of the idea behind it. Um, [10:47] Kevin, I still don't see you in my [10:49] callins. [10:53] Anyways, um, yeah. All right. So, [10:59] let's let me refresh this. You six [11:02] votes. Oh my god. Are you kidding me? [11:04] It's still 50/50. I should have taken [11:06] this. Why not both out? I should have [11:08] done that a little bit different. Um, so [11:12] lots of people want to see JavaScript [11:13] type crypt. More people want to see [11:15] both. So that doesn't help me at all. [11:17] It's my own fault. [11:19] All right. Well, speaking of Typescript. [11:22] Ah, thanks Techiey's review. Appreciate [11:24] that very much. Um, I do have combined [11:28] chat. Uh, but some of my chat I I can't [11:32] I I would highlight your your question [11:34] on the stream, but I only get uh chat [11:37] coming in um from um Twitch in there. [11:44] WP rig now has a block building system [11:47] in it based on create block. Curious [11:49] about your thoughts on it. [11:52] H Arbog 17. [11:56] WP rig. [11:58] WP rig. Why does that sound super [12:00] familiar to me? I think I know. What is [12:03] WP rig? [12:07] Let's take a look. [12:12] Wait a minute. [12:22] Is there get up for this? [12:43] Where's the [12:48] repository? Ahation. [12:54] Where's the repository? [12:56] Where's the repository? [13:08] Oh, Rob. Rob. Yes, you asked me about [13:11] this before. I'm sorry. I owe you some [13:14] feedback on this. Um, [13:17] yeah, you reached out to me. I'm sorry. [13:18] There's a uh I need to I need to do a [13:22] dive into this. This is something that [13:24] uh Rob uh Ruiz who's uh spoken with me a [13:27] number of times and asked me about this. [13:29] Um and I owe him feedback on it. Um, I [13:33] think like at a high level, I think [13:34] anything based on create block is the [13:36] right way to go because if you're using [13:37] create block, you're going to be using [13:39] what like the industry is using. So [13:40] that's that's a great first step. That's [13:42] my opinion. That's that's for sure. This [13:44] looks like it's super robust. It's a [13:47] blog article and documentation page. [13:48] Let's take a look. Blog documentation. [13:51] Boom. Documentation. Bootstrap CSSEX [13:55] browsers CSS JavaScript and custom [13:58] blocks including scripts. [14:01] Oh, nice. So, you have Okay, cool. [14:05] cleaning your code with PHP editing. [14:09] This is great. I'm I'm gonna I I'm going [14:11] to read this and I'm going to get back [14:13] to you on this and I do apologize for [14:15] not doing that sooner. So, um I'm just [14:19] uh kind of lazy. Morning Paul. How's it [14:22] going, Paul? [14:24] Um so, like I said, I've got viewer [14:26] callins active. So, if anyone's on [14:27] Twitch and they want to jump on stream [14:29] and just say, "Hey, you don't have to [14:30] have anything to talk about. We we we [14:31] can just, you know, chat. Nothing. It's [14:34] not, you know, nothing formal. It's all [14:36] good. Um, we're uh we're just hanging [14:40] out." But any anyhow, okay, so WP Rigg [14:43] is is a thing that I I I need to check [14:45] out. I'm going to check that out. I I [14:46] promise you. Um, I'm also looking for [14:51] votes on my YouTube channel. If you go [14:52] to posts here, you can tell me what you [14:56] want to see in 2026 or just give me an [14:58] idea of what we're doing there. Um, oh, [15:03] Paul Paul Baron coming in. All right, [15:07] let's see. I've never done this before. [15:08] Going to see what happens. I'm going to [15:11] invite you, Paul. [15:13] Oh, where'd you go? [15:24] Oh, okay. Here we go. All right. Paul, [15:27] do you Paul, do you have a camera? I [15:29] can't hear you or anything. So, [15:34] show on stream. Here we go. Yeah, sure. [15:37] Here we go. Paul, [15:40] there he is. [15:43] Am I streaming outside? No. Paul, are [15:45] are you there, sir? [16:00] Okay, I can see you, Paul, but I can't [16:01] hear you. [16:02] >> One, two, three, four. [16:04] >> Oh, there you are. [16:06] All right, [16:08] cool. [16:10] Um, [16:12] okay, chat, you tell me. Can you hear [16:14] Paul? [16:16] What are we looking at? Oh my Oh, what's [16:17] this? Paul's [16:20] Paul's linking his his Twitch thing. Oh, [16:24] I don't want that. That's okay. All [16:25] right. So, you're on stream there, Paul. [16:27] I don't know if you can see yourself or [16:28] not, but uh say hi to everybody and and [16:31] chat, let me know if you can hear this. [16:32] This is the first time I set this up, so [16:33] this is fun. But I want to make sure [16:34] that you can actually hear what Paul's [16:35] saying, and I can uh I can boost the [16:37] audio if that's needed. [16:41] Paul, can you say something for me? [16:57] Troy Chaplan. [17:02] >> Chap. [17:06] >> It's Troy Chaplan. All right. What do we [17:08] What's the luck? I am not streaming [17:10] outside. I'm just uh I need a haircut [17:12] and so I decided to wear a hat today. [17:15] Managing insertion of code snippets. [17:24] Easy way out. Yeah. Yeah. Yeah. For [17:26] sure. [17:28] Um [17:31] Paul, I don't know. Are you hearing me? [17:33] Okay. [17:40] I don't know what's going on with the [17:41] audio. It popped into another window. [17:56] All right. I don't know if Paul's [17:57] hearing me or not, but if he is, cool. [17:59] So, anyways, what what is this? What is [18:01] this? So, Paul's talking about this is a [18:03] plug-in proposal for insertion of code [18:05] snippets. Interest [18:09] interesting. [18:16] Oh, I can kind of hear you, Paul. You're [18:18] pretty quiet, though. Let me see if I [18:20] can boost your audio here. [18:36] Yeah, we opened up very quiet [18:40] channel. Okay. [18:42] >> And I can see [18:42] >> Hey, Marcus Bernett. How's it going? [18:51] All right. Well, Paul, you're welcome to [18:54] hang out in the stream here with us [18:55] today. We'll see how how it goes. So, [18:57] what is this thing we're looking at? [18:59] This is a plug-in proposal for managing [19:00] snippets. So, I know there's a ton of [19:02] plugins that do this, right? [19:05] Um, [19:09] >> yes, but they all it's a single every [19:11] single one of them is like here's the [19:17] for Oh, but the echo is horrible. [19:23] >> Sorry. So, you're saying that Let me Let [19:26] me just maybe turn my my music off. [19:28] Individual plugins tend to support [19:32] um [19:35] just one snippet. [19:41] >> Oh, I see what you're saying. [19:42] >> So, this idea is the you can take the [19:45] base snippet. Yeah. [19:51] >> And just paste it straight into this uh [19:54] interface. We split it up. we make a [19:58] settings page for those values. [20:01] Um and and then we can control where on [20:06] the page it gets gets and how it gets [20:09] added. [20:14] >> Right? Okay. [20:15] >> So we can then optimize the placement of [20:17] the snippet. we maybe combine snippets [20:20] together [20:22] and [20:24] and if there are options for them. So [20:27] like a lot of the chat bots have like [20:31] colors, icons, [20:34] things like that. We [20:36] >> have an interface where people can [20:37] actually adjust their look and feel. [20:43] >> Right. Okay. [20:45] And [20:47] so so also I'm going to s suggesting we [20:51] support like JSON's JSON JSON file so [20:54] people can put a JSON lump in yet to [20:57] describe [20:59] um and that would generate a settings [21:02] page which people then could fill in. We [21:04] could have a collection of JSON file [21:07] JSON configurations that we preload and [21:11] you just like click a button to [21:14] to end that snippet. [21:18] >> It's just an idea. [21:19] >> Okay. [21:20] >> Yeah. [21:25] Script blocks are all lots of options to [21:26] be managed. So I mean I think I think [21:28] probably like and and [21:32] like Weston Weston's comment here is is [21:35] sort of what was the first sort of [21:37] comment that I had as well. I mean, this [21:38] is just my, you know, initial reaction. [21:40] Like, I have I hold no sway over whether [21:43] things move forward or not, but I would [21:45] be concerned about like if being able to [21:48] insert snippets, how you can control the [21:50] security around that. [21:55] You know what I'm saying? [21:58] because we split it up and you know [22:05] >> we can actually control what is [22:11] >> sorry say that again Paul there was a [22:12] there was a a thing running over top you [22:14] there and [22:17] >> yeah and and is this is more this is [22:21] safer than just allowing someone to drop [22:25] JavaScript into the head [22:28] Right. But how is it? But okay, maybe I [22:31] don't understand the implementation [22:33] possibly. Let me just read this again. [22:35] So create settings allow management of [22:37] code simp control when and how they were [22:39] added to rendered HTML. Add a sending a [22:42] settings page that enables adding [22:44] selecting script of script blocks and [22:46] allows the options to be managed. There [22:48] are lots of instructions. [22:54] Okay. [22:56] So, okay. So, you're creating a a [22:58] location to paste the snippet, then [23:00] parse it, store it as a as a CPT or [23:02] whatever. Create settings that control [23:03] how it is loaded, adjust it. We also [23:06] allow block JSON to be pasted as well to [23:08] create a setting with options for the [23:11] scripts that allow part of the settings [23:13] control. [23:17] Okay. [23:19] Part of the settings control where the [23:20] sims are added to the page or bundled [23:21] into larger external file. Okay. So, [23:24] >> so the JSON describes the options for [23:27] the snippet, [23:31] >> right? So, what kind of like So, what [23:36] would be an example? So, you have a you [23:37] have a like so like and and again I may [23:40] not be just not grocking this properly, [23:42] but at the end of the day, this sounds [23:44] like the ability to insert arbitrary [23:47] code and then have it rendered in [23:50] certain places. That's a that's a super [23:52] distilled like you know no nuanced [23:56] um sort of description of that. Is that [23:59] accurate? [24:03] >> A li a subset of [24:06] code um not anything [24:10] >> right? But how how so how would how [24:12] would we control how would you control? [24:15] >> So someone wants to put in a like they [24:17] want to they want to drop a scripty [24:24] >> heyy [24:26] >> oh my god it's the longest [24:28] >> that is the longest one so far it's [24:30] crazy. Uh no you're not interrupting. [24:33] It's all good. It was an automated thing [24:34] I did. Um, [24:36] so like what would keep somebody from [24:38] putting a two some script tags with u [24:42] some malicious code in there? Like how [24:45] how would that be validated or would it [24:47] be validated I guess is the question. [24:54] >> Um, probably it is somebody could do [24:59] that. They were clever, but we could [25:01] probably also put some in that certain [25:04] things are not not allowed is valued [25:07] because we actually pass the context. [25:11] Um, [25:14] >> right. Okay. I mean, that's a problem. [25:16] >> How is this how is the risk any greater? [25:23] >> Sorry, go ahead. And [25:25] >> someone just pasting it into the header [25:27] or the footer. [25:30] Um, it's not it's not I think it's I [25:33] think I don't think it's any greater [25:35] risk. I think it is um just core [25:38] approved risk if that makes sense. [25:41] >> If that's if if the intention is for [25:43] this to be part of WordPress core, then [25:45] we're giving people license to shoot [25:47] them in the foot to shoot themselves in [25:48] the foot by just dropping [25:52] any random snippet. I mean, again, I I [25:55] don't know the full scope of this, so [25:57] I'm I'm not saying no, it's a bad idea. [25:59] I'm just like wondering, you know, [26:01] >> it's it's a mad idea at the moment. [26:04] >> I'm just [26:08] >> Yeah. Okay. Well, cool. Well, I mean, I [26:10] don't think it's impossible to do this, [26:13] >> you know? I don't think I think I think [26:15] it's it's sort of like [26:16] >> it's the same reason why SVGs are so [26:19] controversial in core, I think. Right. [26:21] Um because it's very hard to make them [26:24] safe. [26:25] >> Yeah. [26:26] >> Because there's so many permutations and [26:27] iterate and and options and and things [26:29] and like you know so I think we're kind [26:32] of treading in that territory. But [26:34] what's Kevin saying? You totally tell me [26:39] >> you can have custom GS runtime val code. [26:41] I do it with my CSS plugin. Yeah. So [26:43] that's I mean there I think there's [26:45] technical solutions to this for sure. Um [26:48] I think there's two questions. one is it [26:50] is it a plugin or is it part of core? [26:52] That's probably the the the big one. And [26:55] if it's part of core, that's a huge uh [26:57] conversation. It probably should start [26:59] out as a feature plugin anyways, right? [27:02] Like that's [27:03] >> Yeah, [27:04] >> that would be my [27:05] >> Yeah, [27:06] >> you be able to iterate on it and to see [27:08] if it becomes use. [27:10] >> Yeah, for sure. [27:12] >> Yeah. and.org would probably never [27:14] accept a plugin like that. But if the [27:15] intention is is is not plugin like that. [27:21] >> Uh probably the JS runtime I think is [27:24] what Kevin's talking about. [27:27] Oh yeah, I I think Kevin's talking. So [27:29] he has a J a custom JS runtime that [27:31] validates the code. He has that with a [27:33] CSS plugin, right? And uh and I think [27:37] he's referring to.org not wanting to [27:39] accept a plugin that does that. not [27:41] necessarily what you're trying to do, [27:42] but like what what he was doing. He said [27:44] took him took me a lot of effort to get [27:46] the the CSS. So, um, but I mean, if it's [27:50] a feature plugin, that's not [27:53] >> I don't It's a cool idea. It's a cool [27:55] idea. [27:59] >> Paul, you've always got cool ideas every [28:01] time I talk to you. Like, hey, let's [28:02] parse all schema. [28:05] >> What's that? [28:08] >> Yeah. Um and and we have a collection of [28:12] like buttons that you can like search [28:14] for snippets that are formatted [28:18] Jason hand on it and so you could like [28:24] select your chatbot you want to do [28:27] creates a setting page. You fill the [28:30] values in default values put your key in [28:35] and bingo it works. And we can do things [28:38] like putting it in the footer wherever [28:40] we can, [28:44] >> right? [28:45] >> Because the instructions always say put [28:47] it in the head. [28:56] >> Yeah. Yeah, I think that makes sense. [28:58] Having a plug would be better, though. [28:59] Yeah. Kind of like a plugin. Yeah. I [29:01] mean, it sounds like um I mean, you [29:06] know, you just got to get the Have you [29:08] started any work on it or is this just [29:10] just an idea at this point? [29:14] >> No. Um I want to knock it around. [29:17] >> Oh, you made a wise choice, my friend. [29:20] >> Thanks for the sub, Marcus. Appreciate [29:22] you. Um that's awesome. Um yeah, we're [29:27] doing viewer comments, too. So, if [29:29] anyone else if all you need is a Twitch [29:30] account and you need to be watching and [29:32] then you can you can come on in and we [29:34] can we can we can discuss whatever you [29:36] want to talk about. There is a bit of a [29:38] delay though I think when I talk and [29:40] then Paul you're you're hearing it a few [29:42] seconds after me. So, it's sort of like [29:43] when you see the the news anchors in [29:45] another part of the world. So, I don't [29:47] know. Maybe that's just way the way I [29:48] have it set up. So, we'll figure it out. [29:50] But, um yeah. So, if you want to jump [29:53] on, just go do a call in through Twitch [29:55] and you can come on talk with me and [29:57] Paul and whoever else wants to join, [30:00] chat about whatever. [30:06] What else you working on today uh these [30:08] days, Paul? [30:16] >> Um, still doing stuff on Matador Matador [30:19] jobs. Still doing business. I actually [30:23] Mhm. [30:25] >> I went and had a look at the schema.org. [30:28] Moved it forward a little bit. [30:31] >> Oh yeah, that's cool. [30:35] >> Uh yeah, there's a bit of a pull request [30:38] out there. Um [30:40] >> Oh, it's like is this on my repo? I [30:42] should just give you full access to it. [30:44] Hold on. [30:46] >> Yeah, it's a request to go to your repo. [30:50] Okay, let's see what we can do here. [30:54] Let's go take a look. [30:58] Did Did you fork it or like I can just [31:00] give you the the repository if you want. [31:02] What's the thing called? Uh [31:04] >> I forked it. [31:06] >> Oh, you forked it. Okay. [31:07] >> No, I prefer No, it's this one. [31:14] >> Oh, wait. Is is this the one? [31:19] >> Should I do a pull request? [31:21] >> No, I don't see a pull request. [31:24] Unless it's [31:25] >> Oh, let me do let me find do a pull [31:28] request so you can see it. [31:30] >> Yeah, you can defin I'll I'll I'll just [31:32] merge it. [31:34] YOLO. I'll do a YOLO merge. [31:40] All right, listen. Those folks that are [31:44] on the stream that are not calling in, I [31:46] want you to call in right now. Come on, [31:48] let's do it. Let's have fun. [31:51] You don't even have to go on camera if [31:52] you want. You can just do audio. [31:56] Paul's the only brave soul here. [32:00] Wow. Is this from two years ago? Oh my [32:02] god. [32:04] >> All right. [32:04] >> Is that Is that how long it's been since [32:06] since we [32:07] >> Yeah, it's a pull request now. [32:09] >> Is there Okay, let's take a look here. [32:11] you working here. Um, I I've got it [32:15] showing out the content, [32:18] but I haven't got [32:21] but I haven't got it doing the looping [32:23] because we need to [32:24] >> is this content object or a text field? [32:29] And so we need to down the the data [32:32] stack we've got so that we [32:37] end up at the native text or number [32:41] values. [32:44] Right. [32:47] >> Yep. [32:47] >> All right. [32:48] >> Um, so [32:49] >> but we're quite close. It really is [32:52] getting [32:56] >> Yeah, I haven't really uh I I I haven't [32:58] really looked at it in a while. Where [33:00] did we end up with this? I think we [33:01] ended up with like Did we get an admin [33:04] page? I don't remember how how how this [33:06] all worked out. [33:08] >> There's an admin page. Um, and I've made [33:13] a [33:16] block that that starts to show the [33:19] inputs. [33:24] >> Oh, right. And doesn't it like Oh my [33:26] god. Did Did you Did you do this or did [33:28] I do this? I don't think I did this. Did [33:30] I do this? [33:32] >> Oh, maybe I did. I don't. [33:34] >> So, that's this is generating patterns, [33:37] right? [33:38] >> I can't remember. I didn't remember. So, [33:41] selected patterns. [33:43] >> Holy jeez. [33:46] >> Um, [33:47] >> and some of this is AI generated. So, [33:51] >> oh yeah. Yeah, that's probably that's [33:54] probably how I did it. If I did it [33:56] variations, we got on your index. We got [33:59] variations. [34:02] >> I did. [34:04] >> Oh, okay. [34:07] was there there must have been oh one [34:09] podcast I don't know cool well I hope [34:12] that this is something that uh carries [34:14] on that you're able to to work with [34:16] >> I would love to work more on this in [34:19] future [34:24] >> here oh right okay this is sort of like [34:31] plugin controls h interesting Coolio. [34:37] All right, I'm put my my music back on [34:38] if that's okay with you, Paul. Got to [34:40] have that heavy metal rocking. Um, [34:45] turn it down. [34:48] There we go. So, something I'm working [34:51] on right now, and I don't know why this [34:52] is doing this, but I'm working on um a [34:56] couple of blogs. So, like I said, this [34:57] is um this is me going just diving head [35:00] first into all things type T type [35:03] script. So, um, as we know the the the [35:07] blocks package, this is really annoying. [35:12] Come on. [35:14] Did this yesterday now? Now I know why [35:16] it's not doing that. Why can't I find [35:17] the name space react [35:21] or JSX or element? [35:24] >> You need to move me across the screen. [35:28] >> Oh. Oh, okay. Let me just uh let me just [35:32] uh change that like this. [35:35] How's that? There you go. Uh let's go [35:38] across. Nah, let's go over here. [35:41] >> There we go. [35:41] >> That out of people's way. [35:43] >> That's what we'll do. So, anyways, what [35:45] I've been working on is I have this [35:47] we're doing this project at uh from a [35:50] job where we're we're building like a [35:53] showcase of stuff for for Oh, Lord of [35:57] Blood. He's calling in. All right. [35:59] Hold on. Here we go. Let's see what [36:02] happens. [36:09] All right, let's see now. Better be [36:12] wearing a shirt. Lord of Blood. [36:15] Serge implementing our dev server. Oh, [36:17] boy. [36:19] All right. I don't know what what [36:21] happened there, but uh I invited you, [36:25] Lord of Blood. Get you in here whenever [36:27] you show up. I don't know. Takes seems [36:29] to take a second. So, this is my first [36:31] time doing it. We're all right, Troy, [36:33] get your Twitch account open and jump on [36:34] the call here, man. Let's do it. Let's [36:37] do it. Y'all can tell me what I'm doing [36:38] wrong with with my TypeScript. [36:41] Oh, there's Troy right there. All right, [36:42] here we go. Oh, this is getting crazy. [36:44] We might have too many people. I'm [36:47] excited. I don't know where you're going [36:48] to show up. I'll probably have to move [36:49] move this around. [36:51] Um, anyways, Kevin, you'll know why. [36:54] Okay. So anyway, so in WordPress uh for [36:58] example in our um in in our blocks [37:01] package there there's no proper types, [37:03] right? So we're running into some [37:05] problems there. So uh like so [37:12] annoying. Um [37:14] so to get around doing this I' I'm I'm [37:17] doing my own types. I'm I'm declaring a [37:19] module and I'm adding all of my types in [37:21] there. Oh, there's Troy. [37:23] Let's just see. Previewing. [37:31] All right. I'm going to just push you to [37:32] the call there. [37:35] Where's Troy? Oh, better move you guys. [37:37] Uh maybe I'll put you across the top. Is [37:40] that There we go. [37:44] Troy, are you talking? [37:54] I think [38:05] >> Oh, there he is. I see you, Troy. Can I [38:07] hear you, though? That's the question. [38:08] Here, I'm turn my my my music up here. [38:23] Troy, can you hear me? Okay. Can you [38:26] hear me? Okay, Troy, [38:28] >> I can. Can you guys hear me? [38:30] >> There we go. Okay, I think I know what I [38:32] was doing wrong. I can hear you. Um, I [38:35] think chat can hear you. Just go ahead [38:37] and talk for a sec. [38:39] >> Hello. [38:40] >> Yeah. Okay. I think I think the problem [38:42] is you're getting Yeah. All right. So, I [38:45] didn't set this up properly. Lord of [38:47] Blood, where are you? I don't see you in [38:49] there. Okay. What What was happen? So, [38:50] I' I've got this window uh behind the [38:53] scenes here, and you all show up o o [38:55] over here and stuff, and I had my my mic [38:57] muted, and I think what was happening [38:58] was you're hearing me delayed through [39:00] the through the the the stream. And so, [39:03] I I need to turn my mic on here so y'all [39:05] can can uh can hear me properly, I [39:09] think, because there's no delay now, [39:10] right? [39:12] Doesn't seem to be, but I don't see your [39:14] face. So, I can't see if there's a delay [39:15] or not. [39:18] >> Oh, you can't see my face. [39:20] >> No, I can I can see Paul, but you're [39:22] like It looks like your video is off. [39:24] >> You're You're responding almost [39:25] immediately after I'm I'm talking, which [39:27] which was not the case with Paul because [39:28] I think hearing me through [39:31] >> the Twitch pop up. [39:34] >> This is the the stream together thing [39:37] that I'm in. So, like I I manage this. [39:39] You can. Yeah. A countdown from five. [39:42] Well, if I turn my my video on, you'll [39:44] you'll see me. Don't send. [39:47] >> You'll see me. You'll see myself. And we [39:49] don't need that. [39:50] >> Nobody needs that. You can already see [39:52] me. Um, but Lord of Blood, where you at, [39:55] man? I saw you in there. And then did [39:58] you get nervous? [40:05] If it turns up turn the video in the [40:06] app, you'll lose. Yeah. [40:10] Well, I can turn my camera on, but I [40:11] don't want my camera on in the [40:12] background here because I'll I'll I'll [40:15] lose I I I did this before. Oh, I see. [40:18] Lord, uh I did this with um Justin [40:21] Tadlock once and I left my video running [40:23] in this thing and then it just basically [40:26] killed my bandwidth. So, I'm turning all [40:27] the videos are off in here, but I can [40:29] see you guys on stream through OBS and [40:32] I'm assuming you can see me and we can [40:33] talk. This is so much fun. [40:37] So, Troy, what was your meeting about? [40:41] >> Oh, we were just looking at implementing [40:43] uh Surge on our servers just to get some [40:45] some better full page caching going on. [40:48] >> Nice, nice, nice, nice, nice. Oh, um, [40:51] speaking of caching, I'm thinking about [40:53] doing a stream on uh word on old like an [40:55] old school topic that's near and dear to [40:57] my heart is uh uh like like caching. So [41:02] like the transient API, WP cache that [41:06] all that stuff. I'm [41:08] >> I don't know why. Oh, who is that? [41:11] >> Paul, do you just rip a fart? [41:13] >> Do do you include the ability, you know, [41:16] how to manage clearing caches? [41:20] >> Clearing what kind of caches? Like [41:21] transit caches or like [41:24] >> one of the problems I [41:27] >> um no page caches. So, one of the [41:30] problems I have is that I have a form [41:37] >> with a with a nons in it and that nons [41:40] um gets expired and the b is cashed. [41:47] >> Um [41:52] >> so fails. [41:54] >> Yeah, because it's cached. Um, can you [41:57] update the knots on the form submit? [42:01] Like can you [42:04] how your So is your form is your form [42:06] being done like is it being submitted [42:07] through like Ajax or submitted through [42:10] >> like a um [42:13] >> because if what you can do [42:15] >> submit back to the page [42:19] >> submit back to the page I mean you could [42:22] but your your knots is being generated [42:23] on the page right? So I don't I this [42:26] might be a dumb idea but with the way [42:28] that that we used to do it back in the [42:30] day when I was at Tenup and we were [42:31] working with VIP VIP has has extremely [42:35] aggressive page caching. So you couldn't [42:37] have anything on the page that that [42:39] >> that was like dynamic in the sense of [42:41] like user in information. So if you're a [42:43] logged in user you couldn't like show it [42:45] in PHP because it it would get cached. [42:47] So a lot of times what it would do what [42:49] we would do is we would load the page [42:51] and then run JavaScript immediately to [42:53] update portions of the page that need to [42:55] be updated based on the user. So you [42:57] could do something like that because [42:58] your knots is just it's stored in a in [43:00] an input field, right? Like it's just [43:02] it's stored in there. [43:03] >> So you could do something like that [43:04] maybe where the page loads and then once [43:07] it's loaded the knots is updated with a [43:09] like using Ajax where where you can [43:11] generate the knots on you know and then [43:14] insert it that way. I'm I'm I'm not I'm [43:16] not sure. It's been a while since I've [43:17] done that. I know that this this is a [43:20] problem that has been solved. Troy, what [43:23] do you think? [43:25] >> We have got some code doing that kind of [43:28] >> Yeah. [43:32] >> Yeah. This is not an area that I'm [43:34] really overly knowledgeable on. So, I'm [43:36] not going to put my foot in my mouth and [43:38] say something completely incorrect. [43:39] >> Do it, man. Put your foot in your mouth. [43:41] Do it. Just do it. Just um expose all of [43:44] your nonsas in the console. That's the [43:46] way to do it. Just have them all out [43:48] there and all your API keys. That's [43:52] That's the That's the correct way of [43:53] doing it. [43:56] >> Yeah. Just put all the API keys up [43:57] there. Someone else do that so we can [43:59] use them. Yeah. [44:01] >> Exactly. Expose them to chat bots and to [44:03] AI. It's the way to do it, man. Telling [44:06] you. Um I I would try something like [44:09] that, Paul. Um because I don't like I [44:13] don't I mean [44:14] >> Yeah. [44:15] >> The thing is [44:16] The other part is that [44:17] >> really they're not truly numbers just [44:19] once in [44:22] >> sorry what's that [44:25] >> in matador jobs we have a a a background [44:29] task which updates a list of jobs every [44:32] 10 minutes [44:34] um and so [44:36] you need to clear caches regularly so [44:41] that the new jobs appear otherwise [44:43] recruiters get really confused Why isn't [44:46] my job showing on the page? [44:48] >> Yeah. No, no, no. That that totally [44:50] makes sense. Um, [44:55] >> yeah, I I I would I would probably try [44:57] to refresh that section of of the page [44:59] using JavaScript of some form, just [45:02] injecting the knots or or on form [45:05] submit. [45:06] >> Yep. [45:07] >> Before like before the or Yeah. Well, [45:10] yeah. I mean, you could do it with [45:11] JavaScript as well, but then I mean, you [45:13] need to have JavaScript enabled, but [45:15] which is like everyone's site, but you [45:16] could do something too that like when [45:18] the form button is is submitted, you [45:20] could get a refreshed version of that [45:22] knots and then and then and then submit [45:24] the form, you know. [45:27] I don't know. I feel like I'm [45:29] overthinking it. I feel like I'm [45:31] overthinking it. I am overthinking it. [45:33] The L the L is saying what? Nice to see. [45:35] I discovered people doing some stuff in [45:37] that [45:42] Sorry, you've got code doing some of the [45:44] stuff in the um in the submit process. [45:51] >> Yeah. No, I stopped because I start [45:52] hearing the echo. Um we we've got code [45:55] that's doing some JavaScript to do [45:57] refresh on. [46:00] >> Okay. [46:04] >> But it's never perfect. [46:08] >> Yeah. And I don't I don't really know a [46:10] ton about caching and and clearing and [46:13] all that stuff. But one of the things we [46:14] were looking at in the last couple of [46:15] days with the surge plugin was just just [46:18] testing to make sure like it it was cuz [46:20] it clears the cache for each individual [46:22] page as new content gets created. I [46:24] don't know by looking at that code is [46:26] something that you could pick up on from [46:27] there that might work to solve some of [46:29] the issues you're struggling with here. [46:37] >> Okay. Yeah, the the love's got a good [46:40] point, too, because I mean, if you have [46:42] an Ajax request that's generating that [46:44] for a non-logged user, then anybody can [46:46] just get nons for your site. So, it's a [46:49] little it's a it's a tough nut to crack [46:52] for sure. [46:53] >> Yeah. I'll drop the the link to that [46:55] plugin in the chat. [47:03] I saw this one a while ago. It's pretty [47:06] good plugin. [47:18] Do you have to cache the form? Like what [47:20] if you didn't what if you I I guess page [47:22] caching is controlled outside of your [47:25] the plugin, right? like it it like you [47:29] there wouldn't be a way to [47:31] to accurately say I don't want this I I [47:35] don't I I don't want this page cached [47:37] like the user would have to do it [47:38] because you because you could cache all [47:40] of the contents of the page using like a [47:42] transient [47:43] and cache the HTML so you're not doing [47:45] lookups like Crazy. [47:58] >> I'm not getting any audio. [48:00] >> Go back to your type script stuff. [48:04] >> Sorry. Were you not hearing me now? [48:06] >> No, I am now. [48:08] >> I wasn't before. [48:11] >> Okay. Um, cool. All right. Cool. Yo. Um, [48:16] anyways, yeah, so the TypeScript stuff [48:18] that I'm working on is uh basically [48:21] trying to solve the problem of not [48:22] having like um um [48:26] uh React, sorry, what am I saying? Uh [48:28] types and then trying to use types [48:31] because that's not really a thing that [48:32] you can do. Um so I'm doing this really [48:35] badly, I'm sure. But basically what I'm [48:37] doing is I'm converting everything to to [48:40] to type TypeScripts and then I'm just [48:42] I'm creating I'm sort of I'm declaring [48:44] the modules that that are missing types. [48:46] And this has actually been a really [48:48] little fun experiment because I'm I'm [48:50] trying to learn to learn all the good [48:53] stuff, right? Just want to say happy new [48:55] year. [48:58] Oh, sorry. Lord of Blood. Yeah, it' be [49:00] good to have you on. You're having [49:02] trouble getting set up with Twitch. That [49:03] sucks. Well, you have some homework for [49:06] next week. [49:07] Um, but I'm I'm taking this course. I [49:10] bought this course a while ago called [49:12] Totally TypeScript. It's kind of cool. [49:14] Um, [49:17] and so I'm totally [49:21] totally Typescript by Matt PCO is is his [49:24] name. I think Kevin told me about this [49:27] guy. I don't know. [49:30] uh he has a a cheat sheet for a um uh [49:34] TypeScript config which is really cool [49:36] but it's like all these workshops [49:38] there's like tons of stuff like you're [49:39] learning all about um lots of stuff [49:42] right now I'm on the mutability section [49:44] where we can learn for example object [49:47] property inference and recreating read [49:49] only properties and things like that so [49:51] it's it's kind of new and cool uh well [49:54] this this was on sale a couple like last [49:57] year I think and I I got it because I [49:59] mean it's it's good. I will say that [50:01] some of the things are like kind of like [50:04] it's it's well here I'll show you I'll [50:06] show you a uh like an example. So let's [50:08] look at like one of the the basics. So [50:11] let's go like basic types in in [50:13] TypeScript. So he has a little video he [50:15] explains it all the video. I'll just [50:17] jump in which is [50:18] >> change things that are being assigned to [50:20] this. [50:21] >> All right. And then you do it all in the [50:23] browser which is really cool. So like [50:25] this is this is not right. Okay. So, we [50:26] have to change that to number, you know, [50:29] so on and so forth. And then he gives [50:31] you the solution. So, it's it's pretty [50:33] cool. Small little bite-sized things. I [50:35] I'm quite enjoying it. I do think that [50:38] some of the lessons are a bit like, [50:41] okay, we've already learned that [50:42] concept. Now, we're just kind of doing [50:43] it in a slightly different way. But, but [50:44] that's the the simpler stuff. We're [50:46] getting into more complicated things. [50:48] Like, I learned about pick and omit, [50:49] which is really cool. Something I had no [50:52] idea about before. It's 2026 and I don't [50:54] know anything about TypeScript. So [50:56] that's what I'm learning right now. But [50:59] and to do that I find it's better for me [51:02] to learn on on projects, right? So like [51:04] so I have the I have these two blocks [51:07] and there there's going to be three [51:08] blocks soon or than later. And so I'm [51:11] just trying to get some ideas like just [51:14] trying to in put the types in that I [51:16] need so like so this doesn't fail, [51:20] right? Um, so I'm defining inside of my [51:23] register block type in in the types of [51:24] that that it's going to take a name and [51:26] it's going to take some params. And so I [51:28] have these register block params that [51:30] I'm I'm defining. And I I love this [51:32] partial thing because it means that if I [51:35] didn't do partial, check this out. [51:39] Everyone here is is going to know about [51:41] this. So that this is yelling me because [51:43] it's it's expecting things that aren't [51:45] there. It's missing some stuff, right? [51:47] But they're all I don't need them [51:49] because we don't always pass every [51:51] single one of these parameters to the [51:54] register block type. Right? So it's [51:58] pretty cool. [52:00] I'm pretty excited about it. Everyone [52:03] everyone watching is like, "Yeah, okay, [52:04] Ryan. Basics. Thanks. [52:08] Shut up." [52:10] Um, I had to do the attributes better [52:13] here though I think because [52:15] >> go into core eventually. [52:18] >> Say again. [52:23] >> Do you think the typing could go into [52:25] core? [52:26] >> Yeah, absolutely. I think we need it. [52:28] Um, I I I'm actually working on [52:32] helping to get that done. Um because the [52:36] the thing the thing that we don't have [52:38] so there is there's a ton of TypeScript [52:40] in core but there's no TypeScript for [52:42] some of the the blocks for the packages [52:46] that extenders use. So the the us the [52:49] people that are building on building [52:51] blocks building a lot of this stuff they [52:53] don't have types. Um so that's part of [52:56] what this is. Uh trying to get some of [52:59] these these types. [53:02] Well, yeah, there's there's a bit of [53:04] that, too, Kevin. It's it really it's [53:07] there's a lot it's just a ton of [53:08] refactoring, right? [53:11] Um I I agree with you. I I think the [53:13] policy is anything new is being written [53:15] in Typescript. Um, and then we're trying [53:18] to address we're we're trying to address [53:21] um some like this is the original poll [53:24] request where we're talking about [53:26] getting stuff in in in into TypeScript. [53:29] And there's some really great comments [53:31] in in here that I would encourage you to [53:33] read. The one thing like Dennis Nell, [53:35] who's like the smartest dude in the [53:37] planet, um had a really great um point [53:42] in in in that like some of these some of [53:45] these types um are so generic that it's [53:49] almost like you might as well just use [53:51] any, which doesn't really help that [53:52] much. But um so there's sort of there's [53:55] there's a lot of conversation back and [53:57] forth about whether or not doing like [53:59] moving everything to TypeScript like a [54:01] TS file or TSX file, right, [54:05] versus output and core makes it hard to [54:07] go for. Yeah, for sure. Yeah, I mean [54:08] it's hard. It's very very hard. Like I [54:11] like so this pull request so this [54:13] original um pull request did a whole ton [54:17] of TypeScript work and it kind of got [54:20] basically shut down a little bit. Well, [54:21] not shut down, but just basically um uh [54:26] it was deemed to be too big of a blift, [54:30] I think. So, what I'm trying to do is I [54:32] took the work that was done here and I [54:34] move and I just pulled the types out. [54:36] So, if and and my my my plan is is to [54:40] peacemeal merge some of these types in [54:42] so we can start getting them added and [54:44] it it's done through through like doc [54:46] blocks and stuff like that, right? So, [54:47] that's how it's typed. So, there's a ton [54:50] of this work that that's being done um [54:53] in a types folder and then we're just [54:55] referencing those types in the in the [54:58] original pull request. I think what they [55:00] were doing was we they were doing the [55:02] types and then they're also updating the [55:06] the know the um yeah so like all of the [55:11] doc blocks and everything were being [55:13] were were being up updated as well. So, [55:15] this is a good example of that, right? [55:16] And so I think we need to get the types [55:18] in in there first, get in and get that [55:20] passing and then starting to add these [55:22] types to the codebase as well and then [55:24] we'll get that done. I mean in the [55:25] meantime I mean that there's another [55:28] solution I think too where like we [55:31] updated the the the packages on on on [55:34] definitely typed or definitively typed [55:36] whichever one that is but problem is [55:38] those are so old that and there's been [55:41] so many permutations. It's just better [55:43] to get it in core because because then [55:45] then once it's in core um because we'll [55:48] get we'll we'll get type support faster. [55:52] Um [55:53] okay, how can I explain this? So if we [55:56] merge these changes into the package, [55:58] that package gets updated every two [56:01] weeks when Gutenberg uh when the release [56:04] candidate for Gutenberg is is pushed [56:06] out. That's when these packages get get [56:08] released. So we'll get types support [56:10] like super fast like before 7.0 assuming [56:14] we let's say we merge this stuff up [56:15] tomorrow we'll we'll we'll probably get [56:17] it either next week or or the week [56:20] after. So you you can install the [56:21] package and and and have immediate type [56:23] support, right? [56:25] >> No, you're you're totally right. This is [56:27] a really good point. Uh where is that? [56:33] Uh spotlight message like this is a [56:35] great point. Oh, can't see it because I [56:39] put this behind um [56:45] over there. Let's do that. Sorry. Let's [56:46] do that again. [56:49] All new code is TypeScript anyways. [56:51] Yeah. So, like Oh, not that one. It's [56:54] this one. Uh probably [56:58] what Anyways, good point. Um not Yeah, [57:02] but the thing is it's like it's it's [57:04] there's a difference between So what I'm [57:06] finding is there's very much a [57:07] difference between um implementing it [57:10] and using it, right? So if if that makes [57:13] sense, like writing the types and and [57:15] and adding them to the codebase is a [57:18] much more complicated process than just [57:20] ingesting those types when we're using [57:22] them. Um because a lot of it's behind [57:25] the scenes anyways, like you don't see [57:27] it. So it does take a certain level of [57:30] expertise but one that I don't really [57:32] have and that's what I'm sort of looking [57:33] at trying to get myself to to the point [57:36] where you know because this is this is [57:38] the exact kind of pull request that like [57:41] no one writing real code for Gutenberg [57:44] like working on actual features is going [57:46] to have time for. It's exactly what [57:49] someone like me who's like you know a [57:51] hack but is paid to help can can do and [57:55] move this stuff forward. So that's [57:58] hopefully that's something that I I I [58:00] can get done sooner than later. Love [58:02] some help though. [58:04] >> No, [58:04] >> that's going to be an interesting [58:05] transition to see [58:08] >> what to TypeScript. [58:10] >> Yeah, I mean I we we kind of did that [58:12] with our component library and and you [58:14] know there was a lot of struggles, a lot [58:16] of learning um validations and stuff and [58:19] and just running checks and tests were [58:21] failing left, right and center like [58:23] there was a big learning curve there [58:25] >> really. What was the So the tests like [58:28] oh the test because you're using [58:29] TypeScript [58:30] >> like really like TTS [58:32] >> using the whole Annie was a big problem [58:34] and and I I had to go back and like look [58:37] at some of the old code that was a good [58:38] year and a half ago I think we were [58:40] really kind of struggling with that. So [58:42] it it took [58:43] >> fully typescript now [58:44] >> in our component library not in our [58:46] WordPress work right now. [58:49] >> No no I mean but that's but but that's a [58:52] start right? So, were you getting errors [58:54] like any like can't use any because I [58:56] think I think you can disable that in [58:59] the TS config. I think [59:01] >> that you can Yeah, you can. [59:03] >> Yeah, I think there does there was a way [59:04] to disable it. We we were trying to [59:06] learn it and and we kind of left all [59:07] those things on at the time and [59:09] >> yeah, [59:09] >> you know, learn how to fix it properly. [59:12] >> For sure. That's what I'm sort of uh uh [59:15] doing as well. Like there's this thing [59:16] in here that's driving me nuts and I [59:17] can't figure out why this is doing that. [59:20] Uh but I have this block params which [59:23] takes an object and then then that [59:25] object is yeah exactly any beats the [59:28] purpose of of ts it's kind of like yeah [59:32] that was a comment that Phil said but [59:35] anyways so there's I have this block [59:37] params interface and it takes it it [59:39] takes an object which is basically the [59:41] attributes so the attributes can be [59:42] whatever but when I pass it in here it's [59:45] I I'm passing it in as an any which this [59:49] is AI generated But if I to do do this [59:51] and I pass it in as an object, [59:54] which should be the type, I think it [59:56] yells at me. Or maybe it doesn't yell at [59:58] me. Let's see. Doesn't seem to be [60:01] yelling at at me anymore. So So maybe [60:04] it's fine. You see, I don't even know. [60:08] Uh maybe it's not a problem. [60:14] All right. Well, doesn't seem to be a [60:16] problem anymore. So maybe that's what I [60:18] needed to do. But uh but yeah, so I'm [60:21] fig I'm trying to figure out a lot of [60:22] this stuff like what was the other one? [60:24] The it was this block I think. Why is it [60:28] zoom that in? You guys can read that. Um [60:34] index. [60:36] Oh yeah. See now now it's yelling at at [60:38] me here. [60:40] I don't I don't quite get. [60:46] So [60:48] yeah, it's weird. Anyways, so I have to [60:50] put it back to any and then it works, [60:52] but I don't think that's what I want to [60:54] do. [60:56] Don't know. So I don't understand why [60:58] this does that, but it it it makes it [61:00] work. [61:03] So this is the Yeah, that's the kind of [61:05] stuff that that that drives me nuts. And [61:07] then doing all this and having to figure [61:10] this stuff all out, it's good times. [61:12] Um, when you uh the testing that you [61:15] were running into, Troy, what like you [61:18] >> Yeah. Oh. Oh, Kevin's answering. Kevin's [61:21] answering. So, that's a generic type any [61:24] like any like I know what any is. It [61:26] means it could be anything. Like, should [61:28] I be passing something like T in in [61:30] there or [61:32] I I just don't get why [61:35] it's supposed to be an object. Well, [61:37] you're passing that type into the other. [61:39] Yeah, I'm passing [61:43] th this this [61:46] Oh my god, did I just get raided? Sweet. [61:56] Um, I just Sorry, I just saw my viewer [61:59] list go like 10 million people just just [62:02] showed up. [62:04] Block params has a type param and [62:05] expects a specific structure. Yeah, it [62:07] does. [62:10] Right. So, okay. So, Kev, talk uh talk [62:13] me through this. Um, so this was [62:16] generated by AI for me. So, the idea is [62:19] attributes. We don't know what [62:20] attributes is. We only know that it's [62:21] going to be an object. Now, I I I can't [62:23] type it as an empty object because [62:25] that'll fix, right? [62:28] All right. So, [62:32] this is a generic, right? [62:41] And Troy, if you know the answer to [62:42] this, jump in, too. Same with you, Paul. [62:44] I feel like I'm talking I'm talking over [62:46] everybody here, [62:49] but anyways, [62:54] >> I'm going through examples [62:56] >> in my code to see if I can find [62:57] anything. [62:59] >> Cool. The Lup is going to join us here. [63:01] Sorry, I just saw the call-in request. [63:03] We're doing call-ins, viewer call-ins. [63:05] So, if you have a verified Twitch [63:06] account, you are welcome to jump on [63:08] board. If I don't know who you are, I [63:11] might not put your camera on [63:13] immediately. Uh, but that's only just to [63:16] keep us from uh, you know, [63:19] bad things happen. All right, the lup is [63:21] going to join us. Here we go. [63:24] Welcome to the stream. Um, all right. [63:32] This is fun. All right, Kevin. So, [63:35] explain to me how I can make this work [63:37] with any object. That's basically what I [63:40] want to have done. I guess I could Well, [63:43] the question is this is a generic, [63:46] right? This is a generic. So, it's being [63:49] passed. So, I can use attributes to [63:52] contain anything that's an object, [63:55] right? [64:03] params on edit has the signature that [64:05] you need to match. [64:08] Yeah. So it's defined by my block [64:10] params. So it's attributes set [64:14] attributes and is selected. Edit has a [64:17] type. Edits type. [64:21] Uhhuh. [64:30] So the thing is AI generated this [64:33] connection for me and I don't understand [64:35] it where I use it. So I use it uh [64:38] basically [64:40] here right. So this is so the edit is [64:45] going to be [64:48] right. It's just a component. So it's [64:50] going to be using this here. So it's [64:53] it's returning the ReactJSX element [64:55] which is what it's supposed to do. [64:57] Register block has a type. It does. [64:58] Yeah. It's right here. So it's going to [65:00] have it's got my register and that and [65:03] edit on that needs to match. Yeah. No, I [65:04] I it I I I understand. [65:08] So this is so register block type takes [65:11] name and it takes a number of [65:12] parameters. So I have a partial of [65:13] register block pans because not every [65:15] time I'm using it. Well, okay. If I [65:18] remove this, [65:20] it's yelling at me. Oh, cannot be empty. [65:23] Okay. So what I'm thinking is this is [65:25] supposed to be an object, right? I'm [65:27] defining it as an object here. So it now [65:29] it's not yelling at me, but it will yell [65:30] at me here. It's not yelling at me there [65:32] either. I don't understand why it's not [65:34] yelling at me now. Uh, [65:38] it has an any type. It shouldn't have an [65:40] any type because block params has got it [65:43] is selected. [65:54] Oh, no problem. The lup's trying to [65:57] figure out the odd. If you move the end, [65:58] this should So this doesn't error. This [66:01] doesn't error. [66:02] Doesn't make any sense to me why that [66:04] that doesn't error now. And then this is [66:06] erroring because this is saying that it [66:07] hasn't impressed any type. But it [66:08] doesn't because this edit is being [66:11] defined in here. [66:16] Oh. [66:17] Oh, wait. Do I need to hold on block [66:20] attributes? [66:23] Oh, that's what I have to do. Okay. [66:26] That's what this is yelling at me over [66:27] here because I need to do that and put [66:32] that right. [66:33] >> I gotta go. I got a bail, guys. I have [66:36] >> All right, Paul. Well, thanks so much [66:37] for hanging out. [66:38] >> Let's do it again. [66:40] >> Yeah. Well, I think I might just do this [66:42] every every uh how do I restart [66:45] TypeScript? Just go restart. [66:49] Can I just tell it to restart [66:53] type [66:56] script [67:00] restart server boom let's see problems [67:03] two problems cannot find blog cannot [67:05] okay uh the lup thanks for hanging out [67:07] hey man how's it going I'm gonna just uh [67:12] remove Paul thanks Paul [67:15] >> hey hey can you hear me [67:17] >> yep I I can hear you Hello everybody. [67:19] >> Chad, [67:20] >> can hear you. Thanks for joining us. [67:22] This is awesome. I'm so excited that [67:24] we're doing this. I can't tell you how [67:27] nerdy this feels. It's amazing. It's [67:29] just amazing. Okay, so block attributes. [67:31] I need to do a type here for block [67:33] attributes. [67:34] This is the problem. Yeah, we'll we'll [67:36] just we'll just not do that. We'll do [67:38] Come on now. Here we go. So, block prams [67:42] cannot find block I have to import block [67:44] prams. Did I import blocks over here? It [67:48] did. All right, we'll do that. We'll [67:50] just import block ramps. Boom. Okay, so [67:54] that's not yelling at me anymore. Yeah, [67:56] sure. Great. [67:58] Duplicate identifi. [68:02] All right, so that's working. This is [68:05] This makes sense. So in my missing [68:07] types, I have an object. So Kev, [68:12] am I explaining this? like is this [68:14] correct to think of it this way that [68:17] this type that is being passed in here [68:20] is supposed to be an object and so I [68:22] tell it that it's an object here to [68:24] match this [68:26] this um type definition. I think that's [68:30] what I'm feeling like it should be and [68:32] maybe I'm wrong but [68:35] I don't know if I am. So there's that. [68:38] So nothing here is yelling at me. I have [68:39] no errors. So this is good. This is [68:41] good. I'm very excited. The luck, what [68:44] are you working on? [68:45] >> Let's let's start with that. What you [68:47] got? Anything that you can share? [68:49] >> I'm so out of the I mean I'm working on [68:52] totally different things than [68:54] Typescript. [68:56] >> Well, yeah. No, you don't. [68:58] >> Probably. [68:59] >> This is not a TypeScript focused stream. [69:00] This is a [69:02] >> It's probably under NDA. So, no. [69:04] >> Oh, okay. [69:05] >> Uh, but I was curious [69:08] about I was curious about your opinion [69:10] on this. social side um within the [69:14] WordPress community because every time [69:16] this subject reappears uh there's this [69:19] discussion like there are Typescript uh [69:22] enthusiasts there are one Typescript [69:24] that like let's do it let's refactor [69:26] everything and then there's this other [69:29] side from Twitter that's oh no it's they [69:33] are jumping for they're following [69:35] butterflies that's impossible it's never [69:39] going to happen so like it's never going [69:41] to happen in in in the sense of um [69:47] >> like [69:49] Sorry. So, so the there's the people [69:51] that that want to go full TypeScript and [69:53] then there's the people that don't want [69:54] to go full typist or they're worried [69:56] that that it's a fad sort of thing like [69:57] is that [69:58] >> Yeah. Yeah. Yeah. They they are worrying [70:01] that it's just a trend. It's not going [70:04] to stay for a long time and so on. In my [70:08] personal opinion, like I'm a centrist. I [70:11] in my opinion, whatever is good for the [70:15] contributor is good for the project. The [70:19] important part is that people [70:20] contribute. [70:22] >> Yeah. No, I agree. I I don't think [70:24] Typescript's going anywhere. I I don't [70:26] know. I mean, it's been around a long [70:28] time now. Like 11 12 years. like it's [70:31] been a long like it's been around a long [70:32] time if I may maybe I'm wrong with the [70:36] amount of time but I just don't think [70:38] it's going to go anywhere. I think too [70:41] that like it can be done in such a way [70:43] where where you still like because [70:44] you're just ingesting the types like [70:47] from a from an extender point of view. [70:50] You don't need to write in Typescript if [70:52] you want to. It would be really great to [70:54] have the types available, right? So [70:58] I don't I I don't see it as a bad thing. [71:01] It's not like it's coffe script or the [71:03] next flavor of like we had the same [71:06] conversation about React when React was [71:08] chosen for the block editor, right? Like [71:10] well maybe Vue will will will be the [71:12] next thing or Alpine or whatever, right? [71:14] But I mean React's React's still here [71:17] and it's probably going to be here for a [71:19] a long time long after I quit doing this [71:22] most likely. Um [71:24] but and I think TypeScript's is is kind [71:27] of the same the other but we we also [71:29] have that escape hatch where I don't [71:30] think you don't need to use TypeScript [71:32] if you don't want to. [71:34] >> So [71:35] >> yeah but that that purpose of the [71:37] architecture like that's the purpose of [71:39] TypeScript. It induces the idea that [71:42] everything you will use as a parameter [71:44] it has to be strongly typed so you know [71:47] exactly what you are about to pass. So [71:50] for sure this makes it hard for people [71:53] let's say that maybe they don't know the [71:56] entire architecture behind the u the [71:59] entire structure of the code and and so [72:01] on. So it's getting harder like to to [72:06] come and contribute because you will [72:08] have [72:09] >> because it's typescript. [72:10] >> Yes. because you will have to [72:12] >> Oh, I see. [72:13] >> beh strict in your contribution. [72:18] >> Yeah, I see what you're saying. Okay. [72:21] So, there's there's a couple of parts to [72:23] that, I think. And I mean, Troy, feel [72:25] feel free to jump in here. Um, I think [72:27] uh I think that like having types is a [72:30] good thing. I mean, strictly typed code [72:33] bases are good. PHP allows for it. I [72:37] mean, there's like, you know, JavaScript [72:40] has always been kind of the wild west [72:42] because you could quite literally do [72:43] whatever you wanted to do and it never [72:44] really mattered and you could just like, [72:46] oh, that boolean, it's a string now. Oh, [72:48] great. Awesome. Like, you know, and it [72:50] caused a lot of weird problems, but it [72:52] also allowed you to do things that maybe [72:54] you can't do in a in a in a different [72:57] language. I think with lo like with the [72:59] a larger code base, TypeScript becomes [73:03] super important because especially when [73:05] it's like people that aren't [73:07] contributing all the time like if you [73:08] have someone like George like [73:11] >> oh you made a wise choice my friend [73:13] >> Mike Corkum what hi welcome um um if you [73:19] have someone who's in lives lives in the [73:21] codebase all the time they understand [73:22] how things work you know maybe [73:25] Typescript isn't that much that that [73:26] that that that not as helpful for them. [73:29] But if you're like a part-time [73:31] contributor or somebody who's not that [73:33] familiar with the codebase, I could see [73:35] TypeScript saving a lot of problems [73:39] because you don't know what that [73:40] parameter is. Like here's an example. I [73:43] was working on a uh pull request to for [73:46] the icon block to try to take uh Nick [73:48] Diego's icon block and get it into core. [73:51] I didn't make it in in in the 6.9, but [73:54] part of what I was trying to do was add [73:56] more block supports because we wanted [73:58] them for height and width. And so that's [74:00] not really a documented process because [74:01] it's a very much core thing, right? And [74:03] it's not TypeScript. It's just it's just [74:05] like regular React. And it was really [74:08] difficult for me to figure it out [74:10] because I didn't know how any of this [74:12] stuff worked. And so at least if like [74:15] I'm putting in a function and I'm not [74:17] telling I'm not passing what it needs to [74:19] to get TypeScript can kind of be like [74:21] hey this is expected in here. So maybe [74:24] that can probably help a little bit [74:27] but it can also be wildly frustrating [74:29] like wildly wildly frustrating because [74:31] you don't know if you don't know [74:32] TypeScript you're like I don't [74:33] understand what any of these errors are. [74:34] What the hell are these angle brackets? [74:36] This makes no sense. It's dumb. Right. [74:38] Um so yeah I I definitely get I [74:41] definitely get both sides of it. I'm [74:43] literally talking in circles. I'm like, [74:45] "TypeScript's great, but it sucks, but [74:46] it's great, and then it sucks." So, it's [74:48] like it really it's it's I can see why [74:52] it's a little bit controversial. [74:55] >> Yeah, the Lup is right. Like, it's I I [74:56] think it's it's going to be a bit of a [74:58] barrier for some folks in contributing [74:59] because of that that lack of that [75:01] knowledge that was there. I mean, AI is [75:03] going to help kind of get over that gap [75:05] rather quickly. Now, like when we had [75:07] it, when we were starting on Typescript [75:08] and and and we hit all of our trouble [75:10] and and it was a lot of confusion there, [75:13] we didn't really have the AI tools. We [75:15] were just doing a more Google searches [75:16] trying to understand it. So, that made [75:18] it more difficult. But I find now you [75:19] can just, you know, toss it into [75:21] co-pilot or, you know, whatever you're [75:22] using this day and uh get over the hump. [75:25] But but I I do wonder how many folks are [75:29] going to kind of maybe step back a [75:31] little bit more, you know, if they kind [75:32] of hit that TypeScript thing, you know, [75:34] I don't really want to go there yet or, [75:36] you know, could go either way. [75:38] >> Yeah. And part Yeah. And I think part of [75:40] it too is that like [75:43] from from my my viewport as a my my [75:47] point of view as a developer advocate, I [75:49] think there's a real I think there's a [75:51] need for people like me to be doing more [75:54] things to explain this stuff. Like when [75:57] a new API is released in WordPress, [76:00] >> part of my job and and and other people [76:02] job other people in in the community, [76:04] their job is to be like, "Hey, this is [76:06] how you use that that API and and and [76:09] this is, you know, here are some [76:10] examples and here's some stuff." We're [76:12] not doing that for with with TypeScript. [76:14] Like I don't I think there's one place [76:16] in the block editor handbook that I can [76:18] think of where they talk about [76:19] TypeScript and how you would do it in [76:21] Typescript, and it's the interactivity [76:22] API. Um [76:25] but um and it's just basic basic setup. [76:29] So I think there's I think there's a bit [76:30] of education. I mean you know because if [76:33] the project wants people to come along [76:36] then those that support the project and [76:39] and and and are trying to support the uh [76:42] you know the developers that that work [76:43] with it. I think part of that that falls [76:45] on my shoulders and other people like [76:46] me, right? And like and the rest of us [76:48] like writing articles for the developer [76:50] blog on on Typescript and why you should [76:51] use it and you know that kind of stuff [76:55] talks on like hey you know Typescript [76:57] for the rest of us sort of thing like [76:59] like you know why I hate Typescript and [77:01] why you should use it like that's a [77:02] great talk title actually that's a [77:04] fantastic talk title. Um, but you know, [77:07] stuff like that. I think I I you know, [77:09] and it's the same with React. Like we're [77:11] trying to teach a little bit of React [77:12] with the block editor stuff, right? I [77:15] mean, you can't teach everybody [77:16] everything, right? like you have to know [77:18] a little bit to be able to get in the [77:19] door. [77:20] It does I can that's an interesting uh [77:22] topic Phil for sure like the the [77:26] >> I also think [77:27] >> to entry [77:28] >> there's a learning curve in the [77:30] engineering life in the life in an [77:32] engineer when you are at the beginning [77:36] of your career you love a language like [77:38] JavaScript for not being restricted you [77:41] want you don't know what you want to do [77:42] you want to be able to do this and that [77:44] when you see errors or uh linting errors [77:47] they're like I don't like that but then [77:50] you evolve and you say at that point you [77:53] might say you don't like Typescript at [77:55] all and then you start learning you you [77:58] start evolving you keep learning and [78:00] then you you will hit a point and I see [78:02] this in many projects plugins or when [78:06] they are trying to mimic TypeScript in [78:09] their structure they will force [78:12] parameters in uh documentation they will [78:15] try to do some type of objects that have [78:17] a specific ific structure and then they [78:20] will validate it or sanitize it in [78:22] somehow uh and they will try to mimic at [78:26] that point they try to mimic typescript [78:27] they want a type uh way of doing [78:32] programming but they don't want to use [78:33] type typescript and I think that's the [78:36] the the learning curve of a programmer [78:40] you start early you want the flexibility [78:42] you learn you learn and then you you you [78:44] realize that man the more flexible I let [78:48] this function or uh class be the more [78:52] people will do crazy thing that I don't [78:54] intend for them to do with this and [78:58] >> exactly [78:59] >> and then you go with the curve on the [79:01] other side you come back and oh let's [79:03] restrict this as much as we can and uh [79:07] you then probably you are the kind of [79:09] guy that says hey let's implement [79:12] typescript and gutmer now [79:14] >> yeah I mean I think what you're talking [79:16] about like prior to types being able to [79:19] do types in PHP like it was always [79:22] called defensive programming like check [79:24] to make sure that that parameter is [79:26] there and it's a string and check to do [79:28] this and that and the other thing like [79:29] like I always thought like you know [79:31] being good defensive programmer was [79:32] making sure the thing was defined before [79:34] you used it and make sure it was the [79:35] right type before you did it and like [79:37] you know typed languages do a lot of [79:39] that for you and it's the it's the code [79:42] completion and it's the like there's a [79:44] lot there that I really think helps but [79:46] Yeah, again it's like you want the [79:49] flexibility until you don't, you know, [79:51] until you're in a million line codebase [79:53] and somebody changes a function [79:54] parameter or or function definition adds [79:57] another required parameter and then [79:59] everything breaks and nobody knows why [80:00] because they can't trace it down, right? [80:03] So I don't know. [80:04] >> Yeah, probably not a good idea to [80:05] implement it on a large codebase all in [80:07] one shot. It was a mistake. I've made [80:09] that mistake several times. [80:12] >> Yeah. Now you've actually got me [80:14] thinking about whether or not I should [80:15] take a take a have a go at trying to [80:18] convert one of my plugins over to [80:19] TypeScript just to see how that works [80:20] out. [80:22] >> Yeah, you thinking now? Well, I've tried [80:25] to do it a couple times with my advanced [80:26] query loop plugin, and the the the [80:28] fundamental issue that that you're going [80:29] to run into is that the like the types [80:33] that you need, like the types that you [80:37] are are are are going to need for if you [80:39] want to turn all your all your files [80:40] into TS files, the types that you're [80:42] going to need are not provided by core. [80:43] That's the problem. Like register block [80:46] type, which you'll need if you're doing [80:48] a plug-in with blocks, um doesn't have a [80:51] type. and the types from dev from from [80:53] from definitely typed are out of date. [80:56] And so now you're fighting all that [80:57] stuff. So like Typescript isn't fun and [81:00] it doesn't it doesn't really help if [81:03] you're fighting the system just to do [81:07] the work. Like that's that's that's [81:10] something that I've kind of struggled [81:11] with with Typescript a little bit is [81:13] that oh my god I just spent three hours [81:16] trying to figure out why these types are [81:17] wrong and breaking when I and I haven't [81:19] written a line of code for the thing I'm [81:21] actually trying to work on. Um you know [81:24] like I'm I'm all excited because I I I [81:26] got my TypeScript error to go away [81:28] because I've I added some types and I [81:31] didn't build anything. I just like got [81:33] it to not squ have have squiggly red [81:35] lines. So, I mean, yeah. And, uh, Kevin [81:39] says he doesn't think that that you need [81:41] many. And you probably don't. Like, [81:43] depending on what your plugin is is [81:45] doing, like if I were to look at my [81:47] plugin, which I I would say is a fairly [81:49] simple [81:51] plugin in the sense of like what it's [81:54] actually using. Uh, why is this not [81:56] zooming in? Why is this not zooming in? [81:58] >> Now, you're are you registering your [82:00] variation on this plugin in JavaScript [82:02] or you doing it in PHP? Uh, oh, and and [82:06] I'm doing it in it's all in JavaScript [82:08] and I'm actually looks like I'm trying [82:09] to do it using Oh, I'm on my TypeScript [82:13] branch. That's why I was playing around [82:15] with trying to convert it, but I I mean [82:18] like I'm already running into errors [82:19] like okay, so these things aren't these [82:21] don't have types. They may not be [82:22] installed. Um, and so I know there's no [82:26] types for blocks, which means that this [82:28] thing will need to have a type. So I [82:30] have to I have to generate a type of [82:32] this. Now, I I could just generate the [82:33] type that I need just for my use case [82:36] and move on. Like I I could literally [82:38] just create a type that has that stuff [82:40] and that's it. And then and then I' I' [82:43] I'd be done. Um and then like the rest [82:46] of it like [82:49] the the rest of it is fairly [82:50] straightforward, I think. But I mean [82:53] like I'm [82:56] Yeah, I guess it depends on on what [82:58] you're doing. And I I think I think some [82:59] of these these things like I don't need [83:01] like I I don't have all the stuff typed [83:03] out yet. But it's [83:06] you know it's mostly just React [83:08] components and typing parameters and [83:11] doing all that. I mean I think it's I [83:13] don't know. [83:15] I think it's a good so in my case where [83:18] I think it would become super helpful is [83:21] when I'm doing stuff like post meta [83:23] query controls [83:25] um like the query what what they like um [83:32] what what am I trying to say here in my [83:34] types I'm defining some types of like [83:37] query props query attributes some of [83:40] these queries are pretty big like [83:43] there's a lot of props and a lot of [83:44] things added and like my meta like when [83:47] I when we're working with meta control [83:50] um you can see there's like there's a [83:52] list of queries and there's an an ID and [83:55] I I have I have it defined here [83:58] somewhere but I can't remember where it [83:59] is but basically like it they're pretty [84:01] complicated objects so having types in [84:04] there would be very helpful because then [84:06] I don't have to remember what all that [84:08] stuff is but again it depends on what [84:10] you're doing I think so I'm I'm going to [84:12] take another shot at this I think I I [84:14] did this kind of backwards, but [84:17] um that's sort of sort of my idea. [84:21] But yeah, [84:21] >> I think I think that the core team of [84:24] WordPress still needs to take a a [84:27] decision on this because this this [84:30] discussion reappears [84:32] often. [84:33] >> Yeah, [84:34] >> it's I think I think the decision is new [84:37] code is is written in in Typescript um [84:40] as much as possible. Like if you were [84:42] writing a new component, it'll be done [84:44] in Typescript. Or if you're writing a [84:45] new whatever, it it'll it's done in [84:47] Typescript. The problem is we've got [84:49] like I don't know what, five, six years [84:51] of like non-Typescript code out there, [84:53] right? Um Oh, Kevin's giving us [84:58] all the code that we need to start our [85:01] our um [85:04] that's it. That's all we need according [85:06] to Kevin. Perfect. Done. No more type No [85:08] more TypeScript is needed. Uh um it's [85:12] it's the old stuff. It's the but it's [85:15] the fundamentals. That's the thing. Like [85:17] the block a block doesn't have really a [85:20] TypeScript definition. It it it has a [85:22] definition. I don't know if it's been [85:24] typed, you know, and then like all the [85:27] attributes for all of that all of that [85:28] stuff. Like that's what we don't really [85:30] have available as a type um to be [85:34] imported from a package. And I I think [85:37] it's just like getting into the the [85:39] weeds of DIT and just kind of working [85:41] through it, right? So, [85:45] block output attributes. [85:50] >> Yeah, this stuff from Kevin looks pretty [85:51] straightforward. [85:53] >> Yeah. Well, you know, Kev's kind of a [85:55] genius. [85:57] Taught him everything he knows. I'm not [85:59] gonna lie to you. [86:03] I am lying to you. [86:07] All right. [86:09] >> I think I that might be my weekend. I [86:10] might convert one of my plugins to [86:12] TypeScript just to try it. [86:14] >> Yeah, I I I really honestly I am like my [86:18] New Year's resolution besides losing [86:21] weight, which is everyone's New Year's [86:23] resolution, is to uh have every single [86:27] JavaScript I file that I create and work [86:29] on be in Typescript. [86:31] um because that's the only way that I'm [86:34] going to get really good at Typescript [86:35] and I think that is a skill set that I [86:37] need um is to just it's just just to [86:41] work with it and then I'll be able to [86:43] identify the pain points that extenders [86:44] have and then I'll be able to help [86:46] address them. Right. [86:47] >> Yeah, that was part of my problem with [86:49] learning Typescript was just the [86:50] frequency in which I was using it. For a [86:52] while it was like every day for a couple [86:54] months but then you know we switched [86:56] gears and it was like more focused on [86:57] the WordPress side like Gutenberg and it [86:59] was we went really hardcore on that. So [87:01] like for the better part of the last [87:03] year I would say very consistently of my [87:05] work and my personal work that I do it [87:08] was really all focused on Gutenberg and [87:09] React and and JavaScript and I hadn't [87:11] really touched TypeScript. So like I [87:13] would go back now and I'd probably have [87:14] to go and do some sort of a [87:17] course of some sort to just a refresher. [87:20] >> Yeah. Yeah. That's exactly where I am. [87:22] Like I I have this course and I I I I [87:24] got through it uh like last year and [87:26] then but like I don't touch t I I don't [87:28] do a lot with TypeScript like very [87:29] basics but the the level of TypeScript [87:31] that I'm operating at like the types can [87:34] be inferred by Typescript like you don't [87:36] need me to like you know like it's it's [87:39] a it's a string parameter like I don't [87:41] think Typescript really can't figure [87:43] that out right. So, so yeah, I think [87:45] it's I think it's it's like anything. [87:47] It's like if you want to get really good [87:48] at something, you have to like you got [87:50] to really do it. You got to just go and [87:51] do it, dive into it. And this is going [87:53] to be like a concerted effort for me to [87:55] like, [87:57] you know, only write stuff. So, I I I [87:59] need a create block uh template, which I [88:02] have somewhere that does TypeScript that [88:04] takes everything and just puts it in [88:05] Typescript because the cool thing about [88:07] create block and the the scripts package [88:09] is you don't need to have a TS config. [88:11] it it just works which is really great [88:14] because that's a big part too is is [88:16] trying to figure out all the TS config [88:18] stuff and like um you know the the only [88:22] workflow I don't have is having uh the [88:25] TypeScript watch running and this the [88:28] start package but if you're in like an [88:30] IDE you don't really need to have it [88:32] watching to to do it I think and I think [88:34] that's just my mindset was that like I'm [88:36] used to like um having like a watch [88:39] command that does all my linting and [88:41] everything in there for me and the the [88:44] IDE does it now. So, and that's probably [88:46] just me having to like change the way I [88:48] think of things, but [88:50] you know, so [88:54] >> the great part of it is that AI is doing [88:57] great with typed uh languages. [89:00] >> It really is. And I think I think it's [89:01] going to help Gutenberg like very much [89:04] like I I think once we start getting a [89:06] lot more like TypeScript based code out [89:09] in the world that is for blocks and for [89:12] you know working with the UI and slot [89:13] fills and all all of that stuff. Um I [89:15] think AI is going to get better at at [89:18] giving good examples right that's we'll [89:22] see that probably have to train some new [89:24] models. [89:26] How terrifying is it that [89:29] the answers that we all put on Stack [89:31] Overflow are have now been ingested in [89:34] into models? [89:36] >> I'm I'm more afraid about the answers [89:39] given to [89:41] >> Yeah. Yeah. Exactly. [89:42] >> I I'm afraid about those from [89:45] >> the answer got Yeah. Yeah. Exactly. [89:49] >> That's funny. [89:50] >> The part that has been trained with [89:52] Reddit is the problem, right? [89:54] >> Oh my gosh. Exactly. [89:58] Um, just want to do a shout out for [90:01] anyone that's out that's just joined. We [90:03] are doing live viewer callins. So, if [90:05] you want to jump on stream with uh [90:07] myself, Troy, and the love, come on in. [90:09] All are welcome. Um, [90:12] all you need is a Twitch account and one [90:15] that's verified apparently. Um, yeah. [90:18] So, come on in and you can chat [90:21] TypeScript or whatever you want. Doesn't [90:23] matter. We we can talk about whatever [90:25] y'all want to talk about. Um, cool. All [90:29] right. So, I have to figure out what [90:32] Kevin was telling me about this. So, [90:33] this is a very generic thing. So, [90:37] um, [90:40] blocks take this object. [90:43] So, should I do like [90:47] maybe I need to define a type that looks [90:49] like uh, what are we going to call this? [90:51] Attributes. [90:56] attributes attributes, [90:59] right? And then it it you can do like [91:01] the key is going to be [91:04] a string, right? Because we don't know [91:06] what it is. And this will be a string. [91:10] No, this will be this is going to be [91:13] an object. [91:17] I forget how to do this now. [91:22] How do you How do you do the dynamic? Ah [91:24] crap. I used to remember how Whoa. What [91:27] was that? [91:38] I have to look this up. How you do? [91:43] Let's Let's go to my course. Where's [91:44] that course I have here? That's not it. [91:46] That's not it. That's not Where' it go? [91:49] Whatever. Okay. TS dynamic [91:53] uh keys [92:00] key string thing objects something like [92:03] that. Does it have to be an interface to [92:05] do that? No. So like this. [92:09] That's another array of objects though. [92:11] So that's what it would look like. And [92:13] then [92:17] um [92:26] trying to figure this out. Okay, so this [92:28] the name of our attribute is going to be [92:30] a string. It always is. And then this is [92:31] going to be an object and it's going to [92:33] have it'll have a type [92:37] which is going to be string. [92:40] Right? What was that? [92:45] heard a little like poker music or [92:46] something there. That was great. [92:48] >> That was my son. I I gotta tell him to [92:50] turn down the volume. My son is home [92:51] today and he's listening. He's watching [92:53] Spongebob. [92:54] >> Oh, that's cool. He can watch He Tell [92:56] him to turn it up. I I love Spongebob. [92:58] Okay, so the type is a string, right? [93:01] And then what are the other what are the [93:03] other things that we can put into a an [93:05] attribute for a block? We got type is [93:07] what? uh default [93:11] and [93:14] right and then what else? [93:18] Oh, all this stuff. Okay, I'm not using [93:21] any of that. So, I should just be able [93:22] to do something like this, right? So [93:27] now, [93:33] how do I how do I indicate that this is [93:37] an object that contains multiple of [93:39] these? [93:42] Does anyone know off the top of your [93:44] head? I don't know how to do that. [93:49] Oh, Kev Kev's in the chat. He'll tell me [93:51] what to do. So, this is telling it that [93:53] it's it's going to be uh it's going to [93:55] be have a have a key and it's an object [93:58] that has a type and a string in it. And [94:00] then but I want to be able to tell the [94:02] attributes might have multiples of of [94:04] these. So, is there like a [94:09] is there a way of doing that? Okay. Um I [94:13] guess I'll Google it. Oh, you know what? [94:15] Let's ask Chlo um how can I indicate [94:21] that this uh type [94:25] can have [94:28] uh more [94:30] entries or does it automatically be [94:32] inferred? It already does. So that's [94:36] just saying [94:38] okay. So that's unlimited. Okay. [94:40] >> But you want [94:46] I was asking if you want if you want [94:47] multiple levels deeper. Do you want the [94:50] object to be deeper and want define it [94:52] this way? [94:52] >> No, I just want the object to be able to [94:54] be a series of strings followed by so so [94:57] basically follow this. So attributes is [94:59] is is going to be an object and that [95:01] contains a key which is a string and [95:03] inside of that it's an object that that [95:05] has a type type and it's of the the type [95:09] string as well. So that should be what [95:11] this is doing. So, if I pass this to [95:13] here, is that going to do what I want it [95:16] to do? [95:18] Let's see. [95:20] It seems seems to be [95:24] that's not yelling me. Let's restart the [95:26] TypeScript server. Did that actually do [95:29] that? No. [95:34] Oh, did I just did that just do what I [95:37] wanted it to do? Amazing. [95:40] Now, let's let's let's test it and we'll [95:42] say [95:44] number. I don't know if that's going to [95:46] yell at me or not. Is there a block [95:47] type? Probably you probably just No, [95:49] there isn't a block type. I haven't [95:50] defined one. Ask that doesn't seem to be [95:52] doing any Oh, wait. Hold on. Probably [95:55] has attributes. Let's see. [96:05] >> All right. Well, it's not yelling at me, [96:08] so [96:09] That's going to be I guess what it needs [96:12] to be. [96:18] I guess I I can just pass this straight [96:19] into here too, right? I can just do [96:22] something like that. [96:27] >> I should probably define a block type, [96:28] but I I don't have one defined and I [96:31] don't know if there is one defined in [96:32] here. [96:34] But Kev, this seems like it's the right [96:36] way of doing this, right? [96:42] >> I don't know. [96:43] >> In your type definition, you're you're [96:46] setting your type, right? Do you do you [96:47] not have to put in other stuff inside of [96:49] there? [96:51] >> Where's that? [96:52] >> I'm just looking. If you go back to [96:54] where you're you're defining the type, [96:56] >> which which type? Sorry. [96:59] >> The um your block attributes definition, [97:02] I think it was. Oh yeah, right here. [97:06] >> I'm going to put that in in into its own [97:09] type. [97:09] >> Oh yeah. Okay, you did right there. [97:10] Okay, because inside of there, wouldn't [97:12] you put like uh you know, say if one of [97:14] your attributes was URL, wouldn't you [97:16] put URL equals URL or I guess [97:19] >> Well, yeah. Yes, you could. But I think [97:22] that that'll become a a pain because if [97:27] so if if I do it this way like URL like [97:31] um [97:34] like this then this this is going to [97:36] expect Why is it yelling at me? [97:40] >> Oh uh [97:43] it's a string. [97:45] Uh [97:47] what the problem here is is is that I [97:50] need to have URL in every single usage [97:53] of [97:54] >> wouldn't you put URL like underneath [97:57] type because you're going to define [97:58] types of your type there could be string [98:00] it could be number it could be array [98:02] like you could you could pipe a bunch of [98:04] those in and have a bunch of different [98:05] types in there but then inside of there [98:07] wouldn't your attributes come underneath [98:09] it and you define so you know say if you [98:11] have a source URL and it's uh you know [98:13] it's a string [98:14] >> oh I see what you're Yeah. Yeah. Yeah. [98:16] Okay. I see what you're saying. So, this [98:18] this this is too too generic. Like, it [98:21] should be because the types are actually [98:23] going to be the word string or the word [98:27] number. Like, is that what you mean? [98:29] >> Yes. [98:29] >> The word boolean [98:33] uh and then I guess it'll be array. I [98:38] think that's it. Yeah, that's that that [98:40] would be better because the type can can [98:44] be like it can be any one of these, [98:47] right? [98:49] Number object. Oh god, there's a ton. [98:52] Um, so it needs to be one of these [98:55] options, not just a string because I [98:57] guess technically if I just type it as a [98:59] string, it could just be that and that [99:00] that that will be correct, [99:02] >> but it's like it that'll be correct from [99:05] a type point of view, but that won't be [99:06] what we want, right? [99:09] So [99:12] yeah, is that what you're That's what [99:13] you're asking me, right? See, this is [99:14] the kind of stuff that I, you know, I [99:16] have to get better at. So this this [99:18] makes more sense. [99:20] >> It's interesting. I I've taken a few [99:22] screenshots of what you're sharing and [99:24] I'm running through chat as well and [99:26] just trying to trying to wrap my head [99:27] around it as well. [99:28] >> No, this is great. I I mean, this is [99:31] more correct because we we this type [99:34] needs to be of the the type string, [99:36] right? or number. And I wonder if I can [99:39] test that if by putting something in. So [99:42] in here I've got no where is it? I had [99:46] to close the wrong one. [99:49] Pardon me. Sorry over there. Not that [99:51] one. Um [99:54] okay, we'll use this one. [99:57] Not that one. This one. So in here we [100:00] we've got this. So if I pass this as a [100:05] um [100:13] is that going to work? Like I don't [100:14] know. That doesn't seem right. [100:18] No, that is right. The value of that is [100:21] a string. Okay. [100:25] Am I overthinking this? [100:28] Because the other thing that doesn't um [100:31] well that is basically what the block [100:32] attributes look like and this is going [100:34] to be uh there is a [100:38] default [100:41] and the default is going to be a string [100:43] as well. [100:47] Right. I wonder if I get I don't get any [100:49] errors though [100:53] because I'm not The thing is it's not [100:56] it's not arrowing like I feel like this [101:01] that matches the example that the first [101:03] answer on AI gave me here. [101:06] >> Yeah. like [101:09] we we [101:13] >> oh we're we're we're um J2 trumpet we [101:15] are fighting around with um uh with with [101:19] TypeScript. Now the the thing is here [101:21] that by passing the this block [101:24] attributes [101:26] this isn't oh hold on hold on [101:31] I'm not thinking of this correctly [101:33] because [101:35] the block attributes that get passed to [101:37] here [101:42] don't have anything to do with this [101:44] block JSON like this type doesn't [101:46] necessarily matter. I'm not validating [101:48] this. I'm validating what's coming in to [101:52] the the edit [101:58] because it's not an object that comes [102:00] in, it's a value. [102:04] You know what I'm saying? Does that make [102:06] sense? So like in your edit, this [102:09] doesn't come in as like like this is [102:12] just a value. [102:17] So attributes is going to be [102:20] it should be more like this. So whatever [102:23] the key is it's going to be just a [102:25] simple value [102:31] that looks that I think that's more [102:33] accurate. [102:37] I keep looking at at at you guys like [102:39] yeah is that right? Because this is just [102:41] literally going to be the value of [102:43] whatever the block attribute is. [102:45] right in here because when when [102:48] attributes get passed to the edit or the [102:50] save component, they don't they don't [102:52] like we don't know what kind of type [102:53] they are. That's not passed as [102:55] information. It's just the value is is [102:57] passed and I'm pretty sure they're [103:00] always it's always passed as a string. [103:04] >> Yeah, I think that that's true. Uh yeah, [103:07] it's simply a way to tell the ID that [103:10] hey the value that comes here in this it [103:13] will be a string [103:15] >> and that's how you delete it in in that [103:19] function. [103:21] >> Okay. So block attributes gets passed to [103:23] edit. So in my edits see it's weird [103:25] because these this this should be [103:27] erroring shouldn't it? [103:34] block attributes. [103:48] Now I'm trying to like break TypeScript. [103:50] It's not working. So this this feels [103:53] weird to me because this attributes is [103:55] being passed into my edit and the edit. [103:58] So this is defining these attributes as [103:59] as being some kind of key defi um which [104:04] is a string followed by a num a number. [104:07] So the value of whatever this is should [104:09] be a number. But in my where I'm [104:11] actually implementing this here I'm [104:13] defining my block attributes as four [104:17] strings. They're in here as strings. But [104:19] this this should be yelling at me. [104:22] Should it not? I think it should yell at [104:25] you in execution like when you are [104:28] trying to load that in in the browser [104:31] because [104:33] >> I'm not sure [104:33] >> TypeScript error though, right? Like [104:35] it's it should be [104:38] >> I don't know if if Typescript can know [104:40] if that returned value from the edit [104:43] function is on [104:46] >> Oh, I see what you're saying. on the [104:48] same structure like [104:50] >> but I I bet that when you will execute [104:53] that code it will error out it will see [104:55] that it's a string is not a number and [104:58] it will [104:59] >> really okay let's let's let's check that [105:04] let's see do I have this I do close [105:09] uh this one [105:13] inspect console [105:18] Maybe [105:21] that. [105:26] Okay. So, that's that's not doing [105:28] anything. Okay. Well, I mean, it's not I [105:31] don't know. Whatever. This is the kind [105:33] of stuff that makes me like less and I [105:36] just don't know what I'm doing. But [105:39] like this feels like somewhere along the [105:42] lines this should know that um what's [105:45] being passed because I'm I'm defining my [105:48] block at attributes as a type and I'm p [105:51] I'm passing it here and so so this like [105:54] where where is this? [105:56] Oh. Oh, you know why? I think I need to [106:06] I think I might need to import that. [106:12] Um I need to change the the name of [106:16] this. Um [106:20] attributes. [106:24] So this this should be typed as should [106:26] be typed is how do I type that like [106:28] this? [106:32] All right. [106:40] I need to pass the speed. [107:06] I think that just needs to be passed in [107:07] there, doesn't it? All [107:15] right, I'm gonna have to jump out, Ryan. [107:17] >> My lunch my lunch break is over. [107:20] >> Okay. Well, thanks for hanging out. [107:22] Sorry, this has just been you looking at [107:24] my TypeScript code. Shouldn't need to. [107:27] What are you stuck on? Oh, Kevin, I'm [107:29] stuck on everything. I'm stuck on. [107:32] >> All right. Thanks, Troy. Thanks for [107:33] hanging out. [107:34] >> See you, bro. [107:36] >> All right. So, I'm just uh unsure why [107:39] this isn't erroring for me, but this [107:41] feels more accurate [107:44] um from a type point of view, but I'm [107:47] not going to get too hung up on it. And [107:48] it's it's afternoon and anyway, so I [107:51] think I might call it. Um thanks for [107:56] hanging out with me. The luck, your last [107:57] man standing. And anything you want to [107:59] say before before we jump up? [108:02] >> No, no. Have a great day. See you all. [108:04] Mhm. Well, thanks for hanging out. [108:07] Thanks for jumping on. Um, next week, [108:09] Kevin, your turning. You got to get on [108:12] here. Um, yeah. Cool. Awesome. Well, [108:14] thanks everyone for hanging out with me [108:16] today and, uh, help me fight through [108:18] some some TypeScript stuff. Great [108:19] conversation about TypeScript. [108:21] TypeScript. Yeah, I should definitely do [108:23] that. Um, cool. Awesome. Well, thanks [108:26] guys and gals and everyone hanging out [108:28] with me today. I I will see you next [108:29] week. You're the best. [108:31] Talk to you all later.  ## 📺 Video ![](https://www.youtube.com/watch?v=S7iz-lSkoh8) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: Inviting anyone to join my stream? What could go wrong?! ## 🧰 Action Inbox - [H1] Experiment with Twitch viewer call-ins — first-time feature test #streaming - [H2] Work on TypeScript block development — learning process documentation #typescript - [H3] Review WP Rig plugin feedback — promised community response #wordpress ## 🧭 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 - [WP Rig Plugin](https://github.com/wprig/wprig) - [Totally TypeScript Course](https://totaltypescript.com) ## 📝 Summary - Ryan Welcher experiments with Twitch viewer call-ins on his first 2026 stream - Multiple community members join to discuss WordPress development and TypeScript integration - Paul Baron shares a plugin proposal for managing code snippets with security considerations - Live coding session demonstrates TypeScript implementation challenges in WordPress blocks - Community discussion covers caching solutions, plugin development, and WordPress core TypeScript adoption ## 📖 Main Content This stream represents an experimental format where viewers can directly join the broadcast through Twitch's call-in feature. The session covers multiple WordPress development topics while demonstrating the technical and social dynamics of live collaborative streaming. The main technical focus involves implementing TypeScript in WordPress block development, addressing the lack of proper types in core packages. Ryan works through creating custom type declarations and demonstrates common challenges developers face when migrating to TypeScript. Paul Baron presents a plugin concept for managing code snippets with dynamic settings pages, raising important security considerations around arbitrary code execution. The discussion highlights the balance between functionality and security in WordPress plugin development. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/S7iz-lSkoh8?t=0) — [H1] Stream Setup and Viewer Call-ins Introduction - Key idea: Testing Twitch viewer call-in feature for interactive streaming - Evidence: "There's this thing in Twitch called viewer calling. People can actually jump up." #### ⏱️ [02:30](https://youtu.be/S7iz-lSkoh8?t=150) — [H2] 2026 Goals and TypeScript Focus - Key idea: Dedicating 2026 to learning TypeScript for WordPress development - Evidence: "2026 for me is going to be the year of Typescript. I'm going to learn it. I'm going to work with it in every project." #### ⏱️ [05:45](https://youtu.be/S7iz-lSkoh8?t=345) — [H2] Community Poll Results Discussion - Key idea: Audience split between JavaScript and TypeScript content preferences - Evidence: "It's still 50/50. I should have taken this. Why not both out?" #### ⏱️ [08:20](https://youtu.be/S7iz-lSkoh8?t=500) — [H2] React and WordPress Block Development Resources - Key idea: Recommending learning path for React in WordPress context - Evidence: "I would learn a little bit of React for sure... go to somewhere like the block editor handbook" #### ⏱️ [12:15](https://youtu.be/S7iz-lSkoh8?t=735) — [H2] WP Rig Plugin Discussion - Key idea: Community member seeking feedback on WP Rig's block building system - Evidence: "WP rig now has a block building system in it based on create block" #### ⏱️ [15:30](https://youtu.be/S7iz-lSkoh8?t=930) — [H1] Paul Baron Joins Stream - Key idea: First successful viewer call-in with audio/video setup - Evidence: "Paul, are are you there, sir? Okay, I can see you, Paul, but I can't hear you." #### ⏱️ [18:45](https://youtu.be/S7iz-lSkoh8?t=1125) — [H1] Code Snippet Management Plugin Proposal - Key idea: Paul presents plugin for managing code snippets with security considerations - Evidence: "Managing insertion of code snippets... we split it up and you know we can actually control what is" #### ⏱️ [25:10](https://youtu.be/S7iz-lSkoh8?t=1510) — [H2] Security Concerns in Snippet Management - Key idea: Discussing risks of arbitrary code execution in WordPress plugins - Evidence: "What would keep somebody from putting a two some script tags with some malicious code in there?" #### ⏱️ [28:30](https://youtu.be/S7iz-lSkoh8?t=1710) — [H2] Troy Joins for Caching Discussion - Key idea: Second viewer joins to discuss server optimization and caching - Evidence: "We were just looking at implementing uh Surge on our servers just to get some some better full page caching" #### ⏱️ [32:45](https://youtu.be/S7iz-lSkoh8?t=1965) — [H2] Nonce Caching Problems Solution - Key idea: Addressing nonce expiration in cached forms using JavaScript - Evidence: "Load the page and then run JavaScript immediately to update portions of the page that need to be updated" #### ⏱️ [38:20](https://youtu.be/S7iz-lSkoh8?t=2300) — [H1] TypeScript Implementation Challenges - Key idea: Demonstrating custom type declarations for WordPress blocks - Evidence: "In WordPress for example in our blocks package there's no proper types" #### ⏱️ [42:15](https://youtu.be/S7iz-lSkoh8?t=2535) — [H2] Totally TypeScript Course Review - Key idea: Learning TypeScript through structured online course - Evidence: "I'm taking this course... Totally TypeScript by Matt PCO" #### ⏱️ [45:50](https://youtu.be/S7iz-lSkoh8?t=2750) — [H1] WordPress Core TypeScript Integration Discussion - Key idea: Plans for adding TypeScript support to WordPress core packages - Evidence: "I think we need it. I'm actually working on helping to get that done" #### ⏱️ [52:30](https://youtu.be/S7iz-lSkoh8?t=3150) — [H2] Community Perspectives on TypeScript Adoption - Key idea: Discussing community division on TypeScript in WordPress - Evidence: "There are Typescript enthusiasts... then there's this other side from Twitter that's oh no... they're following butterflies" ## 📚 References - [WP Rig GitHub Repository](https://github.com/wprig/wprig) - [Block Editor Handbook](https://developer.wordpress.org/block-editor/) - [Totally TypeScript Course](https://totaltypescript.com) - [WordPress Core TypeScript PR](https://github.com/WordPress/gutenberg/pull/[MISSING]) ## 🗣️ Paraphrase - Ryan experiments with interactive streaming by allowing viewers to join via Twitch call-ins, creating a collaborative development environment - The technical discussion centers on implementing TypeScript in WordPress block development, addressing missing type definitions in core packages - Community members present various plugin concepts and development challenges, highlighting the collaborative nature of WordPress development ## 📰 Newsletter **Interactive WordPress Development: Exploring TypeScript and Community Collaboration** This week's stream showcased an experimental approach to developer education through interactive broadcasting. The combination of live coding, community participation, and real-time problem-solving demonstrates new possibilities for WordPress developer engagement. Key highlights include practical TypeScript implementation strategies for WordPress blocks and community-driven plugin development discussions. The interactive format allowed for immediate feedback and collaborative problem-solving. **Practical Applications:** - TypeScript integration strategies for WordPress development - Security considerations in plugin development - Caching solutions for dynamic content Resources: [Learn WordPress](https://learn.wordpress.org/), [Block Editor Handbook](https://developer.wordpress.org/block-editor/), [TypeScript Handbook](https://www.typescriptlang.org/docs/) ## ✅ Action Items #### DevRel - Developer advocacy: Document TypeScript adoption patterns for WordPress community - Education: Create TypeScript learning path for WordPress developers - Developer experience: Address missing types in WordPress core packages - Community management: Facilitate interactive streaming for developer engagement #### WordPress - Core: Progress TypeScript integration in block packages - Core Performance: Address caching challenges with dynamic content - Community: Support interactive formats for developer education - Documentation: Create TypeScript migration guides for plugin developers - Plugins: Establish security guidelines for code snippet management plugins #### Community - Contributors: Engage in TypeScript adoption discussions - Ecosystem: Balance innovation with backward compatibility concerns ## 🧪 Hypotheses - Interactive streaming formats increase community engagement and learning outcomes - TypeScript adoption in WordPress core will improve developer experience without fragmenting the community - Security-conscious plugin development requires balancing functionality with safety measures - Real-time collaborative problem-solving accelerates learning for participants and viewers ### 📊 Methodology - A/B testing of traditional vs interactive streaming formats for engagement metrics - Survey WordPress developers on TypeScript adoption barriers and benefits - Security analysis of code snippet management approaches in WordPress plugins ### ❓ Questions - How can WordPress balance TypeScript adoption with accessibility for new developers? - What security frameworks should guide plugin development for code management features? - How do interactive streaming formats compare to traditional documentation for developer education? ### 🔮 Future Research - Long-term impact of TypeScript adoption on WordPress plugin ecosystem - Effectiveness of interactive streaming for technical education - Community response patterns to major technological shifts in open source projects ### 💡 Implications - Practice: Developers need strategies for gradual TypeScript adoption in existing projects - Policy: WordPress core needs clear guidelines for TypeScript integration timeline - Security: Code snippet management plugins require rigorous security review processes - Education: Interactive formats may supplement traditional documentation effectively - Community: Technology adoption discussions benefit from inclusive dialogue approaches ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade (technical content with accessible explanations) #### 👀 Visual learners - Present: Live coding demonstrations, plugin interface mockups - Improve: Architecture diagrams for TypeScript integration, visual security flow charts #### 🔊 Aural learners - Present: Live discussion, verbal explanations of concepts - Improve: Structured audio segments explaining key concepts #### 🗣️ Verbal learners - Present: Interactive Q&A, definition of technical terms - Improve: Glossary of TypeScript terms for WordPress context #### 🧩 Kinesthetic learners - Present: Live coding exercises, hands-on problem solving - Improve: Step-by-step TypeScript migration guides, interactive tutorials #### 🧠 Logical learners - Present: Problem-solving sequences, technical decision trees - Improve: Flowcharts for TypeScript adoption process, security decision matrices #### 🧑‍🤝‍🧑 Social learners - Present: Community discussion, viewer call-ins, collaborative problem solving - Improve: Structured peer review processes, group learning challenges #### 🧘‍♀️ Solitary learners - Present: Individual coding challenges, self-paced course references - Improve: Personal reflection prompts, self-assessment tools #### 🌿 Naturalistic learners - Present: Evolution of technology adoption patterns - Improve: Ecosystem thinking about WordPress development environment ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Live verbal descriptions of visual code elements - Improve: Alt text for code snippets, descriptive variable naming #### Keyboard navigation - Present: Live coding demonstrates keyboard-focused development - Improve: Keyboard shortcut documentation, navigation guides #### Contrast and readability - Present: High contrast code editor themes - Improve: Consistent color coding standards, readability guidelines #### Media and captions - Present: Live audio discussion with multiple speakers - Improve: Auto-generated captions, transcript availability ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global community participation through streaming platform - Improve: Multi-timezone considerations, international case studies #### Inclusive language - Present: Technical discussions using accessible terminology - Improve: Avoiding insider jargon, defining technical terms consistently #### Neurodiversity support - Present: Multiple input methods (audio, visual, text chat) - Improve: Structured agendas, clear topic transitions #### Representation - Present: Multiple community members contributing expertise - Improve: Diverse technical perspectives, inclusive participation guidelines ### ✅ Logical Validity #### Strong reasoning - Deductive strength: TypeScript benefits identified through specific WordPress development challenges - Inductive strength: Community patterns extrapolated from individual developer experiences - Causal reasoning: Security concerns linked to specific plugin functionality risks - Analogical strength: Comparing WordPress TypeScript adoption to other framework migrations #### Fallacies - Appeal to novelty: Assumption that newer technology (TypeScript) is inherently better - False dichotomy: Framing TypeScript adoption as all-or-nothing decision #### Tone of voice - Overall tone: Collaborative and experimental, encouraging community participation while acknowledging technical challenges ### 🛡️ DARVO Analysis - Deny: No denial patterns observed - Attack: No attack patterns observed - Reverse victim/offender: No reversal patterns observed - Emotional cues and rhetoric: Positive, collaborative tone focused on learning and community building ## 🎯 Conclusion This experimental stream format demonstrates the potential for interactive developer education within the WordPress community. The combination of live coding, community participation, and real-time problem-solving creates engaging learning opportunities while addressing practical development challenges. The TypeScript discussion highlights the ongoing evolution of WordPress development practices, balancing innovation with accessibility. The security considerations raised around plugin development underscore the importance of careful design in extending WordPress functionality. Moving forward, interactive formats like this could supplement traditional documentation and conferences, providing more accessible ways for community members to participate in technical discussions and collaborative problem-solving. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Interactive streaming improves developer community engagement > [!quote] [Inviting anyone to join my stream? What could go wrong?!](https://www.youtube.com/watch?v=S7iz-lSkoh8) by [[Ryan Welcher]] via [[Twitch]]. Published 2026-01-01. Accessed 2025-01-15. > "This is the first time I set this up, so this is fun. But I want to make sure that you can actually hear what Paul's saying" Demonstrates experimental approach to developer education through real-time collaboration. [view highlight](https://youtu.be/S7iz-lSkoh8?t=930#H1) #xref #streaming ID:rw_001 ### [H2] TypeScript adoption requires gradual integration strategy > [!quote] [Inviting anyone to join my stream? What could go wrong?!](https://www.youtube.com/watch?v=S7iz-lSkoh8) > "I think we need to get the types in in there first, get in and get that passing and then starting to add these types to the codebase" Shows practical approach to large-scale technical migrations in open source projects. [view highlight](https://youtu.be/S7iz-lSkoh8?t=2750#H2) #xref #typescript ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Security concerns scale with plugin --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=S7iz-lSkoh8)* **[05:06]** Hi everyone. How's it going today? Welcome to the first game. I don't know watching right now. Cool. If you were all right, if you're here, say hi. Um, I'm trying something new. Trying something new today, which I don't know if this is going to work out. There's this thing in Twitch called viewer calling. People can actually jump up. **[05:40]** You know what? It's really hard to hear me when my microphone's way over there, I'd imagine. I don't know what I'm talking about. Okay. Do I have audio? Let's check. Hello. Check one, two. Check one, two. There we go. All right. So, anyways, as I was saying before, um, today is first stream of 2026. Pretty excited to be back. Had a great holiday. Um, and I uh I'm doing something new. I might do this every week. We're going to see how it goes today. Very Is the audio still very soft on **[06:11]** your side? I I uh realized my my microphone is really really really far away from my face there. So, it's probably what it was. But audio should be pretty crispy now. [snorts] Um, let me know if There we go. Kev XP, how's it going? Oh, you know what? I I didn't do didn't connect my Firebot. [snorts] There we go. That's why I can't see anybody. Okay, so Kevin, you're not going to get the shout out because my **[06:42]** Firebot wasn't connected. Yeah, thanks. Thanks, Techies Review. Uh, appreciate that. Um, I had my microphone in the wrong place. Oh, there's my dog barking. You can hear him. There he is. So, um, anyways, there's this thing in Twitch called viewer call-ins where if you have a tw a Twitch account, I think you have to be phone enabled, uh, you can call in and we can chat. So, if you're ruined your night Oh, it is night. Well, Kevin, why don't you just jump on the old Twitch account and come on in to **[07:14]** your >> There it is. I turned the thing on and then it realized that you chatted. So, there you go. There's a shout out for Kev XP. Um, [sighs] nice. You can sleep [snorts] tonight. Oh, you can't sleep tonight until you do a viewer call in. Kevin, go get on your Twitch channel. I know you got one and a microphone and do a call in and you can come on the stream with me. You can talk. Call in. Do Yes, we'll **[07:45]** debate whatever you want to debate. Typescript. You can tell me what I'm doing wrong with Typescript. Uh 2026 for me for me is going to be the year of Typescript. I'm going to learn it. I'm going to work with it in every project. Um and it's going to be fun. [laughter] That's my plan. So yeah, tell me C. Actually, Kevin, if you're interested, jump on. What's the vote count? The vote count. Oh, did you were Were you the one that voted or two that **[08:16]** voted? Let's see. Let's take a look here. Uh where are my posts? The vote count right now is sitting at two votes. One for JavaScript. If you haven't I I would love um some uh you were first. Nice. Well, Kevin, you are first in my heart as well. So, that is the the the poll to my YouTube account that I just I'm just trying to get an idea of what people want to see on my um channel here. So if **[08:48]** you're interested, please hit that link and go tell me what you want to see. If there's something that's not on like it's very generic. It's like do you want JavaScript now? Who? Yeah. Well, I know I know which which vote yours was, Kev. [laughter] U JavaScript, TypeScript, PHP focused stuff. I was thinking, you know what, there's a lot of a lot of knowledge out there and WordPress that um um people who've maybe been around for a while. I'm I'm not the other one. I didn't vote. Um **[09:21]** already know. So like oh tech techies review also curious to start learning about React and WP just like PHP in the good old days. What would be your go-to sources? Um this is a good question from uh although I can't highlight it. It's in um it's in YouTube uh techies review. You're more than welcome to just stay over there in YouTube but the chat mostly happens in in Twitch. So if you're interested come on over. But the question is, curious to start learning React WP, just like PHP in the good old days. What would you what would be your go-to sources? Well, I would learn a **[09:52]** little bit of React for sure. If you're not familiar with React at all, you there's a million courses out there just to get up to speed on React. And after that, I would probably go to somewhere like the block editor handbook and like the getting started guide. So this is going to teach you the the fundamentals of block de uh uh development which is kind of where the majority of um JavaScript development is happening inside of WordPress. Um, so this is a a good place to go get started and you **[10:23]** could just uh you know the other thing is you can just hang out here. Just uh subscribe to my channel, [laughter] follow me on Twitch and Twitter and wherever and we'll talk about stuff because this is what we do here is we talk about WordPress and uh and React, JavaScript and React and stuff like well not so much React more like how WordPress react and JavaScript all kind of intersect. That's sort of the idea behind it. Um, Kevin, I still don't see you in my callins. **[10:53]** Anyways, um, yeah. All right. So, let's let me refresh this. You six votes. Oh my god. Are you kidding me? It's still 50/50. I should have taken this. Why not both out? I should have done that a little bit different. [snorts] Um, so lots of people want to see JavaScript type crypt. More people want to see both. So that doesn't help me at all. It's my own fault. All right. Well, speaking of Typescript. Ah, thanks Techiey's review. Appreciate **[11:24]** that very much. Um, I do have combined chat. Uh, but some of my chat I I can't I I would highlight your your question on the stream, but I only get uh chat coming in um from um Twitch in there. WP rig now has a block building system in it based on create block. Curious about your thoughts on it. H Arbog 17. **[11:56]** WP rig. Why does that sound super familiar to me? I think I know. What is WP rig? Let's take a look. Wait a minute. Is there get up for this? **[12:43]** Where's the repository? Ahation. Where's the repository? Oh, Rob. Rob. Yes, you asked me about this before. I'm sorry. I owe you some **[13:13]** [snorts] feedback on this. Um, yeah, you reached out to me. I'm sorry. There's a uh I need to I need to do a dive into this. This is something that uh Rob uh Ruiz who's uh spoken with me a number of times and asked me about this. Um and I owe him feedback on it. Um, I think like at a high level, I think anything based on create block is the right way to go because if you're using create block, you're going to be using what like the industry is using. So that's that's a great first step. That's my opinion. That's that's for sure. This **[13:44]** looks like it's super robust. It's a blog article and documentation page. Let's take a look. Blog documentation. Boom. Documentation. Bootstrap CSSEX browsers CSS JavaScript and custom blocks including scripts. Oh, nice. So, you have Okay, cool. cleaning your code with PHP editing. This is great. I'm I'm gonna I I'm going to read this and I'm going to get back to you on this and I do apologize for **[14:15]** not doing that sooner. So, um I'm just uh kind of lazy. Morning Paul. How's it going, Paul? Um so, like I said, I've got viewer callins active. So, if anyone's on Twitch and they want to jump on stream and just say, "Hey, you don't have to have anything to talk about. We we we can just, you know, chat. Nothing. It's not, you know, nothing formal. It's all good. Um, we're uh we're just hanging out." But any anyhow, okay, so WP Rigg is is a thing that I I I need to check out. I'm going to check that out. I I **[14:46]** promise you. Um, I'm also looking for votes on my YouTube channel. If you go to posts here, you can tell me what you want to see in 2026 or just give me an idea of what we're doing there. Um, oh, Paul Paul Baron coming in. All right, let's see. I've never done this before. Going to see what happens. I'm going to invite you, Paul. Oh, where'd you go? **[15:24]** Oh, okay. Here we go. All right. Paul, do you Paul, do you have a camera? I can't hear you or anything. So, show on stream. Here we go. Yeah, sure. Here we go. Paul, there he is. Am I streaming outside? No. Paul, are are you there, sir? **[16:00]** Okay, I can see you, Paul, but I can't hear you. >> One, two, three, four. >> Oh, there you are. All right, cool. Um, okay, chat, you tell me. Can you hear Paul? What are we looking at? Oh my Oh, what's this? Paul's Paul's linking his his Twitch thing. Oh, I don't want that. That's okay. All right. So, you're on stream there, Paul. I don't know if you can see yourself or not, but uh say hi to everybody and and **[16:31]** chat, let me know if you can hear this. This is the first time I set this up, so this is fun. But I want to make sure that you can actually hear what Paul's saying, and I can uh I can boost the audio if that's needed. Paul, can you say something for me? Troy Chaplan. **[17:02]** >> Chap. [laughter] >> It's Troy Chaplan. All right. What do we What's the luck? I am not streaming outside. I'm just uh I need a haircut and so I decided to wear a hat today. Managing insertion of code snippets. Easy way out. Yeah. Yeah. Yeah. For sure. Um Paul, I don't know. Are you hearing me? **[17:33]** Okay. I don't know what's going on with the audio. It popped into another window. All right. I don't know if Paul's hearing me or not, but if he is, cool. So, anyways, what what is this? What is this? So, Paul's talking about this is a plug-in proposal for insertion of code **[18:05]** snippets. Interest interesting. Oh, I can kind of hear you, Paul. You're pretty quiet, though. Let me see if I can boost your audio here. **[18:36]** Yeah, we opened up very quiet channel. Okay. >> And I can see >> Hey, Marcus Bernett. How's it going? All right. Well, Paul, you're welcome to hang out in the stream here with us today. We'll see how how it goes. So, what is this thing we're looking at? This is a plug-in proposal for managing snippets. So, I know there's a ton of plugins that do this, right? Um, **[19:09]** >> yes, but they all it's a single every single one of them is like here's the for Oh, but the echo is horrible. [laughter] >> Sorry. So, you're saying that Let me Let me just maybe turn my my music off. Individual plugins tend to support um just one snippet. **[19:41]** >> Oh, I see what you're saying. >> So, this idea is the you can take the base snippet. Yeah. >> And just paste it straight into this uh interface. We split it up. we make a settings page for those values. Um and and then we can control where on the page it gets gets and how it gets added. **[20:14]** >> Right? Okay. >> So we can then optimize the placement of the snippet. we maybe combine snippets together and if there are options for them. So like a lot of the chat bots have like colors, icons, things like that. We >> have an interface where people can actually adjust their look and feel. >> Right. Okay. **[20:45]** And so so also I'm going to s suggesting we support like JSON's JSON JSON file so people can put a JSON lump in yet to describe um and that would generate a settings page which people then could fill in. We could have a collection of JSON file JSON configurations that we preload and you just like click a button to to end that snippet. **[21:18]** >> It's just an idea. >> Okay. >> Yeah. Script blocks are all lots of options to be managed. So I mean I think I think probably like and and like Weston Weston's comment here is is sort of what was the first sort of comment that I had as well. I mean, this is just my, you know, initial reaction. Like, I have I hold no sway over whether things move forward or not, [snorts] but I would be concerned about like if being able to insert snippets, how you can **[21:49]** control the security around that. You know what I'm saying? because we split it up and you know >> we can actually control what is >> sorry say that again Paul there was a there was a a thing running over top you there and >> yeah and and is this is more this is **[22:21]** safer than just allowing someone to drop JavaScript into the head Right. But how is it? But okay, maybe I don't understand the implementation possibly. Let me just read this again. So create settings allow management of code simp control when and how they were added to rendered HTML. Add a sending a settings page that enables adding selecting script of script blocks and allows the options to be managed. There are lots of instructions. **[22:54]** Okay. So, okay. So, you're creating a a location to paste the snippet, then parse it, store it as a as a CPT or whatever. Create settings that control how it is loaded, adjust it. We also allow block JSON to be pasted as well to create a setting with options for the scripts that allow part of the settings control. Okay. Part of the settings control where the sims are added to the page or bundled into larger external file. Okay. So, **[23:24]** >> so the JSON describes the options for the snippet, >> right? So, what kind of like So, what would be an example? So, you have a you have a like so like and and again I may not be just not grocking this properly, but at the end of the day, this sounds like the ability to insert arbitrary code and then have it rendered in certain places. That's a that's a super distilled like you know no nuanced **[23:56]** um sort of description of that. Is that accurate? >> A li a subset of code um not anything >> right? But how how so how would how would we control how would you control? >> So someone wants to put in a like they want to they want to drop a scripty >> heyy >> oh my god it's the longest **[24:28]** >> that is the longest one so far it's crazy. Uh no you're not interrupting. It's all good. It was an automated thing I did. Um, so like what would keep somebody from putting a two some script tags with u some malicious code in there? Like how how would that be validated or would it be validated I guess is the question. >> Um, probably it is somebody could do **[24:59]** that. They were clever, but we could probably also put some in that certain things are not not allowed is valued because we actually pass the context. Um, >> right. Okay. I mean, that's a problem. >> How is this how is the risk any greater? >> Sorry, go ahead. And >> someone just pasting it into the header or the footer. **[25:30]** Um, it's not it's not I think it's I think I don't think it's any greater risk. I think it is um just core approved risk if that makes sense. >> If that's if if the intention is for this to be part of WordPress core, then we're giving people license to shoot them in the foot to shoot themselves in the foot by just dropping any random snippet. I mean, again, I I don't know the full scope of this, so I'm I'm not saying no, it's a bad idea. I'm just like wondering, you know, **[26:01]** >> it's it's a mad idea at the moment. >> I'm just >> Yeah. Okay. Well, cool. Well, I mean, I don't think it's impossible to do this, >> you know? I don't think I think I think it's it's sort of like >> it's the same reason why SVGs are so controversial in core, I think. Right. Um because it's very hard to make them safe. >> Yeah. >> Because there's so many permutations and iterate and and options and and things and like you know so I think we're kind **[26:32]** of treading in that territory. But what's Kevin saying? You totally tell me >> you can have custom GS runtime val code. I do it with my CSS plugin. Yeah. So that's I mean there I think there's technical solutions to this for sure. Um I think there's two questions. one is it is it a plugin or is it part of core? That's probably the the the big one. And if it's part of core, that's a huge uh conversation. It probably should start out as a feature plugin anyways, right? **[27:02]** Like that's >> Yeah, >> that would be my >> Yeah, >> you be able to iterate on it and to see if it becomes use. >> Yeah, for sure. >> Yeah. and.org would probably never accept a plugin like that. But if the intention is is is not plugin like that. >> Uh probably the JS runtime I think is what Kevin's talking about. Oh yeah, I I think Kevin's talking. So he has a J a custom JS runtime that validates the code. He has that with a **[27:33]** CSS plugin, right? And uh and I think he's referring to.org not wanting to accept a plugin that does that. not necessarily what you're trying to do, but like what what he was doing. He said took him took me a lot of effort to get the the CSS. So, um, but I mean, if it's a feature plugin, that's not >> I don't It's a cool idea. It's a cool idea. >> Paul, you've always got cool ideas every time I talk to you. Like, hey, let's parse all schema. **[28:05]** >> What's that? >> Yeah. Um and and we have a collection of like buttons that you can like search for snippets that are formatted Jason hand on it and so you could like select your chatbot you want to do creates a setting page. You fill the values in default values put your key in and bingo it works. And we can do things **[28:38]** like putting it in the footer wherever we can, >> right? >> Because the instructions always say put it in the head. >> Yeah. Yeah, I think that makes sense. Having a plug would be better, though. Yeah. Kind of like a plugin. Yeah. I mean, it sounds like um I mean, you know, you just got to get the Have you **[29:08]** started any work on it or is this just just an idea at this point? >> No. Um I want to knock it around. >> Oh, you made a wise choice, my friend. >> Thanks for the sub, Marcus. Appreciate you. Um that's awesome. Um yeah, we're doing viewer comments, too. So, if anyone else if all you need is a Twitch account and you need to be watching and then you can you can come on in and we can we can we can discuss whatever you want to talk about. There is a bit of a **[29:38]** delay though I think when I talk and then Paul you're you're hearing it a few seconds after me. So, it's sort of like when you see the the news anchors in another part of the world. So, I don't know. Maybe that's just way the way I have it set up. So, we'll figure it out. But, um yeah. So, if you want to jump on, just go do a call in through Twitch and you can come on talk with me and Paul and whoever else wants to join, chat about whatever. [clears throat] What else you working on today uh these **[30:08]** days, Paul? >> Um, still doing stuff on Matador Matador jobs. Still doing business. I actually Mhm. >> I went and had a look at the schema.org. Moved it forward a little bit. >> Oh yeah, that's cool. >> Uh yeah, there's a bit of a pull request **[30:38]** out there. Um >> Oh, it's like is this on my repo? I should just give you full access to it. Hold on. >> Yeah, it's a request to go to your repo. Okay, let's see what we can do here. Let's go take a look. Did Did you fork it or like I can just give you the the repository if you want. What's the thing called? Uh >> I forked it. >> Oh, you forked it. Okay. >> No, I prefer No, it's this one. **[31:14]** >> Oh, wait. Is is this the one? >> Should I do a pull request? >> No, I don't see a pull request. Unless it's >> Oh, let me do let me find do a pull request so you can see it. >> Yeah, you can defin I'll I'll I'll just merge it. [laughter] YOLO. I'll do a YOLO merge. All right, listen. Those folks that are on the stream that are not calling in, I **[31:46]** want you to call in right now. Come on, let's do it. Let's have fun. You don't even have to go on camera if you want. You can just do audio. Paul's the only brave soul here. [laughter] Wow. Is this from two years ago? Oh my god. >> All right. >> Is that Is that how long it's been since since we >> Yeah, it's a pull request now. >> Is there Okay, let's take a look here. you working here. Um, I I've got it showing out the content, **[32:18]** but I haven't got it doing the looping because we need to >> is this content object or a text field? And so we need to down the the data stack we've got so that we end up at the native text or number values. Right. >> Yep. >> All right. >> Um, so **[32:49]** >> but we're quite close. It really is getting >> Yeah, I haven't really uh I I I haven't really looked at it in a while. Where did we end up with this? I think we ended up with like Did we get an admin page? I don't remember how how how this all worked out. >> There's an admin page. Um, and I've made a block that that starts to show the inputs. **[33:24]** >> Oh, right. And doesn't it like Oh my god. Did Did you Did you do this or did I do this? I don't think I did this. Did I do this? >> Oh, maybe I did. I don't. >> So, that's this is generating patterns, right? >> I can't remember. I didn't remember. So, selected patterns. >> Holy jeez. >> Um, >> and some of this is AI generated. So, >> oh yeah. Yeah, that's probably that's **[33:54]** probably how I did it. If I did it variations, we got on your index. We got variations. >> I did. >> Oh, okay. was there there must have been oh one podcast I don't know cool well I hope that this is something that uh carries on that you're able to to work with >> I would love to work more on this in future **[34:24]** >> here oh right okay this is sort of like plugin controls h interesting Coolio. All right, I'm put my my music back on if that's okay with you, Paul. Got to have that heavy metal rocking. Um, turn it down. There we go. So, something I'm working on right now, and I don't know why this is doing this, but I'm working on um a **[34:56]** couple of blogs. So, like I said, this is um this is me going just diving head first into all things type T type script. So, um, as we know the the the blocks package, this is really annoying. Come on. Did this yesterday now? Now I know why it's not doing that. Why can't I find the name space react or JSX or element? >> You need to move me across the screen. **[35:28]** >> Oh. Oh, okay. Let me just uh let me just uh change that like this. How's that? There you go. Uh let's go across. Nah, let's go over here. >> There we go. >> That out of people's way. >> That's what we'll do. So, anyways, what I've been working on is I have this we're doing this project at uh from a job where we're we're building like a showcase of stuff for for Oh, Lord of Blood. He's calling in. All right. **[35:59]** Hold on. Here we go. Let's see what happens. [laughter] All right, let's see now. Better be wearing a shirt. Lord of Blood. Serge implementing our dev server. Oh, boy. All right. I don't know what what happened there, but uh I invited you, Lord of Blood. Get you in here whenever you show up. I don't know. Takes seems **[36:29]** to take a second. So, this is my first time doing it. We're all right, Troy, get your Twitch account open and jump on the call here, man. Let's do it. Let's do it. Y'all can tell me what I'm doing wrong with with my TypeScript. Oh, there's Troy right there. All right, here we go. Oh, this is getting crazy. We might have too many people. I'm excited. I don't know where you're going to show up. I'll probably have to move move this around. Um, anyways, Kevin, you'll know why. Okay. So anyway, so in WordPress uh for example in our um in in our blocks **[37:01]** package there there's no proper types, right? So we're running into some problems there. So uh like so annoying. Um so to get around doing this I' I'm I'm doing my own types. I'm I'm declaring a module and I'm adding all of my types in there. Oh, there's Troy. Let's just see. Previewing. All right. I'm going to just push you to **[37:32]** the call there. Where's Troy? Oh, better move you guys. Uh maybe I'll put you across the top. Is that There we go. Troy, are you talking? I think **[38:05]** >> Oh, there he is. I see you, Troy. Can I hear you, though? That's the question. Here, I'm turn my my my music up here. Troy, can you hear me? Okay. Can you hear me? Okay, Troy, >> I can. Can you guys hear me? >> There we go. Okay, I think I know what I was doing wrong. I can hear you. Um, I **[38:35]** think chat can hear you. Just go ahead and talk for a sec. >> Hello. >> Yeah. Okay. I think I think the problem is you're getting Yeah. All right. So, I didn't set this up properly. Lord of Blood, where are you? I don't see you in there. Okay. What What was happen? So, I' I've got this window uh behind the scenes here, and you all show up o o over here and stuff, and I had my my mic muted, and I think what was happening was you're hearing me delayed through the through the the the stream. And so, I I need to turn my mic on here so y'all **[39:05]** can can uh can hear me properly, I think, because there's no delay now, right? Doesn't seem to be, but I don't see your face. So, I can't see if there's a delay or not. >> Oh, you can't see my face. >> No, I can I can see Paul, but you're like It looks like your video is off. >> You're You're responding almost immediately after I'm I'm talking, which which was not the case with Paul because I think hearing me through >> the Twitch pop up. >> This is the the stream together thing **[39:37]** that I'm in. So, like I I manage this. You can. Yeah. A countdown from five. Well, if I turn my my video on, you'll you'll see me. Don't send. >> You'll see me. You'll see myself. And we don't need that. >> Nobody needs that. You can already see me. Um, but Lord of Blood, where you at, man? I saw you in there. And then did you get nervous? [laughter] If [snorts] it turns up turn the video in the app, you'll lose. Yeah. **[40:10]** Well, I can turn my camera on, but I don't want my camera on in the background here because I'll I'll I'll lose I I I did this before. Oh, I see. Lord, uh I did this with um Justin Tadlock once and I left my video running in this thing and then it just basically killed my bandwidth. So, I'm turning all the videos are off in here, but I can see you guys on stream through OBS and I'm assuming you can see me and we can talk. This is so much fun. [sighs] So, Troy, what was your meeting about? **[40:41]** >> Oh, we were just looking at implementing uh Surge on our servers just to get some some better full page caching going on. >> Nice, nice, nice, nice, nice. Oh, um, speaking of caching, I'm thinking about doing a stream on uh word on old like an old school topic that's near and dear to my heart is uh uh like like caching. So like the transient API, WP cache that all that stuff. I'm >> I don't know why. Oh, who is that? **[41:11]** >> Paul, do you just rip a fart? >> Do do you include the ability, you know, how to manage clearing caches? >> Clearing what kind of caches? Like transit caches or like >> one of the problems I >> um no page caches. So, one of the problems I have is that I have a form >> with a with a nons in it and that nons um gets expired and the b is cashed. **[41:46]** [snorts] >> Um >> so fails. >> Yeah, because it's cached. Um, can you update the knots on the form submit? Like can you how your So is your form is your form being done like is it being submitted through like Ajax or submitted through >> like a um >> because if what you can do >> submit back to the page I mean you could **[42:22]** but your your knots is being generated on the page right? So I don't I this might be a dumb idea but with the way that that we used to do it back in the day when I was at Tenup and we were working with VIP VIP has has extremely aggressive page caching. So you couldn't have anything on the page that that >> that was like dynamic in the sense of like user in information. So if you're a logged in user you couldn't like show it in PHP because it it would get cached. So a lot of times what it would do what we would do is we would load the page and then run JavaScript immediately to **[42:53]** update portions of the page that need to be updated based on the user. So you could do something like that because your knots is just it's stored in a in an input field, right? Like it's just it's stored in there. >> So you could do something like that maybe where the page loads and then once it's loaded the knots is updated with a like using Ajax where where you can generate the knots on you know and then insert it that way. I'm I'm I'm not I'm not sure. It's been a while since I've done that. I know that this this is a problem that has been solved. Troy, what **[43:23]** do you think? >> We have got some code doing that kind of >> Yeah. This is not an area that I'm really overly knowledgeable on. So, I'm not going to put my foot in my mouth and say something completely incorrect. >> Do it, man. Put your foot in your mouth. Do it. Just do it. Just um expose all of your nonsas in the console. That's the way to do it. Just have them all out there and all your API keys. That's That's the That's the correct way of doing it. [laughter] **[43:56]** >> Yeah. Just put all the API keys up there. Someone else do that so we can use them. Yeah. >> Exactly. Expose them to chat bots and to AI. It's the way to do it, man. Telling you. Um I I would try something like that, Paul. Um because I don't like I don't I mean >> Yeah. >> The thing is The other part is that >> really they're not truly numbers just once in >> sorry what's that >> in matador jobs we have a a a background **[44:29]** task which updates a list of jobs every 10 minutes um and so you need to clear caches regularly so that the new jobs appear otherwise recruiters get really confused Why isn't my job showing on the page? >> Yeah. No, no, no. That that totally makes sense. Um, >> yeah, I I I would I would probably try to refresh that section of of the page using JavaScript of some form, just **[45:02]** injecting the knots or or on form submit. >> Yep. >> Before like before the or Yeah. Well, yeah. I mean, you could do it with JavaScript as well, but then I mean, you need to have JavaScript enabled, but which is like everyone's site, but you could do something too that like when the form button is is submitted, you could get a refreshed version of that knots and then and then and then submit the form, you know. I don't know. I feel like I'm overthinking it. [snorts] I feel like I'm overthinking it. I am overthinking it. The L the L is saying **[45:34]** what? Nice to see. I discovered people doing some stuff in that Sorry, you've got code doing some of the stuff in the um in the submit process. >> Yeah. No, I stopped because I start hearing the echo. Um we we've got code that's doing some JavaScript to do refresh on. >> Okay. **[46:04]** >> But it's never perfect. >> Yeah. And [snorts] I don't I don't really know a ton about caching and and clearing and all that stuff. But one of the things we were looking at in the last couple of days with the surge plugin was just just testing to make sure like it it was cuz it clears the cache for each individual page as new content gets created. I don't know by looking at that code is something that you could pick up on from there that might work to solve some of the issues you're struggling with here. [snorts] **[46:37]** >> Okay. Yeah, the the love's got a good point, too, because I mean, if you have an Ajax request that's generating that for a non-logged user, then anybody can just get nons for your site. So, it's a little it's a it's a tough nut to crack for sure. >> Yeah. I'll drop the the link to that plugin in the chat. I saw this one a while ago. It's pretty good plugin. **[47:09]** >> [snorts] >> Do you have to cache the form? Like what if you didn't what if you I I guess page caching is controlled outside of your the plugin, right? like it it like you there wouldn't be a way to to accurately say I don't want this I I don't I I don't want this page cached like the user would have to do it because you because you could cache all **[47:40]** of the contents of the page using like a transient and cache the HTML so you're not doing lookups like Crazy. >> I'm not getting any audio. >> Go back to your type script stuff. >> Sorry. Were you not hearing me now? >> No, I am now. >> I wasn't before. **[48:11]** >> Okay. Um, cool. All right. Cool. Yo. Um, anyways, yeah, so the TypeScript stuff that I'm working on is uh basically trying to solve the problem of not having like um um uh React, sorry, what am I saying? Uh types and then trying to use types because that's not really a thing that you can do. Um so I'm doing this really badly, I'm sure. But basically what I'm doing is I'm converting everything to to to type TypeScripts and then I'm just **[48:42]** I'm creating I'm sort of I'm declaring the modules that that are missing types. And this has actually been a really little fun experiment because I'm I'm trying to learn to learn all the good stuff, right? Just want to say happy new year. Oh, sorry. Lord of Blood. Yeah, it' be good to have you on. You're having trouble getting set up with Twitch. That sucks. Well, you have some homework for next week. Um, but I'm I'm taking this course. I bought this course a while ago called **[49:12]** Totally TypeScript. It's kind of cool. Um, and so I'm totally totally Typescript by Matt PCO is is his name. I think Kevin told me about this guy. I don't know. uh he has a a cheat sheet for a um uh TypeScript config which is really cool but it's like all these workshops there's like tons of stuff like you're learning all about um lots of stuff **[49:42]** right now I'm on the mutability section where we can learn for example object property inference and recreating read only properties and things like that so it's it's kind of new and cool uh well this this was on sale a couple like last year I think and I I got it because I mean it's it's good. I will say that some of the things are like kind of like it's it's well here I'll show you I'll show you a uh like an example. So let's look at like one of the the basics. So let's go like basic types in in **[50:13]** TypeScript. So he has a little video he explains it all the video. I'll just jump in which is >> change things that are being assigned to this. >> All right. And then you do it all in the browser which is really cool. So like this is this is not right. Okay. So, we have to change that to number, you know, so on and so forth. And then he gives you the solution. So, it's it's pretty cool. Small little bite-sized things. I I'm quite enjoying it. I do think that some of the lessons are a bit like, okay, we've already learned that concept. Now, we're just kind of doing it in a slightly different way. But, but **[50:44]** that's the the simpler stuff. We're getting into more complicated things. Like, I learned about pick and omit, which is really cool. Something I had no idea about before. It's 2026 and I don't know anything about TypeScript. So that's what I'm learning right now. But and to do that I find it's better for me to learn on on projects, right? So like so I have the I have these two blocks and there there's going to be three blocks soon or than later. And so I'm just trying to get some ideas like just trying to in put the types in that I **[51:16]** need so like so this doesn't fail, right? Um, so I'm defining inside of my register block type in in the types of that that it's going to take a name and it's going to take some params. And so I have these register block params that I'm I'm defining. And I I love this partial thing because it means that if I didn't do partial, check this out. Everyone here is is going to know about this. So that this is yelling me because it's it's expecting things that aren't there. It's missing some stuff, right? **[51:47]** But they're all I don't need them because we don't always pass every single one of these parameters to the register block type. Right? So it's pretty cool. I'm pretty excited about it. Everyone everyone watching is like, "Yeah, okay, Ryan. Basics. Thanks. [laughter] Shut up." Um, I had to do the attributes better here though I think because >> go into core eventually. **[52:18]** >> Say again. >> Do you think the typing could go into core? >> Yeah, absolutely. I think we need it. Um, I I I'm actually working on helping to get that done. Um because the the thing the thing that we don't have so there is there's a ton of TypeScript in core but there's no TypeScript for some of the the blocks for the packages that extenders use. So the the us the **[52:49]** people that are building on building blocks building a lot of this stuff they don't have types. Um so that's part of what this is. Uh trying to get some of these these types. Well, yeah, there's there's a bit of that, too, Kevin. It's it really it's there's a lot it's just a ton of refactoring, right? Um I I agree with you. I I think the policy is anything new is being written in Typescript. Um, and then we're trying to address we're we're trying to address **[53:21]** um some like this is the original poll request where we're talking about getting stuff in in in into TypeScript. And there's some really great comments in in here that I would encourage you to read. The one thing like Dennis Nell, who's like the smartest dude in the planet, um had a really great um point in in in that like some of these some of these types um are so generic that it's almost like you might as well just use **[53:51]** any, which doesn't really help that much. But um so there's sort of there's there's a lot of conversation back and forth about whether or not doing like moving everything to TypeScript like a TS file or TSX file, right, versus output and core makes it hard to go for. Yeah, for sure. Yeah, I mean it's hard. It's very very hard. Like I like so this pull request so this original um pull request did a whole ton of TypeScript work and it kind of got basically shut down a little bit. Well, **[54:21]** not shut down, but just basically um uh it was deemed to be too big of a blift, I think. So, what I'm trying to do is I took the work that was done here and I move and I just pulled the types out. So, if and and my my my plan is is to peacemeal merge some of these types in so we can start getting them added and it it's done through through like doc blocks and stuff like that, right? So, that's how it's typed. So, there's a ton of this work that that's being done um **[54:53]** in a types folder and then we're just referencing those types in the in the original pull request. I think what they were doing was we they were doing the types and then they're also updating the the know the um yeah so like all of the doc blocks and everything were being were were being up updated as well. So, this is a good example of that, right? And so I think we need to get the types in in there first, get in and get that passing and then starting to add these types to the codebase as well and then **[55:24]** we'll get that done. I mean in the meantime I mean that there's another solution I think too where like we updated the the the packages on on on definitely typed or definitively typed whichever one that is but problem is those are so old that and there's been so many permutations. It's just better to get it in core because because then then once it's in core um because we'll get we'll we'll get type support faster. Um okay, how can I explain this? So if we **[55:56]** merge these changes into the package, that package gets updated every two weeks when Gutenberg uh when the release candidate for Gutenberg is is pushed out. That's when these packages get get released. So we'll get types support like super fast like before 7.0 assuming we let's say we merge this stuff up tomorrow we'll we'll we'll probably get it either next week or or the week after. So you you can install the package and and and have immediate type support, right? >> No, you're you're totally right. This is **[56:27]** a really good point. Uh where is that? Uh spotlight message like this is a great point. Oh, can't see it because I put this behind um over there. Let's do that. Sorry. Let's do that again. All new code is TypeScript anyways. Yeah. So, like Oh, not that one. It's this one. Uh probably **[56:58]** what Anyways, good point. Um not Yeah, but the thing is it's like it's it's there's a difference between So what I'm finding is there's very much a difference between um implementing it and using it, right? So if if that makes sense, like writing the types and and and adding them to the codebase is a much more complicated process than just ingesting those types when we're using them. Um because a lot of it's behind the scenes anyways, like you don't see it. So it does take a certain level of **[57:30]** expertise but one that I don't really have and that's what I'm sort of looking at trying to get myself to to the point where you know because this is this is the exact kind of pull request that like no one writing real code for Gutenberg like working on actual features is going to have time for. It's exactly what someone like me who's like you know a hack but is paid to help can can do and move this stuff forward. So that's hopefully that's something that I I I can get done sooner than later. Love **[58:02]** some help though. >> No, [snorts] >> that's going to be an interesting transition to see >> what to TypeScript. >> Yeah, I mean I we we kind of did that with our component library and and you know there was a lot of struggles, a lot of learning um validations and stuff and and just running checks and tests were failing left, right and center like there was a big learning curve there >> really. What was the So the tests like oh the test because you're using TypeScript >> like really like TTS >> using the whole Annie was a big problem **[58:34]** and and I I had to go back and like look at some of the old code that was a good year and a half ago I think we were really kind of struggling with that. So it it took >> fully typescript now >> in our component library not in our WordPress work right now. >> No no I mean but that's but but that's a start right? So, were you getting errors like any like can't use any because I think I think you can disable that in the TS config. I think >> that you can Yeah, you can. >> Yeah, I think there does there was a way to disable it. We we were trying to **[59:06]** learn it and and we kind of left all those things on at the time and >> yeah, >> you know, learn how to fix it properly. >> For sure. That's what I'm sort of uh uh doing as well. Like there's this thing in here that's driving me nuts and I can't figure out why this is doing that. Uh but I have this block params which takes an object and then then that object is yeah exactly any beats the purpose of of ts it's kind of like yeah that was a comment that Phil said but anyways so there's I have this block **[59:37]** params interface and it takes it it takes an object which is basically the attributes so the attributes can be whatever but when I pass it in here it's I I'm passing it in as an any which this is AI generated But if I to do do this and I pass it in as an object, which should be the type, I think it yells at me. Or maybe it doesn't yell at me. Let's see. Doesn't seem to be yelling at at me anymore. So So maybe it's fine. You see, I don't even know. **[60:08]** Uh maybe it's not a problem. All right. Well, doesn't seem to be a problem anymore. So maybe that's what I needed to do. But uh but yeah, so I'm fig I'm trying to figure out a lot of this stuff like what was the other one? The it was this block I think. Why is it zoom that in? You guys can read that. Um index. Oh yeah. See now now it's yelling at at me here. **[60:40]** I don't I don't quite get. So yeah, it's weird. Anyways, so I have to put it back to any and then it works, but I don't think that's what I want to do. Don't know. So I don't understand why this does that, but it it it makes it work. So this is the Yeah, that's the kind of stuff that that that drives me nuts. And then doing all this and having to figure this stuff all out, it's good times. **[61:12]** Um, when you uh the testing that you were running into, Troy, what like you >> Yeah. Oh. Oh, Kevin's answering. Kevin's answering. So, that's a generic type any like any like I know what any is. It means it could be anything. Like, should I be passing something like T in in there or I I just don't get why it's supposed to be an object. Well, you're passing that type into the other. Yeah, I'm passing **[61:43]** th this this Oh my god, did I just get raided? Sweet. Um, I just Sorry, I just saw my viewer list go like 10 million people just just showed up. Block params has a type param and expects a specific structure. Yeah, it does. Right. So, okay. So, Kev, talk uh talk me through this. Um, so this was **[62:16]** generated by AI for me. So, the idea is attributes. We don't know what attributes is. We only know that it's going to be an object. Now, I I I can't type it as an empty object because that'll fix, right? All right. So, this is a generic, right? And Troy, if you know the answer to this, jump in, too. Same with you, Paul. I feel like I'm talking I'm talking over everybody here, **[62:49]** but anyways, [snorts] >> I'm going through examples >> in my code to see if I can find anything. >> Cool. The Lup is going to join us here. Sorry, I just saw the call-in request. We're doing call-ins, viewer call-ins. So, if you have a verified Twitch account, you are welcome to jump on board. If I don't know who you are, I might not put your camera on [laughter] immediately. Uh, but that's only just to keep us from uh, you know, **[63:19]** bad things happen. All right, the lup is going to join us. Here we go. Welcome to the stream. Um, all right. This is fun. All right, Kevin. So, explain to me how I can make this work with any object. That's basically what I want to have done. I guess I could Well, the question is this is a generic, right? This is a generic. So, it's being passed. So, I can use attributes to **[63:52]** contain anything that's an object, right? params on edit has the signature that you need to match. Yeah. So it's defined by my block params. So it's attributes set attributes and is selected. Edit has a type. Edits type. Uhhuh. **[64:30]** So the thing is AI generated this connection for me and I don't understand it where I use it. So I use it uh basically here right. So this is so the edit is going to be right. It's just a component. So it's going to be using this here. So it's it's returning the ReactJSX element which is what it's supposed to do. Register block has a type. It does. Yeah. It's right here. So it's going to **[65:00]** have it's got my register and that and edit on that needs to match. Yeah. No, I I it I I I understand. So this is so register block type takes name and it takes a number of parameters. So I have a partial of register block pans because not every time I'm using it. Well, okay. If I remove this, it's yelling at me. Oh, cannot be empty. Okay. So what I'm thinking is this is supposed to be an object, right? I'm defining it as an object here. So it now it's not yelling at me, but it will yell **[65:30]** at me here. It's not yelling at me there either. I don't understand why it's not yelling at me now. Uh, it has an any type. It shouldn't have an any type because block params has got it is selected. Oh, no problem. The lup's trying to figure out the odd. If you move the end, this should So this doesn't error. This **[66:01]** doesn't error. Doesn't make any sense to me why that that doesn't error now. And then this is erroring because this is saying that it hasn't impressed any type. But it doesn't because this edit is being defined in here. Oh. Oh, wait. Do I need to hold on block attributes? Oh, that's what I have to do. Okay. That's what this is yelling at me over here because I need to do that and put **[66:32]** that right. >> I gotta go. I got a bail, guys. I have >> All right, Paul. Well, thanks so much for hanging out. >> Let's do it again. >> Yeah. Well, I think I might just do this every every uh how do I restart TypeScript? Just go restart. Can I just tell it to restart type script restart server boom let's see problems **[67:03]** two problems cannot find blog cannot okay uh the lup thanks for hanging out hey man how's it going I'm gonna just uh remove Paul thanks Paul >> hey hey can you hear me [clears throat] >> yep I I can hear you Hello everybody. >> Chad, >> can hear you. Thanks for joining us. This is awesome. I'm so excited that we're doing this. I can't tell you [laughter] how nerdy this feels. It's amazing. It's just amazing. Okay, so block attributes. I need to do a type here for block attributes. **[67:34]** This is the problem. Yeah, we'll we'll just we'll just not do that. We'll do Come on now. Here we go. So, block prams cannot find block I have to import block prams. Did I import blocks over here? It did. All right, we'll do that. We'll just import block ramps. Boom. Okay, so that's not yelling at me anymore. Yeah, sure. Great. Duplicate identifi. All right, so that's working. This is **[68:05]** This makes sense. So in my missing types, I have an object. So Kev, am I explaining this? like is this correct to think of it this way that this type that is being passed in here is supposed to be an object and so I tell it that it's an object here to match this this um type definition. I think that's what I'm feeling like it should be and maybe I'm wrong but **[68:35]** I don't know if I am. So there's that. So nothing here is yelling at me. I have no errors. So this is good. This is good. I'm very excited. The luck, what are you working on? >> Let's let's start with that. What you got? Anything that you can share? >> I'm so out of the I mean I'm working on totally different things than Typescript. >> Well, yeah. No, you don't. >> Probably. >> This is not a TypeScript focused stream. This is a >> It's probably under NDA. So, no. >> Oh, okay. [laughter] **[69:05]** >> Uh, but I was curious about I was curious about your opinion on this. social side um within the WordPress community because every time this subject reappears uh there's this discussion like there are Typescript uh enthusiasts there are one Typescript that like let's do it let's refactor everything and then there's this other side from Twitter that's oh no it's they are jumping for they're following **[69:35]** butterflies that's impossible it's never going to happen so like it's never going to happen in in in the sense of um >> like Sorry. So, so the there's the people that that want to go full TypeScript and then there's the people that don't want to go full typist or they're worried that that it's a fad sort of thing like is that >> Yeah. Yeah. Yeah. They they are worrying [clears throat] that it's just a trend. It's not going to stay for a long time **[70:06]** and so on. In my personal opinion, like I'm a centrist. I in my opinion, whatever is good for the contributor is good for the project. The important part is that people contribute. >> Yeah. No, I agree. I I don't think Typescript's going anywhere. I I don't know. I mean, it's been around a long time now. Like 11 12 years. like it's been a long like it's been around a long time if I may maybe I'm wrong with the amount of time but I just don't think **[70:38]** it's going to go anywhere. I think too that like it can be done in such a way where where you still like because you're just ingesting the types like from a from an extender point of view. You don't need to write in Typescript if you want to. It would be really great to have the types available, right? So I don't I I don't see it as a bad thing. It's not like it's coffe script or the next flavor of like we had the same conversation about React when React was chosen for the block editor, right? Like **[71:10]** well maybe Vue will will will be the next thing or Alpine or whatever, right? But I mean React's React's still here and it's probably going to be here for a a long time long after I quit doing this most likely. Um but and I think TypeScript's is is kind of the same the other but we we also have that escape hatch where I don't think you don't need to use TypeScript if you don't want to. >> So >> yeah but that that purpose [clears throat] of the architecture like that's the purpose of TypeScript. It induces the idea that everything you **[71:42]** will use as a parameter it has to be strongly typed so you know exactly what you are about to pass. So for sure this makes it hard for people let's say that maybe they don't know the entire architecture behind the u the entire structure of the code and and so on. So it's getting harder like to to come and contribute because you will have >> because it's typescript. >> Yes. because you will have to >> Oh, I see. **[72:13]** >> beh strict in your contribution. >> Yeah, I see what you're saying. Okay. So, there's there's a couple of parts to that, I think. And I mean, Troy, feel feel free to jump in here. Um, I think uh I think that like having types is a good thing. I mean, strictly typed code bases are good. PHP allows for it. I mean, there's like, you know, JavaScript has always been kind of the wild west because you could quite literally do **[72:43]** whatever you wanted to do and it never really mattered and you could just like, oh, that boolean, it's a string now. Oh, great. Awesome. Like, you know, and it caused a lot of weird problems, [laughter] but it also allowed you to do things that maybe you can't do in a in a in a different language. I think with lo like with the a larger code base, TypeScript becomes super important because especially when it's like people that aren't contributing all the time like if you have someone like George like >> oh you made a wise choice my friend **[73:13]** >> Mike Corkum what hi welcome um um if you have someone who's in lives lives in the codebase all the time they understand how things work you know maybe Typescript isn't that much that that that that that not as helpful for them. But if you're like a part-time contributor or somebody who's not that familiar with the codebase, I could see TypeScript saving a lot of problems because you don't know what that parameter is. Like here's an example. I **[73:43]** was working on a uh pull request to for the icon block to try to take uh Nick Diego's icon block and get it into core. I didn't make it in in in the 6.9, but part of what I was trying to do was add more block supports because we wanted them for height and width. And so that's not really a documented process because it's a very much core thing, right? And it's not TypeScript. It's just it's just like regular React. And it was really difficult for me to figure it out because I didn't know how any of this stuff worked. And so at least if like **[74:15]** I'm putting in a function and I'm not telling I'm not passing what it needs to to get TypeScript can kind of be like hey this is expected in here. So maybe that can probably help a little bit but it can also be wildly frustrating like wildly wildly frustrating because you don't know if you don't know TypeScript you're like I don't understand what any of these errors are. What the hell are these angle brackets? This makes no sense. It's dumb. Right. Um so yeah I I definitely get I definitely get both sides of it. I'm literally talking in circles. I'm like, "TypeScript's great, but it sucks, but **[74:46]** it's great, and then it sucks." So, it's like it really it's it's I can see why it's a little bit controversial. >> Yeah, the Lup is right. Like, it's I I think it's it's going to be a bit of a barrier for some folks in contributing because of that that lack of that knowledge that was there. I mean, AI is going to help kind of get over that gap rather quickly. Now, like when we had it, when we were starting on Typescript and and and we hit all of our trouble and and it was a lot of confusion there, we didn't really have the AI tools. We were just doing a more Google searches **[75:16]** trying to understand it. So, that made it more difficult. But I find now you can just, you know, toss it into co-pilot or, you know, whatever you're using this day and uh get over the hump. But but I I do wonder how many folks are going to kind of maybe step back a little bit more, you know, if they kind of hit that TypeScript thing, you know, I don't really want to go there yet or, you know, could go either way. >> Yeah. And part Yeah. And I think part of it too is that like from from my my viewport as a my my **[75:47]** point of view as a developer advocate, I think there's a real I think there's a need for people like me to be doing more things to explain this stuff. Like when a new API is released in WordPress, >> part of my job and and and other people job other people in in the community, their job is to be like, "Hey, this is how you use that that API and and and this is, you know, here are some examples and here's some stuff." We're not doing that [snorts] for with with TypeScript. Like I don't I think there's one place in the block editor handbook **[76:18]** that I can think of where they talk about TypeScript and how you would do it in Typescript, and it's the interactivity API. Um but um and it's just basic basic setup. So I think there's I think there's a bit of education. I mean you know because if the project wants people to come along then those that support the project and and and and are trying to support the uh you know the developers that that work with it. I think part of that that falls on my shoulders and other people like me, right? And like and the rest of us **[76:48]** like writing articles for the developer blog on on Typescript and why you should use it and you know that kind of stuff talks on like hey you know Typescript for the rest of us sort of thing like like you know why I hate Typescript and why you should use it like that's a great talk title actually that's a fantastic talk title. Um, but you know, stuff like that. I think I I you know, and it's the same with React. Like we're trying to teach a little bit of React with the block editor stuff, right? I mean, you can't teach everybody everything, right? like you have to know a little bit to be able to get in the **[77:19]** door. It does I can that's an interesting uh topic Phil for sure like the the >> I also think >> to entry >> there's a learning curve in the engineering life in the life in an engineer when you are at the beginning of your career you love a language like JavaScript for not being restricted you want you don't know what you want to do you want to be able to do this and that when you see errors or uh linting errors they're like I don't like that but then **[77:50]** you evolve and you say at that point you might say you don't like Typescript at all and then you start learning you you start evolving you keep learning and then you you will hit a point and I see this in many projects plugins or when they are trying to mimic TypeScript in their structure they will force parameters in uh documentation they will try to do some type of objects that have a specific ific structure and then they **[78:20]** will validate it or sanitize it in somehow uh and they will try to mimic at that point they try to mimic typescript they want a type uh way of doing programming [snorts] but they don't want to use type typescript and I think that's the the the learning curve of a programmer you start early you want the flexibility you learn you learn and then you you you realize that man the more flexible I let this function or uh class **[78:51]** be the more people will do crazy thing that I don't intend for them to do with this and >> exactly >> and then you go with the curve on the other side you come back and oh let's restrict this as much as we can and uh you then probably you are the kind of guy that says hey let's implement typescript and gutmer now >> yeah I mean I think what you're talking about like prior to types being able to do types in PHP like it was always **[79:22]** called defensive programming like check to make sure that that parameter is there and it's a string and check to do this and that and the other thing like like I always thought like you know being good defensive programmer was making sure the thing was defined before you used it and make sure it was the right type before you did it and like you know typed languages do a lot of that for you and it's the it's the code completion and it's the like there's a lot there that I really think helps but Yeah, again it's like you want the flexibility until you don't, you know, until you're in a million line codebase **[79:53]** and somebody changes a function parameter or or function definition adds another required parameter and then everything breaks and nobody knows why because they can't trace it down, right? So I don't know. >> Yeah, probably not a good idea to implement it on a large codebase all in one shot. It was a mistake. I've made that mistake several times. >> Yeah. Now you've actually got me thinking about whether or not I should take a take a have a go at trying to convert one of my plugins over to TypeScript just to see how that works out. >> Yeah, you thinking now? Well, I've tried **[80:25]** to do it a couple times with my advanced query loop plugin, and the the the fundamental issue that that you're going to run into is that the like [snorts] the types that you need, like the types that you are are are are going to need for if you want to turn all your all your files into TS files, the types that you're going to need are not provided by core. That's the problem. Like register block type, which you'll need if you're doing a plug-in with blocks, um doesn't have a type. and the types from dev from from from definitely typed are out of **[80:55]** date. And so now you're fighting all that stuff. So like Typescript isn't fun and it doesn't it doesn't really help if you're fighting the [clears throat] system just to do the work. Like that's that's that's something that I've kind of struggled with with Typescript a little bit is that oh my god I just spent three hours trying to figure out why these types are wrong and breaking when I and I haven't written a line of code for the thing I'm actually trying to work on. Um you know like I'm I'm all excited because I I I got my TypeScript **[81:27]** error to go away because I've I added some types and I didn't build anything. I just like got it to not squ have have squiggly red lines. So, I mean, yeah. And, uh, Kevin says he doesn't think that that you need many. And you probably don't. Like, depending on what your plugin is is doing, like if I were to look at my plugin, which I I would say is a fairly simple plugin in the sense of like what it's actually using. Uh, why is this not zooming in? Why is this not zooming in? **[81:58]** >> Now, you're are you registering your variation on this plugin in JavaScript or you doing it in PHP? Uh, oh, and and I'm doing it in it's all in JavaScript and I'm actually looks like I'm trying to do it using Oh, I'm on my TypeScript branch. [laughter] That's why I was playing around with trying to convert it, but I I mean like I'm already running into errors like okay, so these things aren't these don't have types. They may not be installed. Um, and so I know there's no types for blocks, which means that this thing will need to have **[82:29]** a type. So I have to I have to generate a type of this. Now, I I could just generate the type that I need just for my use case and move on. Like I I could literally just create a type that has that stuff and that's it. And then and then I' I' I'd be done. Um and then like the rest of it like the the rest of it is fairly straightforward, I think. [snorts] But I mean like I'm Yeah, I guess it depends on on what you're doing. And I I think I think some **[82:59]** of these these things like I don't need like I I don't have all the stuff typed out yet. But it's you know it's mostly just React components and typing parameters and doing all that. I mean I think it's I don't know. I think it's a good so in my case where I think it would become super helpful is when I'm doing stuff like post meta query controls um like the query what what they like um **[83:32]** what what am I trying to say here in my types I'm defining some types of like query props query attributes some of these queries are pretty big like there's a lot of props and a lot of things added and like my meta like when I when we're working with meta control um you can see there's like there's a list of queries and there's an an ID and I I have I have it defined here somewhere but I can't remember where it is but basically like it they're pretty complicated objects so having types in **[84:04]** there would be very helpful because then I don't have to remember what all that stuff is but again it depends on what you're doing I think so I'm I'm going to take another shot at this I think I I did this kind of backwards, but um that's sort of sort of my idea. But yeah, >> I think I think that the core team of WordPress still needs to take a a decision on this because this this discussion reappears often. >> Yeah, >> it's I think I [clears throat] think the **[84:36]** decision is new code is is written in in Typescript um as much as possible. Like if you were writing a new component, it'll be done in Typescript. Or if you're writing a new whatever, it it'll it's done in Typescript. The problem is we've got like I don't know what, five, six years of like non-Typescript code out there, right? Um Oh, Kevin's giving us all the code that we need to start our our um that's it. That's all we need according **[85:06]** to Kevin. Perfect. Done. No more type No more TypeScript is needed. Uh um it's it's the old stuff. It's the but it's the fundamentals. That's the thing. Like the block a block doesn't have really a TypeScript definition. It it it has a definition. I don't know if it's been typed, you know, and then like all the attributes for all of that all of that stuff. Like that's what we don't really have available as a type um to be imported from a package. And I I think **[85:37]** it's just like getting into the the weeds of DIT and just kind of working through it, right? So, block output attributes. >> Yeah, this stuff from Kevin looks pretty straightforward. >> Yeah. Well, you know, Kev's kind of a genius. Taught him everything he knows. I'm not gonna lie to you. [laughter] I am lying to you. **[86:07]** All right. [snorts] >> I think I that might be my weekend. I might convert one of my plugins to TypeScript just to try it. >> Yeah, I I I really honestly I am like my New Year's resolution besides losing weight, which is everyone's New Year's resolution, is to uh have every single JavaScript I file that I create and work on be in Typescript. um because that's the only way that I'm going to get really good at Typescript and I think that is a skill set that I **[86:37]** need um is to just it's just just to work with it and then I'll be able to identify the pain points that extenders have and then I'll be able to help address them. Right. >> Yeah, that was part of my problem with learning Typescript was just the frequency in which I was using it. For a while it was like every day for a couple months but then you know we switched gears and it was like more focused on the WordPress side like Gutenberg and it was we went really hardcore on that. So like for the better part of the last year I would say very consistently of my work and my personal work that I do it **[87:08]** was really all focused on Gutenberg and React and and JavaScript and I hadn't really touched TypeScript. So like I would go back now and I'd probably have to go and do some sort of a course of some sort to just a refresher. >> Yeah. Yeah. That's exactly where I am. Like I I have this course and I I I I got through it uh like last year and then but like I don't touch t I I don't do a lot with TypeScript like very basics but the the level of TypeScript that I'm operating at like the types can be inferred by Typescript like you don't need me to like you know like it's it's **[87:39]** a it's a string parameter like I don't think Typescript really can't figure that out right. So, so yeah, I think it's I think it's it's like anything. It's like if you want to get really good at something, you have to like you got to really do it. You got to just go and do it, dive into it. And this is going to be like a concerted effort for me to like, you know, only write stuff. So, I I I need a create block uh template, which I have somewhere that does TypeScript that takes everything and just puts it in Typescript because the cool thing about create block and the the scripts package **[88:09]** is you don't need to have a TS config. it it just works which is really great because that's a big part too is is trying to figure out all the TS config stuff and like um you know the the only workflow I don't have is having uh the TypeScript watch running and this the start package but if you're in like an IDE you don't really need to have it watching to to do it I think and I think that's just my mindset was that like I'm used to like um having like a watch command that does all my linting and **[88:41]** everything in there for me and the the IDE does it now. So, and that's probably just me having to like change the way I think of things, but you know, so >> the great part of it is that AI is doing great with typed uh languages. >> It really is. And I think I think it's going to help Gutenberg like very much like I I think once we start getting a lot more like TypeScript based code out in the world that is for blocks and for **[89:12]** you know working with the UI and slot fills and all all of that stuff. Um I think AI is going to get better at at giving good examples right that's we'll see that probably have to train some new models. How terrifying is it that the answers that we all put on Stack Overflow are have now been ingested in into models? [laughter] >> I'm I'm more afraid about the answers given to [laughter] >> Yeah. Yeah. Exactly. **[89:42]** >> I I'm afraid about those from >> the answer got Yeah. Yeah. [snorts] Exactly. >> That's funny. >> The part that has been trained with Reddit is the problem, right? >> Oh my gosh. Exactly. [clears throat and laughter] Um, just want to do a shout out for anyone that's out that's just joined. We are doing live viewer callins. So, if you want to jump on stream with uh myself, Troy, and the love, come on in. All are welcome. Um, all you need is a Twitch account and one **[90:15]** that's verified apparently. Um, yeah. So, come on in and you can chat TypeScript or whatever you want. Doesn't matter. We we can talk about whatever y'all want to talk about. Um, cool. All right. So, I have to figure out what Kevin was telling me about this. So, this is a very generic thing. So, um, blocks take this object. So, should I do like **[90:47]** maybe I need to define a type that looks like uh, what are we going to call this? Attributes. attributes attributes, right? And then it it you can do like the key is going to be a string, right? Because we don't know what it is. And this will be a string. No, this will be this is going to be an object. I forget how to do this now. **[91:22]** How do you How do you do the dynamic? Ah crap. I used to remember how Whoa. What was that? I have to look this up. How you do? Let's Let's go to my course. Where's that course I have here? That's not it. That's not it. That's not Where' it go? Whatever. Okay. TS dynamic **[91:53]** uh keys key string thing objects something like that. Does it have to be an interface to do that? No. So like this. That's another array of objects though. So that's what it would look like. And then um **[92:26]** trying to figure this out. Okay, so this the name of our attribute is going to be a string. It always is. And then this is going to be an object and it's going to have it'll have a type which is going to be string. Right? What was that? heard a little like poker music or something there. That was great. >> That was my son. I I gotta tell him to turn down the volume. My son is home today and he's listening. He's watching Spongebob. >> Oh, that's cool. He can watch He Tell **[92:56]** him to turn it up. I I love Spongebob. Okay, so the type is a string, right? And then what are the other what are the other things that we can put into a an attribute for a block? We got type is what? uh default and right and then what else? Oh, all this stuff. Okay, I'm not using any of that. So, I should just be able to do something like this, right? So **[93:27]** now, how do I how do I indicate that this is an object that contains multiple of these? Does anyone know off the top of your head? I don't know how to do that. Oh, Kev Kev's in the chat. He'll tell me what to do. So, this is telling it that it's it's going to be uh it's going to be have a have a key and it's an object **[93:58]** that has a type and a string in it. And then but I want to be able to tell the attributes might have multiples of of these. So, is there like a is there a way of doing that? Okay. Um I guess I'll Google it. Oh, you know what? Let's ask Chlo um how can I indicate that this uh type can have **[94:28]** uh more entries or does it automatically be inferred? It already does. So that's just saying okay. So that's unlimited. Okay. >> But you want I was asking if you want if you want multiple levels deeper. Do you want the object to be deeper and want define it this way? >> No, I just want the object to be able to be a series of strings followed by so so basically follow this. So attributes is **[94:59]** is is going to be an object and that contains a key which is a string and inside of that it's an object that that has a type type and it's of the the type string as well. So that should be what this is doing. So, if I pass this to here, is that going to do what I want it to do? Let's see. It seems seems to be that's not yelling me. Let's restart the TypeScript server. Did that actually do that? No. **[95:34]** Oh, did I just did that just do what I wanted it to do? Amazing. Now, let's let's let's test it and we'll say number. I don't know if that's going to yell at me or not. Is there a block type? Probably you probably just No, there isn't a block type. I haven't defined one. Ask that doesn't seem to be doing any Oh, wait. Hold on. Probably has attributes. Let's see. **[96:05]** >> All right. Well, it's not yelling at me, so That's going to be I guess what it needs to be. [snorts] I guess I I can just pass this straight into here too, right? I can just do something like that. [snorts] >> I should probably define a block type, but I I don't have one defined and I don't know if there is one defined in here. But Kev, this seems like it's the right **[96:36]** way of doing this, right? >> I don't know. >> In your type definition, you're you're setting your type, right? Do you do you not have to put in other stuff inside of there? >> Where's that? >> I'm just looking. If you go back to where you're you're defining the type, >> which which type? Sorry. >> The um your block attributes definition, I think it was. Oh yeah, right here. >> I'm going to put that in in into its own **[97:09]** type. >> Oh yeah. Okay, you did right there. Okay, because inside of there, wouldn't you put like uh you know, say if one of your attributes was URL, wouldn't you put URL equals URL or I guess >> Well, yeah. Yes, you could. But I think that that'll become a a pain because if so if if I do it this way like URL like um like this then this this is going to expect Why is it yelling at me? **[97:40]** >> Oh uh it's a string. Uh what the problem here is is is that I need to have URL in every single usage of >> wouldn't you put URL like underneath type because you're going to define types of your type there could be string it could be number it could be array like you could you could pipe a bunch of those in and have a bunch of different types in there but then inside of there wouldn't your attributes come underneath it and you define so you know say if you **[98:11]** have a source URL and it's uh you know it's a string >> oh I see what you're Yeah. Yeah. Yeah. Okay. I see what you're saying. So, this this this is too too generic. Like, it should be because the types are actually going to be the word string or the word number. Like, is that what you mean? >> Yes. >> The word boolean uh and then I guess it'll be array. I think that's it. Yeah, that's that that would be better because the type can can **[98:44]** be like it can be any one of these, right? Number object. Oh god, there's a ton. Um, so it needs to be one of these options, not just a string because I guess technically if I just type it as a string, it could just be that and that that that will be correct, >> but it's like it that'll be correct from a type point of view, but that won't be what we want, right? So yeah, is that what you're That's what you're asking me, right? See, this is **[99:14]** the kind of stuff that I, you know, I have to get better at. So this this makes more sense. >> It's interesting. I I've taken a few screenshots of what you're sharing and I'm running through chat as well and just trying to trying to wrap my head around it as well. >> No, this is great. I I mean, this is more correct because we we this type needs to be of the the type string, right? or number. And I wonder if I can test that if by putting something in. So in here I've got no where is it? I had **[99:46]** to close the wrong one. Pardon me. Sorry over there. Not that one. Um okay, we'll use this one. Not that one. This one. So in here we we've got this. So if I pass this as a um is that going to work? Like I don't know. That doesn't seem right. **[100:18]** No, that is right. The value of that is a string. Okay. Am I overthinking this? [snorts] Because the other thing that doesn't um well that is basically what the block attributes look like and this is going to be uh there is a default and the default is going to be a string as well. Right. I wonder if I get I don't get any **[100:49]** errors though because I'm not The thing is it's not it's not arrowing like I feel like this [snorts] that matches the example that the first answer on AI gave me here. >> Yeah. like we we >> oh we're we're we're um J2 trumpet we are fighting around with um uh with with TypeScript. Now the the thing is here **[101:21]** that by passing the this block attributes this isn't oh hold on hold on I'm not thinking of this correctly because the block attributes that get passed to here don't have anything to do with this block JSON like this type doesn't necessarily matter. I'm not validating this. I'm validating what's coming in to **[101:52]** the the edit because it's not an object that comes in, it's a value. You know what I'm saying? Does that make sense? So like in your edit, this doesn't come in as like like this is just a value. So attributes is going to be it should be more like this. So whatever **[102:23]** the key is it's going to be just a simple value that looks that I think that's more accurate. I keep looking at at at you guys like yeah is that right? Because this is just literally going to be the value of whatever the block attribute is. right in here because [clears throat] when when attributes get passed to the edit or the save component, they don't they don't like we don't know what kind **[102:53]** of type they are. That's not passed as information. It's just the value is is passed and I'm pretty sure they're always it's always passed as a string. >> Yeah, I think that that's true. Uh yeah, it's simply a way to tell the ID that hey the value that comes here in this it will be a string >> and that's how you delete it in in that function. >> Okay. So block attributes gets passed to edit. So in my edits see it's weird **[103:25]** because these this this should be erroring shouldn't it? block attributes. Now I'm trying to like break TypeScript. It's not working. So this this feels weird to me because this attributes is **[103:55]** being passed into my edit and the edit. So this is defining these attributes as as being some kind of key defi um which is a string followed by a num a number. So the value of whatever this is should be a number. But in my where I'm actually implementing this here I'm defining my block attributes as four strings. They're in here as strings. But this this should be yelling at me. Should it not? I think it should yell at you in execution like when you are **[104:28]** trying to load that in in the browser because >> I'm not sure >> TypeScript error though, right? Like it's it should be >> I don't know if if Typescript can know if that returned value from the edit function is on >> Oh, I see what you're saying. on the same structure like >> but I I bet that when you will execute that code it will error out it will see that it's a string is not a number and **[104:58]** it will >> really okay let's let's let's check that let's see do I have this I do close uh this one inspect console Maybe that. Okay. So, that's that's not doing anything. Okay. Well, I mean, [snorts] **[105:30]** it's not I don't know. Whatever. This is the kind of stuff that makes me like less and I just don't know what I'm doing. But like this feels like somewhere along the lines this should know that um what's being passed because I'm I'm defining my block at attributes as a type and I'm p I'm passing it here and so so this like where where is this? Oh. Oh, you know why? I think I need to **[106:06]** I think I might need to import that. Um I need to change the the name of this. Um attributes. So this this should be typed as should be typed is how do I type that like this? All right. **[106:40]** I need to pass the speed. I think that just needs to be passed in there, doesn't it? All **[107:15]** right, I'm gonna have to jump out, Ryan. >> My lunch my lunch break is over. >> Okay. Well, thanks for hanging out. Sorry, this has just been you looking at my TypeScript code. Shouldn't need to. What are you stuck on? Oh, Kevin, I'm stuck on everything. I'm stuck on. >> All right. Thanks, Troy. Thanks for hanging out. >> See you, bro. >> All right. So, I'm just uh unsure why this isn't erroring for me, but this feels more accurate um from a type point of view, but I'm **[107:47]** not going to get too hung up on it. And it's it's afternoon and anyway, so I think I might call it. Um thanks for hanging out with me. The luck, your last man standing. And anything you want to say before before we jump up? >> No, no. Have a great day. See you all. Mhm. Well, thanks for hanging out. Thanks for jumping on. Um, next week, Kevin, your turning. You got to get on here. Um, yeah. Cool. Awesome. Well, thanks everyone for hanging out with me today and, uh, help me fight through **[108:18]** some some TypeScript stuff. Great conversation about TypeScript. TypeScript. Yeah, I should definitely do that. Um, cool. Awesome. Well, thanks guys and gals and everyone hanging out with me today. I I will see you next week. You're the best. Talk to you all later.