☕ 5 min read
An interactive playground is basically an online IDE which allows you to do some front-end development (HTML, CSS and JS most of the time) and visualize the result.
You can also save and share your code with most of them, which leads to a bunch of practical uses:
code debug, as the environment allows you to reproduce a bug or non-desired effect and to isolate the root cause. That’s why such tools are specially appreciated by developers.
teaching concretely, which is used by websites such CodeSchool as they developed powerful live challenges to put into practice what you just learned.
This was a nice way to get into the swing. Now let me present you a non-exhaustive overview of web playground I know and like so far.
Very elaborated, it can interpret Gist directly which is particularly nice for those who use it.
Gist is a quick and efficient way that Github proposes to share git versionned code snippets. JSBin can show you directly in your browser the code output so you can modify and save a new version of the Gist.
jsFiddle works more or less with the same principles, witha bit different UI.
Bonus point: HTML is reduced to the strict minimum, there is no need to specify the
<head> part, nor the doctype. Your code will directly be injected into the
<body>. You can still configure all of this on the different sections of the sidebar.
Codepen is another popular example of interactive playgrounds. It comes with a different styling approach and a well-established business model. Indeed, CodePen has a PRO version which allows you for instance to give a real-time class or to code all together with collegues, simultaneously, in live.
CodePen offers a bunch of interesting features, preprocessors use including. You should note that if you login with your Github account, your Pens will automatically be converted as Gists in your account. And, by the way, did I say that modification are visible in real-time?
On the flip side, you must be connected if you want to integrate Pens into websites, which doesn’t mean you have to create a CodePen account if you already have a Github one. A lot of CodePen features go far further projects I mentioned before, but they are PRO-features (business is business, which is really understandable here).
Under his nicely designed UI, dabblet also offers a bunch of features such as real-time visualisation, inline previewers which are definitely useful to visualize CSS properties (lengths, colors, effects, …) and the native use of -prefix-free, the ultimate luxury for any CSS developer. You can use CSS3 properties without thinking about prefixes issues as it deals with it when necessary.
There’s tons to give enough environments to please anyone. Each developer can choose the solution which fits the most its needs, the one he likes and seduced him the most. Just like IDE, you can give each of them a try and decide by yourself which tool is the best for you.
I personnaly used jsFiddle a lot until then…
… I keep an eye on JSBin, but I never felt the need to change for it yet…
… CodePen doesn’t fit my needs, even though I find it cool…
… and dabblet is my coup de coeur I recently discovered. It’s not as mature as the others but already has remarkables assets which justify the try.