I'm currently working on developing a website on my computer, and I've been very successful at working on my html and external stylesheet for some time. The results don't come out the way I want, but at least the code is doing what I tell it to do.
However, I've been trying to incorportate PHP into my pages and I've since downloaded MAMP to my computer and changed my pages into .php pages so that the php pages I want to include are included. I managed to do all that just fine and yesterday I went back to work on my layout some more.
Suddenly, none of my webpages, either the .php version or the original .html version, are interacting or responding to changes I make in my .css file. It all worked fine before, but now suddenly it wont respond. I've tried turning my MAMP server off, I've tried removing the .css file and then restoring it (thinking somehow it was getting stuck on old code?) and I've tried tweaking the code in the original folder I was working out of. Not that it should matter, and it didn't.
Am I missing something?
When I downloaded MAMP, I had to copy and more my original files to the "htdocs" folder so that my local host could have access to the files. I would understand if there was something wrong there, but it isn't responding in the original files either.
In addition to changes not being acknowledged (or perhaps because of), my navigation bar is responding to code that doesn't exist.
Is there a way to fix this that does not involve starting over?
This sounds like a caching issue.
There are tags you can use that will help. Also make sure your browser cache settings aren't on Automatic, but Every visit to the page.
I have to use all these to try to cover all the bases:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
Related
I have a web application published on IIS. All of my JS files are called from my static html file called "Index.html". In that html file, I call each JS file with the <script> tag, and in order to manage our versions and perform updates without user's history and cache deleting, I've added the ?v={version} at the end of each JS file's URL as the following:
<script src="./app.js?v=20161226.1" />
After multiple version updates, I've noticed that the users still need to refresh the page in order to get the latest Index.html file. After searching the Developer Tools of chrome, and looking in the Network section in the Developer Tools, I've managed to notice that the Index.html file is loaded from the cache (shown the "(from cache)" sign in the Network).
After searching the web for any solution for uncaching .html files (Because there is no ?v={version} for my .html file), I've found that adding:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
isn't solving the issue and the my Index.html file is still loaded from the cache.
I'm updaing my web application each two weeks and I can't afford myself letting the users deleting the cache and history each version update because the new and latest .html file is loaded because it is cached.
The only thing that helps is refreshing (F5) and then the Index.html file is reloaded (Not loaded from cache and the latest version of that Index.html file is shown). But if someone types the url and enters it in the URL-bar, the Index.html is still loaded from the cache.
Is there anything I've done wrong and should add anything else?
Is there anything to do to solve this issue at all?
Thanks!
Putting a query string on the end of a URL is a (good) hack to allow you to set the HTTP cache control headers to cache for a long time for infrequently changed resources and still force the new version to load on those occasions that you do change it.
If you are frequently updating your HTML, then just set the cache control headers to tell the browser to check for updates more frequently. Take advantage of Etags or If-Modified-Since instead of depending on an Expires header set far in the future.
NB: You have to use real HTTP headers. <meta http-equiv> is a bad joke.
How do you tell the Chrome Browser to not use the cached version of your site when it is redirected from a different location?
We have site www.example.com which has the normal cache busting techniques meta tags and adding ?a=b in your file and http calls however.
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<script src="src/app.js?v=3.21.54"></script>
You update your code and all the customers get the new not the old, this works great!
Then SharePoint happened...
Your company got SharePoint which has a link to your site www.example.com but you found something odd happening Chrome uses cache when it is being redirected. Now with your bustfu failing what does one do?
I am using Microsoft webmatrix to do some HTML coding. But even though I changed contents of my HTML, the browser is still showing my old page.
Please see screenshots. I even tried restarting webmatrix, but still old page is shown.
Still shows old page:
Why? I clicked save all too.
The content of the page is being cached by your browser.
If you want to prevent this behaviour add the following to your <head> section:
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
I'm trying to make a Windows 8 tile for my website using the following code:
<meta name="application-name" content="Home | <?php echo bloginfo('name'); ?>" />
<meta name="msapplication-starturl" content="<?php echo bloginfo('url'); ?>" />
<meta name="msapplication-navbutton-color" content="#349ed5" />
<meta name="msapplication-tooltip" content="Tooltip Test" />
<meta name="msapplication-TileColor" content="#349ed5" />
<meta name="msapplication-TileImage" content="/logo_w144px.png" />
The application-name, msapplication-starturl and msapplication-navbutton-color properties work fine and update with just a refresh of the page - no re-pinning necessary - but the msapplication-tootlip, msapplication-TileColor and msapplication-TileImage are being completely ignored.
Notes:
This is a WordPress site
IE is also ignoring the favicon for this site
restarting the machine did not pull in the image
I am running this site from a XAMPP server on a different computer, accessing it via IP and port numbers
For another local site, the favicon is picked up but the same three msapplication meta tags are ignored and the favicon is used as the tile image
Does anyone have an idea what's going wrong and how I fix it?
[edit]
I have tried putting the image and settings through Microsoft's buildmypinnedsite.com code generator and using the image and code it spat out, but that made no difference.
The website needs to be accessable with an public Adress - is it an IP or an Domain, it can't be a local IP Adress as localhost or 127.0.0.1
This may be the issue: content="/logo_w144px.png" .
It most likely cannot find the image. Try changing the path or adding fallbacks to jpg.
content="logo_w144px.png"
content="../logo_w144px.png"
content="../img/logo_w144px.png"
...
Are you sure your msapplication-TileImage is 144x144 px .png image ?
You can see that (Source "Community Additions" part) it is a must, also I had the same problem, when I changed my .png size 72x72 px to 144x144 px problem was solved.
Source ; Customizing the Site Icon (Windows)
I've been trying to so this today and have found that the image will not display if your site is running under HTTPS.
HTTP works fine...
I can't believe I'm the only person to discover this but have yet to find any info on the web about it.
-- Edit --
HTTPS does work, but only if you have a fully trusted certificate - not a self-generated one!
I have just ran into this issue with a similar setup. It ended up being caused by using appendChild (or .wrap() in jQuery) on an <iframe>. In my case it was because I use FitVids.js.
Reported the bug here
The tile tags work properly on any page without an <iframe> being modified with appendChild in JS.
I've done a little experimentation with this stuff, albeit with the Customer Preview release, and have found it to be very unreliable. A couple of key points:
If you have a favicon at all, that will always be chosen as the image
Whatever cache is being used for the tiles is separate from the browser cache, and it doesn't seem to be possible to force a refresh, so it's very hit or miss whether or not you see any updates you might make in configuration
How do you ensure the tile image will be used in place of the favicon?
<title>{$pageTitle}</title>
{* Favicon and Apple touch icon *}
<link rel="shortcut icon" href="{$THEME_URL}/favicon.ico" />
<link rel="apple-touch-icon" href="{$THEME_URL}/apple-touch-icon.png" />
{* Windows 8 tile *}
<meta name="application-name" content="{$siteTitle}"/>
<meta name="msapplication-TileColor" content="#3380aa"/>
<meta name="msapplication-TileImage" content="{$THEME_URL}/tile.png"/>
I'm using the Twitter Card Preview tool to test my Twitter Card set up.
<meta property="twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="I can't speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, "Why do atheists celebrate Christmas?" my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta property="twitter:creator" content="#kennywyland" />
<meta property="twitter:title" content="Why do Atheists celebrate Christmas?" />
When I use the above meta tags, the Preview works and I get the expected results. When I try to add a twitter:image tag though, it fails. Here is an example:
<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />
If I include a twitter:image meta tag and I click the Preview button, it spins for a bit and then gives me the error:
Looks like something is technically wrong.
Please try again in a few minutes.
I've tried other images on that site with no success. I've tried other (non-drupal) sites hosted on the same apache server to make sure it wasn't a drupal problem:
<meta property="twitter:image" content="http://www.journalscape.com/kenny/images/acupuncture-kenny-2003-08-20-small.jpg" />
If I copy one of these images to a different machine with a different apache server, twitter sees it and it works just fine. Twitter shows it in the preview.
I have checked my robots.txt on both sites. Nothing in my robots.txt should prevent Twitterbot from fetching, but just in case I've explicitly added the code they suggested:
User-agent: Twitterbot
Disallow:
However, I am watching my apache web logs scroll by and Twitter never attempts to fetch the image. When I click the preview button, I would expect to see an entry in the access log showing twitter fetching the image... but nothing. I've tried several images to make sure it wasn't an issue of caching.
What am I doing wrong?
EDIT: I found one of the sites running on my machine (same apache) works just fine. If I use this image:
<meta property="twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />
Then twitter fetches it immediately. I don't understand why one works and the other doesn't.
As it turned out, the problem was a timing one. After adding the robots.txt file, I needed to wait a couple of hours for Twitter to see the new robots.txt and then it started fetching my images just fine.