ConTejas Code

Links

- Sponsors and Partners

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

- THAT Conference: https://www.thatconference.com/

- Stately: https://stately.ai

- Guest Content

- Flightcontrol: https://www.flightcontrol.dev

- Blitz.js: https://blitzjs.com/

- Brandon on X: https://x.com/flybayer

- Book Recommendations and Resources

- Full type-safety for Next.js routes: https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety

- Obviously Awesome: https://www.aprildunford.com/books

- Psych framework: https://andrewchen.com/psychd-funnel-conversion/

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

Summary

Brandon Bayer, the creator of Blitz.js and co-founder of Flightcontrol discusses his journey in open source and the challenges of building full-stack frameworks in the JavaScript ecosystem. He explains the motivation behind creating Flightcontrol, a platform-as-a-service for deploying production applications to your own AWS account.

Brandon also shares insights into the pricing model of Flightcontrol and the trade-offs between using a platform-as-a-service and self-hosting with a VPS. He discusses the technical challenges of migrating from PlanetScale to AWS Aurora and highlights the benefits of using Flightcontrol for long-running function invocations.

Flightcontrol was backed by Y Combinator (YC)—an experience that was instrumental in helping Flightcontrol raise funding and providing valuable mentorship and networking opportunities.

Takeaways

1. Building full-stack frameworks in the JavaScript ecosystem is challenging due to the complexity and fast-changing nature of the ecosystem.

2. Flightcontrol is a platform-as-a-service that allows developers to deploy production applications to their own AWS account, providing reliability, flexibility, and performance.

3. Self-hosting with a VPS offers more control and lower costs, but it requires more management and may not be suitable for large-scale startups.

4. Flightcontrol enables arbitrarily long-running function invocations, making it suitable for tasks like web scraping and data processing.

5. Flightcontrol is focused on removing barriers to adoption and improving their marketing and positioning

6. The Y Combinator experience helped Flightcontrol raise funding and provided valuable mentorship and networking opportunities

Chapters

00:00 Brandon Bayer

03:41 Introduction and Background

17:05 The Pricing Model of Flightcontrol and the Trade-Offs of Platform-as-a-Service vs. Self-Hosting

53:23 Removing Barriers to Adoption

1:00:23 Marketing and Positioning as a Reliable Platform as a Service

1:13:07 Accepting the Truth and Embracing It

1:22:55 The Impact of Y Combinator

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Outreachy: https://outreachy.org

- Recurse Center: https://recurse.com

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

Summary

Anjana discusses her journey into tech, including her background in computational linguistics and her experience in various roles within the tech industry. She highlights the importance of following one's passion and finding meaning in work. The conversation also touches on the need for the tech industry to prioritize human well-being and collaboration over profit and productivity. In this conversation, I and Anjana Vakil discuss the importance of shifting our mindset from a focus on productivity and economic success to one that prioritizes human flourishing and collective well-being. We explore the toxic nature of the competitive scarcity mindset prevalent in the tech industry and advocate for a more collaborative and community-oriented approach. We emphasize the need to recognize the value of every individual and the interconnectedness of all living beings. We also discuss the role of technology in addressing global challenges and the responsibility of tech professionals to use their skills for the betterment of society.

Takeaways

1. Tech careers can be pursued by individuals from diverse backgrounds and with non-linear trajectories.

2. Programs like the Recurse Center and Outreachy provide opportunities for career changers and underrepresented groups to gain experience and contribute to the tech industry.

3. The tech industry should prioritize human well-being and collaboration over profit and productivity.

4. Success should be measured by the impact on individuals, communities, and the environment, rather than financial gain.

5. Tech professionals have the power to shape the direction of the industry and should use their privilege to advocate for positive change.

6. Shifting our mindset from productivity and economic success to human flourishing and collective well-being is crucial.

7. The toxic productivity and competitive scarcity mindset prevalent in the tech industry need to be challenged.

8. Recognizing the value of every individual and the interconnectedness of all living beings is essential.

9. Tech professionals have a responsibility to use their skills and technology for the betterment of society and to address global challenges.

Chapters

00:00 Anjana Vakil

