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.

• Okx: Have you posted this on mother meta?
• Okx: It may be, yeah.
• Riker: @programmer5000 I'd wait for a bit, see how it's received here.
• Riker: Can we make a community wiki answer to this post for testing purposes? or can I just make a non-community wiki for me to screw around with?
• Riker: Are my edits to the answer okay? I've tried to make a better UI and minified version.
• mbomb007: I don't think this is a good idea, because then every snippet using this method will be dependent on your website. A much better solution would be to create a snippet that takes JS code as input and outputs the SE markup for the snippet to include, or just use the existing method. After all, SE is more secure.
• Geobits: Not only is SE more secure, but also more likely to still be functional in a year, or two, or three. Personal domains like this go bad all the time, and breaking a large number of answers all at once would be a Bad Thing.
• mbomb007: @programmer5000 But someone would still have to pay for hosting it. And there's no guarantee that'd be happening in the future. Stick with what SE provides.
• user2428118: Won't Snippetify being GPL licensed mean that all snippets using it must become GPL-licensed as well? (Assuming that calling Snippetify with some code counts as "linking".) (See under "disclose source" here.)
• Matthew Roh: If we could do that truly well, Dennis should've made TIO: Stack snippets edition already.
• Downgoat: Might I reccomend adding babel? Seems like you're pollyfilling a bunch of things so why not syntax? :)
• Neil: Output to a <pre> would generally be more useful, but especially for ascii-art.
• David Archibald: Perhaps make the script run on submit and encapsulate it in a form for semantics and accessibility.
• David Archibald: I've added some more things in the chatroom
• Neil: @DavidArchibald <form>s are blocked in Stack Snippets in browsers that support frame options.

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>

• user41805: Why doesn't the output textarea show anything?
• user41805: Those keystrokes don't do anything for me (Cmd + F5 opens VoiceOver, but otherwise yeah). So what are these keystrokes supposed to do?
• user41805: It works now :)
• Matthew Roh: Hmm, We could use Snippetify(Snippetify(a=>a)) to make a Snippetifier with the code given in the input, right?
• David Archibald: Can I fix some of the formatting and grammar in the first few sentences @Riker?
• Riker: @DavidArchibald sure, feel free.