jsbin-jsfiddle-or-codepen-which-one-to-use-and-why

冷不防 2022-08-22 05:52 191阅读 0赞

There are lots of css – js playgrounds now in the market, and the most popular ones are [JSbin ][JSbin](by Remy Sharp), [JSfiddle][] (by Oskar Krawczyk), [codepen ][codepen](by Chris Coyier, Tim Sabat and Alex Vasquez). So sometimes it become a confusing question which one to use; and more importantly why and when?

Let’s compare these three today and find out which one can be the most suitable one for you. So, first of all let’s compare the features of these three.

## Feature comparison table ##

<table style="margin:0px 0px 25px; padding:0px; border:2px solid rgb(241,244,246); font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline; border-collapse:collapse; border-spacing:0px; width:697px"> 
 <tbody style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> &nbsp;</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> <span style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline">JSbin</span></td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> <span style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline">JSfiddle</span></td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> <span style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline">Codepen</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Live Output</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No (In Pipeline)</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> HTML pre-processor</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Markdown, Jade</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Markdown, Jade, Haml, Slim</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> CSS pre-processor</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> LESS</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> SCSS</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> SCSS, SASS, LESS, Stylus</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> JS pre-processor</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> CoffeeScript, TypeScript, Traceur, JSX</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> CoffeeScript</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> CoffeeScript, LiveScript</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> CSS libraries</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Normalize</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Normalize, Reset</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> JS libraries</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 40+</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 30+</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 8</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> External file add</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Manual</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Easy</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Very Easy</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Keyboard Shortcuts</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Account</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Free</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Free</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Free + Paid</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Like, Comment, Follow</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Fork</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Private works</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Paid</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Free</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Paid</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Tags</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Panel Hide</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes (minimizable)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Error &amp; Warnings</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Only JS (Real time)</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Only JS (Not real time)</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> HTML, CSS, JS (Not real time)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Collaboration</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Very good and free</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Good but paid</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Theme</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Dummy Ajax</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Bracket Highlight</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes (Customizable)</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Auto end bracket</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Line Numbers</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes (Customizable)</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Speed</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Very fast</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Slow</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Fast</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Embedding</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> SEO friendly</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Download</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Locally Installable</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> Yes</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
   <td style="margin:0px; padding:7px 15px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:undefined; line-height:inherit; font-family:inherit; vertical-align:baseline"> No</td> 
  </tr> 
 </tbody> 
</table>

These are the main features provided by these three playgrounds. So according to your requirements you can choose which one is the best for you.

## My Personal Recommandation ##

### Why JSbin ###

1.  It is fast, light weight, windows can be hidden and shown easily. So it is very good for quick works. Especially for showing someone a quick demo or to teach something JSbin is the best.
2.  Good for embedding in your site. Because of window hiding and showing feature, I prefer JSbin over JSfiddle and codepen to ember in your site. Your visitors can easily view the output as well as the code and compare at the same time.
3.  It saves the history, so you can revisit your previous work for a particular bin.

### Why JSfiddle ###

1.  I like the collaboration feature of jsfiddle. I think for any collaborative work you also will like this feature.
2.  Managing your work is very easy. You can make your public and private fiddles very easily without paying anything.
3.  Creating dummy AJAX request is also another feature. Though for dummy ajax you can use many tricky ways, but JSfiddle provides a easier solution.

### Why Codepen ###

1.  Preview feature is what I like there. If someone enters in your profile he can see the preview of your public pens. So for portfolio making I will prefer codepen.
2.  You can access other pens which will motivate you and give you more ideas. It’s good for learning too.
3.  It is sort of a community. These forking and commenting really help us to grow.

## Cons of them ##

I’m not mentioning any paragraph or table for the pros; cause, the feature table itself says about the pros of each of them. Now cons are something which play their role to hate one. So here are few cons of the playgrounds.

### JSbin cons ###

1.  It adds the libraries inside the script which is annoying.
2.  You can’t save the original bin.
3.  All settings are not exposed in user interface. (In pipeline. Will be added soon)
4.  Once you make a bin public, then it’s really hard to make to private. You have to raise it as an issue to them and they will resolve manually.
5.  You can’t delete a bin once you save it, if you are not logged in.

### JSfiddle cons ###

1.  Hitting the run button everytime is frustrating if you are testing a small snippet. Though they are planning to include the auto run feature; I hope it will be added soon.
2.  The site is little heavy weight and doesn’t run as fast as the other two.
3.  No way to see who have forked your fiddle.
4.  Code windows are not at all user friendly in JSfiddle. You can’t hide them, can’t even minimise.

### Codepen cons ###

1.  It’s not 100% free and I always like free things. ![:P][P]
2.  No way to revision the history.
3.  All pages doesn’t have URL hashing. You have to be a little tricky, otherwise have to click the next button again and again to reach to a pen.
4.  The result window has specific width and limited height.

## Conclusion ##

It’s not possible that you will find all the features in a single playground. They are different and they has to be. Otherwise there is no meaning of their existence. From the feature table given above you can decide which things are necessary for you and in what conditions and can choose your suitable js/css playground. They all are good in some field and also have cons in some situations. Consider all of them and choose your one smartly.

[JSbin]: http://jsbin.com/
[JSfiddle]: http://jsfiddle.net/
[codepen]: http://codepen.io/
[P]: http://voidcanvas.com/wp-includes/images/smilies/icon_razz.gif

jsbin-jsfiddle-or-codepen-which-one-to-use-and-why

发表评论取消回复

还没有评论，来说两句吧...

相关阅读