03:39 Anjana's Non-Linear Tech Career

15:21 The Intersection of Tech and Computational Linguistics

27:00 Redefining Success in Tech

32:10 Using Privilege to Advocate for Change

48:55 Shifting Mindsets: From Productivity to Human Flourishing

53:09 Tech's Role in Addressing Global Challenges

55:33 Practical Protocols for Coping with the Current Context

59:23 Community: Central to Software Development

01:05:03 Scarcity Mindset vs. Abundance Mindset

01:17:13 Cooperative Mindset: Surviving Scarcity Together

01:24:34 Tech's Responsibility: Solving the World's Problems Together

01:29:25 Recognizing the Value of Every Individual and the Interconnectedness of All

Hosted on Acast. See acast.com/privacy for more information.

• Codecrafters (sponsor): https://tej.as/codecrafters
• THAT Conference: https://www.thatconference.com/
• Clark on X: https://x.com/theclarksell
• THAT Conference on X: https://x.com/thatconference
• Tejas on X: https://x.com/tejaskumar_

Clark Sell discusses the origins and purpose of THAT Conference, a multi-day conference for software engineers and their families. He emphasizes the importance of human connection and the need for conferences to provide a space for engineers to learn, grow, and connect with others in the industry. Clark also addresses the challenges of balancing technical and soft skills in conference programming and the value of attending conferences for personal and professional development.

This conversation explores the challenges and complexities of organizing a large conference, focusing on the specific example of That Conference. The chapters cover topics such as the difficulties of booking venues and the long-term contracts and financial commitments involved.

1. Finding your why and being clear about your motivations is essential when starting a conference.
2. Conferences should prioritize the human side of tech, offering a balance of technical and soft skills talks to help engineers become better individuals and professionals.
3. Attending conferences can have a significant impact on mental health and well-being, especially for remote workers who may feel isolated in their careers.
4. Companies should recognize the value of conferences and allocate budget for employees to attend, as it contributes to their personal and professional development.
5. Organizing a large conference involves challenges such as booking venues and dealing with long-term contracts and financial commitments.
6. Sponsors play a crucial role in supporting conferences and their involvement can be both sought after and initiated by the organizers.
7. Building a tribe of organizers and engaging with other conference organizers can provide valuable support and insights.

00:00 Clark Sell

06:49 Starting That Conference

15:40 The Purpose of That Conference

28:53 The Importance of Human Connection

33:18 The Value of Attending Conferences

37:21 Agent Conf and the Importance of Tech

39:13 Organic Panel Discussion and Open Spaces

40:04 Exploring New Conference Formats

41:02 The Importance of Open Spaces

41:59 Blowing Up the Conference Format

44:03 The Challenge of Selling White Spaces

45:33 The Role of Hackathons

46:27 Building a Custom Conference Platform

48:07 Motivation Behind Building a Custom Platform

50:07 Using Google Sheets as the Front End

51:52 The Stack and Open Source Nature of the Platform

55:19 Refactoring and Rebuilding the Platform

59:05 The Challenges of Organizing a Conference

01:01:31 Encouraging Speakers to Put Effort into Submissions

01:05:40 The Financial Challenges of Organizing a Conference

01:09:52 Considering Dropping Food from the Conference

01:11:06 Exploring a Kickstarter-like Model for Ticket Sales

01:12:11 Challenges of Booking Venues

01:12:54 Long-Term Contracts and Financial Commitments

01:14:35 The Ugly Side of Contracts

01:17:03 The Entrapment of Venue Commitments

01:18:00 Financial Struggles and Commitments

01:18:56 The Role of Sponsors

01:20:27 Sales and Sponsorship Relationships

01:24:08 Starting a Conference: Find Your Why

01:25:39 Building a Tribe of Organizers

01:26:33 Engaging with Other Organizers

01:28:19 The Importance of Balance and Sustainability

01:32:44 Contributing and Getting Involved with the Conference

Hosted on Acast. See acast.com/privacy for more information.

Links

- Codecrafters (Sponsor): https://codecrafters.io

- Liveblocks: https://liveblocks.io

- Steven on X: https://x.com/stevenfabre

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

Summary

