Demystifying The Web

Many different concepts make the internet possible, but figuring out all the little pieces isn’t very straightforward.

In this article I’ll explain things as simply as possible without leaving anything too vague, whether you’re a junior developer or someone who’s just interested in how everything is working behind the scenes, this article should prove worth while.

The Internet

Let’s start by explaining the internet, which is just a big group of small computer networks.

It’s also completely possible to make your own Internet, companies do that all the time, and we’re going to be making our own in this article too.

Let’s start with a small network example. There’s many types of network arrangements but we’ll go with a simple star shaped network.

Our network is one local network, everyone on the network needs an IP(internet protocol) address, this tells everyone else where their location is on the network.

So if you type into the phone’s browser “10.0.0.1”, it would go to the laptop, but it would say something like “Host device refused connection” and we’ll explain why later in this article.

Now let’s say you and your neighbor want to play Minecraft, and you don’t have internet, a lot of games have a LAN mode, which stands for Local Access Network, like our Home WiFi’s network, and it basically tries to find other game rooms running on whatever IP you give it.

Connecting two networks together is actually a bit more complex than this picture would have you think, but to keep things simple, we called over a technician and he handled all the tough parts for us, now if you go on the browser and type “172.0.0.1", your browser would try to go to your neighbor’s tablet.

While the browser does not work, if you go on Minecraft and try to join a game with the same IP, it would work and connect, why is that?

Computer Processes

Your computer, or phone, whatever you’re reading this on, is capable of doing multiple things at the same time, the browser that’s viewing this, other apps in the background, the desktop UI, the wifi/mobile data connection you’re using, those all are processes handled by your operating system.

all modern computers can handle multiple processes either at the same time or by alternating between them, doing a little work here and there, so even if a process freezes, your entire computer doesn’t freeze, only that one app does. (if the entire computer freezes, that means the operating system’s own process got stuck).

You’ve probably had to open the Task Manager window to close something that froze before, that view shows all the processes that the computer operating system is handling itself.

As you can see, a lot of things are happening at the same time.

So, with that out of the way, let’s talk about how processes are relevant to our problem earlier.

Your friend is running Minecraft on his tablet, but also many other things, so how does my Minecraft game connect to his? which process should it ask to talk to? this brings us to the next topic, Ports.

Ports

Ports, like IP addresses, are part of the Internet Protocol(IP), you can think of them as a set of doors to the computer, whenever another computer uses an IP to connect to another, it must also specify which port. A good analogy would be the IP address is the apartment building, and the port is the apartment number.

The Ports on a computer range from 0 to 65535, the first 1024 (including 0, so from 0 to 1023) are called well-known ports, and they’re usually left untouched by you minus a few exceptions, there’s other divisions but they’re not relevant to us.

Minecraft Pocket Edition’s (the mobile version) default port is 19132, that means unless you tell it otherwise, when you try to connect to an IP, Minecraft will go knocking on that door.

On the left you can see our neighbor’s tablet, and he has Minecraft’s process listening on the port, because he’s running a multiplayer game.

So when we went to apartment building 172.0.0.1, and knocked on door 19136, we found a process waiting for us, and it was the right one too!

Had that not been the case, we would not have connected, and would’ve gotten an error like the time when we tried to open the IP in the browser. Browsers use ports 80 and 443, we’ll talk about that more later on.

Scaling up

So you’ve managed to connect to your friend’s Minecraft room and you’ve been playing together everyday for a while now. Things are going well, in fact too well, other kids in the neighborhood hear about your little network and they want in, and before you know it, you now have THIS.

Oh boy, that’s a lot of IPs, and everyone on your network has their own Minecraft room! remembering everyone’s IP would be a headache.

For now you all have a paper with everyone else’s IP, but this becomes a headache if anyone’s IP changes, you’d have to go to everyone and change it for them too! same thing would happen if anyone new joins the network, you need a central place that anyone can easily reach to from their home. You happen to have a network that everyone can use so…

Websites

websites have been here for ages, and they have evolved a lot, but they still boil down to the same main components:

• HTML
• CSS
• Javascript

HTML stands for Hyper Text Markup Language, but it’s really just text describing what everything is, <h1> for headers, <p> for paragraphs, <img> for images, etc.

<div>
	  <h1>Welcome to my Site</h1>
	  <p>This is a paragraph</p>
	  
      <ul>
	    <li>List Item 1</li>
	    <li>List Item 2</li>
	    <li>List Item 3</li>
	  </ul> 

	        

</div>

CSS stands for Cascading Style Sheets, and it’s basically styling for HTML, if HTML tells you what the data is, CSS tells you how it looks. It lets you set color of text and other items, set how big they are, where they are located and much much more.

h1 {
	  color: grey;
	  font-size: 32px;
}
	

ul {
      border: 1px solid black;
	  

}

And Javascript is a whole programming language on the browser, so what you can do with it is almost limitless, usually it’s used to manipulate HTML code: hide elements, show others, change CSS, etc, among other things.

So what’s great about websites anyway? they’re a great way to send someone an interface over the internet, since you’re only sending text, and it’s his browser’s responsibility to make it into a graphical interface.

