I am very new and green so please forgive the basic question.
When I create a site using Bootstrap I believe that I include the link to the Bootstrap CDN file in the head section of each page and I also include a link to my own CSS style sheet. Is that correct? Or can I put the cdn file links in my style sheet and then just put a link to the style sheet in the HTML head section of every page?
Same question re JavaScript. Do I link to the cdn file on every page of my site?
It is always good to include the js and css cdn links in every page or u can download these and add it to your project and include as you include your stylesheet.
Don't add cdn link to your css.
It depends on what you want. Are you going for page-speed?
If you want to optimize your website for page-speed I recommend combining both the CSS and JavaScript files in to single files (there are tools to automate this process). Also if you really want to optimize your website for page-speed you can apply both the combined CSS and JavaScript dynamically, by putting the following snippet just before the closing body tag so that the HTML can be rendered before executing the Javascript:
<script type="text/javascript">
function (sources) {
for (var i = 0; i < sources.length; i++) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = sources[i];
head.appendChild(script);
}
})([
'//domain.com/combined.js'
]);
</script>
Note that the JavaScript files are not loaded in synchronized order, but using a single combined script it doesn't matter.
For the sheets I use the following algorithm:
Determine if it is the first page view of the session:
If so, inline the combined CSS in the head tag:
<html>
<head>
<style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
</head>
</html>
If not, just include the CSS link in the head tag:
<html>
<head>
<link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
</head>
</html>
Then you can force to cache to CSS style on the first load by executing a XMLHttpRequest, for simplicity I use jQuery here:
$(document).ready(function(){
var href = "//domain.com/path-to-combined-style.css";
$link = $("link[href='" + href + "']");
if ($link.size() === 0) {
$.get(href);
}
});
You can put this in the combined JavaScript.
Note that you won't be able to use the speed advantage of the CDN. To solve this you could publish your combined resources to your own CDN. You will loose the possibility that the user has already cached bootstrap though.
Ofcourse this whole process requires some knowledge and experience, so you might want to consider using a tool such as CloudFlare, which does a pretty good job optimizing your website.
Related
Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="spectre.min.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
What if I want to use a Browser.Document instead, or even a Browser.Application ?
When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?
If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.
I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).
I am working on a chrome extension, written in React, and attaches itself to the page using a shadow DOM element. Inside I am loading the extension's logo and a content stylesheet.
However, it was reported that the extension was not loading properly and have pinpointed that any resource from web_accessible_resources (e.g. chrome-extensions://...) were being unmounted from the page on certain sites (e.g. https://www.skechers.com/).
In a work-around we ended up serving the content from our CDN, which works fine. Still wondered if anyone knew why this didn't work on a few sites.
I also wrote code to see if it removes the stylesheet and then loads the CDN version, just to test it out.
const onStylesLoad = (loaded) => {
const sheet = loaded.target.sheet
setTimeout(() => {
if (!sheet.ownerNode) {
console.log('FALLBACK', sheet);
setFallback('https://cdn.***/themes/browserExtension/content.css');
}
}, 1000);
}
// And later in the render...
<link rel='stylesheet' type='text/css' onLoad={onStylesLoad} href={browser.runtime.getURL('content.css')} />
{fallback && <link rel='stylesheet' type='text/css' href={fallback} />}
The extensions stylesheet does load, but then is immediately unmounted, which is how I am able to detect a moment later that the ownerNode is null (onLoad its attached to the link).
I am fine with the work-around, it just irks me that packaging any content is made moot, since we have too point it to a CDN regardless.
If you want to store the css files locally, rather than from a CDN, you could minify the css files, then store them as a string in your js files and insert them into the page by creating a style element on document ready. I guess they probably wouldn't be able to reference the local images though, but it seems you're not able to anyway
I added this JS script to twig template:
<script>
var images = JSON.parse('[]');
</script>
but after compile the code changed to:
<script type="d7fe36345345345fc57a-">
var images = JSON.parse('[]');
</script>
Browser not do js code, I see error: images is not defined.
Why type="d7fe36345345345fc57a-" is added to script tag and how to avoid it?
I found the reason.
Cloudflare add this code to tag.
The solution is o change setting on Cloudflare.
this is a small issue that I don't know how to exactly ask, but basically what's happening is I uploaded a custom opentype font, but loading it on the site will leave an empty gap for a couple seconds before loading the actual text. I've seen a couple sites that attacked these issues by loading a local font before changing into the custom font, but I lost track of these (rare-ish) sites to find out how they do it.
How would I fix this issue? Will I have to use some form of javascript to accomplish this task?
Thanks in advance! All answers appreciated!
it`s good question :)
Read this http://paulirish.com/2009/fighting-the-font-face-fout/
And add into or file-script
(if you addded #font-face in your css...):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//load fonts
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();
});
</script>
i prevent fout creating a css file only for the font-face rules and use the link tag in the header of the page just before linking my master css file
I got "dump" isp that always cached internet pages and its css for at least 1 day.
Although the css / js in the server changed, the presented css are not changed (i have been clear my cache everytime)
how to "tell" my isp not to cache some files like css and js ?
thank you !!
at the moment: i'm using proxy to check a under developed web so that it don't get cached ..
The way Stack Overflow itself solves this problem is to add a version parameter to the CSS and JS URLs, which refer to the version of the referenced files:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=4542">
Every time the referenced files change, the href attribute of the link tag is updated in the HTML code, thus supporting caching and updated referenced files.
You could try to append some random string to every request of an external file like:
<link href="/css/style.css?cachekiller=1337" media="screen" rel="stylesheet" type="text/css" />
where the 1337 in the above code should be generated randomly for every request e.g.
<?php time() ?>
or something
You can include these documents directly in your HTML files, between <script> or <style> tags. It will obviously make all your HTML files bigger, but that's basically what you're asking.
It's the only way you can be 100% sure that your CSS and JS is not cached at all.