“Browser” How does it work?

 

I am going to do this article very compact with the most significant key points.

Brower is a software application that helps to interact with the data/information available on the world wide web. Web content can be anything: Text, image, video, audio, graphs etc..

Technically Browser is a group of structured code programmed in such a way to parse HTML, CSS, Javascript, AJAX to read the web content and to interact with it.

Let’s get an understanding of how the browser is designed.

1. User Interface: This is the direct layer visible to the user view. It consists of an address bar, refresh button, home button, bookmark section
2. Browser Engine: This is the interface between UI and rendering engine. All the inputs from the UI will be queried and manipulated in the rendering engine of the browser
3. Rendering Engine: This is responsible for rending the requests to UI. It interprets HTML, CSS, Image, XML documents and displays it in the browser display area. This engine varies from browser to browser
4. Networking: This component handles all aspects of internet communication and security. This implement cache of the responses to reduce network traffic
5. Javascript Interpreter: This is responsible for handling all the Javascript code embedded in a website. The interpreted results will be sent to the rendering engine and get displayed in the browser
6. UI Backed: This is responsible for the basic drawing of widgets of combo boxes and other elements un the windows.
7. Data Persistence/Storage: This is a small database in the local drive which is to store cache, cookies, bookmark and preferences.

Js

What is HTTP?

 

HTTP is a protocol that helps to transfer information in the client-server architecture on the web. 

The message from the client(web browser) is called requests;
The message from the server is called the response.

Each request from the client is sent to the server which handles it at gives the result which is a response. In between client and server, there are few other entities which help in the transaction collectively known as proxies.

The machine or computer that relay the HTTP messages between the server and the client on the transport, network or physical layer without altering the message in any way but potentially making an impact on performance is called proxies.

Proxies may perform numerous functions:

• caching (the cache can be public or private, as the browser cache)
• filtering (like an antivirus scan or parental controls)
• load balancing (to allow multiple servers to serve the different requests)
• authentication (to control access to different resources)
• logging (allowing the storage of historical information)

Features of HTTP:

1. HTTP is simple
2. HTTP is extensible
3. HTTP is stateless, but not sessionless

The flow of HTTP message:

1. Open TCP connection
2. Send an HTTP message
3. Read HTTP message from the server
4. Close or release the connection for the next request

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received.

HTTP message formats:

How do the request and response look like? It is a plain text? No, it is a readable text but in a specified format.

1. HTTP request contains the HTTP method (GET/PUT) based on the need followed by the path of the resource (think this as a function name), the version of protocol and headers with optionally few parameters if required
2. HTTP response contains HTTP protocol version, response status code, response status message and header details optionally the response data as per the resource defined.

Js

How does Internet work?

 

Internet is being used by most of the people all around the world. In this article, I am going to share a few things about Internet basic concepts on how it is working.

“Internet“, what does it mean?

Technically it is the large network of computers to communicate altogether.

Let’s have a deep understanding of how computers are connected.

To connect two computers and make it talk, we have to link them either via physically (Ethernet) or Wirelessly (Bluetooth or WiFi). 

Note: Basic logic behind the wired and wireless network is the same.

Let’s go step by step, to connect two computers we can link two machines in one cable. It looks easy, Right?.

Ok, When we need to connect 10 machines. It is not simple to link all the machines together. We need 45 cables to link all those 10 computers. It looks complicated, Right?

To solve this problem, each computer on a network is connected to a special tiny computer called a “router”. This router has only one responsibility: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer.

Now, we can connect 10 machines with 10 cables using the Router. Now it is simple. Isn’t it?

“A network of networks“, how to do that?

When there is a need to connect hundreds, thousands, millions of computers. how we can do that?

Single routers cannot scale that much. By connecting computers to routers, then routers to routers, we can scale infinitely.

This is architecture is very close to the Internet. 

How we can connect to the network around the world? Just think simple, already we have few network connections in our house like electric line, telephone line etc.

Yes, Exactly telephone line is the best way to connect ourself to all around the world. For connecting our machine to the telephone connection we need a special device called “Modem“. The modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

So, now we are connected to the telephone networks. The information from our network will be sent to the network of the destination computer. How we can transfer the information from one network to the destination network? This can be done via the Internet Service Provider(ISP).

An ISP is a company that handles some special routers that are all linked together and can also access other ISPs’ routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

This is how we are sharing our images, videos, audios, messages, documents over the network.

