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.

  • Have you posted this on mother meta? – Okx Apr 11 '17 at 15:38
  • @Okx no, would it be useful on other SE sites? – programmer5000 Apr 11 '17 at 15:39
  • It may be, yeah. – Okx Apr 11 '17 at 16:00
  • 3
    @programmer5000 I'd wait for a bit, see how it's received here. – Riker Apr 11 '17 at 16:03
  • 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 Apr 11 '17 at 16:04
  • @Riker Added in. – programmer5000 Apr 11 '17 at 16:15
  • Are my edits to the answer okay? I've tried to make a better UI and minified version. – Riker Apr 11 '17 at 16:49
  • @Riker yep, it looks nice. – programmer5000 Apr 11 '17 at 17:31
  • 8
    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. – mbomb007 Apr 11 '17 at 20:36
  • 7
    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. – Geobits Apr 12 '17 at 10:16
  • 1
    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.) – user2428118 Apr 12 '17 at 15:49
  • 1
    @user2428118 it is now CC0. – programmer5000 Apr 12 '17 at 15:56
  • 1
    Might I reccomend adding babel? Seems like you're pollyfilling a bunch of things so why not syntax? :) – Downgoat Apr 13 '17 at 2:10
  • 2
    Output to a <pre> would generally be more useful, but especially for ascii-art. – Neil Apr 13 '17 at 8:46
  • 1
    @DavidArchibald <form>s are blocked in Stack Snippets in browsers that support frame options. – Neil Apr 17 '17 at 19:17

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.

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>

  • Why doesn't the output textarea show anything? – Cows quack Apr 12 '17 at 10:07
  • @KritixiLithos it is a bug in my script, fixing... – programmer5000 Apr 12 '17 at 11:09
  • @KritixiLithos I fixed a bug in my script, press Control / Command + F5 to ensure the latest version is fetched. – programmer5000 Apr 12 '17 at 12:22
  • Those keystrokes don't do anything for me (Cmd + F5 opens VoiceOver, but otherwise yeah). So what are these keystrokes supposed to do? – Cows quack Apr 12 '17 at 12:30
  • @KritixiLithos Cache-bypassing reload. Clearing your cache and reloading normally should work. – programmer5000 Apr 12 '17 at 12:36
  • It works now :) – Cows quack Apr 12 '17 at 12:38
  • Hmm, We could use Snippetify(Snippetify(a=>a)) to make a Snippetifier with the code given in the input, right? – lol Apr 13 '17 at 14:42
  • Can I fix some of the formatting and grammar in the first few sentences @Riker? – David Archibald Apr 17 '17 at 1:10
  • @DavidArchibald sure, feel free. – Riker Apr 17 '17 at 1:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .