uploading site files, index.html or home.html - javascript

just about to upload my first site and have just been doing some research into how to do this whilst I await my package to be upgraded to include mysql databases.
Quick question - do I need to name my homepage 'index.html'?, and therefore change every 'home.html' link on every page of my site to 'index.html'? I've also heard 'index.htm', what is the difference between html and htm?
From what I have read, this is good practice (well, even better practice would have been to call it that from the start!) but also that you can change the default page in the htaccess file. Is this correct, and if so, is there a downside?
I am not relishing the task of changing every homepage link, but if it is considered a better option, I will.
Thanks

Yes you can change the default index file and even the ordering. Some options are:
a) You are using server side scripting - php for example
Add this into a .htaccess file
DirectoryIndex index.php index.html
b) You are not using any server side scrpting
DirectoryIndex index.html
This way you do not have to deal with default values such as home.htm or index.htm

Browser will automatically open the "index" file. Though its true - you can redirect the browser to your home.html but it is always a better option to name your start-site index.html
about the difference between HTML and HTM... There is none.
Years ago, in DOS times, extensions were only 3 characters long 'htm'.
Now, we got longer extensions, like 'html' with 4 characters.

It's preferred to make it as index.html as index.html is a better practise than home.html.
Yes, you can change the index file via .htaccess and .html and .htm has no difference, it's just different extensions for the same HTML.

Yes you can have home.html, however, you will have to set your default site preferences in your web server to serve that instead of the default "index.html".
Whilst there is no difference it would be beneficial to have index.html, as it is the default and it will help you reduce web server config time if you are using clean-urls e.g. domain.com/contactus, domain.com/aboutus, etc instead of domain.com/contactus/home.html and domain.com/aboutus/home.html, etc.
Lastly, there is no difference between .html and .htm it is just a preference thing.

Related

Can I edit a file in any site and update the page?

I would like to know, is there a way to edit a Javascript file or a specific page, on any website, and refresh this page and show my changes?
For example, there is a website: http://example.com.
Many files are requested including a Javascript file:
http://example.com/assets/app.js
Can I modify this app.js file, and show my modifications when updating the page or is this not possible?
For example, save the file my cache? Or something like that?
and Thanks.
Normally speaking, you can't directly modify the files like assets/app.js, etc, since they are stored and read from the backend server of http://example.com.
However, you can still make custom changes to some specific pages/websites by scripts/styles injecting.
I think you might be interested in some browser plugins/scripts like:
Tampermonkey: https://www.tampermonkey.net/, Greasyfork: https://greasyfork.org/en, Stylish: https://userstyles.org and so on ... :)

Reload from server for all files

I know it's possible to force reload from server using location.reload(true). However, let's say I used that to refresh index.html. If index.html loads a bunch of javascript files, those are still coming from the cache for me. Is there any way to ignore the cache for the duration of a request?
My use case is that I'm doing AB testing on my app, and want to provide a way for users to go back to the old version if something isn't working. But some of the URLs are the same, even though the files between versions are different. It would be nice to be able to handle this in JS rather than having to change every URL on the new version.
There is actually at least 535 different ways to reload a page via javascript, FYI ;).
Have you tried to put document on front? document.location.reload(true);
Try also this other option:
window.location.href = window.location.href;
or
history.go(0);
Sure, both are soft reload, but seems to work in certain situation.
If nothing works, you have to append random data to the url (like timestamp) to force the download from server, bypassing the cache.
If you want to bypass browser taking js files from cache, you need to fetch from server not just files like script.js but rather script.12345.js When you update your file on server, you change file's hash number to let's say script.54321.js And browser understands that the file is different, it must download it again. You can actually use Webpack for this purpose to automate things. In output instead of {filename: bundle.js} you write {filename: bundle.[hash].js}

How do I bust the cache so users get all the new static files (eg. style.CSS, main.js)?

