I am developing web based software applications which means that the presentation layer is html pages.
Every html page needs to have imported javascript files (sometimes 10 to 15) and lots of css files (sometimes 20 to 30).
I find it really anoying to write the path to each one of them ( Well when you write the path to the first one then you can simply copy and paste it and change only the file name but this is not the case ). Ok... i was talking about that it is really annoying and time consumption.
Here is example:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/a.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/b.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/c.css">
<script src="../xxx/a.js"></script>
<script src="../xxx/yyy/zzz/b.js"></script>
<script src="../xxx/yyy/zzz/c.js"></script>
<script src="../xxx/yyy/zzz/d.js"></script>
So lets just ask you the question:
Is there a way (or a plugin) in NetBeans which can help me to drag the file from its location (the project is visualized as a tree) and put it in the html so its path to be automatically inserted in the file?
I know this is an old post but as of recent versions of NetBeans, drag the file from the tree into the document itself, and it will place a tag to the CSS file automatically.
Cheers
Related
I created a Leaflet Map, and uploaded the html and js file on Github. However, the map part is not showing up. Would appreciate any help on it. Here is the link below:
https://william-wang93.github.io/html/MedievalEngland/LeafletHeat.html
These are the 2 links in your LeafletHeat.html file, if you try to open these link in the browser these require certificate thus browser is failing to fetch these files.
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
Try replacing it with
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="">
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
You can refer the source for more information - https://openstreetmap.be/en/projects/howto/leaflet.html
I was having the same trouble like this but I was solved this by doing this:
Add close tag to script tag
Wrong path of javascript file
Try to change javascript name file to main.js.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created some Restaurant website, that's got single Menu page containing different food items. The problem is that above mentioned page is loading too slow on first load. Firstly, i thought that when u enter the Menu page, all items with appropriate images (about 200 images) are loading and this is the root cause of the problem, but then i set up JS trigger which clicks certain menu-item on page-load and loads only 6 images. However, it didn't help. So please, describe some ways of optimizing my page for fast loading.
Thanks a lot in advance! :)
Even if only 6 images are loaded, depending on the size of the images, it'll be slow.
COnsider resize your images to optimize the speed.
You can do it using Gimp / Photoshop or this website: https://tinypng.com
[EDIT]
Don't use all these separated files in Production:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
the CSS inside the HTML
And do you really need THAT many JS files?
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
Don't use in this way, minify all and be sure that you are using the minified version of jquery, not the jquery.js.
Check it here: https://code.jquery.com/
Give a try to Grunt to help you with the automation and minification of the code: https://gruntjs.com/
Or just use this website: https://www.minifier.org/
You should optimize you all images:
You can use online tool for this:
Compress jpeg
url : https://compressjpeg.com/
Compress png
url: https://compresspng.com/
You can upload many picture on it and this will zip folder of compress images.
After optimize all images you site speed will increase.
Use java script ajax and create pagination for listing. i.e you will get data from database and display only 10 values at once. and for images.. pick some of your common images and create sprite .. these 2 things help you the most. in your every single project..
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I hope you all are doing great, I ran into this wild issue, I'm making my front end in react, and I have several pages in my app, css for all the pages is defined in only one file and I'm loading it from the main HTML document(not react components). CSS for all the pages is loaded but not for one particular page, the link of that page is sent via email through sendgrid, when I browse the page I get 404 for stylesheet and bootstrap files.
This is how I'm loading style sheet from HTML document which hosts the root component of reacting.
<html>
<head>
<link rel="stylesheet" href="app/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="app/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/css/style.css">
</head>
<body>
<div id="app-root"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
following are the screenshots of the network statistics for the pages which are loaded with css.
page failed to load with CSS with the same link to CSS files as the that of the prior one.
what seems to be the problem here, thank you, everybody, for taking out time and reading out this.
Try doing this
<link rel="stylesheet" href="/app/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="/app/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/app/assets/css/style.css">
I have two directory in a server: Project A and Project B. In my local development server, both projects work normally. In actual live server, everything is normal in Project A, but this happens to Project B.
My HTML:
<link href="mydir/lib/css/css1.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css2.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css3.css" rel="stylesheet" type="text/css"/>
But instead it echoed:
<link href="mydir/lib,_css,_css1.css+lib,_css,_css2.css,lib,_css,_css3.css" rel="stylesheet" type="text/css"/>
or
<link href="mydir/A.lib,,_css,,_css1.css+lib,,_css,,_css2.css+lib,,_css,,_css3.css" rel="stylesheet" type="text/css"/>
This happened not only for including CSS, but for JS too. My page CSS display seems normal, but my JS sometimes is not working (undefined functions or variables, but they are already in the included JS files). I don't know if the JS error happened because of this.
Directory name doesn't matter, I tried to change them, sometimes it works, sometimes not. Whether the files actually exist or not doesn't matter too, and again in this case, sometimes it works, sometimes not. Tried not to include or run any JS too, not working. Absolute/relative path doesn't matter too.
This is the first time this happens to me, I couldn't pinpoint why. Does anyone know why this happen and how to fix it?