Share
ConTejas Code
Jatin Ramanathan: How Google.com is Rendered with Wiz (Fastest UI Framework)
•
Links
- Codecrafters (sponsor): https://tej.as/codecrafters
- Jatin on X: https://x.com/JatinRamanathan
- Tejas on X: https://x.com/tejaskumar_
Summary
Jatin Ramanathan, a software engineer at Google, discusses the Wiz framework and its use in Google products like search, photos, and payments. Wiz is a resumable web framework that focuses on loading minimal JavaScript and uses the concept of signals for reactive programming. Signals are reactive properties that reflect the state of an observable or reactive property at any given time.
The Wiz framework also incorporates JS Action, a library that listens to events and delivers them to event handlers only when necessary, reducing the amount of JavaScript that needs to be loaded. The conversation also touches on the merger of Wiz and Angular and the potential for unified APIs in the future. The conversation explores the concept of responsible JavaScript and web performance.
We dive into the use of signals and JS action in Wiz and Angular, and how they enable declarative behavior and interactivity on the client side. The discussion also touches on the challenges of using TSX in Angular and the potential for future improvements. The importance of measuring performance and understanding the user experience on different devices is emphasized, along with the use of feature flags and instrumentation to optimize the user funnel.
Takeaways
1. Wiz is a resumable web framework used in Google products like search, photos, and payments.
2. The framework focuses on loading minimal JavaScript and uses signals for reactive programming.
3. JSAction is a library that listens to events and delivers them to event handlers only when necessary, reducing the amount of JavaScript that needs to be loaded.
4. Wiz and Angular are merging to exchange ideas and potentially unify APIs in the future.
5. Signals and JSAction in Wiz and Angular enable declarative behavior and interactivity on the client side.
Chapters
00:00 Jatin Ramanathan
03:05 Welcome Jatin
06:15 Overview of Wiz and its Use in Google Products
13:00 Resumability and the Concept of Signals
36:03 Merger of Wiz and Angular: Unifying APIs
48:08 Signals and Interactivity
50:26 Declarative Behavior with Signals and JS Action
52:10 Performance of HTML and htmx
59:10 Responsible JavaScript as a Diet
01:09:26 Open Sourcing Wiz through Angular
01:13:34 Challenges of TSX in Angular
01:16:40 Declarative Behavior Composition in TSX
01:22:15 Contributing to Wiz through Angular
01:25:11 Checklist for Responsible JavaScript and Web Performance
More episodes
View all episodes
Eddy Vinck: How to Solve Your Own Problems with AI
01:27:13|Links- Codecrafters (partner): https://tej.as/codecrafters- Blog Recorder: https://blogrecorder.com/- Eddy on X: https://x.com/eddyvinckk- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, we discuss Blog Recorder which allows users to create blog posts by speaking their thoughts. Eddy explains the technology behind the product, including the speech-to-text pipeline and the AI components involved. He shares insights into his journey as a software engineer, the balance between AI and UI development, and the importance of building a future-proof product. Chapters00:00:00 Eddy Vinck00:03:08 Introduction to Blog Recorder00:06:11 Understanding the Technology Behind Blog Recorder00:09:12 The Speech-to-Text Pipeline Explained00:12:05 Eddy's Journey as a Software Engineer00:15:07 Balancing AI and UI Development00:18:07 Building a Future-Proof Product00:20:54 Choosing the Right Hosting Solutions00:24:15 Lessons Learned from Building Blog Recorder00:31:02 Kubernetes and Cloud Infrastructure Insights00:40:32 Navigating Product Development and MVPs00:52:09 The Importance of Early Feedback in Product Launches01:00:21 Timing and Market Readiness01:01:37 Innovations in Blog Recording01:03:29 AI and Long-Form Content Creation01:10:35 Current State of Blog Recorder01:18:53 Future Aspirations and Marketing Strategies
Dan Bochman: How to Create AI Image Generation Models
01:49:58|Links- Codecrafters (sponsor): https://tej.as/codecrafters- FASHN AI: https://fashn.ai- Dan on X: https://x.com/danbochman- Aya on X: https://x.com/ayaboch- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, we dive deep into the intricacies of AI, focusing on concepts like latent space, diffusion, and the evolution of image generation techniques. We explore how latent space serves as a condensed representation of features, the challenges faced by GANs, and how diffusion models have emerged as a more effective method for generating images from noise. The discussion also touches on the importance of quantization in AI models and the iterative approaches used in image generation. Chapters00:00 Dan Bochman02:25 Introduction to AI and Latent Space07:24 Understanding Latent Space and Its Importance12:29 The Concept of Diffusion in AI17:21 From Noise to Image Generation22:32 Challenges with GANs and the Emergence of Diffusion27:28 The Role of Quantization in AI Models32:26 Iterative Approaches in Image Generation35:51 The Noise of Life and Image Clarity37:09 Exploring Diffusion Models in Creative Generation39:00 Understanding Latent Space and Its Importance40:27 Diving Deeper into Loss Functions and Image Quality43:32 Signal to Noise Ratio in Image Generation45:54 The Transition to Latent Space for Better Learning48:44 The Power of Variational Autoencoders53:01 Navigating the Uncanny Valley in AI Generated Images57:43 Guidance in Image Generation and Fashion Applications01:10:24 Understanding Architecture in AI Models01:14:40 Training Diffusion Models: Getting Hands-On01:21:18 Fine-Tuning Techniques and Challenges01:26:53 The Accessibility of AI Model Development01:34:10 Navigating Funding and Research in AI01:46:45 Lessons Learned: The Builder's Journey
Marisa Morby: How to Design Products with Nature in Mind
01:40:09|Links- Codecrafters: https://tej.as/codecrafters- Marisa on Bluesky: https://bsky.app/profile/marisamorby.com- Tejas on X: https://x.com/tejaskumar_- Tejas on Bluesky: https://bsky.app/profile/tej.asSummaryIn this conversation, we explore the profound relationship between design and nature: how nature serves as the ultimate inspiration for design, emphasizing that design is fundamentally about functionality. Marisa shares insights on how natural systems can inform technology and urban planning, and we digve into the concept of user interfaces in nature. The discussion also touches on the distinction between design and artistic expression, advocating for a deeper understanding of both in the context of modern technology and architecture.Chapters00:00 Introduction03:13 Understanding Design Through Nature13:20 The Connection Between Nature and Technology23:06 User Interfaces Inspired by Nature33:13 Design vs. Artistic Expression35:23 The Intersection of Design and Business38:31 Artistic Expression in Business41:50 Empathy and Connection in Branding45:18 The Importance of Presentation in Job Applications52:39 Understanding Gestalt Principles in Design01:01:38 Progressive Disclosure: A Key to User Experience01:04:18 Defining Problems and Understanding Users01:08:25 Exploring Biophilic Design in Engineering01:08:45 Exploring Biophilic Design01:15:09 Integrating Nature into Software Design01:21:05 Understanding the Law of Proximity in UI Design01:23:57 Making the Business Case for Design Principles01:31:44 Human-Centered Design and Urban Sustainability
Corbin Crutchley: How UI frameworks work in detail, thriving with mental health
01:34:26|Links- Codecrafters (partner): https://tej.as/Codecrafters- Playful Programming: https://playfulprogramming.com/- The Framework Field Guide: https://playfulprogramming.com/collections/framework-field-guide- Tejas' Story: https://www.youtube.com/watch?v=zOKCrgQOiME- Corbin on X: https://x.com/crutchcorn- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, we explore the world of frontend frameworks, discussing the importance of reactivity, the evolution of frameworks like React, Angular, and Vue, and the nuances of choosing the right framework based on developer experience and team dynamics. Together, we explore the role of state management libraries, the challenges of framework migration, and the significance of maintaining a clean separation of concerns in application architecture. The discussion emphasizes the subjective nature of framework selection and the importance of incremental migration strategies to ensure smooth transitions between technologies.Chapters00:00 Introduction03:41 Introduction to Frontend Frameworks06:37 The Evolution of Reactivity in Frameworks09:37 Choosing the Right Framework12:45 Understanding Framework Differences15:41 Guiding New Developers in Framework Selection18:33 The Role of State Management Libraries21:47 Best Practices for Framework Migration32:35 Understanding Web Components and Reactivity36:28 Performance Metrics in Frameworks39:41 The Journey of Self-Publishing49:04 Motivation Behind Sharing Knowledge53:26 The Human Connection in Open Source01:04:11 Journey into Tech: A Personal Story01:08:07 The Birth of Open Source Projects01:10:38 From Design to Development: A Career Shift01:12:48 Building Playful Programming: Future Aspirations01:16:12 Learning from Failure: The OceanBit Experience01:20:31 Philosophy in Software Development01:32:31 Advice for Aspiring Developers
Taylor Desseyn: How to Build a Genuine, High-Quality Network
01:27:46|Links- Codecrafters: https://tej.as/codecrafters- Taylor on X: https://x.com/tdesseyn- Torc: https://torc.dev/- Tejas on X: https://x.com/tejaskumar_SummaryTaylor Desseyn and I explore the often contentious relationship between recruiters and engineers, discussing the cultural nuances that affect communication and understanding. Taylor shares insights on what differentiates good recruiters from bad ones, emphasizing the importance of building genuine relationships and understanding the technical landscape. Together, we dive into the evolution of Taylor's career from a competitive recruiter to a community-focused leader at Torc, a new talent marketplace. The discussion highlights the significance of intentions in recruitment and the need for adaptability in a changing job market. Chapters00:00 Intro03:55 The Enmity Between Recruiters and Engineers06:52 Understanding the Culture of Engineering09:52 What Makes a Good Recruiter?13:01 Building Relationships Over Numbers15:54 The Importance of Intentions in Recruitment18:58 The Journey from Recruiter to Leader22:01 Adapting to Market Changes25:00 Introducing Torque: A New Talent Marketplace31:02 Building Community in Job Search32:00 The Role of Torque.dev in Job Matching33:30 Global Reach and Community Building33:55 Business Model of Torque.dev35:19 The Importance of Content Creation37:26 The Value of Personal Branding39:27 The Impact of Individual Brands on Companies41:17 Navigating Company Dynamics42:57 The Shift in Marketing Strategies44:56 The Balance of Self-Promotion and Company Representation47:36 The Importance of Authenticity in Marketing49:34 Finding the Balance in Promotion52:02 Humanizing Company Messaging55:53 Job Search Strategies for Engineers57:41 The Importance of Direct Communication in Job Applications01:01:10 Building a Valuable Network Through Giving Back01:05:41 The Role of Authenticity in Career Growth01:14:52 Balancing Family Life and Career01:23:46 The Future of Tech Recruitment and Community Building
Chris Ferdinandi: How to Thrive as a Developer with ADHD
01:40:03|Links- Codecrafters: https://tej.as/Codecrafters- Go Make Things: https://gomakethings.com/- ADHD ftw!: https://adhdftw.com/- Chris on Bluesky: https://bsky.app/profile/cferdinandi.bsky.social- Tejas on X: https://x.com/tejaskumar_SummaryChris Ferdinandi, a web developer with ADHD, discusses how ADHD affects software engineering workflows. He explains that ADHD is not a deficit of attention but rather a difficulty in regulating attention. ADHD can manifest as scattered and distracted behavior or intense hyperfocus on one task. In a software engineering context, open office environments and frequent meetings can be challenging for individuals with ADHD. Remote work can also present challenges, as the lack of boundaries between work and home can lead to excessive work hours. However, the nature of coding, with its challenging problems and immediate feedback, can be highly rewarding for individuals with ADHD. Remote work and hyperfocus can be both beneficial and challenging for people with ADHD.Chapters00:00 Chris Ferdinandi03:44 Introduction and Background13:43 Understanding ADHD28:18 ADHD's Impact on Software Engineering Workflow31:07 Challenges of In-Person Work Environments34:31 The Impact of Remote Work39:38 Navigating Swingy Performance and Distractions in a Remote Work Environment54:09 Finding Work Environments and Tasks that Align with ADHD Strengths1:04:43 The Challenges and Benefits of Working from Home with ADHD1:08:56 Establishing a Routine and Hyper-Focus1:22:41 Tools for Organization and Productivity1:28:56 Listening to Your Brain's Priorities1:32:49 Understanding ADHD and Dopamine Levels1:38:18 Exploring Cold Water Exposure and Dopamine
Donny Wals: How to Build Effective iOS Applications from a Web Perspective
01:35:40|Links- Codecrafters: https://tej.as/codecrafters- Donny on X: https://x.com/DonnyWals- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, we explore the transition from web development to iOS development, discussing the differences in tooling, options, and development experiences. The discussion also covers the nuances of SwiftUI, the challenges of using Xcode, and the mindset differences between iOS and web developers. Chapters00:00:00 Donny Wals00:02:56 From Web Development to iOS: A Journey00:07:00 The Current State of iOS Development00:13:25 Comparing iOS and Web Development00:20:16 Navigating the Full Stack: Insights and Superpowers00:29:02 SwiftUI vs. Modern UI Libraries00:37:05 Building iOS Apps: The Development Experience00:39:10 Understanding Layout in SwiftUI00:47:15 SwiftUI Previews and Development Workflow00:56:12 Exploring AR and VR in Swift Development01:03:58 Current Trends in the Job Market01:06:35 Crossing the Pond: Common Mistakes in Transitioning to iOS01:08:20 Learning Curve: Adapting to Swift and Auto Layout01:11:26 State Management: Common Pitfalls in SwiftUI01:13:59 Context and Prop Drilling: Navigating State in SwiftUI01:18:13 Debugging and Performance Monitoring in Swift01:22:50 The Hacker Mindset: Exploring Security and NFC Technology01:26:56 Innovative Payment Solutions: The Future of NFC Transactions01:29:09 Rapid Fire: Quick Insights on iOS Development01:33:39 The Future of Web and Native Integration
Richard Rodger: How to Build and Scale World-Class Consultancies (and DevRel)
01:39:48|Links- Codecrafters: https://tej.as/codecrafters- Voxgig: https://voxgig.com- Richard on X: https://x.com/rjrodger- Richard on LinkedIn: https://www.linkedin.com/in/richardrodger/- Tejas on X: https://x.com/tejaskumar_SummaryRichard Rodger, founder of Nearform and VoxGig, shares his journey from studying mathematics and philosophy to becoming a technical founder. He discusses the importance of community and marketing in building a successful business. He also explores the challenges of scaling a company and the value of hiring people from failed startups. Together, we explore the role of DevRel in managing the developer experience from beginning to end and highlights the value of high-quality content in developer relations. Timestamps00:00:00 Richard Rodger00:03:54 Introduction and Background00:18:00 Building a Business: The Power of Community and Marketing00:21:03 Hiring from Failed Startups: The Value of Experience00:27:44 Scaling Challenges: Balancing Process and Agility00:32:56 Transitioning from Consultancy to SaaS: A Shift in Focus00:34:32 From Developer Relations to Starting Voxgig00:40:17 Navigating the Challenges of COVID-1900:47:08 The Role of Developer Relations in the API Economy00:53:11 The Shift Towards Specialized Developer Marketing00:59:43 Building Trust and Long-Term Relationships in Consultancies01:06:37 Podcasts: A Sustainable Approach to Building Relationships01:07:10 Long-Term High Trust Relationships in Business01:13:33 Challenges Faced by Consultancy Companies01:16:47 Delivering Content and Documentation01:35:06 The Value of Joining a Group of Startup Founders
Ivan Burazin, co-founder Daytona: How to Accelerate Developer Onboarding by 56%
01:42:06|Links- Codecrafters (Partner): https://tej.as/codecrafters- Daytona: https://daytona.io- Ivan on X: https://x.com/ivanburazin- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, Ivan Burazin discusses the journey of building Daytona, a cloud-based development environment, and the challenges faced along the way. We explore the origins of Daytona, its technical infrastructure, the value it provides to developers and enterprises, and the decision-making process behind building the product instead of selling it. The discussion also touches on the importance of security, the open-source community, and the quest for product-market fit in the tech industry. Chapters00:00:00 Ivan Burazin00:05:45 Introduction to Daytona and Shift Conference00:08:06 The Origins of Daytona: A Developer's Journey00:14:46 Understanding Daytona's Technical Framework00:23:06 The Value Proposition of Daytona00:27:53 The Developer Experience: Seamless Integration00:33:19 Open Source vs. Enterprise: The Daytona Model00:37:59 Security Features and Enterprise Needs00:43:56 Finding Product-Market Fit and Ideal Customer Profile00:51:25 The Decision to Build vs. Sell: A Personal Reflection00:56:22 Navigating Risks and Building Confidence01:02:14 The Loneliness of the Founder Journey01:05:48 Open Source Strategy and Community Building01:14:14 AI's Role in Development and Learning01:26:02 Living Standards for Founders: Lessons Learned