GAE Getting Started with Flask (empty firefox browser) - html

I just went through the Getting Start with Flask on App Engine Standard Environment tutorial. The source code is here.
Firefox and Chrome both the html templates but neither render them when running locally:
dev_appserver.py app.yaml
or in the cloud
gcloud app deploy
The FireFox Developer Tools console tells me that:
The character encoding of the HTML document was not declared. The
document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or
in the transfer protocol.
I tried adding declaring UTF-8 encoding by adding this line to the html files.
<html>
<head>
<meta charset="utf-8"/>
...
but to no avail. Any ideas?
Thanks!


I don't think this is the reason your template is not rendering. But, to get rid of that error, try:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
To troubleshoot your template, please provide your url handlers, view handler, and template.html

Related

Apostrophe is showing up as ’ in windows, chrome browser

I have a static app that uses react & html5. I have <meta charset="utf-8"> in the head of my index.html file. BUT for some reason, apostrophe's are being rendered as ’. This does not happen locally. It only happens on a windows computer. Does anyone know why?

CSS stylesheet not responding working with chrome

I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }

ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....

Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.

This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.

I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.

In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.

angular app encoding German character as gibberish

I have created an Angular 5 application which have German characters. I am working on IntelliJ IDE and have problem in using german characters in html. As per the information already given in these tickets How can I properly display German characters in HTML?
and How can I use special characters in angular directives attributes?, I have added the following lines in my html file:
<html xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="utf-8" />
</head>
...
Also, I have set the file encoding type to UTF-8 in the IDE.
When I compile the code, I can see that they are correctly encoded in the webpack files but when I deploy (openshift deployment), I get gibberish in place of German umlauts: Image with incorrect Encoding
Though when I refresh the page once, it gets corrected: Image with correct Enoding
Can anybody please assist with this issue?

Font error in html

My website has a font error, when I open the chrome developer tool, I see the image as attached.
My error text is hard-coded.
I added a meta tag utf-8 to the head tag.
I do not understand why it's buggy, while still having one of my pages using the same code does not get this error.
Help me
Thanks

First of all use in your head section:
<head>
<meta charset="utf-8">
</head>
Second: when you are saving your HTML files,
please try to use NOTEPAD before putting files on the server.
The reason for that is, you may use some editor that
converts your characters in a way that gives an error...

UTF-8 unreadable in phonegap android

I'm working on my first phonegap application, an android based simple form app.
My problem is that all my non-latin characters appear unreadable.
I added the content meta tag with utf-8, made sure I saved the file as utf-8, made sure to use font with the needed letters and also added xml:lang to the decleration.
Couldn't find any other idea, because i'm a web dev and this usually solves these issues...
Maybe someone has any idea?
feels like my questions back when I just started web development :)
Thanks!

Just add meta:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

If you are using Eclipse, which is default for the PhoneGap Android, make sure you applied the utf-8 text file encoding. (Project - Properties - Resource: Text File Encoding - Other [UTF-8]).
The meta tag should also be in your index.html
<head>
<meta charset=utf-8>
...
</head>

sometime it happens from visual studio page Unicode setting: for this go to file > advance save options > select Unicode utf 8 with signature and then click ok.