CSS selectors

Element selector

The element selector uses HTML tags to target all the defined tag elements of HTML. Like we can select all paragraph elements with p and style them.

Class selector

Class selector selects HTML elements by their defined class. Like if there are different elements (h2, p, a) in HTML having the same class (color-red). We can target them all at once with class selector. The syntax of class selector is .class-name.

ID selector

Similarly, ID selector selects HTML elements based on their ID. ID is always unique, meaning one HTML document can have only one ID given to one element; same ID can’t be given to more than one element. The syntax of ID selector is #id-name.

Group selectors

If we need to give some styling to the same different elements, we can use group selector; it selects various groups of elements at once. Like if we need to select h2, p, .container, #card, we use comma to separate these, and it’s called group selector.

Descendant selector

Descendant selector helps to select elements in a specific location. Like if we need to select the p elements that are inside a div, that can be done using this selector. The syntax of this is simple, element-name descendant-name. First we write the element name inside which we want to select descendants, a space, and then the descendant name.

Selector priority

What if we select same element by using different selectors like the element selector, class selector, and ID selector? Which styling will apply. So I’ll explain this at a very high level.

Element selectors have the lowest priority, class selectors have medium priority, and ID selectors have high priority. That means if we select the same element by using these three selectors, always the styling of ID selector will apply.

This is a high-level overview; if you want to dig deeper into this, you can learn about CSS cascading and specificity algorithms.

Conclusion

Selectors are the foundation of CSS; with selectors, we are able to target different elements or groups of elements to style them. There are various selectors like element selector, class selector, ID selector, group selector, descendant selector, and more. Different selectors have different priorities; most priority selector styling applies in case of multiple selectors targeting the same element.

This is just a basic overview of CSS selectors and their priorities. I encourage you to practice it on your own; once you understand this well, you can then learn more things about CSS.

Emmet is useful for HTML beginners because with this, most mistakes that are usually done by beginners, like forgetting to close the tags, are avoided, but with Emmet abbreviations, tags are auto-closed.

Installation

Emmet is almost pre-installed with most of the popular code editors that we use. Like in this article, we will use VS Code, and Emmet is pre-installed in VS Code. I assume you will also be using VS Code, and you don’t need to explicitly install Emmet.

Emmet abbreviations

Starting with the basic, when we create a new HTML file, first we have to write the boilerplate code of HTML, which takes time to write manually. Emmet provides us with ! abbreviation with which HTML boilerplate code is written.

Create a new HTML file. Write ! and hit tab or enter.

Is it not easy? This is just the beginning of learning, Emmet. We’ll learn about many abbreviations, which will increase our speed in writing HTML a lot.

Creating HTML elements using Emmet

So if we have to create elements in HTML, we first write <, then the tag name, then >, then the content, and then the closing tag </tagname>, which is very slow process and often involves mistakes like forgetting to close the tag.

Using Emmet, type only the tag name like h1 or p and hit tab or enter.

Adding classes, IDs, and attributes

For adding classes, we use the tag name + . + class name, like h2.heading, then hit tab or enter.

Similarly, for adding an ID, we use # instead of . like p#paragraph.

And for adding any other attribute to any tag, like width to the img tag, we use tag name + [attr=value], like img[width=200], then hit tab or enter.

Creating nested elements

Nested elements means elements inside another element, like:

<div>
  <h1>Heading 1</h1>
  <p>This is a paragraph.</p>
</div>

So, here it is h1 and p nested inside div. To insert this using the Emmet abbreviation, we need to first understand two symbols of Emmet: one is > and another is +. > means child (inside) and + means sibling (beside). So in plain English, here we need a div, and inside it two children h1 and p, and h1 and p are siblings. To insert this using Emmet:

div>h1+p

Repeating elements using multiplication

Now what if we need to add 20 div elements, adding these manually one by one will take a lot of time. So, to add these using Emmet, type tag name * number, like:

div*20

Conclusion

