I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
Related
I wanted to load a survey widget in the react project, where I create and execute the script in the head after dom gets loaded. But it is unable to generate its poll HTML.
Here is react demo in codesandbox
If I load the same script inside the specific element in the body without react env it works, here it's demo in jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Polldaddy Title</h1>
<div id="pollDaddyInfo">
<p>Poll should generate below this statememt</p>
<script charset="utf-8" src="https://static.polldaddy.com/p/10962229.js"></script>
</div>
<h1>Polldaddy End</h1>
</body>
</html>
Help me to identify what could possibly go wrong?
There is nothing wrong with your implementation in either scenario (i.e. with and without react environment).
Actually, in react environment you're loading the script which is async operation and an script that is loaded asynchronously cannot write on the document with document.write which is happening here
For supporting my argument here is another thread on stack overflow
My files are in entirely separate folders. I'm attempting to call CSS and JS files from a different path. Example below:
mainDirectory\internal\scripts\main.js
mainDirectory\internal\styles\main.css
mainDirectory\internal\pages\homePage.html -- (main page file)
I want to do this without libraries.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="../folderThree\test.css">
<script src="../folderTwo/test.js" type="text/javascript"></script>
</head>
<body>
<p>Test</p>
</body>
</html>
I was able to determine that I made a syntax mistake here, as I'm used to a different system. Turns out that all I needed ../ and to swap my slashes from back to forward.
Is there any decent procedure to compile html, css, and js files into one js file? I've been looking on methods how to load css and html files to js, and they all require requireJS. Is there any webpack plugin, or just a module for this?
I know this is not a decent question, but I've been thinking on not always fetching an external source file (html, css).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blah blah blah</title>
<script src="something.js"></script>
<script>
// 'load' will load everthing to #something
something.load(
// options
)
</script>
</head>
<body>
<div id="something"></div>
</body>
</html>
Finally, thanks to this article, all I need is html-loader. Then I can just add import html from 'some.html'.
Google Tag Manager instructs developers to:
Paste this code [THE TRACKING CODE] as high in the <head> of the page
as possible:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!--
End Google Tag Manager -->
My question is, how high can that code be properly placed? Properly meaning, able to function on >95% of browsers without issues/warnings/errors, and/or according to HTML best practices.
Can it go right after the opening <head> tag? Does it really matter as long as it is in the <head> section somewhere?
For reference/example, below is the HTML boilerplate. What's the best spot for the tracking code in the boilerplate?
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
The reason why Google recommends putting it as high up as possible is primarily to improve accuracy in tracking. The higher up in the page the snippet is, the faster it is loaded. Placing the snippet lower in your page, can potentially miss tracking users who left your page before the code was loaded. It can also cause to mistakenly report a site visitor that navigated away from your homepage before the code was loaded as a direct visitor to the page the user navigated to.
It is also important with Google’s A/B testing tool, Optimize. Having the snippet load faster ensures that Optimize will load the correct version of the page as soon as possible.
However, there are other factors you might want to consider, as discussed here: What are best practices to order elements in <head>?. For example:
...For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element.
So although you can put your tracking code snippet immediately following the opening head tag, you might want to consider putting it after the most important meta tags. Those tags generally don't take long to load, and won't hold off your tracking code much.
But yes, it does matter where in the head you put your tracking code for the reasons mentioned above. So if you'll be loading many scripts, stylesheets, etc., then put your tag manager code higher up rather than just dropping it at the end.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tracking Code -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Google Tag Manager isn't dependent on any plugins, and runs in raw JavaScript. In order to prevent conflict, it should be placed as high as possible in the <head> tag.
Considering it's self-contained and doesn't have any conflicts, it's perfectly safe to place it right after <head>, before any <meta> tags. Google's search algorithm will read the entire DOM in an attempt to find your <meta> tags, so they don't need to be the first things in the <head> section.
In your above example, I would recommend placing your Google Tag Manager code in between <head> and <meta charset="utf-8"> (which is where I normally place it on my own sites).
In addition to this, don't forget the noscript equivalent, which allows Google Tag Manager to run in the case of JavaScript being disabled on the page. This should be placed directly after your <body> tag:
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
Hope this helps! :)
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.