Develop Reference

JS errors when changing hosts

Previously I was using managed hosting but have recently been testing a VPS server setup running CentOs with Virtualmin.
I have moved over a website which works absolutely fine on the managed hosting, but moving it to the VPS gives me multiple JS errors. For some reason, it doesn't seem to be loading any of the JS scripts. When I replace the scripts with CDN links, it all works fine again.
I've checked the directory permissions and they're set the same as the previous hosting, I can also access and read each file using website.com/js/bootstrap.min.js for example. The only difference is the JS directory itself is "Forbidden". I'm not sure if that makes a difference when I can read the actual files?
My question is, why could this be happening if JS runs similar to HTML and works fine when using the CDN scripts? Also, what is the meaning of the random IDs contained in the JS SRC scripts right before text/javascript shown below, could this be the cause?
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/bootstrap.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.slicknav.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/owl.carousel.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/circle-progress.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/mixitup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/instafeed.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/main.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/rocket-loader.min.js" data-cf-settings="7fb652456240e11add396d8d-|49" defer></script></body>
</html>

It seems that you didn't put JQuery back on your new hosting.
There are a few clues:
'unexpected token': jquery uses $
'jQuery is not defined'
It could also be that you put jQuery in a different location than where it was on your managed hosting. It could also be that it's still pointing to your old hosting.
If that doesn't work, try removing the text before text/javascript (although I doubt that's the issue, considering it worked on your old hosting). Also, Javascript's mime type is application/javascript.
Try checking those. That should fix your problem.

I can also access and read each file using
website.com/js/bootstrap.min.js for example. The only difference is
the JS directory itself is "Forbidden".
This doesn't make sense. Either the folder is forbidden or it is not.
If you can access that folder through the browser url, then clearly it is not forbidden. If you get a 'Forbidden' message in your browser, then obviously the folder is forbidden and you found the problem.
My question is, why could this be happening if JS runs similar to HTML
and works fine when using the CDN scripts?
Go to the network tab in your browser and check the http status that you receive in the browser for the resource that you request, i.e. jQuery in this case. The error that bootstrap throws is probably just a consequence of the fact that jQuery isn't loaded. I guess there must be a dependency.
If not, in the absolute worst case you can load the unminified version of the script that throws, and debug the problem based on the original source code.
The reason why it works for a CDN is obviously because these domains allow you public access to the resource it hosts, if not you wouldn't be able to get it, and it is sort of the point of using a CDN.
Btw, you should use a CDN, there is no clear argument as for why you shouldn't for these common libs.
Also, what is the meaning of the random IDs contained in the JS SRC
scripts right before text/javascript shown below, could this be the
cause?
I assume that you mean in the type, not in the src attribute of the html.
This is your code:
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
This doesn't make sense. If anything, they look like generated hashes which often happen when you load chunks of Javascript asynchronously.
It must be framework related, although I have no idea what framework you're currently using. I don't know if you're using SSR, CSR, templating library, bundling library etc.
But it should be clear that something generates this string for you. You need to check your template, what generates your template, and either way, remove the type altogether if you can. It's really useless in that spot.

How do I install ReactJS locally?