Steven Fabre, the co-founder of Liveblocks, shares his journey from a design-focused background to starting his own company. He discusses the importance of combining design and engineering skills and the challenges of building a collaborative dev tool. Steven also talks about the decision to raise venture capital and the trade-offs between being an indie developer and seeking VC funding. He shares insights on starting a company during the pandemic and dealing with stress and anxiety as a founder. Finally, he touches on the benefits and challenges of remote work.

Liveblocks is a platform that enables developers to add real-time collaboration features to their applications. It offers low-level APIs and pre-built React components for easy integration. The key to effective remote work, according to Liveblocks, is being truly remote-first and having time zone overlap. They also emphasize the importance of being intentional about culture and recognition in a remote team. Liveblocks recently announced a new product called Text Editor, which provides integration to make any text editor collaborative. They are also launching comments and notifications out of beta.

Takeaways

1. Combining design and engineering skills can lead to building polished and visually appealing products.

2. Starting a company around a problem you personally face can provide unique insights and timing advantages.

3. Dealing with stress and anxiety as a founder requires finding a balance, prioritizing sleep, and maintaining a healthy lifestyle.

4. Being truly remote-first and having time zone overlap are key to effective remote work.

5. Being intentional about culture and recognition is important in a remote team.

Chapters

* [00:00:00] Steven Fabre

* [00:03:34] Introduction and Background

* [00:05:55] The Journey from Design to Starting Liveblocks

* [00:10:15] The Role of Design Engineers in Building Polished Products

* [00:17:45] The Trade-Offs of Indie Development vs. Venture Capital

* [00:30:13] Dealing with Stress and Anxiety as a Founder

* [00:33:54] Unlocking the Benefits of Remote Work

* [00:37:36] Creating a Remote-First Culture

* [00:43:34] Introducing Liveblocks: Enabling Real-Time Collaboration

* [00:54:23] Unveiling the Future of Collaboration with Liveblocks

* [01:04:45] Building a Useful and Non-Overwhelming Notification System

* [01:07:55] The Importance of Positioning and Marketing

* [01:12:51] Showing Momentum and Providing Value

* [01:22:52] The Challenges of Being a CEO

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Stately: https://stately.ai

- XState on GitHub: https://github.com/statelyai/xstate

- David on X: https://x.com/davidkpiano

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

Summary

In this conversation, David Khourshid (CEO, Stately.ai) discusses XState, a state management library that uses state machines and the actor model to solve complex state management problems. He explains that state management is not a problem in itself, but it becomes complex when frameworks and libraries expect state updates in different ways.

XState provides a simpler model for managing complex state by using state machines and transitions triggered by events. David also introduces the concept of state charts, which take state machines to the next level by allowing for hierarchy and orthogonality. XState provides tools for visualizing state machines and helps identify modeling issues early in the software development lifecycle.

We continue to discuss the use of agents in observing environments and the potential for building practical applications using state machines. David shares his journey of founding Stately and productizing XState, highlighting the challenges and lessons he has learned as a first-time CEO. They also touch on the importance of making mistakes, transitioning to a paid model, and the future plans for Stately.

Takeaways

- State management becomes complex when frameworks and libraries expect state updates in different ways.

- XState provides a simpler model for managing complex state by using state machines and transitions triggered by events.

- State charts, a more advanced form of state machines, allow for hierarchy and orthogonality.

- State machines are useful in AI programming and can be used to build agents that observe environments and take actions based on goals.

- As a first-time CEO, it is important to make mistakes, learn from them, and be open to continuous learning and improvement.

- Transitioning to a paid model can help focus on users who have real use cases and are willing to pay for advanced features.

Chapters

[00:00:00] David Khourshid

[00:03:17] Introduction and Background

[00:05:28] The Problem of State Management

[00:09:16] XState: A Solution for Complex State Management

[00:13:27] XState and Conflict-Free Replicated Data Types (CRDTs)

[00:15:55] State Machines and State Charts

[00:29:45] Orthogonality and Modeling Complex States

[00:33:11] The Value of State Machines in Software Development

[00:35:32] The Use Cases for State Machines

[00:39:40] Balancing Time Investment and Fast-Paced Development

