Experimental cloud-based html/js/css editor
filearts / plunker_www Goto Github PK
View Code? Open in Web Editor NEWThe public-facing website for http://plnkr.co
License: MIT License
The public-facing website for http://plnkr.co
License: MIT License
Any plans on making the plunks show up in google? I personally have never seen a plunk come up in any search results.
I would be willing to help with this if so. I feel it would be a worthwhile experience.
like jsbin/jsfiddle ;)
with #25 it can be useful to demonstrate compiled languages
Hello,
I'd like to make a tiny utility written in Node.JS that will submit directory contents to plunker, like https://github.com/defunkt/gist does for gist.
Is there anything that already does the job?
This is a feature request to add the ability to link to a past version of a particular plunk.
I asked about this on webapps.stackexchange, but it appeared that this was not yet a feature.
For example, for this plunk, all three versions resolve to the same url:
http://plnkr.co/edit/ZudJcIak5sAWuiq3b1Hu?p=preview
Perhaps you could add a query parameter to the end of the url ?v=1
and then use that to revert to past versions. Here's some sample code (although there might be more things in play):
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function revertVersion() {
var urlVersion = getParameterByName('v');
var numVersions = $scope.session.plunk.history.length
if (IsNumeric(urlVersion ) && urlVersion <= numVersions) {
// invert because revs listed in descending order
var index = numVersions - urlVersion + 1;
$scope.revertTo(index);
}
}
When I open http://plnkr.co/edit/ - I see catalogue at the right side.
When I open http://plnkr.co/edit/gist:6982344 - I also see catalogue at the right side INSTEAD of the preview which I actually want.
All online sandboxes: jsfiddle, jsbin, codepen etc are showing code + preview, because that's what people are coming for.
Catalogue is an addon, which may be needed, yes, but preview is a de-facto standard and much more sane starting point.
Now I'm trying to move a big JS tutorial project to plunker and I see that people would really prefer to get a preview by default.
Please consider changing to preview as the starting point.
http://plnkr.co/edit/wmuAWw?p=options
a simple barebones index.jade just renders as internal server error
How about to add "charset: utf-8" in Content-Type
header from server?
Right now, there's no charset from server, just content-type, so browser treats it as charset=us-ascii
.
Maybe use utf-8
as a widespread and useful default?
the embed frontend allows linking to a specific file, but the editor UI doesn't seem to have something like that
HI, I think it would be better if I can change or delete a template I saved in the templates tab, or even have versions of the same template, so basically a template will be a regular plunker saved but marked as template so the user can perform the regular plunker actions on it (change delete...).
Hi,
Downloading a .zip
of a Plunk from the site always seems to result in a file named Unknown
when downloading with Safari.
The "preview in separate window" works great for testing code on a mobile device. It would be awesome to have a QR code I could easily scan on the screen to quickly open that window on the phone.
Clicking the Mailing List link on http://plnkr.co/ loads a blank plunk instead of the Plunkr Google Group
plnkr.co Site Down from nearly 2 hours (I personally have been observing).
http://www.isitdownrightnow.com/plnkr.co.html
Please Resolve this....
It is bad. I want to see clear console for testing of my project.
Our lovely template, AKA http://plnkr.co/edit/gist:3510140
works good on chrome, but on firefox, it is missing the ng-app='plunker'
on the html tag.
Weird bug :P
Probably an icon next to the filenames (for those to be compiled), once clicked, the buffer becomes a readonly one showing the compiled source.
The server is not responding...
Is there any issue with Plunker?
Hi, when trying to use plunker on my Samsung smartphone, I can type into the editor just fine but the backspace/ delete key doesn't erase a character like it should. I've tried downloading some different keyboard apps for my device just to make sure it wasn't my device, but the problem persists.
Thanks for your wonderful web development environment. I use it all the time on desktop and hopefully all the time with my phone if this issue can be resolved.
Thanks!
According to the code, lot's of errors on permalinks.
So if you add "bootstrap-css" for example in your .html and you click on the wand again, a random element will get an extra indentation.
As mentioned here: https://twitter.com/marcfallows/status/552475767503085568
I can create a Plunker with the "@" symbol in the file name. The Plunker runs as expected, but I can't save.
Repro steps:
EXPECTED: Plunker to save
ACTUAL: Get an error "Save failed: Save failed"
Hey, how about integrating jsDelivr.com to Plunker too?
It hosts even more files and could be useful as a good alternative.
Thanks
Hi,
When opening the embedded version of my plunk, it reflects a very old version of my javascript code and project. How do I get the embedded version to load the current version? Am I missing something or is this a bug?
Thanks! :)
I was wondering if I could refresh the preview pane while I am within editor.
currently I can use Ctrl+Enter to run and stop. (two steps, and pane hides and comes back)
I have seen there is a refresh button in the preview pane that uses refresh() function, can we bind it to a shortcut?
I am sorry, if it seems noob, I am not very familiar with .jade and .coffee scripts.
Hi,
I want to use plnkr to let users instantly edit examples from my site. These examples are stored on my site because they may contain binary files.
I've read about POST /edit/ in Readme and the source. But how am I supposed to use it?
If I POST using XHR then I get a page... Do you mean that I must embed it somehow?
I can't submit < form method="POST" action="http://plnkr.co/edit/">, because browsers do not allow to pass JSON with it. If I could, I would just create a form and submit it.
So, how am I supposed to use the /edit/ functionality? Maybe it should be fixed it for this scenario or I'm not getting something?
I've just encountered a bug in a dev version of chrome seemingly unrelated to plnkr that caused me to reload multiple times.
The session restore option only appears on the first reload, but any reloading after that doesn't give the option.
Would it be better if the session restore was still available until explicitly declined or until properly saved?
Chrome Version 35.0.1916.99 beta; no extensions enabled
When opening the editor, and then clicking a package version to add (not actually adding the package though), after a few seconds I get this (infinitely):
Uncaught object editor-0.7.27.js:2
s.$digest editor-0.7.27.js:2
s.$apply editor-0.7.27.js:2
(anonymous function) editor-0.7.27.js:26
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function (){s=l(o);var e,t;if(y(s))if(r(s))for(n!==c&&(n=c,h=n.length=0,a++),e=s.length,h!==e&&(a++,n.length=h=e),t=0;e>t;t++)n[t]!==s[t]&&(a++,n[t]=s[t]);else{n!==u&&(n=u={},h=0,a++),e=0;for(t in s)s.hasOwnProperty(t)&&(e++,n.hasOwnProperty(t)?n[t]!==s[t]&&(a++,n[t]=s[t]):(h++,n[t]=s[t],a++));if(h>e)for(t in a++,n)n.hasOwnProperty(t)&&!s.hasOwnProperty(t)&&(h--,delete n[t])}else n!==s&&(n=s,a++);return a}; newVal: 284; oldVal: 282"],["fn: function (){s=l(o);var e,t;if(y(s))if(r(s))for(n!==c&&(n=c,h=n.length=0,a++),e=s.length,h!==e&&(a++,n.length=h=e),t=0;e>t;t++)n[t]!==s[t]&&(a++,n[t]=s[t]);else{n!==u&&(n=u={},h=0,a++),e=0;for(t in s)s.hasOwnProperty(t)&&(e++,n.hasOwnProperty(t)?n[t]!==s[t]&&(a++,n[t]=s[t]):(h++,n[t]=s[t],a++));if(h>e)for(t in a++,n)n.hasOwnProperty(t)&&!s.hasOwnProperty(t)&&(h--,delete n[t])}else n!==s&&(n=s,a++);return a}; newVal: 286; oldVal: 284"],["fn: function (){s=l(o);var e,t;if(y(s))if(r(s))for(n!==c&&(n=c,h=n.length=0,a++),e=s.length,h!==e&&(a++,n.length=h=e),t=0;e>t;t++)n[t]!==s[t]&&(a++,n[t]=s[t]);else{n!==u&&(n=u={},h=0,a++),e=0;for(t in s)s.hasOwnProperty(t)&&(e++,n.hasOwnProperty(t)?n[t]!==s[t]&&(a++,n[t]=s[t]):(h++,n[t]=s[t],a++));if(h>e)for(t in a++,n)n.hasOwnProperty(t)&&!s.hasOwnProperty(t)&&(h--,delete n[t])}else n!==s&&(n=s,a++);return a}; newVal: 288; oldVal: 286"],["fn: function (){s=l(o);var e,t;if(y(s))if(r(s))for(n!==c&&(n=c,h=n.length=0,a++),e=s.length,h!==e&&(a++,n.length=h=e),t=0;e>t;t++)n[t]!==s[t]&&(a++,n[t]=s[t]);else{n!==u&&(n=u={},h=0,a++),e=0;for(t in s)s.hasOwnProperty(t)&&(e++,n.hasOwnProperty(t)?n[t]!==s[t]&&(a++,n[t]=s[t]):(h++,n[t]=s[t],a++));if(h>e)for(t in a++,n)n.hasOwnProperty(t)&&!s.hasOwnProperty(t)&&(h--,delete n[t])}else n!==s&&(n=s,a++);return a}; newVal: 290; oldVal: 288"],["fn: function (){s=l(o);var e,t;if(y(s))if(r(s))for(n!==c&&(n=c,h=n.length=0,a++),e=s.length,h!==e&&(a++,n.length=h=e),t=0;e>t;t++)n[t]!==s[t]&&(a++,n[t]=s[t]);else{n!==u&&(n=u={},h=0,a++),e=0;for(t in s)s.hasOwnProperty(t)&&(e++,n.hasOwnProperty(t)?n[t]!==s[t]&&(a++,n[t]=s[t]):(h++,n[t]=s[t],a++));if(h>e)for(t in a++,n)n.hasOwnProperty(t)&&!s.hasOwnProperty(t)&&(h--,delete n[t])}else n!==s&&(n=s,a++);return a}; newVal: 292; oldVal: 290"]]
at Error (native)
at Object.s.$digest (http://plnkr.co/js/apps/editor-0.7.27.js:2:12540)
at Object.s.$apply (http://plnkr.co/js/apps/editor-0.7.27.js:2:13242)
at http://plnkr.co/js/apps/editor-0.7.27.js:26:6249 editor-0.7.27.js:1
(anonymous function) editor-0.7.27.js:1
(anonymous function) editor-0.7.27.js:1
s.$apply editor-0.7.27.js:2
(anonymous function) editor-0.7.27.js:26
Working with an angular example, tidy is munging my angular in page templates, placing spaces between most things.
<script type="text/ng-template" id="tempTest">
<input type="date" data-ng-model="TestDate" / >
</script>
becomes
<script type="text/ng-template" id="tempTest">
< input type = "date"
data - ng - model = "TestDate" / >
</script>
Unable to load streaming code when trying to stream.
When I open a Gist, plunker preformats it, so editing starts with a preformatted (ugly) code instead of the original (nice) one.
Expected: naturally, when I open a gist, I expect plunker to open & edit the original file.
Let me know if you need more input, examples etc.
Tried to save a plunk with a tag containing a dot ("snap.svg") and it failed although the tag name was in the suggestions list. Maybe this issue applies to other characters as well?
I'm using plunker as my main tool for prototyping.
While creating tiny modules my workflow is the following:
The modules I'm creating are intended to be highly decoupled just requiring some other tiny modules
In this scenario I would expect that dependencies are resolved recursively, but they aren't.
For example, having the following dependency tree:
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
I would expect by including [email protected]
to obtain the following list of resources:
https://rawgit.com/definejs/define/master/define.js
https://rawgit.com/mujs/type.number/master/number.js
https://rawgit.com/mujs/type.arrayLike/master/arrayLike.js
https://rawgit.com/mujs/type.defined/master/defined.js
https://rawgit.com/mujs/list.each/master/each.js
https://rawgit.com/mujs/list.map/master/map.js
https://rawgit.com/mujs/fn.apply/master/apply.js
https://rawgit.com/mujs/fn.bind/master/bind.js
https://rawgit.com/mujs/fn.multiplex/master/multiplex.js
https://rawgit.com/domojs/domo/master/domo.js
Following the rules:
The result however is the following:
https://rawgit.com/definejs/define/master/define.js
https://rawgit.com/mujs/list.map/master/map.js
https://rawgit.com/mujs/fn.apply/master/apply.js
https://rawgit.com/mujs/fn.bind/master/bind.js
https://rawgit.com/mujs/fn.multiplex/master/multiplex.js
https://rawgit.com/domojs/domo/master/domo.js
Which are just the dependencies declared in [email protected]
Steps to reproduce:
I'm not sure if this issue is limited to certain types of URLS (e.g., with ?p=preview) or extends to the URLs generated by the other share buttons, but it reliably happens with this URL.
This used to be at plunker.no.de/documentation (see my tweet from April 2012)
I believe that link when here, but don't quite remember.
Regardless, it'd be great to document how to create Plunks outside the UI.
I'm getting
500 Error: /Users/....../plunker/plunker_www/views/landing.jade:32 30| // --> 31| > 32| != js("apps/landing") 33| script 34| var _gaq = _gaq || []; 35| _gaq.push(['_setAccount', 'UA-28928507-1']); File not found: 'vendor/angularytics/angularytics'
When trying to load www for the first time.
Moving the file plunker_www/assets/vendor/angularytics.js into the angularytics subdirectory (which exists but is empty in the repo) solves the issue.
I get this message when trying to access plnkr.co.
Nodejitsu
400
www.plnkr.co is currently stopped
Temporarily down for maintenance?
I'm a huge fan of this tool. Made the switch to a Macbook Pro, and now it's hard to use.
input.html
in editor, while other files like script.js
are fine.Key | Value |
---|---|
Google Chrome | 33.0.1750.152 (Official Build 256984) |
OS | Mac OS X |
Blink | 537.36 (@169182) |
JavaScript | V8 3.23.17.23 |
Flash | 12.0.0.77 |
User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36 |
Hi,
I have a "playground" on my site, for html/js/css, similar to plunker. There are many examples and many people browsing them. It's well tested, but needs rewrite, I even started it with Angular when I found plunker.
So now I'm considering switching to plunker instead of making a new playground of my own, but there's a problem (see below).
The thing is: many examples contain additional resources, mostly gif/png images. For example, index.html
may contain <img src="ball.gif">
where ball.gif
is in the same folder.
Currently plnkr does not support binary files at all (correct me if I'm wrong). And in fact, they shouldn't go to plnkr, because no one ever edits them, hence they may be called resources.
So, relative links like <img src="ball.gif">
are not going to work in plnkr. And I can't make them absolute, because examples should be downloadable as a whole and runnable offline.
As a possible solution I see an enhancement to plnkr which allows supplying a list of "resources", which are mappings "relative url -> remote url"
, e.g. "ball.gif -> http://learn.javascript.ru/example/ball.gif"
or even "resources/(.*) -> http://learn.javascript.ru/example/resources/$1"
. Plnkr would redirect resources to their origin.
If that were possible, I would POST a list of resources with the example and plnkr server would reply for "ball.gif"
request with 302 redirect to http://learn.javascript.ru/example/ball.gif
.
Is that an easy enhancement to plnkr or I should fork plnkr for my site or you'd advice to forget thinking about the switch?
I saw the tooltips being "stucked" there forever.
I think that only happens when you fail with your github login, or a save / fork fails... But not on success.
At this moment, plnkr.co hangs, curl can't connect.
Please add licence file to all the plunker subpackages
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.