CodePen 2.0

Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen.

This isn’t the place to describe every detail of what we did and why we did it. If you’re interested, perhaps our Why 2.0? podcast or the What’s New? page.

Instead, a couple of stories from the first week of launch.

• I was working on a demo with someone I’ve never met before. It started on their (classic) Pen. They needed to import some other JavaScript, so they used 3 Pens and pulled in the JavaScript from the other two into the main demo. They also needed an npm package. I forked the Pen and invited them as a co-editor, so we could both work on it together anytime. I moved the JavaScript into files on the main Pen, as that’s much easier to work with. The npm package is in the package.json file for easy version management. We both cleaned it up to our liking.

• The Keyframers (David and Shaw) got back together and did a live stream on launch day. They also used the invite feature and live collaboration. They worked together for hours, and while there was a bug or two, it was nothing super major, and it went great. One of my favorite bits was that they shared the Live View of the Pen, so as they were working on it, we could play with the demo ourselves.

• As I was working on the emails we were going to send out about the launch, I was building them in the special language for crafting them: MJML. I went ahead and added MJML as a block to CodePen so I could just build them right in CodePen. Works great, even for weird stuff. Many more Blocks to come.

• I friggin love how I can make little websites and deploy them right through the Pen Editor. Like the one for our slideVars library or codepen.school. It just makes me wanna build a ton of little weird websites.

Related