At my workplace some web pages have suddenly started to malfunction a few days ago (lots of elements are not showing anymore in the pages.). I inspected the matter in firefox using the developer's tools (F12) and identified a problem with two polymer libraries (namely polymer-micro.html and paper-ripple-behavior.html in version 1.7.0.2).
According to the developer's console it has something to do with CORS, but I suspect the problem is rather connected to the displacement of resources from one url (https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/) to another (https://cdn.jsdelivr.net/gh/download/polymer-cdn#1.7.0.2/). Indeed, in the developer's network console I can see that all polymer resources go through an http code 301 with a redirection to the latter url, except for the two aforementioned libraries which end up with an http code of 200 although their content is strangely empty.
I am not a web developer and my analysis sadly ends here. Furthermore, our data being confidential I can't provide an access to our website.
Any help to understand the problem and fix it will be appreciated.
Thanks.
I don't know if this is relevant, but in case I also mention that :
The two problematic libraries that still exist -although empty- in the old location, seem to also exist in the new location
These two libraries are nowhere to be seen in the source code of my page, therefore I think they are "collateral imports" of other polymer libraries. The polymer libraries that can be seen in my page are :
<link href="qliksense-card.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-flex-layout/iron-flex-layout-classes.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-header-panel/paper-header-panel.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-toolbar/paper-toolbar.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-drawer-panel/paper-drawer-panel.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-icon-button/paper-icon-button.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-button/paper-button.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-icons/iron-icons.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-pages/iron-pages.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-menu/paper-menu.html" rel="import">
<link href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-item/paper-item.html" rel="import">
<link href="polymer-mixins.html" rel="import">
<style include="iron-flex iron-positioning" is="custom-style"></style>
<style include="polymer-mixins" is="custom-style"></style>```
Just in case somebody else has the same problem : It was solved by replacing all urls by their new version.
That is replacing https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/ with https://cdn.jsdelivr.net/gh/download/polymer-cdn#1.7.0.2/
As for the causes of the problem I am clueless.
Related
I'm trying to set some preconnected links in page's header. But Lighthouse is producing warnings as it was not used or something.
example of that warning:
A preconnect was found for "https://static.criteo.net" but was not used by the browser. Check that you are using the crossorigin attribute properly.
This is my link in html:
<link href="https://static.criteo.net" rel="preconnect">
Example syntax:
<link href="https://static.criteo.net" rel="preconnect" crossorigin>
This allows your browser to setup an early connection before an HTTP request is actually sent to the server. The assumption is you're getting something (font?, image(s)?) from the referenced link later.
I am trying to add PWA functionality to a simple site, and I am running into odd issues with Chrome version 68.0.3440.106.
I am running on http://localhost:4502 for my testing, in the context of a CMS (so I am working within a few constraints). Also, note that I removed all my PWA/Service Worker code so there is no caching at play.
In the <head> .. I include the manifest via:
<link rel="manifest" href="/content/foo/bar.pwa.manifest.webmanifest" type="application/manifest+json">
(The "odd" name of the manifest file is a constraint of the CMS i'm working in; i've also used the "json" extension to the same effect as described below).
Which contains...
{"name":"Sample",
"short_name":"sample",
"theme_color":"#001F3F",
"background_color":"#FF4136",
"display":"standalone",
"scope":".",
"start_url":"/content/foo/bar.html",
"icons":[{"src":"/content/assets/sample.jpg","size":"192x192","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"512x512","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"144x144","type":"image/jpeg"}]}
I've observed the following:
When I have JS/CSS includes ABOVE my <link rel="manifest" .. things go haywire.
* If i copy the page's URL, paste it into a NEW chrome tab (a refresh of an existing tab does not cut it), and open up Chrome Dev Tools FOR that new tab, I can see the HTTP request/response for the manifest, and in Dev Tools > Application > Manifest is appears to display everything correctly. (so far so good).
* If I then REFRESH this tab, i don't see the request for the manifest and the Application > Manifest section is blank. The HTML source has not changed at all.
* No matter how many times I refresh it doesn't seem to help (also clear cache, etc.)
2) When i move the <link rel="manifest" to be ABOVE any CSS/JS in the <head> it seems to load consistently and correctly. Refreshing the page the HTTP request for the manifest displays, and Application > Manifest displays the correct info.
I've been scouring docs (Google, MDN) to see if the manifest MUST be included before ANY other includes, but I can't find anything that says that - and it's odd that on the first load of a tab, it seems to work even when included after CSS/JS.
Im hoping there is a way to get this to load regardless of where in the <head> the <link rel="manifest".. happens to be (as the CMS makes it hard to guarantee the order)
No, the relative position of the <link rel="manifest"> within your page's <head> does not make a difference from the perspective of how it's parsed and interpreted.
I'm hard pressed to explain the behavior you're seeing, other than perhaps a syntax error in the HTML that includes your JavaScript and CSS, causing the subsequent <link rel="manifest"> to be parsed incorrectly. But in general, the position shouldn't matter.
I am using a LAMP stack web server running on Ubuntu 16.04. In my web root directory /public/ I have a few files, but the two important ones concerning my problem are:
index.html
main.build.js
The web page is a single page application. index.html "opens up" the SPA via the main.build.js, which contains the whole SPA. However, after I made changes to the main.build.js the changes does not apply to the webpage's main.build.js.
What I've tried:
Tried multiple browsers
I have tried clearing the cache & cookies of my browser(s)
Opening up the main.build.js that I made changes to make sure they were there (and they were)
Deleting the main.build.js completely (but it still shows up on the webpage!!!)
Restarting Apache
Restarting the computer
Index.html:
<html lang="en">
<head>
<title>BiggerWe (Alpha)</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script src="main.build.js"></script>
</body>
</html>
Any tips are welcome. Thanks!
According to this answered question you need to disable the PageSpeed features of the LMAP Stack and maybe the OPCache feature in php.ini by setting opcache.enable from 1 to 0
I am in the middle of a project and this morning the less JS file (I am currently using the "less.min.js" JS file for the browser (Chrome) states in the console "failed to save". This is causing my "scripts.js" file to fail when functions are in the "$(window).load()". Interesting enough, however, Bootstrap is still working, as is my LESS CSS (all my styles are on the page as it should be).
I also have Web Essestials installed, and is set to auto-compile on save (this setting was set previous to the error).
<title>#title</title>
<link href="#Fingerprint.Tag("/Content/bootstrap/bootstrap.less")" rel="stylesheet/less">
<link href="#Fingerprint.Tag("/Content/styles.less")" rel="stylesheet/less" />
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="#Fingerprint.Tag("/Scripts/modernizr.custom.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/bootstrap.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/less.min.js")"></script>
#*TODO: pre-compile less and remove script*#
<script src="#Fingerprint.Tag("/Scripts/json2.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/jquery.hoverIntent.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/scripts.js")"></script>
I have checked my security settings for IIS and they seem to be fine (once again, these are all the same settings as I was using yesterday prior to the error).
XHR finished loading: GET "http://local.lenders-one.com/Content/bootstrap/v-635549376660341373/bootstrap.less".
less.js:408
XHR finished loading: GET "http://local.lenders-one.com/Content/v-635556102777513301/styles.less".
less.js:771
failed to save - less.js:771
The "Fingerprint" class is a utility class that applies fake folders for file caching. I removed the utility class from the javascript/LESS files and I was still receiving the error.
I am using LESS v2.0.0 - any help is appreciated.
The "failed to save" is not very descriptive, but this error is send when less.js fail to write the compiled CSS code to local storage. (in your case possible because the path is not right) (see: https://github.com/less/less.js/blob/master/lib/less-browser/cache.js).
Interesting enough, however, Bootstrap is still working, as is my LESS CSS (all my styles are >on the page as it should be).
Although caching fails the compiled code will be send to the browser.
(once again, these are all the same settings as I was using yesterday prior to the error).
setting less.env to development also disable the caching and so the error.
I'm creating an small module for activeCollab composed by some webpages. I'm using PHP and Javascript/jQuery/AJAX. When I enter into the main page of the module I'm creating everything is working fine, but if later I try to go to other modules my web application is crashing. Is not showing any information. The only way for reviving it is refreshing the navigator.
If I check the error console of my navigator, I see that when I'm exiting from my custom webpage it says
`Uncaught Error: History.js Adapter has already been loaded...`
The header of my HTML file has this information:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
And this code is making my Javascript functions work properly.
What can be happening? I googled and I didn't found much information about this issue. Every help would be appreciated.
Finally I solved it, the problem was that my application is loading by default its own jQuery file and there was a conflict between this one and the ones I was trying to import. The solution was easy: I only had to delete the lines I wrote inside the "head" tag.
Thanks for your help!