Web Dev 2026

Emmet for HTML

Yogesh Kumar — Sun, 01 Feb 2026 14:02:51 GMT

Typing HTML is hard. There is a starting tag, a closing tag, and there are attributes to play with. What if there is a way to type or write HTML faster? There comes EMMET integrated in most code editors by default, or you can integrate it with just the installation of an extension.

HTML helps type faster, visualise the structure, reduce errors and save time.

To use, you just type the first letter for the HTML elements, then hit tab to select and hit enter to print it out in the code editor.

div → 
p → 
h1 →

The most used emmet abbreviation is ! for creation of the boilerplate code of the HTML5 document, we hit tab to make the basic changes right after the bul>li*3 →

oilerplate code is generated, as we hit enter and the typing cursor moves ahead.

! → (press Tab)




    
    
    Document

ul>li*3 →

Classes, IDs and attributes

.container → 
#header → 
p.intro → 
button#submit →

Creating nested elements

nav>ul>li →

Repeating elements using multiplication

ul>li*3 →

This is emmet for you. See you on the internet!

CSS Selectors 101

Yogesh Kumar — Sun, 01 Feb 2026 13:49:19 GMT

CSS selectors are needed to callout the specific selectors while styling the webpage when we are not using inline style and styling with a style tag in the head or using an external page.

Element Selector: It selects the HTML elements by their name.

ID Selector: It selects the HTML elements by their id and it’s unique for an element in the whole webpage. The symbol used is #id-name followed by the id-name.

Class Selector: It selects the HTML elements by their class. Many HTML elements can belong to the same class. The symbol used here is .class-name

Group selectors: It selects the group of HTML elements together. The way to select them is by writing the HTML element names, separated by commas. h1, h2.

When there are so many selector how is the priority of the selector decided so that there is an order in which they dominate over other selectors? This is called specificity of style in CSS.

There is also a specific order of the css as well, depending on where you are targeting the HTML elements.

Let's understand the css selectors in detail:

the tree like structure of the HTML code when laid out on the web page

In the tree structure, there is a hierarchy that exists.

The top element is called the parent element
The direct descendants of that element are called the child elements
all the other second-level and other lower-level descendants are called relatives, as we can’t keep calling sub-child and sub—sub—sub—sub -child
The two elements at the same level are called the siblings

1. Universal Selector

      /* selects all the elements on the webpage */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

Type Selector
1. helps you select the specific type of element on the webpage
```
 p {
        font-size: 20px;
    }
```
Class Selectors
1. How to target the specific class of elements
  1. Just put a dot before its name in the css

      .highlight {
        background-color: #73dff3;
      }

Id Selector
1. According to the norm, you should have one unique id on one webpage

      #header {
        background-color: #333fff;
        color: white;
      }

To maintain the consistency of the colors we use hash codes for the colours so that different browsers don't render different colours for different colour names according to them.

Attribute Selector
1. to select the specific attribute of the element

the name of the element and the square bracket to select the name of the attribute and its type

      input[type="text"] {
        border: 1px solid #73dff3;
      }

Descendant Selector
1. to select the descendants of the elements

There is space between the read them from right to left

      article p {
        font-style: italic;
        background-color: #333fff;
        color: #fff;
        padding: 2px;
      }

Child Selector
1. The way to directly select the child of an element

the > greater than symbol is used

div > p{
        background-color: #b73a3a;
        }

This sometimes overwrites the css selection patterns into other elements, so it is better touse classes

Adjacent sibling selector
1. The sibling selector, which is the nearest to the element

it uses the + symbol

h1 + p {
        font-family: "Courier New", Courier, monospace;
      }

General Sibling Selector
1. How to select the siblings in general

it uses the ~ ****(tilde) symbol

h2 ~ p {
        background-color: blueviolet;
        color: white;
      }

Pseudo Class Selector
certain classes that exist based on certain events of certain elements

pseudo class is attached by a colon (:) to the element name

      a:hover {
        background-color: orange;
        text-decoration: none;
        padding: 2px;
        margin: 6px;
        color: white;
      }

Pseudo Element Selector
The element selected is selected based on its specified existence

double colons (::) are used

      p::first-letter{
        font-weight: bold;
        font-style: italic;
        font-size: x-large;
      }

Grouping Selector
The way to select elements in a group

elements are separated by commas

      h1, h2, h3 {
        color: green;
      }

Adios!

Understanding HTML Tags and Elements

Yogesh Kumar — Sun, 01 Feb 2026 13:30:05 GMT

HTML is Hyper Text Markup Language. Let’s break it down.

Hyper Text: the text is not normal; it makes something happen.
Markup: It has a certain way of writing it.

