Building CSS-Tricks and CodePen 2.0 - Insights from Chris Coyier
Offered By: Tejas Kumar via YouTube
Course Description
Overview
Dive into an insightful 1 hour 35 minute talk featuring Chris Coyier, CEO of CodePen, as he shares his journey building CSS-Tricks and the ongoing development of CodePen 2.0. Explore the challenges of managing web projects, including advertising and business models. Gain valuable insights into CodePen's tech stack, featuring Next.js and GraphQL, and learn about the benefits of code generation tools for ensuring data consistency and type safety. Discover the future plans for CodePen, including the adoption of server components and NPM support. Delve into discussions on balancing simplicity and complexity in web development, serverless architecture, and staying current with industry trends. Explore CodePen's design system, the use of Tailwind CSS, and potential AI features in CodePen 2.0. Gain a comprehensive understanding of the inner workings and future direction of one of the web's most popular coding platforms.
Syllabus
Introduction and Background
Running CSS-Tricks and CodePen
Workload and Challenges
Moving to Next.js
Server Components and Future Plans
Code Generation with Apollo
Apollo Code Gen and Type Checking
CodePen 2.0 Features
Simplicity vs Complexity
NPM Install and CodePen
NPM Support in CodePen 2.0
ESM vs CommonJS
Common JS and GraphQL
CodePen's Architecture and Transpilation
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
CodePen's Data Layer
AI Features and CodePen 2.0
Potential Acquisition of CodePen
Taught by
Tejas Kumar
Related Courses
Build a Full Stack Twitter clone with Next.jsCoursera Project Network via Coursera Next JS with React Hooks - Building SSR React Applications
Udemy End to End React with Prisma 2
Udemy Build a Server Rendered Website with Next.js
Coursera Project Network via Coursera Next.js 14 & React - The Complete Guide
Udemy