I'm deploying a whole new website redesign onto an existing domain. I will be manually replacing all files with the new files at 12:00AM, but how do I ensure users don't get a cached version of the old website (thereby breaking everything)?
Also, how do I change the sitemap so that the old one on google gets replaced?
There are several ways to bust a cache.
The easiest way is to add an expiration header to files of that type. This can be done in an Apache configuration like so:
<FilesMatch "\.(gif|jpg|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
You could also use a new query string value in the URL for each resource.
Another option is an updated version number within the filename that is routed to the update file.
You'll need to wait for Google's web crawler to index the changes. It's not something you'll have control over.
There are couple of ways , you can either use tools like webpack or plugins from gulp , grunt which will add a hash to the generated file name ,
So file name will be like this
someabc.RandomAlphanumeric.js
where RandomAlphanumeric randomly generated hash
If you are not using any build tool you can nema the file like
<script type="text/javascript" src="/folder/js/someFile.js?v1"></script>
Note the use of ? .Usually a time stamp is attached with the file name
If you are redeploying an entire site I doubt you want to add ?v1 to every file. And since your files are already cached I don't think that would be very effective anyway. I would look at the server level for an option. Most hosts have an option to disable or refresh your cache. That is your best bet!

Redirect from file based on referrer using JavaScript

Versions of this question have been posted numerous times, but none of the solutions I've found on this site have worked so far. I'm trying to redirect away from files, not web pages. I actually need to know if this is even possible, since I learned that PHP is incapable of doing this. Here's an answer from a previous question I asked:
The web server will first check if it exists and if it does, it will serve the file immediately. It does not go through any PHP code. Therefore you cannot write any PHP code that will intercept this request and block it.
We have a folder on our site with a path of /downloads/, containing files we don't want just anyone to download.
I want to put a script in our main JavaScript file that says:
If file is is /downloads/
If user comes from referrer allowed_domain.com, allow access to files in /downloads/
Else redirect to homepage or 404
My attempt (didn't work)
if (top.location.pathname === '/downloads/private.zip') {
if (document.referrer !== "http://www.allowed_domain.com") {
document.location.path = "/downloads/private.zip";
}
else {
document.location.path = "/404";
}
}
Constraints
I cannot use .htaccess. Our hosting provider is running Nginx, not Apache. I've tried using Nginx config code, but I have to send it to them to implement, and it didn't work and they won't help me.
And yes, I know that this is a super, super insecure solution for restricting access. My company is working on a more formal solution, but until then, I need to implement something temporary to deter users who lack the computer knowledge or motivation to get around the redirect, and this is pretty much my last option.
This problem is not solvable in JavaScript, even in the very limited and insecure way that you are proposing. The problem is that a request to /downloads/private.zip directly returns the contents of that file - it doesn't load any HTML page, so the browser will never see or execute that JavaScript code.
A way to solve this would be to have a PHP file that handles any request to that directory, checks whether the user has permission to see those files, and then returns the requested file or a 404. But for that you need some form of configuration, and you've already told us you can't do that either.
A third solution, one that is very silly but would work (for unsavvy users) in this very constrained situation would be to replace all links to the forbidden resources with a snippet of JavaScript that directs the user either to the file or a 404 page. However, from your question it seems very likely that you're trying to prevent access from users coming from sites outside of your control, in which case this won't work either.
Bottom line: This is not a solvable problem if you don't have the ability to configure your web server.

How to add some HTML to every HTML document served?

I need to add a script before the </body> tag, so instead of modifying all the pages, I was wondering if I could configure the server to add some HTML before that tag for every HTML document being served?
If you have PHP installed on your server, you can set up the auto_append and/or auto_prepend directives in the php.ini file or .htaccess. You can also set up .html extensions to be parsed as PHP files by Apache, so every HTTP request for an .html document is sent back with a header and a footer automagically included. If PHP is set up, try adding these lines into your .htaccess:
AddType application/x-httpd-php .html
php_value auto_prepend_file /var/www/public/foo.html
Apache can handle that using mod_layout
Here's a relevant article: Advanced Apache Headers/Footers
The most natural answer to your problem would be to use a server-side processing language such as PHP, CGI, etc. Those platforms give a lot more than just server-side includes. Speaking of which, if including something in an HTML page is just really what you need, you might be looking for Server Side Includes.

Categories