HTML tags are the way we write HTML forthe creation of web pages on the internet. The default page of any website is index.html standardised by the World Wide Web Consortium.

That’s how an HTML element usually looks. It is made up of the start tag, content and end tag.

However, there are exceptions to this normal HTML element format called Self-closing; those that don’t require a closing tag. like , and many more.

The elements take up the space of the web page, thus there is a differentation in them. Like,

Block-Level Elements: The elements that don’t take the full width of the webpage by default. eg: ,
, etc..

Inline elements: The elements that take the full width of the webpage by default. eg:

, etc..

There are many HTML tags, but the common ones are

Headings (h1-h6), paragraph (p), span (span),
Containers div, header, footer, main
Links a, Images img
Table table, th, thead, tbody, td
Forms form, input, label, button, select, textarea
Semantic nav, aside, figure

How a Browser Works

Yogesh Kumar — Sun, 01 Feb 2026 13:02:17 GMT

Everyone knows that we use a browser to open websites. But is that it? How is it capable enough to open a website in milliseconds within the blink of an eye?

I have deployed my website on vercel and it could be that their servers are located in another part of the world. How does the browser bring that data and just puff!! The website appears in front of me. The code is translated into a website so easily.

What is happening in the background? Let’s try to understand.

First, it brought the website.
Understood it.
Made it appear on the tab.
help us interact with it. (that’s a topic for another article)

Technically,

Let’s see what’s in front when talking about browsers.

When we type the url in the browser, the user interface takes care of that further handled by the browser engine and which initiates working at the networking level. Once the code is brought, the render engine handles everything for the HTML, CSS, and their display on the website, with the process of figuring out the layout and paint and if there is JS in the code, the JS engine takes care of that, and any storage is dealt within storage on the browser with the help of the disk api’s.

Terms that can be confusing here are

Browser Engine vs Render Engine

Browser Engine is the lead of the other engines and works with ui to help the browser function, such as managing tabs and all other tasks in the browser.
eg: Blink for Chrome and WebKit for Safari and Chrome on Apple Devices

Render Engine is the main worker here that understands the raw code and creates the displayable content from it for the screen pixel by pixel.
eg: Chromium for chrome and gecko for firefox.

The task of the render engine seems more complex than it looks. So how does he do that?

HTML Parser: The HTML parser(unconventional) turns the HTML syntax into the Document Object Model (DOM) tree.
CSS Parser: It creates the CSS object model for the whole HTML.

Once the parsing is done, the DOM and CSSOM are combined to create the Render Tree in the Content Sink for the visualisation on the screen.

How is the render understood by the browser? The engine creates the layout first of the screen, placing elements on the screen using a process called reflow.

And then the painting of the elements is done with colours and details, like adding makeup to the elements on the screen.

Everything is picturized on the screen layer by layer for the display.

That’s how the browser works from a higher level. Everything is an article in itself.

You truly understand a browser when you make one. ~Hitesh Sir

TCP Working: 3-Way Handshake & Reliable Communication

Yogesh Kumar — Sun, 01 Feb 2026 10:41:27 GMT

Even though there is a firewall at the router level, the network can be compromised at any level. So every layer of communication needs its own reliability and integrity, so that one does not infiltrate the other borderlines and get the data and execute any action they want to perform.

As mentioned in the TCP vs udp article https://blog.yogeshkumar.site/tcp-vs-udp, TCP is reliable, not only because of the retransmission in the transport, but also because there is reliability and integrity that is required when communicating with the server to which the data is requested.

But how does the secure connection happen? will be explored in this article.

As we already know, the internet is a network of networks, so to ensure the data is sent to be received by the correct server or client, it has to be ensured that once we find that this is the system we want to communicate with, and whether it is willing to communicate with the client.

Once I know (I mean, my browser knows) that my blog is hosted on Hashnode. network through DNS lookup, and the GET request to the server is sent, and before that, the connection between the os and server has to be available and secured to the browser (client).

This happens in a series of exchanges of messages called SYN→SYN-ACK→ACK exchange of data packets called the three-way handshake, for the availability of the connection, the integrity of the connection, and for the communication.

Initial Sequence Numbers (ISN) are used to track every byte of data sent over TCP. Similarly, the server sends the Acknowledgement Number in the packet as well.

Client sends a Synchronised (SYN) request, called a SYN packet, to the server to check the availability of the port for communication and access to the server.
The server sends back the acceptance message, called a SYN-ACK (Acknowledgement) packet, back to the client that yes i am available and willing to communicate, and your access has been justified.
The client then sends the acknowledgement ACK packet that I have received your SYN-ACK packet for confirmation.

This is the ideal case scenario where this happens when everything is fine; otherwise, it can be interrupted at any point and closed.

