

JsFiddle alternative in 56 lines of Ruby. Supports Coffeescript/Sass/Haml. - geelen
http://2879097.run-a-gist.herokuapp.com/

======
drostie
In Firefox 12 I get in Firebug the error message :

    
    
        Error: Showdown is not defined
        (n)@http://2879097.run-a-gist.herokuapp.com/application.js:8
        d((function ($http) {var showdown;showdown = new Showdown.converter;return {restrict: "E", compile: function (tElement, tAttrs) {tElement.html("<article class='markdown' ng-bind-html-unsafe='markdown(" + tAttrs.model + ")'></article>");return function (scope, element, attrs) {scope[tAttrs.model] = "";$http.get(attrs.src).success(function (data) {return scope[tAttrs.model] = data;});return scope.markdown = showdown.makeHtml;};}};}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:26
        ((function ($http) {var showdown;showdown = new Showdown.converter;return {restrict: "E", compile: function (tElement, tAttrs) {tElement.html("<article class='markdown' ng-bind-html-unsafe='markdown(" + tAttrs.model + ")'></article>");return function (scope, element, attrs) {scope[tAttrs.model] = "";$http.get(attrs.src).success(function (data) {return scope[tAttrs.model] = data;});return scope.markdown = showdown.makeHtml;};}};}),0,[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:35
        l([object Array],(function (a) {"use strict";try {var f = b.invoke(a);if (P(f)) {f = {compile: A(f)};} else if (!f.compile && f.link) {f.compile = A(f.link);}f.priority = f.priority || 0;f.name = f.name || d;f.require = f.require || f.controller && f.name;f.restrict = f.restrict || "A";e.push(f);} catch (j) {c(j);}}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:6
        ([object Object],(function (a, c) {"use strict";b.error.apply(b, arguments);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:35
        d((function (b, c) {"use strict";var e = [];l(a[d], function (a) {try {var f = b.invoke(a);if (P(f)) {f = {compile: A(f)};} else if (!f.compile && f.link) {f.compile = A(f.link);}f.priority = f.priority || 0;f.name = f.name || d;f.require = f.require || f.controller && f.name;f.restrict = f.restrict || "A";e.push(f);} catch (j) {c(j);}});return e;}),[object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:27
        ([object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:28
        c("markdownDirective")@http://code.angularjs.org/angular-1.0.0rc10.min.js:25
        z([object Array],"markdown","E",(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:43
        G([object HTMLUnknownElement],[object Array],[object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
        w([object Proxy],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
        w([object Proxy],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
        w([object Object],(void 0),[object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
        o([object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:36
        ([object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
        ((function () {"use strict";b.data("$injector", g);c(b)(a);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:83
        ((function () {"use strict";b.data("$injector", g);c(b)(a);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:83
        ([object Object],o,[object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
        d((function (a, c, g) {"use strict";a.$apply(function () {b.data("$injector", g);c(b)(a);});}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:26
        mb([object Object],[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
        dc([object HTMLDocument],mb)@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
        ()@http://code.angularjs.org/angular-1.0.0rc10.min.js:155
        a([object Event])@http://code.angularjs.org/angular-1.0.0rc10.min.js:111
        (a,0,[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:22
        l([object Array],(function (a) {"use strict";try {a.call(b, c);} catch (e) {}}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:6
        ([object Event])@http://code.angularjs.org/angular-1.0.0rc10.min.js:22
    
        http://code.angularjs.org/angular-1.0.0rc10.min.js
        Line 58

------
gbadman
__Gratuitous self-promotion will follow __

I made a website with some of the same goals in mind that takes it quite a bit
further than this. That being said, I can't even come close to pretending its
less than 56 lines of code.

Check out: <http://plunker.no.de>

Some neat features:

* Live collaboration using 'streams'

* Plunks run as first-class web citizens letting AJAX and company work out of the box

* Syntax hilighting using ajax.org's amazing ace editor

* jsHint

* Live compilation/rendering of coffee-script/markdown and I forget what else

The full source of the running app is at: <https://github.com/ggoodman/stsh>

Also a ground-up rewrite on <http://plnkr.co> has its code on:
<https://github.com/filearts/plunker>

~~~
woodall
+1 for Plunker.

It confused me at first, but if you want to start a new blank plunk go to
"Editor" or click here: <http://plunker.no.de/edit>

The UI is kind of clunky.

~~~
gbadman
Clunky?! I'm only surprised that you say that because one of my goals was to
try and keep the ui out of the way. I'm still trying to think of a way to have
all the necessary elements while staying minimal.

Do you prefer its look when the 'responsive' styles kick in?

~~~
woodall
I just tried to use the editor again; I was going to open jsfiddle but said
why not. There is no way to create a new file. I remember a while back you
could at least preload a bootstrap template. All in all, I still like the
editor interface but there needs to be a few controls.

The only issue with a 'clunky ui' is the homepage but that might just be a
side effect of bootstrap.

On that note, I'd also like to be able to load more frameworks than just
BootStrap. Here are a few suggestions:

[1] <http://foundation.zurb.com>

[2] <http://www.getskeleton.com/>

[3] <http://blueprintcss.org/>

[4] <http://960.gs/>

</featurecreep>

~~~
gbadman
Hello woodall, you can add a file by clicking the plus button in the bottom
left of the screen. If that button doesn't appear for you, then that's a whole
other issue. Please let me know. Similarly, the minus button removes files.
Double-clicking a filename lets you rename it.

Edit: Just noticed how unintuitive the position of the +/- buttons are. I'll
see what I can do for Plunker 2.0

------
minikomi
There's also <http://bl.ocks.org/> which is a similar concept I believe.

~~~
geelen
That's awesome! I wish I'd seen that before spending all day... Actually nah,
it was fun!

~~~
minikomi
Yeah, the more the merrier!

------
vaughan
Just discovered GoodFilms! Brilliant idea - I will be back often. I've felt a
similar frustration with jsFiddle not supporting Coffee+friends so kudos for
that one too.

~~~
sa1f
<http://fiddlesalad.com/> < Supports HAML, SASS, Coffee and many others. Not
as clean as jsfiddle, but makes up for it with its features. Oh and there's
documentation too.

------
protolif
This is pretty clever. Were you trying to code golf, or did that just sortof
happen?

~~~
geelen
A bit by accident, but then I realised I was in <80 lines and decided to
compact it where I could. I wanted to keep it fairly readable, though, so
didn't go too far.

