Design Tweakage

June 29, 2013

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.

Hey ya'll - there have been a couple of design tweaks lately worth noting. One is how we're showing inline errors. We were pretty dang excited to offer inline error messaging in the editors. But after a few weeks of use and your feedback, we found that abruptly showing the big red error bar in your code was a bit distracting. So we made some tweaks. This is how it works now:

When there is a preprocessing error, the line becomes highlighted and an error icon is shown on the right of the line. You can click it to see the actual error if you wish. We prefer this approach because

It doesn't move your code down

Many times when you have a preprocessing error, you kinda "just know" what the problem is and can fix it easily. So you don't need to see the whole error, the icon is fine.

What is extra cool about this change is that we were able to adjust the timing of events. We used to slow down rendering updates until a "stop typing" timeout. This was because error messages were so abrupt that we didn't want to bother you while you were typing. Now that errors are shown inline and they are non-abrasive, we were able to speed up rendering refreshes as well as slow down error messages, so you'll be bothered less and shown your work more.

Another change we've made recently is to the Details View. It's quite a bit different now than it was before. A few people have expressed dislike, but you'll have to hear us out on this one. The old Details View was a hold-out from quite a while ago. Rather than re-think what that view should be like, we rather lazily just duplicated the same view from the editor. There is no particular reason those views should be so similar (e.g. non-scrolling), and the fact that they were imposed unnecessary design restrictions.

For instance, our data and experience shows us not very many Pens have long descriptive explanations. Also most Pens don't have many comments. So the entire upper half of the screen was rather empty in the old Details View. Then when a Pen did have a good comment thread going (which is super awesome and something we want to encourage) it was hard to take it all in because it was crammed in the corner.

This is how it looks now:

The new Details View is a scrolling page, giving us much more room. The page is filled with more useful information, regardless of the Pen's activity.

Comment threads are much improved:

You can use your entire browser window to view a comment thread.

Markdown is supported now. This encourages more long-form comments and thoughts rather than old tiny chat box which encouraged a lot of very short comments.

It's more clear who the users are with their avatars present.

We are able to expose the date of the comment and hyperlink it so you can link directly to a comment if you wish (and notice the yellow flash so it's clear which comment you are linking to).

We integrated Hakim's idea so you have visual feedback your comment is being sent.

This lays the groundwork for future features like hearting comments and inline editing of your comments.

All the data you were able to see before is still present. More, actually, because we expose all forks rather than just a few. We have some work to do to improve that area though. Though the page looks more full, it's actually a lighter page now, so should load a bit quicker. We hope this view becomes the easier to share, and share from. Stay tuned for more iterations and improvements of Details View as we move forward.