Following coffee-script code:
try
any_error_here
catch err
alert err.stack
Gives following stack trace:
ReferenceError: any_error_here is not defined
at eval (coffeescript:5:3)
How to get coffeescript line number for this stack (line 2)?
Here is simple html with same question:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Coffee-script stack trace problems</title>
<script type="text/javascript" language="javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body id="dt_example">
<script type="text/coffeescript" language="javascript">
try
any_error_here
catch err
alert err.message+'\n'+err.stack + '\n\nWhat is coffeescript line number for this stack?'
</script>
</body>
</html>
This sounds like a problem for source maps.
When you compile your CoffeeScript, you can generate a source map by specifying the -m option:
coffee -c -m so.coffee
In browsers that support source maps (e.g. Chrome), the CoffeeScript file will appear in the Sources tab, and errors and log statements will refer to the corresponding line in the CoffeeScript file.
For more information, check out the HTML5 tutorial on source maps, and a short article about using source maps with CoffeeScript.
If you have a source map, you can also use it to parse a stack trace string and refer back to the original uncompiled file as outlined in this question.
Related
I'm trying to add this Bootstrap 5 starter template as a snippet on vs code but with no success.
I've tried to escape all " characters using \ but still does not work.
I'm not familiar with JSON files.
Do you know how to add this code as a snippet in vscode?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- Popper.js first, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</body>
</html>
There are a few talking points on your approach.
JSON strings are not string literals, meaning you can not simply add a new line to them, you have to use a \n character where applicable; if you wish to keep it all in one string:
"body" : "<!doctype html>\n<html lang="en">\n<head> .... etc"
You can not use a string delimiter in your snippet without escaping it, that's not snippet or even vscode specific, that's just how most 'language' rules are:
"body" : "<html lang="en">"
^ ^
When you do this it effectively means you want the body to be: <html lang= because you ended the string and then restarted it after en
Although you can keep it in a single string value, a better approach, for readability at least, is to use an array of values:
"body": [
"<!doctype html>",
"<html lang=\"en\">",
.. etc
]
Full snippet will look like the following:
"Bootstrap 5": {
"description": "Bootstrap 5 starter template",
"prefix": "bootstrap",
"body": [
"<!doctype html>",
"<html lang=\"en\">",
"\t<head>",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\n\t\t<!-- Bootstrap CSS -->",
"\t\t<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com\" />",
"\n\n\t\t<title>Document</title>",
"\t</head>",
"\t<body>",
"\t\t$0",
"\n\n\n\t\t<!-- Optional JavaScript -->",
"\t\t<!-- Popper.js first, then Bootstrap JS -->",
"\t\t<script src=\"https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
"\t\t<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
"\t</body>",
"</html>"
]
}
Syntax:
$0 means 'end here'
\t means 'add a tab here'
\n means 'add a new line here'
If you don't want to add new lines or new tabs you don't have to, if you have the setting to 'format on save' set to true it will correct itself, but it does look better to include them.
Resources
vscode has a thorough overview of how to create custom snippets and shorcuts and advanced snippets using variables; please review for further guidance here
I wonder to use SC.oEmbed to play sound from SoundCloud.But when I use it, I always get ERR_FILE_NOT_FOUND error.
I put my Source Code in Jsfiddle: http://jsfiddle.net/n2sVk/, it works OK. But when I save it to a HTML file and open it with Chrome, the error would be observed.
The Source Code is shown as below:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
</head>
<body>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<div id="wrap"></div>
<script type="text/javascript">
SC.initialize({
client_id: "c202b469a633a7a5b15c9e10b5272b78",
redirect_uri: "http://connect.soundcloud.com/examples/callback.html"
});
SC.connect(function(){
console.log("connect " + "return");
SC.get("/me", function(me){
console.log("me.username:" + me.username);
console.log("me.description:" + me.description);
SC.get("/tracks", {limit: 1}, function(tracks){
console.log("get track return");
track = tracks[0];
console.log("track.uri: " + track.uri);
console.log("track.title: " + track.title);
SC.oEmbed(track.permalink_url,
{auto_play: true},
document.getElementById("wrap"));
});
});
});
</script>
</body>
Here is the error from Chrome:
GET file://soundcloud.com/oembed.json?auto_play=true&url=http%3A%2F%2Fsoundcloud.com%2Fyung-crusty-beats%2Fmystic-juice net::ERR_FILE_NOT_FOUND sdk.js:1
oEmbed response: null
This happens because when you are testing it locally, you are on "file:///" protocol.
The library's source code is using // in place of the protocol – this lets the library work on both http and https. However, when you access your code from a file as opposed to a webserver, the oembed function will probably not work.
The solution will be to run a local web server, such as Python simple server, which you'd run from the root folder of your project:
python -m SimpleHTTPServer
I usually have \let\phi\varphi in preambles of my LaTeX files, for aesthetics reasons. Is it possible to do something similar in MathJax? I tried defining macros
MathJax.Hub.Config({TeX:{Macros:{phi:"\\varphi"}}})
but it seems to have confused MathJax (no math was rendered on the page at all). What is the proper way to do this?
What you have done should work, so I suspect something is typed wrong or in the wrong place in your file. Here is a complete working example file:
<!DOCTYPE html>
<html>
<head>
<title>MathJax Macros Configuration</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({TeX: {Macros: {phi:"\\varphi"}}});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
phi \(\phi\) and varphi \(\varphi\) should both be the same.
</body>
</html>
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
Does anybody know what's wrong with this code? It shows nothing in the browser.
My intention is to draw two eyes based on the mouse location. So I define an Eye class and then call its draw method with variable mouseX and mouseY.
However, it shows nothing on the browser.
Also, I wonder how to detect the size of the browser because screen.width and screen.height don't seem to work within a browser.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
void setup(){
size(400,400);
smooth();
background(225);
}
if (mousePressed){
Face.draw(mouseX,mouseY);}
class Face{
float x,y,a;
Face(float ax,float ay){
x=ax;
y=ay;
a=random(1,5);}
void draw{
noFill();
stroke(0);
//eye1
ellipse(x+2.2*a,y-a,a/2,a/2);
//eyelashes1
arc(x+2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows1
arc(x+3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);
//eye2
ellipse(x-2.2*a,y-a,a/2,a/2);
//eyelashes2
arc(x-2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows2
arc(x-3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);
}
}
</script>
</head>
<body></body>
<canvas id="mycanvas"></canvas>
</html>
I'm a beginner, so I don't know if my problem is stupid or not.
But any hint is welcomed:)
Btw how to add color to the code on stackoverflow?
There are a some problems with your script.
Related with the html page:
You have to declare the encoding of the document in the header section: <meta charset="utf-8">
The canvas element should be included inside the html body.
Related with the processing code:
The processing script needs at least one setup() function and one draw() function. You defined a draw() method in your Face class, but not the main draw() function (by the way, you missed the brackets in your draw() method).
The mousePressed functionality should be included inside the main draw() method.
You need at least to declare one instance of your Face class (inside the setup() function). For example: Face myFace = new Face(10, 10);.
And probably more syntax errors inside your draw() method...
My recommendations:
Start with something simpler: The more lines you write from scratch, the harder to debug. Try to draw first just an ellipse and incrementally add more things to your code.
Keep your processing script in a separate file. It's cleaner and you can debug it using the processing editor or the processing online sketch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing testing</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="my-sketch" data-processing-sources="my-sketch.pde"></canvas>
</body>
</html>
Check this tutorial to get some ideas about objects and classes in processing.
The syntax in processing is very similar to java, and there're a lot more resources for understanding the basics of OOP for that language. Just google for it.
For syntax highlightning, look here.