CodePen 2.0

# CodePen 2.0 来源：https://chriscoyier.net/2026/07/30/codepen-2-0/ 这也许是我职业生涯中最大的个人成就——**发布CodePen 2.0**（https://blog.codepen.io/2026/07/23/two-point-oh/）。信不信由你，这比最初创建CodePen的工作量还要大得多。 这里不适合详述我们做了什么以及为什么这么做。如果你感兴趣，可以听听我们的**《为什么是2.0？》播客**（https://blog.codepen.io/2026/03/05/419-why-2-0/）或查看**“新功能”页面**（https://codepen.io/2/whats-new）。 取而代之的是，分享几个上线第一周发生的小故事。 - 我和一个素未谋面的人一起做了一个演示。这个演示是从他（经典版）的Pen开始的。他需要导入一些其他JavaScript，所以用了3个Pen，将另外两个的JavaScript引入主演示。他还需要一个npm包。我**fork**（https://blog.codepen.io/docs/pens/forking/）了这个Pen，并**邀请**（https://blog.codepen.io/docs/pens/privacy-sharing/#inviting-collaborators）他作为共同编辑，这样我们随时可以一起编辑。我把JavaScript移到了主Pen的文件中，这样处理起来方便得多。npm包（https://blog.codepen.io/docs/pens/packages/）放在`package.json`文件里，方便版本管理。我们俩按照自己的喜好清理了一通。 - **Keyframers**（https://keyframe.rs/）（David和Shaw）重新聚在一起，在上线当天做了**一场直播**（https://www.youtube.com/watch?v=sgwPEW1gGYM&t=1s）。他们也使用了邀请功能和**实时协作**（https://arc.net/l/quote/zbptvwfz）。他们一起工作了几个小时，虽然有一两个小bug，但都不算严重，整个过程非常顺利。我最喜欢的一点是，他们分享了Pen的**Live View**（https://blog.codepen.io/docs/live-view/#live-view），这样当他们正在处理时，我们也可以自己操作那个演示。 - 我制作准备发送的上线邮件时，使用的是专门用于制作邮件的语言：**MJML**（https://mjml.io/）。我顺手把MJML作为代码块加入了CodePen，这样我就能直接在CodePen里构建邮件了。效果很好（https://codepen.io/editor/team/codepen/pen/019f9076-f6cd-7727-ac29-30e936cabbb0），甚至能处理各种**奇怪的东西**（https://codepen.io/editor/chriscoyier/pen/019fae5c-6bef-7ae7-aebd-8732e00b3613）。未来还会有更多代码块加入。 - 我超级喜欢现在能**制作小网站**（https://blog.codepen.io/docs/pens/deployment/），并直接通过Pen编辑器部署。比如**slideVars库的网站**（https://hip-forest-gobbler.codepen.app/）或**codepen.school**（https://codepen.school/）。这让我疯狂想做出各种奇怪的小网站。