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.
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.
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:
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.
Here is the same code as a Plunk