This project started as a simple “shower thought”. Could I build jsFiddle inside jsFiddle?
After a few minutes of “fiddling”, it was clear that the answer was Yes! Below is the crude code of that first iteration. No idea for how long, but the original fiddle can be found HERE.
Prototype Code
HTML
<button id="run" onclick="runContent()">run</button>
<div class="box">
<div class="col">
<textarea id="html"></textarea>
<textarea id="javascript"></textarea>
</div>
<div class="col">
<textarea id="css"></textarea>
<iframe src="" id="frame"> </iframe>
</div>
</div>
Javascript
var frame = document.getElementById("frame");
var mu = document.getElementById("html");
var js = document.getElementById("javascript");
var css = document.getElementById("css");
function runContent() {
frame.src = "data:text/html;charset=utf-8," + getContent();
}
function getContent() {
return `
<html>
<body>
${mu.value}
<\/body>
<script>
${js.value}
<\/script>
<style>
${css.value}
<\/style>
<\/html>`;
}
CSS
textarea {
height: 300px;
width: 100%;
}
iframe {
position: relative;
margin: 0;
padding: 0;
height: 300px;
width: 100%;
}
.box {
display: grid;
grid-column-gap: 8px;
grid-template-columns: auto auto;
}
.col {
display: grid;
grid-row-gap: 8px;
grid-template-rows: auto auto;
}
Frontend
Now there are some obvious limitations with this implementation. For starters,
there is no syntax highlighting. It is a very crude implementation. But more
important that any of that is that it worked. I was able to effectively
reverse engineer a concept used for many sandbox sites like
jsFiddle
and codepen
. I have been a long time fan
of jsFiddle
and have utilized it to prototype many
projects.
Sandbox(frontend)
With this prototype proofed out, the obvious next step was for me to build my
own prototyping/sandbox application. Using Vue.js
, ace
,
highlight.js
, and other libraries to build out the sandbox implementation.
Markdown
With the sandbox implemented, it was easy enough to create an in-browser markdown editor and renderer.
Backend
Sandbox(backend)
To allow for persisting of sandbox code, I created a backend using
strapi.io. Strapi
is a fantastic headless-CRM for
developing backend APIs very quickly.
Codebox
I thought that it would be nice to extend Bitbrain.life's
functionality to
allow for code compilation and and execution right in the web browser. I built
out a another backend service written in Golang
to facilitate this.
Currently, it supports Golang
, Ruby
, Python
, and Nodejs
. As it is
currently implemented, it should be very simple to add support for other
languages in the future.
Sockbox
Last but not least, I thought it would be awesome to expose a full-fledged
Linux terminal right in the browser. Similar to the codebox
, I created a
backend service that will spin up a docker
container and expose the I/O
to the frontend via WebSockets. I had never had a chance to utilize WebSockets
before so this was a great learning experience for me.
Checkout Bitbrain.life and feel free to send me feedback at reppard@sdf.org.