What is the packet that the client and server sends among each other? The sequence of randomly generated numbers is used to track the data sent and received in the connection for verification and reliability of the connection.

Sequence Numbers (Seq) are used to track every byte of data sent over TCP. Similarly, the server sends the Acknowledgement Number in the packet as well.

But how do these numbers make it reliable?

If the client sends the data and does not receive the acknowledgement, it resends the data, which means upon loss, the data is retransmitted.

If there is a loss of order during transmission, the server receives them in the wrong order and tries to re-order them using sequence numbers itself, and while it does that, it buffers.

When there is corruption of data in the middle and reciever recieves the corrupted data, there is a verification using the sequence numbers called checksum verification that triggers the retransmission.

Thus making it reliable.

If it is that reliable, it should be closed with grace as well; the connection remains open forever.

The application triggers the closure of the TCP socket connection by sending a FIN packet, and the server acknowledges that by sending the ACK packet. Then the server sends the FIN, ACK packet, and atlast the client sends the ACK packet for the acknowledgement of the closure.

I tried to simplify as much as possible, but I believe the closure needs an article of its own. I will link to the article I have researched and understood. See you on the internet!!!

TCP vs UDP

Yogesh Kumar — Sat, 31 Jan 2026 11:10:02 GMT

The Internet enables connections between all types of devices all over the world. Does this mean anyone can communicate with anyone on the network? No, right. We need access to that person, be it an email address or some Instagram ID. Similarly, the one device on the internet can’t communicate with anyother without an IP address, so how does this communicate happens is there any rules to it, because there are limitations we can certainly experience? You can access data on ISRO’s server that is not publicly available.

In the previous article, https://blog.yogeshkumar.site/understanding-network-devices, I talked about the firewall that is present at the router level that restricts unapproved communication to your devices unless you initiate it. But how does that communication happen within the hardware layer on the transportation level, which lies between the hardware devices? There must be some rules, fancy it “Protocols”.

Just like how I can’t access ISRO’s, NASA’s or even my bank servers without specific access and access after requests, and I can access data listed on www.google.com.

From where are these requests processed by the browser? Is there any protocol for the browser means application level as well? There are different tasks performed from the browser, so there must be different protocols as well, like web requests, there is http and for email communication, there is Simple Mail Transfer Protocol (SMTP) and others. Whatever happens in the browser is further carried down to the transport level.

┌─────────────────┐
│   APPLICATION   │ ← HTTP, HTTPS, SMTP (Your browser/email app)
│      LAYER      │
├─────────────────┤
│    TRANSPORT    │ ← TCP (Reliable Courier) or UDP (Live Broadcast)
│      LAYER      │
├─────────────────┤
│    INTERNET     │ ← IP Addresses (The " addresses")
│      LAYER      │
└─────────────────┘

There must be two ways of communicate is secure way and other maybe less secure way of communication on these networks. There are Transmission Control Protocol and User Datagram Protocol that reign in the world of transport protocols for communication, especially when we communicate with web servers from a browser. What’s the difference between them? Let’s see.

Transmission Control Protocol (TCP)

Let’s focus on the name, transmission control means the transport of the data packet is controlled, and it treats it as a mission once it is happening to make sure that it is complete.

If there is control, data packets here are ordered, tracked upon transmission for loss and retransmitted, which makes it slow. If there is control in the process, there is a queue for the tasks to happen or for the requests to be processed on the network using this protocol. Thus, makes it reliable. eg, Websites(http/https), file downloads

User Datagram Protocol (UDP)

So what is the direct opposite of TCP? Hmm. It is fast, but less reliable, so there must be no connection establishment for the data transfer, hence no ordering, retransmission, loss detection, or congestion control, making it less reliable than TCP for sensitive data. Hence used for video calls and streaming where speed matters.

Comparison makes a clear distinction for the use case in the daily requirements of communication on the transport level. Atlast, there is a difference between the application level protocols like HTTP or https and transport protocols like TCP and UDP.

What goes on between them? The http take the request in text/html format, along with the request type in the headers and other required details, such as who sent and from where the request came from, to the networking part of the browser and the request is handed over to os for the TCP connection through a specific port 80 for HTTP and 443 for https and thus the data packets are sent to the server.

TCP and HTTP are different portocols operating on different layers of communication.

What happens next is the story for another article? see ya on the internet…

Understanding Network Devices

Yogesh Kumar — Sat, 31 Jan 2026 07:47:24 GMT

The internet is a network of all networks, like a meganetwork. But how do I connect to it? If the internet is just cables, how do I get access to it?

