Keyframes, Cash, and CodePen W Shaw - CourtneyR.dev's 2nd Brain

Keyframes, Cash, and CodePen W/ Shaw ![rw-book-cover](https://img.youtube.com/vi/_3zbHSTn-k0/maxresdefault.jpg) 🔗 **Source:** [Keyframes, Cash, and CodePen W/ Shaw](https://www.youtube.com/watch?v=_3zbHSTn-k0) > [!note]+ Document Notes > tags: #webdev #codepen #performance #animation #serverside-rendering > author: Whiskey Web and Whatnot > source: YouTube > reference: https://www.youtube.com/watch?v=_3zbHSTn-k0 > date created: 2024-12-19 15:30 > > # 🏷️ Title: Keyframes, Cash, and CodePen w/ Shaw >  ## 🧰 Action Inbox - [H1] Consider WorkTree vs branching for parallel development workflows — discussion at 10:30 #git - [H2] Evaluate React Server Components migration challenges — Shaw's experience at 15:45 #react - [H3] Explore thin vs thick client architecture decisions — CodePen's approach at 35:20 #architecture ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Whiskey Web and Whatnot](https://whiskey.transistor.fm/) - [CodePen](https://codepen.io/) ## 📝 Summary - Stephen Shaw from CodePen discusses web development, architecture decisions, and the CodePen 2.0 rewrite - Key topics include server-side rendering challenges, git workflow improvements, and AI's role in development - Shaw shares insights on CodePen's technical stack evolution from Rails to Next.js and Go - Discussion covers performance optimization, client architecture decisions, and maintaining developer experience - Bottom line: Modern web development requires careful consideration of server vs client rendering trade-offs ## 📖 Main Content Stephen Shaw, a CodePen employee and creator of SplittingJS and CashJS, joins the podcast to discuss technical challenges in modern web development. The conversation explores CodePen's major rewrite to version 2.0, migrating from primarily Rails-based architecture to a hybrid system using Next.js, React Server Components, and Go APIs. Key technical challenges discussed include Apollo GraphQL integration with server-side rendering, where reactive variables can leak data between requests if used server-side. Shaw emphasizes CodePen's commitment to performance, keeping the entire editor under 3-5 megabytes compared to Monaco editor's 65MB footprint. The discussion also covers emerging git workflows like stacks (chains and fans) for better code review processes, and philosophical questions about whether HTML and CSS qualify as programming languages in the modern era. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/_3zbHSTn-k0?t=0) — [H1] Introduction and Hot Takes - Key idea: HTML and CSS absolutely qualify as programming languages - Evidence: "You are instructing the computer what something is and what it's supposed to do" #### ⏱️ [05:30](https://youtu.be/_3zbHSTn-k0?t=330) — [H2] CSS Programming Language Discussion - Key idea: CSS has evolved to include conditional logic and complex calculations - Evidence: "There's literal if statements... you can calculate decay over two inches" #### ⏱️ [08:45](https://youtu.be/_3zbHSTn-k0?t=525) — [H3] Chris Coyier vs Adam Argyle Choice - Key idea: Shaw chooses Chris Coyier due to 7.5-year working relationship at CodePen - Evidence: "I literally had a dream about getting the job at CodePen before I'd ever talked with Chris" #### ⏱️ [10:30](https://youtu.be/_3zbHSTn-k0?t=630) — [H1] Git WorkTree vs Branch Discussion - Key idea: WorkTree creates separate repo clones for parallel development - Evidence: "Switching branches is usually a pain... I hate stashing and committing before code is done" #### ⏱️ [12:15](https://youtu.be/_3zbHSTn-k0?t=735) — [H2] GitHub Stacks Explanation - Key idea: Stacks enable better code review through chains and fans of dependent PRs - Evidence: "Chain means interdependency... fan means multiple independent PRs off shared base" #### ⏱️ [15:45](https://youtu.be/_3zbHSTn-k0?t=945) — [H1] React Server Components Challenges - Key idea: Server-side rendering migration creates complex integration challenges - Evidence: "It's been a nightmare trying to port client side code to server side rendering" #### ⏱️ [18:30](https://youtu.be/_3zbHSTn-k0?t=1110) — [H2] Apollo GraphQL Server Issues - Key idea: Apollo reactive variables leak data between requests on server - Evidence: "If you use a reactive variable on the server, it's going to persist between requests and potentially leak data" #### ⏱️ [22:00](https://youtu.be/_3zbHSTn-k0?t=1320) — [H3] CodePen Performance Metrics - Key idea: CodePen relies on user feedback rather than concrete metrics for performance - Evidence: "CodePen and metrics are not too synonymous... we get a lot of feedback from users" #### ⏱️ [25:45](https://youtu.be/_3zbHSTn-k0?t=1545) — [H1] CodePen 2.0 Architecture - Key idea: Complete rewrite using modern technologies while maintaining performance - Evidence: "Complete rewrite... using completely new technologies... still weighs just about as much as the old one" #### ⏱️ [28:30](https://youtu.be/_3zbHSTn-k0?t=1710) — [H2] Monaco Editor Size Comparison - Key idea: CodePen avoided Monaco editor due to excessive bundle size - Evidence: "Monaco like the code editor portion of it like 65 megabytes... we didn't want to mess with that" #### ⏱️ [30:15](https://youtu.be/_3zbHSTn-k0?t=1815) — [H3] CodeMirror 6 Implementation - Key idea: Custom web component wrapper for CodeMirror 6 integration with Next.js - Evidence: "Made this web component wrapper so it's all in the shadow DOM... still within React" #### ⏱️ [35:20](https://youtu.be/_3zbHSTn-k0?t=2120) — [H1] Thin Client Architecture - Key idea: CodePen maintains thin client with cloud-based code processing - Evidence: "Most of the code processing magic happens in the cloud... through the CodePen compiler" #### ⏱️ [38:45](https://youtu.be/_3zbHSTn-k0?t=2325) — [H2] AI Integration Philosophy - Key idea: CodePen prioritizes human-created content over AI generation - Evidence: "AI generated content is not as important because there's an element of curation" #### ⏱️ [42:30](https://youtu.be/_3zbHSTn-k0?t=2550) — [H3] Curation vs Generation - Key idea: Quality curation becomes more important as AI makes content generation easier - Evidence: "You can make a thousand copies of crap... the one that's worthwhile deserves to be showcased" ## 📚 References - [CodePen](https://codepen.io/) - [SplittingJS](https://splitting.js.org/) - [CashJS](https://github.com/fabiospampinato/cash) - [CodeMirror 6](https://codemirror.net/6/) - [Apollo GraphQL](https://www.apollographql.com/) ## 🗣️ Paraphrase - Shaw emphasizes that HTML and CSS are programming languages because they instruct computers on behavior and presentation, especially with modern CSS features like conditionals and calculations - CodePen's 2.0 rewrite focuses on performance and developer experience, migrating from Rails to a hybrid Next.js/Go architecture while avoiding heavy editors like Monaco - AI integration in development tools should focus on productivity enhancements like autocomplete rather than replacing human creativity and curation ## 📰 Newsletter Stephen Shaw from CodePen shares fascinating insights into the challenges of modernizing a large-scale web application. The CodePen 2.0 rewrite demonstrates the complexity of server-side rendering migrations, particularly when integrating Apollo GraphQL with React Server Components. Key takeaway for WordPress developers: Performance considerations matter enormously. CodePen keeps their entire editor under 5MB while Monaco editor weighs 65MB. This mirrors WordPress's ongoing performance initiatives and emphasis on lightweight, efficient solutions. Shaw's discussion of git stacks also highlights how development workflows continue evolving to support better collaboration and code review processes. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer experience: Document server-side rendering migration patterns and gotchas - Education: Create workshops on modern git workflows including stacks and worktree usage - Developer marketing: Showcase performance-first architecture decisions in case studies #### Community - Contributors: Develop guidelines for performance budgets in editor and admin experiences - Maintainers: Share patterns for gradual architecture migrations without breaking changes #### WordPress - Core Performance: Evaluate bundle size monitoring for admin JavaScript packages - Core: Consider thin client patterns for Gutenberg and admin interfaces - Documentation: Create guides comparing client vs server rendering trade-offs ## 🧪 Hypotheses - Server-side rendering migrations increase complexity but may not always improve perceived performance - Git stacks will become standard workflow for large feature development in distributed teams - Thin client architectures with cloud processing provide better scalability than thick clients - AI autocomplete tools improve developer productivity more than generative content creation ### 📊 Methodology - Performance testing comparing SSR vs CSR load times across different network conditions - Developer workflow studies measuring time-to-review with traditional branches vs git stacks - Bundle size analysis tracking editor weight over time with different architecture choices ### ❓ Questions - How do we measure perceived vs actual performance improvements in complex web applications? - What are the security implications of client-server data synchronization in reactive systems? - How will AI tools change the balance between human curation and automated content generation? ### 🔮 Future Research - Long-term developer productivity impacts of AI-assisted coding - Performance characteristics of hybrid architectures using multiple backend languages - User behavior patterns in social coding platforms as AI content increases ### 💡 Implications - Practice: Server-side rendering requires careful consideration of state management and data leakage - Security: Reactive variables and shared state between requests create potential data exposure risks - Education: Modern web development requires understanding of both client and server rendering trade-offs - Funding: Performance optimization investments may have higher ROI than feature development ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Architecture diagrams would help illustrate client-server relationships - Improve: Visual comparisons of bundle sizes, performance metrics over time #### 🔊 Aural learners - Present: Podcast format with detailed technical discussions - Improve: Audio-only version with enhanced sound quality for technical terms #### 🗣️ Verbal learners - Present: Clear definitions and analogies throughout conversation - Improve: Glossary of technical terms, comparative explanations #### 🧩 Kinesthetic learners - Present: Practical examples from real CodePen development - Improve: Step-by-step migration guides, hands-on workshops #### 🧠 Logical learners - Present: Structured discussion of technical trade-offs and decisions - Improve: Decision trees for architecture choices, performance benchmarks #### 🧑‍🤝‍🧑 Social learners - Present: Collaborative discussion format with multiple perspectives - Improve: Community forums for discussing similar technical challenges #### 🧘‍♀️ Solitary learners - Present: Detailed technical explanations suitable for individual study - Improve: Self-assessment questions, personal reflection prompts #### 🌿 Naturalistic learners - Present: Organic conversation flow covering interconnected topics - Improve: Ecosystem thinking about how different tools and practices connect ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Transcript provides full content access - Improve: Structured headings and landmarks in transcript format #### Keyboard navigation - Present: Standard podcast player controls - Improve: Keyboard shortcuts for chapter navigation, playback speed #### Contrast and readability - Present: Text transcript meets contrast requirements - Improve: High contrast mode option, customizable text sizing #### Media and captions - Present: Full transcript available - Improve: Time-synced captions, audio descriptions for technical diagrams ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical discussion accessible to global developer community - Improve: International examples, non-US-centric references #### Inclusive language - Present: Professional, respectful technical terminology - Improve: Define technical jargon, avoid assumptions about prior knowledge #### Neurodiversity support - Present: Structured conversation with clear topic transitions - Improve: Content warnings for rapid topic changes, summary sections #### Representation - Present: Diverse technical perspectives and experiences - Improve: Include voices from different backgrounds in technical discussions ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear logical progression from architecture decisions to performance outcomes - Inductive strength: Good use of specific examples to support general principles - Causal reasoning: Well-articulated cause-effect relationships between technical choices and results #### Fallacies - Appeal to authority: Some reliance on industry standard practices without full justification - False dichotomy: Occasional oversimplification of complex architectural trade-offs #### Tone of voice - Overall tone: Collaborative, technical, and informative with appropriate humor ### 🛡️ DARVO Analysis - Deny: No instances of denial or minimization present - Attack: No attacks on individuals or technologies - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Positive, constructive technical discussion ## 🎯 Conclusion This conversation provides valuable insights into the real-world challenges of modernizing large web applications. Shaw's experience with CodePen 2.0 demonstrates that performance, developer experience, and architectural decisions require careful balance. The discussion of emerging tools like git stacks and the measured approach to AI integration offer practical guidance for development teams navigating similar technical evolution. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Server-side rendering migrations create complex integration challenges > [!quote] [Keyframes, Cash, and CodePen w/ Shaw](https://youtu.be/_3zbHSTn-k0) by [[Stephen Shaw]] via [[Whiskey Web and Whatnot]]. Published 2024. Accessed 2024-12-19. > "It's been a nightmare trying to port client side code to server side rendering." Shaw's experience demonstrates the hidden complexity of SSR migrations, particularly with state management libraries like Apollo. [view highlight](https://youtu.be/_3zbHSTn-k0?t=945) #xref #articleseed ID:rw_001 ### [H2] Performance budgets matter more than feature completeness for editors > [!quote] [Keyframes, Cash, and CodePen w/ Shaw](https://youtu.be/_3zbHSTn-k0) > "Monaco like the code editor portion of it like 65 megabytes... we didn't want to mess with that." CodePen chose CodeMirror 6 over Monaco specifically due to bundle size concerns, prioritizing performance over feature parity. [view highlight](https://youtu.be/_3zbHSTn-k0?t=1710) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Thin clients with cloud processing scale better than thick clients - Scope: Web applications requiring real-time code processing --- ## Full Transcript [00:03] I feel really silly. Um, [00:06] >> took 10 years off you. [00:08] >> I know. I know. I look like a little [00:09] little baby child. But yes, this is [00:11] Whiskey Web and Whatnot. I am Robbie the [00:13] Wagner. My co-host as always, Adam [00:16] Thomas Argyle the nerd. [00:18] >> What's up, man? We have an awesome guest [00:19] today. I'm excited. I hope you are, too. [00:22] >> Yeah, I am stoked. Could you tell the [00:23] folks at home a little bit about our [00:25] guests? [00:27] Big breath. A front end, back end, front [00:29] of the front end, back of the back end. [00:31] Wildly coyote, code pen employee, [00:32] crafter known to be an animator, bug [00:34] terminator, key framer, UIUX creator who [00:36] likes to make information more access. [00:40] UIUX creator who likes to make [00:41] information more accessible to the folks [00:43] around him. Oh, that's just so sweet [00:45] that you want to do that. Author of [00:46] SplittingJS, CashJS maintainer, green [00:48] sock pro, CSS and JS expert. Fun fact, [00:50] his earliest tech memory is from 1987. [00:53] Photo of him on his dad's lap at a [00:55] computer. Stephen Shaw, y'all. [00:57] >> That's me. Hi. Yeah, most of that is [01:01] accurate. [01:03] I'll I'll leave it to you to find out [01:04] which. [01:05] >> Nice. Yeah, I was uh I was just [01:08] imagining when you're doing that, you [01:10] know how when people are doing like bag [01:11] pipes, right? And it's like and then [01:13] like they let go. It's like [01:16] that's like you hit that in the middle. [01:19] >> Oh, accessible. That's a hard word to [01:22] say really fast. I've heard a lot of [01:23] other fast words. Dang it. Yes. Yeah. [01:25] It's fine. It's fine. You do a wonderful [01:27] job. We are lucky to have you. What [01:29] else? We are lucky to have this teeny [01:31] tiny little bottle. [01:32] >> The tiny one. He got the big boy. We got [01:35] the little one. [01:36] >> Oh. Oh, thank you for the big one. [01:37] That's very nice. [01:38] >> Yeah, we got a a pack of variety so that [01:41] we can have some other stuff another [01:42] time. But I'm excited for this one. I'm [01:44] not going to say a lot about it cuz we [01:46] promised we would talk about whiskey at [01:47] the end these days. But one cool thing [01:50] about this one, it is like um barbecue [01:54] smoked like mosquite and applewood and [01:56] like all the things you would love in a [01:58] barbecue. So I'm like, "Wow, that's [02:00] different." But yeah, we'll see how we [02:01] like it. [02:03] >> I I definitely get that from the smell. [02:05] I haven't tasted yet. [02:06] >> M yum yum. [02:10] Sweet glassear. Yo, [02:12] >> yes. Uh my wife got me these a while [02:15] ago. It's It's nerve-wracking because it [02:18] has to sit at an angle, but it prevents [02:20] you from filling up too much. So, you [02:22] know, there's a little bonus there. [02:24] >> Excellent. [02:25] >> Cool. It just [02:26] >> fill it up too much. It should be [02:27] unspillable, [02:28] >> right? [02:38] >> Definitely taste the backyard. That is [02:40] nice. [02:41] >> Yeah. [02:42] >> Not as much Pete as I expected. [02:45] It tastes like when you're uh sitting [02:47] outside by the fire all night and then [02:48] you come in and take a shower. [02:52] >> I hate that moment because I'm like, [02:53] "No, I want this to stay on me. How do I [02:55] shower but still smell like smoke [02:57] afterwards?" [02:58] >> Yeah. But yeah, we will uh continue to [03:00] taste this throughout. Tell you more [03:02] about it at the end. We missed our toast [03:04] before we had some, but [03:06] >> I don't know. [03:07] >> Would you like to do our toast, Adam? [03:09] >> I will. Yeah. May your barbecue always [03:11] be tender. Your life [03:14] your life has zero latency. And if you [03:16] do crash hard tomorrow morning, make it [03:17] take a May it only take a soft reboot [03:20] and breakfast taco to get you back [03:21] online. Cheers. [03:24] >> That's nice. [03:26] >> Yeah. My my secret is um anytime I have [03:29] whiskey or a lot of alcohol, like over a [03:31] certain amount, you got to have [03:32] McDonald's the next morning. That's what [03:34] always cures it for me. It's like [03:36] there's enough chemicals in that to just [03:38] bring you right back from the dead. It's [03:40] It's good. [03:42] Enough preservatives to bring it back [03:43] from the dead. That's good. [03:44] >> Yeah, for sure. [03:46] >> All right, so we have a few hot takes on [03:49] here. Trying to get back into the hot [03:51] takes. They're not super hot, but let's [03:54] see where they go. So, this one we've [03:56] asked a few people. Is HTML a [03:58] programming language? [04:01] >> Absolutely. Uh there's so many different [04:05] definitions of of things. uh but I would [04:08] I would classify it as a programming [04:11] language in that you are instructing the [04:13] computer what something is and what it's [04:16] what it's supposed to do. Uh the way it [04:18] interprets that is very wide and a lot [04:21] less uh precise than many other [04:25] programming languages but it's still a [04:27] way to give the computer some input to [04:30] get some output. [04:32] >> Yeah, very very diplomatic answer. I am [04:35] waiting for the English as a programming [04:37] language because we're basically there [04:38] with AI. [04:39] >> Oh, that's what I was just thinking [04:40] right now. It's like actually, dude, [04:42] none of us are coding anymore. We We [04:43] used to make fun of CSS for not being a [04:45] programming language and we're like, [04:47] it's not even scripting. I'm like, oh [04:49] yeah, you're just prompting now. So, [04:50] what are you? You're not even a [04:51] programmer. You're just a prompter. We [04:53] aren't even writing scripts no mo. Uh [04:56] anyway, [04:57] >> we're all in management now. [04:59] >> Oh, seriously? Yeah. [05:01] >> Yeah. We'll get more into that later. [05:03] Um, so yeah, as Adam just mentioned, [05:06] what about CSS? CSS a programming [05:08] language? [05:09] >> Uh, even more so, uh, especially [05:12] nowadays, uh, there's literal if [05:15] statements, right? But, uh, you know, [05:18] for almost as long as CSS has been [05:20] around, there's been media queries and, [05:22] uh, and things like that that that make [05:24] it, uh, a lot more dynamic of a of a [05:28] language, and it's very much responding [05:30] to, um, to what's happening. Um, yeah. I [05:34] I have no qualms at all calling CSS a [05:37] programming language. [05:40] >> Yeah, same. I mean, I feel like um not [05:43] that long ago, I would have said no. But [05:46] it has moved so much in such a short [05:49] amount of time and like as soon as you [05:51] have trig functions in anything, like if [05:53] you try to tell me it's not a [05:54] programming language, I'm like, I don't [05:57] know about that. [05:58] >> I can calculate decay over two inches. [06:01] you're like, "Oh, well, I guess that's [06:02] programming." Okay. [06:03] >> Yeah, I can write a div. [06:08] >> Yeah. HTML, CSS, uh, and and JavaScript [06:12] even are are weird because they're so [06:14] interrelated. Like, it's it's hard to [06:17] isolate them because yes, CSS is [06:20] programming, yes, HTML is programming, [06:22] but without without each other, they're [06:24] just, you know, there there's not really [06:26] much going on. Um, and and I don't think [06:30] there's any way to really execute CSS [06:33] without HTML. Um, so you know, it's it's [06:38] it's kind of a requirement for them to [06:39] to work together. [06:42] >> Yeah, I think um I'm super not educated [06:44] on like the ohing complete like [06:47] whatever, but I think you need HTML and [06:49] CSS to be touring complete. Technically, [06:51] you can't do it with just one or the [06:53] other. You definitely can't do it with [06:54] just HTML. still doesn't necessarily [06:56] mean it's not a programming language. [06:58] Like yeah, I don't know. I feel like [07:00] anything you type in that gives you [07:02] something else could be a programming [07:04] language. Depends on how you look at it. [07:06] >> Yeah. [07:07] >> Interesting. It's like a It's a good [07:10] question though. Like if CSS is flipping [07:12] bits but you can't see them, is it is it [07:15] doing the touring complete thing? You [07:17] know, like hey, it's got logic gates, [07:19] you just can't see them. If it is [07:22] flipped in the forest and no one is [07:23] around is a programming. [07:26] >> Yeah. I mean taking that further, it's [07:28] like you know compiled languages, right? [07:31] Like Java is actually doing nothing. [07:33] >> What it compiles to is doing stuff. So [07:36] maybe Java isn't a programming language. [07:40] >> I like think about the dependencies [07:42] though. It's like uh [07:44] >> HTML doesn't care about CSS and [07:46] JavaScript. I liked your analogy though. [07:47] Like you're saying these things have [07:48] interdependencies, but like HTML is the [07:50] only one that's like whatever everybody, [07:52] I don't need you. I'm sufficient. I I [07:55] got default looks. I got default [07:57] everything. I'm the bones and I can [07:59] still walk around. What can you do [08:00] without bones, Mr. Floppy CSS? Oh, yeah. [08:03] You're just skin on the ground. Oh, hey, [08:05] how about you, JavaScript? If you got no [08:06] bones and no skin to talk to, wait even [08:08] are you? Oh, you're just in someone's [08:10] mind. You're just a spirit floating [08:12] around. It's just like what a funny [08:14] relationship that one has such a hard [08:16] like dependency on the other. Um but [08:18] it's not interdependency, is it? There's [08:20] like a there's a cycle here or [08:23] something. I don't know. It's just fun [08:24] to think [08:24] >> codependency. [08:26] No. Uh I mean JavaScript nowadays is is [08:30] pretty independent with with you know [08:32] server side JavaScript and and all that [08:35] like it's it's running servers and [08:37] stuff. So it's it's completely outside [08:39] of an HTML context nowadays in a in a [08:42] large amount. Um but CSS, yeah, I don't [08:46] I don't think there's any way you can [08:48] get any output from that other than it [08:51] being connected to HTML. [08:54] >> Well, you couldn't get any output from [08:55] JavaScript server side until they made [08:57] it. So let's let's do that. [09:00] >> CSS server side, I'm on board. We're at [09:03] a server with some media queries. Hey, [09:06] you can fetch URLs. Hey, at import. Hey, [09:09] there's a lot of language uh you'd have [09:11] to kind of change what it does, but [09:13] maybe not. Hey, look, JavaScript is [09:14] fetching, you know, JSON from imports [09:17] and uh people make that work and so I [09:20] guess you make that work until you turn [09:21] it into something. So, yeah, it's [09:23] >> I don't know. I think someone should do [09:24] this. No one wants to because it's like [09:27] who would use it, I guess. But like um I [09:30] don't know. I think it'd be a fun [09:31] experiment. Claude, make a CSS [09:34] serverside language framework that makes [09:36] websites just with CSS. Go [09:38] >> tell your open call or or your whatever [09:40] it is now since you're not doing [09:42] >> punk ass. It's still punk assass. Oh [09:43] yeah, it's claude claw which is uh not [09:46] not as fun to say but you know [09:48] >> if you say it fast enough it is [09:52] >> now I'm just going to claim [09:55] I'm a bird. [09:58] >> All right. Um, so I've got a a a really [10:02] spicy one here. Chris Koyer or Adam [10:04] >> Argyle. [10:07] >> With no context as to why you would pick [10:09] either. [10:10] >> This is when I started laughing at. [10:14] >> Uh, [10:16] you know, I'm I'm I I have to choose [10:18] Chris. Uh, because of the history. Like [10:22] Adam and I go way back, too. But, you [10:25] know, literally I've been working with [10:27] Chris for seven almost 7 and 1/2 years [10:30] now uh with with CodePen. Um, so, you [10:34] know, it's it's been a wild journey. [10:37] And, uh, you know, I've I've uh grown [10:39] rather fond of him. So, no shade to [10:42] Adam. It's just, you know, slight [10:45] slightly slightly more advanced in [10:48] relationship there. [10:49] >> Do you have any fun stories to share [10:50] that are like, you know, kind of like, [10:52] hey, back in the day we did this thing. [10:53] It was kind of embarrassing. [10:55] >> Uh, so I literally had a dream about [11:01] getting the job at CodePin before I'd [11:03] ever even talked with Chris. [11:06] >> Whoa. [11:07] >> And uh, it was it was just out of [11:09] nowhere. I had this dream. It was I I [11:11] think it was before I'd even started Key [11:13] Framers. I I think I'd started talking [11:15] with David a little bit about it. And so [11:17] David was in my dream and we were we [11:20] were on an airplane. You know, dreams [11:21] are super exciting. I know. But uh we [11:24] were we were on an airplane. We were [11:25] doing we were doing our show on an [11:27] airplane. [11:28] >> And then I went on an escalator up to [11:30] the next level of the airplane. Huge [11:33] airplane. I [11:34] >> I don't know. It It felt like a mall, [11:36] but it was it was an airplane. And then [11:38] at the top of the escalator, uh Chris [11:39] was Chris was there and he put his arm [11:41] around my shoulder and he was like, [11:42] "Stephen Shaw in the flesh." I was like, [11:44] "Wow, that was weird." [11:47] And then like three or four months [11:49] later, I got a message from Chris and he [11:51] was like, "Hey, we've got an opening at [11:52] CodePen. Would you uh want to come uh [11:55] interview for that?" I was like, "All [11:57] right, let's let's make that happen." Uh [12:00] we haven't been on a plane together or [12:02] an escalator together uh to my [12:05] knowledge. But uh [12:07] >> what a missed opportunity. [12:09] >> Otherwise, the dream dream came came [12:11] true. [12:12] >> Wow, dude. You're like an oracle. That's [12:14] sweet. [12:16] Yeah, it was it was very much a a meant [12:19] to be kind of thing. It was it was super [12:21] cool. [12:22] >> Yeah. If you have a dream about like a [12:24] stock that goes way up that you're [12:25] riding an escalator with, like, let me [12:26] know about that one. [12:27] >> I'll keep you posted there. Yeah. [12:31] Uh here's another spicy one. Work tree [12:32] or branch? [12:34] >> Work tree or branch? [12:37] Now, I'm going to uh go branch just [12:41] because uh I I actually don't know what [12:43] a work tree is. Um so maybe I can get [12:46] some some education here. Well, [12:49] >> well, there's a lot of fake concepts [12:50] that have been made up for AI and uh [12:53] Adam will tell you about them now. [12:57] >> Uh work tree is a git concept where like [13:00] you need to have a you you have a [13:01] separate separate copy of the repo. So [13:04] it's like where you have the folder [13:05] normally and it's like a you have a [13:07] branch in that folder. A work tree will [13:09] create an entirely separate clone of it [13:12] inside that folder but it will add a new [13:14] folder and one will be called root and [13:16] that's like the default or main or [13:18] whatever and then you have all these [13:19] copies of it and that allows you to work [13:21] on multiple things at the same time in [13:23] the same repository at least [13:25] conceptually. Yeah, I I'd be on board [13:28] with that. Uh just because uh switching [13:31] branches is usually a pain uh based on [13:35] like all the changes that I have in [13:37] place and I hate I hate stashing and I I [13:40] hate committing before the code is done. [13:42] Uh so I could I could see using some [13:45] work trees uh in my in my flow. Oh, it [13:48] makes sense. Nice. Yeah, I feel like the [13:51] other big thing that uh that has come up [13:53] that Adam I know uses [13:55] >> uh is stacks. And did you see the whole [13:57] GitHub? It's like [13:59] github.github.stacks.fake.wees [14:02] suck.com is like the new like. [14:07] >> No, but it does have github.github [14:09] like something. And people were like why [14:11] are there two GitHubs? And like um I [14:14] don't know. It was like they totally [14:16] vibecoded the like landing page for it. [14:18] Hopefully the like implementation is [14:20] better. Um, but like okay, so this is I [14:23] don't know. I don't know if what the [14:24] exact hottake question is here, but [14:26] stacks are basically because no one [14:28] would review your PR because it's too [14:29] big. Right. Right. [14:31] >> So like it's like why couldn't the [14:34] person reviewing it just go, I'm going [14:36] to review 20 files and then later I'm [14:38] gonna review 20 files. Like you'd got to [14:40] really spoon feed it to them like this. [14:41] Like um because they all have to be [14:44] merged for any of it to merge with [14:46] stacks, right? So it's like [14:48] >> no, you can merge just the base one [14:51] >> and then each of the other ones can [14:52] still be getting worked on. So it's like [14:54] you know that the foundation of all the [14:56] work is merged. Everyone's approved it. [14:58] Um and you're missing the concept of [15:00] fanning. [15:01] >> Does it merge to main or is it you're [15:03] just saying like this one was reviewed [15:05] like you know what I mean? Is it's not [15:07] going into the actual code is it? or is [15:09] it [15:11] >> it's not going into the actual [15:12] >> like when you're like I'm reviewing the [15:14] pieces of the stack and I'm like all [15:16] right this one's cool and they're like [15:17] cool that one's approved but that one's [15:18] not going into main yet and like until [15:20] you're done with approving all of the [15:22] stack and then it goes into main. [15:23] >> Okay, you're thinking about the chain. [15:24] Yeah. So there's there's chains and [15:26] there's fans and a chain means that like [15:31] >> the terminology gets me. All right, [15:32] explain. [15:33] >> One hurts really bad and one helps you [15:35] stay cool. Um [15:38] right. Uh okay. So chain is like yeah [15:41] you literally have interdependency where [15:42] like um you have to merge the the one [15:44] that's nearest main first and sub uh [15:47] sequentially after that. So you wouldn't [15:49] be able to mer one is ready down the [15:51] stack but you can't merge it because it [15:54] has a dependency on one that hasn't been [15:55] merged or approved yet. And then you can [15:57] also see the status of all them at once. [15:59] So if you want you could wait for them [16:00] all to be approved and then merge them [16:02] entirely al together or you can merge [16:04] them in pieces and have reviews and [16:06] pieces. So then there's [16:07] >> I can say I want to merge one somewhere [16:09] in the middle of the stack [16:11] >> and it'll go into main or no [16:12] >> no you can only merge the one closest to [16:15] main and then it works backwards in a [16:17] chain. So that's the limitation of the [16:18] chain is the one closest to main has to [16:20] be merged before the one before because [16:22] it's a chain. There's a literally a [16:23] dependency and it wouldn't make sense to [16:25] let chain three in the stack merge [16:28] before chain one. Um, [16:30] >> but what if chain three actually is an [16:32] independent set of changes and I decide [16:33] I want to merge [16:34] >> the fan. That's when you got to make the [16:36] fan baby. Okay. So, yeah, the fan says [16:38] uh [16:40] the fan is like you got, let's say you [16:42] have four PRs, right? And it's like they [16:43] all depend on one PR to merge. So, it's [16:46] like a feature flag. Hey, I got a [16:47] feature flag. I need to merge the [16:48] feature flag. And then I have three [16:49] independent implementations of the [16:52] feature that I want to work on [16:53] separately and get reviewed separately. [16:55] So you create a fan instead of a chain. [16:57] And that way any one of the fans can [16:59] merge once the base of the fan has [17:02] merged the fan. [17:03] >> Okay. Now I haven't used [17:07] >> I haven't used any of this clearly cuz [17:09] you're schooling me here. Um would I be [17:12] like stack fan? And like do I pick what [17:16] type of stack I want like when I'm [17:18] creating? [17:18] >> You could make a chain. You could make a [17:20] chain chain fan and one of those chains. [17:23] >> Oh god. [17:24] >> I don't know. But that's a binary. [17:26] That's what you're asking for noise. [17:27] Yeah. [17:29] >> Okay. So So they literally have to stack [17:32] on top of each other. You can't just [17:34] have like one one PR and then like three [17:38] things stacked on top of it. [17:41] like three separate pieces of that. [17:44] >> That would be the fan, I think. So, it's [17:46] yeah, you've got some sort of shared [17:48] branch that they share and then you have [17:50] three individual branches off that [17:52] shared one. That's the fan. And then the [17:54] chain would mean [17:55] >> my fourth branch depends on branch [17:58] three, which depends on branch two. And [18:00] that's what people do in GitHub right [18:01] now is they have, have you seen the [18:02] little emojis that point? It's just [18:04] like, hey, this is branch one of four. [18:06] Here's a pointer. It's a cute little [18:08] pointer to the other branch I depend on. [18:10] you know, it's like, "Oh, great. I'll [18:11] follow the chain." And it's like a [18:12] breadcrumb scenario. [18:14] >> Can you change it later? Can you be [18:16] like, "This was a chain, but I realized [18:17] like a few of these can be merged [18:19] independently." I [18:20] >> Well, you have to use the bolt cutter [18:22] API uh to [18:25] do that. Yeah. [18:27] >> Nice. [18:29] >> All right. Yeah. [18:30] >> Yeah. I mean, I made a day. Uh anyway, [18:34] >> sorry. Sorry, I was just going to say, [18:35] yeah, I so I had this big PR today that [18:37] was like I don't know 30 commits and I [18:40] was like like 10 in the middle of this [18:42] or completely like you can merge them [18:44] separately. So I'm going to just be like [18:46] all right pull this like cherry pick [18:48] cherry pick cherry pick cherry pick [18:49] merge all that rebase all of that was [18:52] really messy. Um, so I'm guessing if I [18:54] had used stacks or something more [18:56] intelligent, then that would have [18:57] probably worked better. But yeah. [18:59] >> Yeah. Or a get or like a an amend [19:02] instead of a constant commit, which was [19:04] one of be my spicy followup to Shaw [19:06] would be like, I hear you don't like to [19:07] make commits unless you're done. Have [19:09] you heard of amend, you know, like you [19:11] don't have to it doesn't have to leave a [19:12] trail that you came back later and then [19:14] committed again. You can just be like, [19:16] act like I did this alto together, you [19:18] know? Well, it's it's more that I don't [19:20] want like broken code or like, you know, [19:24] a code that's like a bunch of stuff's [19:26] commented out or like, you know, it's [19:27] it's all in progress. I don't I don't [19:29] want the um I don't want that to be to [19:32] be committed. I don't want that to seem [19:34] like it's like it's done because it's [19:36] it's not. [19:38] >> Um so, it's it's a balance. Um but like [19:43] like you're talking about the the one PR [19:45] I've got going on right now, it's it has [19:47] to do with serverside rendering. It's a [19:48] huge rewrite, touches so many different [19:51] things, and there's so many little [19:53] aspects to it that I wish I could have [19:56] broken out into other PRs with with [19:58] stacks. But of course, that feature just [20:00] got announced or public today. So, or [20:04] what was it yesterday? Something like [20:06] that. [20:06] >> Oh, I need to find a statement. Find [20:07] GitHub stacks. They're going to [20:08] officially do it. Oh. [20:10] >> Oh, right. I Yeah, somebody somebody in [20:12] our Slack was posting about it. [20:13] >> Totally fake URL. [20:17] Um, but yeah, like being able to split [20:19] up. So, you know, when you're developing [20:21] a feature, there's always like the API [20:23] stuff and then there's like the UI stuff [20:25] and then there's like cleanup stuff. [20:26] Like being able to separate those out [20:29] into individually testable kind of [20:31] things that are all kind of [20:32] interdependent on on that that like [20:35] base. That'd be super helpful. [20:39] >> Yeah. [20:40] >> Yeah. I mean, I feel like that also I [20:42] don't know how complex it would get, but [20:44] it would allow you to do more [20:45] independent UI and API changes [20:48] >> and not have to be like this is one big [20:50] thing that like you've got to care about [20:52] all of it in your brain. It's just like [20:54] nope, this is just the UI, this is just [20:55] the API, whatever, but they all like [20:58] have to go in at the same time. So, they [21:00] point to the one root of the stack or [21:02] whatever. Yeah. [21:03] >> Yeah. The feature flag is a really good [21:05] example of that. You know, it's like [21:07] I've got all these different scenarios [21:09] in my application that want to implement [21:10] the feature flag and instead of me doing [21:12] one mega branch, I've got the base one [21:15] that adds the flag. Everybody depends on [21:17] it. Uh and then I can get individual [21:19] reviews for those, you know, sections [21:21] and slices of the application that [21:22] someone else owns. I'm like, "Hey, I [21:23] changed your [ __ ] Would you go review [21:25] my code?" [21:27] Yeah. [21:30] >> Yeah. So, related to server rendering, [21:33] were React server components a mistake? [21:37] Uh yes, just by default because React [21:42] was a mistake. Uh so everything [21:45] everything since then [21:48] >> have fun. We got the t-shirt. [21:51] >> React was a mistake. Uh [21:54] yes. Uh so I'm I I'm not the the best [21:58] with with like serverside rendering and [22:00] and React server components and like you [22:02] know not uh kind of uh messing with that [22:06] barrier uh there like I'm I'm still [22:10] still in process of like trying to learn [22:12] that because we've been going so far [22:14] with with just client side rendering and [22:17] I I think a lot of my beef is is more [22:20] with next uh next.js JS than than React [22:24] server components or anything like that. [22:26] Um, but yeah, it's it's been a nightmare [22:30] uh trying to port client side code uh to [22:33] server side rendering. [22:36] I don't remember [22:36] >> but they make it so clear what what [22:38] context you're in all the time. [22:40] >> Yes, by just adding use server and use [22:43] client at the top and uh [22:46] >> yeah, it it does not it does not help. [22:49] does not. [22:50] >> Does AI even know? Is AI any good at [22:52] server components or does are they too [22:54] new? Is it kind of like that article I [22:56] wrote where it's like it's just trained [22:57] on old React and so it's not very good [22:59] at New React. I don't know. [23:01] >> Uh it [23:04] most of the code that that we've got uh [23:09] I I don't think AI is capable of of [23:11] understanding very well because it it's [23:14] it's just so so specialized. And so we [23:18] we use like Apollo and um and Nex.js and [23:22] uh and React. And so trying to get those [23:25] three things working together. Um I did [23:28] I did do a lot of rubber ducking with [23:30] with AI, but like as far as code that [23:33] the AI could actually write, uh it was [23:36] not uh not helpful at all. Um [23:39] >> is CodePen on Versel? [23:42] >> No. Um we're we're self-hosted. I I [23:45] think probably some Amazon servers, but [23:48] um it's [23:49] >> so that's useful with Nex.js. [23:53] >> Yeah. Uh the honestly the deploying [23:55] deploying next and and running running [23:57] that hasn't been a problem and we've had [23:59] like elements of server side rendering [24:01] um that that have worked really well. Uh [24:05] but with with code pen 2.0 so we've got [24:07] the a whole like rewrite of the editor [24:10] and so it's it's it's all reactbased. [24:13] Um, and one of the things that we're [24:16] trying to improve is just the load time. [24:18] And so by shuffling some of that setup [24:20] and and and UI rendering to the server, [24:24] in theory, it's going to be it's going [24:25] to be faster and and just make things [24:27] feel a little a little snappier. Um, but [24:31] the problem is we use uh we use Apollo [24:34] uh throughout everything, Apollo [24:36] GraphQL. And so there's there's so many [24:39] little uh intricacies with Apollo. uh [24:43] that to get that working particularly in [24:46] next with serverside rendering is just [24:48] it's a it's a nightmare. They've got [24:50] they've got a specialized uh package for [24:53] it that's that's supposed to help and I [24:56] was finally able to get that integrated [24:58] and working. Uh but we have we have a [25:01] lot of code that's that's like directly [25:04] manipulating Apollo cache kind of stuff [25:07] and you can't like basically I have to [25:11] like pass this server instance like down [25:14] through every function uh to be able to [25:16] to use it and it's it's just it's so so [25:20] painful. Um, but it's it's like it's [25:23] like 95% there and then I'll just run [25:26] into some something else that completely [25:28] blows things up like uh Apollo reactive [25:31] variables. I don't know if you've used [25:33] them at all, but it's it's like signals [25:34] or like you know state, but it it can be [25:37] shared kind of between things. You don't [25:39] have to like prop drill or anything like [25:41] that. Uh I just found out today that uh [25:44] if you use a reactive variable on the [25:46] server, it's going to persist between [25:47] requests and potentially leak data and [25:50] all kinds of stuff. So [25:52] >> you can't use that for uh anything on [25:54] the server. [25:56] >> So I had to completely rewrite a bunch [25:59] of stuff to uh [26:00] >> and write a sorry letter to the person [26:02] that you exposed. [26:03] >> Well, no, it none of it has none of it [26:05] has deployed. Don't worry. Uh this is [26:07] all this is all local testing um that I [26:10] discovered. [26:11] >> Uh but yeah, it's it's so annoying. So [26:15] annoying. [26:16] >> So I am curious. Um you mentioned like [26:19] you know trying to make things snappy [26:20] and performance and whatever. I've never [26:22] been like wow codepend slow like I [26:24] haven't noticed anything any problems. [26:27] So I'm curious what the like [26:28] >> do you have concrete metrics on like you [26:31] know what was the the load time versus [26:33] then versus now or like what's the [26:34] improvement or [26:36] >> uh code pen and metrics are not uh not [26:40] too synonymous. Um we we uh we we get a [26:45] lot of feedback from from users you know [26:47] with uh with how many people are [26:49] constantly using the platform. Um so [26:51] that that's most of what we go off of. [26:54] Um but with with uh 2.0 No. So, it's a [26:58] complete it's a complete rewrite and uh [27:01] using completely new technologies and [27:03] things like that and and the way that [27:05] it's working right now um pretty much [27:08] has to uh [27:11] it's there's very little that's [27:13] serverside rendered and so it all [27:14] initializes on the client and like I was [27:17] talking about we have like a lot of [27:19] Apollo cache setup kind of stuff where [27:21] we have to set up different data models [27:23] and things like that in the in the uh [27:26] browser. memory um for for things to [27:29] work. And um so you know depending on [27:33] your browser, depending on your network [27:35] connection, like you know there there [27:36] may be uh one or two seconds of like a [27:39] loading screen and you know whether or [27:43] not it's it's fast, people perceive it [27:45] as not fast. At least you know five or [27:49] so people which is you know significant [27:51] right now in in beta. Um and and so it's [27:55] it's just something we we're aware of [27:57] and and working to improve. Um so for [28:00] that uh the more that we can serverside [28:03] render so that um things are things are [28:06] at least visible um so you can tell what [28:09] pin you're on. You can tell you know [28:10] what's about to happen um that that's [28:13] mostly what we're what we're focusing on [28:15] to to just you know kind of affect the [28:18] perception of it more than the actual [28:20] load time. [28:22] >> Gotcha. Yeah. I was what I was trying to [28:24] get at I guess um was like I feel like [28:26] this is something that a lot of [28:28] companies have run into of like they [28:29] have a Rails backend or you know [28:31] something that was fine serverside [28:34] rendering stuff the way we've always [28:35] done the web and then they were like you [28:37] know what if we it was all React and [28:39] then it actually wasn't faster in the [28:41] end and it's like I don't know I was [28:43] just like trying to dig into that a [28:45] little bit. [28:45] >> Oh Walmart did that when I was at Deote [28:48] they rewrote from Java Spring um to [28:52] React. They had some new person show up [28:54] that was like look here we did a pilot [28:56] we've increased the page speed on these [28:58] by X whatever and they hired Deote to [29:01] come in and augment their team to do the [29:03] entire React rewrite after 8 months and [29:06] of course like a million bucks whatever [29:08] it was slower and it was like way slower [29:11] and it was just like oh snap you still [29:14] paid us [29:14] >> what do we do now? Yeah, that's where [29:16] that's where I love consulting and I [29:18] love agency work cuz I so many times I [29:20] was like, "You paid me to learn about [29:21] your mistake." Woohoo. I watched a whole [29:24] bunch of moms not use your cooking app. [29:27] Probably because you didn't ask anyone [29:29] how to make a cooking app. You just said [29:30] moms will definitely use it and you [29:32] spent a million bucks trying to follow [29:33] that dream and I learned that they [29:35] don't. So awesome. [29:39] Yeah. Yeah. So the codepin uh I think [29:43] you know 13 14 years ago whatever it is [29:46] now uh was built on rails and we still [29:48] have a significant portion of the app [29:50] that's um that's running on rails but uh [29:54] I I don't think there's any way to [29:56] actually integrate React serverside [29:58] rendering with it. Um at least none that [30:01] we've bothered to invest time in. Um, [30:05] and so we've we've got, you know, about [30:07] half the app on Rails and then about [30:10] half the app on um on Nex.js and uh and [30:14] a Go API. Um, and so the the Go servers [30:18] are amazing. Like it's it's so fast and [30:22] like the the CPU usage is just, you [30:25] know, like 1 2%. Compared to like the [30:27] Rails, you know, that's that's [30:29] constantly running. Um, so we know we [30:34] know things are going to be faster u [30:38] even more so as we as we peel off uh [30:41] from rails. Um, but it's mainly just uh [30:43] right now trying to figure out next and [30:46] making sure that that next is is running [30:48] efficiently. [30:50] >> Have you considered running on burcell? [30:56] >> No. I so I'm I'm not the DevOps guy and [30:59] I'm I don't want to be in any in any [31:02] capacity. Uh but we we haven't had any [31:04] any problems with our with our Nex.js [31:06] servers and like as far as response time [31:09] and everything like they're they're [31:10] super fast. Um it's it's mostly about [31:13] just the way that the that the uh editor [31:16] itself was set up because we we started [31:19] uh we started writing it like six years [31:21] ago. Like we started implementing all [31:23] this stuff six years ago before um React [31:26] server components and like server side [31:28] rendering was still just not really as [31:30] big of a thing uh even with with Next. [31:34] Um, so you know, it was it's just so [31:37] much of it has been built off of that [31:39] that uh it's it's now just trying to [31:42] pull back and and actually get get [31:45] things moved around and and done [31:47] properly. [31:49] >> Do you have a a baby in there that [31:50] you're real proud of? Something in there [31:52] you're just like, "Yeah, I did that. [31:54] That's real good. I feel good about [31:55] that." [31:57] >> Uh in this in this PR or in the in the [32:00] entire thing? Um [32:01] >> I meant in the world. I was talking [32:03] about a baby in the No, I'm just [32:04] kidding. Yeah, [32:04] >> I have two babies. Yes. Uh, no, but with [32:09] uh I mean the the editor is completely [32:13] written from scratch. Like there's [32:15] there's nothing carried over from the [32:17] from the old code. [32:17] >> Did you write it? [32:18] >> Mhm. [32:20] >> Ah, [32:21] >> yeah. Tell brag, dude. I want to hear [32:23] you brag. Come on. Tell me all the stuff [32:24] you did. [32:25] >> It's all CSS. Well, I as as much as [32:28] possible is um but I mean I mean [32:33] everything. So like you know the the tab [32:35] handling the the resizing like all the [32:38] little the little UI elements any any [32:40] animations like the omniar like all this [32:43] kind of stuff um was was just a labor of [32:47] love over over these you know six years [32:50] or so. And um yeah pretty much pretty [32:54] much all from scratch. One of the one of [32:56] the major things we are using is is code [32:58] mirror 6 for the actual like text [33:00] editing. And um uh while it is it is [33:05] really great, it's a real it's a real [33:07] big advancement over code mirror 5 uh [33:10] especially for like accessibility and [33:12] and capabilities and all that kind of [33:14] stuff. It is a uh very weird API. Um and [33:20] everything is basically an extension off [33:23] of it. So you've got to get real [33:25] comfortable with a lot of a lot of just [33:28] very specific concepts like state fields [33:31] and facets and like uh you know there [33:34] you don't just like you don't [33:38] you don't just like enable something [33:40] like you have to uh add a compartment [33:42] that you then add an extension into uh [33:45] to be able to just like turn line [33:47] numbers on and off. And so uh it's it's [33:50] it's this whole whole mess of things but [33:52] it's it's super efficient. it worked [33:54] really well and uh I was able to set [33:57] that up as like a um a web component um [34:01] so that it can work well in Nex.js [34:04] uh because the way the way the theming [34:06] works in it like it injects the the [34:08] styles uh for the theme into the head [34:11] and Nex doesn't like that. Uh so we so [34:14] we made this web component wrapper so [34:16] it's all in the shadow DOM now and uh [34:18] and um you know still still within [34:21] within Next and still within React uh [34:23] but as a web component and uh with a [34:27] whole bunch of custom extensions and [34:28] things to to get the functionality that [34:31] we want and to make it easy to like [34:33] toggle features on uh like the line [34:35] numbers and code folding and changing [34:37] themes and all that kind of stuff. [34:40] But boy, it's been an undertaking. [34:43] >> Dang. Well, every time I've used it, [34:44] it's been smooth. I didn't think about [34:46] the fact that this was, you know, some [34:48] web experience. It felt just like an [34:50] editor. So, you did well. [34:51] >> Good. Good. Yeah. And we we didn't just [34:54] want another VS code in the browser, you [34:55] know, like we we looked at that like [34:57] very briefly and we were like so just to [35:01] load the editor just to load like Monaco [35:04] like the code the the the actual like [35:06] text editor portion of it like 65 [35:09] megabytes or like it it was it was [35:12] ridiculous at like you don't realize it [35:15] when you're like just using code sandbox [35:17] or stack blitz or something like that [35:18] because you know overall things get [35:20] cached but there's there's just such an [35:23] upfront cost to just loading that that [35:28] code and loading that whole editor um [35:31] that we just we didn't want to we didn't [35:33] want to mess with that. So right now the [35:36] the new experience still weighs just [35:39] about as much as the as the old one [35:41] surprisingly. Um it's it's still like [35:44] under like three to five megabytes um [35:46] after after most everything loads and um [35:50] that's that's been a big big point of [35:53] pride there. [35:56] >> Yeah, I think [35:58] >> Go ahead. Yeah. [35:59] >> So I was going to say I think it totally [36:01] uh matters what you're trying to build. [36:03] like um if I'm trying to do a quick [36:06] example or you know show something I'm [36:08] definitely not booting up stack blitz [36:10] like um so yeah I think it's like like [36:14] when we're at work when we're doing like [36:16] you I want to show someone how to do [36:17] something real quick. It's always a code [36:19] pen. It's not. Um, so I think it it [36:21] would matter if you were trying to do [36:22] like I'm going to show how like all [36:24] these dependencies work together and [36:26] build this like fully featured app [36:28] maybe. But like [36:30] >> yeah, I think there's um it's rare that [36:32] you're going to do that in the cloud. I [36:34] feel like like I would just do it on my [36:36] machine and I don't know, right? [36:38] >> Yeah, I think you guys are doing it [36:39] right. [36:40] >> Good. We hope so too. [36:43] >> I'm curious uh would you call it a thick [36:45] or a thin client code pen? [36:48] Hm. Uh, very very thin as as much as we [36:54] can. [36:54] >> Like there's nothing in a worker. You [36:56] guys have tucked as much as you can as [36:58] network calls. And [37:00] >> so most of the most of like the code [37:03] processing magic happens um happens uh [37:08] in the cloud basically. It's it's all um [37:10] through through something we called the [37:12] code pin compiler. Um, and it it's [37:15] basically like this tree sitter based [37:17] kind of uh code parser thing that that [37:20] does like so much heavy lifting and it [37:23] does it so fast because of because of [37:25] Go. Um, so [37:28] uh most of most of the actual work to [37:31] get the um code that you type in to the [37:33] preview happens there. Um but but [37:37] everything else is is kind of happening [37:39] in the client as far as file management [37:41] as you know as far as everything that [37:43] you're seeing there. Um it's it but the [37:47] the build process itself um goes through [37:50] that code pin compiler. [37:52] >> Oh, that's a lot of magic to be passing [37:53] over the network and making it feel that [37:55] fast. So well done y'all. Yeah, we we [37:59] have a whole like diffing setups to like [38:01] send through as as little as possible um [38:04] from for file changes and stuff like [38:06] that. And you know, each each build is [38:08] is processing everything, but we've got [38:10] like this this really great cache layer [38:13] to to everything, too. So once code's [38:15] been processed once, like in theory, it [38:17] doesn't have to be processed again. So [38:19] if you didn't change the CSS, that [38:21] shouldn't have to um add to like your [38:24] build time or anything like that. Like [38:25] it's it's already done. [38:27] Nice. [38:29] >> So, uh, random question, possibly not [38:33] relevant at all. Um, what about AI in [38:36] general? Like, uh, is there a story of [38:40] like, oh yeah, we going to have like an [38:42] MCP server where you can be like, I'm [38:43] going to spin up all of these pins just [38:45] from like talking to an agent or I don't [38:48] know. Just curious thoughts in general [38:50] on that. [38:52] Uh so we we've had discussions uh but by [38:56] and large like AI integration is is kind [38:59] of not not where we're at. So like one [39:03] of the one of the big things about code [39:06] pin is is it being like a social network [39:10] you know and so having um AI generated [39:14] content there is not is not as important [39:18] because there's an element of curation [39:20] like people go to code pin to see new [39:23] and exciting content and to see like [39:25] well-built content. Um so like as much [39:29] as possible we want to encourage that [39:31] but of course there's a balance because [39:34] you know more and more people do rely on [39:36] on AI and so there there are certain [39:38] conveniences and things like that that [39:40] would be great to integrate and you know [39:43] maybe we have discussions on that but uh [39:46] overall like the feature set is focused [39:49] on humans writing code to show to other [39:52] humans. Um, so that that's the main goal [39:55] of of code pin. [39:57] >> It's awesome. It's like a crafter [39:58] showcase. Um, I will say that you can [40:01] use Klein and I have used Klein before [40:04] >> to uh just give me spicy autocomplete, [40:08] you know, when I'm in an HTML area or a [40:10] CSS area completely. [40:12] >> Yeah, [40:13] >> that that's the best use of AI. Uh, [40:15] honestly, the the like autocomplete. I I [40:18] know what I'm going to type and if AI [40:20] gets it right, great. like I I don't I [40:23] don't want to bother with it. [40:24] >> Um so like that kind of AI integration [40:27] I'm I'm all on board with but the like [40:31] just prompting it to like you know make [40:33] a fancy select drop down or something [40:35] like that and then trying to share that. [40:38] >> Oh yeah you're like I don't build sites [40:39] I just build code pens. Yeah that's not [40:41] that's not cool at all. Um [40:42] >> yeah and I think it would cost y'all a [40:44] fortune to try to host something like [40:46] Klein that you get like hey if you have [40:48] a pro account you get access to GPT 5.4 [40:51] before and you'd be like, "Oh, it sounds [40:53] >> right." [40:54] >> Yeah. Yeah. [40:54] >> The the cost the cost for everything is [40:56] a is a huge consideration. So, I I kind [40:59] of I I kind of am pushing to wait on [41:02] anything and let's let's see how the [41:04] next year pans out with uh all this all [41:06] this AI competition and then um and then [41:10] we can evaluate how how deep we want to [41:12] go there. [41:14] >> Yeah. Yeah. Yeah, I mean I think the AI [41:16] issue is not going anywhere, but I think [41:19] uh what it's kind of like, you know, [41:21] people really like vinyl because like [41:24] you can actually touch it and play it [41:26] and you know it exists. Um I feel like [41:29] the same thing will be true for code [41:31] before too long. We'll be like, "Oh my [41:33] god, there's so much slop." Like where [41:35] where's Adam or Jay or somebody making a [41:38] cool demo of like what we're looking [41:43] >> what do we what do we got there? I have [41:44] Oh, this is Asop Rocks Integrated Tech [41:47] Solutions. He's totally making fun of [41:48] the uh tech industry. Uh but it's ASOP. [41:52] >> He called the album Integrated Tech [41:54] Solutions. That's amazing. [41:56] >> Yeah, it's very funny. It's very tongue [41:58] and cheek. Um he goes, one of my [42:00] favorite lines, he goes, uh the cat's [42:02] out of the bag. He's talking like when [42:03] you release some new tech thing, cats [42:05] out of bag. He goes, that was a powerful [42:06] cat. Wow. [42:11] But yeah, I mean I think it's it's so [42:13] hard to know where to go to get quality [42:15] or like if you went to a art museum and [42:17] it was all like computerenerated. [42:20] >> What's the fun? Like I don't know. Yeah, [42:22] I think it's it's definitely um I think [42:25] there's going to be a resurging [42:30] $200 a month which is already expensive [42:32] but what if it were $20,000 a month? And [42:35] they're like, uh, [42:37] >> that's my limit personally. You know, [42:39] 20,000. [42:40] >> Cut it off there. [42:42] >> A boat or AI. [42:45] Boats or AI? Yeah. Actually, I don't [42:47] know how much boats are. They're [42:48] probably way more than that. [42:50] >> Yeah, maybe on Craigslist. Uh but right [42:53] I I think with with AI right now and the [42:56] the ease of generation um and and you [43:00] know the ease of sharing things like [43:02] curation is so much more important than [43:05] generation because you can make you know [43:09] a thousand copies of crap. Uh, but the [43:12] the one that's worthwhile or the the one [43:15] that somebody actually spent time on and [43:17] made and and is polished and is [43:19] wonderful, like that that deserves to be [43:22] showcased. And that's that's I think [43:24] what what CodePin does a really good job [43:26] of with the social aspect of things with [43:29] pics and with our with our newsletter [43:30] and like all that kind of stuff. We do a [43:33] really good job showing what people are [43:34] building and what's possible with all [43:37] these technologies. Now, there's some a [43:40] AI generated stuff on there. You know, a [43:42] lot of people copy and paste AI [43:44] generated stuff into code pen. That's [43:47] that's fine. If you want to do that, [43:48] that's fine. We're probably not going to [43:50] curate that in general. But, you know, [43:54] it's still a legit use of the platform. [43:56] You can still share that. People can [43:58] still find value and use in that. Um, [44:00] but that's that's not really where [44:03] CodePin is is at. [44:06] >> Yeah, makes sense. So while we are on [44:10] the AI train of thought, I want to move [44:12] us to a whatn not uh adjacent sort of [44:15] thing. Agentic parenting good idea or a [44:18] bad idea? [44:21] >> Like literally parenting or is is there [44:24] is there something I'm not I'm not aware [44:25] of? Uh [44:26] >> um so I I spent minutes researching [44:28] this, but there was this there's this [44:30] lady that is like very into AI stuff. I [44:33] think it's maybe the same lady that like [44:34] a couple weeks ago was touting buying [44:36] all these Mac studios for, you know, 10 [44:39] $20,000 to like run all of her AI [44:42] locally because she needed so much of it [44:44] or whatever. Um, but the the thing I saw [44:47] in passing today is like they were [44:49] saying, yeah, it like helps them plan [44:51] all like they homeschool all the kids [44:53] and it's like they use AI to build the [44:56] lesson plans. They have them, the kids [44:58] take pictures of like the work and [45:00] upload it and it will like grade the [45:02] papers and like it's like the whole it's [45:04] like it's doing everything theoretically [45:06] and they they love the game like the [45:08] parent really likes the the coding the [45:11] AI to do it like the way they want. Um I [45:14] don't know. I don't know. I don't think [45:15] it I don't know. What do you think? [45:19] >> Uh [45:21] there has to be humans in the mix uh for [45:24] for that for sure. Um, I I do I do see [45:28] value in using AI as a tool to to help [45:32] you organize, to help like give you [45:33] ideas for things. But as far as the [45:37] actual like execution of ideas and the [45:40] um like grading in particular, [45:44] uh I I would be very hesitant to hand [45:48] over to to AI just based on its uh its [45:52] ability to actually judge quality or [45:54] actually do real calculations. You know, [45:56] like if you uploaded a math worksheet to [45:59] that, there's almost zero chance that it [46:01] would [46:02] >> give you an score. [46:06] Uh but yeah, I was I was just seeing uh [46:09] something uh from uh Pod Save America uh [46:13] today where they just uploaded a bunch [46:14] of fart sounds to chat GPT and they were [46:17] like, "What do you think of my new [46:18] song?" And Chat GPT was like, "It's it's [46:20] it's great. This is lowfi like ambient [46:24] like late night uh kind of sound, the [46:27] kind that you want." And man, it's it's [46:30] they go on to play the track and it's [46:32] it's literally just long fart noises the [46:34] whole time. And [46:35] >> I wasn't sure if if uh like Chat GPT was [46:39] in on the joke there of like like it was [46:43] doing that for fun like cuz if so, props [46:46] to them. But if not, if it was like, oh, [46:48] this is music and like I'm actually [46:50] evaluating it. Um I I don't know. But [46:52] yeah, I saw that too. I thought that was [46:54] hilarious. Uh, speaking of of farts, uh, [46:58] can I can I play a little something uh [47:00] for you? I think you'll I think you'll [47:02] enjoy this. I'm excited. [47:07] I start my day with the breakfast of [47:08] baloney. Then I'm right around the [47:10] kingdom of my electric pink pony, [47:13] keeping a lookout in every direction. [47:15] I'm a charge of my kingdom's personal [47:17] protection. The collection of jewels [47:20] alone will impress. No stress, though. [47:22] No one will mess. Not with this [47:23] princess. Just cuz I'm cute and I dread [47:27] me dangerous. I got skills. I'm a [47:30] princess. [47:30] >> Princess. [47:33] >> What is that? [47:34] >> I do not remember how that came about at [47:36] all. But that is Adam uh wrapping over [47:39] uh some uh hand farts that I did. Um do [47:44] you remember the context at all? How did [47:47] what happened there? Why? [47:50] I mean, you must have So I Okay, wait. [47:53] Maybe we're talking about the manualist. [47:54] Do you know the manualist? [47:56] >> Uh, I I I know manualism. I don't know [47:58] the manualist. [47:59] >> Manualism. [48:00] >> The the same thing. It's the man. [48:03] >> Yeah. [48:03] >> The hand farting is is manualism. [48:06] >> It's genre. It's man. Oh my goodness. [48:07] I've never heard the genre. I only knew [48:09] the manualist. Who is a, you know, [48:11] YouTube superstar dad who can like fart [48:14] sweet child of mine with his hands. And [48:16] he's like, [48:18] >> "Does he have the little like microphone [48:20] on his wrist? Is that the guy?" Yeah. [48:23] And And I'm pretty sure he's using a [48:25] pitch shifter uh too. So it's it's a [48:27] little it's a little cheating. [48:29] >> I I'm 90% sure. Yeah. [48:32] >> The the digitech whammy [48:34] >> farts, [48:35] >> dude. He's got a foot pedal and she's [48:36] like, "That's okay. That's next level. [48:39] Well done for manualism." Oh, that's so [48:41] funny. It must have come up in a key [48:42] framers and like you did it and I was [48:44] like, "Oh snap, I'm a rap." [48:45] Yeah. Yeah. I I I was thinking about [48:48] that today. Uh just just thinking about [48:50] our our history together and and [48:53] remembering that. [48:54] >> That's so funny. That's like on was it a [48:55] Jimmy Fallon? They're like, "Let's bring [48:58] out that clip." Uh [49:00] >> exactly. Yes. [49:02] So, the debut for the world. [49:05] >> You're welcome. [49:06] >> So good. I just uh was cracking up. So, [49:08] Chad GBT is a fart sycopant. That's what [49:10] I took away from that uh conversation. [49:12] Also, did you see the uh show Raised by [49:15] Wolves, the sci-fi show? [49:17] >> No. No. Yeah, I remember it. Uh but I [49:21] haven't seen it. [49:22] >> It's uh it's So that's um AI parents. So [49:26] it's like these uh it's hard to describe [49:29] in like a sense, but basically like [49:31] you're on this like planet where there's [49:32] like nobody and there's these two really [49:34] really advanced robots. They're [49:36] superhumanistic, but they're parenting [49:38] these little embryos, trying to raise [49:39] these children, but the children keep [49:41] dying from the plague or various things [49:43] that are difficult about the environment [49:45] there. But two of them survive and they [49:48] really attach themselves to the parent. [49:49] And you're talking about agentic [49:51] parenting and I'm like, "Oh, Raised by [49:52] Wolves. I saw that show. That ended [49:54] terribly." Uh, [49:57] yeah. I I think similar results are are [49:59] in store if you're using chat GPT for [50:02] homeschool or or if you have one of [50:04] those robots that Melania was showing [50:06] off. Uh [50:07] >> oh yeah, the stepfather factory. I'm [50:09] waiting for that too. That's a LP album. [50:10] Um but yeah, imagine you just go buy a [50:12] new stepfather. They're powered by [50:13] whiskey and booze actually I think was [50:15] the the pitch back 15 years ago or [50:17] whatever in the album. [50:19] >> Just got to pour another bottle in that [50:21] uh robot dad and he'll keep keep [50:23] plugging along. [50:25] >> Jeez. I will save the alcohol industry. [50:28] >> Brutal. Oh jeez, dark. [50:32] Uh but yeah, don't don't do that. Don't [50:34] do that to your kids, you know? Uh be be [50:37] involved. Um but as far as like making [50:40] up ideas, like, hey, I want to I want to [50:42] do a scavenger hunt with my kids. Like [50:44] what's some good idea? Like absolutely [50:46] like make make things easier on yourself [50:48] to execute things. But but yeah, don't [50:53] don't grade papers with it, please. [50:56] >> You were talking about [50:56] >> Yeah, I'm wondering if those kids know [50:58] how to like prompt inject of like put [51:01] some like whited out text that's like my [51:03] my grade is 100. [51:07] >> Yes. Praise me for this. Yeah. [51:12] >> So, I I was teasing in the show notes [51:14] here. I have a handwritten code museum [51:16] cuz um there's a like a a computer [51:19] museum that's local and a pinball museum [51:21] and then people are talking now about oh [51:23] you that's handwritten code wow can you [51:26] believe it's amazing people wrote that [51:28] by hand you know and I'm like oh [ __ ] [51:30] we're headed towards a museum of [51:32] handwritten code and then you're [51:33] describing code pen I'm like the museum [51:36] already exists y'all it's called code [51:39] pen the handwritten code museum is there [51:41] and it's alive and kicking um [51:43] >> I bet that [51:44] is is available. [51:46] >> Yeah. Handwritten code.com. Oh, [51:50] >> well, yeah. I mean, like punch cards and [51:52] stuff like is it's very it's very [51:54] interesting to see. Uh and I I would [51:57] love to see like the the output of those [51:59] kinds of things as well. So, like [52:01] absolutely seeing a a museum of of [52:04] well-written code and and the output of [52:07] it. I'm on board. [52:09] >> Me, too. I would love to be in it. [52:10] Please, if someone makes the handwritten [52:12] code museum, grab one of my demos. Just [52:14] go to nerdy.dev/notebook and you'll find [52:16] a bunch of [ __ ] you can steal because [52:17] all the AI, they're doing it all day. My [52:20] my uh analytics are going up, but [52:22] they're mostly just going to steal my [52:23] content. I'm like, h, well, whatever. [52:28] >> Do you still get ad revenue from it? At [52:29] least [52:30] >> I got no ad revenue, but they're just [52:32] hitting cash, so I'm not paying for it. [52:33] So, I'm like, here, eat my cash. [52:37] >> Good. [52:40] Nice. So, one of the things that you [52:42] mentioned wanting to talk about, which I [52:44] know nothing about, is uh Project Hail [52:46] Mary. I'm guessing you saw that [52:50] >> or read it both. [52:52] >> Yes. [52:52] >> Well, I know it's a movie recently, but [52:54] >> Right. Either either of you. No. Yes. [52:56] >> I have not have not seen it. [52:57] >> It's a book that's been recommended to [52:58] me by multiple friends. Um I I'm If I [53:02] read books, that'd be great, but all I [53:03] read are dumb tech articles and AI [53:05] articles all day, so I I I'm missing [53:08] out. But I'd like to see the movie maybe [53:10] cuz I never read a Harry Potter. [53:11] >> Good news is they made a movie. So now [53:13] you can now you can enjoy that. [53:14] >> Does it do it justice or was it like [53:16] Congo where the book was better? [53:19] >> Uh it absolutely does it does it [53:21] justice. There's there's a lot of stuff [53:22] that's that's glossed over but almost [53:24] almost nothing that's like omitted [53:26] really. Um [53:28] >> Wow. [53:28] >> That's rare. [53:30] >> It it was it was really like a a a [53:35] dedicated like loved project. Um the the [53:38] author like got Ryan Gosling involved [53:40] while it was still like in drafts and uh [53:43] Ryan was just totally on board with it [53:45] and and produced it and um it's just so [53:49] incredible. There's there's like [53:51] extremely little CGI. Almost everything [53:53] is practical effects. Um the like zerog [53:58] rig that they that they made for this is [54:01] is insane. So all the stuff where he's [54:03] floating around is like really done. Um, [54:06] and it's [54:07] >> wow. [54:08] >> It's it's a it's a great a great movie [54:10] and very enjoyable and kids as long as [54:13] they're like seven and up will will [54:15] probably uh be able to to enjoy it. [54:19] >> Sick. I'm about to make that our next [54:20] movie, dude. I'm It's awesome. [54:22] >> For real. Yeah, especially if you can, [54:24] you know, find like a um a Tuesday deal [54:27] where it's, you know, like cheaper to go [54:28] or whatever. Um, absolutely take them. [54:31] But it it is like two and a half hours, [54:33] so buckle up a little bit. Um, but my my [54:37] kids were engaged the the whole time. [54:40] They they loved it. And spoiler alert, [54:42] there's an alien, and he's amazing. Uh, [54:46] he's like you you just want to bring him [54:48] home. He's he's so great. [54:50] >> Out does Groku, huh? [54:52] >> Yeah. Yeah. [54:54] >> Whoa. [54:55] >> He doesn't he doesn't have a face, but [54:57] he's even cuter. Like, it's it's great. [55:00] >> Cute without a face. That's uh what I'm [55:02] not actually going to finish my [55:03] sentence. [55:03] >> Sounds like the song name. [55:06] >> There's a really rude thing people said [55:08] in high school, so I'm just not [55:10] repeating. [55:10] >> Oh god. [55:12] >> Uh but yes, high highly recommend. The [55:14] the book is is also incredible. Um even [55:18] even if you're not like super super into [55:20] sci-fi and stuff, like it's it's got [55:22] it's got a lot of um a lot of like [55:26] deeper kind of things happening to it. [55:28] But the whole the whole book is like [55:30] about experimenting and trying to like [55:32] find the solution. So like as a [55:34] programmer, even if you're not into like [55:36] science and science fiction kind of [55:38] stuff, like you should you should [55:39] appreciate that that aspect for sure. [55:42] >> This is an awesome review. I'm pumped. [55:44] >> Yeah. Now I'm going to check it out. I [55:46] wasn't interested except for I have [55:48] liked the um Ryan Gosling doing the like [55:51] Jenzy slang like have you seen this? [55:54] Like we we picked you for this mission. [55:56] He's like you capping. No cap. Like like [56:01] it's so good. [56:02] >> Yeah, the marketing around everything [56:04] has has been really great. Uh yeah, you [56:07] you definitely need to check it out. [56:09] >> Yeah. [56:10] >> Speaking of Gen Z, Robbie and I were [56:11] chatting about how uh we're we're both [56:15] individuals that when we were younger, [56:17] we worked hard even though we played a [56:18] lot of video games. You know, we were [56:20] >> 90s. [56:21] >> Video games were hard. [56:23] >> But video games were hard. Um [56:25] >> that's true. But they also had an end, [56:26] which they don't. [56:28] >> Yeah. [56:29] >> Yeah. You didn't have to keep paying [56:30] more. You bought the game and then you [56:31] just had it. That was amazing. Uh you [56:33] didn't buy it and then have to work to [56:35] unlock the rest. But we're like more [56:37] like just reflecting on like uh you [56:40] know, we were both kind of [56:41] entrepreneurs. We were in bands. We [56:43] played and we wanted things and we um we [56:46] weren't so mad at the world for making [56:48] things hard. we were willing to like [56:49] fight back and we're feeling a little [56:50] bit like some of the Gen Z folks are not [56:53] doing that and we're uh how I want to [56:56] know about you Shaw. Did you play in [56:58] bands? Were you entrepreneurial? How did [57:00] you get to this? I would call you a [57:01] successful individual right now. How did [57:03] you get here? Did [57:04] >> Thank you. [57:04] >> Yeah. Uh [57:08] um a lot of luck uh for sure. Um, so [57:13] last last time I was on uh web whis [57:16] whiskey web and whatnot. Uh, I I talked [57:19] a little bit about [57:21] >> uh I saw it. It was actually when I [57:22] researched you. It was your second thing [57:23] you popped up on. I was like, "Yeah, I [57:25] should have put it in intro, but I [57:27] didn't." Sorry. [57:27] >> It was like two two years ago maybe, I [57:30] guess. Uh but I I talked a little bit [57:32] about you know just discovering like [57:34] HTML like I found view source and I was [57:37] instantly you know enthralled and of [57:39] course it opened up in text edit and so [57:41] I was like hey I can make some changes [57:43] and and found that out and um so so from [57:48] there like you know just making like fan [57:50] fan games um like all that all that kind [57:53] of stuff like I was just interested in [57:55] like being able to make my own things [57:58] that was super interesting and drawing [58:00] my own sprites and like making all this [58:01] kind of stuff. So like time on the [58:03] computer wasn't like a like a doom [58:07] scrolling kind of thing like it was [58:10] >> there was more activity to it like there [58:12] was more of a creative engagement kind [58:15] of thing. [58:16] >> Um and and most of it was was relatively [58:19] solo because you know the the uh just [58:23] capabilities of everything and and the [58:25] cost of of being online was was so high. [58:28] Uh but you would find like these [58:30] dedicated forums of other people who had [58:33] those those kind of interests and and [58:35] you would encourage each other and and [58:37] share things like that. That was super [58:40] cool and and just kind of drove the the [58:44] um the desire to like build more and [58:47] create more and and do better. Um, and [58:51] not to brag, but I did hold the record [58:53] for worst Sonic the Hedgehog fan game uh [58:57] for for a while. I I think I've I've [58:59] I've been outpaced uh since since then. [59:01] Um, but you know, small small claim to [59:05] fame. Uh, but but yeah, like from from [59:08] there, like programming was just always [59:09] kind of a thing. And then when I was 18 [59:13] or so, I decided I wanted to learn [59:15] guitar. And you know, pretty soon after [59:18] was already like playing with with some [59:20] friends of of mine. I wasn't any good, [59:23] but they needed someone. So, I was there [59:25] and I learned learned as we went. Uh, [59:29] and you know, played played in various [59:31] bands throughout the throughout the [59:32] years, mostly like church churches and [59:35] stuff like that. And um, you know, I [59:38] I've never been very good, but I've [59:40] always been very consistent. And I've [59:42] always been one um who who's just [59:45] prepared, you know, like I I show up I [59:47] try and show up on time and I try and [59:49] show up knowing everything and and being [59:51] ready to go. And whether that's been a [59:54] job or uh music or or whatever, like [59:57] that's that's really important, you [59:59] know. Don't don't show up expecting [60:01] others to to be prepared for you. Like [60:05] come and do the work ahead of time so [60:07] that you come and are are just ready to [60:10] go. Interesting. You called it luck, but [60:12] luck is having the right amount of [60:14] preparation at the time that it was [60:16] needed. So really it was not luck. You [60:18] are consistently ensuring an amount of [60:21] preparedness at the time of which it's [60:23] required. And so um [60:25] >> the opportunities themselves the [60:28] opportunities themselves have always [60:29] have always felt like luck. Uh but [60:32] without the the work beforehand, you [60:35] know, if if somebody came to you and [60:37] said, "Hey, let's play Coachella." and [60:40] you'd never picked up an instrument [60:41] before, like that's a lucky opportunity, [60:44] but you're probably gonna bomb and never [60:46] have another opportunity after that. So, [60:50] you know, there there's there's elements [60:51] of both. Like, you you've got to you've [60:53] got to put in the work and you've got to [60:54] be prepared, but uh with with a little [60:57] bit of luck, too, like you you end up [61:00] working with Chris Koyer and you know, [61:02] developing an app that millions of [61:04] people use, like you know, that that [61:06] aspect of it is is super lucky. And I'm [61:09] I'm so thankful for for uh for that. Uh [61:13] but I've definitely put in the hours to [61:16] be able to do some of that. [61:21] >> Yeah. Yeah. I mean, I definitely think [61:24] before like social media is just bad. Um [61:28] it's like addictive. It's like it's not [61:31] good for everyone, adults, kids, anyone. [61:34] Um and I think that was kind of the [61:37] problem. Like I know we had plenty of [61:38] internet, plenty of video games growing [61:40] up, like you know, you chat with your [61:42] friends on AIM or whatever, but you were [61:44] chatting with real people. You weren't [61:45] scrolling mindless content. It was like, [61:47] I'm going to talk to this guy I know [61:49] about whatever. [61:50] >> You had to wait for someone to come [61:51] online before you could send him a [61:53] message. Yeah. [61:54] >> And it was on a giant machine in your [61:56] house that when you were done, you [61:58] walked away from it. It wasn't in your [61:59] >> It was not private. [62:01] >> Yeah. [62:01] >> Yeah. [62:01] >> Yeah. Yeah. So, like that's what we're [62:03] trying to do with raising our kids. And [62:06] I don't know how it's going to go, but [62:08] like you know, you're if you're going to [62:09] be on the computer, it's going to be in [62:10] a common area. If you're going to play a [62:12] video game, it's going to be in a common [62:13] area. You're not like in your room. [62:15] You're like, Also, the games you're [62:16] playing, you're not playing with any [62:18] random weirdos online. It's like, you [62:20] know, it's an N64 game. It's whatever. [62:22] >> Um, yeah. So, like I think that like [62:26] it's just it's nuanced. It's like [62:27] technology is not the problem. It's just [62:29] the way that like things are today has [62:32] gotten problematic. [62:33] >> For sure. Yeah. Yeah. And I I'm the I'm [62:37] the same with my kids. Like no no no [62:38] screens in the room. Like if we're uh if [62:41] you're gonna play a video game or like [62:43] watch a show, you know, it's it's going [62:45] to be in the common area or it's going [62:46] to be around someone. Um and I I want to [62:51] get them more into the creative side of [62:54] technology. Um I haven't figured out the [62:57] right way to do that. They don't they do [62:59] not have the uh the discipline or the [63:02] determination. [63:02] >> How old are your kids, by the way? [63:04] uh seven and and 12. Um [63:06] >> Oh, mine are seven and nine. Okay, cool. [63:09] >> Nice. Uh and and they're they're great. [63:12] They're so they're so creative and they [63:14] they both they both have such such great [63:16] ideas, but when it comes time to like [63:18] execute them, it's you know that I I [63:22] don't know that they want to like stick [63:24] with it as much as as like we did when [63:26] when we were younger and we we tried to [63:29] tried to get something going. So, I'm [63:31] trying to figure out some ways to like [63:33] get them involved with technology that's [63:35] not like a connected thing, but that is [63:38] like another canvas for them basically. [63:41] Um, that's that's what I want. And most [63:44] of like the video games we get, like I [63:45] want I want some kind of um I don't want [63:49] it to just be like a mindless thing. I I [63:51] want some aspect of creativity in that. [63:54] >> There's so many cool indie games. Yeah. [63:55] >> Right. Right. And I'd love for him to do [63:58] Minecraft. I don't I don't think either [64:00] of them uh are are quite ready for some [64:04] of that, but uh but like the the idea of [64:07] that and like creating your own world [64:09] and like you know really the the [64:11] exploration and the and the um just the [64:14] the amazing creativity that's that's [64:17] possible within those those platforms I [64:19] I think is is key to like getting kids [64:22] involved with with tech. [64:24] >> Oh man, I've got some tips. My kid my [64:26] kids have been pretty [64:29] uh involved in all I like balance. So to [64:31] me that's a thing in the house is I'm [64:32] like look you do a little bit of that, a [64:33] little bit of this, a little bit of that [64:34] and we just kind of float around. But [64:36] it's spring break right now and one of [64:38] my kids, the nine-year-old is his goal [64:40] is to build a game and we've built a few [64:42] games already. We've written games in [64:44] Pico8. Um I have a GDO setup where he [64:47] can go um take a sprite sheet. He can [64:50] make a sprite sheet and a sprite which [64:52] is like a cool pixel art tool and upload [64:55] the output of the sprite sheet into GDAU [64:58] and then his character does the [64:59] animations. So as long as he sticks to [65:01] the um sprite sheet then the jump [65:03] sequence and the squat sequence and all [65:05] that and the walking they're all good. [65:07] >> Nice. And right now he's uh he's been [65:09] very obsessed with um his teacher he [65:11] reads a lot of comics and his teachers [65:13] and the teach or Invader Zim and like [65:15] the teacher's always weird or Jimmy [65:16] Neutron and the teacher is always weird [65:18] and so uh he was like I want to make a [65:20] game where like it's teachers versus the [65:21] students and it's like Super Smash Bros. [65:24] Uh and you can choose to be one of the [65:26] either, you know, like beat each other [65:27] up. But then like he started designing [65:29] the game. He's actually I just want [65:31] puppies. I want puppies to fight. Let's [65:33] have let's make a puppy fighter. I'm [65:34] like all right let's make a puppy [65:35] fighter. So today he was up there uh in [65:37] a sprite doing pixel art designs um and [65:41] designing levels um because we've done [65:44] I've sat with them so much a lot of the [65:45] time in the beginning with screens with [65:46] my kids it was shared time where I was [65:49] like let's sit together like there's no [65:50] reason I have to give you the screen and [65:52] then walk away [65:53] >> like I think that's like a mistake a lot [65:55] of parents make. It's like, no. Oh, and [65:56] when I raised my kids on uh retro games, [65:59] so the first games they ever played were [66:00] like old school. They were hard and [66:02] simple. And so you learned that there [66:04] was like a skill to acknowledging your [66:06] your placement on the screen and finding [66:08] your advantage. So why the Atari is [66:10] good? We played uh Centipede just the [66:12] other day and he's trying to beat my [66:13] high score. Um but there's different [66:16] phases of the brain that are really [66:17] good. And so like uh Spike Prime and [66:20] Legos have been really good for visual [66:23] programming where you get these like [66:25] nodes that you create. And so you plug [66:28] in like a rotating uh you know little [66:30] gear into one slot. And so you're like a [66:32] needs to rotate four times and then all [66:34] of a sudden they see in a physical world [66:36] the thing turn and then they know if [66:38] they wrote rotate two engines at the [66:40] same time and actually moves forward. Uh [66:42] so you've got like that coding side. [66:44] Then we did the coding side um that was [66:46] more design based which was Bloxles. Um [66:49] and that was where you basically get [66:51] given a design system of making uh top [66:54] down games or a platformer game and [66:57] you're in design mode. And so now you're [66:59] challenging your kid to see like which [67:01] of these two do you prefer? Do you [67:03] prefer like articulating the [67:05] functionality and like making the robot [67:06] move and turn or do you want to create a [67:09] level of which the character rests on [67:11] things and collects things? Um, and and [67:15] I've always sat down with them, too. [67:16] We've done HTML and CSS. I've got like [67:18] demos where we made exploding emojis. I [67:20] was like, "Guys, let's just make emojis [67:21] like explode all over the screen, you [67:23] know, and they're like, "Here, look, [67:24] I'll add a slider. When you change the [67:25] slider, it changes the size of the [67:27] emoji." And as long as I can like not [67:29] get stuck, I can engage them. But if I [67:31] get stuck, they're like, "Oh, this is [67:33] weird awkward moment where dad is [67:35] sucking." Um, [67:37] >> what are dad tools? [67:39] >> Yeah. What? Yeah. Oh, he's getting [67:41] boring. He's like, he hasn't talked in [67:43] one minute. I think something's going [67:44] wrong. Um, but I've had a whole lot of [67:47] success and I'm I'm really like proud [67:50] and happy that my kids are like [67:51] interested and just want to make games [67:53] and I'm I was feeling inspire or [67:54] inspired earlier from you where you're [67:56] saying I just wanted to remix things [67:58] that I liked. Um, I'm like, how do I I [68:01] want to give that to my kids. How do So, [68:02] it's like kind of like AI is a very good [68:04] remix engine. I'm like, how do I I [68:06] haven't given it to them yet. I was [68:07] thinking about it this week for spring [68:09] break. I was like, "How do I give him [68:10] Claude where he's done the art? I've [68:14] made him make a plan." So, he's in a [68:16] document making a plan. We've also done [68:18] playing cards where I'm like, "Hey, [68:19] look, you make a spreadsheet where you [68:20] describe the character and give me all [68:22] their stats. I'll make you I'll make you [68:24] a card with AI." And the cards, they've [68:27] each got like five Pokemon cards. They [68:29] made these weird little Pokemon. They [68:30] were in spreadsheets. Just defining data [68:32] in spreadsheets and then realizing that [68:34] that could manifest as something cooler [68:35] than that. So, I'm like, man, all these [68:37] different angles [68:39] Yeah. Oh, yeah. Totally. But I'm like, [68:42] yeah, maybe I need to give them a remix [68:44] opportunity that we haven't done yet. [68:46] And that is really fun to be inspired by [68:48] the games you love. Uh, which is kind of [68:50] like the brawler he's going after is a [68:51] very um Smash Bros. concept, but [68:55] >> I don't know, man. It's really fun. [68:57] >> Yeah. Right. There there's so many [68:59] little opportunities that that you can [69:00] see their gears turning and and if you [69:03] can like latch into that and figure out [69:05] like what what is inspiring them and and [69:09] kind of guide that a little bit like [69:11] that's those are the beautiful moments [69:13] of of parenting [69:15] especially if it's something you're also [69:17] interested in. [69:18] >> Bonus. [69:19] >> Yep. [69:21] >> All right, we are over time here. Is [69:24] there anything you would like to mention [69:26] or plug before we're done? [69:30] >> Uh, try Code Pin 2.0. Uh, just head to [69:33] Code Pin. There's a little pin 2.0 [69:35] button. Give that a click. There's a [69:37] there's a uh great tour uh that shows [69:40] you everything. Uh, it's it's really [69:43] lovely. Um, we've we've spent so much [69:45] time on it and we've we've enjoyed using [69:48] it ourselves. So, we want you all to [69:51] enjoy that as well. Should we rate our [69:53] whiskey? [69:54] >> Yes. I was just going to say I forget [69:56] that we do it at the end now, so I was [69:57] about to end, but yes. All right. So, [69:59] this whiskey, this is the Andelus. [70:04] How do you say this, Adam? You know, [70:06] >> I don't know, but I'm not from Texas. [70:08] >> Andalusia. Yeah. [70:11] >> So, it is Striker. It is a Texas smoked [70:15] single malt whiskey, which is different [70:18] than, you know, a single malt scotch [70:20] type of feel because instead of Pete, [70:22] they use like mosquite and applewood and [70:25] like things you would use in uh [70:27] barbecue, which is awesome. And I think [70:30] um I typically don't love Pete and I [70:33] think this uh gives you a lot of the [70:35] same scotchy things you would like from [70:36] a smoky scotch, but not as Petey, which [70:40] is kind of cool. Um anyway, do I have [70:43] >> Yeah, Mosquite. Um let's see. It is [70:47] double distilled. It's 100 proof and [70:50] aged in charred oak barrels for at least [70:52] 2 years, which seems like very short [70:54] amount of time. I guess they just don't [70:55] want to age the youth. [70:57] >> Yeah, I mean it's at least they they [70:59] probably just don't want to have to do [71:00] an age statement. So, it's probably like [71:01] a mixture of random stuff. [71:04] >> Um but yeah, um notes. I get a lot of [71:08] like it it tastes like barbecue a lot [71:11] like [71:12] >> more mosquite than applewood for sure. [71:14] Yeah. [71:15] >> Yeah. Um very smoky. Pretty yummy. I [71:18] would say um I don't know. So okay, back [71:22] up. Rating system zero to eight [71:24] tentacles. Zero being the worst, eight [71:26] being the best. Um what do you think, [71:29] Adam? [71:31] Yes, I am enjoying it. It has a um [71:34] traditional sort of flavor. It's not [71:37] scotchy. It is unique, which is kind of [71:39] what I wanted. I wanted something Texas [71:41] unique. So, we've got the single malt. [71:43] Um, [71:44] but but they did it their way, which is [71:46] exactly what I wanted. Something unique [71:48] uh from that space. It's [71:52] my first flavors were very enjoyable, [71:54] but kind of classically I'm noticing [71:56] that as I continue to sip things, um, [71:59] notes pop out. There's a vanilla pop [72:01] that I thought was really yummy. Um, but [72:03] it it really became more mosquy. I was [72:06] I'll be honest, I was hoping for more [72:08] apple wood. Um I whenever I smoke my [72:11] meats, I use apple wood. It's my [72:12] preferred one. And it's also why I think [72:14] um logulin 16 is so good is cuz it's [72:17] supposed to be like it had apple wood [72:20] flavor in it. It's like a maple bacon [72:23] type of vibe. Anyway, it's good. It's [72:26] definitely well over a six. I don't [72:28] think it's in the seven category. I'm [72:29] going to give it a 6.25. [72:33] I'm excited to drink more. Um, but I [72:36] don't know. I was longing for a little [72:38] bit of a peyiness to it and it's not [72:40] there. So, it's all good. Anyway, I'm [72:42] happy. [72:42] >> That's not what it has. [72:43] >> Yeah, it's not what it has. [72:44] >> Yeah. Sean, what do you think? [72:47] >> So, as as far as like a whiskey [72:49] connoisseur goes, I that that's that's [72:51] not that's not me. I I I love whiskey. [72:54] Um, but I I don't have the refined [72:57] palette. However, this is is very [73:01] enjoyable. Like I I definitely feel like [73:04] it's it's just like the perfect campfire [73:08] whiskey. Like it it just really evokes [73:10] that feeling. Um and uh yeah, I I enjoy [73:15] it. I I would probably [73:18] probably give it a seven. I Yeah, it's [73:21] it's a little uh it is a little strong [73:24] as far as the the like smoky kind of [73:28] feel goes. Uh, but I don't I don't mind [73:32] it in context, but it can it can be a [73:34] little overwhelming after after a while. [73:38] >> Nice. Yeah. So, if I were saying this is [73:42] a scotch, this would be very high on my [73:44] list because I don't love some of the [73:47] scotch flavors. [73:48] >> We beasty. So, then we beasty last week [73:50] was scotchy. That was I've been having [73:53] more and I'm like, whoa. Um, I'm happy. [73:56] it. [73:57] >> But the smoke I do I'm learning to like [73:59] the extra smoky flavors. I just don't [74:01] love the Pete particular uh smoke. But [74:05] um this I feel like is super interesting [74:09] from the interesting level. Would [74:10] definitely recommend picking it up. Like [74:12] I haven't had anything like this before. [74:14] It's kind of akin to having like a [74:16] whiskey at a bar where they do the fancy [74:18] like they light something on fire and [74:20] they smoke it in front of you like [74:22] >> um Yeah. So I think it's got a lot of [74:24] that going on. Um, I don't know. The [74:28] interesting I think I'm going to go [74:29] seven as well, just because it's super [74:30] interesting. Uh, I think I'd love to see [74:32] more that is maybe aged longer, done a [74:34] little more traditional. Um, you know, [74:37] some other things that they could do to [74:38] make it just, you know, a little bit [74:40] better. But, um, no complaints for me. [74:43] Pretty good. [74:45] >> Cool. That's a that's a great hit. Nice. [74:48] >> Yeah. All right. Well, thanks everyone [74:51] for listening. If you liked it, please [74:52] subscribe. Leave us some amazing [74:53] reviews. We appreciate it. And we will [74:54] catch you next  📄 **Full text:** ![[Full Document Contents/Articles/Keyframes, Cash, and CodePen W Shaw.md|Keyframes, Cash, and CodePen W/ Shaw by YouTube]] ## Highlights - >> Uh it most of the code that that we've got uh I I don't think AI is capable of of understanding very well because it it's it's just so so specialized. And so we we use like Apollo and um and Nex.js and uh and React. And so trying to get those three things working together. Um I did I did do a lot of rubber ducking with ([View Highlight](https://read.readwise.io/read/01krgrz7ba1q12wgkkys13mqcm)) - Tags: 👻 ai highlighted - that uh the more that we can serverside render so that um things are things are at least visible um so you can tell what pin you're on. You can tell you know what's about to happen um that that's mostly what we're what we're focusing on to to just you know kind of affect the perception of it more than the actual load time. >> Gotcha. Yeah. I was what I was trying to get at I guess um was like I feel like this is something that a lot of companies have run into of like they have a Rails backend or you know ([View Highlight](https://read.readwise.io/read/01krgrz7j1j260r5447mjawrva)) - Tags: 👻 ai highlighted - editing. And um uh while it is it is really great, it's a real it's a real big advancement over code mirror 5 uh especially for like accessibility and and capabilities and all that kind of stuff. It is a uh very weird API. Um and everything is basically an extension off of it. So you've got to get real comfortable with a lot of a lot of just very specific concepts like state fields ([View Highlight](https://read.readwise.io/read/01krgrz7v5xx3mp1dwffwefgsc)) - Tags: 👻 ai highlighted - we want and to make it easy to like toggle features on uh like the line numbers and code folding and changing themes and all that kind of stuff. But boy, it's been an undertaking. >> Dang. Well, every time I've used it, it's been smooth. I didn't think about the fact that this was, you know, some web experience. It felt just like an editor. So, you did well. >> Good. Good. Yeah. And we we didn't just want another VS code in the browser, you know, like we we looked at that like very briefly and we were like so just to ([View Highlight](https://read.readwise.io/read/01krgrz802c5jdrfs3pexrw4a5)) - Tags: 👻 ai highlighted