Emmet is optional but powerful and makes writing HTML very easy. I showed you some of the daily-used Emmet abbreviations; now try all these Emmet abbreviations on your own and explore more abbreviations to make your daily HTML writing easy. I hope you enjoyed this article and learnt something new with this.

What are HTML tags?

HTML tags are the building blocks of this language. It defines how content should be displayed and where. Every tag is written in this format, <tagname> and each tag has its closing tag also </tagname>. In the middle of opening and closing tags, content is placed there. Together these 3 things - opening tag, content, and closing tag, form an HTML element. We’ll see what HTML elements are in a bit. Think of HTML tags like boxes, opening and closing tags define the box boundaries, and every box is closed.

There are various tags in HTML; we’ll see some of them.

<h1>

There is <h1>Content</h1> tag in HTML that defines the large heading; similarly, there are <h2></h2>, <h3></h3> … upto <h6></h6> tags that define smaller headings.

<p>

A p tag defines a paragraph, like <p>This is a paragraph</p>.

<div>

A div tag is like a box which holds similar items; it groups some elements inside it, like

<div>
  <h2>Heading</h2>
  <p>This is a paragraph.</p>
</div>

Here <div> tag wraps <h2> and <p> tags inside it to make them one group.

<span>

A span tag is an inline element that groups a small part of content inside a block-level element. Don’t panic; I’ll explain inline and block-level elements in a while. Think of it like a highlighted line in a textbook.

Note: Every tag does not have a closing tag; there are some tags, which are called empty elements or void elements, that do not have closing tags like <br>, it does the function of breaking content to the next line. There is no content inside it, hence no closing tag.

What are HTML elements?

HTML elements are composed of three parts: opening tag, content, and closing tag. Together they form an HTML element. These elements tell the browser how content is structured, like where a heading is starting and where it is closing, what is after what, and more.

Inline vs block-level elements

This is so simple: block-level elements are those that take the full width of the screen, and the next element comes on the next line. Like <h1>, <p>, and more.

Inline elements take only the width necessary for their content, and the next element comes after where the first element ends, not on the next line. Like <span>, <a>, and more.\

Conclusion

HTML is a standard markup language used for creating the structure of the web pages. Tags are building blocks of HTML; many tags have their closing tags as well, but some of the tags are empty elements, which do not contain any content and do not have closing tags. When a tag is written, inside it is content, and it has a closing tag; together these three things form an HTML element.

There are two types of HTML elements: inline and block-level elements. Inline elements tags only the width that is needed for their content, while block elements take the full screen width.

I’ll suggest you use browser inspect to view the HTML code of your favorite website. To open it, right-click on a webpage and select “inspect” from the menu; a window will open. From the elements tab you can see all the HTML code used in this website.

What is a browser?

Before understanding how a browser works, we’ll understand what a browser actually is. A browser is software, or in simple terms, we can say it’s a collection of various components working together to locate, retrieve, and display content from the World Wide Web (WWW).

Main part of a browser

1. User Interface (UI): Everything we see and click on a browser, like address bar, bookmarks, navigation buttons, refresh, etc.

2. Browser Engine: The browser engine is like a manager who acts as a bridge between the UI and other components.

3. Rendering Engine: This is the core part that parses HTML, CSS, and media files and builds a visual page on screen.

4. Networking: It manages all network communication, like requesting HTML, CSS, JS, and media files or scripts or sending data over a network.

5. JavaScript Interpreter: It executes JavaScript code, which makes a website interactive and dynamic.

6. UI Backend: It works alongside the networking layer, the JavaScript engine, and the rendering engine. It powers the logic of the UI frontend, like clicking of buttons, etc., and more.

7. Data Persistence: Stores things locally like cache, cookies, or key-value pairs, which helps in many things like user preferences, session persistence across sessions, etc.

How does browser work?

Now we have an understanding of what a browser is and the main components of a browser. We’ll see the main thing, which is how a browser works behind the scenes.