I've tried reading over the "guide" on their website, and none of it makes sense to me. I thought it'd be the same thing as JQuery, but apparently I'm missing something.
I have this appended in my html document (where it's appropriate of course):
<script src="respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="app.js"></script>
<script type="text/babel" src="app_2.js"></script>
As you might have guessed, I'm using Adobe Dreamweaver to develop my webpage.
That is what the first script element is for. The second being for JQuery.
After running an "example" for ReactJS with JSX, I found the three following script elements in the html document. That, to me, tells me that all I had to do in order to get it working is link those in as well.
Long story short: it didn't work. I tested it on Firefox and Chrome.
The thing I'm still scratching my head over is the error I receive when trying to view the remote files for the ReactJS-related files (on DW):
Not found: package "filename%version"
Where filename is the name of the JS file and version is the version (I'm assuming).
This only occurs for those files and not for JQuery. DW still let's me know that the file is remote and cannot be altered, but I get nothing for the other remote files.
What gives?

I was able to get it working after some scrambling, reading, and random attempts.
Turns out I was getting in my own way.
Because of the tutorial I was learning react from, I had assumed I was required to always create a react object and react-dom object.
After removing those two declarations from my js file, I was able to then see the expected results in my browser.
The only thing I can think of as to why those declarations would cause an issue is either because one of the files I import already does so (which has to happen as I don't declare the "React" or "React-dom" instances anymore but am still able to use them) or it is no longer required explicitly. The tutorial I went through was a bit dated.
I'm gonna have so much fun with this!

Meteor : add elements to the app.html

The sourcecode of the app.html in a meteor app will look like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/846a8d9499cc559cd36226c07803f069a9b314a4.css">
<script type="text/javascript" src="/bd418141a43a911de5fcb0fc9eef1599abd72874.js"></script>
<title>application title</title>
</head>
<body>
</body>
</html>
This is simple and nice. (you can add meta in the head part).
But what if I want to add a loader for the app ?
I use a few libraries and my main js is probably going to weight a little more than one mo. I cannot image display nothing while it's loading.
The easier way would be to write a few line of classic inline html. But when I write something in the html, it's inclueded in my templates.
How would you change the app.html ?

Short answer: You can't. As far as I'm aware, Meteor will always send down an empty <body> tag and fill it in via templates.
If you have so much code that the concatenated JavaScript is quite heavy, you can split parts of it off. See this question for some techniques on how to do so. Personally I try to load from CDN any libraries that I'm using "out of the box," like Bootstrap (not an option for jQuery, unfortunately). To load from CDN, just include a <head> block in one of your HTML files and link to the CDN-hosted library files like normal, and leave them out of your project. Another option is to use jQuery's $.getScript() to load specific scripts on demand only on the pages that need them.
But that just lessons the load of your concatenated JavaScript file, it still doesn't really answer your question of having some HTML sent to the client immediately. To accomplish that, the only method I'm aware of is to have some other Web server in front of Meteor. For example have an Apache or Nginx server listening on port 80 that sends down a simple HTML file that has your initial content, and also loads the two Meteor-generated concatenated .js and .css files. Meteor would either replace the contents of <body> on load, or you would need to write some JavaScript to do so so that it gets "handed off" to Meteor so that Meteor can start rendering its templates there. I doubt the handoff would be very smooth, unfortunately. Alternatively if your initial page is more of a splash page, for example a simple login form, it could exist by itself served by Apache/Nginx and then on submit the user moves into the Meteor-served world. While the user is filling in the form the concatenated .css file (if not both the .css and .js files, or the .css file and any CDN-served or non-concatenated .js files) could be downloading in the background and getting cached. To be honest though I'm not sure it's worth all this effort, it adds a lot of complexity for what's probably only a very slight speed improvement (and even then, only on the initial load of the home page).

separate files (HTML5,CSS & JS)

I have recently developed my first mobile web application using HTML5, CSS3, JavaScript and a bit of jQuery. At this stage I want to separate codes for HTML, CSS & JS in 3 different files and using a web server to establish connection between those files. Any solution?

Just declare references to your CSS & JS from within your HTML. For performance reasons, it's good to put the CSS reference in the head, and the JS reference at the end of the file just before closing out the tag. That way, your page will load and will look correct right off the bat and won't be blocked downloading the JavaScript. The JS will be the last thing to load. Here's an example of the HTML markup:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>
<body>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

I would recommend looking into builders like
Apache Ant
HTML5 Boilerplate Build Script
Grunt (based on node.js)
Make or Rake files
this allows you to separate all of your files and then lint the files. This also allows you to then combine and minify the files. As for the different css, html and javascript. Those should all remain in separate files. But minifying your files and combining them into single files will definitely reduce page load time.
A good reading and look through would be HTML5 Boilerplate. They spend a lot of time on performance and the developer process.

getting started with Google Closure if you don't care about minifying/compiling?

If you don't care about minifying your code, is there a way to get started using the Google Closure library without having to set up a subversion client and use the compiler? The Notepad sample program on Google's website refers to
<script src="closure-library/base.js" > </script >
Can you simply download closure-library/base.js somewhere and start playing with the UI examples? The Closure Lite quick-start version doesn't appear to include goog.ui

Take a look at this thread on closure discussion group.
Here is what my html source roughly looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- style sheets -->
<link rel="stylesheet" href="/m/myapp/css/style.css">
<!-- closure base -->
<script type="text/javascript" src="/m/google-closure/closure/goog/base.js"></script>
<!-- file containing dependencies specific to the project -->
<script type="text/javascript" src="/m/myapp/my-deps.js"></script>
<!-- main script of my application -->
<script type="text/javascript" src="/m/myapp/main-script.js"></script>
</head>
<body>
<div id="myapp_div"></div>
<script type="text/javascript">
load_myapp_into("myapp_div");
</script>
</body>
</html>
Write your application code and organize it in any way you like in a directory that maps to /m/myapp url. It is only necessary to specify the main script file. The remaining ones will be loaded according to the dependency map by base.js.
Kind of an interesting feature of closure is that you can move and rename files any way you like since dependency calculator determines for you what comes from where.
The most important part is to calculate the dependency file - my-deps.js here. I still use their old calcdeps.py, but looks like there is a better tool now called depswriter.
After running calcdeps.py you'll most likely have to rewrite paths inside generated deps file, because those paths must be relative to base.js.
Also, even though you may not be interested in the compiler - it is helpful as it points out many errors. I use compiler anyway just for that purpose. Also - closure without a compiler may only be useful for debugging, because download size of uncompiled code may be huge.
Don't pass by closure templates - they are really neat.

You can try plovr it is a build tool designed for use with closure.
It comes packed with all the closure tools and the library so you can keep these out of your project folder.
The nice thing about this tool is that you can use it as a server so you can develop your application and by reloading your page, the code gets compiled en is delivered to your application.
It took me about half an hour to understand it and set it up.