2026/07/31 2:52
CodePen 2.0
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
詳細情報を求めるユーザーには、本テキストよりも「Why 2.0?」ポッドキャストや"What's New?"ページといった特定のリソースが推奨されます。著者は CodePen 2.0 のローンチを自身の最大のキャリアの達成と位置づけ、これはもとのプラットフォームからの大幅な拡張を表しています。主な新機能には、複雑なメールレイアウトを構築するための MJML ブロックや、Pen Editor 内で直接ウェブサイトを作成・デプロイできる機能が含まれます。後者は slideVars や codepen.school というプロジェクトで実証されています。このアップデートは、共有招待機能や npm パッケージサポートといった機能を通じてコラボレーションを強化し、複数の Pen を 1 つに統合するライブデモで披露されました。ローンチ当日には、「Keyframers」の David と Shaw が、これらの新しい招待機能を介して数時間コードに取り組む姿がライブ配信され、当初は一部の軽微なバグが見られたものの、それが素早く修正されたことが報告されています。今後より専門的なブロックがリリース予定でありながら、プラットフォームは効率的なワークフローと創造的可能性への注目を保ちつつエコシステムを拡大し続けています。
本文
CodePen 2.0 リリース：キャリア最大の達成と初期の出来事
CodePen 2.0 のリリースは、個人のキャリアにおいて最大の成し遂げとなりました。当初のコードペンを構築するよりもはるかに多くの作業が必要でした。詳細な理由については「Why 2.0?」ポッドキャストや「What's New?」ページをご覧ください。
リリース週の主なエピソード
リリース直後の週に起った具体的な出来事をまとめました。
-
面識のないユーザーとの共同制作
- デモ作成中に、相手が利用する（クラシック）ペンと他の JavaScript の互換性に課題が発生しました。
- 3 つのペンを活用し、2 つのペンから JavaScript をメインのデモに読み込みました。
パッケージの必要性から、対象ペンをフォークし、相手を共同編集者として招待。双方向でいつでも共同作業ができる体制を整えました。npm- JavaScript ファイルをメインペンの内部へ移行させ、操作性を大幅に向上させています。
ファイルに依存関係を配置することで、バージョン管理が容易になりました。package.json- 最終的に両者は各自の好みに合わせて整理整頓を行いました。
-
キーフレームアームズとのライブストリーミング成功
- デイビッドとショウを含むチームで再結成され、リリース当日にライブストリーミングを行いました。
- 招待機能およびリアルタイム共同編集機能を駆使し、数時間かけて協働しました。
- いくつかのバグは存在しましたが、致命的なものでなく、全体的には非常に成功したセッションでした。
- 特に印象的なエピソード: ペンの「ライブビュー」を共有してくれたことで、彼らが作業中も我々がそのままデモを実際に試しながら遊べました。
-
MJML ブロックの導入と強化
- リリースに向けたメール作成プロセスで MJML（専用の言語）を使用していました。
- CodePen 内に MJML ブロックを追加し、プラットフォーム内で直接作成・編集可能にしました。
- 奇抜なデザイン仕様のものでも問題なく動作し、非常に便利です。
- 今後はさらに多くのブロックが登場する予定です。
-
直ちへのデプロイと創作意欲の喚起
- ペンのエディタから直ちにデプロイできる機能は心から大好きです。
- これにより、
ライブラリのサイトやour slideVars
といった小さなウェブサイトを構築・公開できます。codepen.school - その仕組みに触れることで、「いろんな変わった小さなウェブサイトをつくりたくなる」という創作意欲が高まります。