Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
I’m sure many of you know every nook and cranny of the CodePen Editor. But the truth is, most people don’t, and we don’t want to forget that. Even the concept of “write code here, see output right over there” isn’t entirely intuitive until you’ve done it once. The more you know about the software you use, the more productive and confident you feel using it. A win-win, surely.
So! While we have documentation, even specifically for Editor View, nothing beats a live, interactive tour. That’s exactly what we built:
You can go take the tour right now!
A Video of Me Taking the Tour
The tour isn’t available on Mobile, so just in case you need to see this thing right this second, I’ll record this video of me doing it.
The Tour is a User “Accomplishment”
That’s what we’re calling it internally, anyway. We’ve long wanted to have some kind of fun way to measure the things users do, milestones they cross, things like that. Perhaps some day it’s “badges”, or the like.
For now, you’ll see a little reminder in Editor Settings:
And you’ll get a different message if you’ve completed it.
It’s a system
High five to Rachel who took the lead on this one, and Sparkbox for the initial design.
On the back end, the system for managing the steps is cleverly abstracted. There was a little light database updating required to track the accomplishment. All in all, a feature that covered a lot of ground and was awesome to watch Rachel knock out.
Because of how it was built, we can re-use it in other areas of the site, and very likely will as we move forward. Any tour requests?