How to choose the appropriate code playground to your project or your code ?

September 30, 2013 | Comment

A variety of online code editor have appeared during the past couple of years. I classify it to two categories : the code playground for HTML, CSS and Javascript and the online code editor and compiler for Javascript and other languages like PHP, Ruby and Java.

Code playground

A code playground is an online tool to test, to stock and to share source code especially for coding in HTML, CSS and/or Javascript. The list of public codes are usually viewed in a gallery , it offers a quick way to experiment with client-side code and share it with others. Typical features include :

  • Rich HTML, CSS and JavaScript code editor and nice syntax highlighting.
  • HTML preprocessors,CSS preprocessors, Javascript preprocessors and implementation of popular CSS and JavaScript libraries.
  • Multiple view and separated HTML, CSS, Javascript files.
  • Real time collaboration with chat and comment, and codecast system.
  • Developer console, live reload output and code validation tools.
  • Sharing code via GIST, a short URL, facebook, twitter , google plus and embedding demonstrations in other pages.
  • User account with private or public code view.
  • Code forking.
  • Zero cost.
  • Sharing and showing your coding skills to the world in a gallery.

I compare some playground in this table. And I detail here the specific features of them :

  • JSFiddle : Oriented to test Javascript code with a wide large of Javascript library , the collaboration feature includes live audio chat.

  • CSSdeck : The two realtime collaboration mode ( with chat mode ) of this tool are very special. The realtime collaboration which allow all the collaborators editing code in realtime and see it rendering on all devices or nodes and the realtime teaching which lets the code owner only to write code and the collaborators to watch the code in realtime and to see the output area for realtime rendering. The codecast system is very useful for learning and teaching.The code owner can record anything that he types in HTML/CSS/JS codeboxes.And other people will be able to playback that in a video-style and understand exactly how he created his stuff.

  • JSbin : JSbin has a javascript debugging feature with a console view to enter the data and the output view to see the result.It has a large choice of CSS and Javascript libraries. User can add a custom library to JSBin library drop down. Not only JSBin includes live rendering in the main window but allows user to remotely render on any other device or browser. Ajax request is tested with the tool. User can host the tool on his personnal server.

  • Codepen : With this tool , user can enter many external resources ( css files , js files, html files and pen also). The tool has a color picker tool with his css file view , it has also a codepen bookmark to move code from another site over to a Pen on CodePen.Codepen is oriented to a social network tool with some features like : following author, commenting code and user like mode.

  • Dabblet : Dabblet is CSS-focused tool and support Javascript.

  • Plunker : It seeks to encourage users to work together on their code with the real-time collaboration system. It has a simple search to find and add libraries , user can add new file in his project.

  • Liveweave : A good tool to test Javascript with some basic JS libraries with HTML5 and CSS3 , it disposes a palette and color lab and a javascript real-time validation to debug automatically the code.

  • JSDo.it : It has also a social network system : following and follower members , user like mode , sharing code with social network and discussion about the code. A good feature of this tool is the possibility to have a category to classified the code result. There is a smartphone preview option for the result. User can upload images and files. This tool is a favorite for Javascript coders because every jsdo.it code instance become a new Javascript library and integrated in an another code of someone else.

  • Editr : It is a code playground application for personnal hosting. It is possible to edit multiple file in a single editr instance.

  • jHere : A simple tool to test HTML/CSS/Javascript code , the user can call external files to link files to his code.

  • Playground.html5rocks : A good tool to learn HTML/CSS/Javascript API with debugging mode. Many examples of code and tutorials are disponible.

  • Thimble : A basic playground for a beginner, it is often used to teach HTML and CSS for kids.

  • Practicode : It is like Thimble but some code snippets exists to test HTML and CSS.

In my opinion , the choice of the playground depends on the type of code :

  • If the aim is to search , to show and to share ‘Javascript code skills’ choose JSDO.it , JSBin and Plunker (without Coffeescript). Liveweave and JsFiddle are also a good alternative for JS coders. JsFiddle has a collaboration tool.
  • If the aim is to show and share ‘CSS code skills’, people choose Codepen and CSSdeck because of their multiple CSS preprocessor. Dabblet is very useful to test rapidly CSS code.
  • If the aim is to test quickly simple personal code , jHere and HTML5rocks is very helpful.
  • And finaly Practicode and Thimble is a good tool to begin coding in HTML and CSS.

Online code editor and compiler.

An online code editor and compiler for differents languages with debugger and compiler function.

  • Cloud9 : Write, run, and debug the code (only Javascript/Node.js applications can make use of the debugger).Javascript/Node.js, Python, Ruby, and Apache+PHP applications are supported. Users can collaborate on their workspaces publicly, or keep them private.

  • Ideone : Compile source code and execute it online in more than 60 programming languages with a mobile version. Possibility to have a private or public code.

  • Rextester : Support 27 languages , Java, C# , SQL Server and Python are often tested in the tool. Live collaboration and personal code wall is also available.

  • Writecodeonline : Test PHP code or Javascript code online.

  • Codepad : An online code compiler and interpreter with a simple collaboration tool supporting 13 languages.

Otherwise ,many online code editor supporting many languages and accessible with different types of devices exist but without compilator system. The most popular of them are : Codeanywhere, CodeMirror and Squadedit.

comments powered by Disqus