[00:45:20] The Connection Between State Machines and AI

[00:50:47] The Potential of AI in Stately.ai

[01:01:35] Understanding the Actor Model

[01:09:19] Building a To-Do App with XState

[01:10:17] Introduction to X-State and Actor Interface

[01:11:32] Snapshot and State in X-State

[01:12:54] Agents and Observing Environments

[01:14:16] State Machines in AI Programming

[01:15:17] Building State Machines for Practical Applications

[01:16:52] State Machines and AI Limitations

[01:18:34] Founding Stately and Productizing X-State

[01:21:20] Challenges and Lessons as a First-Time CEO

[01:24:46] Importance of Making Mistakes and Learning

[01:27:03] Transitioning to a Paid Model

[01:30:32] Future Plans for Stately

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Replay Protocol Examples: https://github.com/replayio/Protocol-Examples

- Mark on X: https://x.com/acemarke

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

Summary

Mark Erikson, the maintainer of Redux and developer at Replay.io, discusses the process of modernizing the Firefox DevTools UI (a React app!) and the challenges of code migration. He shares insights on migrating to TypeScript and the value of staying up to date with the latest techniques. Mark also explains how Replay captures and transmits data for debugging purposes. Replay is a tool that captures and replays browser interactions for debugging purposes. It requires a browser because extensions do not have the same privileged access as a browser.

During the recording phase, Replay captures network data. The captured data is stored in a binary archive. When a user opens the debugger, the recording is downloaded and cached in the backend. The debugger includes a video playback feature, which is actually a series of JPEG images rendered on a canvas. The element picker in the debugger is a bespoke canvas that interacts with the paused browser process.

In this conversation, Mark Erikson discusses the capabilities of Replay, a debugging tool for web applications. He explains how Replay allows developers to console log in replays, run code in the browser, and work with source maps and minified code. Mark also discusses the use of Replay in Node.js and the ability to manipulate events in replays. He highlights the backend API of Replay and the potential for future features such as root cause analysis and React time travel.

Takeaways

1. Modernizing legacy codebases requires careful planning and a step-by-step approach.

2. Migrating to TypeScript can improve code maintainability and reduce bugs.

3. Replay.io captures and transmits browser events and interactions for debugging purposes.

4. Extensions do not have the same privileged access as a browser, which is why Replay requires a browser.

5. Replay can be used in Node.js environments, and developers can manipulate events in replays to simulate different outcomes.

6. Future features of Replay include root cause analysis and React time travel, which will further enhance the debugging experience for developers.

Chapters

00:00:00 Mark Erikson

00:02:40 Introduction and Background

00:03:59 Replay.io and Time Travel Debugger

00:08:48 Modernizing the Codebase

00:11:44 The Challenges of Code Migration

00:13:39 Finding Joy in Legacy Code

00:16:11 Migrating to TypeScript

00:19:16 The Process of Modernization

00:30:19 The Pressure and Value of Modernization

00:35:47 The Trade-offs of Using the Latest Techniques

00:37:12 Capturing and Transmitting Data in Replay

00:38:11 Replay: Capturing and Replaying Browser Interactions

00:45:56 Why Replay Requires a Browser

00:46:51 Capturing Network Data and Security Concerns

00:48:54 Recording and Storing the Binary Archive

00:56:21 Downloading and Caching the Recording

00:58:46 Pre-Processing and Caching Basic Data

01:03:30 The Video Playback and Memory Snapshots

01:10:39 Inspecting Elements and the Bespoke Canvas

01:14:26 Building the Replay Debugger

01:16:49 Replay's Capabilities

01:18:12 Console Logging in Replays

01:19:50 Running Code in the Browser

01:20:51 Source Maps and Minified Code

01:22:44 Shipping Source Maps

01:25:41 Replay in Node.js

01:26:12 Using Replay in the Terminal

01:33:50 Manipulating Events in Replay

01:38:02 Replay's Backend API

01:51:33 Future Features: Root Cause Analysis and React Time Travel

01:54:41 Closing Remarks

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Zephyr Cloud: https://zephyr-cloud.io/