One day, when I felt the mobile internet wasn’t enough, I called an Internet Service Provider (ISP), mine is Airtel. They patched an optical fibre cable from the nearest pole of the electric wires and internet wires to my home and put a router, as we call it, which supports both ethernet wire and the wireless mode on both 2.4GHz & 5GHz. And I connect to it with WiFi on my mobile device and laptop. Wi-Fi and Internet are not the same; a point to be noted.

Actually, what we call it is a router. It is something else. The device is actually a combination of other network devices packaged into one box, designed to work seamlessly without the need for a complex network of devices in the house to establish an internet connection from the city’s network. So what is it then?

The device that contains:

Optical Network Terminal (ONT): mail collector
Router: mail director at the post office
Switch: in-person delivery person; postman
Wireless Access Point (WAP): the sms system that updates you about the post status

I want this article to be the introduction to the hardware world of the internet, reaching our home or office from the city’s network, Metropolitan Area Network (MAN), from the Internet of the world, Wide Area Network (WAN), with which we create our own Local Area Network (LAN).

Optical Network Terminal (ONT)

It receives light signals and turns those signals into digital data and vice versa. That’s it. It can be seen when the technichian it establishing the connection. The device that hosts the thin wire is the ONT.

Router

It acts as a traffic controller. It directs the correct route to digital data in the LAN to the devices in the LAN and sends requests to the internet from the LAN. It works with IP Addresses.

Switch

The panel of ports for wired connection in the special box is called a switch, as it directs data as requested. It works with MAC addresses of the devices.

Wireless Access Point (WAP)

The device that creates a Wi-Fi network to connect wirelessly to the device and to the internet. The two tower-like structures are part of it and easily observable. It uses Wi-Fi communication protocols to communicate.

It’s an overview of the small network. But it is scaled horizontally with the replication of the same network to different houses and offices to create a network for the cities and vertically to create a part of the internet in the state and country.

How is the data protected in such a network? Using a firewall. The firewall, as of today, is attached with router. The basic job is to protect someone else and establish a connection in your network.

There were devices that were used before these in the past, like a hub at the place of the switch and a modem at the place of the router.

HUB vs Switch

The hub used to send data packets to all the connected devices, so it was slow and less private.
Switch is smart, only sends data packets to the requested device, hence fast and private.

Router vs Modem

A modem just connects your home's special device to the Internet Service Provider (ISP)
The router connects to the ISP as well as to the other devices in the house.

But when there are so many devices in the network, how do the big data centres process data requests and send back the data so fast without choking or congestion in the network?

Using load balancers. The data centres or the server centres have middle man, like the man who distributes the posts to different postmen for easier, faster distribution of the posts, so the load balancers distribute the traffic on the network to the servers.

That’s a glimpse into the world of the internet connection in a layer of the hardware, with the communication methods they use and how they use them. Now I can tell how the website loads up on the browser when I am connected to the internet and what goes into the hardware. Ciao!

Getting started with cURL

Yogesh Kumar — Wed, 28 Jan 2026 18:36:26 GMT

I was introduced to cURL when a senior at the office used it to fetch some data from a url. I noticed it was used with an url and the keyword used was curl itself in the terminal.

A server is a computer that shares information with other computers on the network. curl can be used to transfer data to and from the server, like a messenger, and it is multi-platform and supports most of the protocols, but for the sake of the article, it supports HTTP and HTTPS.

I saw the curl request when the senior executed it was fast, precise and ran inside the terminal share the response within the terminal. It was faster than going to api-docs, finding the api and then running it.

My first curl request to curl https://wttr.in/gurgaon

The basic flow of the curl request from the terminal and the response from the server after processing the request appropriately within the terminal itself.

I can see the response within the terminal without opening any webpage or anything extra, right in front of the terminal, and everything makes sense. What else do I need from a server response? Everything is contained within a single terminal tab. No doubt programmers love it, it is fast, right there without any navigation and simple and easy to read.

It’s just like git once you are used you can’t live without it. It’s a tool for the programmers’ arsenal.

DNS Records

Yogesh Kumar — Tue, 27 Jan 2026 19:42:46 GMT

When you type yogeshkumar.site in your browser, how does it know exactly where my website’s servers are located?

The protocol that maps a domain name of the website to its IP Address is called DNS. For more on this, read my previous blog on DNS resolution.

In short, Browser → Recursive DNS Resolver → Root Server → TLD Server → Authoritative Server. Simply DNS works like asking for directions in a big Mall, like Ambience Mall.

There can be many phone numbers for an address for different people living at the same address, or different phone numbers for the given address as well, so are the DNS Records for different lines of communication to a singular server on the internet, maybe a business number, a personal number, or you can assume different phone numbers for the different phones.

Different records are used for different purposes; that’s how a delegation for the domain.

