Must Read Article for Every Frontend Engineer

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). 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)

---

1. 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

---

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

---

1. 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.