I'm using Backbone.js to connect to a Django backend via tastypie. I've got things figured out for my dynamic content, but I am wondering what to do about my FAQ / About / Contact pages. Because I want to have an uninterrupted user experience, no waiting for the page to load in between links, I'm wondering where to load the data for these flat pages from.
I don't want to overarchitect here, because these are brochure pages with non-dynamic content. In short, layout is important, and they don't need a CMS.
So do I have the pages already in my main index.html, and just show them when needed? This seems dirty to me.
Do I have Django store the html for these pages in a Textarea set up to accept html, and spit the html out as JSON through tastypie when needed? Ugh, that sounds dirty to me too.
Or a hybrid where django only spits out the relevant data to fill in the html that's already defined in my index.html-- This sounds correct, but like way too much work, I don't want to define db models for pages that as I've said, don't need a CMS.
I'm hoping I'm way off base with all these approaches, and you have something much better to solve my dilemma.
Your first idea of including them in the main index.html and showing them as needed seems quite reasonable, but has a couple drawbacks:
Your index page is heavier and thus slower to load than it needs to be
Your brochure pages aren't logically separated in your codebase
You can fix both of these by having the HTML for them loaded dynamically after the index.html loads. You'd still use the same client-side code to show the pages when the user clicks to them as if it were embedded in the main HTML file, but instead of including the HTML in the initial index.html file...
<div id="faq-page">
<h1>FAQ</h1>
...
</div>
have blank divs and an event to load them through AJAX after the main page has rendered. I'm not sure if you're using jquery, but if so, the code would look like this
<div id="faq-page"></div>
<script>
$(function() {
$("#faq-page").hide() // ensure it doesn't display too early
.load("/include/faq.html"); // async load the content from server
});
</script>
Now when the user hits the FAQ link in your app, the page will appear as fast as possible. If the page has had time to load (normally) it will show up instantly. If they happen to hit the link before it's loaded, it will show up as soon as the server responds.
You set up /include/faq.html however you'd like on the server side.
Related
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 ... :)
I have a multiplayer game where a server connects two clients to play against each other. It works well. However, now I want to add a welcome page where they add their username. I need to send this username to the server. However, the problem is, when loading the welcome page it makes a connection to the server (which is good). But, when i want to load the next page using
location.href = "index.html"
it is not working. In fact, it disconnects from the server and does not reconnect. How do I load multiple files after a player hits a button? And how do I keep these files under the same "client" instance? (without disconnecting). Thank you.
Since you have no code, let me take a stab at it. To expand on what #anderson said, Make sure you have your static files available to your app via something like
const staticCont = express.static(__dirname + "/public");
Where "public" is, is the folder directory of all your static files. This way, any link in your app(on the front end) that requires loading of whatever files, will be available to you.
Next, assuming this was done, also, assuming your game is on a singular page, lets say "mygame.html", if you want to load another html or other content into this page without losing/navigating away from "mygame.html", then on the users button press you are going to need AJAX to load in content.
as an example:
Create a dummy div that will hold your loaded content, lets call it
<div id="usrBioWrapper"></div>
Then say you have a button on your app that fetches a users bio.
Lets call this button
<button id="usrBio">Get user bio</button>
and the html you want to load is called usrBioPage.html, then you'd need something like:
$('#usrBio').on('click', function(){
$('#usrBioWrapper').load(' usrBioPage.html ');
});
Thats it. When the user clicks the button, it will load your content in that div. BUT remember, you must set the public directory in your app.js(backend node side) else it wont work.
hope this helps
Did you public your index.html file in Node js, to make sure your browser can access the file?
So while I'm making my first angular app, I see that the urls change for different pages, which is what's suppose to happen. So say I click a button and this
http://localhost:63342/angularSPA/app/view2/view2.html
changes to
http://localhost:63342/angularSPA/app/view2/view3.html.
What will the users see once I upload this all to something like heroku or my own domain. Everytime I route them to a page, will they see this long URL and will it change everytime I click a button or something?
you only need to upload what is inside the app folder. so this:
http://localhost:63342/angularSPA/app/view2/view2.html
will become this:
http://localhost:63342/view2/view2.html
if you put your index.html file in your root/app directory it will get even shorter:
http://localhost:63342/index.html
However, you can use a number of directives to achieve page changes without changing the url.
https://docs.angularjs.org/api/ng/directive/ngSwitch
https://docs.angularjs.org/api/ngRoute/directive/ngView
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide
https://docs.angularjs.org/api/ng/directive/ngIf
You could, but I don't know why you would, have your entire site be under index.html.
However, that means that the user's browser will have to load ALL of your 'stuff' before displaying the single page app. It also means you won't be able to use the power of routing.
Also, angular adds # in there.
Here is a good ui-router tutorial.
https://scotch.io/tutorials/angular-routing-using-ui-router
I have a view layout (main.cshtml) where I am calling an external javascript file. I have renderings (another cshtml files) which are included as placeholders to this layout(main.cshtml). example: two pages:
1) http://localhost/home/ has two renderings for Body placeholder
2)http://localhost/about/ has two renderings for Body placeholder
both home and about pages uses same main.cshtml, I don't want to load externalJS.js every time I navigate from home to about or vice versa. i.e;the externalJS.js should load once for entire application. Can I achieve it?
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
</head>
<body>
<div data-role="page" class="pageWrapper">
<header data-role="header" class="header">
#Html.Sitecore().Placeholder("Header")
</header>
<div class="wrapper" data-role="main">
#Html.Sitecore().Placeholder("Body")
</div>
<div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
#Html.Sitecore().Placeholder("Footer")
</div>
</div>
<script src="../../js/externalJS.js"></script>
</body>
</html>
If you are worried about the bandwidth usage and load on your servers from users downloading exernalJS.js each time they visit one of your pages, you're worries might already be solved by web browser caching. Basically the web browser saves a copy of html, css, js, image files, etc locally and reloads those if it needs to, rather than jumping back out to the network.
On the other hand, if the initial processing of externalJS.js is what you want to avoid, then something like Ajax (Asynchronous Javascript and Xml) is what you want. The idea behind Ajax is that you write Javascript to handle fetching new content from the network. So rather than the user clicking on an anchor and having their browser download an entirely new page, you would set up something for them to click on and Javascript would then send a request to the server, which would return some xml (or html, or json) and Javascript would then insert the new data into the existing page without the browser reloading anything or changing pages. Note that you may want to use Javascript to add the change to the browser's history since that won't happen by default. See here for an Ajax tutorial.
The technique to implement with Sitecore you may consider is called bundling as it does the job exactly as you want, and even more. It is a feature of ASP.NET which Sitecore is built on.
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. Bundles can unite several styles / scripts into one "file" to address this issue.
Pay attention to v parameter with a long hash stamp - that is version stamp so that it remains the same for the same combination of scripts / style in you bundle. As soon as it remains the same - it is cached by a browser and is normally requested just once for the first time, regardless of which page is called by.
<link href="/Styles/css?v=Za3K5TEVXIEtbh2FEp3kzkdlpWT7iVdGKSiEj6SVOaI1" rel="stylesheet"/>
There is also a technique called minification that comes along with bundles - you may not only "clue" several scripts to one combining file with a specific version stamp, but also minimize (compress) that file to take less bandwidth to transfer - quite handy on a high-traffic websites.
Here are useful links that will explain how to implement bundling and minification with Sitecore:
http://sitecorefootsteps.blogspot.co.uk/2014/01/implementing-bundling-and-minification.html
https://himynameistim.wordpress.com/2014/12/05/bundling-and-minification-with-sitecore/
http://jockstothecore.com/bundling-with-sitecore-mvc/
http://techblog.lbigroup.be/2013/08/21/adding-bundling-and-minification-to-a-sitecore-project/
Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.