Share

cover art for Dan Shappir: How to Maximize Web Performance

ConTejas Code

Dan Shappir: How to Maximize Web Performance

Links


- Codecrafters (sponsor): https://tej.as/codecrafters

- Improving Wix Performance: https://www.smashingmagazine.com/2021/11/improving-performance-wix-websites-case-study/

- Dan on X: https://x.com/danshappir

- Tejas on X: https://x.com/tejaskumar_


Summary


In this episode, Dan Shappir discusses his journey in web performance, starting from gaming networks before the web. He explains the web vs. internet distinction, offline-first web apps, and remote access solutions. Dan's role at Next Insurance as a performance tech lead is highlighted. The talk covers improving browser performance, server-side rendering at Wix, modern CSS, CDNs, backend issues, and encapsulation impacts. Dan and Tejas discuss the BF cache's workings, browser compatibility, and telemetry impacts. Tips for staying updated in tech are shared, emphasizing passion and teaching. The episode concludes with support for Gaza and the Speculation Rules API.


Takeaways


1. Avoid overloading the browser with excessive JavaScript, CSS, and HTML.

2. Keep things small and lean to improve performance.

3. Implement server-side rendering, use modern CSS, and leverage caching with CDNs to enhance performance.

4. To stay relevant in the tech industry, follow your passion, accept that you can't know everything, and focus on understanding core concepts rather than chasing every new technology.

5. The BF cache (back-forward cache) allows browsers to store a memory snapshot of a web page when the user navigates away, enabling instant retrieval when the user returns.


Chapters


00:00 Introduction and Honoring the Situation

01:17 Dan's Background and Early Career

07:46 Dan's Journey into Web Performance

15:09 Offline-First Web Application

25:34 Joining Wix and Improving Performance

34:09 Transition to Next Insurance

45:46 The Beauty of Constraints

59:13 Using CSS for Layout

01:04:12 Backend Performance Issues

01:20:30 BF Cache

01:25:32 Performance Strategies

01:31:25 Advice for Staying Relevant in Tech

01:42:42 Speculation Rules API

01:43:14 Resource Hints: Prefetch and Preload

01:48:12 Script Tags and JSON Representation

01:51:39 Closing Remarks and Homework


More episodes

View all episodes

  • Jack Herrington: Model Context Protocol (MCP), Growing a YouTube Audience, Getting into Open Source

    01:39:19|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- Jack on YouTube: https://www.youtube.com/@jherr- Jack on X: https://x.com/jherr- Jack on Bluesky: https://bsky.app/profile/jherr.dev- Tejas on X: https://x.com/tejaskumar_- create-tsrouter-app: https://github.com/TanStack/create-tsrouter-appSummaryIn this discussion, Jack Harrington and I explore the transition from being a content creator to an open source contributor, discussing the challenges and rewards of both paths. Jack shares his journey from being a principal engineer to a YouTuber, and now to a key player in the open source community with TanStack. We explore the intricacies of YouTube's algorithm, the importance of marketing oneself, and the unique features of Tanstack that allow for a progressive development experience. We also touch on the future of Tanstack, its cross-platform capabilities, and the potential integration with React Native. We also discuss AI! Specifically, we discuss the Model Context Protocol (MCP) and how it provides tools and resources to AI, enabling seamless integration with applications. We explore the potential of local development with MCP, emphasizing its advantages over traditional cloud-based solutions. Chapters00:00 Jack Herrington06:11 Transitioning from Influencer to Open Source Contributor09:10 The YouTube Journey: Challenges and Growth12:13 Navigating the YouTube Algorithm and Marketing Yourself15:09 The Shift to Open Source and Community Engagement18:18 Creating Tanstack: A New Era in Development20:55 The Unique Features of Tanstack and Its Ecosystem24:09 Progressive Disclosure in Frameworks26:54 Cross-Platform Capabilities of Tanstack30:16 The Future of Tanstack and React Native Integration40:05 Navigating the Tanstack Ecosystem42:21 Understanding Model Context Protocol (MCP)54:04 Integrating MCP with AI Applications01:05:09 The Future of Local Development with MCP01:11:03 Creating a Winamp Clone with AI01:17:07 The Future of Front-End Development and AI01:24:49 Connecting Dots: The Power of MCP and AI Tools01:33:27 The Entrepreneurial Spirit: Beyond Money01:39:27 Closing Thoughts and Future Collaborations
  • Chinar Movsisyan: How to Deliver End-to-End AI Solutions

    01:30:16|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- Feedback Intelligence: https://www.feedbackintelligence.ai/- Chinar on X: https://x.com/movsisyanchinarSummaryIn this podcast episode, we talk to Chinar Movsisyan, the CEO and founder of Feedback Intelligence. They discuss Chinar's extensive background in AI, including her experience in machine learning and computer vision. We discuss the challenges faced in bridging the gap between technical and non-technical stakeholders, the practical applications of feedback intelligence in enhancing user experience, and the importance of identifying failure modes. The discussion also covers the role of LLMs in the architecture of Feedback Intelligence, the company's current stage, and how it aims to make feedback actionable for businesses. Chapters00:00 Chinar Movsisyan02:08 Introduction to Feedback Intelligence03:23 Chinar Movsisyan's Background and Expertise06:33 Understanding AI Engineer vs. GenAI Engineer09:08 The Lifecycle of Building an AI Application13:27 Data Collection and Cleaning Challenges16:20 Training the AI Model: Process and Techniques24:48 Deploying and Monitoring AI Models in Production27:55 The Birth of Feedback Intelligence31:58 Understanding Feedback Intelligence33:26 Practical Applications of Feedback Intelligence42:13 Identifying Failure Modes45:58 The Role of LLMs in Feedback Intelligence51:25 Company Stage and Future Directions57:24 Making Feedback Actionable01:01:30 Streamlining Processes with Automation01:03:18 The Journey of a First-Time Founder01:05:48 Wearing Many Hats: The Founder Experience01:08:22 Prioritizing Features in Early Startups01:13:09 Learning from Customer Interactions01:16:38 The Importance of Problem-Solving01:21:51 Handling Rejection and Staying Motivated01:27:43 Marketing Challenges for Founders01:29:23 Future Plans and Scaling Strategies
  • Daniel Lockyer: How to deploy and scale anything

    01:40:41|
    Links- Codecrafters (partner): https://tej.as/codecrafters- Ghost: https://ghost.org/- Daniel on X: https://x.com/daniellockyer- Tejas on X: https://x.com/tejaskumar_SummaryIn this conversation, Daniel Lockyer (Ghost) and I explore the intricacies of DevOps, server management, and the balance between simplicity and complexity in software engineering. We discuss the ideal server setup for static sites, scaling considerations, the use of PHP and NGINX, and the challenges of manual server management. The conversation also touches on the debate around Kubernetes, cognitive load in software engineering, and the importance of monitoring and alerting. Ultimately, we emphasize the accessibility of server management and the common fears that prevent individuals from taking the plunge into this domain. Chapters00:00 Daniel Lockyer03:41 Introduction to DevOps and Server Management09:36 Simplicity in Server Setup15:38 The Kubernetes Debate21:37 Challenges of Manual Server Management27:33 Productizing Server Management33:29 The Fear of Failure in Server Management39:21 Navigating Server Management Challenges46:42 The Cost of Custom Solutions vs. Managed Services55:39 Building a Custom Platform as a Service01:03:31 AI Integration in DevOps Practices01:08:50 Cost-Effective Solutions in Kubernetes01:15:18 The Importance of Passion in Programming01:21:41 The Impact of Programming on Life Choices01:33:01 Simplicity as the Key to Problem Solving
  • 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