NS Record is the pointer in the DNS that tells where to go next to find the IP address of a particular domain name, while there is a resolution for the DNS query from the recursive DNS resolver. It’s like asking the security in the mall for the floor of the PVR.

A record stands for the address of the particular domain name means the IP address. It’s like your house number in the whole street and the whole colony for the postman and the address of India.

As different maps on mobile devices use different methods of mapping a location, there are two types of IP addresses as well: A record for IPv4 addresses and AAAA records for IPv6 addresses for the particular domain name in the DNS. AAAA are like a map at the mall, which shows the shop number and floor for the Halidrams in the mall.

CNAME record stands for the canonical name of the A record, which means an alias. It’s like you have a professional name and a nickname for the home and relatives. And every CNAME points to a domain name.

MX record is a Mail Exchange record and is required to set up to direct your mail to your mail server. Consider your house as your mail server and your address and mx record for it for you to receive mail or post from the post office. You tell the post office where you can be found, and mail can be stored at this location. It is used for mailing purposes only.

TXT record stand DNS text record, and it shares a string of text within ““ quotes from the domain administrator. It is like sticky notes on the domain name servers. Today, these are used for the verification of the email spam protection.

If there are so many records and few of them are listed above, how do they work together for a domain name? A record for the IP address of the authoritative name server, NS for the directions to the name server, and MX routes the emails to the mail server of the domain. CName acts as a nickname whenever there is a change in the A/AAAA records and TXT for verification.

In simple terms, if a domain name is your home, then an A record is the address, AAAA is the highly specified addresses with coordinate details, like a name plate, CName is the nickname to your house, like Kumar’s House, and NS is the pointer to the house address, like a corner shopkeeper telling the direction to home. MX is the courier service, and TXT record is the security guard.

Don’t confuse A and CName; one is the actual name, and the other is the nickname. SImilarly for the NS and MX, as the former is for the directions to find the home, and the latter is the actual address for the mail.

A vs CNAME: One is a direct address, one is a nickname
NS vs MX: One manages DNS info, one manages email

DNS visualised for yogeshkumar.site, 
yogeshkumar.site (Your Digital Home)
├── 🏠 MAIN ENTRANCE (A/AAAA Records)
│   ├── Street Address: 104.21.36.32 & 172.67.184.86
│   └── GPS Coordinates: 2606:4700:3032::6815:2420 & 2606:4700:3035::ac43:b856
│
├── 📚 SPECIAL SECTION (CNAME Record)
│   └── blog.yogeshkumar.site → "Go to the Hashnode Library"
│
├── 📬 MAIL DELIVERY (MX Records)
│   ├── Primary Post Office: Zoho (priority 10)
│   ├── Backup Post Office: Registrar servers (priority 10-20)
│   └── Emergency Post Office: Additional Zoho (priority 50)
│
├── 🔒 SECURITY NOTES (TXT Records)
│   ├── "Only accept mail from Zoho servers"
│   └── "Only accept mail from Registrar servers"
│
└── 📋 DIRECTORY MANAGER (NS Records)
    ├── Primary Manager: delilah.ns.cloudflare.com
    └── Backup Manager: scott.ns.cloudflare.com

Hence, the setup for the digital home. Mine is at yogeshkumar.site

DNS Resolution

Yogesh Kumar — Mon, 26 Jan 2026 19:00:30 GMT

Let’s understand DNS first.
DNS stands for the Domain Name System. It is a protocol to resolve the DNS queries.

DNS exists in the first place because of two reasons:

Humans understand text better than just numbers, like blog.yogeshkumar. site and
Computers are good at numbers. 76.76.21.21 is an IP Address for www.yogeshkumar.site
The IP Addresses can change for any reason, like Vercel decides to move the site from one server to another.

As you can see, DNS is basically a phone book for the IP addresses with their names attached to it, which helps both computers and humans to co-exist on the internet and talk to each other with the help of the URL.

dig is the command to get a peek inside the DNS for a domain name. It is used to query the DNS for a domain name. dig stand Domain Information Groper. It can help see the DNS resolution at various stages.

dig gives a brief overview of the DNS, what is happening under the hood when it blog.yogeshkumar.site is typed in the browser and the hashnode blog page loads. But how we reach here.

Actually, much more complex than this and let’s uncover the process of the DNS Resolution because it is not as easy as it appears that when something is entered in the browser and puff, the webpage opens up. Let me try to simplify it for you.

In short, when I am typing blog.yogeshkumar.site for the first time in my browser, there is a DNS query that happens, which is usually resolved by the ISP with a recursive DNS resolver and before our local caches of the browser, os, and router are contacted, so that it can be resolved asap.

