Крис Койер, генеральный директор CodePen: Как мы создавали CSS-трюки, как мы создаем CodePen 2.0

• Крис Койер - основатель и генеральный директор подкаста "Заразительный код", а также основатель Codepen и CSS Tricks.  

• Codepen - это платформа для изучения и практики веб-разработки, а CSS Tricks - популярный блог о CSS.  

• Codepen становится все более популярным, и Крис работает над его масштабной перестройкой.  

• Codepen использует graphql и react для улучшения архитектуры и удобства использования.  

• Codecrafters предлагает бесплатные и платные программы для обучения программированию.  

• Codecrafters также является партнером подкаста "Заразительный код".  

• Крис Койер работает над Codepen и CSS Tricks, и его проекты требуют много времени и усилий.  

• Codepen и CSS Tricks - это его самые большие проекты, и он продолжает работать над ними.  

• Автор рассказывает о своей работе над сайтом Css Tricks, который был основан на WordPress.  

• Он объясняет, что сайт был создан для того, чтобы помочь людям научиться использовать CSS, и что он был очень занят в этом проекте.  

• Он также упоминает, что сайт был основан на рекламе, и что это было сложно, особенно потому, что он был не так прост, как блог на WordPress.  

• Автор рассказывает о своей работе над Codepen, который был основан на WordPress.  

• Он объясняет, что Codepen требует больше работы, чем Css Tricks, и что он работает над ним полный рабочий день.  

• Он также упоминает, что в Codepen есть много новшеств, и что он любит использовать его.  

• Автор рассказывает о работе над новой версией Codepen, которая является переписыванием всего приложения.  

• Он объясняет, что это большая работа, и что они работают над этим, чтобы обеспечить лучший опыт для пользователей.  

• Он также упоминает, что Codepen использует Ruby on Rails, React и GraphQL API для своей работы.  

• В Codepen используется стек, включающий Ruby on Rails, Next.js, GraphQL и Go.  

• Ruby on Rails используется для родительской страницы, а Next.js - для отрисовки на стороне клиента.  

• GraphQL API используется для обработки данных и серверной части.  

• GraphQL используется для сокращения количества поездок туда и обратно между интерфейсной и серверной частями.  

• Он позволяет отслеживать поток данных и логику работы сайта.  

• Codepen использует сложный стек для обработки данных, включая Next.js и GraphQL.  

• В Next.js 14 требуется React 18, что может вызвать сложности при обновлении.  

• Несмотря на сложности, команда Codepen планирует обновить стек и перейти на Next.js 14.  

• Автор обсуждает переход на Next.js 13 и 14, которые предоставляют поддержку сервера и увеличивают скорость отправки.  

• Он также упоминает, что они используют Next.js для рендеринга страницы "О программе" и других страниц, чтобы убедиться, что все работает правильно.  

• Автор обсуждает преимущества GraphQL и Apollo, особенно генерацию кода, которая гарантирует, что ссылки на возвращаемые данные из запросов GraphQL ссылаются на правильные данные.  

• Он также упоминает, что Apollo codegen автоматически генерирует типы из запросов GraphQL и компонентов на сайте.  

• Автор обсуждает использование TypeScript в их стеке, где он используется для написания компонентов, но также и для JavaScript-компонентов.  

• Он упоминает, что иногда приходится использовать ts ignore для компонентов, написанных на JavaScript, чтобы избежать ошибок в TypeScript.  

• Обсуждается новый продукт 20, который будет включать в себя новые функции и улучшенный дизайн.  

• Упоминается возможность совместного использования ручек с друзьями и возможность работы с редактором.  

• Упоминается, что Codepen остается простым и удобным для пользователей, но при этом позволяет делать больше.  

• Обсуждается пример с reddit, где добавление новых функций сделало интерфейс более сложным и тяжелым.  

• Упоминается функция специальных возможностей в iOS, которая позволяет скрыть большую часть информации на экране.  

• Обсуждается идея создания простого режима в Codepen, который позволяет пользователям выбирать между простым и сложным опытом использования.  

• Автор обсуждает проблемы с npm и его использованием для установки зависимостей в браузере.  

• Он упоминает, что npm - это "чудовищная вещь", которую нужно поддерживать, и что установка npm может быть медленной и сложной.  

