Currently getting used to using Express, Angularjs and Nodejs. Is it possible using these frameworks to create a reusable or template head tag section to use in multiple html files.
For example, head.html contains
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
and files file1.html and file2.html want to include the same head from head.html. Is it possible to achieve this using these frameworks? Are there any alternative/better solutions?
You can certainly do that but as far as I know you'd be looking at using a templating engine like Jade or Ejs.
They have include statements where you just include it in the file.
However if you are using Angular I don't see much of a point to do this at all. Angular will bootstrap your entire webpage from one document usually index.html or app.html it really depends on what you name it. This way that stuff will only ever load once.
That way you don't actually need to include it in multiple files, it will all be included from the get go.
Does that make sense?
Related
I tried doing it by creating a css file style.css in the same folder, copied the source code of the bulma link provided and then linked it to my html doc. But then, it shows no css features at all.
Unfortunately you cannot edit resources that are hosted on our CDN. Many, many sites rely on these resources remaining intact and the same forever!
You can however modify the styling on your site whilst using this resource by first including it in your website's HTML (within in the head tag):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
You can then modify this styling by creating a secondary CSS file locally alongside your site's HTML file, calling it my-styles.css for example. You can then also include that on your webpage by using another link tag within your head tag, after the link for bulma:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
<link rel="stylesheet" href="my-styles.css" />
Hope that helps with what you are trying to achieve!
- Matt.
Community Manager # cdnjs.com
Although I didn't achieve what I was trying to do, I guess the only solution is either copying the exact design provided via Bulma link or ending up writing the whole css code all by own which I don't really prefer until essentially needed. So, I'd rather stick to the pre-defined design provided by Bulma.
I am new to Spring and I am trying to make a beautiful Web Application, and so far I set up everything, and if I run my page on the browser it shows as it is supposed. But if I run it with tomcat on port 8080 (I am using Intelijj) it doesn't load css and js files not even pictures.
I have literally searched this problem and open all the StackOverflow similar questions, I tried to write a configuration file, but it doesn't do anything, and I am uncertain about this approach because I have seen examples of people that did not write any configuration, but still they managed to make all their static resources load, and so on. Is it some secret application properties that need to write? Or there is a config code that has to write?
My resources folder looks like this:
-resources
-static
-CSS
-things.css
-JS
-datepicker.js
-Images
-many pictures
-templates
-Home.html and other pages
And the code that I used to refer to static-CSS-things.css is like this:
link href="../static/CSS/things.css" th:href="#{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"
I thought this would make my css file to load, but it doesn't. Same for the js and the pictures. Thank you!
Ensure your css and js files are in the following structure:
src/main/resources/static/css/things.css
src/main/resources/static/js/things.js
Ensure you are calling your static resources from pages that are under the spring boot template folder, which is in src/main/resources/templates
Always refer to your resources using the thymeleaf tag, because this way no matter the port you are running your application, it will always load properly.
src/main/resources/templates/example.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- CSS -->
<link th:href="#{/css/things.css}" rel="stylesheet"></link>
<!-- JS -->
<script th:src="#{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>
If still not working, try to use the inspect from Google Chrome, go to Network tab and check what error is returning from your css and js files, then comment here.
Assuming you have css and js folder under static folder then use it like this -
<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>
you might wanna take a look at these too -
https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js
https://www.baeldung.com/spring-mvc-static-resources
Worth noting, make sure you have thymeleaf dependency(ies) and tags appropriately.
So, I was using the BootstrapCDN loader up until now, but I would like to just download the files and use them locally without relying on my internet connection, but the styles won't load. I only need the grid by the way.
I am using reactjs with material ui and bootstrap's grid -> project structure
I changed the stylesheet link and script to point to my files and I also changed the jQuery and Popper.js tags accordingly.
CSS
from
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"...>
to
<link rel="stylesheet" href="../src/bootstrap/sources/css/bootstrap.min.css">
JS
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
now:
<script src="../src/bootstrap/sources/js/bootstrap.min.js"></script>
and the same thing with
<script src="../src/bootstrap/jquery-3.2.1.slim.min.js"></script>
<script src="../src/bootstrap/popper.min.js"></script>
while the link to bootstrap.min.css is in the <header> and all the others being in the <body> tag.
The grid doesn't work and everything is messed up. But if I include an import './bootstrap/sources/css/bootstrap.min.css'; in my /src/index.js file - the file where I have my private routes to certain pages - the grid actually works.
If I changed it back to cash bootstrap's css from the BootstrapCDN and specify the link as it was before, I don't have to include that import and the grid works flawlessly.
Am I doing something wrong?
EDIT: chrome shows the css file and all the js file being loaded with code 304 - not modified in the network tab
First of all: there's nothing wrong in keeping the CSS import in your JS file... what's wrong with it?
This is a common way to go in React.
About your specific issue: You are referring to a not existent file like ../src/bootstrap/jquery-3.2.1.slim.min.js. This because this path is valid in your source, but not in the final bundle.
If you are using create-react-app for example, you should put your resources (the bootstrap folder) in the public folder instead, so the used URL should be something like "/bootstrap/jquery-3.2.1.slim.min.js".
Even better: use the %PUBLIC_URL% variable.
See https://facebook.github.io/create-react-app/docs/using-the-public-folder
Firstly, I could not find any answers what would solve this (hope simple) issue. So I've just moved the whole website, all its pages and stylesheets to a new directory through my host and now it just cannot load any style for itself. I guess it's about a little problem but already working to find that piece but couldn't get at all.
So to simplify it, in cPanel's File Manager I catched all files and moved to an addon domain like below:
/www/public_html <--- This was the main directory but I moved it to
/www/public_html/addondomainname's directory
The above location is now the current for all pages like index, account, dashboard etc. and all of them are .php files.
Also, I call css sheets to individual pages like
<link rel="stylesheet" href="css/styles.css">
Note that too, there is no full-named links on single pages, I use all my links as they are in-page like so:
Help
Would be just
Help // Or without the DOT and SLASH
And finally I use BS 3 and Font Awesome as sources of my website. I could say it relies on Bootstrap mainly and yes, I included all necessity of script and js implementation within the .
Full code of BS and FA in index.php:
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried linking the css like
<link rel="stylesheet" href="mysite.com/css/styles.css/>
But both, with or without the mysite.com href did not work. And yes, the addon domain's directory structured like the root (after public_html/addon) contains index.php, dashboard.php, otherpage.php etc. and folder called css holds all sheets what I would like to use.
Any suggestions would be appreciated guys!
Can you try loading the CSS in the following methods:
<link rel="stylesheet" href="http://www.example.com/css/styles.css" />
Or try:
<link rel="stylesheet" href="/css/styles.css" />
When loading from your addon domain e.g. http://www.example.com
I'm so sorry to everybody who wasted his/her time trying to help me. The issue occured by my stupidity and everything was just fine. What I did is like I ensured that preventing hotlinking my files e.g. jpg, gif and such as CSS does really work. I've just removed the extension of css to be prevented from hotlinking and it works like a charm. Really, sometimes people do not know what are they doing and again I'm sorry who answered my question!
PS: We should log ourselves what are we doing while remaking any of the projects, stuff or materials.. :)
Best wishes,
Christian
I host a website, and I need to hide a script src. For example,
script src="main.js"
would need to be
script src="main.js"
but it would be unclickable. I realize this isn't the most well phrased question, but how can I keep the user from seeing the JavaScript?
You can't present JavaScript to the browser and then hide it from the user; it's just not possible. The best you can do is obfuscate it and make it difficult for the casual observer to decipher, however it won't stop a determined user from de-obfuscating it.
I found a node.js npm plugin that can hide any src="*" & href + content
https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js. You can watch youtube guides for installing and using node.js
If you create enviroment 1 time you can load cool stuff with npm
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.