Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
480 lines (476 sloc) 29.6 KB
<!DOCTYPE html><!--Copyright 2019 Adrian Miasik
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.-->
<html>
<head>
<meta charset="UTF-8">
<title>Adrian Miasik</title>
</head>
<div>
<a href="index.html">
<div style="background: url('images/adrian-miasik-logo-2019.svg') no-repeat center;
background-size: auto;
height: 100px;
width: auto;"></div>
</a>
<hr>
<h2>Site Archive:</h2>
<ul>
<li>
<a href="https://deploy-preview-7--adrianmiasik.netlify.com/">Reviewing Our Foundation</a>
</li>
<li>
<a href="https://deploy-preview-6--adrianmiasik.netlify.com/">Browser Report: Examining the Bones Update</a>
</li>
<li>
<a href="https://deploy-preview-2--adrianmiasik.netlify.com/">&#129460; The Bones Update &#129460;</a>
</li>
<li>
<a href="https://deploy-preview-1--adrianmiasik.netlify.com/">Seeing How Browsers React. and Not That Type of React</a>
</li>
<li>
<a href="https://deploy-preview-4--adrianmiasik.netlify.com/">The Journey Through the Wild West of Web Development Begins</a>
</li>
</ul>
<body>
<div>
<br>
<hr>
<h2><a href="https://deploy-preview-7--adrianmiasik.netlify.com/">Reviewing Our Foundation</a></h2>
<h3>Author: Adrian Miasik</h3>
<h3>Publication Date: 2019-11-07 (11:39 p.m. EST)</h3>
<p>
Hey.
<br>
<br>
So I wanted to put things in perspective.
<br>
What is this website currently made of?
<br>
To be honest...
<br>
Not much.
</p>
<img src="images/this-image-you-are-looking-at.png"
alt="The project directory of adrianmiasik.com">
<p>This is the entire project right now.
<br>
There isn't a lot here. Which is good! I can now quickly explain what this project currently consists of.
<br>
</p>
<div style='background-position-y: 141px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
<span>The purple folder icon labeled "adrianmiasik.com". We can refer to this folder as our
<code>root</code> directory. Our entire project will likely live inside this directory.
</span>
<br>
<br>
<span>Within our root directory there are 4 files and 1 folder. Let's start at the folder at path:<code>root/images</code>.</span>
<div style='background-position-y: 121px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
<span>With whatever project you work on, you are going to want to try to keep things neat and tidy so you know where
everything is located. With that purpose in mind, this folder will contain all our images we use on this site. Any
photo/graphic file formats like (.jpg, .png, .svg, etc...) will live inside here. In fact, directory <code>root/images</code> currently has our first websites image called <code>this-image-you-are-looking-at.png</code>, which is the first image in this post.</span>
<br>
<br>
<div style='background-position-y: 81px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
Next up is <code>root/.gitignore</code>. I'm actually going to skip this once since it's related to version control and my choice of IDE. (I'll
try to revisit this)
<br>
<br>
<div style='background-position-y: 62px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
Next up is <code>root/index.html</code>. This is the website.
<br>
Everything you are seeing was made possible by this file.
<br>
The words you are reading right now are inside this file.
<br>
<br>
<i>So this file is pretty important...But how do you get it?</i>
<br>
<br>
Well when you go to a website your web browser tells the server "Hey. I'd like to see this website: adrianmiasik.com"
<br>
The server then responses "Ah okay, you must be here for the homepage. Let me just run to the backroom and get you what you need".
<br>
<br>
Depending on how the server was configured it would typically look and return one of these files as a single entry point:
<br>
<ul>
<li>index.htm</li>
<li>index.html</li>
<li>default.htm</li>
<li>default.html</li>
<li>home.htm</li>
<li>home.html</li>
</ul>
<p>
From reading online, it seems that we use all just use <strong>index.html</strong> now. Wish I could tell you why. But I don't know. I'm
going to assume that's how most people configured their web servers and it sort of just stuck as the default. </p>
<i>So what does <strong>index.html</strong> look like?</i>
<br>
<br>
<a href="https://github.com/adrian-miasik/adrianmiasik.com/blob/master/index.html">It looks like this.</a> Weird, right?
<br>
<p>
It's just English with a bunch of "HTML Elements". I'm not going to go through them all...but each HTML element is used for a specific
purpose. Sometimes that purpose is to make font bold. Sometimes that purpose is to define content. Sometimes that purpose is used to make
links clickable. If you want to see a list of HTML elements, Mozilla has some good documentation here:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements reference.</a> (Ayyy clickable link :^)) </p>
<div style='background-position-y: 42px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
<span>Next up is <code>LICENSE</code>.</span>
<br>
<span>This file is a legal document that governs the use and redistribution of this software. Pretty standard.</span>
<p>
<div style='background-position-y: 22px; height: 20px; width: 330px; background-image:
url("./images/this-image-you-are-looking-at.png");'></div>
Finally our last file is <code>README.md</code>
<br>
README files are typically used for documentation. It's a way for the creator to quickly convey useful information to others. The information
can vary, for instance...some <i>read me</i> files are used as instructions to setup certain software configurations, installations, etc... Some
use it as a manifest. Some use it for licensing and copyright. Some use it to credit the contributors. Some use it as a changelog. Some use it
to display major known bugs. The truth is, this file is used for many things and it's generally worth the read.
<br>
<br>
<span><i>What are you going to be using it for?</i></span>
<br>
<br>
<span>Who knows. Right now mine just contains this:</span>
<br>
<br>
<blockquote>
<code>&lt;h1&gt;&lt;a href="https://www.adrianmiasik.com"&gt;AdrianMiasik.com&lt;/a&gt;&lt;h1&gt;
<br>
<br>
[![Netlify
Status](https://api.netlify.com/api/v1/badges/85c25006-687b-4821-a45f-9d56364bb9a0/deploy-status)](https://app.netlify.com/sites/adrianmiasik/deploys)
<br>
<br>
A personal website to show off my portfolio and also document my web development journey.</code>
</blockquote>
<br>
<span>
So just a large heading that you can click to get to my website. A fancy markdown badge related to hosting. And a
brief description of this website.
</span>
<p>
But that's the site. </p>
<p>
Your browser should've only received two files at the time of writing this. It should have received this <strong>index.html</strong> file.
And this image: </p>
<img src="images/this-image-you-are-looking-at.png"
alt="The project directory of adrianmiasik.com">
<p>
<i>But I see more than one image in this post. How did you do that?</i>
</p>
So that was all using the same single image inside <code>root/images</code>. Just with some inline CSS I was able to stylize an empty element (a
div), give it a background image, offset the background image, and finally change the size. Essentially making multiple "cropped copies" from
one image source.
<br>
<br>
You can actually view this yourself. Right click this page and click <strong>'View Page Source'</strong>. Once you can see index.html in your
browser...Look for the 'style' attribute on the div HTML elements.
<br>
<br>
Speaking of which. Man. Is there a lot of content in a single document. I should probably start organizing these into separate pages. It's
getting difficult to navigate up and down this page. heh.
<br>
<br>
<strong>TL;DR:</strong>
<br>
<span>Our site doesn't have a lot. It's got...</span>
<ul>
<li><code>root/images/</code></li>
This folder will contain all our images. (Currently it contains one image)
</ul>
<ul>
<li><code>root/images/this-image-you-are-looking-at.png</code></li>
This image file is our first hosted image on adrianmiasik.com
</ul>
<ul>
<li><code>root/.gitignore</code></li>
This is a file that prevents certain directories/files from being included in our version control.
</ul>
<ul>
<li><code>root/index.html</code></li>
This file contains most of what you are currently viewing. This is the bones and content of adrianmiasik.com &#127930;
</ul>
<ul>
<li><code>root/LICENSE</code></li>
This file is a legal document that governs the use and redistribution of this software.
</ul>
<ul>
<li><code>root/README.md</code></li>
This file is used for many things but generally used to communicate important information to the people using the software.
</ul>
<hr>
</div>
<div>
<h2>
<a href="https://deploy-preview-6--adrianmiasik.netlify.com/">Browser Report: Examining the Bones Update</a>
</h2>
<h3>Author: Adrian Miasik</h3>
<h3>Publication Date: 2019-11-05 (10:38 p.m. EST)</h3>
<p>There's a lot I want to talk about on here:</p>
<ul>
<br>
<li>I want to talk preview deploys and how I'm hosting this website. (p.s. It's just <a href="https://www.netlify.com/">Netlify</a> )
</li>
<li>I want to talk about ASCII, Unicode, and UTF-8.</li>
<li>I want to stylize this website using CSS.</li>
<li>I want to create some sort of database for these blog entries.</li>
<li>I want to create a better landing page for my website.</li>
</ul>
<p>
There's a lot of "<i>I want</i>"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 <span style="color: gray">&#129460; The Bones Update &#129460;</span> 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!
<br>
<br>
First up is Firefox.
<br>
So last time Firefox gave us this error:
</p>
<blockquote style="color: red">
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.
</blockquote>
<span>And this time Firefox is giving us this error:</span>
<blockquote style="color: red">
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.
</blockquote>
<p>
So what gives? We are getting the same error. You said defining the DOCTYPE by placing <code> &lt;!DOCTYPE html&gt; </code> at the top of
the html file will resolve this error.
<br>
<br>
<strong>Nope. I was wrong.</strong>
<br>
<br>
<span>I realized that defining the document type is not the same as defining the character encoding.</span>
<br>
<br>
<span>Also I realized I never explained what defining the document type was...So here goes!</span>
<br>
<code>&lt;!DOCTYPE html&gt;</code> solves the document type warnings and lets the browser know that it will be reading this as an HTML
document. Defining the document type is often referred to as <i>DTD declaration</i>. (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 one is not provided. But since programmers
love being explicit, just define it. Just remember that there is one declaration that almost everyone uses, <code>&lt;!DOCTYPE
html&gt;</code> . Everything else is pretty much just a legacy thing.
<br>
<br>
But how do we define the character encoding? And what is character encoding?
<br>
<br>
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.
<br>
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. <a href="https://github.com/adrian-miasik/adrianmiasik.com/releases"> Make sure to watch my
GitHub releases page. </a> ;)
<br>
<br>
Okay sure, I'll ignore what character encoding is for now. How do I solve this character encoding error?
<br>
<br>
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)
<br>
For now we can solve this error by adding this to be the first HTML element inside our head: <code>&lt;meta charset="UTF-8"&gt; </code>
<br>
<br>
Second up is Google Chrome.
<br>
Works just fine!
<br>
<br>
Next up is Internet Explorer 11.
<br>
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.
<br>
<br>
Last up is Microsoft Edge.
<br>
Microsoft Edge, renders everything just fine. However we do have 6 console messages. (1 info, 5 warnings) Let's go through them:
<br>
<br>
<code> HTML1300: Navigation occurred.</code>
<br>
This is that same simple information log, I'm going to ignore this again.
<br>
<br>
<code> HTML1402: Character reference is missing an ending semicolon ";".</code>
<br>
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 <span style="color: red">& # 1 2 9 4 6 0</span> 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.
<br>
<br>
Alright, that's all 4 browsers I'll be using for this browser report.
<br>
<br>
<strong>Looks like we now have our action items:</strong>
</p>
<ul>
<li>Add <code>&lt;meta charset="UTF-8"&gt;</code> to the first thing in our HTML head
</li>
<li>Add a semicolon for any special character in HTML</li>
</ul>
See you in the next update!
<hr>
</div>
<div>
<h2>
<a href="https://deploy-preview-2--adrianmiasik.netlify.com/">&#129460; The Bones Update &#129460;</a>
</h2>
<h3>Author: Adrian Miasik</h3>
<h3>Publication Date: 2019-11-04 (2:16 a.m. EST)</h3>
<p>
Bam! This update brings us HTML. Everything you see on this page is structured in these two legendary elements: <code>&lt;html&gt;</code>
<code>&lt;/html&gt;</code> Using HTML gives us access to so many great tools. <strong>We can make font bold. </strong><i>We can italicize
this shit too.</i><span style="text-decoration: line-through;">WE CAN CENSOR THINGS...kind of</span> I can make things
<a href="">clickable.</a> See that list at the top? That shit's also done in HTML too. &#128079; W E C A N E V E N U S E E M O J I S
&#128079; &#128064; &#128166;
<br>
<br>
Not sure how I'm going to be hosting different versions of the site just yet. But keep an eye out on the "Site Archive" section.
<br>
Anyways, till next time! Doot &#127930; Doot &#127930;
</p>
<hr>
</div>
<div>
<a href="https://deploy-preview-1--adrianmiasik.netlify.com/">
<h2>Seeing How Browsers React. and Not That Type of React</h2></a>
<h3>Adrian Miasik</h3>
<h3>2019-11-03 (9:05 p.m. EST)</h3>
<p>
I noticed something in the previous post. I've tested this file on numerous web browsers and each one reacts slightly differently. Let me
show you.
<br>
<br>
First up is <a href="https://www.mozilla.org/firefox/new/">Firefox</a> .
<br>
This file (`index.html`) works on Firefox. But I noticed that the console did spit out an error:
<br>
</p>
<blockquote>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.
</blockquote>
<p>
Alright that should be pretty easy to address. I've used <a href="https://www.codecademy.com/">Codecademy</a> to learn web dev before, so I
do remember that each website needs to adhere to a certain HTML structure. The first HTML element in any document should be...:<!DOCTYPEhtml
>
<br>
<br>
Hmm, interesting. You didn't see it but adding `!DOCTYPE html` (Replace the ` with <> respectively) doesn't appear in my versions of
Firefox, Chrome, Internet Explorer 11, and also Microsoft Edge. So even just typing out the correct DOCTYPE element in an HTML file is not
enough, it does seems to get deleted by the 4 aforementioned browsers. Good to know. Anyways, I digress.
<br>
<br>
Second up is <a href="https://www.google.com/chrome/">Google Chrome</a> .
<br>
This file works in Chrome. The console spits out no errors or warnings and accepts this page as is. Great!
<br>
<br>
Third up is <a href="https://support.microsoft.com/en-us/help/17621/internet-explorer-downloads">Internet Explorer 11</a>.
<br>
This file works in Internet Explorer 11. The console spits out no errors or warnings and accepts this page as is. Also great!
<br>
<br>
Last up is <a href="https://www.microsoft.com/windows/microsoft-edge">Microsoft Edge</a>.
<br>
This file works in Microsoft Edge but we do get certain console logs. Let's go all 4 of them:
<br>
<br>
<code> HTML1300: Navigation occurred.</code>
<br>
This is a simple information log, I'm going to ignore this one for now.
<br>
<br>
<code> HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".</code>
<br>
Funny enough, this warning gets removed just like in my Firefox comment before.
<br>
<br>
<code> HTML1502: Unexpected DOCTYPE. Only one DOCTYPE is allowed and it must occur before any elements.</code>
<br>
Okay similar error that I will fix in the next post.
<br>
<br>
<code> HTML1407: Invalid tag name. First character should match [a-zA-Z].</code>
<br>
Okay right so it's complaining about `-` being the first character in this file. We are replacing the first line with the DOCTYPE so we
should first apply that solution and see how Microsoft Edge reacts. Funny enough, the copy paste of error 3/4 above is now showing 2
HTML1502 logs on this page.
<br>
<br>
Alright so what have we noticed? Out of my sample size of 4 browsers, all of them were able to view this file just fine. In fact all four
browsers auto-generated a proper HTML structure while putting all the text you are reading into one paragraph element. Neat-o! Firefox was
able to tell us our file was incorrect and how it could be incorrect in some browsers. Which is really great to see actually! Microsoft Edge
was expecting a DOCTYPE but didn't tell us why nor how. It did however provide us a solution to fix it though. Google Chrome and Internet
Explorer 11 had no problems with our files. Now I'm not sure if that concerns me or not. Haha.
<br>
<br>
<strong>TL;DR:</strong>
<br>
So, what's the takeaway from all this? Welp, this tells us that most browsers are not the same. For better or for worse each browser will
most likely parse each website slightly differently. (I'm not going to get to far into that, but this does become a headache later on)
<br>
My next steps are clear. Let's structure this file using HTML. See you in the next update!
</p>
<hr>
</div>
<div>
<h2>
<a href="https://deploy-preview-4--adrianmiasik.netlify.com/">A Journey Through the Wild West of Web Development Begins</a>
</h2>
<h3>Adrian Miasik</h3>
<h3>2019-11-03 (5:46 p.m. EST)</h3>
<p>
Alright Chris. I finally made that website I was talking about. It's not much, but it's a start :)
<br>
<br>
In fact I'm not even sure this will properly work on most web browsers. There isn't any proper meta data or html tags here. But that's the
beauty of this. I get to find out and learn as I go!
<br>
So these words you are reading right now are being written inside a program called notepad++. Right as I'm done typing this sentence I'm
going to save this file as `index.html` and then I'm going to drag and drop this file into my web browser. Yup, confirmed that it worked.
(Which should be fairly obvious to you since you are reading these words in your web browser right now)
<br>
So what is this place?
<br>
<br>
Well...Hi. I'm Adrian. I'm the dude writing these words you are reading right now. Yup. that's me. (btw I'm glad that's the voice you chose
for me) Anyways, I've done some web development in my career and spare time but I'm still really new to it. In fact I wanted to get back
into web dev and also had an itch to create my own website. Currently my domain <a href="https://www.adrianmiasik.com">https://www.adrianmiasik.com</a>
re-directs to <span style="text-decoration: line-through;">a third-party website with my game content on it.</span> the most recent version
of this website! I've been meaning to create a proper place for my domain. So I'll be creating a website that I can use for my portfolio
work and also a site that I can document this journey on.
<br>
I want to create a visual timeline for the history of this site as I create it over time. I'm not sure how far I'll explore that idea but
we'll see!
<br>
<br>
Check back soon!!!! In the meantime check out my website :^) <a href="https://www.adrianmiasik.com">https://www.adrianmiasik.com</a>
</p>
</div>
</body>
</html>
You can’t perform that action at this time.