01. What.

In this day in age, everything we interact with is connected in some shape or form to the behemoth we know of as, “The Internet”. Roughly 3.2 billion people (approx 50% of the world population) are active users of this technology, but how many people actually know how it works? Lets start off with a common misconception, Internet vs World Wide Web ( The Web or WWW), and their differences.

The Internet

The internet is defined as a global network of computers that allows a user at one single computer communicate with any other computer in the world granted they have permissions to do so. For example the internet allows you (a single user) to access this blog post that is hosted on the Tech Savagery server (a special type of computer). This network is connected through the use of physical cables to pass information amongst its users. Wireless technologies such as WiFi, 3G/4G, LTE etc also leverage these physically connected wires to transport data.

The Web

The “web” is a vast collection of data (web pages, images, text, and other media) that is transferred across computers on the internet. When you access your Instagram account, you are using the internet to receive images and text from posts that other users you follow have uploaded to the servers at Instagram (the web) as well as post your own images for all others to view. This data is transferred from you, to the Instagram, back out to all other users via a protocol called HTTP and TCP/IP, more on these later. Protocols give us rules on how the data of the web is transferred between users across the wire (The Internet)

Though the HTTP & TCP/IP protocols are by far one of the most important users of the internet, other users such as email and FTP (File Transfer Protocol, technology that allows you to manage files on a web server) exist.

Lets dive into some basic terms and then walk through an end to end workflow. I have split these terms into three categories: Data (the information a user (you) is looking for), Hardware (the devices used to send the information to/from users), and protocols (The rules that the data transfer process follows).

Data:

Before we discuss transfer protocols, we need to know what we will be transferring back and forth… the Data! In our previous instagram example, the data was images and videos, however data can take many different forms.

Hyper Text Markup Language (HTML):

This language gives web browsers (Chrome, Firefox, etc) the blue print on how a web page (your favorite blog, a wikipedia article, google maps etc ) should be displayed. When you visit a website (group of connected web pages), your browser reaches out to the desired websites server and receives this HTML document as seen in the no frills example below.  The web browser then uses this to create the web page for you to view on your device. This web page will contain all the images and texts found in the HTML document and present it to us in a user friendly manner.

XML/JSON:

Sometimes the data we want receive is not in a graphical format. For example, if we want to know what the current stock price for Google is we can request this information from the google servers and receive the raw data back. This data is typically formatted in XML (extensible Markup Language) or JSON (Javascript Object Notation). These data formats are server/computer friendly and allow web applications to further process the data. For example, this raw stock price data can be formatted and added to a custom ticker to display the data in a more user friendly way. These data formats also be used to send data to a server. For example when creating an account for instagram, your email, handle, and password are gathered and then sent to the instagram servers as a JSON or XML formatted document. This allows instagram to easily add your info to their database. Below is an example of XML and JSON data that can be sent to and from servers via the internet.

Packets:

In order for data to move from your device to a companies server and visa versa, it needs to be broken up in to numerous chunks. These chunks are called packets. The TCP protocol (rules followed for the sending/receiving of data, more on this later) ensures these packets are sent in the correct order and all reach their intended recipient.

 

Hardware:

Now that we know the type of data we exchange via the internet, lets review the hardware that makes it possible.

Server:

A server is a computer that is setup to respond to a users request (called a client). Continuing our Instagram example, when you open up the app and refresh your notifications screen, you are sending a request to the Instagram server. This request is searching for any recent updates to your account (likes, follows, comments etc)

The code running on the server was developed to understand the info the user is requesting, grab this info from the IG database, and format the return this information to the client or requester of the information.

IP Address:

In order for the clients request for data to reach the intended server, the client would need to identify the intended server in its request. This is accomplished using the IP Address. An IP address is the unique identifier for all devices both server and clients (laptops, cell phones, Internet Enabled Devices IoT etc) that are connected to the internet. Including this in our requests will route our request to the correct server.

IP address

Uniform Resource Locator (URL);

