Code Playgrounds: JSFiddle, CodePen, Plunker… 240


code-playground

WHAT

JSFiddle, CodePen & Punker are three of the more popular code playground tools for web development that allow developers to share working web code samples with source code another.

WHY

By allowing others both see your code and run it not only allows you to share your ideas with others but allows others to share their ideas to solutions to problems you may be having with your code.  As they say a picture is worth a 1,000 words, being able to share and run the same code with others is the same concept.

ABOUT

In regards to which tool is best to use I personally go back and forth between the three depending on the need.  As to why or when one tool is better is something that has been blogged about many times over.  One good post highlighting the pros and cons between the tree can be found here:

Plunk, Pen or Fiddle?

EXAMPLE

Below is an example JSFiddle.  In this “fiddle” we demonstrate different ways Css selectors can work.  The content of the fiddle could be a topic in of itself, but this helps illustrate how a fiddle like this can be used to better communicate.

View this on JSFiddle

Here is the same code as a Plunk


Leave a comment

240 thoughts on “Code Playgrounds: JSFiddle, CodePen, Plunker…