Home › Forums › JavaScript › codepen || jsfiddle || jsbin › Reply To: codepen || jsfiddle || jsbin
May 6, 2013 at 6:29 pm
#134290
Mottie
Member
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:
- No way to check revision history (You can just go back a fork in JSFiddle)
No way to turn off specific code windowshttp://blog.codepen.io/documentation/features/full-screen-editing/No way to tidy up the codeYou can. Just select all the code and press SHIFT + TABNo code checker (JSHint)There is! Press Command-Shift-7 on Mac or Control-Shift-7 on PCNot 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/
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 embeddableYes 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.