Let’s assume I'm going to blog.yogeshkumar.site (here I will refer to it as my blog) for the first time. The recursive DNS resolver doesn’t have the IP address of the blog, so it first contacts the root servers to find the location of the .site Top Level Domain(TLD).

These are all the root servers, listed

The servers that hold .site domains are listed below.

Once the DNS query is resolved for the top-level domain, the TLD servers are queried by the Recursive DNS Resolver for the location (A Record / IP Address are interchangeable here) of the yogeshkumar. site with the TLD servers, and once they indicate which IP address redirects it to the Domain Name Servers, which actually hold the accurate IP address of where the domain is located (in this case, Cloudflare DNS and Namecheap is my registrar here).

Once the A record for yogeshkumar.site is found by the Recursive DNS Resolver, NameCheap servers are queried for blog.yogeshkumar.site, which is a CNAME (Canonical Name/Alias) for the hasnode.network (Authoritative Name Server) here and then the query is resolved, and the data is sent to recusive DNS resolver at the ISP, and the browser is served the webpage of the IP address at which it is pointed.

Before moving on to summarise the process, I said “redirected” multiple times that I was referring to how that redirection happens in the DNS Domain Name System through NS records, which are basically pointers in the DNS.

In short,

That’s how our DNS query is resolved, and we visit any domain name we are trying to access, like www.google.com and blog.yogeshkumar.site, and all other websites.

I am posing an analogy here. It’s like someone sent you a post from Ahmedabad to Gurugram, once the post has been posted to the Post Office. First, they verify it for the indian address only, which means the root servers have been co/ntacted, and once they find it is for India address. Then the post officers or the post computer system finds which part of the country it is headed for, which means the TLD servers have been contacted, and then the state in the region of India, which is Haryana and then postal officers and their netowrk figure out the city like the authoritative name servers is being found out which is Gurugram here and later the block of the city and lane and further on.

That’s the browser that loads our website we see daily, and all of this happens within minutes, and we couldn’t even blink, the site is here in front of us. Onward and forward.

Why does Version Control exist?

Yogesh Kumar — Fri, 23 Jan 2026 21:00:22 GMT

I can’t imagine software development without git just like the LLMs have become such an integral part of the internet. Going back feels slow and chaotic. So was the world without version control systems.

I learned programming after the creation of the git, so I am not the one who has experienced the problems firsthand, like receiving the code through an email or leaving the pendrive sharing, but just like searching the google without AI mode is like coding without git or even using a phone without an AI assistant.

Let’s imagine the world without git. I got an idea to make a web app that just shows me the date and time in real time. I made a project folder name it live-date-and-time , and started working on it. I made an index.html file. Remember, I won’t be able to run git init it in this world as git doesn’t exist in this world.

I scaffold a html with emmet and named the title to Live Date and Time, changed the favicon, visualised the page on the browser and realised I might need the help of a designer friend who is good with CSS, so I copied the project folder into the pendrive and shared it with her.

Later, I shared the code with her, and I can’t see the changes done her live as she will give me the designed code next weekend. I saved my project as live-date-and-time-1.0 . There has been no collaboration and tracking of the changes I have made ever since I started the project.

For her to work on the project, she needs to make a copy of the project on her computer to avoid working on the code I wrote. There is no conflict resolution, and let alone the tracking, as there is no modification tracker. The best thing we could do is add comments, and the code will be filled with comments. I get the code next weekend. If I want some modifications in the design, I will have to wait for some days to get the changes. All that time, either I am not working on the project or spinning copies of the project to work. If even I got the project, I can’t just join the new copy of the project with the old version of mine or undo some changes she did without disturbing her changes, and this point at any moment I can overwrite her code with mine, or she might have overwritten my code with hers.

During this time, I realised while working on spinned copy of my project that I can make my web application more effecient for the getting the time with a feature that mighting an expertise of a friend who is good at JS. I can’t just share the other copy with him, since there is no collaboration between me and my designer friend and me, I can't expect a collaboration with my Interactive friend and me. I will be handing out copied with out having a single source of truth that can verify that it has changed, and this person did it while keeping it all in sync with 3 people at the same time and everyone working with an updated code once other completes their changes. I assume these problems would scale to times when the team size is increased incrementally.

Now, consider that there is something like git exists, and thisis a college project we are working on in a team. We have been assigned this as an assignment. We have allocated a server on the campus with which we can connect and establish a single source of truth for the code, and that has a tracker and a photographic memory inside, which can be shared when we can make a copy of the project on our local system. And we have a main branch for the updates from the server and create branches for working simultaneously on different features with the individual tracking of the changes in the code and then one of us has done their work it can be pulled from the server other’s can update the code from the server with seeing their changes marked with name and reversible to any point on any one’s system and overwriting can be managed and handled carefully.