Ref: Mozilla Developer Site

Js

CSS Box Model. Still Confused?

 

The box model is the very fundamental concept of the CSS. Every the element in the HTML page is treated as the rectangular box object by the browser engine. The size, position and border of these rectangular items have been decided by the CSS rules. This is how the basic HTML and CSS are rendered in the browser.

Let’s get a wide perception of the rectangular box. This box has four layers;

1. Margin – Topmost layer
2. Border – Second topmost layer
3. Padding – next to the border area
4. Content – Main content ex: text, image etc.

To understand this just think yourself as a school kid and you were asked by your teacher to write something in the plain white paper.

Photo by Lukas on Pexels.com

Would you directly start writing from the top-left corner of the paper? If you did so, you might be scolded by your teacher. Just because you have missed drawing the margins.

Yes, now let’s go back to the Box Model concept. Similar to our school days, the margin area is the outermost layer for the HTML element. We can specify margin-top, margin-bottom, margin-left and margin-right for an element.

Followed by the margin, we can draw some nice borders to highlight our writings in the white paper. Same thing we can do in the HTML using CSS border property.

Inside the border, we leave some space and place the content in such a way it looks good. We can do so, using padding property in CSS. We can specify padding-left, padding-right, padding-top and padding-bottom.

I am sure it is a little troublesome to forget the CSS Box model after reading this.

Love What you do; Do What you Love

Js

Why Inline-styles are so bad?

Just like the magic of music to poetry makes excellent song;
The charm of CSS to HTML produces an extraordinary illustration.

There are three ways to add CSS styles to HTML.

1. Adding styles directly to HTML tags – Inline-Styles
2. Adding styles to HTML Head section 
3. Adding styles to separate stylesheet

“All that matter is how we do it; Not what we do it;”

The best way to code CSS styles is #3. Adding styles to separate stylesheet

Let’s see some brief perception of why #1 and #2 are not so good to practice in the project.

1. Minify HTML file
2. It is wise to “Don’t Repeat Yourself (DRY)”
3. To follow “Separation of concerns”
4. CSS will get cached
5. Easy maintenance

Firstly, the primary reason to move styles to external CSS file from HTML is to minimize the size of the HTML file which makes the file simple and looks good.

If there is a necessity to color all the headers(Say we have 100 headers totally in a site) on the website in blue. If we have the style rule in the CSS file, we can use the rule-name in all the places where the headers need to be colored, rather then repeating our self with a color attribute in header tag to make it blue in 100 different files. Which saves the developer time and energy.

“What belongs together; should stay together”

Tangling the content and styles despoils the law of “Separation of Concerns” in the programming world.

CSS file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some Kb’s of data every time a page is refreshed or the user navigates your site.

If a requirement comes in future to update all the headers(Remember we have 100 blue color header text in our site) font and color on the website, then it is enough to update the header-style-rule in one single place in the style sheet rather than affecting 100 different files.

Make things simpler always.

 Js

"Plan" Your Day!

 Time is what we want most and what we use worst.

Time is the most valuable thing in this universe. Success arrives at the appropriate time. An efficient plan can make the appropriate time for achievement. No matter what domain we possess, all we need is the dedicated focus on the area we endure.

From where the dedication focus starts? Absolutely from one's heart & mind. We have to set up our mind with some interest for that task like we freeing up our stomach the day before the Team Treat.

The term "Some Interest" depends on the person in the universe,
somebody needs to do for Entertainment;
somebody needs to do for Desire;
somebody needs to do for Ambition;
somebody needs to do for Wages;

We always have our list of reasons for doing something. As an incredible human, we have to do that "something" in a glorious way to bring victory.

"Don't call it a Dream; call it a Plan"

Ok, Let's see how the plans should be composed to get admirable outcomes. (Make sure you are doing the following with the pen and paper)

1. List the items Todo
2. Estimate each Todo item
3. Prioritize the list
4. Schedule
5. Start on it

Firstly, we have to list down what are all the things we have to cover for the day. Do not halt the just by writing the list, make sure we are adding the duration for each item we wrote in the paper.

Then, arrange the items based on deadlines and priorities. Now, think of when and how we can do this. If we capable to formulate what we want to do; Surely the world floors the way to achieve it.

Now, believe the plan. Confidently START on it. Invest your time in meaningful ways.

Love What you do; Do what you Love.

Js