When you add a URL in the address bar, for instance, https://example.com and hit enter. The browser doesn’t know what this text is, so it requests a DNS query resolver with this URL to get the IP of this URL. If you want to know how DNS resolution works basically how this whole process works from URL to IP address, you can read this article here. After getting the IP address, TCP establishes a 3-way handshake connection with the server. When a connection is established successfully, both client and server are ready to send and receive data. The server sends necessary HTML and CSS files, which are received by the network layer of the browser, which then forwards them to the rendering engine.

Rendering engine have parsers for both HTML and CSS. An HTML parser parses HTML line by line and parses every HTML element into an object in a DOM tree. The DOM tree is like a family tree that has parent, child, sibling, and more.

What is a parser? So I used parser work frequently; you may be confused about what a parser is. Think of parsing like breaking sentences into meaning. It breaks the HTML and CSS files into small pieces and converts them into a tree, which a browser can understand.

Similarly, CSS gets parsed, and the browser understands its selectors, which selector is for which node of the DOM, and converts it into a CSSOM. If DOM is what exists, CSSOM is how it should look.

After the formation of DOM and CSSOM, DOM says there is a button inside a div, CSSOM says the button color is blue and it has padding. Together they form a render tree.

Now DOM and CSSOM are ready, but the browser doesn’t know where to place what. So for this, layout or reflow comes into action. Reflow calculates the positions of the elements, where to place what, and the paint process applies the styles to the elements, and finally the web page is displayed. So this is reflow → paint → display.

This whole process, from entering a URL to rendering a webpage, happens in milliseconds. This is the engineering of browsers.

Conclusion

A browser is software that locates, retrieves, and displays content from the WWW. There are many components in a browser that work together to do this whole process. Different components do different tasks and work together to make it possible to show a webpage on our display. I hope you enjoyed reading this article. If there is any mistake or missing information, I’m sorry for that I’m a fellow learner like you.

TCP vs UDP

TCP (Transmission Control Protocol) is a transport protocol that transfers data from one computer to another reliably, ordered, and error-free. It ensures safety and reliability. Think of it like a courier, which takes the package, ensures everything is OK, and delivers it safely and reliably.

UDP (User Datagram Protocol) is also a transport protocol that does the same work of transferring the data from one computer to another, but the working of both protocols is different. UDP is fast but not reliable; it’s risky because it does not ensure that all data will be delivered, it does not retransmit the lost data, and it throws data and does not care whether the receiver will receive it or not. Think of it like an announcement; an announcement is made, and they don’t care whether anyone listens or not; they make it.

So the use cases of TCP and UDP are different TCP is used when accuracy matters more than speed, like loading a website, logging into a system, banking, etc. Think if a single chunk of data will be lost while making an online payment and you’ll transfer $1000 and the receiver will receive only $1. On the other side UDP is used when speed matters more than accuracy and precision, like in video calling, live streaming, etc.

How does TCP relate to HTTP?

HTTP works on top of TCP, TCP works in the transport layer, and HTTP works in the application layer. Both of the protocols work together to ensure effective communication with the server. HTTP defines what data is to be sent or fetched, and TCP sends the data or fetches it. Many think that these protocols are the same, but no, they are totally different and work together. And some may be thinking that if HTTP is used, then why use TCP? I already mentioned it. HTTP can’t work without TCP.

Conclusion

Both TCP and UDP are transport protocols that are used to transfer the data on a network. TCP ensures reliability, ordering of data packets, error-free delivery, etc., while UDP is fast but unreliable and risky; it doesn’t ensure the delivery of data packets.

HTTP works on top of TCP, and both of the protocols work together to ensure effective and reliable web communication.

Why use TCP?

The question is “Why will we not communicate without TCP?” There are a lot of problems without TCP.

• There is no agreement on how communication should start.

• There is no guarantee that data will arrive.

• There is no ordering of data received.

• No mechanism to detect missing data.

