Browser Report: Examining the Bones Update

Adrian Miasik

2019-11-05

There's a lot I want to talk about on here:


There's a lot of I want's in there. Today I won't be covering any of that just yet. Instead I wanted to do another "browser status report" to see how browsers parses this site after 🦴 The Bones Update 🦴 and try to solve and obvious browser errors we see.

And I also need to address a mistake I've made in my 2nd post. (Post #4 and we are already addressing a mistake?) Let's get into it!

First up is Firefox.
So last time Firefox gave us this error:

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.
And this time Firefox is giving us this error:
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.

So what gives? We are getting the same error. You said defining the DOCTYPE by placing <!DOCTYPE html> at the top of the HTML file will resolve this error.

Nope. I was wrong.

I realized that defining the document type is not the same as defining the character encoding. Also I realized I never explained what defining the document type was...So here goes!

What is Document Type Definition Declaration?


A document type what what?
Yeah. My thought's exactly.

It's really just a fancy way of telling the browser what type of file something is.
Placing <!DOCTYPE html> at the top of our HTML document will let the browser know what type of file this is. (An HTML file) Defining the document type is often referred to as DTD declaration. (Document Type Definition)

So why do we have to do this DTD declaration? Well believe it or not, but there are different types of HTML. And most browsers don't know which one you are using. The browser will actually try to "doctype sniff" and guess the document type you are using if you do not declare the type of file it is. But since programmers love being explicit, just define it. Just remember that there is one declaration that almost everyone uses, <!DOCTYPE html>. Everything else is pretty much just a legacy thing.


What we really need to do to solve the error above, is we need to define our character encoding set. But what is character encoding? And how do I define it?

Great questions. I did a bunch of research on this since I was curious about this too. In fact, I'll be sharing my findings in another post. But for the scope of this post, I'm not going to go into that rabbit hole right now. If you are interested in hearing a brief explanation of character encoding, ASCII, Unicode, and UTF-8. Make sure to watch my GitHub releases page. ;)

Okay sure, I'll ignore what character encoding is for now. How do I solve this character encoding error?

There are actually many solutions to this answer. But...for a lot of modern web pages you are probably going to resort to character encoding UTF-8. (especially for western characters)
For now we can solve this error by adding this to be the first HTML element inside our head: <meta charset="UTF-8">


Second up is Google Chrome.
Works just fine!


Next up is Internet Explorer 11.
Loads fine. However I did realize, the emotes in my previous post title "The Bones Update" are not being displayed properly. Instead of bones, there are blue hollow boxes. And the emotes within the post look different and only have a black and white color scheme. Interesting observation. Besides that, everything looks fine.


Last up is Microsoft Edge.
Microsoft Edge, renders everything just fine. However we do have 6 console messages. (1 info, 5 warnings) Let's go through them:

HTML1300: Navigation occurred.
This is that same simple information log, I'm going to ignore this again.

HTML1402: Character reference is missing an ending semicolon ";".
This is the warning that gets printed 5 times. Apparently I've been creating emoji's in HTML incorrectly. For instance I've originally created the eyes emoji by typing in & # 1 2 9 4 6 0 in HTML. (with no spaces) After a quick google search of the error it seems any special character in HTML must end in a semicolon. That's easy enough!


Alright, that's all 4 browsers I'll be using for this browser report.

Let's take a look at our action items now:


I'll apply those accordingly. See you in the next update!