yes http://codepen.io/ is awesome ;)
Is there any winner ?
What do you use most often ?
And if so, why do you prefer one to others, what are the merits and/or drawbacks ?
I like it for similar reasons. All the others seem to have similar features and I like the Github login, which reminds me http://dabblet.com/ which I used to like a lot too but not using anymore.
To me it seems that all have HTML, CSS, JS and some preview ability.
What I am thinking and do not know (not so much experience with those other “sandboxes”) is any of these like superior somewhat to others or are those engines equal these days ?
I think codepen is rich with content/pens…but I prefer the form and function of jsFiddle. I too, prefer a light UI for reading code. As for now…I’ll be sticking with fiddle
I wish jsFiddle would integrate the auto-update feature…it’s quite a handy feature…but it does support
Emmet short hand coding now, which is always a plus
This is NOT a comprehensive list, but it shows some of the differences that I have noticed between the sites: (updated 12/2013)
I would like to completely switch to Codepen, but I’m sticking with JSFiddle for now for three reasons:
I’ve done a round-up on code playgrounds a couple of months ago: http://hugogiraudel.com/2012/11/19/css-playgrounds/.
Pretty much what Mottie said anyway. Hope it helps.
Just to address some of the “Cons” in CodePen … =)
> No way to turn off specific code windows
You can’t turn them off, but you can maximize any of the editors :: http://blog.codepen.io/documentation/features/full-screen-editing/
> No way to tidy up the code
You can. Just select all the code and press SHIFT + TAB
> No code checker (JSHint)
There is! Press Command-Shift-7 on Mac or Control-Shift-7 on PC
> Not easy to test the code in different versions of a library.
You can link up any JS resource you want though. http://blog.codepen.io/documentation/features/adding-external-resources/ But the dropdown menu only allows you to link to the latest copy.
> No way to disable the “update as you type coding”
Just to address the “cons” in jsbin (too :)
If you switch between different versions of the library, then it’ll just swap out the script, though I think you want to switch back and forth really (though it used to exist, I removed it for simplicity).
Yes it is (and has been for over a year now), select “share” and copy/paste the embed code (or just wrap your bin in an iframe and change /edit to /embed).
No way to save to the original bin (or rebase).
I’ve never quite been sure what this is. I’ve heard jsfiddle has this rebase thing, which because I’m not user, I don’t really know what it is.
You can save the original for sure though (but I suspect you mean something else, like restoring).
Other “pros” that I think are pretty big, but missed out:
CodeCasting (also known as Professor Mode in CodePen pro accounts)
Remote rendering (i.e. point any other device, mobile, old crappy browser to the same url, and it’ll live reload as you code)
Locally installable (via npm install jsbin)
It’s been 2 months since Remy’s post, and jsbin was my preferred go-to as of last spring due to integration with GitHub (gists). Remy — very good work there (https://gist.github.com/say2joe/5464912). However, I’ve seen a lot going on with CodePen (which I’ve barely used in the past). I really like the fact that you can easily host any assets required by the snippet very easily.
And, it looks like jsbin and codepen support “teaching” / “sharing” modes — which, if you go to the above gist, you’ll see I would’ve really appreciated last April. Thanks for all the hard work guys, but it looks like this marathon will draw to a close within the next 6-9 months with where everything is at now…
has anyone done a recent (last month) matchup?
*NOTE: Great column / forum for CSS-Tricks!
One feature that seems to be missing in all of these playground is search. I am not talking about searching inside a script. I am talking about searching through my entire fiddles to find some scripts I worked on 3 days ago, 5 months ago, 1 year ago, 10 years ago. I have a lot of fiddles in jsfiddle, but it is really really hard for me to dig out something I used to have worked on. Currently the only option is to eyeball the entire list page after page and see if I am lucky. I tried google searching my fiddles as well, nothing turns out.
No way to disable the “update as you type coding”
Wasn’t aware of that; excellent. Honestly, codepen’s autorun was the one “feature” that frustrated me the most, and the main reason that I never used pens for my own stuff.
Now you just need to be able to disable it everywhere. : )
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".