`See it Work!` links to a JSFiddle-like site for WordPress

[mikeschinkel]

One of the things that has gotten a lot of traction lately is online code "Playgrounds" that allow developers to set up code in the cloud and provide a link to it to allow people to run it.

Here is an article that explains using CodePen:

• https://www.sitepoint.com/cool-things-codepen-javascript/

I think with having this feature I could once again answer questions at these sites — like I used to — and use a "See it Work!" link, and probably get a lot of people's attention. This assumes we can make the process after they click trivially easy on first setup and then beyond trivial every time after that:

• https://wordpress.stackexchange.com/
• https://stackoverflow.com/tags/wordpress

Fields and Files Required

These are the fields and files I envision we might need (one each):

• A URL path to display
• A WordPress version to use
• A WordPress theme to use
• A WordPress username to use
• A must-use plugin file
• A theme template file
• Optional CSS file
• Optional JS file
• A .wpdata file
• No images on free plan (or use URLs from external sources)
• A subset of the project.json file for loading plugins, etc.

Note: .wpdata. is a custom file format I envision where each line is JSON with a table property that indicates which table it populates. The idea would be we'd start with an empty WordPress DB and add-in these data files. Each JSON would also contain a uuid field rather than an ID field so that relationships between records can more easily be managed across databases.

Online User Experience

There would be viewing mode and editing mode. Viewing mode would first spin up a WordPress and display the URL, and then cache the output. This would allow posting this and letting people view them without requiring many resources.

Editing mode would spin up the WordPress site and have a 5 minute "keep-alive" so as long as the user is actively editing, the container would stay up. But if the container goes does they would just have to click a "restart" link and wait for it to reload.

Build User Experience

We would also have a "Build this locally on WPLib Box" link which, when they click would download a zip into their box and add to a special project with a known local domain name that allows switching out these examples easily.

Available playgrounds that I found

• https://play.golang.org/

• https://codepen.io/

• https://jsfiddle.net/

• https://www.jsnippet.net/

• http://cssdeck.com/

• http://jsbin.com/

• http://dabblet.com/

• http://plnkr.co/edit/

• https://repl.it/

• https://codeclippet.com/

• https://bootsnipp.com/

• https://js.do/

• https://ideone.com/

• http://sandbox.onlinephpfunctions.com/

• http://sandbox.onlinephpfunctions.com/

• http://phpfiddle.org/

• http://codepad.org/

• http://www.rendera.org/

• https://liveweave.com/

• https://codesandbox.io/

• http://phrogz.net/js/d3-playground/

• https://plnkr.co/

• https://esnextb.in/

• https://www.jdoodle.com/

• http://code.reloado.com/

• https://html.house/

• http://www.tutorialspoint.com/codingground.htm

• https://thimble.mozilla.org/en-US/

• http://fiddlesalad.com/

• http://feditor.tech/

• https://codebunk.com

• https://tio.run/

• https://www.codeply.com/

• https://anymod.com/

• https://htmlpen.com/

Online IDEs (just for reference)

• https://aws.amazon.com/cloud9/
• https://codeanywhere.com/
• https://codenvy.io/
• https://www.koding.com/
• http://codemagic.gr/
• https://stackblitz.com/
• https://codeboard.io/
• http://codiad.com/
• https://www.sourcelair.com

Offline (these we might be able to learn from):

• https://webmakerapp.com/
• http://michaelsboost.tk/kodeWeave/
• http://www.progweb.info/codeexec/

Coding Online

• https://glitch.com/