I can’t imagine software development without Git, just like LLMs have become such an integral part of the internet. Going back feels slow and chaotic, as was the world without version control systems.

I learned programming after the creation of Git, so I have not experienced the problems firsthand, like receiving code through email or using a pendrive for sharing. Just like searching Google without AI mode is like coding without Git or using a phone without an AI assistant.

Let’s imagine a world without Git. I got an idea to make a web app that just shows me the date and time in real-time. I made a project folder and named itlive-date-and-time, and started working on it. I created an index.html file. Remember, I won’t be able to run git init in this world as Git doesn’t exist here.

I scaffolded an HTML with Emmet, named the title "Live Date and Time," changed the favicon, visualised the page on the browser, and realised I might need the help of a designer friend who is good with CSS. So, I copied the project folder onto a pendrive and shared it with her.

Later, I shared the code with her, and I can’t see the changes she made live, as she will give me the designed code next weekend. I saved my project as live-date-and-time-1.0. There is no collaboration and tracking of the changes I made since I started the project.

For her to work on the project, she needs to make a copy of the project on her computer to avoid working on the code I wrote. There is no conflict resolution, let alone tracking, as there is no modification tracker. The best thing we could do is add comments, and the code will be filled with comments. Even when I get the code next weekend, if I want some modifications in the design, I will have to wait for some days to get the changes. All that time, either I am not working on the project or spinning copies of the project to work. Even if I got the project, I can’t just join the new copy of the project with the old version of mine or undo some changes she made without disturbing her changes. At this point, I can overwrite her code with mine, or she might have overwritten my code with hers.

During this time, I realised while working on a spun copy of my project that I can make my web application more efficient by using a feature that might require the expertise of my friend, who is good at JS. I can’t just share the other copy with him. While there is no collaboration between me and my designer friend and me, I can't expect collaboration with my interactive friend. I will be handing out copies without having a single source of truth that can verify what change was made and who did it, while keeping it all in sync with three people at the same time and everyone working with updated code once others complete their changes. I assume these problems would scale when the team size is increased incrementally.

Now, consider that there is something like Git, and this is a college project we are working on as a team. We started this project on the college computer (git init). We have allocated a server on the campus with which we can connect and establish a single source of truth for the code that has a tracker and a photographic memory (snapshot) inside. This can be shared when we make a copy of the project (git clone) on our local system. We have a main branch for the updates (git pull) from the server and create branches (git branch) for working simultaneously on different features with individual tracking of the changes in the code. Then, when one of us has done their work, it can be pushed to the server (git push) and then pulled from the server. Others can update the code from the server, seeing their changes marked with names and reversible to any point on anyone’s system, and overwriting can be managed and handled carefully.

In the above scenario, we saw a system that is distributed, gives individuals a control centre and snapshot mechanism, allows moving back in history, and working on features simultaneously, while switching contexts with branches. Not only one person but many such individuals can work similarly in this simulation with a single source of truth. The copy of that source is on their system, and they can pull and update easily once they learn the basics with some learning curve. It solves for scale as well, without altering the functioning, whether it is one or one thousand, along with a platform for management visually as well.

Here is an image that sums it all

Necessity is the mother of invention, so was Git for the software world when one day the Linux kernel developer community couldn’t access their VCS called BitKeeper. It was to solve a problem of their own, and they later solved it for everyone in the world.

Inside Git and .git Folder

Yogesh Kumar — Fri, 23 Jan 2026 20:58:27 GMT

Git acts as your second brain for source code, so you don’t have to remember everything, from major changes to minute details. It remembers everything just like court case files. It documents everything into the .git folder, which is kept within the project.

Before understanding the .git folder, let’s take a look at how the .git folder comes into the picture. When you start a project, it is a file or a directory, and once inside that directory, you run git init It turns that normal directory into a git repository on the local. And that’s how the .git folder is introduced.

If the .git folder is explored now, most of the folders and files would be empty with little to no information at all, but these are essentials that are needed to work, and it means git has set up its base in the directory. Working directory is untracked. U can be observed alongside the files.

Before moving forward, once you have made changes in the source code here on now. All those files and folders will be untracked until staged for the commit (terms I explained in the previous blog).

Consider you are in a photoshoot location now, it is like running git init. Once you have written the required code, similar to adjusting to the best location, angles, and poses, just like running git add .

Now, when you have all the perfect details for the picture, it is like making a commit by running a command called git commit -m “message for the commit” . The commit is like a snapshot of the working directory at that point in time, with all the modifications in the working directory.