IP addresses are great but it would be impossible to remember every IP address of all websites that we interact with. URLs map human readable addresses to the IP address of the server that will fulfill the request. These are the addresses we are use to seeing in web browsers, email, print media, tv, radio etc https://techsavagery.net.

Domain Name Server(DNS):

In order for us to know that IP Address 223.77.87.123 maps to our URL https://example.org, we lean on Domain Name servers. These servers provide confirmationInternet Service Provider (ISP):

In order to gain access to the internet and all the servers hosted there, we will need a direct connection to the network of wire pipeline that connects us to all servers. Internet service providers ensure that your location (home, business etc) is setup to connect to their network

Router:

Once we have connection to the internet we are ready to send and receive data from our device and all other companies/ services we interact with online. Routers make this possible by serving to key functions. First, they find the best path between servers from your device to the IP address of the website or online service your are attempting to retrieve data from. These paths are determined by your ISP and can be optimized for performance or cost. The path consists of “hops” between routers in between your device’s IP and your destinations IP. We will got through a demo of how to inspect the details of these hops later in this article! Second, routers ensure the data that is requested or received is transmitted between each hop successfully. The act of transmitting the data follows various rules to ensure everyone is on the same page and communicated effeciently via the internet. These rules are formally called protocols.

Protocols:
IP:
TCP:
HTTP:
Other Protocols:
End to End Workflow:

To understand the full workflow lets outline the workflow of checking KLim Kardashian’s instagram profile to see how many followers she currently has.

    1. First we will pull out the device of our choice and load up a web browser. This will be our client in this scenario.
    2. Next we will type in the following url to get to Kim K’s profile https://www.instagram.com/kimkardashian/
    3. When we hit ENTER. Our browser sends the following HTTP Request to instagram’s server.

      GET /kimkardashian/ HTTP/1.1
      Host: www.instagram.com
    4. The IP protocol is used to find the instagram.com IP address by pinging different router between your device and Instagram’s server
    5. Once the path is determined, a TCP connection is established and the request data we initiated is sent to Instagram
    6. Instagram then takes the request and processes the information so that it can send you what you requested. In this example it is the HTML for Kim K’s Instagram profile page.
    7. Instagram then sends back the data via the same TCP connection.
    8. TCP then sends this response data to your browser
    9. Your browser then takes the HTML code in the response and displays the Instagram profile in your browser window in a human friendly format.
    10. You can now view the profile information for Kim K and see that she has over 196 million followers.
It’s funny — the thing I feared would take away my “freedom” is the one thing that has allowed me to have it.

Joelle Steiniger

02. Why.

Once I gave the headphones a thorough once-over exam, I tried them on. As I mentioned, they have a classic over-the-ear style and just looking at them, the padding on the ear pieces seem adequate and the peak of the headband seemed to be a bit lacking, but you don’t really know comfort unless you try on the product. So, I slipped the headphones on and found them to be exquisitely comfortable. In order to test how voices sounded, and the overall art of sound mixing, I pulled up Netflix on my iPad Air 2 and watched a few minutes of a movie to hear all the nuances of the film. None of them were lost. In fact, I ended up hearing sounds that I hadn’t heard before. Echoes…birds chirping…wind blowing through trees…breathing of the characters…it was very impressive what the headphones ended up bringing out for me.

It’s funny — the thing I feared would take away my “freedom” is the one thing that has allowed me to have it.

Joelle Steiniger

03. How.

  1. Lets ping a server and get back some raw XML or JSON data!
  2. Use the command line to run a traceroute to understand the path taken to access your desired web server
  3. Use Chrome Dev Tools to inspect all data retrieved from a webserver to display a web page.

In order to test how voices sounded, and the overall art of sound mixing, I pulled up Netflix on my iPad Air 2 and watched a few minutes of a movie to hear all the nuances of the film. None of them were lost. In fact, I ended up hearing sounds that I hadn’t heard before. Echoes…birds chirping…wind blowing through trees…breathing of the characters…it was very impressive what the headphones ended up bringing out for me.