Grow your CSS skills. Land your dream job.

codepen || jsfiddle || jsbin

  • # May 6, 2013 at 3:51 pm

    Hi,

    yes http://codepen.io/ is awesome ;)

    I used to fiddle around in http://jsfiddle.net/ and I do not want to through out http://jsbin.com/ into bin just because I do not know it much.

    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 ?

    # May 6, 2013 at 3:54 pm

    I used to use JS Fiddle all of the time, but I use Codepen exclusively now. I like having a proper profile and a bunch of the options that ome with it.

    # May 6, 2013 at 4:00 pm

    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 ?

    # May 6, 2013 at 5:02 pm

    I like CodePen for similar reasons Gray has mentioned. However, I prefer a light UI that Dabblet offers. If only they would combine.

    # May 6, 2013 at 5:42 pm

    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

    EDIT…

    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

    # May 6, 2013 at 6:29 pm

    This is NOT a comprehensive list, but it shows some of the differences that I have noticed between the sites: (updated 12/2013)

    JSFiddle

    Pro:

    • You can rebase a fiddle, and roughly tell how many updates/revisions there have been.
    • The tidyup button in jsfiddle cleans up/prettifies the code – it’s not perfect, but I use it all the time.
    • JSHint checker
    • Supports Emmet, SCSS (only), CoffeeScript, javascript 1.7 & other javascript libraries.
    • Quickly test the code in different versions of jQuery, MooTools, Prototype, etc.
    • Embeddable

    Con:

    • Saving a fiddle saves as a fork, but now you can rebase it.
    • Slower than the other sites
    • No auto-update of code (update-as-you-type)
    • No way to tell who forked your code.
    • No way to turn off specific code windows
    • No LESS, markdown, etc.

    Codepen

    Pro:

    • Fast
    • Easy to use
    • Browse other pens (with previews!) for inspiration
    • Always saves your pen to the base
    • Best social interaction: view forks, comments, who loved it, etc
    • Supports Haml, markdown, Slim, Emmet, SCSS, LESS, SASS, javascript libraries, etc.
    • Embeddable

    Cons:

    JSBin

    Pro:

    • Fast
    • Update as you type coding (toggle-able)
    • Supports markdown & jade, LESS, stylus, CoffeeScript & javascript libraries (biggest selection).
    • Ability to hide specific windows
    • Quickly test the code in different versions of jQuery, MooTools, Prototype, etc.
    • Revision history saved
    • Minimalistic interface

    Cons:

    • No quick dropdowns to select a javascript library – added as script tags in the HTML
    • Not embeddable 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).
    • No way to tidy up the code
    • No code checker (JSHint)

    -–

    I would like to completely switch to Codepen, but I’m sticking with JSFiddle for now for three reasons:

    • Because of the code cleanup button
    • JSHint checker
    • The ability to share minor revisions of the code (revision number in the url increments) without having to fork it.
    # May 6, 2013 at 7:23 pm

    @mottie

    Fiddle now supports emmet for shorthand writing code…

    # May 7, 2013 at 9:15 am

    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.

    # May 7, 2013 at 9:25 am

    @Hugo … thanks for the article ;)

    # May 8, 2013 at 9:52 am

    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”

    Specifically for JavaScript, you can :: http://blog.codepen.io/2013/04/04/auto-run-in-javascript-now-optional/

    # May 8, 2013 at 5:27 pm

    That’s too awesome Chris!! :P

    # August 6, 2013 at 2:15 am

    Just to address the “cons” in jsbin (too :)

    No quick dropdowns to select a javascript library – added as script tags in the HTML

    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).

    Not embeddable

    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)

    # October 16, 2013 at 6:06 pm

    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!

    # December 6, 2013 at 7:26 am

    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.

    # December 6, 2013 at 10:13 am

    No way to disable the “update as you type coding”

    Specifically for JavaScript, you can :: http://blog.codepen.io/2013/04/04/auto-run-in-javascript-now-optional/

    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. : )

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".