If you’re already PRO, you’ve probably already seen this! That’s because we announced the feature via a modal on the homepage when you are logged in as a PRO user:

Hopefully the name “Private by Default” explains what it needs to: if you toggle this setting on, when you save any Pen, Project, Collection, or Post, it saves it privately automatically.

You can still make them public at any time (it’s an option on any of those things), but that first save will always make them private.

You can adjust this setting any time in your account settings.

Docs

If you’re looking for more detailed information, it’s always smart to check our documentation. Chances are that’s more up to date than an announcement blog post like this.

Ongoing Reactification

We’ve been blogging a bit about the The Ongoing Reactification of CodePen and to me, this is a great example of watching the value of it unfold.

The little UI module that allows you to control this feature is just a header, paragraph, and toggle switch that controls a value in our database. We smoosh all that together, including querying for and mutating the data (via toggle) into a single component:

<PrivateByDefault />

Wherever we put that thing, it’s a fully functional bit of UI that does that job.

But the value of this really presents itself when combined with other bits of infrastructure we already have. For example, we have a <Modal /> component that displays a modal and handles all the stuff that modals need to: opening/closing, escape-key closing, click-outside closing, styling, etc.

We also have a functionality component called <FeatureNotifier /> which will render what is inside of it only once and then save the fact that you’ve seen the feature to our database. By default, it’s a little yellow glowing circle, but it can also render whatever you give it. So by putting all those things together…

<FeatureNotifier id={PRIVATEBYDEFAULT}>
   <Modal>
       <h1>Would you prefer if all new work was private by default?</h1>
       <p>Pardon the intrusion... we're letting you know about this new feature.</p>
       <PrivateByDefault />
   </Modal>
</FeatureNotifier>

Of course, it was work to get there, but seeing this kind of thing come together quickly and easily now that the work is done is very satisfying.