Over the past year, three online Web testing “playgrounds” have emerged which can be quite useful to WordPress and Web developers alike. All three allow users to register and then save their work for later review at no cost. Here are the test environs:
JSFiddle – allows testing in 3 panels: HTML, CSS, and JavaScript
The JSFiddle test environ with 4 panels HTML, CSS, JavaScript plus results.
The HTML panel allows for testing of 6 HTML settings HTML5, HTML 4 Transitional, Strict, plus Frameset and XHTML Strict plus Transitional. Users can also specify the <body> tag attributes, style and onevent actions. Finally for the JavaScript panel developers have the choice of 18 preloaded JavaScript frameworks plus can add an unlimited list of JavaScript and CSS URL resources.
The edit panels for HTML, CSS, and JavaScript are color coded and but without auto-complete functions like in Notepad++ . However, users are given syntax help. The color coding indicates when HTML tags are incomplete. The JavaScript panel has JSHint which flags JavaScript syntax and coding errors. Finally in the CSS edit panel, color coding indicates when a CSS attribute or property is misspelled or the brackets are enclosed. In general this is a solid testing environ
Thus, when reviewing demo code for say jQuery or mootools online it easy to take the source code over to JSFiddle and try out variations on the CSS or JS and .see how the plugin or function performs in different circumstances JSFiddle can really be helpful for what-if testing of Web code. One can start at w3schools and then do more detailed testing at JSFiddle. Finally, when debugging at a users workstation getting the tough nuts often means a a JSFiddle session because all the tools are available … and there is Tidy to clean up the formatting at the end.
Livecoding is like JSFiddle but with 4 panels and instant updates for any changes.
As seen above Livecoding features drawing savvy JavaScript libraries
The big advantage with Livecoding is that the results window responds instantly to changes in any of the 4 panels – HTML, CSS, JavaScript, or JSON. This makes debugging CSS and HTML much more responsive. The biggest drawback to Livecoding is that the JavaScript libraries list is limited and there is no way to add as in the case of JSFiddle additional JavaScript or CSS styling files. This limitation is means that Livecoding is restricted to snippets testing rather than complete page debugging.
However, given that limitation Livecoding is often my favorite place to go to test out recalcitrant CSS or form based JavaScript validations. Yes, smaller chucks of code where I have the the starting snippets and just have to load and go. This is easy in Livecoding as in the other two online testgrounds, because you can save any session and just retrieve at a later date. Like JSFiddle, You also download the Python source and run it on your server.
SQLFiddle – meets a need for online testing of SQL database designs and coding.
SQLFiddle is for database testing. This can be difficult because access to server databases given cyberttacks is transforming from hard to downright difficult as is appropriate. So being able to test SQL queries and other coding detached from the principal database is valuable.
And SQLFiddle provides a fairly robust list of popular databases – MySQL in 3 versions, Oracle, PostGresSQL in 3 versions, SQLite in 4 versions, and SQLServer in 2 versions. Bote there are no-Index or popular Cloud databases like Hadoop, etc. But given that 60% of websites are LAMP based, SQLFiddle has hit amjor need.
Here is how SQLFiddle describe their use cases:
If you do not know SQL or basic database concepts, this site is not going to be very useful to you. However, if you are a database developer, there are a few different use-cases of SQL Fiddle intended for you:
You want help with a tricky query, and you’d like to post a question to a Q/A site like StackOverflow. Build a representative database (schema and data) and post a link to it in your question. Unique URLs for each database (and each query) will be generated as you use the site; just copy and paste the URL that you want to share, and it will be available for anyone who wants to take a look. They will then be able to use your DDL and your SQL as a starting point for answering your question. When they have something they’d like to share with you, they can then send you a link back to their query.
You want to compare and contrast SQL statements in different database back-ends. SQLFiddle easily lets you switch which database provider (MySQL, PostgreSQL, MS SQL Server, Oracle, and SQLite) your queries run against. This will allow you to quickly evaluate query porting efforts, or language options available in each environment.
You do not have a particular database platform readily available, but you would like to see what a given query would look like in that environment. Using SQL Fiddle, you don’t need to bother spinning up a whole installation for your evaluation; just create your database and queries here!
As with the other web testgrounds, the source code for SQLFiddle is available for users or companies that want to setup their own test environ on their servers.
Summary
These are 3 of the most useful free, online test grounds that I have found to date. But there are several others – as seen here. In addition in all the popular web browser Rightmouse click on any Web Page brings up the Inspect Element command option which then shows the element in context with immediate changes possible in the Chrome and Safari browser. But for immediate testing of code snippets and ornery HTML, CSS and SQL problems, these are the tools this developer constantly returns to.