Must Read Article for Every Frontend Engineer
Tags: webdev, beginners, javascript, html
Published: 2020-09-16 16:15:59

Hello mate,

In this article, we will be looking into the most important processes a frontend developer should know apart from writing code.

##Table of Content
1. HTTP
2. HTTP/HTTPS Scheme
3. URI
4. URL
5. SSL/TLS
6. CORS with respective to environment target development.


##1. HTTP(Hypertext Transfer Protocol): 
this is simply a set of network principles placed between a browser and a server where a data is located, which allows transport of hypermedia (hypermedia document are images, videos, graphics, audio, plain text…) documents between the two environments(browser and server).  In summary, *HTTP* is a network protocol lying between a browser and a server for the purpose of allowing the transfer of hypermedia documents if the set-aside protocols are abided.


___
##2. HTTP/HTTPS Scheme: 

###HTTP Scheme:
This is part of a URI(Uniform Resource Identifier e.g  http://youmustknowjs.com/article) that decides the security state at which your resources are been transported to the server through a network connection. Any website with Http scheme is at risk because any resources from the website get transported un an unencrypted connection.
    
*Note:* Http scheme is different from the first HTTP we spoke about. This one is in-charge of applying security protocols to a website resource because of data-bridge.

*In summary,* the Http scheme is responsible for encrypting all your resources on a network because you need a network connection to perform server operations. And if you notice, you always get a warning when visiting a URL with Http scheme and not https scheme(we will talk about https scheme in the next session).

###HTTPS Scheme: 
This is the https you see prefixed on every URI/URL and what this does, is to ensure that your resource transportation is encrypted(anonymised) via a network connection.

*In summary*, do not provide sensible data on a website with HTTP Scheme. 

*General Information for Companies or website owners:* Unfortunately, the recent security update by chrome broke a lot of HTTPS configuration on many websites(and this is  likely to be a proxy related issue)


___
##3. URI(Uniform Resource Identifier): 
This is a string of characters full of foo bar baz 😃
(Don’t mind me I love the word foo bar baz because my mentor uses it a lot [Kyle Simpson](https://www.linkedin.com/in/getify/)). So, a URI is simply a string of characters used to identify your resources(in other words your website or server….). For example https://i-am-a-resource-identier.com.

####But what’s the ambilguousity of URI?
It has many ambiguous statements which often gets confused or interchanged with the URL(Uniform Resource Locator). 

##Clarification of the Ambilguousity of URI
*URI:* from the name identifier it tells it all. Look at this as a name used to identify someone in school. But if I may ask you, if you know the name of a person does it grantee you finding the person’s home or house? The answer is no because you will need an address and that is what a URL provides and not a URI.

###4. URL: from the name It tells it all “locator”. This is like a home address for locating resources wherever its located. 

*In summary,* a URL can serve as both URI and URL but URI can-never play both role.


___
##5. SSL(Secure Sockets layer)/TLS(Transport Layer Security): This is a layer that lay on *https* scheme, and this is what enables the *encryption(anonymization)* of your resources transported between your browser and server. *Note*, **TLS** is just an upgraded version of **SSL** and this is what differentiates the **Http(unsecured) scheme and Https(secured) scheme**.



##6. CORS(Cross-Origin Resource Sharing): 
This a mechanism manually built into the server and automatically built into every browser that tells if a resource should be shared between servers. For Examples: The CORS Mechanism tells if:


1. There should be a resource sharing between your local server(http://localhost:8080) and a live server (e.g: a live backend server hosted on https://example.digital-ocean.com)

___
2. There should be a resource sharing from one server to another e.g: frontend is hosted on https://sample1.com and backend is hosted on https://sample2.com

___
3. There should be a resource sharing between resources of different protocol e.g: secured protocol(https://sample.com) and unsecured protocol(http://sample.com)

___
4. There should be a resource sharing between servers running on a different port


___
So, its the CORS mechanism that allows all of these operations and if the CORS mechanism set or designed by the backend doesn’t allow a certain connection or operation from a specific URL, then that operation will never succeed and that’s why most frontend developers have to contact the backend engineers to add some certain locators to the CORS mechanism.

*In summary,* if you noticed, most APIs have their initial directory similar to the frontend locator e.g a frontend locator might be https://myserver.com and the API locator will be https://myserver.com/api/. So the idea here is that, they are located on the same server but the API is located on a sub-directory called “/api” and this is similar to navigation to about or home page.


####So what Next? 
Hmmm from my end, I will say this is an intro to networking and networking is a little bit related to cloud computing and cloud computing is the present and the future and that’s my passion(web & cloud computing). 

So stay tuned I will be releasing an article on an intro to web and cloud computing and why its the present and  future of data management and storage e.g distribution systems **Horizontal scaling.

Meanwhile, you can follow me on instagram where i plan to start releasing a quick daily updates & tips on web development and Javascript + its ecosystem [Follow me] (https://www.instagram.com/emmanuelonahafriclite/).