- Module Federation: https://www.npmjs.com/package/@module-federation/node

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

Summary

In this conversation, Zack Chapple, CEO of Zephyr Cloud, discusses the concepts of module federation, micro frontends, and the role of Zephyr Cloud in simplifying developer workflows. He explains the evolution of module federation, its relationship with Webpack and RSPack, and the impact of these technologies on build times and developer productivity. The conversation delves into the evolution of micro front-end architecture, starting with the use of iframes and progressing to module federation. It explores the challenges of iframes, the benefits of lazy loading, and the finer control offered by module federation. The discussion also covers the founding of Zephyr Cloud and its innovative approach to deploying micro front-ends to the edge. Zack Chapple discusses the innovative features of Zephyr Cloud, including its seamless integration with module federation, real-time deployment to the edge, and observability capabilities. He also shares insights on the challenges and decision-making process for technical founders and CEOs.

Takeaways

1. Module federation and micro frontends are key concepts in modern web development, allowing for the decomposition and distribution of front-end applications.

2. Zephyr Cloud simplifies the complexity of module federation and micro frontends, providing a platform that accelerates developer workflows and enhances production reliability for micro frontends.

3. Finer control and deployment to the edge with module federation and Zephyr Cloud Zephyr Cloud enables real-time deployment to the edge, making it easy for developers to integrate with module federation and streamline the development process.

4. The platform offers robust observability features, allowing users to monitor and analyze the impact of remotes on performance and user experience.

5. Zack Chapple emphasizes the importance of aligning company values with personal values as a founder, highlighting the need for individualized approaches to leadership and decision-making.

Chapters

00:00 Zack Chapple

03:49 Introduction and Overview of Topics

05:49 The Birth of Zephyr Cloud and its Mission

11:06 Understanding Module Federation and Micro Frontends

30:05 RSPack, ESBuild, and the Future of Module Federation

36:12 Evolution of Micro Front-End Architecture

40:25 Challenges and Benefits of Lazy Loading

56:50 Innovative Edge Deployment with Zephyr Cloud

01:06:05 Revolutionizing Deployment with Zephyr Cloud

01:11:55 Seamless Deployment and Rollbacks

01:31:09 Navigating the CEO Journey

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Understanding RegEx Once and for All Post Series: https://www.codegram.com/blog/understanding-regex-once-and-for-all-part-one

- RegEx 101: https://regex101.com/

- (Golang to .d.ts) go2dts: https://github.com/fabien0102/go2dts

- Svenja on LinkedIn: https://www.linkedin.com/in/svenjaschaefer/

- Svenja on GitHub: https://github.com/slickepinne

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

Summary

In this conversation, Svenja Schäfer, a development team lead at Thoughtbot, discusses her background, experience, and the importance of testing in software development. She shares her journey into tech, the value of testing, and the benefits of test-driven development. Svenja also talks about her work at Thoughtbot, a consulting agency that focuses on Ruby on Rails and JavaScript development. The conversation touches on the challenges of learning new technologies and the fast-paced nature of the industry. The importance of collaboration, taking breaks, and finding a balance between pairing and individual work is also highlighted.

In this part of the conversation, Svenja and I discuss the importance of communication and belonging in remote teams. We also dive into the topic of regular expressions and how they can be used to accelerate robustness in testing. We also do a live coding exercise to demonstrate how regular expressions work. Svenja then shares her experience as a team lead and emphasizes the importance of maintaining a balance between coding and people management. She introduces a three-question communication framework to help manage time and prioritize tasks. The conversation concludes with a discussion on the significance of feedback and the importance of open and honest communication.

Takeaways

- Testing is essential in software development as it provides confidence, reduces errors, and helps developers understand the codebase.

- Test-driven development (TDD) is a valuable approach that involves writing tests before implementing features, leading to more robust and maintainable code.

- Collaboration and pairing can enhance productivity and code quality, but it's important to find a balance and allow for individual work and breaks.

- Taking breaks and allowing time for the brain to reset can lead to fresh ideas and solutions.

- Effective communication and a sense of belonging are crucial in remote teams.

- Regular expressions can be a powerful tool for testing and accelerating robustness in software development.