The git management is structured in such a way that in one place, only the actual code is stored, called blobs; in the other place, the details about that code are stored, like the “hello world” is written in the index.html file, which is called the tree. There is a place that stores the reference to all of this information called a commit. Imagine the picture you clicked, all the pixels captured by the camera are the blob, the details of those pixels where they are stored are trees, and all of it makes the picture, which is a commit.

If the git takes the whole snapshot of the code, then it must be taking so much storage means if x if the storage for one commit is x, then for the second commit it will be 2x. RIght?

But that’s not how it works. Even though every commit is a snapshot, it is not stored twice, it’s references wrt to the changes are stored at the given commit, and it tracks the changes on the fly. It’s like reconstruction of the image from the pixels on the fly, which was captured some time ago or even yesterday or even years ago.

Let’s understand how git uses hashes. It’s like a sticker on the code and these is only generated when add and commit in the working directory. To simplify, it is only generate when you tell the model in the photoshoot to hold the pose or to change the pose and when you click a picture.

Everything in depends on the HEAD and is updated from the the refs/heads/ folder and it contains the heads means it contains the name of the head on whenever we took a snapshot of the code. When you read the reference file, it contains the id which is head commit id.

You can read about the commit details with that id to do that git cat-file -p what it contains.

The tree id is made up of the tree folder name first letters and commit id. Where this is tree can be found? It is in the objects/ folder and first letters makes the folder’s name and when you cat (means read) the file (which is basically an id) the output it prints is a blob object which is our compressed code within those gibberish text.

How blobs are managed is world in itself and a story for another day. Till then the git is all yours to use.

And here is how our second brain works within itself to help the programmers of the world to remember what, when and how they did what they did.

git for Beginners

Yogesh Kumar — Sun, 11 Jan 2026 09:48:10 GMT

Let me introduce you to Git. First of all, it's important to know that Git and GitHub are not the same.

Git is a free, open-source, distributed version control system, while GitHub is a cloud platform that hosts Git files and source code remotely. You can learn to use Git and choose any cloud platform like Bit Bucket, Azure Repos, AWS Code Commit, and many more to host your Git files and source code. These platforms act as servers for the distributed version control system (VCS). You can also set up a server locally on your network or within your system using other platforms like Git Lab or Gitea.

What is Git?

Git is an open-source distributed version control system.

Open-source: Available to everyone without any fees or subscriptions.
Distributed: Everyone can have a copy of the source code and Git tracking history offline, without needing a server connection while working.
Version control system: Tracks the history of code changes by maintaining versions of it.

Why Use Git?

Git is used to track changes in code, enabling collaboration among team members without overwriting each other’s work. It helps maintain a single source of truth while working in teams using a server. Its popularity is due to huge community support, offline capabilities, and flexibility once mastered. It's also great for solo projects.

Git Basics and Core Terminologies

.git: A folder created by Git after initialization to track changes. Everything in this folder works towards tracking those changes.
Repository (repo): A directory containing source code files, along with the hidden .git folder.
Local: The repo located on your personal system.
Remote: The repo located on a server.
Unstaged: Files added to a Git project after initialization are in the unstaged area.
Staging Area: When files are added to be tracked by Git, they are in the staging area.
Branch: Creating copies of the source code with the current Git history in isolation to work on. Branches are stored as references in the .git/refs/heads/ folder.
Commit: Taking a snapshot of the current repo and saving it for history. Commits are stored as compressed objects in the .git/objects folder.
HEAD: A special pointer indicating the current location of the commit. It is stored in the .git/HEAD file.

Common Git Commands

git init: Initializes a Git repository in the current directory with a hidden .git folder.
git add : Stages changes (additions, modifications, deletions) in the specified file.
- git add .: Stages all changes in the working directory and sub-directories.
git commit -m "commit message": Takes a snapshot of the changes in the staging area with a commit ID and message, saving them into the repository.
- git commit -am "commit message": Takes a snapshot of all modified or deleted files and folders in the staging area, saving them into the repository, leaving untracked files.
git push : Uploads commits from the local repository to the specified remote repository.
git log: Shows the commit history of the repository with commit messages, names, dates, and times.
- git log --oneline: Shows the commit history in one line each, with commit messages and shortened commit IDs.
git status: Shows the current state of the working directory and staging area.
git diff : Shows the difference between the old state and the current states of the file.
- git diff : Shows the difference between the current and previous states of two branches.
- git diff : Shows the difference between the current and previous states of two commits.
git revert : Reverts the changes in the specified commit and creates a new commit with it.
git reset --hard : Resets the changes in the specified commit ID and removes the commit from the Git history.
git branch: Shows which branch you are currently working on.

Basic Developer Workflow Using Git

This guide should help you get started with Git and understand its basic concepts and commands.