This week on CodePen Radio, we're talking about responsibility. We're all responsible for keeping the site up, but we are going get into the details of what our different roles require, and what it means to take responsibility for your product.

Our Responsibilities at CodePen

2:00 Tim keeps the site running and our servers fast. He also handles backups and the backend.

4:00 Alex does a lot customer service (as do all of us) and cross browser reliability - because CodePen runs in web browsers, he makes sure the experience is consistent and reliable in all of our supported browsers.

Don't Break the URLs

6:34 We feel pretty strongly about URLs. We try to think about things like this on a micro level: even little changes can have big effects on the web.

7:31 We just recently changed a URL for Pen's you've loved before, and we made sure to set up a redirect from the old URL to the new URL. It's a responsible practice. We don't want to break URLs and mess up someone's experience.

8:32 We use a routes file - which doubles as a living record of what the URL's were, and what they are in version control.

Protecting the User

10:31 Mike Monteiro did a talk (How Designers Destroyed The World), where he told a story about a girl on Facebook that got outed by Facebook after joining a queer choir group. This is just one example of the responsibility that we have as designers of the web to pay attention to what we're designing and to take the user's experience seriously.

13:03 Even though most users don't put a lot of sensitive information on CodePen, we still strive to be really responsible with their Pens, and protect their personal information and usage info as much as possible.

Giving control to the User

14:37 We always try to give control to the account holder. For example, if you create a Pen, we give you control over the comments section. You control what gets shown on the page.


15:14 We've always had advertising on the app, but we choose our advertising partners carefully. We also maintain control on the code that goes on our pages - so there is nothing shady happening there. We don't do advertising for (what we consider to be) bad companies or that are trying to advertise something we don't align with.

Making changes

16:55 Any time we make any changes to CodePen (features or otherwise), we discuss it as a group. Sometimes it takes multiple eyeballs on something to really understand the implications of a change.

We are all responsible for the end product

19:26 We want everyone who uses CodePen to feel happy. We want the experience to be good for everyone. We built a spam filter to help alleviate the annoying spam from getting to our users.

Being responsible with money

23:03 By now, many of you have heard of the new social network, Ello. They are trying to create a social network that isn't based on advertising. But what they haven't disclosed is that they have already taken a VC round ($435,000). We don't want to put them down, but we feel like (for CodePen) it would be the responsible thing to do to inform our users of our plans related to money and the future of the site as it relates to finances.

27:14 The big question is, how will you make money? We try to be open about how we make money on CodePen. CodePen supports itself. It's incredibly important to our user base to be able to know that we are going to be around for awhile.

28:40 In the beginning, we had a few users ask us, "How long are you going to be around?" We had to prove to our users that CodePen would be around for awhile.

We need your feedback!

30:32 We'd love to hear your thoughts if you think there is anything we could be doing better. Feel free to call us out on anything!

Have any questions? Leave us a comment! If you enjoy the show, please leave us a review in iTunes! Thank you!

Show Links:


  • Hello Chris, me again lol

    Very interesting topic and on the note about making changes and adding features I got 2 features that should be in codepen (and its weird they are not)
    * Draft Pens, Sometimes we are not ready to post a pen or we want to keep working on it (some ppl dont want to show their work until its done), noticed we can have draft blog posts so draft pens seem only logical
    * Link to markup syntax on the edit/new blog post view, noticed there is a link in a Pen’s comments section, didn’t know we could use markup on the blog till I tried it (or a lil help modal would be sweet)

    And last, not really something you ‘should’ add but more of a friendly inquiry: wouldn’t it be nice if we had a “rebound” feature like dribbble where we can iterate or challenge ‘1 on 1’ someone’s pen. Instead of forking a pen these ‘rebounds’ would show up on the ‘Public pens’ tab instead of the ‘Forked pens’, because right now we use forks to recopilate cool stuff.

    Right now if I want to versionize or iterate on my pen or someone elses I gotta copy/paste the code, that way it can show on the ‘Public pens’ and won’t get buried in the Forks (also can’t select forks to feature on the profile view). So if I copy/paste code you gotta give credit in the code a more proper way could be an input field where we can write the ID or URL of the original ‘This pen is based on [PEN ID]’ (and a ‘rebound’ button on each pen)

    Of course I’m just putting this out there, being part of codepen since day 1 and seeing how it gets better and better makes me wanna chip-in with my 2 cents now and then 🙂


    • chriscoyier

      > Draft Pens

      This is definitely something we think about a lot. So far, we’re sticking with the fact that Private Pens fufills this purpose. That is the #1 reason people go PRO here, and PRO is how we’re able to run this ship =)

      > Link to markup syntax on the edit/new blog post view

      Good point! It’s not very clear at all that Markdown is what you write in there. We can fix that.

      > Instead of forking a pen these ‘rebounds’ would show up on the ‘Public pens’ tab instead of the ‘Forked pens’

      This is an interesting idea as well. Forks are pretty sweet, but the vast majority of forks change nothing whatsoever about the Pen itself. We have a fancy heuristic way of checking that, and what we might do is put that to more use here. Not sure how, but it’ll be part of the discussion when we get back to this.