Websites could solve our issue, we can have one website show everyone’s Minecraft’s IP address, and if we need to edit or add a new one, we only change the website, and everyone in the neighborhood would find the change when they open the site.

<h1>Minecraft Server IPs</h1>
	

	<h2>survival mode servers</h2>
	<p>Here are some surival mode servers</p>
	<ul>
	  <li>Alfredo's server: 10.0.4.1</li>
	  <li>Aly's server: 10.0.2.2</li>
	</ul>
	

	<h2>creative mode servers</h2>
	<p>Here are some creative mode servers</p>
	<ul>
	  <li>Silvan's server: 10.0.1.1</li>
	  <li>Jake's server: 10.0.1.2</li>

	</ul>

And now we have a basic website! we just need to let other people access it, for that, we need yet another section.

HTTP

Hyper Text Transfer Protocol, an over glorified name for what is basically sending text over Internet Protocol, that being said, it does do a lot of things for us.

HTTP revolves around two things, Requests and Responses, one side asks for something, the other responds.

There are two main types of HTTP requests:

• 
  
• GET
• POST

There’s other types but these are the main building blocks.

GET is usually used for retrieving data, POST is for inputting data, we simply want to show a website, we don’t need to POST any data to it. so let’s focus on GET.

When you go on your browser and try to enter a website’s name, you’re making a GET request, browsers use the HTTP protocol, and what they usually get back is HTML CSS and JS, and that’s what your browser did to let you view this article right now.

Now what usually happens when you make a HTTP request is that you get a HTTP response as we mentioned earlier, so who’s in charge of handling our requests and replying back? a HTTP Server, which is what we need to let people find the website with minecraft IPs.

Web Servers

Web servers are also applications, just like a Minecraft server, they too listen on ports, and then do whatever you have them setup to do.

The default HTTP port is 80, and 443 for HTTPS, the secure version.

One of the things we can set a web server to do is, respond with a file to HTTP requests, for example, if we receive a GET request for https://10.0.1.1/home, send back home.html.

So, to make other computer’s browsers see the website we have on our computer, our computer must be ready to accept HTTP requests and respond with the HTML file for the website.

Actually setting up Apache is a little technical, but it stems down to:

• Install Apache on the computer
• Edit a configuration file to tell it to listen to a specific port (port 80 and 443) and serve HTML files
• Run Apache

Now anyone on the network who inputs the right IP in browser will have access to the website that lists all the IPs and their owners.

But this approach has a few problems, first, every time an IP changes, you have to manually change the website’s HTML.

Secondly, you have to remember the IP of the PC with the web server hosting our website, numbers are hard to remember, what if the IP of the PC’s with all the IPs is something like 192.168.43.124, that’d be pretty hard to remember.

If only we could use a name instead of numbers, wait, we can!

Domain Name Service

Or DNS, is another type of server, like web servers, they’re another process listening on a specific port (specifically, 53, one of the well known ports). they usually have one job, given a name, return an IP.

This means if we give a DNS Server something like “minecraft-servers”, and it has it in its records, it’ll give us the IP we have stored there.

Browsers use DNS servers by default, usually your Internet Service Provider has its own DNS server, and when you get your home WiFi installed, the device comes with the ISP’s DNS server IP by default, but you can also tell your computer to use another DNS by giving it the IP of a DNS server, popular options being Google’s 8.8.8.8 and CloudFlare’s 1.1.1.1.

In our case, we don’t have an internet service provider or any of that, we need to make our own DNS server.

We would have to run our own DNS server on a computer, let’s go with 10.0.0.1, this will be just like the Apache server.

Then, we will have to configure people’s computers to use our DNS server, thankfully, this is practically the standard, so both computers and home routers like our WiFi ones let you easily configure that.

We will simply configure our WiFi routers, so that any new computer won’t need to be fixed, if you ever had to setup a router yourself, their UI looks something like this:

If we have another DNS server, we can put it in the last field, but this would do. Computers who can’t find a DNS IP will ask the router for help, and our router will set them to the proper IP we inputted here.

When a browser makes a request with a domain name, like minecraft-list.com, it would ask the computer to resolve the domain name, or in other words, figure out the IP, if the computer can’t find a DNS IP in itself, it’ll ask the WiFi router, which would point your browser to the DNS server we have setup.

Now that your browser has the right IP, it makes the GET HTTP request to our Apache running computer, which responds with a HTTP Response that has our HTML page, and there you have it, we created the internet!

In Conclusion

This is the same concept that powers the internet, although quite simplified, it does reflect some old and simple websites to the letter, and more complex websites build upon the same concept, they all revolve around these steps:

• Resolve domain name
• Make HTTP Request to web server
• Receive HTTP Response with HTML

For those steps to be possible, we had to use a lot of concepts, which were:

• The Internet Protocol, IP Addresses and Ports, the addresses of the internet, they tell you where each computer is, and where each process is.
• Processes, the residents of the computer. they do all sorts of things.
• Protocols like HTTP tell processes how they can communicate, even across computers
• Ports allow processes to pick which computer process to communicate with

If you’ve liked this article, stick around, I will be writing more concept based articles, but I also have some more technical articles in mind!