This week on CodePen Radio: a special holiday edition where we get a little sentimental and also talk about the past two years at CodePen and the things that make CodePen awesome and different. (Pardon the self-back-patting, again, we’ll try not to make it a habit.)
What sets us apart from the competition?
3:28 We launched CodePen in December of 2012. It was much different back then; we didn’t have advertising, revenue, anything like that.
From the beginning, CodePen was similar to web apps like JSFiddle and JSBin. There’s still a lot of comparison and debate about CodePen versus the other apps. Most of the time, people are just comparing features using a bunch of checkboxes.
It feels a little bit like judging a cake based on height and width.
9:26 One big thing that is different about CodePen: for example, when you go to JSFiddle, the homepage is the editor. That’s how you think of the site; just the editor.
The homepage of CodePen isn’t the editor, it’s everything else. It’s the community. It’s exciting new things that are happening. It’s writing, Pens, and “welcome to the world of CodePen”.
One of the things that makes CodePen different is that it truly is a community. It has all the components of a social networking site.
11:00 The community on CodePen is a big differentiator from JSFiddle; we’re trying to have one, they aren’t.
Our Cool Tech
There’s also some tech that’s different too; we have a wide assortment of preprocessors that we offer. Since launching, we put a enormous amount of work to ensure that everyone’s Pen works the same way a regular web page would.
15:10 We initially did everything client side; injecting CSS, injecting HTML. Then we switched to Boomerang, and stopped injecting anything. Now we’re sprinkling in the injections again, we’re making the editor smarter, so it can figure out if it can inject something and make the experience snappier.
15:48 We blog about all this stuff, but you might not know about this stuff if you didn’t pay close attention, or listen to this podcast.
15:59 There are some interesting tech things that we do that haven’t been copied yet. One of them is our in-line error reporting.
17:52 Another cool feature we released recently was infinite loop detection in Javascript. We found that it’s easy to accidentally create an infinite loop and lock up your browser. So we have code now that will detect where in your code you created the infinite loop, and kill that loop. Things like that are really helpful when you’re authoring.
18:30 JS Bin has a version of this too, and they’ve been cool enough to open source it. This is our third iteration of infinite loop detection.
We Work Full-Time on CodePen
18:52 Another thing that sets CodePen apart is that all three of us are working on CodePen full-time, so we have time to dive in and work on features. We released a blog post about all the different things we have to do to keep CodePen running smoothly; there’s a lot of things.
20:11 Every piece of content on CodePen includes a way to get in touch with the author of that Pen to provide feedback or praise. That feature is just another thing that helps grow the CodePen community.
Another feature we’re really proud of is search. Tim put a bunch of time into a homegrown search solution. It’s really well done, and it return great results; you can trust that you can come to CodePen and find what you’re looking for.
22:56 Another really cool thing we did for mobile; Tim created a screenshot for each Pen that would be shown instead of the Pen itself.
All these features took time and energy to implement, but they set up apart from our competitors.
We’ve put a lot of time into CodePen, and there are a lot of things, but we want to show people that we aren’t just another copycat, and that we want to make something really great.
Send Us Your Feedback!
We’d love to hear what you think about CodePen; please send us your thoughts and feedback! We really want to know what you think and what you’d like to see implemented. We have a lot of ideas about what we’d like to build in the future, but we’re open to your ideas as well.
Show Links:
- JSFiddle
- JSBin
- Boomerang
- Tiny Fixes: Two Weeks in the life of Software Development
- Preventing Infinite Loops in the Grid
If you’re enjoying this show, please take a minute to leave us a review in iTunes. We really appreciate it, and thanks to everyone who has already left a review! (We read all of them!)