Introduction
I have two domains, http://mauricevandorst.com/ and http://tacticalmotion.nl/.
What do I want
I want the website https://mauricevandorst.com/personal-page/index.html to be the same website as http://tacticalmotion.nl/personal-page/index.html. The files and paths are exactly the same, so it should work but unfortunately it does not..
The issue
On my domain, mauricevandorst, the .css files load perfectly.
On my other domain, tacticalmotion, the .css files do not load at all.
To load the .css files in my Index.html I use the following code:
<!-- Custom Theme CSS -->
<link href="css/main.css" rel="stylesheet">
The CSS files I use can be found here:
main.css - bootstrap.css - bootstrap.min.css
Extra information
I have found out that when loading http://www.mauricevandorst.com/personal-page/index.html (http instead of https) gives the mistake too. Could it possibly be an SSL certificate that misses?
The thing is, since your website is in HTTPS you can't load HTTP content.
MDN Link
The best shot you've got is simply to use https CDN especially for bootstrap
Juste have a shot with thoose url.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Related
I started to develop a web page project with nodejs ejs engine.
It’s my git repo link: https://github.com/FikretAKBAS/teknikhane.git
The problem is when I start my project “npm start” html pages are loading but css file does not load. I tried many different things to figure out that but I didn’t get any solutions for that. In addition to I guess that’s a file path problem. I hope someone could help to solve this problem. Thanks a lot.
enter image description here
Remove /public from your css files path
for example
before
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/public/css/fontawesome.css">
<link rel="stylesheet" href="/public/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/public/css/owl.css">
<link rel="stylesheet" href="/public/css/lightbox.css">
after
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/css/fontawesome.css">
<link rel="stylesheet" href="/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/css/owl.css">
<link rel="stylesheet" href="/css/lightbox.css">
After you started the server
Your public folder become a root folder for localhost:5000
According to this article, gzipping a minified file, can significantly reduce its size.
In case of my website, I have quite a few libraries which are served from a public CDN, for example I have included the following minified bootstrap files in my site:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Is there any option to server the gzipped version of the above files from a public CDN?
If that's not an option, is it a good idea to gzip the above libraries and serve them from my own CDN (i.e. server them from CloudFront and set the option to compress the files)?
Update
As per the comments, I have checked the content type and both bootstrap files are compressed.
bootstrap.min.js
bootstrap.min.css
Webpage error
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I am not sure how get my css, bootstrap, and popper to display on the webpage when deployed. It works fine on local.
When you publish your site you don't have the node_modules folder on the server, don't worry you shouldn't have it there. Replace the node_modules with cdn links instead. You will find alot of cdn sources on cdnjs.com, but a few libraries have their own (like bootstrap), here is jquery for example https://cdnjs.com/libraries/jquery.
<!-- My links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I using Laravel 7.6.2 as mentioned, and I keep getting the error in browser console as shown in picture below when I click on my navbar toggle button.
Here is the css and script files used:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css')}}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/jomkurus.css') }}" rel="stylesheet">
<!-- Plugins -->
<script src="{{asset('fontawesome/js/all.js')}}"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
Thank you for your advice in advance.
I have found the root cause of this issue, seem like it is because of the jQuery 3.5.0 version issue. At this moment, the solution is downgrade jQuery to 3.4.1 version. The discussion can be found here. github.com/twbs/bootstrap/issues/30553 I have tried it and it works!
jQuery released 3.5.1, that fixed this bug (jQuery blog).
You can update this module in your project:
npm install jquery#3.5.1
npm run dev
I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?
JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->