• No confirmation if data is received or not.

• There is no agreement on closing the connection.

To solve these problems, TCP was built; it solves all these problems, which we will understand in detail in this article.

What is the TCP 3-Way Handshake?

Before sending the actual data, TCP establishes a connection and ensures that the receiver is available by a method called the 3-way handshake. Think of you need to start a conversation with a friend; you tell your friend, “Hey, are you there?” Your friend replies, “Yes, I’m here. Are you there?” You say, “Yes, I’m also here. Let’s talk.”

TCP does similarly before sending the data. These steps are SYN, SYN-ACK, and ACK. Let’s understand the step-by-step working of SYN, SYN-ACK, and ACK.

Step 1: SYN (Synchronise)

• The sender sends a SYN packet to the receiver.

• It means, “I want to connect."

Step 2: SYN-ACK (Synchronise-Acknowledge)

• The receiver replies with SYN-ACK.

• “I received your request.” (ACK).

• “I’m ready too” (SYN).

Step 3: ACK

• The sender sends an ACK.

• It means “I received your response.”

With these steps the sender and receiver establish a successful connection, and both are ready to send and receive data.

How does data transfer work in TCP?

Segmenting

• TCP breaks the data into smaller segments; each segment contains some data and headers.

• Headers contain information like sequence number, port, and flag.

• TCP does not care about routing and addressing; it’s handled by IP.

Routing via IP

• After segments are created, these are handled to IP.

• The IP address sends the segments through the network to the receiver, possibly through different paths.

Reassembly at Receiver

• Segments may arrive out of order because they can take different paths through the network.

• Segments are reassembled through their sequence numbers.

Acknowledgement (ACK)

• The receiver sends ACK to the sender on each segment or group of segments it receives.

• The sender waits for ACK; if it is not received for any segment, it retransmits that particular segment.

Retransmission

• If the sender doesn’t receive ACK in a specific time, it assumes the segment is lost and retransmits it.

• It ensures that every segment is received by the receiver, which makes TCP reliable.

How a TCP connection is closed

Closing a TCP connection is similar to opening a connection, but this time it’s a four-way handshake:

1. FIN (Finish): The sender who wants to close the connection sends the FIN to the receiver.

2. ACK (Acknowledge): The receiver acknowledges the FIN with ACK.

3. FIN (Finish): The receiver then sends his own FIN when it’s ready to close the connection.

4. ACK (Acknowledge): The sender responds with an ACK, completing the connection termination.

Conclusion

TCP is a networking protocol that allows the transmission of the data reliably, orderly, and error-free over a network. TCP solves a bunch of problems like communication starting agreement, data arrival confirmation, data ordering, retransmission of missing or lost data, acknowledgement on getting data, agreement on closing the connection to ensure data is fully transmitted.

TCP starts a connection with 3-way handshaking SYN → SYN-ACK → ACK. And similarly closes the connection by 4-way handshaking FIN → ACK → FIN → ACK.

I’m a fellow learner, just like you all. If there is anything missing or incorrect in this article, do let me know. I’m always open to learning and mistakes.

Before jumping to the DNS records, let me explain briefly what DNS is. DNS (Domain Name System) is a system that converts human-readable domain names into IP addresses, which makes it possible to serve a website and do other things on the internet. Think of it like a phone book; the browser tells the DNS server, "Hey, what’s the IP of example.com?" The DNS server replies, “192.0.0.1 is the IP address of example.com,” and then a browser is able to request something from the actual web server. Now you have a basic or good understanding of DNS, let’s understand what DNS records.

DNS Record Types

The common DNS records are:

1. A record.

2. AAAA record.

3. CNAME record.

4. NS record.

5. MX record.

6. TXT record.

NOTE: There are more DNS records that are not used so much. If you want to read about those as well, you can read here.

Let’s understand each DNS record in detail.

A record

A stand for “address”; it is the main record used to store the IPv4 address of the server, which is then sent to the browser for accessing the resource.

