To really understand Linux we need to look underneath the layers, at the heart of the Linux filesystem that is true flesh and bones of Linux.

Investigative study

• Linux file system is not just a random directory structure that we can traverse through blindly, every single part has it's purpose and importance , so the order matters.

/etc : the intent of the system

/etc is not just a directory it is the command center for the whole system, from turning the system on to running the processes every "how" lives inside here.

Users, passwords, mounts, hostname, DNS configuration, service behavior—all of it lives here. Files like /etc/passwd, /etc/fstab, /etc/hostname, /etc/resolv.conf define identity and expected behavior.

How to mount the filesystem while booting up? what are the network configurations? How the services should behave? what users exist on the system? You name it and it lives inside /etc/ . It's the backbone and nervous system of Linux.

DNS and name resolution:

Following up with the /etc/ directory, we reach very crucial part of the system, at the heart of the internet lies DNS lookup and resolution, fail here and your system is isolated from the Internet.

When a program asks for a hostname, the system does not immediately query DNS. It follows a resolution order defined in /etc/nsswitch.conf: check local files, then DNS, maybe LDAP or other sources.

Inside /etc lives files like resolv.conf that is phonebook for DNS servers. without it you have no destination or address for your target. /etc/resolv.conf does not always point directly to real DNS servers—it is often a stub managed by something like systemd-resolved, acting as a local intermediary.

Name resolution is not optional it's what runs the Internet. Without it Servers are just isolated boxes with no real use.

Networking and routing

If name resolution tells you where to go ip routes (also available as a command) tells your system how to go there.. It's like a map that your system uses send data to the destination in the correct path.
Routing is not just one time address detection like DNS resolution, configuration in /etc or network managers may claim a route exists, but DHCP clients, VPNs, or container systems can overwrite it dynamically.

If something behaves unpredictably, the kernel table is the only reliable source.

/proc : the system as it is now

/proc is the live view of the system. It does not describe what should happen, it shows what is happening.

Every process has a directory under /proc that exposes its state. You can inspect the exact command it was launched with, its environment variables, the files and sockets it has open, and its memory usage. This is direct access to runtime behavior.

If a process is behaving incorrectly, /proc shows you why. You can see what resources it holds, what files it is interacting with, and what its execution context looks like.

Beyond per-process data, /proc also exposes kernel-level configuration through entries like /proc/sys. These values directly control system behavior at runtime, from networking parameters to memory management.

This is where assumptions get validated or disproven. It is the closest view to the actual system state.

/dev and /sys

/dev presents devices as files, but it is not where devices are defined. It is an interface layer.

The real source of truth is /sys, where the kernel exposes hardware and driver state. Devices are detected by the kernel, described in /sys, and then user-space tools dynamically create corresponding nodes in /dev.

This means device names in /dev are not guaranteed to be stable. They can change across boots unless persistent identifiers like UUIDs are used.

If a device disappears, changes behavior, or fails, the explanation will not be in /dev. It will be in /sys, where the kernel tracks the actual hardware state.

Understanding this separation avoids misdiagnosing symptoms as causes.

/boot : where everything starts

Before the system reaches /etc or any runtime state, it must boot. /boot contains the kernel, the initramfs, and the bootloader configuration that define how the system starts.

This stage determines how hardware is initialized, how the root filesystem is located, and what early setup steps occur. The initramfs can mount filesystems, unlock encrypted disks, or configure networking before the main system even begins.

This means the behavior during early boot can differ from what is declared later in /etc. A system might mount a disk using a UUID during boot, even if /etc/fstab references a device name.

If something fails early or behaves inconsistently during startup, the root cause is almost always here, not in the later configuration.

Services and execution

Services are not simply executed, they are orchestrated.

System managers like systemd read configuration, resolve dependencies, and determine the order and conditions under which services run. Unit files define desired behavior, but overrides, dependencies, and runtime conditions define actual behavior.

A service starting late, failing, or behaving differently is often not an issue with the service itself. It is usually the result of dependency ordering, conflicting configurations, or environmental differences.

Logs: the sequence of events

Files show structure, logs show time. Without logs you only see the current state, with logs you understand how that state was reached.

Logs capture events across the system, kernel messages, service activity, hardware changes, and configuration updates. They reveal what changed, when it changed, and which component caused the change.

A configuration file alone cannot explain behavior. A log showing that a service rewrote that configuration minutes later can.

Understanding a system requires building a timeline. Logs are how you construct that timeline.

Users, permissions, and control

User definitions exist in /etc, but control is enforced through permissions and capabilities.

Files, processes, and services operate under specific privilege levels. Setuid binaries, file capabilities, and group memberships define what actions are allowed. Small misconfigurations in these areas can create large security risks.

Security is not a single setting, it is the interaction between identity, permissions, and execution context. To understand control, you must examine all three together.

Security in Linux is not just an add-on it is how the system "thinks" and operates. You touch only what you own .

Environment and execution context

Programs do not run in isolation, they inherit an environment.

Environment variables can come from shell configuration, system-wide defaults, or service definitions. A program started in a terminal may behave differently from the same program started as a system service because the environment is different.

Variables like PATH or LD_LIBRARY_PATH can change how binaries are located and executed. These differences are often the source of subtle bugs.

Same binary, different environment, different behavior.

The core principle and conclusion

Linux is not a single chunk of a system, it is a set of layers interacting through the filesystem.

To understand it, read what was intended in /etc, identify which component enforces that intent, verify what is actually happening through /proc and /sys, and confirm it with logs.

Most failures are not isolated issues, they are mismatches between layers.

The only reliable approach is to trace across them until intent, enforcement, trail and the reality align.

We will learn today how we can write control flows for our programs in this article. Let's start

If statements

If statements allow you to perform different actions conditionally based on output of a condition at runtime. Let's take an example

As you can see based on a condition we can conditionally print a congratulate message. This is what a typical control flow looks like. But we can do better.

If-else statement

We can also perform an action if certain condition does not result in a truthy value. Think adding a new entry in a database, what if it fails? user needs to informed of that right?

else if ladder

But what if we are in a situation where there can be many outcomes or possibilities how do handle it then ? when there can be multiple truthy values for different cases?
For that we use following syntax

switch statement

This is used when you want to do simple match based conditioning.

In switch-case you cannot use any expression for that you need to use if-else, in every case it must be a constant. default case is for all the invalid values that does not match with any provided cases. break in each case is must so that the all next case does not execute including default automatically.

Conclusion

This is how we can control the flow of our program and make decision at the runtime dynamically depending of values and conditions. Hopefully now you can use your own control flows.

Suppose you are holding a party at your house and you need to properly store all the items that needs to be bought and their amount and maybe a maximum budget for them. Let's try doing that using arrays..

Do you see the problem? if you need to store more than 5 or 10 attributes then this method of storing becomes very cumbersome and messy. Then what is solution?

To escape this problem JavaScript allows us to create a customized data type that stores key-value pairs .. these datatypes are known as Objects in JavaScript.

itemList is an array of objects.

This datatype helps us store multiple attributes or related information in on single variable as a collection of key-value pairs.

Now let's see what are the ways we can create objects in JavaScript.

Creating Objects

There are many ways to create a object in JS.. we will see most commonly used ones and you will be able to create objects easily in these ways.

Literals

You can create an Object literally like this

Constructors

You can also create an Object using the Object constructor.

Accessing Objects

You can access any Object in mainly two ways

• Dot notation

In this way you can use . to access Object keys-value pairs.

you need to write first object name and then key name of that object separated by a dot

Another way to access an object value is using brackets [ ]

This way of accessing object items are handy because you can use any string as a key in that case.

Updating properties

Each key value pair is also known as property of the object. These properties can be easily updated using the very same way of accessing them.

you can also use the dot notation as well there is not right or wrong here, juts be careful in case of strings with space like "unique key" .. those values cannot be used as keys in dot notation .

Adding and deleting properties

In Objects there are more than one ways to add and delete properties. Let's see them one by one.

