I am trying to acieve cache busting in index.html. Below is my code
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="<Value>" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="<Value>" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v="+ (new Date).getTime()"' integrity="<Value>" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ricmoo/aes-js/e27b99df/index.js"></script>
</body>
I am trying to add date in bootstrap.min.js path but when I check link in Network tab, it shows
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=%22+%20(new%20Date).getTime()%22
I want to know what should I put in my index.html file so that I will get correct timestamp value.
The problem is that (new Date).getTime() in the line
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v="+ (new Date).getTime()"' integrity="<Value>" crossorigin="anonymous"></script>
is not executed by Javascript, so you are simply appending it as an hardcoded string, and this is why you see that URL.
The correct way to add a timestamp, if you want to do it through Javascript, is this:
<script>document.write("<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=" + Date.now() + "' integrity='<Value>' crossorigin='anonymous'><\/script>");</script>
In this way you are including a script which includes bootstrap.min.js and appends a timestamp to its URL.
See here for a similar question.
The timestamp can also be included from server side, if you prefer. Example for Java/JSP:
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=<%= new java.util.Date().getTime() %>" integrity="<Value>" crossorigin="anonymous"></script>
Side note: the value <Value> for your <script>'s integrity attribute is not valid. You should use the value provided by the Bootstrap CDN: see here.
Related
Version that works
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://kit.fontawesome.com/b0ca3cb0f7.js" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
Version that doesn't work
<script src="assets/js/main.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://kit.fontawesome.com/b0ca3cb0f7.js" crossorigin="anonymous"></script>
Does main javascript src needs to be placed at the bottom?
It doesn't work when I put it above all scripts.
It won't work if there are custom functions that you might be calling inside Main.js that are dependent on the other scripts which you are loading.
For eg - There is one script SWIPER JS and you might be calling your custom functions in your main.js i.e. to initialize SWIPER JS SLIDER, so until the dependent script i.e. swiper-bundle.min.js is not loaded the custom function inside main.js won't work.
You can check your console to understand what exact error you get.
Press F12 in your browser.
I tried hours to solve this problem, can anyone tell me how can I get those icons or tell me how to make a custom CSS file
files I linked
dataTables.bootstrap.min.css
and following script files
<script src="js/lib/datatables/datatables.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="js/lib/datatables/cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
I added the following HTML to the head section of my blogger.com theme.
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'https://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
But when I view a page via HTTP the browser tells me I am requesting insecure HTTP resources from a second HTTPS page.
https://mrpmorris.blogspot.co.uk/2017/06/loading-assembly-from-specific-path.html
If I right-click the alexgorbatchev link in the Chome Console and select Open in new link it takes me to an insecure page, if I add https:// to the start of the url it loads securely.
Why are Chrome and MS Edge trying to fetch these resources via http when the markup explicitly indicates https?
I was facing the same issue with my blog.
I replaced below piece of code:
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
With the below one:
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
And now my blog stopped throwing that error of insecure content blocked. Because now all the content is served over https and that too by one of the best cdn in the world.
$ curl -I https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js -k
HTTP/1.1 302 Moved Temporarily
...
Location: http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js
...
You can see that it's actually being redirected to TypePad.com. There's a "cool" story behind this. Back in the dark days when bandwidth was expensive, I was getting 100s of GBs of traffic on these scripts, which was starting to cost over $100 a month. I moved the files to free hosting service, but I didn't want all existing links to alexgorbatchev.com to break, and so I set up redirects.
I should probably fix the redirect to use the same protocol as the request :)
<head>
<title>Mary</title>
<link href="http://localhost/stylesheet.css" type="text/css" rel="stylesheet">
<link href="http://localhost/mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="http://localhost/jscript.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
</head>
I just got done learning about jquery ui and am trying to include it in my very first webpage, but it's not working. I checked all of the links on my server, and they link up to the documentation, but the only way the content shows up when I check the webpage on my server is if I comment out the last script tag. But if I do that, I can't access the jquery ui, right? I'm so confused. I'm so excited to try all of this stuff out, but I can't figure out how to make it work :( Any help is greatly appreciated.
karthikr's answer is most likely the problem, but if that doesn't work try referencing the URL hosted by jquery itself.
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Assuming all the static files are properly referenced,
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
should be
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"></script>
Note the end of the script tag /> should be ></script>
I recently came across this site. http://beta.rallyinteractive.com/. The site uses some fairly complex/awesome animations. They are using only one script file that is minified. I expanded their script using chrome and tried to figure out how exactly they are achieving their animations. I have three questions:
Are their any resources out their that can point me in the right direction on how to create such cool animations.
Are they just using Html5 canvas element and no scripts like Raphael.js?
Is it worth it to learn the how to create canvas animations or do you think there is going to be some sort of Flash IDE that will take away the complexities of learning the API?
Thank you,
Tyrone
If you look at the page source, they have commented a list of javascript files they use.
<!--
<script src="/static/js/flush/events/Events.js"></script>
<script src="/static/js/flush/events/GlobalEvent.js"></script>
<script src="/static/js/flush/events/GlobalEvents.js"></script>
<script src="/static/js/flush/events/MouseEvent.js"></script>
<script src="/static/js/flush/display/Stage.js"></script>
<script src="/static/js/flush/display/Sprite.js"></script>
<script src="/static/js/flush/display/TraditionalSprite.js"></script>
<script src="/static/js/flush/geom/Point2D.js"></script>
<script src="/static/js/flush/utils/Tween.js"></script>
<script src="/static/js/flush/utils/Ease.js"></script>
<script src="/static/js/flush/utils/Utils.js"></script>
<script src="/static/js/flush/color/HEXColor.js"></script>
<script src="/static/js/flush/color/HSVColor.js"></script>
<script src="/static/js/flush/color/RGBColor.js"></script>
<script src="/static/js/rally/sprites/BioIn.js"></script>
<script src="/static/js/rally/sprites/BioShare.js"></script>
<script src="/static/js/rally/sprites/BioTweet.js"></script>
<script src="/static/js/rally/sprites/BigTweet.js"></script>
<script src="/static/js/rally/sprites/BigShare.js"></script>
<script src="/static/js/rally/sprites/NavArrow.js"></script>
<script src="/static/js/rally/CountText.js"></script>
<script src="/static/js/rally/BottomBar.js"></script>
<script src="/static/js/rally/Refresh.js"></script>
<script src="/static/js/rally/DribbbleLink.js"></script>
<script src="/static/js/rally/Icons.js"></script>
<script src="/static/js/rally/TriangleMask.js"></script>
<script src="/static/js/rally/Triangle.js"></script>
<script src="/static/js/rally/Rally.js"></script>
-->