Tutorials – 7 of the Best Code Playgrounds

789-code-playgrounds-codepen

A variety of code playgrounds have appeared during the past couple of years. The majority offer a quick and dirty way to experiment with client-side code and share with others. Typical features include:

  • color-coded HTML, CSS and JavaScript editors
  • a preview window — many update on the fly without a refresh
  • HTML pre-processors such as HAML
  • LESS, SASS and Stylus CSS pre-processing
  • inclusion of popular JavaScript libraries
  • developer consoles and code validation tools
  • sharing via a short URL
  • embedding demonstrations in other pages
  • code forking
  • zero cost (or payment for premium services only)
  • showing off your coding skills to the world!

The best feature: they allow you to test and keep experimental snippets code without the rigmarole of creating files, firing up your IDE or setting up a local server. Here are seven of the best …

JSFiddle

789-code-playgrounds-jsfiddle      JSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic today, but still offers advanced functionality such as Ajax simulation.

CodePen

789-code-playgrounds-codepenThe prize for the best-looking feature-packed playground goes to CodePen. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding. The PRO service provides cross-browser testing, pair-programming and teaching options for just $9 per month.

CSS Deck

789-code-playgrounds-cssdeckThis may be named CSS Deck, but it’s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen (I don’t know who influenced who!) but you might prefer it.

JS Bin

789-code-playgrounds-jsbinJS Bin was started by JS guru Remy Sharp. It concentrates on the basics and handles them exceedingly well. As far as I’m aware, it’s also the only option which offers a JavaScript console. Recommended.

 

 

 

 

 

Dabblet

789-code-playgrounds-dabbletAnother early playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou but it’s recently received JavaScript facilities. It looks gorgeous and has one killer feature — browser CSS prefixes are added automatically. There’s no need to enter that -webkit, -moz and -ms nonsense yourself.

Tinkerbin

789-code-playgrounds-tinkerbinTinkerbin is an alpha release and one of the simpler options here. It may not offer features above and beyond the alternatives but it’s attractive and functional.

 

 

 

 

 

Liveweave

789-code-playgrounds-liveweaveLiveweave is slightly unusual in that it places your HTML, CSS and JavaScript into a single file. It’s not possible to share your creation, but you can download the result and store or open it locally. It’s ideal for quick and dirty private experimentation.

 

 

 

 

I guess I missed your favorite?…

From http://www.sitepoint.com/