AAAA record

Similar to the A record, but it stores the IPv6 record of the server. The IPv6 address solves the problem of the IPv4 address limit.

CNAME record

CNAME stands for “Canonical Name.” It does not point to an IP; it always points to another domain name. It acts as an alias to another domain. It simplifies management by allowing multiple subdomains or services to use the same underlying server. For instance blog.mursaleennisar.com → mursaleennisar.com → 217.21.87.95.

NS record

NS stands for “Name Server.” It defines the server that is responsible for DNS zones, which, in simple terms, holds the DNS records. It doesn’t store the IP address of the authoritative server, but it stores the URL of that, which is then converted into an IP address to reach that server.

MX record

MX stands for “Mail Exchange.” It tells other servers where to send the email of a specific domain. We can insert multiple MX records; each record has a priority value. A lower number means a higher priority, and the higher priority server handles it; if it’s unavailable, then the next server handles it.

TXT record

TXT stands for “Text.” It is a flexible type that stores the human-readable or machine-readable values. It is primarily used for domain ownership and verification purposes.

DNS Records Explained with a Practical Example

Let’s say we have a domain name, example.com, which is pointing to the hosting server through an A record. When we enter this domain name in the browser, the website will load. Now we’ve purchased an email like user@example.com on Google Workspace; this will be configured through the MX record, which will point to the Google Workspace mail server. Now we’ve set up the blog.example.com subdomain, which we want to connect to a different server like wordpressblog.com. We’ll add a CNAME in the DNS record to point it to that. For setting email security records like SPF, DKIM, and DMARK, we’ll add them via TXT record.

Conclusion

DNS records are stored inside the DNS zone of the authoritative server, which stores different DNS records for different purposes, like A for the IPv4 address of the server, AAAA for the IPv6 address of the server, MX for the mail server, TXT for verifications and domain ownership purposes, CNAME for pointing to another domain, and NS, which defines the authoritative server. A single domain uses multiple records together to connect various services on one single domain.

How does it work?

To understand this, we need to be clear about some terms to understand this whole process:

1. DNS Resolver: It is a server typically owned by your ISP. It is responsible for the whole process of converting a domain name into an IP address.

2. Root Server: There are a total of 13 logical root servers in the world, these servers hold the record of the TLD (Top-Level Domains) servers like com, org, uk, in, etc.

3. TLD Server: TLD server is a server which holds the record of all domains’ authoritative nameserver under a specific TLD like com, org, in, us, etc.

4. Authoritative Nameserver: It is the final server in the DNS resolution process, which returns the actual IP address to the DNS resolver of a specific domain name. It manages DNS zone of a domain where there is specified the A record, AAAA record, CNAME record, etc.

5. Web Server: It is the actual server where the website is hosted. It’s IP address is returned to the client by DNS resolver.

This process starts from our browser when we type any address in the address bar, the browser sends a recursive query to the DNS resolver to do the whole work. Browsers don’t take any headache to do the work. The DNS resolver is responsible for getting the IP address of a domain name. It initiates an iterative query; first, it requests the root server. The root server checks the TLD of the domain name, like com, in, us, uk, etc., and returns the IP address of the TLD server to the query resolver. The query resolver sends the request to the TLD server of the domain name, and the TLD server sends the address of the authoritative nameserver. The authoritative name server holds the actual IP address of the domain name as it manages the DNS zone where there are specified A, AAAA, or CNAME records. It returns the IP address to the DNS resolver. The DNS resolver then returns the IP address to the browser, and then the browser is able to request the actual web server for a web page or some resources.

A Practical Guide with dig

DIG is a powerful command-line tool used to interrogate DNS name servers and troubleshoot DNS issues. It is preinstalled on Mac, and for Windows, you can search for how to download dig in Windows.

To get an A record of the domain name, we can run dig {domain-name} +short to get its A record, which is its server IP address.