Adding properties

You can simply use a dot notation or use brackets to add a new property.

or you can use Object.assign() to add a new property as a key-value pair.

Deleting properties

You can use delete operator to delete a key-value pair or a property from the object.

Looping over Object keys

There are more than one way to loop over object keys

for...in

This image is self explanatory but simply said you can use for ... in loop to iterate over Object keys to access each property one after another.

Object.keys() method

Object.keys() method return an array of all the property keys of the object passed as a values to the keys() method.

Conclusion

This was a brief and very basic overview on Objects in JavaScript hopefully now you understand the very basics of JavaScript and how to use them , how to create, update and delete object properties and how to iterate over Object keys.

In this article we will learn about some commonly used and very useful methods that come attached with an Array in JavaScript.

Array methods

Array methods or functions are part of a set of properties of any Array() you create in JavaScript. These methods gives you control and ability over any particular array to access, manipulate, transform, update and make other modifications on it.

Let's one by one see what these methods or functions are and how to use them

push() and pop()

Both of these methods work at the very end of an Array on which they are called, we will see in moment how, these methods adds and deletes an element from the end of an array respectively.

push() method:

This method takes a single or more parameters or values that need to be added into the array.

• It takes one or more values.

• Adds the passed values into the array

• return new length of the array after adding the element into the array.

pop() method:

This method deletes the last element from the array and returns it upon being called on any particular array.

• It does not take any value as input

• Removes the last element and returns it

• If the array was already empty it returns undefined

shift() and unshift()

These methods remove and add elements from beginning of any array respectively.

shift() method:

This works on the beginning of the array and removes the first elements, you can also think of it like this method shifts the array elements to the left without preserving the first element.

• Does not take any input

• Removes left most or first element and returns it.

• If array is empty it returns undefined

unshift() method:

This method is exact same as push() method but instead of in the end it adds elements to the beginning of the array.

• Takes one or more values to be added into the array.

• Returns the new length after adding the new items.

map() method

This method takes a method or function as a parameter and changes or updates every element and makes a new array with those updated values, it does not change the original array or any of it's elements.

• Takes a function as an input.

• Changes or modifies every value based on the passed function

• Returns new array with the new values

filter() method

This method also returns a new array , this method takes a method and if the element passed in the method results in a truthy ( true ) value, then this method adds the element in the new array or it skips it.

• Takes a function as an input.

• Adds it to a new array if given condition is true

• returns the newly created array.

reduce() method

This method takes a function too , it takes two parameters, first one is a function and second one is an optional value called initial value.

The first parameter function, further takes two parameters and.. first one is a value that was returned by previous call of the method, second is current element of the array.

reduce() method returns the final value of the first parameter passed to the method that was itself passed as first parameter inside reduce().

See and example:

forEach() method

This method also takes a function and passes every element of the array in that function one by one.

forEach() does not return anything

Conclusion

These are the methods that are most commonly used with arrays inside JavaScript and most of the work that you need to do in a typical JavaScript program can be done using these methods or functions.

One answer can be declaring multiple variables of similar names, for example check the code snippet below :

But there are multiple problems with this method of collection, can you spot them?

• There is a lack of obvious cohesiveness , at one quick glance one might not realize this is a collection.

• we need to repeatedly declare a new variable in new line again and again, which becomes repetitive and extra time consuming.

Also think what if it was not just a personal favorite fruit list, what if the requirements was to store thousands of usernames? or other kind of real data? That would be impossible to create variable for every single one of them by hand.

Arrays

To solve that exact set of issues or problems, JavaScript provides us with a datatype called Array . This data type enables us to store multiple items that are related together in a same collection under one variable name at the same time.

Let's understand it with an example

Not only this gives a intuitiveness and a better readability, but also in a single variable you can store multiple values. How nice that is!
Not only these arrays can scale to millions or even higher but also you can very easily read, write and update values in the Array.

Create an Array

There are more than one ways to create Arrays in JavaScript, but to not overwhelm you with all the ways you can create an Array let's learn the most used and intuitive ones.

Literal

