HN Weekly 中文
← #804

CodePen 2.0

查看原文 HN 讨论

文章摘要

Chris Coyier 在自己的个人博客上写下这篇短文，记录他称之为「个人职业生涯中最大成就」的事件：CodePen 2.0 上线。他说了一句让人意外的话——这次改版的工作量比当年从零创造 CodePen 还要大。文章本身刻意不去逐条罗列改了什么、为什么改（他把这些留给了官方的《Why 2.0?》播客和 What’s New 页面），而是讲了上线第一周里的几个小故事，用来说明这次升级究竟改变了什么。

第一个故事是关于协作。他和一位素未谋面的人 Dave Samaniego 一起做演示：起点是对方的一个「经典」Pen；对方需要引入其他 JavaScript，于是用了三个 Pen，把另外两个的 JS 拉进主演示里。他们还需要一个 npm 包。Chris fork 了这个 Pen 并把对方邀请为协作编辑者，从此两人随时可以一起改。他把 JavaScript 移进了主 Pen 的文件里（这样处理起来轻松得多），npm 包则写进了 package.json 做版本管理，两人一起把它整理成了各自满意的样子。这一段其实是在展示 2.0 的核心变化：Pen 从「三个代码框」变成了一个有真实文件结构和依赖管理的小型项目。

第二个故事是关于实时协作。The Keyframers 组合（David 和 Shaw）在上线当天重聚做了一场直播，用了邀请功能和实时协作，一起工作了好几个小时。Chris 说虽然遇到了一两个 bug，但都不严重，整体非常顺利。他最喜欢的一点是：他们把 Pen 的 Live View 分享了出来，所以观众可以在他们编辑的同时自己去玩那个演示。

第三个故事关于扩展性。他在准备上线宣传邮件时，用的是专门写邮件的 MJML 语言，于是他干脆把 MJML 作为一个 Block 加进了 CodePen，直接在里面写邮件——他说效果很好，连一些古怪的用法都能跑通，并预告「还会有更多 Block」。

最后一点是部署。他说自己非常喜欢现在可以做出小网站并直接从 Pen 编辑器里部署出去，还举了两个自己做的例子（他们的 slideVars 库主页和 codepen.school）。他的结语很有感染力：”这让我特别想做一大堆奇奇怪怪的小网站。”

HN 评论精华

这条帖子拿到 193 分、53 条评论。有意思的是，HN 上的讨论几乎完全没有跟着 Chris 的兴奋走，而是分成了两条相当冷峻的主线：一条担心产品复杂化，另一条讨论 CodePen 这类工具在 AI 时代还有没有位置。

主线一：功能膨胀之忧。 得票最高的评论来自 danielvaughn，一位从最早期就在用 CodePen 的老用户：”我不想唱反调，但我实话说不喜欢 2.0。我爱 CodePen 的地方就是能非常快、非常简单地试一个想法。但新界面让我感觉自己是在一个网站里面建另一个网站。” gkoberger（Readme 创始人）在下面给出了这类工具的根本困境：”这就是这类工具的难处。它们太简单，做不了重要的事；而一旦创造者顺着这条路走下去，你就会掉进一个既对复杂需求太简单、又对简单需求太复杂的境地。Glitch 这样了不起的平台就栽在这个问题上。（也有人做成了——比如 Vercel 靠 now 建起了一个王国。）” bubblebeard 把它上升成一条普遍规律：”越复杂越脆弱，越简单越健壮。这在我看来是软件开发的普遍真理，而更简单的方案通常也是更有用的那个。” zeroq 用「功能蔓延的教科书定义」来形容，并借题发挥吐槽了 Spotify 需要三千名工程师全职开发一个流媒体应用这件事——WinAmp 早已停更却依然是个完全够用的播放器，foobar 由一个人在开发。他的结论是：”我和任何人一样喜欢炫酷功能，但我也喜欢清楚自己身份的、连贯的产品。”

也有人指出这个批评并不完全成立：OuterVale 说 CodePen 显然意识到了这一点，因为他们保留了旧版编辑器（codepen.io/pen），还专门做了教程教你如何把 2.0 调成旧版的样子。bodhi_mind 则认为这类问题本来就可以用「合理的默认值 + 把大部分东西藏进高级选项」解决。