Note: +short is a flag; it is optional. We can also run these commands without +short flag, but it will give us all the details; to get short, to-the-point details, +short is used.

To get other records, we can specify the record, like NS.

We can also check these details for root servers. To check the nameservers of root, we can run dig . NS +short (.) means root server here.

These are the nameservers of all the 13 root servers from A-M.

Similarly, we can check details of the TLD servers. To check for com TLD. Run dig com NS +short command in your terminal.

Now to check the whole process of DNS, you can run command dig {domain-name} +trace it shows us the whole process of how an IP address is returned.

Conclusion

First the browser requests the DNS resolver to get the IP address of the domain name. The DNS resolver makes iterative queries to different servers in the DNS hierarchy, like the root, TLD, and authoritative name server. It finally gets the IP address from the authoritative name server and returns it to the browser.

The DIG command-line tool helps us to interrogate DNS name servers and troubleshoot DNS issues. To check the DNS records of the root, we can use . and for TLD server we can use com, org, etc.

By now you should have solid knowledge about how DNS resolution works. I’m a fellow developer like you trying to explain what I learned; if there is any mistake in this, I’m open for feedback. Thanks

What is cURL?

cURL is a command-line tool and library for transferring data with URLs. Developers need it for testing the APIs and debugging them. cURL is used to send messages to a server from a terminal. In Linux and Mac it is pre-installed, and in Windows you can download it. To check if it’s installed in our system or not, run a simple command on your terminal curl -h. If it shows some curl options, then it’s installed, if it throws an error, then you need to install it.

We will start it with the simplest command curl <URL>. By default, without any flag, it sends a GET request to the given URL. For example, here we will use JSON Placeholder APIs.

As you can see here, it fetches posts from the server and displays them here. It shows only response data. To get headers also, we pass -i or —include flag with this command.

Now the question is if we want to send a post request to any API and want to send data to the server. Now we’ll see how to do it. To specify the request type to cURL, we use flag -X or —request and specify the name of the request type.

What if we want to send data? For this we use -d or —data flag and pass the data inside quotes in this format curl -X POST -d "param1=value1&m2=value2" https://example.com/api/data. We’ll understand it by doing it ourselves.

We’ve successfully sent the data to the server using cURL. Similarly, we can use other request types like PUT, PATCH, and DELETE also, which I want you to practice yourself.

Why cURL if we have tools like Postman?

By now you should be having a doubt about why we will use a difficult command-line tool like cURL if we have easy GUIs like Postman. Same was the doubt in my mind when I learned about cURL, but then I got to know about some points, and I’ll try to make you understand also.

1. GUIs like Postman use cURL under the hood.

2. GUIs are heavy and resource intensive, while cURL is a lightweight command-line tool that we don’t need to install in Linux, it comes pre-installed, ideal for servers.

3. The main thing that is missing in GUIs like Postman is automation, cURL is great for scripts, CI/CD, and cron jobs.

These are some of the main reasons for using cURL, you can learn more about it by yourself.

Summary

cURL is a way to communicate with a server using a terminal. We understood cURL from its basic GET request to sending data to the server using a POST request. Discussed some of the flags of cURL. And cleared one doubt about why cURL over GUI tools like Postman. By now you should be confident about cURL, how to use it, and where to use it. I’ll recommend you to learn about the automation where it’s used in automation.

What is the .git folder?

Before understanding how Git works, we need to understand about .git folders. .git folder is the backbone of Git, all the information and data is saved into this folder. When we initialize a Git repository using the command, git init a hidden folder is created inside our working directory named .git by Git.

You can verify this by running ls -a command in the current working directory. If you’ll see the content of this folder by running a command ls .git, you’ll see a lot of things cooking there.

There are files HEAD, config, and description and folders hooks, info, objects, and refs. We’ll try to understand most of these in detail, and this will eventually help us understand how Git works.

How does Git work?

Now we’ve understood the .git folder with which the working of Git is possible, now we’ll dive into this folder and see how things work internally.

