Introducing Snippetify!

Question

Snippetify is a script that is designed to make StackSnippets with JS submissions on the main site easy.

Examples

Let's say we are answering a simple challenge to repeat a string N times. A possible JS submission might be:

a=>b=>a.repeat(b)

that is called with the first parameter the string to repeat and the second param (uses currying) is the number of times to repeat that.

Let's say we want that in a stack snippet. Here's the old-fashioned way:

var repeat = 
//actual code
a=>b=>a.repeat(b);


document.getElementById("submit").onclick = function(){
  document.getElementById("output").innerText = repeat(document.getElementById("string").value)(document.getElementById("repeat-count").value);
};

input,button{
  display: block;
}

<input id = "string">
<input type = "number" id = "repeat-count">
<button id = "submit">Submit</button>
<div id = "output"></div>

That's alot of code for just a=>b=>a.repeat(b). If you use Snippetify, you can do this:

Snippetify(a=>b=>a.repeat(b));

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text" data-attribute = "0">
<input type = "number" data-attribute = "1">
<button>Submit</button>
<div data-output></div>

Better, huh! If you pass Snippetify function that accepts 1 argument (all currying functions) and you have more than one input it will know to use currying. But it gets better:

Snippetify(a=>b=>a.repeat(b));

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text" data-attribute>
<input type = "number" data-attribute>
<button>Submit</button>
<div data-output></div>

If you want your parameters passed in order of the <input>s provided, you can just use data-attribute with no value. But it gets even better:

Snippetify(a=>b=>a.repeat(b));

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text">
<input type = "number">
<button>Submit</button>
<div data-output></div>

Snippetify will use all your <input>s (and <textarea>s) if you don't use data-attribute. Still too much work? Try this:

Snippetify(a=>b=>a.repeat(b));

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text">
<input type = "number">
<button>Submit</button>
<div></div>

You don't need data-output if you would like output to go to the first <div> in the DOM. One final laziness addition (this works only with non-currying functions and text-only inputs):

Snippetify((a,b)=>a + b);

<script src="https://programmer5000.com/snippetify.min.js"></script>

Yep, Snippetify will even create everything for you if it can.

Usage

When you add a code snippet, add this to your HTML (before anything else)

<script src="https://programmer5000.com/snippetify.min.js"></script>

See above for markup needed.

What this post is for

Have any bugs feature requests, or general feedback? Comment or answer below.

Snippetify License

CC0. You can use it in any answer to a code golf challenge.

Source code, etc.

Answer 1

Good intentions, bad idea

While you have good intentions, using an external site to host a bunch of snippets will mean that we cannot rely on it always being there in a few years, because it's neither maintained nor paid for by Stack Exchange.

If whatever domain you use to host this expires in the future, any questions and answers using this method would no longer have working snippets.

Stack Exchange can be contacted about their snippets not working and a fix would be provided, but if we rely on you for all of our snippets, there's no guarantee that you'll be around to provide a fix if something breaks, and you're certainly not paid to fix it. Using the built-in method of creating a stack snippet is the most secure, most reliable method, and that makes it the best choice.

A better alternative to simplify snippet creation would be if you created a snippet or program that could take JS as input and output markup for a working snippet that could be pasted into an answer.

Answer 2

Testing Ground (community wiki)

Because this is a community wiki, anybody can edit this answer, regardless of their reputation.

Note: If you want to use no markup, you must set console to false in the Stack Snippet.

Here is a minified version of the below HTML to include in your posts.

Please only edit anything below this line:

---

// Call Snippetify with the function you want to test as a parameter. 
// If it doesn't work, make sure that you're passing a function and that 
// The Snippetify script is included in the HTML.
Snippetify(a=>a+1);

<script src="https://programmer5000.com/snippetify.min.js"></script> 

<style>
textarea {
    /* border: none !important; */

    /* remove previous comment/replace comment to toggle border on output box 
    (will look like a blank space when no output) */
    overflow: auto !important;
    outline: none !important;

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    resize: none !important;
}
</style> 

<!-- begin inputs -->
<label for="input1">Input 1:<br></label>
<input type="text" name="input1" id="input1">

<!-- you can add more inputs by just copy-pasting and changing
     the 1s to 2s, 3s, etc. -->
<!-- end inputs -->

<button id="submit" style="float: left;">Submit</button><br><br>

<label for="output">Output:<br></label>

<textarea id="output" data-output readonly></textarea>
<div date-output></div>
<p></p>
<hr>