POPULARITY
22 episodes with this dot
2 episodes with this dot
On this episode of the Modern Web Podcast, Rob Ocel and Danny Thompson sit down with Marc Backes, a freelance full-stack engineer with a wild journey through Vue.js, Nuxt, and DevRel. Marc shares what makes the Vue community stand out, why DevRel often misses the mark, and how Wikipedia uses Vue 3 to scale content across thousands of languages.Then, things get real. Marc opens up about a $250,000 startup disaster that changed his view on business forever. Meanwhile, Danny breaks down what it takes to run a tech conference on a shoestring budget—and why developers hate traditional marketing.Key Points from this episode:- The Power of Vue & Nuxt – Marc shares why he chose Vue.js, how he built his website with Nuxt, and what makes the Vue community unique.- DevRel: Hype vs. Reality – A discussion on whether DevRel is truly valuable for companies, how it's often misused, and what actually works in developer advocacy.- A $250K Startup Mistake – Marc's story of losing $250,000 in a failed startup and the crucial lesson about contracts and trust in business.- Scaling Tech & Community – Insights on Wikipedia's use of Vue 3 for translation, plus Danny's experience running a tech conference with limited resources.Chapters0:00 - Introduction to Entrepreneurship and Failure 0:43 - Podcast Introduction and Guest Welcome 4:25 - Mark's Experience in the Vue Community 9:22 - Working with Large-Scale Organizations 13:05 - Transitioning Between Developer and DevRel 19:00 - Is DevRel Worth It? 24:25 - The Challenges of Running a Tech Conference 26:02 - Lessons from Entrepreneurship 30:56 - The Emotional Toll of Failure 35:03 - Revisiting the $250,000 Grant Story 39:42 - Handling Failure and Moving Forward 41:14 - Where to Find Mark OnlineFollow Marc Backes on Social MediaTwitter: https://x.com/themarcbaLinkedin: https://www.linkedin.com/in/themarcba/Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, hosts Rob Ocel and Danny Thompson sit down with Mariano Cocirio, Staff Product Manager at Vercel, to discuss Fluid Compute, a new cloud computing model that blends the best of serverless scalability with traditional server efficiency. They explore the challenges of AI workloads in serverless environments, the high costs of idle time, and how Fluid Compute optimizes execution to reduce costs while maintaining performance. Mariano explains how this approach allows instances to handle multiple requests efficiently while still scaling to zero when not in use. The conversation also covers what developers need to consider when adopting this model, the impact on application architecture, and how to track efficiency gains using Vercel's observability tools.Is Fluid Compute the next step in the evolution of serverless? Is it redefining cloud infrastructure altogether?Keypoints Fluid Compute merges the best of servers and serverless – It combines the scalability of serverless with the efficiency and reusability of traditional servers, allowing instances to handle multiple requests while still scaling down to zero. AI workloads struggle with traditional serverless models – Serverless is optimized for quick, stateless functions, but AI models often require long processing times, leading to high costs for idle time. Fluid Compute solves this by dynamically managing resources. No major changes required for developers – Fluid Compute works like a standard Node or Python server, meaning developers don't need to change their code significantly. The only consideration is handling shared global state, similar to a traditional server environment. Significant cost savings and efficiency improvements – Vercel's observability tools show real-time reductions in compute costs, with some early adopters seeing up to 85% savings simply by enabling Fluid Compute.Chapters0:00 – Introduction and Guest Welcome1:08 – What is Fluid Compute? Overview and Key Features2:08 – Why Serverless Compute Struggles with AI Workloads4:00 – Fluid Compute: Combining Scalability and Efficiency6:04 – Cost Savings and Real-world Impact of Fluid Compute8:12 – Developer Experience and Implementation Considerations10:26 – Managing Global State and Concurrency in Fluid Compute13:09 – Observability Tools for Performance and Cost Monitoring20:01 – Long-running Instances and Post-operation Execution24:02 – Evolution of Compute Models: From Servers to Fluid Compute29:08 – The Future of Fluid Compute and Web Development30:15 – How to Enable Fluid Compute on Vercel32:04 – Closing Remarks and Guest Social Media InfoFollow Mariano Cocirio on Social Media:Twitter:https://x.com/mcocirioLinkedin:https://www.linkedin.com/in/mcocirio/Sponsored by This Dot:thisdot.co
In this episode of the Modern Web Podcast, host Rob Ocel talks with Mike Chen, Co-founder & CTO of Motivo, about the evolving world of web animations. Mike shares his enthusiasm for tools like Framer Motion (now Motion) and the View Transitions API, discussing how they make complex animations more accessible and intuitive. The conversation explores the practicality of animations in real-world applications, balancing user delight with business value, and avoiding unnecessary complexity. They also discuss the state of decentralized social media, with Mike sharing his thoughts on Blue Sky and its approach to user control. Finally, Mike talks about his Let's Get Technical Discord, a mentorship-focused space helping mid-level engineers sharpen their skills. Making Animations More Accessible – Mike Chen discusses how tools like - - Framer Motion (now Motion) and the View Transitions API simplify complex animations, making them easier to implement while maintaining performance.-Balancing Business Value and User Delight – The group explores when animations enhance UX versus when they become unnecessary, emphasizing the importance of practicality in real-world applications.- Decentralized Social Media Challenges – Mike shares his perspective on Blue Sky, its approach to user-controlled feeds, and the trade-offs between decentralization and usability.-The Power of Mentorship in Tech – Mike talks about his Let's Get Technical Discord, a space dedicated to helping mid-level engineers grow through in-depth discussions and guided learning.Chapters:00:00 - Introduction to the Podcast 00:23 - Guest Introduction: Mike Chen from Motivo 01:05 - Technologies That Have Caught Mike's Attention 01:40 - Web Animations and Their Growing Accessibility 02:13 - Framer Motion and the View Transitions API 02:50 - The Evolution of Animation Tools 03:31 - The Role of Spring Animations in UI 04:07 - Framer Motion vs. Framer as a Platform 05:05 - Expanding Animation Tools Beyond React 05:41 - Practical Use Cases for Animations in Development 06:17 - Business Justifications for Implementing Animations 07:02 - Subtle UI Enhancements vs. Overuse of Animations 08:04 - Good Animation Practices in UX 09:16 - How Companies Like Vercel and Linear Use Animations 10:55 - The Importance of Thoughtful UI Design 12:02 - The Impact of Animation on Brand Perception 13:27 - Animation as a Way to Reduce Cognitive Load 14:45 - Social Media Shifts and Blue Sky's Growth 16:09 - The Vision Behind Blue Sky's Decentralization Model 18:14 - The Challenges of Building User-Controlled Feeds 19:35 - Limitations of Blue Sky's Decentralization Approach 21:48 - Blue Sky vs. Mastodon: Usability and Adoption 24:05 - Scaling Challenges as Blue Sky Reaches 30M Users 26:43 - The Trade-offs Between Centralization and Convenience 28:59 - The Role of UI in Establishing Trust in Brands 30:27 - The Value of Mentorship in Engineering Growth 32:09 - The Struggles of Learning Without Proper Guidance 33:51 - Why Context Matters in Technical Decisions 35:15 - Where to Find Mike Online and Discord Community 36:02 - Closing Remarks and Sponsor MessageFollow Mike Chen on Social MediaBluesky: https://bsky.app/profile/chenmike.comLinkedin: https://www.linkedin.com/in/chenhmike/Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, host Rob Ocel, along with co-hosts Adam Rackis and Danny Thompson, explores the sustainability of open source with Chad Whitacre, Head of Open Source at Sentry. Chad discusses the Open Source Pledge, an initiative encouraging companies to fund the open source projects they rely on. He breaks down the challenges maintainers face, the imbalance between corporate benefit and community support, and why businesses need to step up. The conversation touches on alternative funding models, the history of open source licensing, and the push to make sustainability a core part of the industry.
In this episode of the Modern Web Podcast, Rob Ocel, Danny Thompson, Adam Rackis, and Brandon Mathis discuss the role of abstractions in software development. They explore frontend tools like React and SolidJS, backend abstractions like serverless platforms, and the importance of understanding patterns and learning through mistakes. The group also highlights emerging trends for 2025, including opportunities in platform plugins and developer marketplaces. Key Points for the Episode: The Role of Abstractions in Development: The panel discusses the benefits and challenges of abstractions in software development, emphasizing the importance of understanding underlying systems to avoid over-reliance on tools like React hooks and serverless platforms. Learning Through Experimentation: Personal experiences with tools like Advent of Code, exploring new languages like Swift and Rust, and experimenting with new frameworks like SolidJS highlight the importance of hands-on learning and stepping outside comfort zones. Platform Opportunities: A growing interest in building apps and plugins on established platforms like Stripe, Zoom, and Chrome Extensions showcases untapped opportunities for developers to create impactful solutions and monetize their skills. Chapters 0:00 - The Potential of Plugins and Platforms 0:42 - Welcome to the Modern Web Podcast 0:47 - Introducing the Hosts and Guests 1:19 - Holiday Projects and Side Gigs 1:31 - Danny's Speedrun of a New Platform 2:07 - Adam's Holiday Reading List 3:38 - Brandon's Advent of Code Challenge in Swift and Rust 5:01 - Learning New Programming Languages Through Challenges 6:52 - Discussion on Abstractions in Software Development 7:10 - The Balance Between Abstractions and Understanding the Basics 8:56 - Learning Through Experience: The Importance of Stepping on Rakes 9:46 - React's Role in Frontend Development and Its Critics 10:39 - The Evolution of Frontend and Backend Abstractions 12:09 - The Impact of Serverless and Cloud Platforms 13:31 - Misuse of Abstractions and Overcomplicated Code 14:27 - The Common Pitfalls of React Hooks Misuse 15:29 - Overuse of `useEffect` and Its Performance Implications 16:41 - Learning from Industry Experts: Insights from Ben Lesh 17:53 - The Evolution of the Web from Static Documents to Interactive Applications 19:04 - The Role of Abstractions in Backend Development and Serverless Adoption 21:06 - Advice for Developers on Understanding Patterns and Abstractions 22:21 - Sponsor Message: This Dot Labs 22:27 - Looking Ahead to 2025: Technologies and Trends 22:43 - Excitement Around SolidJS and Signals-Based Frameworks 23:29 - The Growing Ecosystem Around SolidJS and TanStack Router 24:48 - Insights from a Conversation with Ryan Carniato 25:19 - Interest in TanStack Start and React 19 Features 26:09 - Danny Learning Spanish and Coding Challenges 27:16 - Exploring New Platforms for Side Projects and Monetization 27:55 - The Untapped Potential in Plugin and App Store Ecosystems 29:01 - Case Study: Monetization through Small Chrome and Office Extensions 30:09 - Growth of Developer Marketplaces (Stripe, Slack, Shopify, Zoom) 31:06 - The Challenge of Getting Projects in Front of Users 32:03 - Opportunities in Game Modding and Twitch Extensions 32:32 - Closing Thoughts and Future Podcast Episodes 32:45 - Sponsor Message and Where to Find the Podcast Online Follow the crew on Twitter and Linkedin: Rob Twitter: https://x.com/robocell Rob Linkedin: / robocel Danny Twitter: https://x.com/DThompsonDev Danny Linkedin: / dthompsondev Adam Twitter: https://x.com/AdamRackis Adam Linkedin: / adam-rackis-5b655a8 Brandon Twitter: https://x.com/BrandonMathis Brandon Linkedin: / mathisbrandon Sponsored by This Dot: thisdot.co
In this Modern Web Podcast episode, hosts Rob Ocel and Danny Thompson chat with Bree Hall, developer advocate at HubSpot and content creator known as "Bytes of Bree." Bree shares her journey from front-end engineer to advocacy, offering insights on balancing travel, staying productive, and navigating the pressures of being "always on." They explore creating engaging content, short vs. long-form formats, and how to build trust with an audience. Bree also shares tips on learning, working, and sharing knowledge while staying authentic in the tech space. Key Points from the Episode: Transition to Developer Advocacy: Bree shares her experience moving from front-end engineer to developer advocate, highlighting the expanded ways to contribute beyond coding. Managing Travel and Productivity: Practical tips for balancing frequent travel with work, including maintaining a travel kit, planning small tasks, and adapting work hours. Specializing in a Tech Stack: Bree emphasizes the importance of mastering a specific tech stack deeply, choosing Astro, React, and Tailwind as her focus for 2025. Short vs. Long-Form Content: Discussion on how short-form content skills improve long-form storytelling, with platforms like TikTok emerging as powerful tools for learning and discovery. Chapters 0:00 - 0:21 Introduction to Popular Tech Content 0:21 - 0:57 Exploring Niche Technical Topics 1:03 - 1:26 Podcast and Guest Introduction 1:32 - 2:04 Transitioning to Developer Advocacy 2:04 - 2:41 Key Differences Between Engineering and Advocacy 3:07 - 3:48 Perceptions vs. Reality of Developer Advocacy 3:48 - 5:25 Navigating the Challenges of Always Being "On" 5:25 - 6:34 Travel Productivity Tips for Advocates 6:34 - 7:24 Balancing Work During Heavy Travel 7:24 - 8:46 Tips for Staying Organized on the Road 8:46 - 10:12 Personal Rituals to Stay Grounded 10:12 - 11:17 Optimizing Gear for Productive Travel 11:17 - 12:14 Reflecting on Priorities for 2025 12:14 - 14:22 Choosing and Mastering a Tech Stack 14:22 - 15:56 Advice for Junior Developers 15:56 - 18:10 Balancing Fun and Learning in Development 18:10 - 19:55 Sharing the Journey: Content Creation Insights 19:55 - 22:24 The Spectrum of Developer Passion 22:24 - 24:03 Finding Your Lane in Tech Content 24:03 - 25:02 Diverse Interests in Developer Content 25:02 - 26:31 Content Creation and TikTok Strategies 26:31 - 27:42 The Success of "Break into Tech" Content 27:42 - 30:15 The Role of TikTok as a Search Engine 30:15 - 32:01 Short Form vs. Long Form Content 32:01 - 33:56 The Art of Engaging Content 33:56 - 36:04 The Power of Short Form in Building Trust 36:04 - 37:39 Evolving as a Content Creator 37:39 - 39:01 Processing and Discussing Information in Content 39:01 - 40:30 Challenges of Live Content Creation 40:30 - 41:39 Closing Remarks and Guest Links Follow Bree on Social Media Twitter: https://x.com/bytesofbree Linkedin: https://www.linkedin.com/in/briannahall0/ Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, hosts Rob Ocel and Danny Thompson sit down with Pat Clarke, Director of Engineering at Lumen Learning, to explore the evolving state of web development. They discuss everything from the monotony of today's web design and the rise of cookie-cutter sites to the resurgence of personal websites and the need for creativity in web experiences. Pat shares insights on balancing innovation with business goals, the complexities of front-end development, and why full-stack developers may not always be the solution. Key topics include: - Why the web feels “gray and boring” today - The balance between data-driven design and user experience - The importance of front-end specialization in modern development - How to train developers to be well-rounded while embracing their strengths - Finding the right resources to skill up in a fast-moving industry Follow Pat Clarke on Social Media Twitter: https://x.com/LeftShotDev Linkedin: https://www.linkedin.com/in/pat-clarke-dev/ Lumen Learning: https://lumenlearning.com/ Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, host Danny Thompson sits down with David Mytton, founder and CEO of Arcjet and creator of the console.dev DevTools newsletter. They explore what makes a truly successful developer tool, the importance of great documentation, and how Arcjet is redefining "security as code" for modern applications. David shares insights into open-source strategies, balancing speed and innovation in startups, and the evolving role of AI in developer tools. Chapters 0:00 - 1:41 Episode Introduction 1:42 - 2:55 David Mitten's Background & Dev Tools Expertise 2:56 - 4:17 The Importance of Great Documentation 4:18 - 6:43 Challenges in Keeping Documentation Updated 6:44 - 9:20 Simplistic vs. Over-Stylized Docs 9:21 - 11:19 Why Arcjet Stands Out 11:20 - 13:01 Developer Security & Perceptions 13:02 - 15:07 Layered Security & Best Practices 15:08 - 16:46 Encouraging Developers to Prioritize Security 16:47 - 18:48 Dependency Management Challenges 18:49 - 20:30 Evolving Dev Tools Over Time 20:31 - 22:54 Modern Code Editors & Terminal Innovation 22:55 - 25:41 AI's Role in Dev Tools 25:42 - 27:08 Benchmark Reliability in Dev Tools 27:09 - 30:57 Open Source Contributions & Strategy 30:58 - 32:54 Shipping Fast as a Small Team 32:55 - 34:06 Closing Remarks Follow David Mytton on Social Media Twitter: https://x.com/davidmytton Linkedin: https://www.linkedin.com/in/davidmytton/ Website: https://davidmytton.blog/ Github: https://github.com/davidmytton Sponsored by This Dot: thisdot.co
In this episode of Compressed FM, Dustin Goodman shares insights from his journey from IC to engineering manager at companies like ClickUp and This Dot. The conversation explores the nuances of technical leadership, team dynamics, and the importance of understanding personal values in management. The discussion then shifts to a deep dive into React Server Components, examining their implementation challenges and potential impact on the framework ecosystem. SponsorsWix Studio combines the best of both worlds—intuitive design tools for clients and full-stack flexibility for developers. Customize every detail with your own code and take control of your projects.Chapter Marks00:00:00 - Intro00:00:42 - Sponsor: Wix Studio00:01:33 - Engineering Management Journey00:05:11 - Managing Different Experience Levels00:07:14 - Technical Skills in Management00:09:27 - Should Managers Code?00:12:19 - Managing Up vs Managing Down00:17:27 - Team Values Discussion00:20:11 - Strengths and Management Styles00:26:07 - React Server Components Introduction00:29:27 - RSC Implementation Challenges00:34:34 - GraphQL and Server Components00:39:13 - Future of React Frameworks00:43:10 - Vite 6 Discussion00:47:52 - React Community Evolution00:51:21 - Picks and PlugsAmy Dutton:Pick: Browse AI (web scraping tool with AI capabilities)Plug: Advent of CSS and Advent of JavaScript (24 coding challenges in December)Dustin Goodman:Pick: Cursor (AI-powered code editor)Plug: "Engineering Management for the Rest of Us" by Sarah DrasnerBrad Garropy:Pick: Helldivers 2 (video game)Plug: Raycast extension for Stripe (automatically fills checkouts with test cards)01:00:14 - Show Wrap-upLinksBooks Mentioned:"The Manager's Path" by Camille Fournier"Engineering Management for the Rest of Us" by Sarah DrasnerTools & Software:Wix StudioBrowse AICursor (code editor)RaycastRaycast Stripe extensionVite 6Next.jsSocial/Community:BlueSky (Brad and Amy)Bytes NewsletterConnectTech conferencePeople Referenced:Ryan BurgessGergely OroszTracy LeeDan AbramovTanner LindsleyJohn LindquistDavid KhourshidAssessment Tools:Clifton StrengthsFinderAPIs/Documentation:Stripe test cards documentationReact Server Components documentationVite documentationProjects:Advent of CSS (adventofcss.com)Advent of JavaScript (adventofjs.com)
In this episode of the Modern Web Podcast, host Danny Thompson interviews Ryan Carniato, creator of SolidJS, about the evolving relationship between client and server technologies in web development. They explore the history of server-side rendering, single-page applications, and how SolidJS bridges these worlds with innovations like single-flight mutations, which cut down on server-client round trips for better performance. Ryan also shares his vision for the future of reactive systems, focusing on async models and proxy-based stores that enable precise state updates with minimal re-renders. Chapters 0:00 – Introduction and Guest Welcome 1:52 – Challenges of Client and Server Models in Modern Web 4:05 – Importance of Page Load Time and SEO 6:00 – Balancing Client-Server Interactions in Frameworks 9:03 – Exploring React Server Components and Astro Islands 12:00 – Single Page Apps and Data Serialization Challenges 16:02 – Understanding the Cost Triangle of Modern Frameworks 20:02 – The Router Approach in Solid and Its Benefits 27:00 – Framework Opinionation and Flexibility in Ecosystems 35:03 – Vendor Lock-in Trends and React's Evolution 43:04 – Single Flight Mutations: Concept and Benefits 46:05 – Current Work: Reactivity and Signals in Solid 52:00 – Exploring Mutable Reactivity and Performance Gains 57:02 – Wrap-Up and Final Thoughts Follow Ryan Carniato on Social Media Twitter: https://x.com/RyanCarniato Dev.to: https://dev.to/ryansolid Github: https://github.com/ryansolid Sponsored by This Dot: thisdot.co
Dive deep into the fascinating world of SQLite and Turso with Gláuber Costa, the founder and CEO of Turso, as he shares insights into the evolution of modern database technologies. Hosted by Danny Thompson and Adam Rakus on the Modern Web Podcast, this episode unpacks SQLite's growing popularity, Turso's innovative managed database services, and how local-first architectures are changing the database landscape. From syncing databases to leveraging SQLite for offline use, discover how these advancements empower developers to build faster, scalable, and cost-effective solutions. Tune in to learn about Turso's unique approach, real-world use cases, and the future of databases in edge computing and mobile applications. Topics Discussed: - SQLite's resurgence and why it's trending in modern architectures - Turso's fork of SQLite and its innovative features - Offline-capable databases and local-first architecture - The impact of no-SQL databases and why SQL is making a comeback - Practical examples and use cases of database syncing and encryption Follow Glauber Costa on Social Media Twitter: https://x.com/glcst Linkedin: / glommer Github: https://github.com/glommer Turso: https://turso.tech/ Sponsored by This Dot: thisdot.co
Discover how Makeswift empowers developers and marketers with seamless Next.js integration in this episode of the Modern Web Podcast. Hosts Rob Ocel, Adam Rackis, and Danny Thompson talk with James Q. Quick, Head of Developer Experience at Makeswift, about building dynamic web experiences using Next.js. Learn how Makeswift combines a powerful visual builder for marketers with developer-friendly customization through Next.js. James shares insights on bridging the gap between no-code and full-code development, enabling teams to create flexible, scalable websites with ease. Chapters 00:00 - Intro & Banter 01:36 - Official Welcome & Guest Introduction 03:28 - Next.js Conf Recap: Major Takeaways 07:26 - Server Components in Next.js: Impact & Challenges 14:17 - Caching & Revalidation in Next.js 18:13 - Next.js Learning Curve & Education 24:06 - Learning the Platform vs. Learning Next.js 27:59 - TanStack Start: The Next Big Framework? 30:03 - What Is Makeswift? 33:50 - Why Choose Next.js for Makeswift? 36:51 - Where to Learn More 37:06 - Outro & Final Thoughts Follow James Q. Quick on Social Media Twitter: https://x.com/jamesqquick Linkedin: https://www.linkedin.com/in/jamesqquick/ Github: https://github.com/jamesqquick Makeswift: https://www.makeswift.com/ Sponsored by This Dot: thisdot.co
Backstage at All Things Open 2024, hosts Rob Ocel and Danny Thompson talk with Max Howell, creator of Homebrew and founder of the Tea Protocol, about making open source sustainable. Max shares his journey from building Homebrew as a passion project to launching Tea Protocol, which uses token-based economics to support maintainers without compromising open source values. They explore challenges like corporate involvement, project monetization, and building resilient open source communities. Chapters 00:00 - Introduction 02:20 - Max's Open Source Journey 09:09 - The Problem with Open Source Sustainability 13:54 - Why Traditional Funding Models Fail 16:08 - Tea Protocol's Economic Model 18:34 - What Happens Without Open Source? 20:59 - Sacrifices Open Source Maintainers Make 23:09 - Capturing Value in Open Source 25:10 - Advice for Aspiring Open Source Developers 27:36 - Where to Learn More Follow Max Howell on Social Media Twitter: https://x.com/mxcl Linkedin: https://www.linkedin.com/in/mxcl/ Check out Tea Protocol: https://tea.xyz/ Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, recorded live at All Things Open in Raleigh, NC, hosts Rob Ocel and Danny Thompson sit down with Dr. Sally Wahba, Principal Software Engineer at Splunk. Dr. Wahba shares her experience tackling on-call burnout, offering insights into reducing fatigue through better observability, automation, and thoughtful team practices. The conversation also touches on mentorship and growth in the tech industry, including practical advice for junior engineers navigating the transition from academics to professional roles and tips for companies to better support new talent. Chapters 00:00:13 - Introduction to Marketing This Dot 00:01:00 - Asking for Help Effectively 00:02:21 - Reducing On-Call Fatigue 00:04:42 - Observability Best Practices 00:07:07 - Balancing Alerts and On-Call Efficiency 00:09:30 - The Role of On-Call in Modern Engineering 00:11:29 - Insights from the Grace Hopper Celebration 00:13:56 - Mentorship and Team Dynamics 00:16:14 - Rapid Changes in Technology and Adaptation 00:18:39 - Automation, Observability, and Debugging Challenges 00:21:04 - Addressing the Talent Gap and Junior Engineer Growth 00:24:00 - Closing Thoughts and Where to Learn More Follow Dr. Sally Wahba on Social Media Twitter: https://x.com/sallyky Linkedin: https://linkedin.com/in/sallywahba/ Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio's Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio's Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What's Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, Rob Ocel and Danny Thompson chat with Lawrence Lockhart, Developer Advocate at Vaadin, about using Java on the front end. Lawrence introduces Vaadin's frameworks, Flow and Hilla, which empower Java developers to build full-stack applications without needing JavaScript. They discuss Vaadin's web components, built-in accessibility, seamless integration with Spring Boot, and how it simplifies complex web applications for enterprise use. Chapters 00:03 - Introduction 01:02 - What is Vaadin and Full-Stack Java 03:12 - Why Use Vaadin? 05:58 - Vaadin's Communication Layer 08:13 - Vaadin vs. Traditional Front-End Frameworks 11:04 - Flexibility and Support for Web Components 15:14 - Micro Front-Ends and Cross-Team Collaboration 17:57 - Accessibility in Vaadin 19:27 - Sponsor Break 20:37 - Vaadin's Backend Integration 22:39 - Power of Web Components in Vaadin 24:07 - Open Source and Community 26:15 - Testing with Vaadin 27:02 - Success Stories with Vaadin 30:09 - Customization and Theming in Vaadin 32:51 - Danny's Perspective on Vaadin 34:02 - Conclusion and Closing Remarks Follow Lawrence Lockhart on Social Media Twitter: https://x.com/LawrenceDCodes Linkedin: https://www.linkedin.com/in/lawrencelockhart/ Github: https://gist.github.com/lawrencedcodes/forked Sponsored by This Dot: thisdot.co
Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters Introduction to the Podcast and Guests 00:01 Meet Ankita Kulkarni, Tech Educator 00:26 Ankita's Transition to Full-Time Education 01:41 Teaching Practical Knowledge in Next.js 03:19 Effective Methods for Teaching Next.js 05:27 Challenges of Being a Full-Time Educator 07:48 Balancing Broad and Specific Examples 09:54 Embracing Mistakes as a Teaching Tool 12:13 Pair Programming and Mentorship 14:00 Discussion on Next.js and Framework Adoption 16:48 Advantages and Challenges of Next.js 18:12 Choosing the Right Framework for Your Needs 20:35 Impact of Next.js in React Documentation 22:26 Learning Paths for New Developers 23:24 The Rise of Full-Stack Web Development 25:09 Benefits of Frameworks Abstracting Complexity 26:27 OpenNext and Deployment Flexibility 28:06 Ankita's Excitement for New Next.js Features 30:35 The Future of Next.js Without Vercel 32:16 Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, host Rob Ocel and co-hosts Adam Rackis, Tracy Lee, and Danny Thompson discuss the importance of unit testing for maintaining code quality and reliability, emphasizing its role in scaling projects and ensuring long-term stability. The conversation also highlights the benefits of TypeScript in improving code safety and developer productivity, sharing experiences on how it catches errors early in the process. They also examine the growing role of AI in automating development tasks, weighing the efficiency gains against the risks of over-reliance on automation while stressing the importance of understanding the underlying processes. Chapters 00:00 - Introduction and Episode Overview 02:59 - The Importance of Unit Testing 10:03 - Best Practices for Implementing Unit Tests 17:15 - TypeScript's Role in Code Safety and Productivity 2:30 - AI in Software Development: Automating Tasks 29:16 - Balancing AI Automation with Developer Expertise 32:07 - Final Thoughts and Closing Remarks Sponsored by This Dot: thisdot.co
In this episode of the Modern Web Podcast, Danny Thompson, Director of Technology at This Dot Labs, sits down with Vincent Mayers, a seasoned tech conference organizer with over 15 years of experience. They discuss the intricacies of running successful conferences, including the challenges of selecting event locations, building community engagement, and creating memorable experiences for attendees. Vincent also shares insights into the evolution of tech conferences, from the importance of shorter talks to the value of the "hallway track" for networking. Tune in for an inside look at how these events shape the tech ecosystem and tips for organizing your own conferences! Chapters 00:00 - Introduction 01:45 - Vincent Mayers' Background 03:50 - Choosing Conference Locations 06:10 - Building Community and Spreading the Word 08:40 - Sponsorship and Funding Challenges 11:00 - Securing Speakers for Tech Conferences 14:20 - Improving the Conference Experience 16:30 - Badge Design and the Attendee Experience 18:50 - Engaging Attendees Beyond Talks 21:00 - The Role of Tech Conferences in the Java Ecosystem 23:12 - Attendees Still Using Older Java Versions 26:00 - Balancing Cutting-Edge Tech with Fundamentals 28:15 - Evolving Attention Spans in Tech Conferences 30:00 - The Importance of the Hallway Track 33:19 - Closing Remarks Follow Vincent Mayers on Social Media Twitter: https://x.com/vincentmayers Linkedin: https://www.linkedin.com/in/vincentmayers/Github: https://github.com/vincentmayers Sponsored by This Dot.
Brett Snyder and Jon Ostrower discuss Q2 2024 data for the domestic airline market. American Airlines faced significant challenges. Southwest, in contrast, actually did alright! This DOT data set also sheds light on the performance of new-ish ultra-low-cost carriers, Avelo and Breeze, which are privately held.We would like to thank our sponsor, Intelsat.Questions, responses or feedback? Visit www.theairshowpodcast.com to get in touch with us.
Machine Learning and AI expert Shivay Lamba, discusses the evolution of machine learning tools, and his work on MLOps and deploying large language models (LLMs). The conversation covers the accessibility of AI, the power of JavaScript in machine learning through tools like TensorFlow.js, and the growing importance of ethical AI practices. Shivay also discusses the transition of web-based AI tools, the importance of transfer learning, and how developers can break into the space of AI and machine learning. Chapters 1. Shivay's Journey into Machine Learning (00:00 - 03:30) 2. The Power of TensorFlow.js and Web AI (03:31 - 07:00) 3. Challenges in Hackathons: Using Pre-trained Models (07:01 - 10:00) 4. Navigating the AI Ecosystem: Python vs. JavaScript (10:01 - 13:30) 5. LLMs and Their Growing Popularity (13:31 - 17:00) 6. The Importance of Core Machine Learning Knowledge (17:01 - 20:00) 7. AI Ethics & Challenges in Scaling Models (20:01 - 23:00) 8. Shivay's Content & Community Involvement (23:01 - 25:00) 9. Conclusion & Final Thoughts (25:01 - End) Follow Shivay on Social Media Twitter: https://x.com/HowDevelop Github: https://github.com/shivaylamba Sponsored by This Dot: thisdot.co
Rob Ocel, Tracy Lee, Adam Rackis, and Danny Thompson sit down with Kyle Tryon, Senior Developer Advocate at Depot, to talk all things Docker, dev containers, and modern build systems. They break down how Docker simplifies development by solving those "it works on my machine" problems, how cloud-based caching speeds up builds, and why tools like Kubernetes are becoming essential for scaling modern apps. Kyle also shares his journey from fixing laptops in retail to becoming a leading voice in the dev space, plus some great insights into how Docker and Depot are changing the game for developers everywhere. Chapters 1: Introductions (00:00 – 02:40) 2: What is Docker and Why It Matters (02:41 – 06:30) 3: Docker Files and Containers 101 (06:31 – 11:00) 4: Challenges of Environment Setup & Dev Containers (11:01 – 15:00) 5: The Power of Layer Caching in Docker (15:01 – 20:30) 6: Introduction to Depot and Cloud-Based Builds (20:31 – 25:00) 7: Optimizing Docker Builds with Depot (25:01 – 30:00) 8: Docker in the Modern Web Stack (30:01 – 35:00) 9: The Future of Cloud Builds and CI/CD Pipelines (35:01 – 40:00) 10: Final Thoughts and Where to Find More (40:01 – End) Follow Kyle Tryon on Social Media Twitter: https://x.com/TechSquidTV Linkedin: https://www.linkedin.com/in/kyle-tryon/ Github: https://github.com/techsquidtv Sponsored by This Dot
In this episode of the Modern Web Podcast, we sit down with Shashi Lo, Senior UX Engineer at Microsoft and the founder of the Gridiron Survivor project. Shashi shares his approach to mentoring junior developers by helping them bridge the gap between boot camp and their first job in tech. We cover the challenges of onboarding, the importance of code reviews, and how companies can better support new talent by investing in mentorship and training. Shashi also talks about his experience with building a community of learners, the process of de-risking junior candidates, and why companies should be more proactive in nurturing the next generation of developers. 00:00 - Meet Shashi Lo 02:25 - The Gridiron Survivor Project 05:02 - The Importance of Code Reviews 07:25 - Teaching the Basics of Project Communication 09:47 - Code Reviews as a Learning Tool 12:06 - Why Shashi Mentors: Giving Back to the Community 14:26 - The Importance of De-Risking Junior Candidates 16:41 - Building in Public: Transparency and Learning 19:00 - Assessing Candidates for the Gridiron Survivor Project 21:25 - The Power of Simple Coding Tests 23:45 - Scaling Up Skills: From Small Tasks to Big Projects 26:07 - Should Companies Be Doing This? 28:25 - Finding Hidden Gems in the Job Market 30:47 - The Challenges of Filtering Candidates 33:02 - Where to Find Shashi Online 34:38 - Closing Remarks Follow Shashi Lo on Social Media Twitter: https://x.com/shashiwhocodes Linkedin: https://www.linkedin.com/in/shashilo/ Github: https://github.com/shashilo Sponsored by This Dot.
Dev Agrawal talks about the newfound interest in building 'local first' applications, which is often seen as an outdated paradigm. With Rob Ocel, he discusses how these apps prioritize user devices as the primary data source, allowing for offline access and user control. The conversation highlights the benefits of local-first architecture in creating personalized experiences and seamless synchronization, and the importance of data ownership and Conflict-free Replicated Data Types (CRDTs) for collaborative environments. They also discuss what meta frameworks are ideal for local-first development, signals, and server components. Sponsored by This Dot. Watch this episode on YouTube. Read more on our blog.
Darcy Clarke shares vlt.sh, a new package manager which he has been building with npm Creator Isaac Schlueter and Node TSC member Ruy Adorno. Along with hosts Tracy Lee, Ben Lesh, and Adam Rackis, he shares insights on emerging developer tools, pair programming, and sustainability in open source. Sponsored by This Dot. Watch this episode on YouTube. Read more on our blog.
In this episode of the Modern Web Podcast, Rob Ocel dives into the intricate world of reliability engineering in software development with Maggie Johnson-Pint, co-founder of Stanza Systems. Uncover the secret behind the stampede effect that can cripple your application during traffic surges and gain insights into the indispensable need for a balanced blend of proactive and reactive strategies to ensure unwavering reliability. Reliability engineering goes beyond mere availability metrics, encompassing user experience, performance, and trustworthiness. While the giants of the industry like Google and Silicon Valley enterprises discuss it at length, the broader developer community often finds these concepts elusive. Stanza deciphers the code to crafting resilient systems that sail through unexpected challenges and observability that unveils the hidden dynamics of your software. Picture a scenario where your system functions flawlessly until it's pushed to its limits. Stanza's solution: wield the power of rate limiting and masterful traffic management. Empower your application to scale seamlessly, even during maintenance or surges in demand. Don't let downtime tarnish your reputation – keep the traffic flowing while maintaining control. But that's not all – we introduce you to Stanza, the game-changing tool designed to bring reliability optimization to your fingertips. Stanza revolutionizes the way web developers navigate the intricate world of performance. Imagine dynamically fine-tuning content delivery based on system load. Drawing inspiration from industry giants like Netflix, this approach enhances perceived reliability while alleviating system stress. Whether you're a part of a small team or a burgeoning enterprise, Stanza's integration fits seamlessly into diverse tech stacks, including serverless environments. It's your all-in-one solution, offering features like request limiting, prioritization, and real-time adjustments. We're here to demystify complex concepts, paving the way for a brighter, more reliable digital landscape. Elevate your application's reliability, user experience, and performance to unparalleled heights. Embrace the synergy of proactive and reactive measures with the roadmap laid out in this interview. Experience the transformation – explore Stanza and unlock a new era of software reliability! This Dot Labs is a development consultancy that is trusted by top industry companies, including Stripe, Xero, Wikimedia, Docusign, and Twilio. This Dot takes a hands-on approach by providing tailored development strategies to help you approach your most pressing challenges with clarity and confidence. Whether it's bridging the gap between business and technology or modernizing legacy systems, you'll find a breadth of experience and knowledge you need. Check out how This Dot Labs can empower your tech journey at thisdot.co. Host Rob Ocel, Software Architect at This Dot Labs Guest Maggie Johnson-Pint, Co-Founder of Stanza Systems
In this episode, Lindsay and Michael talk about Michael's perspective on building communities, and how to stay curious and growing as a developer. They talk about how Michael and Lindsay both started in tech by taking small bits of time to grow and learn, and how that has served them in their tech careers. Michael also talks about his time on React Podcast, and what brought him to hosting the show. They end by discussing curiosity, and how specifically to stay curious in life and in a development career. Guest: Michael Chan (@chantastic) - Software Engineer at Chromatic, Creator of lunch.dev Host: Lindsay Wardell (@lindsaykwardell) - Software Engineer at This Dot, co-host of Views on Vue This episode is sponsored by This Dot Labs.
In this episode, Lindsay talks with Luke Diebold, web developer and creator of QuasarCast.com, about Quasar, the amazingly flexible framework for building applications using Vue. They talk about how Luke got into programming from his interest in music, and how he got started using Quasar for personal and professional projects. They discuss what Quasar is, and discuss where it fits into the web ecosystem. They explore some of the basics of using Quasar, including its CLI and the ability to make web, mobile, and desktop apps. They wrap up the discussion talking about how Quasar is one of the first major frameworks to support Vue 3, and what that looks like from the framework. Guest: Luke Diebold (@LukeDiebold) - Web Developer, creator of QuasarCast.com Host: Lindsay Wardell (@lindsaykwardell) - Software Engineer at This Dot, co-host of Views on Vue This episode is sponsored by This Dot Labs.
In this episode, Lindsay Wardell talks with Richard Feldman about Elm, the delightful functional programming language for creating web applications. They discuss how Richard got into programming and his first experiences with Elm, then dive into some of the key features of Elm such as no runtime exceptions and its helpful compiler. They then discuss where Elm is going, and some of the great community tools that exist in the Elm ecosystem. Guest: Richard Feldman (@rtfeldman) - Head of Technology at NoRedInk and author of Elm In Action Host: Lindsay Wardell (@lindsaykwardell) - Software Engineer at This Dot, co-host of Views on Vue This episode is sponsored by Progress KendoReact & This Dot Labs.
In this episode, Lindsay Wardell talks with Stephanie Eckles about her work with Modern CSS and accessibility. They discuss how Stephanie got into programming, and what drew her to start writing ModernCSS.dev, an excellent resource for learning the latest supported concepts in CSS. They also talk about some of the features in CSS that developers may not be aware of, as well as, some upcoming features that aren't released yet. Stephanie also talks about accessibility, and how CSS can be impacting your site's users' ability to use it. We end talking about Stephanie's upcoming workshop, and how she uses 11ty to build her sites and projects. Host: Lindsay Wardell (@lindsaykwardell) - Software Engineer at This Dot, co-host of Views on Vue Guest: Stephanie Eckles (@5t3ph) - Author of ModernCSS.dev & Egghead Instructor This episode is sponsored by Dexecure & This Dot Labs.
In this episode, Lindsay Wardell and Hunter Miller talk side projects with Shawn Wang. We discuss the projects they do on the side, and what kind of side projects they enjoy working on. Shawn also talks about his book, "The Coding Career Handbook", and how it started as a side project as well. We also talk about the importance of writing your own blog posts, and sharing your experience and learning in public to help both yourself and others, rather than blogging for numbers. We wrap up with a discussion on being a part-time creator, and finding a company that supports their employees and match what you're looking to do. Guests: Shawn Wang (@swyx) - Developer & Author of "The Coding Career Handbook" Hosts: Hunter Miller (@hmillerdev) - Senior Software Engineer, This Dot Lindsay Wardell (@lindsaykwardell) - Software Engineer, This Dot & co-host of Views on Vue This episode is sponsored by the Media Developers community & This Dot Labs.
In this episode, Rob Ocel discusses the recent release of Tailwind's Just-In-Time (JIT) CSS compiler with Hunter Miller and Lindsay Wardell. They discuss the new features the JIT compiler provides, as well as, the performance boost developers can expect on their own projects. They also talk about the benefits of utility CSS compared to other methods, and how Tailwind can be used to build out many types of design systems. They also explore other utility CSS frameworks, including Windi CSS, and discuss the future of utility CSS in the development world. Hosts: Rob Ocel (@robocell) - Architect, This Dot Hunter Miller (@hmillerdev) - Senior Software Engineer, This Dot Lindsay Wardell (@lindsaykwardell) - Software Engineer, This Dot & co-host of Views on Vue Links: https://www.youtube.com/watch?v=3O_3X7InOw8 https://tailwindcss.nuxtjs.org/ https://windicss.org/ This episode is sponsored by the Media Developers community & This Dot Labs.
In today’s episode, Dacey tells the story of studying Public Relations in school and pursuing many different avenues and industries to find a job she loved. She tried many different things from content management, social media, marketing, special education, and Non-Profit work.One day, during a series of dates where she and her boyfriend (now husband) taught one another new things, he tried to teach her HTML and CSS. But the lesson wasn't a success because she didn't think she'd be good at it and zoned him out.But eventually, she decided to build an app with him and they collaboratively built things that they were both interested in. He helped guide her self-learning and exposed her to core concepts and tools such as GitHub and pull requests.When she felt ready, she left her full-time job in March 2019 to search for a job. She gave herself a year to learn the skills and wanted to be ready to apply to jobs by March 2020... which was a pretty rough time in the world to be applying to new roles! But she refused to let the pandemic get her down. Her husband and friend group helped her prep for interviews and built up her algorithm skills. She applied to 207 positions and got rejected 206 times. But she applied for a Sr. Developer role at This Dot and asked them to take a chance on her. And that they did! She came on via a contract, which helped her land her current job at TriggerMesh where she uses Javascript, Vue, and Cypress in her frontend role.Today, her work in special education still impacts her work in tech. She understands the accessibility needs that folks face and that drives her passion day in and day out. You can find her tweeting about how to make applications more accessible for someone with epilepsy or is visually or audibly impaired.Dacey reminds listeners that there is no age limit to learning to code.Early in her career, she felt frustrated with how quickly another new employee was closing tickets and performing on the job. She reached out to her boss and received feedback that has never left her: “To never compare yourself to anyone but yourself.”Resources:FreeCodeCampCodeAcademy FrontEnd mastersTriggerMesh This Dot Women in Tech sessionsFollow Dacey:Twitter: @dacey_nolanDacey's LinkedInHectic - the freelancing app for everyoneVisit: GetHecticApp.com/WeBelongHere to start for free today!We Belong Here Podcast:Follow Lauren on Twitter @LoLoCodingWeBelongPodcast.comSubscribe on AppleSubscribe on SpotifyWe Belong Here Discord CommunityJoin us on Discord Server today! bit.ly/webelongdiscord
In this episode of the Startup Junkies Podcast, Jeff Amerine, Haley Allgood, and Caleb Talley sit down with Tracy Lee to talk about her company This Dot. During the show, the crew talks with Tracy about her beginnings in startups, lessons she has learned on the way, and her plans with This Dot. This is an episode you do not want to miss out on! Connect with Tracy and This Dot: https://www.linkedin.com/in/tracyslee/ https://www.thisdot.co/
TestTalks | Automation Awesomeness | Helping YOU Succeed with Test Automation
Looking for more ways to support diversity in tech? In this episode, Tracy Lee, founder of This Dot, and Moshe Milman, co-founder of Applitools, will discuss This Dot’s new Open Source Apprentice program. Listen in to discover how this initiative invests in open source and enables energetic and passionate junior developers to achieve This Dots’ and Applitools’ vision of supporting tech diversity through open-source programs and beyond.
On today's episode of the freeCodeCamp podcast, Abbey chats with Tracy Lee, a prolific speaker, founder, JavaScript advocate, and open-source enthusiast. Tracy is a Google Developer Expert and the founder of This Dot. She organizes numerous meetups, runs the Modern Web podcast, and is on the RxJS core team. Tracy will share with us how she got into tech, what she's passionate about, and how you can become a badass person in tech, too. Connect with Tracy on Twitter: https://twitter.com/ladyleet Connect with Abbey on Twitter: https://twitter.com/abbeyrenn Find Tracy on the web: https://www.thisdot.co/ Learn to code for free: https://www.freecodecamp.org/
Modern Web Podcast on Testing with host Jay Phelps and guests Kent C Dodds and Gil Tayar. Jay Phelps (@_jayphelps) - Lead Software Architect at This Dot, GDEKent C Dodds (@kentcdodds) - Javascript Engineer at PaypalGil Tayar (@giltayar) - Sr Software Architect at Applitools Topics: - React testing utilities by Kent- How many tests should we have?- Terminology: Unit vs. Integration vs. Acceptance etc- Improving test stability- Snapshot testing- Cypress vs. Selenium- Visual testing- Storybook Sponsored by This Dot Labs Follow us on Twitter! @thisdotmedia + @moderndotweb
Tracy and Ben meet with three Preact Core team members to talk about the preact-cli, upcoming releases, and the general direction of this popular library. Hosts:Tracy Lee (@ladyleet) - This Dot Co-founder, GDE, RxJS Core teamBen Lesh (@benlesh) - Engineer at Google, Co-founder This Dot, RxJS Core team Guests:Jason Miller (@_developit) - Creator of @preactjs. Web DevRel at Google. Zouhir Chahoud (@_zouhir) - Technical Program Manager for Edge at MicrosoftPrateek Bhatnagar (@_prateekbh) - Works on Amp, User Experience Engineer at Google
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Modern Web Podcast on Blockchain with Preethi Kasireddy, Nik Kalyani, Fred Schott, Kyle Simpson and Tracy Lee. Kyle Simpson @getify - Open Web Evangelist, Founder/Owner DevGo, Inc. Preethi Kasireddy @iam_preethi - Blockchain Engineer + Founder & CEO at Schelling Nik Kalyani @techbubble - CTO/Founder of Whenhub + Web/Blockchain Architect Fred Schott @FredKSchott - Frontend Engineer at Ripple, previously Google Polymer Tracy Lee @Ladyleet - CTO of This Dot, Google Developer Expert Topics: - How to get started in blockchain and the main concepts - What use cases are there for blockchain - What tools can you use? - Why are some people skeptical about blockchain? - Cool projects and the future of blockchain technology
Tracy Lee (@Ladyleet, Co-founder of This Dot, GDE, RxJS core team) and Ben Lesh (@benlesh, RxJS core team, Angular core team, Co-founder of This Dot) discuss Async React and the context API with... Michael Jackson (@mjackson, Founder of React Training, creator of unpkg) and Jay Phelps (@_jayphelps, RxJS core team, GDE, Chief Software Architect @ This Dot) To learn more visit thisdot.co Follow us on Twitter @moderndotweb
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Panel: Charles Max Wood Guest: Tracy Lee This week on My Angular Story, Charles speaks with Tracy Lee. Tracy is the co-founder This Dot and her goal with it is to bring the JavaScript community together. She first got into programming when she tried to build websites for people and then was interested in learning JavaScript and really fell in love with the community. She really stayed with Angular because of the community she found there, the size of the community, and the fact that it gave her the ability to have a voice. In particular, We dive pretty deep on: This Dot ContributorDays.com How did you first get into programming? Really loves community Angular community being so welcoming What made you pick the Angular community? Ember originally Loves how big the Angular community is Business background Loves the challenge of trying to create things On the RxJS Core team This Dot Media This Dot Labs Loves to builds brands and consult The importance of mentors Starting an apprentice program She loves being able to help others People underestimate the impact they have on the world AngularAir and JavaScript Air And much, much more! Links: This Dot ContributorDays.com JavaScript Angular Ember RxJS Core Team This Dot Media This Dot Labs AngularAir JavaScriptAir Tracy’s Medium @LadyLeet LadyLeet.com DevChat.tv Youtube This Dot Media Youtube Picks: Charles Ready Player One by Ernest Cline Bad Lip Reading YouTube Tracy Mermaid Tail Makeup Brushes Beauty Fix Box
Tracy Lee: @ladyleet | ladyleet.com Ben Lesh: @benlesh | medium.com/@benlesh Show Notes: 00:50 - What is This Dot? 03:26 - The RxJS 5.5.4 Release and Characterizing RxJS 05:14 - Observable 07:06 - Operators 09:52 - Learning RxJS 11:10 - Making RxJS Functional Programming Friendly 12:52 - Lettable Operators 15:14 - Pipeline Operators 21:33 - The Concept of Mappable 23:58 - Struggles While Learning RxJS 33:09 - Documentation 36:52 - Surprising Uses of Observables 40:27 - Weird Uses of RxJS 45:25 - Announcements: WHATWG to Include Observables and RxJS 6 Resources: this.media RxJS RX Workshop Ben Lesh: Hot vs Cold Observables learnrxjs.io RxMarbles Jewelbots Transcript: CHARLES: Hello everybody and welcome to The Frontside Podcast, Episode 91. My name is Charles Lowell, a developer here at The Frontside and your podcast host-in-training. Joining me today on the podcast is Elrick Ryan. Hello, Elrick. ELRICK: Hey, what's up? CHARLES: Not much. How are you doing? ELRICK: I'm great. Very excited to have these two folks on the podcast today. I feel like I know them… CHARLES: [Laughs] ELRICK: Very well, from Twitter. CHARLES: I feel like I know them well from Twitter, too. ELRICK: [Laughs] CHARLES: But I also feel like this is a fantastic company that is doing a lot of great stuff. ELRICK: Yup. CHARLES: Also not in Twitter. It should be pointed out. We have with us Tracy Lee and Ben Lesh from This Dot company. TRACY: Hey. CHARLES: So first of all, why don't we start, for those who don't know, what exactly is This Dot? What is it that you all do and what are you hoping to accomplish? TRACY: This Dot was created about a year ago. And it was founded by myself and Taras who work on it full-time. And we have amazing people like Ben, who's also one of our co-founders, and really amazing mentors. A lot of our friends, when they refer to what we actually do, they like to call it celebrity consulting. [Laughter] TRACY: Which I think is hilarious. But it's basically core contributors of different frameworks and libraries who work with us and lend their time to mentor and consult with different companies. So, I think the beautiful part about what we're trying to do is bring together the web. And we sort of do that as well not only through consulting and trying to help people succeed, but also through This Dot Media where it's basically a big playground of JavaScripting all the things. Ben and I do Modern Web podcast together. We do RX Workshop which is RxJS training together. And Ben also has a full-time job at Google. CHARLES: What do they got you doing over there at Google? BEN: Well, I work on a project called Alkali which is an internal platform as a service built on top of Angular. That's my day job. CHARLES: So, you've been actually involved in all the major front-end frameworks, right, at some point? BEN: Yeah, yes. I got my start with Angular 1 or AngularJS now, when I was working as a web developer in Pittsburgh, Pennsylvania at a company called Aesynt which was formerly McKesson Automation. And then I was noticed by Netflix who was starting to do some Angular 1 work and they hired me to come help them. And then they decided to do Ember which is fine. And I worked on a large Ember app there. Then I worked on a couple of large React apps at Netflix. And now I'm at Google building Angular apps. CHARLES: Alright. BEN: Which is Angular 5 now, I believe. CHARLES: So, you've come the full circle. BEN: Yeah. Yeah, definitely. CHARLES: [Chuckles] I have to imagine Angular's changed a lot since you were working on it the first time. BEN: Yeah. It was completely rewritten. TRACY: I feel like Angular's the new Ember. CHARLES: Angular is the new Ember? TRACY: [Laughs] BEN: You think? TRACY: Angular is the new Ember and Vue is the new AngularJS, is basically. [Laughs] CHARLES: Okay. [Laughter] CHARLES: What's the new React then? BEN: Preact would be the React. CHARLES: Preact? Okay, or is Glimmer… BEN: [Laughs] I'm just… CHARLES: Is Glimmer the new React? BEN: Oh, sure. [Laughs] CHARLES: It's important to keep these things straight in your head. BEN: Yeah, yeah. CHARLES: Saves on confusion. TRACY: Which came first? [Chuckles] BEN: Too late. I'm already confused. CHARLES: So now, before the show you were saying that you had just, literally just released RxJS, was it 5.5.4? BEN: That's right. That's right. The patch release, yeah. CHARLES: Okay. Am I also correct in understanding that RxJS has kind of come to very front and center position in Angular? Like they've built large portions of framework around it? BEN: Yeah, it's the only dependency for Angular. It is being used in a lot of official space for Angular. For example, Angular Material's Data Table uses observables which are coming from RxJS. They've got reactive forms. The router makes use of Observable. So, the integration started kind of small which HTTPClient being written around Observable. And it's grown from there as people seem to be grabbing on and enjoying more the React programming side of things. So, it's definitely the one framework that's really embraced reactive programming outside of say, Cycle.js or something like that. CHARLES: Mmhmm. So, just to give a general background, how would you characterize RxJS? BEN: It's a library built around Observable. And Observable is a push-based primitive that gives you sets of events, really. CHARLES: Mmhmm. BEN: So, that's like Lodash for events would be a good way to put it. You can take anything that you can get pushed at you, which is pretty much value type you can imagine, and wrap it in an observable and have it pushed out of the observable. And from there, you have a set of things that you can combine. And you can concatenate them, you can filter them, you can transform them, you can combine them with other sets, and so on. So, you've got this ability to query and manipulate in a declarative way, events. CHARLES: Now, Observable is also… So, when Jay was on the podcast we were talking about Redux observable. But there was outside of the context of RxJS, it was just observables were this standalone entity. But I understand that they actually came from the RxJS project. That was the progenitor of observables even though there's talk of maybe making them part of the JavaScript spec. BEN: Yeah, that's right. That's right. So, RxJS as it stands is a reference implementation for what could land in JavaScript or what could even land in the DOM as far as an observable type. Observable itself is very primitive but RxJS has a lot of operators and optimizations and things written around Observable. That's the entire purpose of the library. CHARLES: Mmhmm. So, what kind of value-adds does it provide on top of Observable? If Observable was the primitive, what are the combinators, so to speak? BEN: Oh, right. So, similar to what Lodash would add on top of say, an iterable or arrays, you would have the same sorts of things and more inside of RxJS. So, you've got zip which you would maybe have seen in Lodash or different means of combines. Of course, map and ‘merge map' which is like a flattening sort of operation. You can concatenate them together. But you also have these time-based things. You can do debouncing or throttling of events as they're coming over in observable and you create a new observable of that. So, the value-add is the ability to compose these primitive actions. You can take on an observable and make a new observable. We call it operators. And you can use those operators to build pretty much anything you can imagine as far as an app would go. CHARLES: So, do you find that most of the time all of the operators are contained right there inside RxJS? Or if you're going to be doing reactive programming, one of your tasks is going to be defining your own operators? BEN: No, pretty much everything you'd need will be defined within RxJS. There's 60 operators or so. CHARLES: Whoa, that's a lot. BEN: It's unlikely that someone's going to come up with one. And in fact, I would say the majority of those, probably 75% of those, you can create from the other 25%. So, some of the much more primitive operators could be used… TRACY: Which is sort of what Ben did in this last release, RxJS 5…. I don't know remember when you introduced the lettable operators but you… BEN: Yeah, 5.5. TRACY: Implemented [inaudible] operators. BEN: Yeah, so a good portion of them I started implementing in terms of other operators. CHARLES: Right. So, what was that? I didn't quite catch that, Tracy. You said that, what was the operator that was introduced? TRACY: So, in one of the latest releases of RxJS, one of the more significant releases where pipeable operators were introduced, what Ben did was he went ahead and implemented a lot of operators that were currently in the library in terms of other operators, which was able to give way to reduce the size of the library from, I think it was what, 30KB bundled, gzipped, and minified, to about 30KB, which was about 60 to 70% of the operators. Right, Ben? BEN: Yeah. So, the size reduction was in part that there's a lot of factors that went into the size reduction. It would be kind of hard to pin it down to a specific operator. But I know that some of the operators like the individual operators themselves, by reimplementing reduce which is the same as doing as scan and then take last, implementing it in terms of that is going to reduce the size of it probably 90% of that one particular file. So, there's a variety of things like that that have already started and that we're going to continue to do. We didn't do it with every operator that we could have. Some operators are very, very common and consequently we want them to be as optimized as possible. For example, map. You can implement map in terms of ‘merge map' but it would be very slow to do so. It might be smaller but it would be slower. We don't want that. So, there are certain areas we're always going to try to keep fairly a hot path to optimize them as much as possible. But in other spots like reduce which is less common and isn't usually considered to be a performance bottleneck, we can cut some corners. Or ‘to array' or other things like that. CHARLES: Mmhmm. TRACY: And I think another really interesting thing is a lot of people when learning RxJS, they… it's funny because we just gave an RX Workshop course this past weekend and the people that were there just were like, “Oh, we've heard of RxJS. We think it's a cool new thing. We have no plans to implement it in real life but let's just play around with it and let me learn it.” I think as people are starting to learn RxJS, one of the things that gets them really overwhelmed is this whole idea that they're having to learn a completely new language on top of JavaScript or what operators to use. And one of our friends, Brian Troncone who is on the Learning Team, the RxJS Learning Team, he pulled up the top 15 operators that were most commonly searched on his site. And some of them were ‘switch map', ‘merge map', ‘fork join', merge, et cetera. So, you can sort of tell that even though the library has quite a few… it's funny because Ben, I think the last RX Workshop you were using pairs and you had never used it before. BEN: Yeah. TRACY: So, it's always amusing for me how many people can be on the core team but have never implemented RxJS… CHARLES: [Laughs] TRACY: A certain way. BEN: Right. Right, right, right. CHARLES: You had said one of the recent releases was about making it more friendly for functional programming. Is that a subject that we can explore? Because using observables is already pretty FP-like. BEN: What it was before is we had dot chaining. So, you would do ‘dot map' and then call a method and then you get an observable back. And then you'd say ‘dot merge' and then you'd call a method on that, and so on and so forth. Now what you have is kind of a Ramda JS style pipe function that just takes a comma-separated list of other functions that are going to act upon the observable. So, it reads pretty much the same with a little more ceremony around it I guess. But the upside is that you can develop your operators as just higher-order functions. CHARLES: Right. And you don't have to do any monkey-patching of prototypes. BEN: Exactly, exactly. CHARLES: Because actually, okay, I see. This is actually pretty exciting, I think. Because we actually ran into this problem when we were using Redux Observable where we wanted to use some operators that were used by some library but we had to basically make a pull request upstream, or fork the upstream library to include the operators so that we could use them in our application. It was really weird. BEN: Yeah. CHARLES: The reason was because it was extending the observable prototype. BEN: Yeah. And there's so many… and that's one way to add that, is you extend the observable prototype and then you override lift so you return the same type of observable everywhere. And there are so many things that lettable operators solved for us. For example… CHARLES: So, lettable operators. So, that's the word that Tracy used and you just used it. What are lettable operators? BEN: Well, I've been trying to say pipeable and get that going instead of lettable. But basically there's an operator on RxJS that's been there forever called let. And let is an operator and what you do is you give it a function. And the function gives you the source observable and you're expected to return a new observable. And the idea is that you can then write a function elsewhere that you can then compose in as though it were an operator, anywhere you want, along with your other dot-chained operators. And the realization I had a few months ago was, “Well, why don't we just make all operators like this?” And then we can use functional programming to compose them with like a reduce or whatever. And that's exactly what the lettable operators are. And that's why I started calling them lettable operators. And I kind of regret it now, because so many people are saying it and it confuses new people. Because what in the world does lettable even mean? CHARLES: Right. [Laughs] BEN: So, they are pipeable operators or functional operators. But the point is that you have a higher-order function that returns a function of a specific shape. And that function shape is, it's a function that receives an observable and returns an observable, and that's it. So, basically it's a function that transforms an observable into a new observable. That's all an operator. That's all an operator's ever been. It's just this is in a different flavor. CHARLES: Now, I'm curious. Why does it do an observable into an observable and not a stream item into an observable? Because when you're actually chaining these things together, like with a map or with a ‘flat map' or all these things, you're actually getting an individual item and then returning an observable. Well, I guess in this case of a map you're getting an item and returning an item. But like… BEN: Right, but that's not what the entire operation is. So, you've got an operation you're performing whenever you say, if you're to just even dot-chain it, you'd say ‘observable dot map'. And when you say ‘dot map', it returns a new observable. And then you say ‘dot filter' and it returns another new observable. CHARLES: Oh, gotcha, gotcha, gotcha. Okay, yeah, yeah, yeah. Yeah, yeah. BEN: So, this function just embodies that step. CHARLES: I see, I see. And isn't there some special… I feel like there's some proposal for some special JavaScript syntax to make this type of chaining? BEN: Yeah, yeah, the pipeline operator. CHARLES: Okay. BEN: I don't know. I think that's still at stage one. I don't know that it's got a lot of headway. My sources and friends that are in the TC39 seem to think that it doesn't have a lot of headway. But I really think it's important. Because if you look at… the problem is we're using a language where the most common use case is you have to build it, get the size as small as possible because you need to send it over the wire to the browser. And understandably, browsers don't want to implement every possible method they could on say, Array, right? CHARLES: Mmhmm, right. BEN: There's a proposal in for ‘flat map'. They could add zip to Array. They could add all sorts of interesting things to Array just by itself. And that's why Lodash exists, right? CHARLES: Right. BEN: Is because not everything is on Array. And then so, the onus is then put on the community to come up with these solutions and the community has to build libraries that have these constraints in size. And what stinks about that is then you have say, an older version of Lodash where you'd be like, “Okay, well it has 36 different functions in it and I'm only using 3 of them. And I have to ship them all to the browser.” CHARLES: Mmhmm. BEN: And that's not what you want. So, then we have these other solutions around tree-shaking and this and that. And the real thing is what you want is you want to be able to compose things left to right and you want to be able to have these functions that you can use on a particular type in an ad hoc way. And there's been two proposals to try to address this. One was the ‘function bind' operator, CHARLES: Mmhmm. BEN: Which is colon colon. And what that did is it said, “You can use this function as a method, as though it were a method on an object. And we'll make sure that the ‘this' inside that function comes from the instance that's on the left-hand side of colon colon.” CHARLES: Right. BEN: That had a bunch of other problems. Like there's some real debate I guess on how they would tie that down to a specific type. So, that kind of fell dead in the water even though it had made some traction. And then the pipeline operator is different. And then what it says is, “Okay, whatever is on the…” And what it looks like is a pipe and a greater than right next to each other. And whatever's on the left-hand side of that operand gets passed as the first argument to the function on the right-hand side of that operand. CHARLES: Mmhmm. BEN: And so, what that means is for the pipeable operators, instead of having to use a pipe method on observable, you can just say, “instance of observable, pipeline operator and an operator, and then pipeline operator, and then the Rx operator, and then pipeline operator and the Rx operator, and so on.” And it would just be built-in. And the reason I think that JavaScript really needs it is that means that libraries like Lodash can be written in terms of simple functions and shipped piece-meal to the browser exactly as you need them. And people would just use the pipeline operator to use them, instead of having to wrap something in a big object so you can dot-chain things together or come up with your own functional pipe thing like RxJS had to. CHARLES: Right. Because it seems it happens again and again, right? Lodash, RxJS, jQuery. You just see this pattern of chaining, which is, you know… BEN: Yeah, yeah. People want chaining. People want left to right composition. CHARLES: Mmhmm. BEN: And it's problematic in a world where you want to shake off as much unused garbage as possible. And the only way to get dot chaining is by augmenting a prototype. There's all sorts of weird problems that can come with that. And so, the functional programming approach is one method. But then people look at it and they say, “Ooh, yuck. I've got to wrap things in a function named pipe. Wouldn't it be nicer if there was just some syntax to do this?” And yeah, it would be nicer. But I have less control over that. CHARLES: Right. But the other alternative is to have right to left function composition. BEN: Right, yeah. CHARLES: But there's not any special syntax for that, either. BEN: Not very readable. CHARLES: Yeah. BEN: So, you just wrap everything. And the innermost call is the first one and then you wrap it in another function and you wrap that in another function, and so on. Yeah, that's not [inaudible]. But I will say that the pipe function itself is pretty simple. It's basically a function that takes a rest of arguments that are all functions. CHARLES: Mmhmm. BEN: And so, you have this array of functions and you just reduce over it and call them. Well, you return a function. So, it's a higher function. You return a function that takes an argument then you reduce over the functions that came in as arguments and you call each one of them with whatever result was from the previous. CHARLES: Right. Like Tracy mentioned in the pre-show, I'm an aspiring student of functional programming. So, would this be kind of like a monoid here where you're mashing all these functions together? Is your empty value? I'm just going to throw it out there. I don't know if it's true or not, but that's my conjecture. BEN: Yes. Technically, it's a monoid because it wouldn't work unless it was a monoid. Because monoids, I believe the category theory I think for monoid is that monoids can be concatenated because they definitely have an end. CHARLES: Right. BEN: So, you would not be able to reduce over all those functions and build something with that, like that, unless it was a monoid. So yeah, the fact that there's reduction involved is a cue that it's a monoid. CHARLES: Woohoo! Alright. [Laughter] CHARLES: Have you found yourself wanting to apply some of these more “rigorous” formalisms that you find out there in the development of RxJS or is that just really a secondary concern? BEN: It's a secondary concern. It's not something that I like. It's something I think about from time to time, when really, debating any kind of heavy issue, sometimes it's helpful. But when it comes to teaching anybody anything, honestly the Haskell-isms and category theory names, all they do is just confuse people. And if you tell somebody something is a functor, they're like, “What?” And if you just say it's mappable, they're like, “Oh, okay. I can map that.” CHARLES: [Laughs] Right, right. BEN: And then the purists would be like, “But they're not the same thing.” And I would be like, “But the world doesn't care. I'm sorry.” CHARLES: Yeah, yeah. I'm kind of experiencing this debate myself. I'm not quite sure which side I fall on, because on the one hand it is arbitrary. Functor is a weird name. But I wish the concept of mappable existed. It does, but I feel like it would be handy if people… because there's literally five things that are super handy, right? Like mappable, if we could have a name for monoid. But it's like, really, you just need to think in terms of these five constructs for 99% of the stuff that you do. And so, I always wonder, where does that line lie? And how… mappable, is that really more accessible than functor? Or is that only because I was exposed to the concept of mapping for 10 years before I ever heard the F word. BEN: Yes, and yes. I mean, that's… CHARLES: [Laughs] BEN: Things that are more accessible are usually more accessible because of some pre-given knowledge, right? What works in JavaScript probably isn't going to work in Haskell or Scala or something, right? CHARLES: Mmhmm. BEN: If someone's a Java developer, certain idioms might not make sense to them that come from the JavaScript world. CHARLES: Right. But if I was learning like a student, I would think mappable, I'd be thinking like, I would literally be thinking like Google Maps or something like that. I don't know. BEN: Right, right. I mean, look at C#. C#, a mapping function is always going to be called select, right, because that's C#. That's their idiom for the same thing. CHARLES: Select? BEN: Yeah. CHARLES: Really? BEN: Yeah, select. So, they'll… CHARLES: Which in Ruby is like find. BEN: Yeah. there's select and then, what's the other one, ‘select many' or something like that. [Chuckles] BEN: So, that's C#. CHARLES: Oh, like it's select from SQL. Okay. BEN: Yeah, I think that's kind of where it came from because people had link and then they had link to SQL and then they're like, well I want to do this with regular code, with just using some more… less nuanced expressions. So, I want to be able to do method calls and chain those together. And so, you end up with select functions. And I think that that exists even in Rx.NET, although I haven't used Rx.NET. CHARLES: Hmm, okay. ELRICK: So, I know you do a lot of training with Rx. What are some of the concepts that people struggle with initially? TRACY: I think when we're teaching RX Workshop, a lot of the people sort of… I'll even see senior level people struggle with explaining it, is the difference between observables and observers and then wrapping their head around the idea that, “Hey, observables are just functions in JavaScript.” So, they're always thinking observables are going to do something for you. Actually, it's not just in Angular but also in React, but whenever someone's having issues with their Rx applications, it's usually something that they're like nesting observables or they're not subscribing to something or they've sort of hot-messed themselves into a tangle. And I'm sure you've debugged a bunch of this stuff before. The first thing I always ask people is, “Have you subscribed?” Or maybe they're using an Angular… they're using pipes async but they're also calling ‘dot subscribe' on their observable. BEN: Yeah. So, like in Angular they'll do both. Yeah. There's that. I think that, yeah, that relates to the problem of people not understanding that observables are really just functions. I keep saying that over and over again and people really don't seem to take it to heart for whatever reason. [Chuckles] BEN: But you get an observable and when you're chaining all those operators together, you're making another observable or whatever, observables don't do anything until you subscribe to them. They do nothing. CHARLES: Shouldn't they be called like subscribable? BEN: Yes. [Chuckles] BEN: They probably should. But we do hand them an observer. So, you are observing something. But the point being is that they don't do anything at all until you subscribe to them. And in that regard, they're like functions, where functions don't do anything unless you call them. So, what ends up happening with an observable is you subscribe to it. You give it an observer, three callbacks which are then coerced into an observer. And it takes that observer and it hands it to the body of this observable definition and literally has an observer inside of there. And then you basically execute that function synchronously and do things, whatever those things are, to set up some sort of observation. Maybe you spin up a WebSocket and tie into some events on it and call next on the observer to get values out of your observable. The point being that if you subscribe to an observable twice, it's the same thing as calling a function twice. And for some reason, people have a hard time with that. They think, if I subscribe to the observable twice, I've only called the function once. CHARLES: I experienced this confusion. And I remember the first time that that… like, I was playing with observables and the first time I actually discovered that, that it was actually calling my… now what do you call the function that you pass to the constructor that actually does, that calls next or that gets passed the observer? TRACY: [Inaudible] BEN: I like to call it an initialization function or something. But the official name from the TC39 proposal is subscriber function. CHARLES: Subscriber function. So, like… BEN: Yeah. CHARLES: I definitely remember it was one of those [makes explosion sound] mind-blowing moments when I realized when I call my subscribe method, the entire observable got run from the very beginning. But my intuition was that this is an object. It's got some shared state, like it's this quasar that I'm now observing and I'm seeing the flashes of light coming off of it. But it's still the same object. You think of it as having yeah, not as a function. Okay. No one ever described it to me as just a function. But I think I can see it now. ELRICK: Yeah, me neither. CHARLES: But yeah, you think of it in the same way that most people think of objects, as like, “I have this object. I have a reference to it.” Let observable equal new observable. It's a single thing. It's a single identity. And so, that's the thing that I'm observing. It's not that I'm invoking this observable to observe things. And I think that's, yeah, that's a subtle nuance there. I wish I had taken y'all's course, I guess is what I'm saying. ELRICK: Yeah. BEN: Yeah. Well, I've done a few talks on it. CHARLES: [Laughs] BEN: I always try to tell people, “It's just a function. It's just a function.” I think what happens to a lot of people too is there's the fact that it's an object. But I think what it is, is people's familiarity with promises does this. Because promises are always multicast. They are always “hot”. And the reason for this is because they're eager. So, by the time you have a promise, whatever is producing value to the promise has already started. And that means that they're inherently a multicast. CHARLES: Right. BEN: So, people are used to that behavior of, I can ‘then' off of this promise and it always means one thing. And it's like, yeah, because the one thing has nothing to do with the promise. It wasn't [Chuckles] CHARLES: Right. BEN: This promise is just an interface for you to view something that happened in the past, where an observable is more low-level than that and more simple than that. It just states, “I'm a function that you call. I'm going to be able to do anything a function can do. And by the way, you're giving me an observer and I'm going to do some stuff with that too and notify you via this observer that you handed me.” Because of that you could take an observable and close over something that had already started. Say you had a WebSocket that was already running. You could create a new observable and just like any function, close over that, externally create a WebSocket. And then everyone that subscribes to that observable is tying an observer to that same WebSocket. Then you're multicast. Then you're “hot”. ELRICK: [Inaudible] CHARLES: Right. So, I was going to say that's the distinction that Jay was talking about. He was talking about we're going to just talk about… he said at the very beginning, “We're just going to talk about hot observable.” ELRICK: Yup. CHARLES: But even a hot observable is still theoretically evaluating every single time you subscribe. You're getting a new observable. You're evaluating that observable afresh each time. It just so happens that in the lexical scope of that observable subscriber function, there is this WebSocket? BEN: Yeah. So, it's the same thing. Imagine you wrote a function that when you called it created a new WebSocket and then… say, you wrote a new function that you gave an observer object to, right? An observer object has next, error, and complete. And in that function, when you called it, it created a new WebSocket and then it tied the ‘on message' and ‘on close' and whatever to your observer's next method and your observer's error message and so on. When you call that function, you would expect a new WebSocket to be created every single time. Now, let's just say alternately you create a WebSocket and then you write a new function that that function closes over that WebSocket. So, you reference the WebSocket that you externally created inside of your function. When you call that function, it's not going to create a new WebSocket every time. It's just closing over it, right? So, even though they both are basically doing the same thing, now the latter one of those two things is basically a hot observable and the former is a cold observable. Because one is multicast which is, “I'm sharing this one WebSocket with everybody,” and the other one is unicast which is, “I am going to create a new WebSocket for each person that calls me.” And that's the [inaudible] people have a hard time with. CHARLES: Right. But really, it's just a matter of scope. BEN: Yeah. The thing people have a hard time with, with observables, is not realizing that they're actually just functions. CHARLES: Yeah. I just think that maybe… see, when I hear things like multicast and unicast, that makes me think of shared state, whereas when you say it's just a matter of scope, well then I'm thinking more in terms of it being just a function. It just happens that this WebSocket was already [scoped]. BEN: Well, shared state is a matter of scope, right? CHARLES: Yes, it is. It is. Oh, sorry. Shared state associated with some object identity, right? BEN: Right. CHARLES: But again, again, it's just preconceptions, really. It's just me thinking that I've had to manage lists of listeners and have multicast observers and single-cast observers and having to manage those lists and call notify on all of them. And that's really not what's happening at all. BEN: Yeah. Well, I guess the real point is observables can have shared state or they could not have shared state. I think the most common version and the most composable version of them, they do not have any shared state. It's just one of those things where just like a function can have shared state or it could be pure, right? There's nothing wrong with either one of those two uses of a function. And there's nothing wrong with either one of those two uses of Observable. So, honest to god, that is the biggest stumbling block I think that I see people have. That and if I had to characterize it I would say fear and loathing over the number of operators. People are like… CHARLES: [Chuckles] BEN: And they really think because everyone's used to dealing with these frameworks where there's an idiomatic way to do everything, they think there's going to be an RxJS idiomatic way to do things. And that's just patently false. That's like saying there's an idiomatic way to use functions. There's not. Use it however it works. The end. It's not… CHARLES: Mmhmm, mmhmm. BEN: You don't have to use every operator in a specific way. You can use it however works for you and it's fine. ELRICK: I see that you guys are doing some fantastic work with your documentation. Was that part of RxJS 2.0 docs? TRACY: I was trying to inspire people to take on the docs initiative because I think when I was starting to learn RxJS I would get really frustrated with the docs. BEN: Yeah. TRACY: I think the docs are greatly documented but at the same time if you're not a senior developer who understands Rx already, then it's not really helpful. Because it provides more of a reference point that the guys can go back and look at, or girls. So anyways, after many attempts of trying to get somebody to lead the project I just decided to lead the project myself. [Laughter] TRACY: And try to get… the community is interesting because I think because the docs can be sometimes confusing… Brian Troncone created LearnRxJS.io. There's these other visualization projects like RxMarbles, RxViz, et cetera. And we just needed to stick everybody together. So, it's been a project that I think has been going on for the past two months or so. We have… it's just an Angular app so it's probably one of the most easiest projects to contribute to. I remember the first time I tried to contribute to the Ember docs. It literally took me an hour to sit there with a learning team, Ember Learning Team member and… actually, maybe it was two hours, just to figure out how the heck… like all the things I had to download to get my environment set up so that I could actually even contribute to the darn documentation. But with the Rx, the current RxJS docs right now is just an Angular app. You can pull it down. It's really easy. We even have people who are just working on accessibility, which is super cool, right? So, it's a very friendly place for beginners. BEN: I'm super pleased with all the people that have been working on that. Brian and everybody, especially on the accessibility front. Jen Luker [inaudible] came in and voluntarily… she's like the stopgap for all accessibility to make sure everything is accessible before we release. So, that's pretty exciting. TRACY: Yeah. ELRICK: Mmhmm. TRACY: So funny because when me and Jen started talking, she was talking about something and then I was like, “Oh my god, I'm so excited about the docs.” She's like, “I'm so excited, too! But I don't really know why I'm excited. But you're excited, so I'm excited. Why are you excited?” [Laughter] TRACY: I was like, “I don't know. But I'm excited, too!” [Chuckles] TRACY: And then all of a sudden we have accessibility. [Laughs] ELRICK: Mmhmm. Yeah, I saw some amazing screenshots. Has the new docs, have they been pushed up to the URL yet? TRACY: Nah, they are about to. We were… we want to do one more accessibility run-through before we publish it. And then we're going to document. We want to document the top 15 most viewed operators. But we should probably see that in the next two weeks or so, that the new docs will be… I mean, it'll say “Beta, beta, beta” all over everything. But actually also, some of our friends, [Dmitri] from [Valas] Software, he is working on the translation portion to make it really easy for people to translate the docs. CHARLES: Ah. TRACY: So, a lot of that came from the inspiration from the Vue.js docs. we're taking the versioning examples that Ember has done with their docs as inspiration to make sure that our versioning is really great. So, it's great that we can lend upon all the other amazing ideas in the industry. ELRICK: Oh, yeah. CHARLES: Yeah, it's fantastic. I can't wait to see them. ELRICK: Yeah, me neither. The screenshots look amazing. I was like, “Wow. These are some fabulous documentation that's going to be coming out.” I can't wait. TRACY: Yeah. Thank you. CHARLES: Setting the bar. ELRICK: Really high. [Laughter] CHARLES: Actually, I'm curious. Because observables are so low-level, is there some use of them that… what's the use of them that you found most surprising? Or, “Whoa, this was a crazy hack.” BEN: The weirdest use of observables, there's been quite a few odd ones. One of the ones that I did one time that is maybe in RxJS's wheelhouse, it was just that RxJS already existed. So, I didn't want to pull in another transducer library, was using RxJS as a transducer. Basically… in Netflix we had a situation where we had these huge, huge arrays of very large objects. And if you try to take something like that and then map it and then filter it and then map it and then filter it, we're using Array map and filter, what ends up happening is you create all sorts of intermediary arrays in-memory. And then garbage collection has to come through and clean that up. And that locks your thread. And over time, we were experiencing slowness with this app. And it would just build up until eventually it ground to a halt. And I used RxJS because it was an available tool there to wrap these arrays in an observable and then perform operations on them step-by-step, the same map, filter, and so on. But when you do that, it doesn't create intermediary arrays because it passes each value along step to step instead of producing an entire array and then doing another step and producing an entire array, and so on. So… CHARLES: So, will you just… BEN: It saved garbage collection and it increased the performance of the app. But that's just in an extreme case. I would never do that with just regular arrays. If anything, it was because it was huge, huge arrays of very large objects. CHARLES: So, you would create an observable our of the array and then just feed each element into the observable one at a time? BEN: Well, no. If you say ‘observable from' and you give it an array, that's basically what it does. CHARLES: Okay. BEN: It loops over the array and nexts those values out of the array synchronously. CHARLES: I see, I see. BEN: So, it's like having a for loop and then inside of that for loop saying, “Apply the map. Apply the filter,” whatever, to each value as they're going through. But when you look at it, if you had array map, filter, reduce, it's literally just taking the first step and saying ‘observable from' and wrapping that array and then the rest of it's still the same. CHARLES: Right. Yeah. No, that's really cool. BEN: That was a weirder use of it. I've heard tell of other things where people used observables to do audio synchronization, which is pretty interesting. Because you have to be very precise with audio synchronization. So, hooking into some of the Web Audio APIs and that sort of thing. That's pretty interesting. The WebSocket multiplexing is something I did at Netflix that's a little bit avant-garde for observable use because you essentially have an observable that is your WebSocket. And then you create another observable that closes over that observable and sends messages over the WebSocket for what you're subscribed to and not subscribed to. And it enables you to very easily retry connections and these sorts of things. I did a whole talk on that. That one's pretty weird. CHARLES: Yeah. Man, I [inaudible] to see that. BEN: But in the general use case, you click a button, you make an AJAX request, and then you get that back and maybe you make another AJAX request. Or like drag and drop and these sorts of things where you're coordinating multiple events together, is the general use case. The non-weird use case for RxJS. Tracy does weird stuff with RxJS though. [Laughter] CHARLES: Yeah, what's some weird uses of RxJS? TRACY: I think my favorite thing to do right now is to figure out how many different IoT-related things I can make work with RxJS. So, how many random things can I connect to an application using that? BEN: Tracy's projects are the best. They're so good. [Laughter] TRACY: Well, Ben and I created an application where you can take pictures of things using the Google Image API and it'll spit back a set of puns for you. So, you take a picture of a banana, it'll give you banana puns. Or you can talk to it using the speech recognition API. My latest thing is I really want to figure out how to… I haven't figured out if Bluetooth Low Energy is actually enabled on Google Home Minis. But I want to get my Google Home Mini to say ‘booty'. [Inaudible] [Laughter] CHARLES: RxJS to the rescue. [Laughter] BEN: Oh, there was, you remember Ng-Cruise. We did Ng-Cruise and on there, Alex Castillo brought… TRACY: Oh, that was so cool. BEN: All sorts of interesting… you could read your brain waves. Or there was another one that was, what is it, the Microsoft, that band put around your wrist that would sense what direction your arm was in and whether or not your hand was flexed. And people… TRACY: Yeah, so you could flip through things. BEN: Yeah. And people were using reactive programming with that to do things like grab a ball on the screen. Or you could concentrate on an image and see if it went blurry or not. ELRICK: Well, for like, Minority Report. BEN: Oh, yeah, yeah. Literally, watching a machine read your mind with observables. That was pretty cool. That's got to be the weirdest. TRACY: Yeah, or we had somebody play the piano while they were wearing one of the brainwave… it's called the OpenBCI project is what it is. And what you can do is you can actually get the instructions to 3D print out your own headset and then buy the technology that allows you to read brain waves. And so with that, it's like… I mean, it was really awesome to watch her play the piano and just see how her brain waves were going super crazy. But there's also these really cool… I don't know if you guys have heard of Jewelbots, but they're these programmable friendship bracelets that are just little Arduino devices that light up. I have two of them. I haven't even opened them. CHARLES: [Laughs] TRACY: I've been waiting to play with them with you. I don't know what we're going to do, but I just want to send you lights. Flashing lights. [Laughter] TRACY: Morse code ask you questions about RxJS while you're working. [Laughter] CHARLES: Yeah. Critical bug. Toot-toot-toot-too-too-too-too-toot-toot. [Laughter] CHARLES: RxJS Justice League. TRACY: That would actually be really fun. [Laughter] TRACY: That would be really fun. I actually really want to do that. But… CHARLES: I'm sure the next time we talk, you will have. TRACY: [Laughs] Yes. Yes, yes, yes, I know. I know. we'll do it soon. We just need to find some time while we're not going crazy with conferences and stuff like that. CHARLES: So, before we head out, is there any upcoming events, talks, releases, anything that we ought to be, we or the listeners, ought to be aware of? TRACY: Yeah, so one of the things is that Ben and I this weekend actually just recorded the latest version of RX Workshop. So, if you want to learn all about the latest, latest, newest new, you can go ahead and take that course. We go through a lot of different things like multiplex WebSockets, building an application. Everywhere from the fundamentals to the more real world implementations of RxJS. BEN: Yeah. Even in the fundamentals area, we've had friends of ours that are definitely seasoned Rx veterans come to the workshop. And most of them ask the most questions while talking about the fundamentals. Because I tend to dig into, either deep into the internals or into the why's and how's thing. Why and how things work. Even when it comes to how to subscribe to an observable. Deep detailed information about what happens if you don't provide an error handler and certain cases and how that's going to change in upcoming versions, and why that's changing in upcoming versions, and what the TC39's thoughts are on that, and so on and so forth. So, I try to get into some deeper stuff and we have a lot of fun. And we tend to be a little goofier at the workshops from time to time than we were in this podcast. Tracy and I get silly when we're together. TRACY: It's very true. [Laughter] TRACY: But I think also, soon I think there are people that are going to be championing an Observable proposal on what [inaudible]. So, aside from the TC39 Observable proposal that's currently still at stage one, I don't know Ben if you want to talk a little bit about that. BEN: Oh, yeah. So, I've been involved in conversations with folks from Netflix and Google as well, Chrome team and TC39 members, about getting the WHATWG, the ‘what wig', they're a standards body similar to W3C, to include observables as part of the DOM. The post has not been made yet. But the post is going to be made soon as long as everybody's okay with it. And what it boils down to is the idea of using observables as part of event targets. An event target is the API we're all familiar with for ‘add event listener', ‘remove event listener'. So, pretty much anywhere you'd see those methods, there might also someday be an on method that would return an observable of events. So, it's really, really interesting thing because it would bring at least the primitives of reactive programming to the browser. And at the very least it would provide maybe a nicer API for people to subscribe to events coming from different DOM elements. Because ‘add event listener' and ‘remove event listener' are a little unergonomic at times, right? CHARLES: Yeah. They're the worst. BEN: Yeah. CHARLES: That's a very polite way of putting it. BEN: [Chuckles] So, that's one thing that's coming down the pipe. Other things, RxJS 6 is in the works. We recently tied off 5.5 in a stable branch. And master is now our alpha that we're working on. So, there's going to be a lot of refactoring and changes there, trying to make the library smaller and smaller. And trying to eliminate some of the footprints that maybe people had in previous versions. So, moving things around so people aren't importing stuff that were meant to be implementation details, reducing the size of the library, trying to eliminate some bloat, that sort of thing. I'm pretty excited about that. But that's going to be in alpha ongoing for a while. And then hopefully we'll be able to move into beta mid first quarter next year. And then when that'll be out of beta, who knows? It all depends on how well people like the beta and the alpha, right? CHARLES: Alright. Well, so if folks do want to follow up with y'all either in regards to the course or to upcoming releases or any of the other great stuff that's coming along, how would they get in touch with y'all? TRACY: You can find me on Twitter @ladyleet. But Ben is @BenLesh. RX Workshop is RXWorkshop.com. I think in January we're going to be doing state of JavaScript under This Dot Media again. So, that's where all the core contributors of different frameworks and libraries come together. So, we'll definitely be giving a state of RxJS at that time. And next year also Contributor Days will be happening. So, if you go to ContributorDays.com you can see the previous RxJS Contributor Days and figure out how to get involved. So, we're always open and happy and willing to teach everybody. And again, if you want to get involved it doesn't matter whether you have little experience or lots of experience. We are always willing to show you how you can play. BEN: Yeah. You can always find us on Twitter. And don't forget that if you don't find Tracy or I on Twitter, you can always message Jay Phelps on Twitter. That's important. @_JayPhelps. Really. TRACY: Yeah. [Laughter] BEN: You'll find us. CHARLES: [Chuckles] Look for Jay in the show notes. [Laughter] CHARLES: Alright. Well, thank you so much for all the stuff that y'all do, code and otherwise. And thank you so much Ben, thank you so much Tracy, for coming on the show. BEN: Thank you. CHARLES: Bye Elrick and bye everybody. If you want to reach out to us, you can always get in touch with us at @TheFrontside or send us an email at contact@frontside.io. Alright everybody, we'll see you next week.
Tracy Lee is the laid-back yet assertive Co-Founder at This Dot where she works as a JavaScript Developer with Angular, Ember, React, React Native, RxJS, Vue, and Native Script. She’s got +18,000 followers on Twitter, sold her company Dishcrawl to DinnerLab in 2015, and sits on the boards of nonprofits: SV Creates, Hacker Dojo, and Silicon Valley Young Professionals. She’s a successful entrepreneur having helped build 12 companies in just the last 14 years. Tracy has had the opportunity to give many talks at conferences across the world, including one that took place on a cruise ship that sailed from Miami to the Bahamas. She earned a marketing degree from SJSU, and resides in California.
Tracy Lee, co-founder at This Dot and a Google Developer Expert, describes how she first got into tech after running her own startups for 5+ years. In this interview, she shares advice on learning to code, speaking at events, and much more.
© 2020-2025 Ivy Podcast Discovery LLC
