ConTejas Code

Chris Coyier, CEO CodePen: How We're Building CodePen 2.0, CSS-Tricks


Listen Later

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.

...more
View all episodesView all episodes
Download on the App Store

ConTejas CodeBy Tejas Kumar

  • 5
  • 5
  • 5
  • 5
  • 5

5

9 ratings


More shows like ConTejas Code

View all
Hanselminutes with Scott Hanselman by Scott Hanselman

Hanselminutes with Scott Hanselman

377 Listeners

Software Engineering Radio - the podcast for professional software developers by se-radio@computer.org

Software Engineering Radio - the podcast for professional software developers

272 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

284 Listeners

Accidental Tech Podcast by Marco Arment, Casey Liss, John Siracusa

Accidental Tech Podcast

2,092 Listeners

Software Engineering Daily by Software Engineering Daily

Software Engineering Daily

621 Listeners

Soft Skills Engineering by Jamison Dance and Dave Smith

Soft Skills Engineering

269 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

987 Listeners

Practical AI by Practical AI LLC

Practical AI

192 Listeners

The Stack Overflow Podcast by The Stack Overflow Podcast

The Stack Overflow Podcast

62 Listeners

Dwarkesh Podcast by Dwarkesh Patel

Dwarkesh Podcast

426 Listeners

PodRocket - A web development podcast from LogRocket by LogRocket

PodRocket - A web development podcast from LogRocket

57 Listeners

devtools.fm: Developer Tools, Open Source, Software Development by Andrew Lisowski, Justin Bennett

devtools.fm: Developer Tools, Open Source, Software Development

26 Listeners

Latent Space: The AI Engineer Podcast by swyx + Alessio

Latent Space: The AI Engineer Podcast

75 Listeners

The AI Daily Brief (Formerly The AI Breakdown): Artificial Intelligence News and Analysis by Nathaniel Whittemore

The AI Daily Brief (Formerly The AI Breakdown): Artificial Intelligence News and Analysis

491 Listeners

The Pragmatic Engineer by Gergely Orosz

The Pragmatic Engineer

63 Listeners