First we’ll understand objects, there are three types of Git objects commit, blob, and tree. By the end of this article you’ll understand all of these three object types. Every object is assigned with a hash key.

The every snapshot taken by Git is saved in the object database, which I mentioned earlier. The object database is inside the .git/objects directory. We’ve fresh project where we initialized Git and have not committed anything yet. If we try to see what is inside objects. By running a command ls .git/objects so we see there are two default folders into and pack which are by default added by Git for optimisations.

Now I’ll make a commit into this repository to see what changes inside the objects directory.

If I check again by running, ls .git/objects, there are three new folders inside objects. These folders are named with the first 2 digits of their commit hash.

To check the commit we made and it’s hash key run git log on terminal

This commit has 67 as first 2 digits and we’ll go into the 67 folder to check what is inside it in .git/objects.

It contains the hash of the commit we saw earlier with git log:

67225eab133b6e98c2fe054404554272506f7ba0 = commit hash

67+225eab133b6e98c2fe054404554272506f7ba0 = folder name + hash file inside folder.

Now to check the content of this hash file, Git provide us with a low-level command cat-file which we’ll use to see the content of this file.

So with git cat-file <commit hash> -t(to check the type of object) -p(to check content of this object) . We got to know that this object is of type commit. So one type of object is now cleared.

There is a tree with a hash reference inside the commit object content. Tree is an object used to store directories in our project. A tree can contain other trees or blobs to make a complete tree hierarchy. This tree hash starts with fd which I earlier mentioned that inside objects there are folders named first 2 digits of their hash, now we’ll see if there is any folder inside .git/objects named fd.

You can see that one folder is named as fd inside objects. Inside this, there is a hash file similar to the earlier one that we saw. If we try to see the type of this object and content:

You can see the type of this object is tree and it contains only a blob, of which a hash reference is given. And it contains a filename, which has the reason why it’s stored here instead of storing it in blob. I earlier said a tree contains blobs and other trees as well. Here is only a blob because this commit only contains one file, which is app.js.

With this the second type of object is now cleared. Now let’s move forward and see blob. In tree content above we was getting blog hash reference starting with 69, we’ll find a folder in .git/objects.

When we try to check the type of this object it’s blob it’s content is the actual code of this file, which was there when we committed it into the repository. Congratulations, now you have an understanding of all three object types commit tree and blob.

We only saw about the commits and how Git stores data and snapshots internally. But we have many more things of Git, like branches, and more. If you enjoy this article and understood the whole thing. Comment on this article and I’ll write another article on the remaining things of Git.

Conclusion

Git works under the hood inside the hidden .git folder, which is inside our working directory. Git stores everything in its object database, and every object inside it has a hash key. Objects are of three types: commit, tree, and blob. We saw how all these types are linked with each other.

I encourage you to check this all by yourself to see that it’s actually true. Hope you enjoyed reading this article. Thanks for giving your valuable time.

Git is a tool used to track changes in your code. It is termed a Distributed Version Control System (DVCS) because it allows multiple developers to collaborate on a project, track changes, and switch back to previous versions if needed.

Why is Git used?

When working on projects, we need to keep track of the changes and versions, this is where Git comes into the picture. If we complete one feature, push it to the repository, and then start working on another feature, if the feature breaks any changes and we need to go back to the previous commit, we can do it easily.

In teams, it allows us to collaborate. Git allows us to add a local copy of the project to our system, work on it offline, and then, when the work is done, sync it with the central repository.

Core Terminologies

• Repository: A repository is a database, either local or on a central server, that saves the project files, folders, changes, etc.

• Working Directory: It is the directory where we are working on the project.

• Staging: Staging area is where changes are prepared for committing into the repository.

• Commit: A snapshot of the staged changes at a specific point of time. Every commit has a unique identifier (SHA) and a commit message.

• Branch: A branch is a separate line of code used for adding new features, fixing bugs, etc. It is separate from the main codebase and can be later merged into main.

