I'm working on a wireless robotics project utilizing node.js and jquery to create a webpage "controller".
Currently, my code is as below, however its functionality is limited to working with an internet connection due to the downloading of the scripts through the internet addresses. My goal is to allow this to function without internet connectivity
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
In order to try to save these files to the beaglebone locally, I created 3 files: Source1.css Source2.js and Source3.js which are copied and pasted into their respective files from the HTML links in the code above and stored in the same directory as the html and javascript files used for the server.
I have edited the code to appear as below
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="Source1.css" />
<script src="Source2.js"></script>
<script src="Source3.js"></script>
<script src="/socket.io/socket.io.js"></script>
However when I attempt to start the server using the node command, only the HTML appears to load in the webpage. I have attempted changing the charset and including the entire path to the jquery source files with no success. Any help would be greatly appreciated!
Disconnect from the Internet. Press Ctrl+Shift+I in the Chrome browser to load developer tools, change to the "Network" tab then press F5 to refresh the page. You will see the resources your page loaded (and some it attempted to load). Sort these results by the Initiator column. You will likely find Socket.IO initiated dependencies that failed to load.
Related
I have created a web application with vite and react and I occasionally encounter the following error when I leave the browser tab open, change the app e.g. from Edge or Chrome to some other app and come back later (does not matter if it is a few minutes or hours):
Failed to load module script:
Expected a JavaScript module script but the server responded with a MIME type of "text/html".
Strict MIME type checking is enforced for module scripts per HTML spec.
The problem is, that I am unable to recreate the error reliably, and I do not know how to solve it.
This happens only in the mobile browser (edge, chrome, Firefox) on android and I have never encountered it in a desktop browser.
A simple refresh or reload of the browser tab is enough to make it work again, but this not the best possible user experience, so it should work directly if one reopens the browser tab. And usually, it does (as I said, unfortunately I am unable to recreate this behavior reliably).
I observed this behavior for a few weeks now, and I am out of ideas, and I hope someone can give me a hint.
Any help is very much appreciated.
The application in question can be found here: capmon.org. It is not relevant on which page you navigate. As far as I am aware, it does happen on every page in the application.
I am uncertain if it is helpful to solve the problem, but here is the index.html of the React/vite application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<meta
name="viewport"
content="width=device-width,height=device-height, initial-scale=1, minimum-scale=1, user-scalable=0"
/>
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
/>
<title>CapMon</title>
<style>
</style>
</head>
<!-- <body> -->
<body class="myContainer">
<noscript>You need to enable JavaScript to run this app</noscript>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
I don't have a direct access to the code itself right now, But I've got some client whose website was developed in angularjs, and all the code gives an output on the DOM (I can see the pages with all the elements and everything is loaded just fine), but when I tried to make a crawling test via Google - it looked like the website wasn't scanned yet, even though it's been already a month.. and then I saw something weird - that when I 'view source' the pages themselves, all I get is this piece of code -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="ahrefs-site-verification" content="xxxyyy">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.32f34f185b7564580e93.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script type="text/javascript" src="runtime.34e0ced836cdde276d53.js"></script><script type="text/javascript" src="polyfills.700c13e3feb6da6eca5f.js"></script><script type="text/javascript" src="main.e89588fe3aa7c32000ef.js"></script></body>
<script src="https://wchat.freshchat.com/js/widget.js" async=""></script>
</html>
I guess the problem is happening in these lines -
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
Do you have at least any speculation why this might happen?
Since you're dealing with a SPA, SEO is not that straightforward. Google crawls your index.html which contains the app-root of your Angular app and my experience is that it will not execute the JS which contains your SPA routes. Your only options for optimizing SEO in SPA's is prerendering your routes, through an external service like Prerender.io or create your own prerender or use a Server Side Rendering technology for your SPA.
Since you are using Angular you should take a look at Angular Universal.
edit: if you don't want the complete hassle of prerendering all your routes but just want an acceptable result in Google for your index.html at least set a proper title tag <title>Proper Title - Wonderful website</title> and the meta description tag <meta name="description" content="Description of max 160 chars">
You might try Inspect Element instead of View Source
I don't know whether the project has been deployed in dev mode or production mode but doing an Inspect element will help you to access the DOM elements.
You can check this article to understand the difference between view source and Inspect Element
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 work with Netbeans 8.2 and I created a Web Application. I have a html and a js.
The html is
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<script type="text/javascript" src="js1.js"></script>
</body>
</html>
The project's structure is
I want to include the js1.js.
When I run the application in the browser's console I get a 404
GET http://localhost:8080/Prueba/js1.js [HTTP/1.1 404 Not Found 2ms]
Why do I get this 404?
file js1.js has to be inside the web directory(in netbeans) and not outside as you show in the image
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.