Static servers are (partial) for not sending the main site cookies for every request.
Also they help with splitting connection( subdomains) so that the browser will be able to download in parallel.
But I looked at viewsource of the http://winterba.sh/copacabana
And in the head section they used the same facivon name but via specific location
<link rel="shortcut icon" href="http://cdn.prom.sstatic.net/WinterBash/img/favicon.ico">
Why did they do that ? what benefit does it provides ?
This is suppose to be when I want to load the favicon but with a different name .
But why should i do it ? the browser searches favicon.ico automatically. ( and they didnt rename it)
Once the favicon is downloaded , the next time it will be taken from the cache...
so ...why ?
It's a CDN. The whole purpose of a CDN is to serve static files fast. The file is probably called favicon.ico because that's what favicons are usually called, and is not relevant.
Related
I am writing my first web application using Flask and SQLAlchemy.
My CSS file is currently saved under a static folder and the styling is correctly applied to my webpage
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
However when I try to update it (for example changing the fontweight from bold to normal) it will not show.
I could even remove all the content of my css file and my website will still look the same (as if the content was never deleted).
The only way I found to make updates was to create a new file "main2.css" and update the url link from the HTML file which is very inconvenient.
Has anyone found a better way?
It sounds like your CSS file is cached. You can test this by changing 'main.css' to 'main.css?something'. Some people append a date string or other to their CSS file so it busts cache periodically.
It's possible you're getting the cached version of your CSS. After making updates to your CSS file, have you tried doing a hard reload? How you do this depends on the browser, but for Safari this can be done by holding Shift and clicking the Reload button.
I had the same issues and I realised I couldn’t keep asking my users to do a hard reload. Constantly renaming my static folder (where all CSS/JS files were kept) seemed error-prone from a production devops perspective. Then I found this addon called flask-static-digest, which was adding md5 hashes to the file names as well as gzipping them. It is a good fix for my production server.
https://github.com/nickjj/flask-static-digest
Another solution I found was really helpful during testing is to do a full reload in your browser (in my case Google Chrome) by shift-clicking the reload button.
I'm building a website locally using Apache, MySQL and PHP. I have different subfolders and I'm trying to give one absolute reference to my css file from my main header.php includes file.
Inside of header.php I have:
<link href="/Users/nicolauria/Sites/sd/css/style.css" type="text/css" rel="stylesheet" />
The css file does not load correctly. Developer tools gives me this message "The requested URL /sd/css/style.css was not found on this server."
Any help is greatly appreciated!
Nico
You're loading this via HTTP? Then you're bound to use only "http-space" paths, which means you can NOT include the site's document root in urls. e.g.
your site's files are physically on the server in /home/sites/example.com/html, which is defined as the document root of the site. When you visit the site and request a file, e.g. http://example.com/foo/bar.html, the web browser will send over:
GET /foo/bar.html
and the webserver will tack on the document root, producing
/home/sites/example.com/html/foo.bar.html
But note that this path applies ONLY within the webserver itself. It will never be accesssible to you in this form. You can only specify directories/files within the site's document root. That means if you requested something like example.com/home/sites/example.com/other/file.html, you'd force the server to produce /home/sites/example.com/html/home/sites/example.com/other/file.html, etc...
If you want to provide an absolute URI then you must:
Include the scheme (file://)
Accept that many browsers will refuse to load file: data onto a page loaded via http:/https: for security reasons
Accept that users on other computers won't have access to your filesystem
It is far, far better to host all the resources you need on the webserver.
In Which location your header.php file is located? I mean If you have your header.php file in sd folder than use your code like this <link type="text/css" rel="stylesheet" href="css/style.css" />
Maybe this link will help you alot
http://www.htmlhelp.com/reference/css/style-html.html
The default favicon.ico that gets included in a WebMatrix product is added in _SiteLayout.cshtml like so:
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
That icon does not fit my app, so I converted a jpg I created at http://www.coolutils.com/Online/Image-Converter/.
I renamed favicon.ico to YourMotherWearsCombatBoots.ico and renamed the image I had
converted to favicon.ico (after adding it to my project).
I thought that my new .ico file would get used in the browser's tab for the page/site. But, alas, no! The old .ico file is making like the Raven of Poe's poem - it simply will nevermore go away. What's up with that?
UPDATE
Note: If trying this out using firefox or IE as the browser doesn't work (currently testing with Chrome), I am going to bountify this question for 50 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.
Clear the cache :)
As long as the path to the file (including the filename) is correct, and it is a .ico file, it should render.
That having been said, try not using ~ maybe, since it is only an html tag and it uses / to find the root of the site.
I've done this many many times, and never had any issue with any ico in any browser.
Honestly the cache is the only thing I can think of.
----------------------------------UPDATE----------------------------------
I'm expanding my answer to show an example. This is a scenario I have just recently set up and it worked perfect first time (as it does for me every time).
The HTML:
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
The Directory Structure:
The Result:
Since I've been using icons for my sites, I have not noticed that there need be anything else. As far as I know this is all that should be involved with getting this to work as expected.
If this still does not help, do the following:
Re-verify the path, check it one folder at a time.
Delete the old Microsoft favicon entirely, unless you plan on using it for something else (which I doubt).
Open the ico file you are trying to render. Is it really the picture you expect it to be?
Manually (Ctrl+Shift+Del) clear the cache (especially for Chrome) and try again (if you're gonna debug in Chrome, you might as well get used to doing this regularly [okay, actually it doesn't matter what browser you use, you'll always have to do this when something doesn't render the way you expect, so that you'll know it's not a caching issue]).
Make sure you're looking at the right site, when it's open in your browser (i.e., make sure that you're not editing your site locally and pulling a non-updated version from your server or something).
Other than that, I can't think of anything else it could be.
Most likely an issue with the browser rather than anything to do with WebMatrix or code.
I understand that you can set up caching on your own webserver, but how do you leverage caching of static assets for CDNs. For example
FAILED - (No max-age or expires) - http://fonts.googleapis.com/css?family=Bree+Serif
FAILED - (No max-age or expires) - http://fonts.googleapis.com/css?family=Open+Sans
and files being hosted on my Amazon S3 are also not caching
My HTML looks like
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
1.Copy-Paste the font ( or font family ) CSS file.
2.Put the resulting FLAT CSS file at a location & naming convention of your choosing, somewhere within your web app or a centralized known location that you can always get to.
3.Download each of the .ttf files, rename them according to some sensible convention, inclluding the actual ".ttf" file extension. The mime-type should be included in the binary of the file itself. ( This is a good theory. If any knows how to test it let me know. )
4.Place those, again, somewhere sensible that you can access. A "ttf/" directory in the directory that you placed that CSS file in step 2 seems pretty darn reasonable to me.
5.Edit the CSS to reflect the new URL's of those .ttf's instead of Google's "dynamicized" URL's.
6.Edit the original CSS include to reflect the new location of your flat CSS file.
Enjoy fast download times on Web Fonts.
When opening a file from your hard drive into your browser, where is the document root? To illustrate, given the following HTML code, if the page is opened from the local machine (file:///) then where should the css file be for the browser to find it?
<link href="/temp/test.css" rel="stylesheet" type="text/css" />
You can, but probably don't want to, set the document root on a per-file basis in the head of your file:
<base href="my-root">
It depends on what browser you use, but Internet Explorer, for example, would take you to the root directory of your harddrive (eg. C:/), while browsers such as Firefox does nothing.
On a Mac, the document root is what you see in the window that appears after you double click on the main hard drive icon on your desktop. The temp folder needs to be in there for a browser to find the CSS file as you have it written in your code.
Actually, you could also write the code like this:
<link href="file:///temp/test.css" rel="stylesheet" type="text/css" />
Eric, the document root is the folder in which your file is, wherever it may be.
As far as local, static html goes, unless you specify it, most browsers will take the location of the html file you are viewing as the root. So any css put in there can just be referenced by it's name only.
The lazy way to get the correct reference for your css file is to open it in your browser. Then just grab the url that you see there - something like: file:///blah/test.css and copy that into your stylesheet link on your html: <link href="file:///blah/test.css" rel="stylesheet" type="text/css">
Either that or you can just take the url for the html file and amend it to refer to the stylesheet.
Then your local page should load fine with the local stylesheet.
If you're interested in setting the document root, you might look at getting a web server installed on your machine, or, if you already have one (like Apache or IIS), storing your project-in-development in the web root of that server (htdocs in Apache, not entirely sure in IIS). If you'd rather leave your files where they are, you can set up virtual hosts and even map them to addresses that you can type into your browser (for example, I have a local.mrwarshaw.com address that resolves to the web root of my personal site's development folder).
If you're on Windows and don't want to mess around with setting up a server on your own, you could get a package like XAMPP or WAMPP, though bear in mind that those carry the extra weight of PHP and MySQL with them. Still, if you've got the space, they're a pretty easy drop-in development environment for your machine.