Explanation of issue:
Hi.
I'm developing a personal webpage using HTML and CSS. I have also incorporated Bootstrap and a number of its components to achieve responsiveness.
I'm using Locally linked Bootstrap file/folder (not the online CDN). I want to use Locally downloaded Bootstrap until I have finished development.
However, I'm having difficulty testing all the features of the site sufficiently, especially the carousel component which features multiple gallery photos, because it keeps refreshing on me and this is really disruptive.
In other words, while testing something or clicking through the photo gallery, before I go through a quarter of the entire photos in the gallery, the page will suddenly refresh itself, causing me to start my testing afresh and this never ends.
Question:
How can I disable auto-refresh on the site or at least to set it to a very large value, so it doesn't disrupt my work?
Thank you.
Answer:
I have finally figured out the solution.
While I was going through my HTML Code and reviewing the meta tags in the section of the code, I discovered that I had put a refresh value somewhere as one of the open graph meta tags. I had used a boilerplate code from somewhere which included a refresh rate of 30 seconds in the meta tag.
In essence, I had copied the boilerplate in addition with the meta tag and the refresh value along with others, while I was putting meta tags for the webpage.
I decided to comment out this piece of meta refresh tag and now, the web page is no longer refreshing automatically.
Below is the code:
<!-- END OF OPEN GRAPH SECTION -->
<!-- <meta http-equiv="refresh" content="30"> -->
Thank you.
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
I have converted a web application over to spring boot mostly successfully. The only issue I have encountered is that after login (using spring security) I am supposed to be redirected to a page that contains a link to a local version of a font-awesome.css. However, the first time I login the css file is displayed rather than the actual html page. If I step back and then step forward, the page is properly displayed from then on. My question is what could possibly be causing this behavior?
Here is the link to the css from the html page (which is in the head section):
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" th:href="#{/css/font-awesome.css}"></link>
I also tested by removing the 'th:href...' attribute but the behavior persists.
I'm working on building a site using Jekyll and GitHub Pages. I've gotten it down for the most part, but there's an odd issue I can't seem to figure out.
My blog post pages that are generated by Jekyll have a set of seemingly random characters generated at the end of the URL after the page loads. Here's an example:
http://www.jenniferaldoretta.com/2014/01/12/welcome-to-my-website/
The link works but is changed to http://www.jenniferaldoretta.com/2014/01/12/welcome-to-my-website/#.UtQZa2RDt8U after the page finishes loading.
Is this something that is typical for Jekyll or is there something I'm doing wrong? This issue started only after I integrated my site with Jekyll. I'm wondering if anyone has ideas on what might be causing this.
Thanks!
Looks like you've enabled address bar tracking {"data_track_addressbar":true} which appends those parameters to your URL. They're there so that we can collect analytics when someone copies the URL out of the address bar instead of going through the addthis sharing tool. It shouldn't affect people linking to your site and can provide insight into what content is the most popular on your site.
If they're not wanted or are causing issues, you're free to disable address bark sharing tracking. Just adjust your addthis_config variable in your site like this:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like social-buttons" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet social-buttons"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52ceee943bc45eff"></script>
<!-- AddThis Button END -->
More information about address bar sharing analytics is available here: http://www.addthis.com/help/address-bar-sharing-analytics
I have jsp page which contains two frames: the menu and the content. Once menu is dynamically created for a particular user there is no need to recreate it again during each request, hence I'm using frames. The problem ouccurs when user session expires. Instead of redirecting me to one frame login page, the login page is displayed in the content frame instead. So the menu is still visible.How can I redirect it to the single frame login jsp (ideally from servlet) ??
Since you're using JSP as server side view technology and frames are considered bad practice (poor user experience, poor SEO, developer headache), I strongly recommend to drop the frames altogether and make use of page include facilities provided by the server side view technology in question.
JSP offers you the <jsp:include> for this. Here's a kickoff example how you could compose the includes:
<!DOCTYPE html>
<html lang="en">
<head><title>Title</title></head>
<body>
<div id="menu">
<jsp:include page="/WEB-INF/menu.jsp" />
</div>
<div id="main">
<p>Content</p>
</div>
</body>
</html>
You could cache the menu in the session scope to save the cost of regenerating on every request, although I suspect that the cost is pretty negligible. Have you profiled it?