- Regular expressions can be used for email validation, form input validation, and searching in code editors.

- Understanding the building blocks of regular expressions, such as the caret (^), dot (.), asterisk (*), and word boundaries, is essential for writing effective patterns.

- Tools like regex101.com can be helpful for testing and experimenting with regular expressions. Regular expressions can be a powerful tool for searching and manipulating text.

- It is important to be aware of the potential challenges and gotchas when using regular expressions.

- As a team lead, it is important to maintain a balance between coding and people management.

- Effective communication involves asking the right questions and providing feedback in a constructive manner.

- Prioritizing tasks and managing time can be achieved through frameworks like the three-question communication framework.

Chapters

00:00 Svenja Schäfer

03:39 Introduction and Background

11:59 Challenges and Learning in the Fast-Paced Tech Industry

19:42 Staying Up-to-Date with Evolving Technologies

50:42 Understanding the Building Blocks of Regular Expressions

58:48 Live Coding Exercise: Matching Words with Regular Expressions

Hosted on Acast. See acast.com/privacy for more information.

Links

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

- Codepen: https://codepen.io

- TailwindCSS Play CDN: https://tailwindcss.com/docs/installation/play-cdn

- Chris on X: https://x.com/chriscoyier

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

Summary

In this episode, Chris Coyier (CEO of CodePen) discusses his background and the projects he is involved in, including CSS-Tricks and CodePen. He talks about the workload and challenges of running these projects, particularly the complexities of managing advertising and the business models. Chris also shares insights into the tech stack used at CodePen, including Next.js and GraphQL. He highlights the benefits of GraphQL and the code generation tool, which helps ensure data consistency and type safety. Finally, he discusses the future plans for CodePen, including the adoption of server components. In this part of the conversation, Chris Coyier and Tejas Kumar discuss the Apollo code gen and type checking, the features of CodePen 2.0, the balance between simplicity and complexity, NPM install in CodePen, NPM support in CodePen 2.0, and the differences between ESM and CommonJS. In this conversation, Chris Coyier, the co-founder of CodePen, discusses various topics related to CodePen's architecture, development stack, and future plans. He talks about the use of CommonJS and GraphQL, the transpilation process in CodePen, the serverless architecture and Lambda functions, onboarding and familiarity with CodePen's codebase, staying up-to-date with industry trends, CodePen's design system, using Tailwind CSS in CodePen, the data layer in CodePen, and the potential acquisition of CodePen.

Takeaways

1. Running projects like CodePen/CSS-Tricks involves a significant workload, including managing advertising and the business models.

2. The tech stack at CodePen includes Next.js and GraphQL, which provide powerful tools for building and managing web applications.

3. Code generation with tools like Apollo helps ensure data consistency and type safety in GraphQL queries.

4. Onboarding and becoming familiar with CodePen's codebase is relatively straightforward.

5. Tailwind CSS can be used in CodePen by linking to a CDN-hosted URL.

Chapters

00:00:00 Chris Coyier

00:03:27 Introduction and Background

00:06:49 Running CSS-Tricks and CodePen

00:12:45 Workload and Challenges

00:25:37 Moving to Next.js

00:29:49 Server Components and Future Plans

00:32:27 Code Generation with Apollo

00:34:10 Apollo Code Gen and Type Checking

00:38:45 CodePen 2.0 Features

00:46:43 Simplicity vs Complexity

00:48:08 NPM Install and CodePen

00:54:50 NPM Support in CodePen 2.0

00:59:12 ESM vs CommonJS

01:01:54 Common JS and GraphQL

01:02:31 CodePen's Architecture and Transpilation

01:04:58 Serverless Architecture and Lambda Functions

01:08:14 Onboarding and Familiarity with CodePen's Codebase

01:08:42 Staying Up-to-Date with Industry Trends

01:12:46 CodePen's Design System

01:20:48 Using Tailwind CSS in CodePen

01:25:01 CodePen's Data Layer

01:29:03 AI Features and CodePen 2.0

01:31:26 Potential Acquisition of CodePen

Hosted on Acast. See acast.com/privacy for more information.

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

Hosted on Acast. See acast.com/privacy for more information.