I have a asp.net MVC app, and I want to start unit testing the javascript closures I use with the app. I have watched a few demo's on plural site, and played with the sample code in the github repository.
however, all the actual mocha.js examples assume I want to host with node, and that the npm system will get all of my dependencies. At this time I cannot install node.js on my laptop. the test code in the plural site courses all are horribaly orginized, and when I look at the files named "mocha.js" they actually contain the require.js code as well.
in any regards, Does anyone has a good "html" hostable template for mocha.js code, and a nice way to orginize the dependencies outside of the node npm system?
Mocha can run in the browser without having to worry about dependencies. The documentation has a section about it. As shown in the documentation, you need a page that loads and starts Mocha, and loads anything else you need:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- Load the libraries you need -->
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<!-- Tell Mocha what interface to use for the tests. You must do this
before you read the test files. -->
<script>mocha.setup('bdd')</script>
<!-- Load the test files. This is where your tests would be located. -->
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<!-- Run the tests. -->
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
I've added some comments above to indicate what is going on.
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
I'm deploying a Google web app to write commutative diagrams with LaTeX/Xy-pic.
In the heading of html page I put the following configuration:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
"HTML-CSS": {
styles: {".MathJax_Preview": {visibility: "hidden"}}
},
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions:
["AMSmath.js","AMSsymbols.js","http://sonoisa.github.io/xyjax_ext/xypic.js"]}
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js">
</script>
The problem is that the file http://sonoisa.github.io/xyjax_ext/xypic.js is not loaded because it is from an http source. This is the message I read in console:
MathJax.js:19 Mixed Content: The page at 'https://script.google.com/' was loaded over HTTPS, but requested an insecure script 'http://sonoisa.github.io/xyjax_ext/xypic.js?V=2.7.5'. This request has been blocked; the content must be served over HTTPS.
I try to use https://sonoisa.github.io/xyjax_ext/xypic.js instead, but this doesn't work at all.
Any suggestions?
One way to prevent the error message described on the question is to copy the code from the referred JavaScript library to the Google Apps Script project.
The above could be done in several ways that will depend on how you prefer to manage your code, but according to the best practices on https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascriptHTML, CSS and JavaScript should be kept on separate files. This implies to use a template like the following:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>
Where JavaScript is the file name of the file holding the JavaScript code. The name actually could be almost anything that makes sense to you and even you would have your JavaScript code on several files, like having one for you own code and another for the referred JavaScript library.
I want to learn ReactJS by following this tutorial. Although I'm not able to run the Hello World example in my browser.
I try running the following code:
<head>
<meta charset="UTF-8">
<title>Dev ReactJS</title>
<!-- <script src="build/react.js"></script> -->
<script src="build/react-with-addons.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="mount"></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.render(
React.DOM.h1(null, 'Hello, world!'),
document.getElementById('mount')
);
</script>
</body>
</html>
Which generates the error shown below:
Uncaught TypeError: React.render is not a function - Inline JSX script:3
I've read some things about changes made in v0.14, but I'm using the starter kit including v0.11. I'm uploading to my website trough FTP, or is it necessary to run on, for example, a NodeJS server? I can't find anything about that..
Thanks in advance.
That article was written in 2014, There have been lots of changes in the react ecosystem. This guide react-howto by Pete Hunt will prove useful in your journey into the sometimes overwhelming react ecosystem
Sure. Because tutorial too old, new versions of React.js doesn't contain render, instead you have to use react-dom. See details on official Facebook page (with examples)
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and
I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on
the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list
could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner.
You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin
for gulp
Grunt - JavaScript Task Runner
You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS.
See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
Using require.js , u can manage all tags in one line
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
As a simple solution, in HTML5 you can do this
<link rel="import" href="header.html">
and place all your
<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>
in the header.html
It's ok. Separating different scripts into different files is a part of basic recommandations for code styling.
The best way is to use Google Style recommendations in work. These 2 are for html&css and javascript:
https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml