When developing web applications or web pages it is useful to test them out separate to a live web site in order to protect it. Testing tools is one way to go in order to play around with different code, turn off certain features, add others, and see how it works out.
These sandbox tools help provide an alternative testing and learning space so that development servers are not compromised and experiments can take place in a safe environment.
Here are a few of the better coding playgrounds to work with:
Codepen
CodePen is a sophisticated environment to program in HTML, CSS and Javascript. The code editor allows fast previews for the code already entered. It is possible to create new projects, named “pens” by the site, to develop out different projects, part of a project or just a redesigned web page.
ICEcoder
ICEcoder is a browser based code editor, which provides a modern approach to building websites. By allowing you to code directly within the web browser, online or offline, it means you only need one program (your browser) to develop sites, plus can test on actual web servers. After development, you can also maintain the website easily, all of which make for speedy and smart development.
jsFiddle
The jsFiddle development environment allows for code to be entered or copied and pasted into one of four development windows on the web page. The development windows are for HTML code, CSS code, Javascript code and CoffeeScript. Ajax requests for dynamic changing of on-screen options are also considered. There are other options for customization of the features and languages can be switched.
LiveGap Editor
The LiveGap Editor looks more like a true coders html editor than it does a simple sandbox tool. It has a coding window at the bottom of the page and a right sidebar for framework additions. The themes allow the change of appearance to suit the user. Tags can be matched or found. Closing tags are highlighted. Syntax with different coding languages is also recognized and color coded to make it easier to spot the CSS code intermingled with the HTML code.
CssDesk
CSSDesk lets the visitor develop HTML code in the top left pane, the CSS code pane in the bottom left corner tells the browser how to style and format the presentation, and then the main pane outputs the result as a fully rendered web page. A simple, elegant solution.
JS Bin
A simple single windowed approach that can be hosted on any suitable server online. It provides a way to test HTML, CSS and Javascript code and see the output. Switching between coding windows is performed by clicking one of the tabs at the top of the page. The final tab for “Output” is then selected to see what the resulting web page looks like.
Editr
Editr is a more stylized self hosted editor for HTML, CSS and Javascript coders. The package can also be downloaded from GitHub in order to install it on your own server configuration either on a home or work PC, or on a live web server.
Ideone
Add code, compile it and run it via Ideone online interface. The site can handle 40 programming languages so it is very flexible. There is also a useful debugging tool to resolve unexpected issues with the code entered.
Sqlfiddle
SQLFiddle is a web app to test SQL queries for correct syntax. Build the SQL scheme out and see how it looks. The version of mySQL relational database used is shown at the top of the page.
Chopapp
Chopapp is a little different. This has more of a social aspect where a visitor can copy a small chunk of code and solicit feedback from others. This can be useful to get a second pair of eyes on code that isn’t working the way it was intended or is creating an error message that the programmer cannot quite get their head around.
Gistboxapp
Organize GitHub Gists using the Gistboxapp tool. Orgnanize snippets using a label, search using descriptions, and edit the existing code.
D3-Playground
D3 is a tool to play around with Javascript and CSS code.
Codeply
Codeply is a editor that lets you run and preview your HTML, CSS and JavaScript code from any modern Web-browser. You’ve seen this capability in other tools like JSFiddle, Codepen and Bootply. But, Codeply is different because it’s not just a code editor. Codeply makes responsive Web design & development easier by enabling you to leverage the responsive framework of your choice.
