Hey Ya’ll! Check out CodePen

[Chris Coyier]

I’m happy to announce that a new app that I’m working on with Alex Vazquez and Tim Sabat is ready for a little public Alpha action:

http://codepen.io/

I’d love for all you lovely forums folks to check it out. This is just for you, we’re not announcing it anywhere else (kind of a small public launch for now).

The idea is a cross between jsFiddle (building demos for education, bug reporting, funzies, etc) and Dribbble (exploration, inspiration, social, etc).

Fair warning: We really mean alpha. There will be rough edges and the feature set is very far from complete. But the team and I were very anxious to get some people using it to help us find bugs and let us know features you think would be cool.

We would love to get your feedback here or at our feedback form.

Oh, and post the awesome pens you build here so I can feature them on the homepage!

[Mottie]

Very nice!

[Fourize]

Love it!

Only quarms are that a js resource isn’t loaded as default – had me stumped for a minute. Also that I can’t type #.

Other than that it worked flawlessly.

Codepen example

jquery isn’t my forte, dont judge : )

[joshuanhibbert]

Looking really good Chris, love the 404! I can’t get horizontal scroll to work though. Also, I got an error when trying to give a custom domain. CMD+Z seemed to work fine as an undo for me (/cc @Hompimpa).

Is there any way to delete pens?

Here is something that I was playing around with.

[jamygolden]

Breadcrumbs trick I use every time: http://codepen.io/pen/JamyGolden/1/2
Yes yes, IE7 doesn’t support pseudo elements. I generally add IE7 styles and replace the breadcrumbs seperator with a border. It can be a good seperator and I think IE7 users get a great fallback.

[joshuanhibbert]

You guys aren’t using the inbuilt -prefix-free option!

Also, CodePen seems to be having some issues with CSS animations.

[joshuanhibbert]

@krysak4ever Tick the -prefix-free option, and then don’t use any prefixes when writing your styles (i.e. linear-gradient instead of -webkit-linear-gradient or @keyframes instead of @-webkit-keyframes).

[Blub]

Looks HOT!

[ukando]

Ohh thank you very much Chris for such BIG public work!!!

[gettingbored]

Super cool looking, and I love the horizontal split!

I do wish there was some live JSLint/JSHint error reporting though, much like at jsbin. Would be super helpful to not have to swap windows just to locate an error.

[gettingbored]

Game I made for my javascript class, the game of 15. Shift the tiles around to arrange them in numerical order.

http://codepen.io/pen/monstersaurous/gameof15/9

[Chris Coyier]

VERY sorry about this. It’s been down about a week as we do unplanned move to new architecture. Definitely wasn’t the plan. We just need to get it done before a more public Beta.

[Darrin_S]

The css is not working for me. Am I doing something wrong?

[TheDoc]

Seems to be working fine for me. Would you like to share a link to your pen?

[Author]

Posts