• HEAD: It is a reference to the last commit in the current branch.

• Main/Master: It is a default branch where there is production-ready code.

Common Git commands

git init is used to initialize a Git repository in our project. It adds a .git hidden directory inside our working directory where everything is stored.

git add <filename> is used to commit a specific file into the staging area.

git add . is used to add all the files of the project into the staging area.

git commit -m <message> is used to commit the staging area changes into the repository with a message.

git status shows the status of the changes as untracked, modified, or staged.

git log displays all logs of commits in the current working branch history.

git branch list all local branches.

git branch <branch-name> is used to create a new branch.

git switch <branch-name> is used to switch to another branch.

There are many more Git commands, you can read about them here.

Practically using Git inside our project

1. Open any project inside your favorite code editor.

2. Initialize Git repository with git init

3. Make changes and add these changes to staging area with git add .

4. Finally push changes into repository with git commit -m “Initial commit”

Congratulations, you have used Git inside your own project.

Conclusion

In this article we understood what Git is, why it is used in modern software development, and the core terminologies of Git, like “repository,” “commit,” “branch,” etc. Also, we learned about some common Git commands, and we used it practically in our project. With the basic understanding of Git, you can now confidently manage your code and work efficiently in a team. Now the best way to learn it thoroughly is by practicing it regularly in your projects.

What is a Version Control System?

Version control system is software used to track the changes in code, allows collaboration on a codebase, and allows you to roll back changes in case something breaks. One of the most famous and widely used version control system is Git, which was developed by Linus Torvalds as a side project to manage and track changes in the Linux codebase when it grew a lot.

Why Does Version Control Exist?

You may be thinking, "What were engineers and developers doing before the Version Control System”? How they were sharing code, tracking changes, and collaborating on projects. Well, this leads us to a different era called “The Pendrive Analogy.”

Before version control system, developers were sharing code using pen drives, emails, etc. This process was so slow and had many problems. For instance, there is a project on which I’m working now. I told my friend to create a feature in it. I had to put the codebase on a pen drive and give it to my friend. My friend would do all the changes in the code and return my pen drive. This causes the first problem, when my friend was working on it, I had to stay idle for that time, we both couldn’t work together on this.

Now my friend completed it and returned the pen drive to me. I saw the code, but I don’t know what changes were made by my friend, this leads to another problem of tracking changes.

Now I move forward and start working on another feature on this project. Then my friend realizes that there are some bugs in this project, he fixes the bugs, and another problem arises, the pen drive is with me, and I can’t get the new code where my friend fixed the bugs.

Now I made another feature, and he fixed the bugs. When we have to merge the code, we have to manually check for conflicts. This is another problem.

Problems do not stop here. What if my friend’s code breaks things in my project? I can’t roll back the code.

That’s why version control system exist.

What is a load balancer?

A load balancer is either hardware or software, in modern technology it is software that does the single job of distributing traffic across servers. Think of it as a restaurant where there are many chefs, a host gets orders and assigns them to the appropriate chef. He does not take orders himself, but his only job is to assign orders to the correct chef. Similarly, a load balancer takes all the requests and routes them to different servers.

Why do scalable systems need it?

A load balancer is a core component of scalable systems, a system without a load balancer is very hard to scale. Because some of the servers will be idle and some will be overwhelmed by requests. Below are some of the advantages of a load balancer in a scalable system:

1. No single point of failure: If any server goes down, it will not affect the application because requests will be routed to the healthy servers.

2. Easy scaling: Adding a new server to the system is easy, when a new server is booted, the load balancer automatically detects it and starts routing requests to it also.

3. Better performance: When traffic is distributed, servers are not overloaded hence, they perform better.

Conclusion

A load balancer is an essential component of a scalable system that works like a traffic police officer who routes the traffic across different lanes (servers) to avoid traffic jams. It distributes traffic across different servers, constantly checking if the servers are healthy, makes adding new servers into the system easy and more.