← На главную

CodePen 2.0 получил live-коллаборацию, npm, MJML Blocks и деплой сайтов

30.07.2026 17:52 · hackernews

Основатель CodePen назвал запуск CodePen 2.0 главным карьерным достижением. По его словам, на создание ушло больше сил, чем на первую версию. Детали изменений раскрыты в подкасте Why 2.0? и на странице What’s New, а в блоге он поделился живыми историями из первой недели после релиза.

Один из первых опытов — совместная работа с незнакомым разработчиком. Тот использовал классический Pen и тянул JavaScript из трёх других Pens, плюс подключал npm-пакет. Основатель форкнул Pen, пригласил собеседника как со-редактора и перенёс весь JS в отдельные файлы внутри проекта — так гораздо чище и удобнее. npm-пакет записал в package.json для нормального контроля версий. Вместе быстро навели красоту: теперь код не размазан по трём Pens, а лежит в одном месте с понятной структурой. Все зависимости на виду, никакого хаоса.

В день релиза The Keyframers (Дэвид и Шоу) устроили многочасовой стрим прямо в CodePen 2.0. Они активно использовали инвайты и live collaboration, одновременно модерируя код в одном Pen. Пару мелких багов всё же вылезло, но без серьёзных проблем. Самое крутое — ведущие расшарили Live View, и зрители могли сами тыкать в демку и смотреть, как она меняется на лету.

Параллельно основатель готовил почтовую рассылку. Письма он верстал на MJML — специальном языке для адаптивных email-шаблонов. Раньше приходилось использовать сторонние редакторы, но теперь он добавил MJML как Block в CodePen. Верстаешь прямо в Pen, сразу видишь результат — красота, даже для самых хитрых макетов. Результат — письмо собирается без единого переключения окна. Обещает, что скоро появятся и другие Blocks.

Отдельный восторг вызвала возможность делать маленькие сайты и деплоить их прямо из Pen Editor. Например, лендинг с документацией к библиотеке slideVars или codepen.school. Признаётся, что после такого хочется клепать десятки странных микро-сайтов, лишь бы не останавливаться. И кажется, это только начало.

Читать оригинал →