The most literal way to declare and array as you saw already above is to use brackets or [ sign.

Constructor

Another way to create arrays in JavaScript is to use Array() constructor in JavaScript.

Access array elements

The values we store in an Array is also known as elements of the array. These elements can be accessed using index values. Let's see what that means

First you write the name of the Array variable then immediately after that the index of the element you want to use within [ brackets ].

The index of the elements inside an array always start from 0 and it is a convention and the index change in increasing order like the figure shown below.

Update Array elements

Using the index you can not only access the element but also update it's value.

As you can see in the above example we updated the 4th element's value to be "Brown".

Array length Property

When you create and Array in JavaScript you get a set of methods and properties attached to it. One of those properties is called length , and as you may have guessed .. this property tells us the length of the Array or simply said the number of elements currently stored inside the array.

You can use it like following

Iterating the Array

You can go through every element of the array from start to end, using loops. There are multiple ways you can do so, let's see them one by one.

For loop

You can use a simple for loop to access all the elements of an array in order from beginning to the end like following:

ForEach loop

This is a method that comes with the array itself, when you create an Array in JavaScript you by default get this method attached to it. This method expects a function as a parameter and performs the steps inside that function on every element of the Array one by one.

For...of loop

This loop takes each and every element of an array and performs some operation on them one by one.

These were all the basic ways how we can simply loop over an Array and perform some operation on every item of the Array .

Conclusion

So this is all the basics of Array in JavaScript you need to know for know and hopefully now you can confidently create and use Arrays in JavaScript.

In this blog we will learn how to perform operations on those values inside JavaScript. To do that JavaScript provides us some common operations that we can do on values directly or while stored inside variables and transform them as we see fit.

Need of Operators

Suppose you want to create a program that adds two numbers ... How are you going to do that? How do you normally add two numbers? using + or addition operation correct? Similarly, we can perform additions and other mathematical operation like 5 + 10 = 15 inside our JavaScript program itself.

In JavaScript not only just mathematical but also other kinds of operations can be done too. Let's learn about them in orderly manner.

Arithmetic Operators

Arithmetic or mathematical operation is very common type of operation we can perform on values or variables inside JavaScript.

First we have,

Addition operation +

As you can see it is very simple to perform an operation in JavaScript, you need to provide the appropriate operator (the symbol of operation to be performed, here it is + of addition operator) and the operands or the values on which the operation to be performed, here 5 and 10 are our operands.

console.log() is a function that simply prints the output of the value provided which in this case is output of the + operation.

Subtraction operation -

For subtraction we use - operator.

Multiplication operator *

Multiplication operator is denoted using * symbol.

Division operator /

Division operator is denoted as a forward slash symbol.

Remainder operator %

To find remainder of a division operator we use this operator

Comparison operators

Sometimes you need to compare two values and judge it's output for that we use comparison operators. These operators return either true or false as values. These values are known as boolean datatype.

Equal operator ==

This operator returns true if the both operands are of same value.

Equal operator does not care about the data type of the the operands involved, as long as their magnitude or values are identical.

Not-equal operator

This operator returns true if both operands are different

Strict-equal operator

This operator uses 3 = like === to equate two values and this operator cares about the datatype of the operands involved, it returns true only and only if both the value and datatype of both operands are same.

same like non strict not-equal strict not-equal operator also exist and it is datatype sensitive like strict equal. It is denoted using !==

Greater than operator >

This operator checks if left operand is bigger than the right operand.

Also if you want you can check if a value is either same or greater than a another value using greater than equal operator >=

Less than operator <

This operator checks if left operand is smaller than the right operand.

also like greater than equal operator there is also less than equal operator <=

Logical operators

Logical operators only work on boolean data types of values (e.g. true or false ) , the operands can be simple true or false value or another expression that results in true or false , like output of comparison operators.

AND operator &&

This operator can work on two or more operands at the same time, this operator results in true if and only if all the operands are true

Or operator ||

Or operator can also take more than two operands and if even a single operand is true the result of the whole expression is true, if and only if all the operands are false the expression results in a false value.

Logical NOT operator !

This operator takes only one operand and flips it to the opposite value (e.g. true becomes false and vice versa)

Assignment operators

Assignment operators work as short-hand for combining assignment operators with arithmetic operators. Most basic assignment operator is = which is called assignment operator .. it is used to assign a value to a variable or value of one variable to another.

Addition assignment +=

This is same as combining a = a + b;
Remember the left operand has to be the same variable where the result of the whole expression will be stored, here in our case it is a variable.

Subtraction assignment -=

This is same as addition assignment but for subtraction operation.

In same way the multiplication assignment *= , Division assignment /= and Remainder assignment %= work.

Conclusion

These are the most commonly used operation in most cases in JavaScript, if you grasp the working of all the above mentioned operators you should have no issues in your day to day JavaScript programming.

Programming world as virtual may it seem, more often than not derives it's inspiration from real world. Everything from how we think in programming to how we do the smallest possible action mostly all of them are imitations of real-life actions.

For example, organizing things in your home. Be it a desk , bookshelf, Kitchen or simple pen-stands all of them are containers or designated spaces where you store or keep something specific that holder or container is made to hold.

you would not use a pen-stand to keep paper clips, nor would you use your desk drawer to keep your kitchen items like salt, spices or peppers. Because both the holder and the items have their own designated pair.

Similarly in programming you store values or information, they can be in text format or number format or mix of both or in some other special kind of arrangements. These places or holders for those values, just like real life, have their own predesignated "types".

For example you store text based information in on type of places, and number based values in other type of places. Let's see how it is done in real programming environment.

Variables

Variables are places in memory allocated for your program from Random Access Memory (RAM) of your system. You can store texts, numbers or other kinds of customized types of data in raw format in the memory.

These variables have 'names' also known as identifiers that used to specify which exact memory location (variable) you want to use (read or write data from or into).

World of JavaScript

As any other programming language JavaScript provides us programmers multiple ways to declare variables and store whatever we want to store in there.

var variables

First we will learn about var, var is nothing but a reserved word in JavaScript using which you can declare as below.

Although once very popular , this method of declaring variables are no longer recommended and in production codebase it is even discouraged to use var. var has some confusing quirks like use before declaration and other issues that makes in not suitable for any serious work.

let variables

Instead of var nowadays let is the more preferred method of declaring variables in JavaScript. let variables can be only used once they are declared and variables declared using this keyword does not has surprising quirks like variables created with var variables.

The syntax to declare a let variable is same as var , you just need to use let keyword like shown below.

One notable difference between var and let that you may like to know is that var lets you declare same variable again and again, which is invalid syntax in case of let .

But there might be situations where you do not want the value to change after you declare a variable, like imagine declaring Mathematical constants! For example value of PI which is 3.1415.... . In that case you can use const keyword to declare constants.

const variables

const variables are also known as constants .. once you declare a variable using const keyword that variable will never again be overwritten. If you try to overwrite a const variable it will throw you an error at runtime.

Here is a small summary of all the different types of variable declaring keywords and methods of JavaScript.

Data Types

Before you go and start creating variable in JavaScript with this newly acquired knowledge, you need to know one more thing. Each variable has it's own type. What that means now?

It's nothing complicated all that means is each variable has a property that tracks what kind of value can stored in that variable.

For examples names or texts are stored under string type variables. Numbers and values (Integers and Decimal values) are stored in Number type variables.

Strings or texts are written withing double quotes " , and Number are we written as it is.

There are more types of data you can store in a variable in JavaScript like Array Object etc.. but for now you should just need to understand data has a type and it matters.

Think , a variable named address should store an address right? Not a contact number!! And although JavaScript allows you to change type of a variable that is not at all recommended practice in real world Software Development and is considered as a bug or undesired behavior.

Conclusion

This was a basic introduction to Variables and Data types in JavaScript. Hopefully it was simple and intuitive enough for you to grasp what are variables and datatypes and basics of how do we handle them in JavaScript.

Also if you have overall similar structure with few minor differences then changing them one by one is also a chore.

Your editor may suggest and write the tag for you or at most change opening closing tag name but if you are tired of the repeating same opening closing tags again and again, Emmet will totally change your life and make writing HTML fun again!

Emmet as a shortcut

To be able to visualize effectiveness of Emmet you need at least to items to make. You will understand what that means.

 h1+p

This means create two sibling elements. + is used to denote relationship as “siblings”.

<h1></h1>
<p></p>

There is no limit to how many siblings you can create at the same time but , whole point of Emmet was to eliminate repeatition not write h1+h1+h1 10 or 100 times.

For that we have very interesting shortcut with * symbol.

h1*5

This will create 5 h1 elements as siblings

<h1></h1>
<h1></h1> 
<h1></h1> 
<h1></h1> 
<h1></h1>

This can be any number.

Next thing that takes more time is nesting, you can create nested structure like below.

ul>li+li

Here > sign sets the relationship as Parent and child, left element is parent and right one is the child. You can also apply the * shortcut here using ( Parenthesis ) .

ul>(li*2)

This will create nested structure.

<ul>
<li></li>
<li></li>
</ul>

you can also add id and class, for class you add id with # and class with . .

nav#navbar

Above one will create <nav id=”navbar”></nav> .

Conclusion

You can mix and match on how you create your elements. You can also mix match different Emmet shortcuts. There is a huge amount of possible Emmet shortcuts that cannot be mentioned in a single blog. if you are curious you can visit Emmet Docs Cheatsheet to read more on your own and explore and have fun.

Hopefully after this the joy of Front-end will come back to you.

CSS Selectors

Element Selectors

First and most common CSS selector is element selector, as you know this is the name of the tag or name of the element like h1 , p , table , body etc.

h1 {
    color: red;
}

this sets the color of all h1 elements in the page to red.

Class selectors

Now if you want to select a subset of the elements, simply you do not want to select all the h1 tags but only select few then you use class selector.

For that first you need to select all the elements that you want to select by adding a class attribute to them.

ID Selectors

Now if you want to select only a single particular element you can target them with an unique id. IDs are always unique and used to target a specific element uniquely. This selector is to select one single element.

Group Selectors

Group selectors are used when you want to give different elements similar properties, for example if you want to style a heading and paragraph similarly then you can group them together.

Descendant Selectors

Descendant selectors are used when you need to target or specify particular child of a particular type of elements only. For example you can select all the li under unordered list ul only and not all li items

Universal selector (*)

Universal Selector is the CSS selector with highest matching and least specificity. It is used to select and target literally every element.

Specificity

In CSS the more specific selector you use the highest priority they get, and specificity always override Cascading nature depending on how you use the specificity. If you want to force override a property you can use !important property in any property like below.

p {
color : red !important;
}

Conclusion

Hopefully you now understand how each selectors differ and when to use which one. You should be able to understand how different selectors differ from each other.

let’s understand with a simple story.

URL to Web page

First you need a general idea about the different components of the browser and how they work together.

User Interface:: First comes the UI or the User interface, this UI includes your search bar, bookmark icon maybe , settings menu etc. you basically get the idea.

Browser Engine:: Then comes Browser engine if you have used arrow buttons next to your URL bar you know you can move between pages that you visited one after another back and forth, for example if you clicked on a link from a google search you can use arrows (usually on top left) to go back forth between the pages this is part of browsing, also you can see your browsing history, customize rules and security and other browsing related things all of these are handled by the Browsing engine.

Rendering Engine:: Next comes Rendering Engine, a server does not send a button or a paragraph or a rendered image or the page you see.. the server returns raw HTML, CSS, those HTML CSS files are parsed, then the Parsed content are kept in Content Sink. You can understand parsing as a making meaning of an statement. Like who is the speaker, what is the subject and what is being told about the subject. Same with the HTML and CSS content they are parsed to form a usable representation that can be turned into a web page.

Then the parsed data in the Content Sink is used to form Document Object Model and CSS Object Model. These are nothing but a Top to bottom internal structure representation of how the web page will look like when it is finally rendered on the screen (Inside the Browser). This Object models are then used to construct frame by frame rendering of the web page.

JavaScript Engine:: Some websites or web apps also include JavaScript, this JavaScript parsing is handled by JS engine. One of the popular example of a JS engine is V8 engine. This parsed JS is then binded with the DOM via the Rendering engine because that owns the DOM construction.

UI engine:: User engine is what controls the Browsers interface, it uses underlying hardware render the browser itself in the screen and catch user inputs, when the the web page needs some input it goes through the browser and those inputs are captured by the UI engine. Changes in the browser UI like opening and closing tabs, opening new windows or settings menu etc are handled by UI engine. UI engine interacts with the Rendering Engine to send user inputs to the page and other stuff.

Networking:: This component handles the networking related things like sending and accepting HTTP requests or fetching something from an URL, like actually loading image from a live URL. This part of the browser is actually responsible to fetch the HTML, CSS, JavaScript files and other assets from the server to your browser.

Disk API:: Next comes Disk API, this API enables browser to talk to the actual storage device via the Operating System and store and access all the necessary files and information including downloads and uploads. All the Local storage and other API and components like JS engine, Networking all use Disk API to talk to the actual storage hardware via OS.

Browser Engine vs Rendering Engine

If you have understood the part you already know Browser Engine only related to handling the browsing experience for you and the Rendering Engine handles converting raw HTML, CSS, JavaScript into a working functional and responsive web page that you can interact with.
Both are different components with different concerns not to be confused with each other.

Conclusion

So hopefully you understand that browser is not a one singe piece of huge system that does it all, it is a combination of multiple smaller sub-systems that work in co-ordination and sync to prove users a seamless and smooth experience of surfing the internet.

I hope this was simple enough for you to internalize. Thank you for reading.

Today we will understand what it is and how you can write your own HTML webpage.

HTML tags

Tags are little smaller chunks of an HTML that are written in specific order to make up the whole HTML document. Each and every tag has it’s own individual purpose. Each tag is a wrapper or a box to contain some content or information. Depending how you want to convey or present an information on the screen you chose and appropriate tag for it.

Tag and Element

If Tag is a wrapper around the content then the whole content wrapped in a tag with all the information and content as a whole is called an Element. A tag is an available wrapper and an element is a content wrapped in a particular tag.

Common Tags

Below is some of the most commonly used simple tags.

body

A body tag is used group all the content of an HTML document. All the content elements are written inside the <body> tag.

h1 to h6

h1 tag is used to write a heading. H1 is the most biggest available heading tag by default. And from H1 to H6 you can go largest to smallest heading in order. An example of an h1 tag is below.

p tag

P tag is used to create paragraph elements in an HTML documents. it is usually used write large chunk of words in a single block.

a tag

Anchor tag or a is used to hyperlink or simply connect our HTML document to other websites or links. It is used for navigation from one page to another.

div tag

Div tag is used to group multiple element together inside a single structure. This is used to show content in different segments and parts inside you HTML document.

hr tag

hr tag also known as horizontal rule tag and used to create a horizontal line across the HTML body,

br tag

br tag is know as line break tag this tag is used to put line breaks. This tag can be used to put breaks between different elements or different contents of an element.

Paired tags and self closing tags

You may have noticed that some tags like body, h1, p, div are paired they have a opening and closing pairs like <h1> and </h1> , essentially same tag name repeated with a / . But some tags like hr br are self closing , simply they are written once and in the first < and > they are terminated with an / .

Block level and Inline elements

The element’s like div and p they contain multiple blocks or elements , like paragraph tag can contain multiple chunks or text or div elements can contains multiple other elements including div elements. So elements made of them are known as block level elements and they take all the available space.

And the other elements like a tag elements take only the space needed. These types of elements are knows as Inline elements.

Conclusion

This is not nearly close to all the available tags and elements available in HTML and are just a small subset. You may go ahead and read more about all the tags available, although that is not recommended. You may refer to MDN docs or w3schools for reference.

Hopefully now you understand basics of HTML and the tags and elements, difference between them, what are Inline and Block elements.

What is TCP and it’s need

TCP or Transmission Control Protocol is one of the most used Transmission protocol used acrossed the Internet. TCP ensures data sent in chunks or packets in the right order, to the correct destination in a reliable and safe manner.

TCP is needed because it solves some crucial problems, data is never send in a bulk size on the Internet, it is broken into multiple chunks with some extra meta data with it’s ordering info along with other additional data.
These packets may get lost or disarranged on the way or there might be some repetition or may get corrupted totally, to ensure data reaches In correct order, exactly once, to the correct place and accurately TCP protocol was created.

Three way handshake

TCP protocol performs three steps to confirm it can reliably send data to the destination while maintaining all the safety , order and accuracy.

• First the sender sends a Synchronization or SYN message to the receiver.

• Then if the receiver got the SYN message it sends a Synchronization Acknowledgement or SYN-ACK back to the sender.

• And when the sender receives a SYN-ACK it returns a final Acknowledgement signal ACK to the receiver.

This is what essentially known as the three-way-handshake because total of three transmission happens between the sender and the receiver before the actual transmission even starts.

Actual data transfer

Once the handshake is done finally the actual data transfer starts. Each data packet or chunk carries some additional meta data about it’s order and sequence. If receiver misses a packet or a packet it lost on the way receiver just asks the sender to send it again.

For each packet receiver sends acknowledgement to the sender so no repetition happens. And all the data is rearrange in proper order with help of the meta data.

Closing a TCP connection

When data transfer is done the sender sends a FIN signal to the receiver telling it that “I am done sending data”. Then the receiver replies wit ACK for the senders FIN and sends it own FIN . After receiving sender’s FIN client sends back it’s ACK and that is how a TCP connection is terminated.

Conclusion

TCP is the most safest and powerful transmission or transport protocol in terms of safety, reliability, integrity. And all of it’s magic lies in it’s three-way-handshake and a graceful termination of the connection.

So hopefully you now understand how TCP works behind the scenes to maintain a reliable and safe and accurate data transmission.

TCP/IP and UDP

TCP/IP protocol

TCP/IP or commonly called as TCP protocol stands for Transmission Control Protocol. It is commonly know as a reliable and safe protocol among the two. When you want your data to reach safely, securely, without data loss and fully reliable way you choose TCP as the protocol.

Key advantages:

• Reliability: TCP give you a guarantee that what you send is what will reach the destination, no matter what it will make sure the data is transferred with complete accuracy and integrity.

• Connectivity: TCP sets up a strong connection before it sends data to make sure the data can be transferred safely, accurately and completely.

UDP protocol

UDP stands for User Datagram Protocol. UDP usually does not care about data loss, integrity or security of the data. UDP just send the data to the destination as fast as possible even at expense of loss of security and potential data loss. This protocol is used when you only care about speed of the communication and not about integrity.

Key Advantages:

• Fast: The most notable point of UDP is it’s speed, once it know where the destination is it just sends data there no confirmation or order maintaining like TCP.

• Low latency : UDP being the faster one between the two protocol it is often preferred in low latency system where every millisecond matters e.g. specific parts of Fast trading systems or any live streaming systems.

Relationship between TCP and HTTP

You may think TCP and HTTP are both used to communicate between two receiving and sending end but they sit on different layers of the whole process.

According to the OSI (open systems interconnection) model of Network communication.. HTTP is a protocol used at top most or Seventh layer also known as Application layer. HTTP request is part of application logic.

Whereas TCP and UDP both sit at fourth layer or Transport layer that are much lower level and are concerned with transport of the data in packets or chunks from source to destination.

HTTP protocol defines how two systems “talk” or communicate at application layer, TCP and UDP define how those same systems communicate at Transport layer. Both handle communication at separate level and at separate concerns. Usually a developer is only concerned with application layer of the whole communication.

Conclusion

Both TCP and UDP have their unique use cases, neither is better than the other. Both are widely used depending on what is the need of the communication that you want to do. If you want integrity,accuracy and safety at expense of speed choose TCP or if speed matters above all choose UDP.

Hopefully you understood what these two protocols do and how they relate and differ with each other and HTTP.

But browser is a tool made for consumers in mind , yes browser provides one of it’s kind developer tools and development ecosystem but a developers much time goes in debugging and running commands in terminal.

But there exists a much simple and straight forward tool that not only works in terminal but also provides a much simpler request response format workflow that makes testing your APIs much more simpler and easier and quicker. The tool is called cURL.

What is cURL?

cURL is a tool that allows you to send request to APIs and Inspect their response from the terminal itself. When you use cURL directly from terminal instead of the full-fledged browser you not only strip away all the additional complexity that comes with the browser but also you can customize the request and response according to your needs much easily.

Using cURL

First request and response on cURL

Let’s send our first request from curl

curl https://www.example.com/

This is a basic and common example of how you can send and HTTP request using cURL. You can also send http, ftp and dict requests too using cURL.

Understanding request and response

You can also customize you HTTP request according to your need. For example if you want to see detailed response from the server or API you are trying to talk to you can use

 curl  --dump-header - https://example.com

command. This command dumps the header information from the response of the Server that will help you get additional information show below.

GET request

Here in the above image if you see you will see a line HTTP/2 200 . Here HTTP/2 means the server is using version 2 of HTTP protocol and it returned 200 as response status that means OK.
It also contains additional information like date, allowed request methods, server name and most importantly the type of content as content-type: text/html that tells that the text returned in the body of the response is an HTML document content.

POST request

Now as we can see from the GET request that the destination do not allow POST request because it is not present in the allowed request methods list. So let’s try to see what happens if we forcefully send a POST request with a dummy data.

curl -X POST -d 'key=value' --dump-header - https://example.com

Here you can see that in the response header this time it has given a tiny bit different of response header. As you can see this time the HTTP code is 405 which literally means Method Not Allowed . So the server is directly telling us that the used method is not available for this Server. But is still returned the HTTP content regardless.

HTTP codes and returned response header and response body depends on internal logic of the Server.

Beginner Mistakes

Now that we know basic know how of how to make HTTP request using cURL and how to read the responses let’ understand what not to do.

• Always make sure your command is correct and respects request method format, many beginners mismatch the request type and passed flags in the command. That may result in misinterpretation from the server and cause confusion on user’s end. e.g. sending -d ‘key=value’ in a GET request

• Always read and send proper Content-Type to avoid confusion and misinterpretation.

• Many beginner fail to distinguish difference between the header and the actual response body, you should be able to avoid them.

Conclusion

This was simple and beginner friendly introduction to cURL and it’s use cases. As you practice more commands and options you will learn more about it and get better at using it. But do avoid going too deep in the available options , always prefer to learn as you go. cURL is not at all a small tool, it is a industry standard tool to make HTTP and other requests and many other tool use cURL under the hood e.g. Postman .
Hopefully it was simple and easy to understand and now you will be able to start using cURL in your daily development workflow.

What are DNS records

DNS records are a list of entries that associate a Hostname to an address. Now this address can be a different hostname, an actual IPv4 or IPv6 address depending on what type of record it is. When you spin up a server somewhere you get it’s IP address you need to manually connect it to your custom Domain name via a DNS record at your Domain manager’s site (e.g. Cloudflare, Namecheap, Hostinger etc. are few of many available options).

A record

This is the final public IP address that is resolved at the end of DNS queries usually. An A record is always a IPv4 address record. For example A record for google.com contains `142.250.183.142`.

AAAA record

This record also contains the actual IP address associated with the domain or the target destination server. Only difference between an A record and AAAA record is AAAA record contains IPv6 address instead of IPv4. An example of IPv6 record could be 2001:0db8:85a3:0000:0000:8a2e:0370:7334 .

CNAME record

A CNAME records contains another domain name instead of a IP address , basically it associates one domain or subdomain with another domain or subdomain. To get the A or AAAA record for that second domain it needs to be resolved via an Authoritative NS.

If someone has their blog subdomain mapped to a blogging site like hasnode.com then the CNAME record for that will look like

here blog is the subdomain for the actual domain that is being associated with the CNAME blog.example.com → hashnode.network .

MX record

MX records stands for mail exchange record. These records are responsible for routing mails to correct destination mail server according to the SMTP server. There can be multiple MX records for same mail server.

TXT record

DNS TXT records were originally introduced to add text information to DNS. These let DNS administrators put additional information for their domains, one domain can have many TXT records. Nowadays these text record help domain owners put additional info in their domain’s DNS so it is more harder for malicious practitioners to spoof or fake sender’s domain in e-mails.

NS record

NS records are used to specify a different authoritative NS for a domain different from the registrar of that domain. For example if you bought your domain from Namecheap but want to manage your Domain and it’s records on Cloudflare you can do that by putting a NS record in Namecheap that contains Nameservers of Cloudflare.

Summary

The DNS records are bones and muscles of the who DNS. They tell DNS resolvers where to look for the domains and how to get to them. Each and every record type play a particular role in DNS resolution as mentioned above.

Hopefully now you understand what each DNS record exist and why they are needed and how they are used.

DNS exists because a fundamental difference between us and the Computers , Computers are good at numbers and we are good with word or rather names. It is hard for us to remember every single IP address for all the sites we want to visit but Computers need actual address to take us to that exact server’s contents. That is why DNS resolution process takes the domain name or hostname and finally returns the server’s true IP address.

Inspecting DNS resolution

DNS resolution is not as simple or straightforward as it sounds at start, it happens in multiple servers, multiple server to server hops are involved for each resolution request. But luckily for us we have a tool available for us that can be used to diagnose the resolution process. The tool is a command-line utility called dig.

With this command we can understand the DNS resolution flow easily. For that we need to understand how dig command works first.

Starting from the Root

Every DNS resolution starts from the Root Servers that are the Root entries or top most level servers in the whole Domain Name System. Every domain contains a TLD (e.g. .com, .org, .us, .ai, .in etc) we need those TLD server’s address first and to get them we need to know how to reach Root server first.

dig . NS gives list of all the Root servers. . here represents “Root” and fetches all the Root servers.

These Root servers are starting point of every domain name lookup or DNS resolution process.

The TLD servers

TLD servers are responsible for knowing further information related to domain with a specific TLD like .com , .org etc. These TLD Name Servers are responsible for knowing Authoritative NS (Name Server) for the domain that is being looked up for and has a specific TLD like .com in google.com . We can ask the Root servers, that which TLD servers can resolve a particular TLD e.g. .com .

To know the TLD NS use dig com NS command. This command will list the TLD servers list. This list is fetched from the Root servers that we got in previous step and store only Authoritative NS for com TLD domains only.

Authoritative Server

Our next stop in DNS resolution query is Authoritative NS. Only an Authoritative Name server can tell the actual IP address for the domain for which the whole resolution is happening, from Root NS to TLD NS to Authoritative NS all this tour was to finally reach the actual IP address of the Server.

Continuing with our dig example from Root name servers we got TLD NS for .com TLD then from those TLD servers we will go to authoritative NS for google.com.

we can use dig google.com NS command to finally do that.

As you can see the ns1.google.com and other are the authoritative server for google.com domain that dig command fetched from us from TLD servers of com TLD.

The final destination

Now that we have multiple Authoritative NS for google.com we can finally ask them for the actual IP address for google.com .

for that we do dig @ns1.google.com google.com A . This command returns the true IP address of google.com

As you can see in the answer section the IP address for google.com . You can directly enter that IP 142.250.183.142 in you favorite browser’s URL bar and it will surely take you to google.com.

Summary

So you saw how we recursively resolved DNS query for google.com using the dig command. But browsers do not use dig command instead Browser uses something called Recursive DNS resolver.

A recursive resolver takes the target hostname and resolves the IP address of it for the browser. As you can see in the diagram each query originates and ends at the recursive resolver and the resolver itself queries each and every server in the step and finally returns the IP address. From Root NS to the final Authoritative NS it pinpoints the IP address for exact domain name it is resolving for just like we find for files in directories and sub-directories recursively.

Conclusion

Hopefully it is clear to you now how step by step DNS is resolved behind the scenes and how Browsers fetch the actual IP address for any domain name and fetches the content of those servers.

What is the Internet and how it reaches you

To understand how Internet works behind the scene and how you get connected to it, we first need to understand what the Internet actually is. Let’s start from you and we will gradually build up to the whole Internet, simple enough right? Alright.

Yes it starts with you . How? When you are accessing the internet first and foremost you are part of a Local Area Network or LAN. What is this LAN now? If you have taken a proper WiFi connection from an ISP with a Router, it can be all the people at your home who use the same WiFi network including your own device.

It boils down to how many devices are using the same local network to connect to your ISP at the same time, all of them are part of the same LAN. Each modem is a gateway between the ISP and the associated LAN. Now an ISP usually serves countless other LANs each connected to the ISP via their own Modems, think of your neighbors or whole neighborhood. And they all might not be using the same ISP. All the different ISPs are all connected in a Bigger Network and Those Networks are connect to form National and then International Networks and they together form what Internet essentially is.

Any device be it you home computer, or devices at office, or some server somewhere all of them are connected in some kind of LAN configuration and via their ISP they are connected to the Internet.

Hopefully now you understand that a Modem acts as a entry point between your home network (or LANs in general) and the Internet (via ISPs). Now let’s understand what a Modem or Router and other devices actually do behind the scene to make the entire thing work.

Networking Devices

Modem :: Modems (also known as) Modulator-Demodulator and as suggested in the name they modulate and demodulate a signal or in simple words they convert digital signals into analogue signals and analogue signal back to it's digital counterpart. Usually in home networks it's the modem that connects your router with your Internet Service Provider (ISP). Modems are usually connected to the ISP via cables or wireless receivers.

Router :: Router is what sits between you LAN devices and Modem , although some modern Routers come with Modem’s capabilities, traditionally Routers main job is to create a Local Area Network with all the connected devices and manage traffic. Router assigns private IPs to each individual connected devices. Routers route or direct data packets (raw data travelling through wires and other mediums) to their intended destination like air traffic control guides aircrafts on their intended destination. Router not only host and manage a LAN but also connects it with a larger network via Modem

Hub :: Hubs are similar to Router but do not care about destination of the data packets and send them to all the connected devices that can receive data packets. They are not commonly used nowadays because of this limitation and instead Routers are used instead.

Switch :: Unlike Routers, switch do not connect a LAN to a bigger network , they use device MAC address to transfer data packets within a Network (usually a LAN). So unlike Router , Switch isn’t responsible for connecting a Local Network to the broader network. Switch is like a traffic police that direct the data traffic within a Network so devices like printers , computers and other devices communicate to each other that are connected in a same network.

Firewall :: Firewalls are used for security purposes they decide which data packets can travel between two networks. You can think of a Firewall as a security guard standing between two networks allowing and rejecting data packets to keep unwanted or malicious traffic coming in or stop any sensitive secret data leaking from a network. Firewalls can be both a hardware device or an installed software program.

Load Balancer :: Imagine waiting in a single long line for a movie ticket counter where the other counters are empty and someone comes and diverts people away to those other free counters so the unnecessary waiting time can be reduced. That is exactly what what a load balancer does but with network traffic instead of people. it is usually used in case of diverting traffic to multiple servers delivering same service so more requests can be handled simultaneously.

Behind the Scenes

Now from above section you got a basic idea of how different devices work individually or what are their purposes and what are the difference between them, now in this section we will see how in a real world scenario they work together. With a simple example it will become really clear how all the devices work together

The request and response

Suppose you are home watching your favorite live stream from any streaming platform, first you will go and use the streaming platform (e.g. Netflix, YouTube) and and click the stream you want to watch. That will send the request from your device (e.g desktop or phone) to Router then via Modem to the ISP.. then ISP will tell your device where to send request for the content with a same reverse sequence (ISP > Modem > Router > Your Device). If your ISP does not resolves the address it may send the resolution to other DNS servers that can and then return you their response.

The destination

Then after that your device directly send the request to you the destination server that is currently streaming the video stream you want to watch. And there might be many many users currently trying to watch the same stream at the same moment! Think of a Cricket or Football match being streamed. On the servers side one server may get overwhelmed by too many request at the same time where you are just another one of the requesting viewer.

From the Servers to You

For that the streaming services use Load Balancers on their servers and equally distribute the traffic or all the requests to multiple servers that are serving the same stream, so the servers only get the amount of requests they can handle at once.

And from one of those servers you get your stream back to you local Network first via you Modem then your Router and then in the device where you are watching the stream.

And last but not the least Firewalls protect the servers or any other traffic or request coming from any foreign or forbidden network.

Summary

So now you have a basic idea of what all the individual networking devices do and how they work together to make a functional Internet possible and enables you to surf the Internet without having to think about all the internal details.
Hopefully this was simple and clear enough to understand how Internet reaches you at home at some basic level and now you can explain it further to someone else too.

In last two blogs we talked about Version Control in general and got introduction to Git and learned what is importance of version controlling and why we choose Git specifically to handle source control or source tracking of our projects. In Git introduction blog we learned about basic Git terminologies and basic Git commands. The first term we got introduced to was “repository” where we learned Git repository is the project directory that is being maintained by Git which is not entirely correct.

Actually, the repository is just the .git folder inside our project directory. There is a clear distinction between working directory where we store our actual files and work on them with the actual repository or the “.git“ folder where Git maintains all the tracking information, commit history and much more. Today we will dive inside the .git folder and discover how Git stores all the information and how it works internally.

Behind the simple commands

Starting with some basic concepts that you should have clear is Git is not a VCS system at core, yes you read that correct. At core Git is a content-addressable filesystem. That means Git underneath the VCS interface is just a Key-Value storing system that stores all of the information as blobs or objects and provides keys to access them. These keys are SHA-1 hash keys.

Git always did not provide these simple VCS interface over this key-object management workflow.. It was a more complex and tedious process. To really understand we need to see what goes on when we enter our simple looking Git commands.

Git provides two different set of commands that work at two different layers of Git.. one is called Porcelain the ones that we are used to using on day to day basis and another set that exists at a deeper level are called Plumbing. You can compare it to using water sink that is usually made of Porcelain and straightforward to use where the actual water management is done by Plumbing mechanism hidden behind. (Yes Linus Torvalds is a genius!).

Let’s look at few step by step simple plumbing command to understand how Git really works underneath the simple VCS interface.

Git Objects and usage

Everything related to tracking information that Git stores in .git folder is an object inside .git/objects folder. Let’s see how to manually store a file in Git Objects database.

git hash-object -w README.md

In this command Git reads the contents of the file README.md and creates a blob object for that file from the content along with it’s metadata. It also calculates the hash from the blob file content and returns it as a key. The -w flag tells Git to also store the blob object in the database.

This command stores the blob object under the .object folder under subfolder for e.g. if the hash is something like 67bf245a3cd… then it will be stored as .git/object/67/bf245a3cd…..

Next thing we need to do is update the index file that lives inside .git folder in path .git/index. The blobs are not much useful by themselves , we need to store exact what file the blob is associated to along with few more metadata to actually make it useful and ready for commit.

git update-index --add README.md

With this command we add the blob file’s information in the index file. This commands updates the index file and writes the blob hash 67bf245a3cd…, associated file path README.md and filemode or permissions.

Did you realise what we did? We essentially added README.md file to staging area that is usually done simply by git add README.md command. Yes when we say adding files to staging area we mean adding these details to the .git/index file.

This is where we understand importance of Index file or staging area. Index is meant to be as a stage for tree objects to be formed upon so that the current filesystem snapshot (the blobs hash , filenames and directory hierarchy) can be stored as a hierarchical structure in the version history.

Tree objects are another type of object that consume information from index file and stores the blob info and their metadata along with sub-trees in case there are sub-directories under the root project directories and in those sub-trees blobs associated with those sub-directory files are stored.

These tree objects are created with

git write-tree

command. This command also returns a hash calculated from the tree object it forms and returns as key for the newly created tree object.

Now this tree is a exact snapshot of your staged filesystem present in Index file.

To commit this tree permanently to you repository’s tracking history you use

git commit-tree <tree_hash> -m "Add README"

command. This creates a new commit and returns a hash for this commit that you just made. If your repository has existing commit to maintain a proper commit history that you usually see from a git log you need to use -p flag and pass previous commit hash.

git commit-tree <tree_hash> -m "Add README" -p <previous commit hash>

And with that you have essentially done git commit -m “Add README“. Each commit object contains

1. Hash of the tree object

2. Parent Commit hash

3. Author

4. Comitter

and the Commit message that you provided.

For each object be it blob, tree or commit object there exists a Hash that is actually calculated from exact contents of those objects and acts as a key to them.

Summary

Yes, All of this happen under the hood every single time you complete a git add and git commit -m “msg“ loop using the VCS frontend commands or the Porcelain commands. Now not only you know actual low level Git commands do when you run the higher level simpler commands but also what exactly goes on inside the repository and how they are saved inside your .git folder and sub-folders.

If you are new to Git or version control in general it may seem daunting at first but trust me once you really understand the basics of Git, then Version Controlling using Git will become your second nature. Let’s keep it simple and focus on one step at a time.

Git is a free and open source Version Control System, that’s it. Now what is a Version Control System you may ask? It is a tool that helps you to track changes of your work across the whole working process. Simply Git allows you to store multiple snapshot of the changes you make to your work. Each newer snapshot contains some newer changes that were made after previous snapshot and link to it’s previous older snapshot of changes. So that you can easily undo redo or edit those changes.

Git enables multiple developers to work on the same project in their own machines simultaneously while contributing and sharing the latest changes with each other seamlessly. Each contributor work on and make changes to their version of the project and share the newer snapshots or commits with the rest, who then add that newer snapshot or commit (Sometimes multiple commits) into their local copy of the project and continue working with the newer version. Git also allows us to detect and resolve conflicts between two different commits made by different people.

That is all a Version Control System essentially does. If you want to understand VCS (Version Control Systems) in more depth then read this article that goes in detailed explanation of what a VCS is and why it is required in modern development. But you don’t have to worry about it too much to understand essentials of Git and from this article you can easily understand the basics of it.

Before we go all in with what is Git and how it works and all , let’s first understand why should we even concern ourselves with something like Git at all. What features Git offers that you should consider investing your time and energy to learn a new tool and it’s terminologies? Why should you even consider using Git in your projects at all?

Actually there are multiple crucial and unavoidable reasons to do so.

Why use Git at all?

1. Where, What and When : When tracking changes with Git the first and foremost benefit you get is every snapshot that you ever make in your project is visible forever and can be identified later on no matter how big your project grows. Each and every change that you commit will be marked in full details as in Which files were changed, what changes were made exactly and when the changes were added permanently (committed) in essence the exact date and time the changes were committed.

   

   Git solves that.

2. By Whom : Each commit also stores who authored it or created it. This might seem like a small addition but in real world development processes this can be a life saver, In bigger corporations teams of multiple people work on the same project and sometimes each team working on a specific part of the projects consists of multiple developers or experts. And in that scenario this detail makes co-operation, collaboration and teamwork a lot better. Especially it helps pinpointing source of the problems easily.

   

   Git solves that too.

3. Branching: Git allows you to keep more than one parallel version of the project. This feature is actively utilized to test new features without tampering the main working files, fix bugs, roll out updates and provides other convenient and quality of life experiences for the developers.

   You can create a branch from any snapshot or commit of your project and you can merge branches to your main branch to integrate changes created in that secondary branch to your main branch and this is a popular technique that is actually used to develop and test new features without breaking the whole product or features at the consumer’s end.

4. Rollback and Revert : Git allows you to revert changes by switching to an older commit as working state or current state of the project and create a branch or make changes on that branch directly. This feature gives us a superpower to go back in the timeline of our project and fix mistakes or even diverge in a different branch from that exact point with a totally different timeline or simply undo any errors.

5. Real world Collaboration: Git is distributed Version Controlling System or simply said a distributed tracking tool. It not only allows a group of people working together on the same project, individually and locally, track and control their work but also it can act as a centralized hosted service that tracks changes made by everyone involved and working on the project in one place. Github, Gitea and Gitlab are just few examples that host the projects that are using Git on their remote server using this feature of Git.

Brief History

Git was created in 2005 by Linus Torvalds, a Finnish programmer who is most popular as the creator of Linux kernel since 1991. After facing problems from proprietary Version Control Systems he created his own Version Control System to maintain the source code of Linux and named it Git.

“Since its birth in 2005, Git has evolved and matured to be easy to use and yet retain these initial qualities. It’s amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development“ - Official Git Docs.

Basic Git Terminologies

Before we go ahead and jump into all the fancy commands of Git, let’s first understand few key terms and words used in context of Git and version controlling in general. So that when we finally start learning Git, it would be a lot easier for us to do so without being confused in all the fancy jargon.

Git Repository: A Git repository is basically the workspace or the Project root directory or folder that is actively being tracked by Git for new changes. In the next section we will see how to setup our project as a Git repository or repo in short. This repo contains your project files and the .git folder where Git stores all of the internal files and folders used to maintain the Git repository.

Tracked files: As you can probably tell already that this refers to all the files that Git is actively tracking for changes and if any of these files are changed Git will tell you that they were modified. Yes if you create new files in your Git repo Git will not track them by default but report that they are untracked and need your attention. To actually track untracked files and changes in those files you must first tell Git to track it manually.

You can also create a “.gitignore” file, the file and directory names written inside this file are ignored and not tracked by Git.

Staging area: After you tell Git to track a new file in your Git repository manually or you tell Git to add the changes made to the files that are already being tracked, Git adds them to staging area to commit them, this is the place where all the recently added files and changes live. Git cannot preserve new changes directly. You need to add changes to staging area for Git to be able to preserve them.The staging area is basically Git’s way to know what exact changes will be committed in next commit and Git commits only the changes present in staging area.

Commit: Commit is an action that you tell Git to perform when you want to preserve all the changes added to the staging area. This new snapshot or changes permanently added to the repository is called a commit. Each commit has it’s own id or hash that Git uses to reference them individually. Each commit contains some additional metadata like author, creation date , link to previous commit.

Branch: Your Git repository can have multiple parallel versions that do not affect each other. These versions are called branches each with their individual commit history and different version of the project. Each repository has at least one branch called main. Git keeps the files in your working directory just as same as latest commit in the currently active branch. If you wish to incorporate changes committed in one branch into another you can merge them together.

HEAD: HEAD is nothing but a pointer that points to the currently active branch of your repository and that branch points to the latest commit made in that branch.

Basic Git commands

1. Initialize a Git repository : To use Git in our project we first need to initialize our project as a Git repository, so that Git can track the changes we make. To do that we use

    git init
   

   command.

   

   It creates a .git repository inside your project folder and initializes you project as a Git repository and looks for any changes made inside the repository. Whether the repository is empty or already have some files when initializing it, this command does not delete anything and only creates the .git folder.

2. Check repository status : This next command is one that you will use very often. This command is used to check the status of tracking in our Git repository. All the changes that are made will be listed by this

    git status
   

   command. All the untracked files, tracked changes that are not staged yet and all the staged changes yet to be committed are shown by this command. This command is frequently used to track the state of our repository.

   

3. Add latest changes : To add the changes that you made in your repository to the staging area you need to use the

    git add <filenames> ...
   

   command. This command adds only those files that were given in it’s arguments to the staging area. Once the files are in staging area they can be committed. Also if there are too many files that you want to add to the staging area or do not want to manually add the file names to the command you can use

    git add .
   

   command too. This ‘.’ at the end of the command means all the files including all the untracked files (if any).

   

4. Finally committing the changes : After all the modified files or new files that you want to commit are staged in the staging area they can be committed with

    git commit -m "<commit message>"
   

   command. Be mindful that the commit message is mandatory and you must provide a commit message to every commit you make or it will fail to commit the changes. After being committed the changes will permanently be listed as a commit in the commit history. Next we will see how to see that commit history.

   

5. See the Commit history : You can list all the commits that you made till now with

    git log
   

   command. This command lists all the commits in a stack view .i.e newest to oldest fashion and the top most commit is the last one you made. For each and every commit, in addition to the commit id or hash the Author (the one who made the commit) and the date time timezone (when the commit was made) followed by the commit message are listed also.

   

6. See the differences : If you want to see the difference between two commits in your repository to check exactly what changes were made between them you can use

    git diff <commit1 hash> <commit2 hash>
   

   command. This command displays the additions and deletions to the files across the commits.The commit that has the commit1 hash is treated as base and the second commit2 hash is treated as the newer commit so you need to put older commit hash first and newer commit hash later if you want to see the changes in the correct order.

   

   

7. Reset commit history : Sometimes it may happen that you want to undo one or more commits or simply put those changes back to staging area or working directory, for that we use

    git reset <commit>
   

   command. This command moves the branch to point to that commit.

   Depending on what flags you used, it may permanently delete the changes made after that commit or put them in the staging area or un-stage them completely but not delete them. Let’s understand these flags.

   1. Default or --mixed reset:

       git reset --mixed <commit>
      

      or simply

       git reset <commit>
      

      this command (or the --mixed flag) just moves the current branch to that specified commit and removes all the commits made after that commit, but also preserves the changes that were stored in those removed commits. Those changes are not marked for next commit or not kept in the staging area but in the working directory (inside the actual files) itself ready to be staged again.

   2. Soft Reset

       git reset --soft <commit>
      

      This flag also removes the commits made after the specified commit while preserving the changes made in them. -- soft flag keeps those changes in the staging area or in the index file simply marked for next commit.

   3. Hard reset :

       git reset --hard <commit>
      

      You need to use this flag with caution and only when you are sure you want to permanently delete all the changes made after the specified commit. This flag not only removes the commits made after the specified commit but also overwrites you project directory to be exactly same as it was in the specified commit removing all the newer changes.

Summary

Above commands are few of the most commonly used Git commands and just enough for you to get started with Git in your projects. Although there are many more functionalities and tools Git offers but if you just use the above mentioned ones you can easily get started with it and then learn as you go.

Git has become a very popular and very successful version control system because of it’s easy-to-use, fast, efficient and very intuitive commands. Due to wide adaption of Git many Git repository hosting services like Github, Gitlab , Gitea, Bitbucket are built around the Git as an ecosystem. Git is an essential addition to your toolbox that will save you from a lot of trouble and will prove more useful as more time you spend in you development journey!

Hopefully you learnt importance and basics of Git from this blog and now will easily be able to start using Git. Thank you for reading.

But have you ever stopped and thought why? Why do we even use Version Control System (VCS) and why it was created in the first place? Exactly how version controlling helps us or why from a small side project to big corporate products all use some kind of version controlling tools? Yes Git is just one of many Version Controlling tools.

Before jumping into how VCS work we need to understand what problems programmers faced when version controlling was not a thing yet. We must be able to relate to the programmers who had to invent an entire new concept and what pain points they were trying to eliminate to really grasp why it’s really need.

Why Version Control?

Imagine you are creating a personal side project , where you have all the features planned out and you know what you are building and you are adding one nice feature after another as you please. After few weeks your project has grown decently big and significantly more complex.

Then suddenly you find that somewhere in the whole development process till now you have introduced a major bug in the codebase at some point and all the recently added features depend on it. Now you need to fix the bug without any idea when and where the bug was introduced and how to pinpoint it’s source.

Now you wish only if you could get to that exact point where the bug was made before so many dependent features were added. But it is now impossible to get back to that exact point and it is too hard to pinpoint the problem without losing significant time and sanity. Feel the frustration?

Exactly this was one of the major reasons developers needed a solid way to track different version of their code from the very beginning to completing the project, so they could revert back and forth to any tracked version as they wished. To focus on building the product rather than bug hunting for hours or days or sometime even weeks.

The diagrams below visualizes exactly how a VCS solves that problem and helps programmer make changes that get tracked and can be reversed as needed creating a smooth software development experience without frustration and regret.

1. Start tracking version from the beginning

2. Revert Changes and fix the bug

3. Continue with the corrected code

VCS helps us revert or rollback changes and get to the exact point where the bug was introduced and fix it and continue development with the corrected version of the code.

But version controlling is just one of the problems that pushed the development of Version Control Systems.

The collaboration hell

Now imagine you are working in a group project with your friends.. how you would share your whole project to your friends and how will they share their work with you? A simple and straightforward way can be using using zip file in a pendrive or over the internet. To keep the example simple we will go with the pendrive option.

So your friends take the project from pendrive, make changes, add new commits and give you the pendrive back with latest changes inside the drive and there you have your new feature, sounds simple enough or is it?

Think what if the pendrive goes around between your friends before returning to you and your friends make changes to the project and you add some features to your local version of the project too at the same time. Then this will create a conflict.. whose changes are to be taken as the final one and which one to reject? or what if someone overwrote someone else’s changes while working?

We solved the tracking and versioning problem to make bug fixing or rollbacks seamless but now we have collaboration and code merging conflicts and in the real world software development flow of collaboration can make or break the whole development process.

Single source of Truth

Now think if there was one singe source of truth, one dedicated maintained version of the project that would be the only version that is taken as reference or simply as the latest and only correct version of the codebase and where all new changes are merged.

As you can see in the above diagram before making any changes to the local codebase the latest remote version is always fetched and the local version is replaced with the remote latest version. This way everyone always has all the latest changes and have identical codebases. And remote tracking is essential part of a complete Version Control System.

Typically a remote VCS server is used as a centralized tracking system that tracks new changes just like the local tracking. The local VCS and the remote VCS always use the same version controlling tool to make it possible to sync local and remote tracking in a compatible and uniform manner.

For example Github, Gitlab, Gitea all use Git internally. They support, and are built around hosting, projects that specifically use only Git as version controlling tool.

Summary

So let’s summarize exactly what problems Version Controlling Systems solve.

1. Unavoidable complexity: The very primary issue VCS solve is losing changes and intermediate states of our work by storing snapshots of older versions of our projects and enabling us to roll back or reverse our mistake or fix them. Without this tracking, pinpointing a bug in large codebase with over hundreds or thousands of files would be like searching for a needle in a haystack. Think about Linux kernel development as an example.

2. Lost information: As we learnt in the collaboration hell section that having no single point of reference is like being lost in the sea without any sense of direction, remote VCS servers act as a lighthouse and always point to the latest valid snapshot of the project we are building.

3. Collaboration history : Before VCS or Version Control System was a thing deciding who is responsible for a particular piece of code written in a codebase was almost impossible. Without proper identification maintaining that code or asking the right contributor to make modification to that code was not possible.

4. Merge Conflicts: Not only having a single remotely tracked version of our codebase helps preserving intended changes into the codebase but also it serves as a rollback point where we can get back and resolve all conflicts between changes made by different contributors.

Conclusion

From this you may have gained a basic understanding of why we actually need version controlling in our projects and why it was necessary to invent version controlling at all in the first place. Today no serious projects or real world products are developed without using some kind of source tracking or version controlling.

There is no one single universal tool that is used to maintain source code but the most popular one is Git. And that is why there are more than one remote VCS servers built around Git specifically.

Hopefully now you understand why Version Control System is an extremely crucial part of modern software development and will be able to explain to others simply as well.