After signing up for font awesome, I get a script like the one below, which I have to use to use fontawesome in my project. My concern is the censored part which is some numbers that I believe is personal to me. In the tutorial I watched, the creator censored that part aswell. Does this mean that it is unsafe to use this link in real projects because other people can copy my link and "use my account"?
<script src="https://kit.fontawesome.com/[CENSORED].js" crossorigin="anonymous"></script>
I also saw a tutorial using a link from CDNJS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
I am not familiar with CDNJS so I wonder if this is a safer option? Or what even is the difference in terms of what is more performant on a real site?
CDN is safe to use and also its easy. you just need to go to their website and find CDN link and copy it in your project (version 6 does not support CDN and you have to use kit)
read this article to become familiar with kit, I think its safe and you should not be worry
font awesome kit
Related
On some web tutorials I've seen people download the CSS file (e.g. Bootstrap) from online, and include it as an internal CSS.
<link href="<c:url value='/static/css/bootstrap.min.css' />" rel="stylesheet" />
On others they simply include the link to it, as an external CSS.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
I'm just wondering what are the pros and cons of each are?
there are a couple pros and cons.
CDN Pros:
It is possible the user has already downloaded it and has it cached so will not need to reload it for your site.
faster dev time (saves like 45 seconds)
may be, probably not - but can be, updated.
CDN Cons:
If you host the files yourself you know they will always be available when the rest of your site is available. --on this note, it is occasionally the case that where I work (DoD) the domain of the site I am visiting it allowed, but that of a CDN they are using is not, then the page comes in unstyled, or with no javascript running.
may be, probably not - but can be, updated.
I personally prefer to download and serve them myself (css and js). I remember a time when the internet was not so speedy and a whole page would wait while something remote loaded.
I was making a website in which a link is clicked. It then goes to a new website. I was coding that Website in html and css. The code worked, except the css didn't, why? Here is my code for the link part.
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="C:/Users/Osprey/Documents/Wolves Web Html/Notepad++/Guess_style.css">
<title>Guess</title>
</head>
<header class="guess_the_card">
<h1>Guess</h1>
<p>What's that card?</p>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<main>
<section>
<header>
<h2>Guess</h2>
</header>
<article>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx0pwiW_DP9LMCGohHDhDPzQ7E80Dt8Ea08m4Adpe3tGaYqU8R" alt="question mark" height="350" width="400">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_FodQOfRQnVYUULNy-9YGh3Wm-naW10nEk0mCv3qi_rW7c4o7Mw"alt="card" height="350" width="400">
<h3>How To Play: </h3>
<h4>Players: </h4>
<p>2<br><br></p>
<h4>Objective: </h4>
<p>Be the first to guess the other player's card.<br><br></p>
<h4>THE DEAL</h4>
<p>The deal is extremely simple. It's just two easy steps! First you get a deck
Then each player picks one card. The deal is done. See, I told you it's simple.<br><br></p>
<h4>THE PLAY</h4>
<p>After the deal, the youngest player asks a question to the other player. This question can be like is your card a royal?
Or is your card lower then five? The other player answers the question and then asks a similar question. Once a player thinks
he or she has eough information to guess, they guess the other player's card. For example, is your card a king?(If answer was
yes then during next turn player responds by asking) Is your card a king of diamonds? (if not, then players keeps guessing turn
by turn until one player gets it right. That player then wins.)</p>
</article>
</section>
</main>
In linking your css, change to
<link rel="stylesheet" type="text/css" href="C:\Users\Osprey\Documents\"Wolves Web Html"\Notepad++\Guess_style.css">
instead of slash, use backslash and if you still want to use space in your folder, please put quote or make your folder without space.
<link rel="stylesheet" type="text/css" href="C:/Users/Osprey/Documents/Wolves Web Html/Notepad++/Guess_style.css">
A couple of things.
First, never use an absolute link to a css file that is on your c: drive.
Second: You have spaces in your Website Folder.
Wolves Web Html
Rename your folder something like wolveswebhtml, or wolves-web-html, or wolves_web_html.
Third: How come your linking to a stylesheet inside of notepad++?
I don't think i've personally have ever seen that. I think you should read up more on beginning web development and how to structure your folders and using relative linking for your css files.
Fourth: I suggest creating a brand new folder somewhere, it looks like you like to work in your documents folder.
Name the folder WolvesWebHtml
Use this folder for all your files.
Example. Inside the folder you might have>
index.html
css/ < folder
js/ < folder
images/ < folder
etc....etc..
Place your stylesheet in the css folder, and then using relative linking, you can link to your stylesheet by using.
<link rel="stylesheet" href="css/Guess_style.css">
Will make life a lot easier.
You don't need to use text=text/css anymore when linking to css files.
I suggest also that you ditch notepad++ and use a better free editor such as brackets. It's free, open-source, and runs on every operating system. Very easy to learn.
I suggest you read more on the basics of setting up a website, html, and css. Many tutorials out there. Best of luck!
welcome to Stack Overflow, and welcome to web development, too. You might get some flack for the simpleness of your question, but to a beginner, things can be confusing.
The url referenced in your style tag is to a file locally on your computer C:/Users/Osprey/Documents/Wolves Web Html/Notepad++/Guess_style.css notice that this is different that what you might see at on a website on the internet http://example.com/file.css. Your browser likely doesn't know how to find Guess_style.css because it doesn't understand what C:/... means.
While prefixing the link with file:/// may work, it can often be blocked by browsers for security reasons. The best solution to this problem is to reference the file locally to where it is being called ./Guess_style.css and to use actual server software on your computer to serve and access the website you're developing.
Your computer may already have some software like that installed, such as Apache, or IIS. If you would like a very simple solution, I would recommend using a tool called NPM and installing a very simple server called http-server. This would allow you to serve the files from your computer as if they were from an actual web server and will greatly help in your learning. Good luck!
When I'm surfing on Internet I do like to have a quick look at the code of at least one page before leaving websites I visit. But there's something I see often and ( that may be for security purpose but I want to be sure) is that the name of assets (js, css, and so on) can contain a randomized part.
This is an example in the source code of a page from GitHub:
<link rel="stylesheet" media="all" href="https://assets-cdn.github.com/assets/frameworks-0d3df748b8f66933615db469504dcd2c686fccb2772bc4e7263abb77014b7bc3.css" crossorigin="anonymous">
Can anyone explain the reason of that practice, please?
I think the Github developer's can give the best answer of your question.
But in my opinion it may be the version name and encoded with any hashing technique so no one can see the actual name is.
It is best way to hide the originality to the users, bots, crawlers, etc.
May be they are handling logs of each version with its obfuscated name, because in the software world, there is need of history from version to version.
Even, I found some are using javascript eval() after the obfuscation compressed code/script so that no one can use their code directly by just copy and paste.
Our agency has been contracted to develop a few pages within an existing CMS. I would like to use the Twitter Bootstrap framework to scaffold these pages. However, I am worried about conflicts with the existing CSS on the site for the templated areas that we are not modifying.
Rather than bring in Bootstrap styles for the entire document on those pages and manually troubleshoot all style conflicts, I am wondering if it is a better solution to compile Boostrap CSS with a selector prefix (#body-content for example) to isolate those styles to the region of the document we are modifying.
Are there any risks to this approach? Any reason why this approach might not work or should be avoided?
As per your questions
Are there any risks to this approach?Any reason why this approach might not work or should be avoided?
See, the only issue you will have is when you get an update to the bootstrap framework, because you use your own custom compiled css, you will have to recompile it for the new version.
If you stick to the original css, you simply replace the current css with the new version.
and everything falls into place.
About conflicts, i would suggest that you make changes to a custom css file that overides the boostrap.css, so that you get the chance to check what is actually conflicting.
<link rel="stylesheet" type="text/css" href="boostrap.css">
<link rel="stylesheet" type="text/css" href="custom.css">
I'm currently utilizing the Twitter Bootstrap framework to create a personal website.
I've found, however, that the site looks better with slight tweaks to some of the CSS classes; does it matter (not in terms of functionality, but convention) whether I make these changes within the provided bootstrap.css file or should I move them to a separate file containing solely my changes?
Actually, it is not recommended to change any framework! For your case, if you need to make a modification it is recommended to run your CSS file right after bootstrap's. As a result, the browsers render the default CSS of bootstrap and then your modifications without any conflict.
For example,
<-- include your bootstrap file -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<-- Your modifications -->
<link href="yourcssfile.css" rel="stylesheet">
hope this helps.
From maintenance point of view, you should put your custom tweaks in a separated CSS file, so (for example) if you'll upgrade/downgrade your Bootstrap version your changes will still be in-tact.
You should also consider, that when dealing with CSS Frameworks, usually you'll have the dev/debug version and the production/minified version. if you change the library code you'll have to take care of all the formats as well (unless you're performing the minification/bundling yourself).