主线二：AI 时代 CodePen 还有没有意义。 这条线的悲观程度相当高。amelius 一句话：”CodePen 以前确实很适合快速简单的实验，但 LLM 让这种需求消失了。” jjcm 说得更彻底：”我现在真的不看代码了。我不再去参考示例，我只是把想要的东西提示出来，或者把图片作为上下文输入进去。” carloseduardopx 的感受很有代表性：”哇……CodePen……都不记得这东西了……在 AI 工具泛滥之后，这感觉像是上古科技。以前很爱 CodePen。” gottagocode 的怀念更直接：”以前很爱这个站点，那时候你还能看到其他手艺人真正手工做出来的东西。” dspillett 则给出了唯一一条反驳：”还是有人想学东西、而不是让 LLM 替自己做的，哪怕只是为了能验证 LLM 的输出。” threetonesun 用一句反问回敬 jjcm：”那你以为 AI 从你的提示词里生成的代码是从哪儿来的？”

hazelnut 用 Google Trends 的数据给这场讨论提供了实证：疫情期间 CodePen 的流量基本翻倍（大家都待在家里做东西），AI 到来后兴趣被腰斩。他认为这说得通——你现在很少再去反复折腾，只有真卡住了才需要 CodePen；而从「分享 HTML/CSS/JS 小组件」转向「网站构建器」，很可能就是他们对这个问题的答案，是在为与 Lovable、Replit 之类竞争卡位，只是更技术向一些。

echelon 提出了这个帖子里最反直觉、也最值得记的一个假说：”我怀疑他们这么做正是因为 AI。任何能成为有效 AI 部署目标的东西，都可能成为有用的基础设施。人类在 CodePen 上试东西的频率会像 Stack Overflow 那样慢慢下滑，而 AI 模型部署到 CodePen 2.0 的频率会显著上升。若干年后，机器每个月写的代码量将会碾压 1957 到 2027 年间人类写下的全部代码。在那个世界里，CodePen 2.0 是有价值的，CodePen 则未必。”

主线三：搜索与发现的失败。 shimman 提了一个相当尖锐、也很少被提及的批评：”CodePen 最糟的一面一直是探索。在 CodePen 上搜东西体验极差，你往往只能搜一个标签，翻过第一页质量就急剧下滑。” 他给出了自己想要的东西：一个能按 animejs, svg, forms 组合过滤的高级搜索，结果是「围绕表单使用 anime.js」的 Pen。”如果搜索能力更好，我大概会把 CodePen 当作事实上的 Web UI 参考库。现在我主要还是用 GitHub 加博客——只是因为在 CodePen 上太难找到有价值的东西。金子是有的，但埋在地层深处，而且没人愿意去挖。” unleashit 认为这条该是最高票，尤其是在自然搜索流量已经失守的今天；他还注意到现在搜索需要登录，猜测是为了防 AI 爬取，但认为这是个大失误——”我虽然有账号但不常登录，遇到强制登录的站点通常就放弃了。在极客里，我大概不是唯一一个”。GSimon 补充说首页现在似乎连精选 Pen 都没有了，你已经无法漫无目的地浏览。addedGone 则说 CodePen 从强制登录才能查看和探索的那一刻起就毁了自己的产品，而且这根本保护不了什么——那些内容在某些论坛上早就有整包存档。

替代品清单是这个帖子的一份意外收获。有人问 JSFiddle 之外现在大家都用什么，答案包括：jsbin.com（embedding-shape，用了很多年）、htmledit.squarefree.com（LoganDark 指出它二十多年没变过）、plnkr.co（filearts 推荐，多年未变）、以及 vanderZwan 详细推荐的 jsgist——他多年前就转过去了，正因为它极其简陋反而避免了功能蔓延，而且输出存成他自己 GitHub 账号下的 gist，站点哪天挂了也不怕。他还顺带推荐了姊妹站 jsbenchit，说它是他试过的微基准测试工具里少数不会触发 JS 去优化、也不会因为网站自身在测试中触发 GC 而引入噪声的。他也解释了为什么自己只需要这么少的功能：这类 playground 对他而言只有两个用途——手写复现疑似浏览器 CSS bug 并测试变通方案（需要发给用 Windows 和 Apple 的同事跨平台验证），以及试某个组件的实现思路（本质上还是跨浏览器测试）。

其他几条实用建议：