• Он также обсуждает, как codepen использует cdnjs или другие инструменты для установки зависимостей, что делает его более удобным для использования.  

• Автор обсуждает, как codepen поддерживает импорт esm, что позволяет использовать зависимости из npm в браузере.  

• Он также упоминает, что codepen 20 будет иметь больше возможностей, включая поддержку typescript.  

• Однако, он признает, что поддержка npm для typescript в codepen все еще является сложной задачей, и что решение должно быть найдено для всех инструментов обработки кода на серверной части.  

• Обсуждение различий между ESM и CommonJS, включая их использование в веб-контейнерах и влияние на производительность.  

• Упоминается, что ESM и CommonJS могут быть использованы в одном проекте, но с разными подходами.  

• Обсуждение использования Codepen для разработки и его интеграции с другими инструментами, такими как TypeScript и Sass.  

• Упоминается, что Codepen может быть использован для запуска бессерверных функций и работы с локальными средами разработки.  

• Упоминается, что локальная разработка в Codepen автоматизирована и требует установки Docker Desktop.  

• Обсуждается использование tmux для запуска различных инструментов и сайтов на JavaScript.  

• Автор обсуждает, что Codepen - это популярный и востребованный инструмент для разработки, который не так сложен, как многие думают.  

• Он также упоминает, что большинство слушателей подкаста могут присоединиться к Codepen и использовать его для своих проектов, если они потратят время на его изучение.  

• Автор также обсуждает, как он остается в курсе последних событий в индустрии, используя RSS-каналы, подписки на Twitter и другие платформы.  

• Автор дает рекомендации по использованию Codepen Spark и своего подкаста для обмена материалами и обучения.  

• Он также обсуждает, как он использует функцию принудительного распространения информации для обучения и развития.  

• Автор также упоминает, что он подписывается на множество рассылок и использует их для получения информации, которую он может использовать в будущем.  

• Обсуждение системы проектирования и компонентов в React-приложении.  

• Упоминается, что раньше не было четкого отраслевого стандарта для проектирования, но с появлением систем проектирования это изменилось.  

• Обсуждается, как система проектирования может быть применена к компонентам, таким как кнопка, диалог, выпадающий список и т.д.  

• Упоминается, что в приложении есть папка с названием "components", где находятся все компоненты.  

• Обсуждается, что некоторые компоненты могут быть универсальными и использоваться совместно, но другие могут быть библиотечными и требовать данных.  

• Упоминается, что Tailwind CSS может быть использован в Codepen, но для этого нужно запустить процесс для создания конфигурации Tailwind.  

• Обсуждается, что Tailwind CSS может быть использован в любом месте Codepen, например, в разделе "stuff for head" или в области HTML.  

• Упоминается, что Tailwind CSS может быть использован в Codepen, но это не рекомендуется, так как это может снизить производительность.  

• Упоминается, что Tailwind CSS может быть использован правильно, используя процесс сборки, который предлагает Tailwind.  

• Упоминается, что в приложении используются базы данных PostgreSQL и Redis для хранения данных.  

• Обсуждается, что API-интерфейсы взаимодействуют с базами данных напрямую, используя SQL-запросы.  

• Упоминается, что для работы с базами данных используются различные ORM, такие как активная запись в Rails и gorm в Go.  

• Крис Койер обсуждает генерацию кода и искусственный интеллект, особенно в контексте graphql.  

• Он объясняет, что генерация кода может быть автоматизирована с помощью graphql, что позволяет разработчикам запрашивать базу данных и получать данные без необходимости писать код.  

• Он также упоминает, что генерация кода может быть сгенерирована автоматически, и что иногда требуется дополнительная логика для обработки нестандартных ситуаций.  

• Крис обсуждает использование искусственного интеллекта в codepen, особенно в контексте автозаполнения кода.  

• Он отмечает, что codepen предлагает встроенные функции искусственного интеллекта, которые могут быть использованы для автозаполнения кода и рефакторинга.  

• Он также упоминает, что codepen может быть интегрирован с другими сервисами, такими как code.  

• Крис благодарит за возможность обсудить codepen и искусственный интеллект с Крисом Койером.  

• Он подчеркивает, что codepen - это отличный инструмент для разработчиков, и что он надеется, что зрители извлекут уроки из этого контента.  

• Он призывает зрителей подписаться на канал, оставить отзыв и поделиться контентом в социальных сетях.