What we'll cover

The problem Kafka solves → message streams → topics → producers → partitions → consumer groups → how Kafka stays fast and safe. All with zero jargon.

What problem does the Kafka solve?

Modern apps are not simple request-response machines anymore. Think about what happens when you order something on Swiggy:

• The order service records your order

• The payment service charges your card

• The restaurant gets notified

• The delivery partner app updates

• Your notification system pings you

All of this happens simultaneously, triggered by a single button tap. How do you connect all these services without creating a tangled mess where every service talks directly to every other service?

Without Kafka, it's like every person in a stadium trying to whisper their message directly to everyone else. Chaos. With Kafka, there's one giant PA system that everyone can broadcast to — and anyone who cares can listen.

The old way was direct service-to-service calls. If the notification service is down, the order can't complete. Services become tightly coupled — break one, break all. Kafka decouples them entirely.

What Is a Message Stream?

Think of a river. Water flows continuously — it doesn't stop because you aren't looking at it. A message stream is exactly that: a continuous, never-ending flow of events.

Every click, every purchase, every sensor reading, every login — these are all events. They happen constantly, in real time. A message stream is just a way to capture all of these events as they happen and make them available to whoever needs them.

Imagine a live cricket match scoreboard. Every run, every wicket, every over — it's a stream of events. You can tune in now and see what's happening. Or you can rewind and check what happened in the 3rd over. The stream doesn't care when you arrive — it just keeps flowing.

Kafka is the system that captures, stores, and serves that stream to as many listeners as need it.

Kafka as a Central Message Pipeline

Instead of services talking to each other directly, every service talks to Kafka. Kafka sits in the middle — a central nervous system for your entire application.

Producers don't know or care who reads their messages. Consumers don't know or care who produced them. Kafka is the only thing they both trust. This is called loose coupling — and it's the foundation of every scalable system you've ever used.

Producers: Who Sends Messages

A producer is any application that sends (publishes) messages to Kafka. Think of producers as reporters — they have news to share and they file it with the news agency (Kafka). They don't worry about who reads the article. That's not their job.

A weather station is a producer. It measures temperature every second and sends the reading to Kafka: "Mumbai, 36°C, 2:30 PM." It doesn't know whether the AC company, the news app, or the agriculture dashboard will read it. It just keeps sending.

Producers are responsible for two things: what message to send, and which topic to send it to. That's it. Kafka handles the rest.

Real world producers

Your app's backend, IoT sensors, mobile apps, payment gateways, microservices, log aggregators — anything that generates events is a producer.

Topics: How Messages Are Grouped

Kafka doesn't just dump all messages in one pile. It organizes them into topics — named categories, like folders on your computer.

Think of a newspaper. There's a Sports section, a Business section, a Local News section. Producers (journalists) file their stories to the right section. Readers (consumers) subscribe to only the sections they care about. Topics work exactly like this.

You might have topics like orders, payments, user-events, inventory-updates. Producers write to a specific topic. Consumers read from a specific topic. Clean, organized, zero confusion.

Topics in Kafka are persistent — messages don't disappear after being read. They stay for a configurable amount of time (say, 7 days). This means a new service can join and replay the entire history from day one. That's powerful.

Partitions: Why Messages Are Split Internally

Here's where it gets really clever. Each topic is split into multiple partitions — think of them as parallel lanes on a highway.

Imagine a single-lane road from Mumbai to Pune. 10,000 cars, one lane — you'll be there tomorrow. Now imagine a 6-lane expressway. Same 10,000 cars, but they spread across lanes and move in parallel. Partitions are those lanes.

Each message within a partition gets a sequential number called an offset — like a page number in a book. Consumers bookmark their offset so they know exactly where they left off. Messages within a single partition are always in order. Across partitions, Kafka makes no ordering guarantee — but that's usually fine.

How does Kafka decide which partition?

If you send a message with a key (e.g., user-id: 42), Kafka hashes that key and routes all messages with the same key to the same partition — guaranteeing order for that user. No key? Kafka spreads messages across partitions evenly.

Why Kafka Is Fast and Scalable

Kafka handles millions of messages per second. Here's the honest reason why:

Sequential disk writes. Most databases do random reads and writes all over the disk — slow. Kafka only appends to the end of a log file, sequentially. Your hard drive was designed to do exactly this quickly. Kafka exploits this to its fullest.

Zero-copy transfer. Normally, reading a file and sending it over the network copies the data 4 times through memory. Kafka uses a Linux trick called sendfile that sends data directly from disk to network in 1 step. This alone gives it a 60–70% throughput boost.

Batching + compression. Rather than sending 1 message at a time, Kafka groups messages into batches, compresses them (GZIP/Snappy), and sends the whole batch in one network call. Fewer round trips = faster.

Horizontal scaling via partitions. Want to handle 10× more traffic? Just add more partitions and more consumer instances. Linear scale-out, no complex re-architecture needed.

Why Kafka is fast — summary

• Appends to disk sequentially (fast I/O)

• Zero-copy data transfer over network

• Batches messages, compresses payloads

• Scales horizontally by adding partitions

• Messages stay in memory (OS page cache) for hot reads

What are Consumer Groups ?

A consumer group is a team of consumers that work together to read a topic. Kafka divides the partitions among the group members so each partition is handled by exactly one consumer at a time.

Imagine 3 postmen delivering letters in a colony. Instead of all 3 delivering to every house (wasteful), each postman covers a different street. Together they cover the whole colony faster. That's a consumer group — divide the work, finish faster.

The magic rule: one partition → one consumer within a group. So if you have 6 partitions and 3 consumers in a group, each consumer handles 2 partitions. Add a 4th consumer? Rebalancing happens automatically — Kafka redistributes the partitions.

How Work Is Shared Across Consumers

This is where Kafka gets really powerful. Not only can one consumer group share a topic's load — multiple independent consumer groups can read the same topic simultaneously, each getting a full copy.

Group A's offset and Group B's offset are completely independent. Group B can be 10 minutes behind Group A — Kafka doesn't care. The messages sit there for both groups to read at their own pace. This is radically different from a traditional queue where a message is gone once one consumer reads it.

How Kafka Keeps Messages Safe and Ordered

Kafka's durability story is built on two pillars: replication and acknowledgment.

Replication

Every partition has one leader (handles all reads and writes) and multiple replicas (silent backups on other machines). If the leader crashes, one replica instantly becomes the new leader. Your data doesn't disappear — it was already copied. You configure the replication factor (usually 3 in production).

Acknowledgment (acks)

When a producer sends a message, it can ask for different levels of confirmation:

• Fire and forget — no confirmation. Fastest. Data loss possible.

• Leader confirms — one server confirms. Good balance.

• All replicas confirm — maximum safety. Use for financial data.

Ordering

Within a single partition, messages are strictly ordered — they are always appended and always read in sequence. Consumers track their position using offsets. If a consumer crashes and restarts, it picks up from the last committed offset — no message is skipped, no message is processed twice (with idempotent producers enabled).

Conclusion

So — What Is Kafka, Really?

Kafka is a distributed commit log that acts as the central nervous system of modern applications. It decouples producers from consumers, stores messages durably, scales horizontally through partitions, and lets multiple independent systems consume the same stream of events.

The one-line version: Kafka is a bulletin board that never erases anything, where everyone has their own bookmark, and new readers can start from the very first message.

What Is It?

The Thundering Herd Problem happens when a large number of servers simultaneously request the same resource that just became unavailable — most commonly, an expired cache key.

Think of it like a store opening at 9 AM. 500 people are waiting outside. The second the door unlocks — everyone rushes in at once. The shelves collapse. The staff can't cope. Not because there were too many people overall — but because they all arrived at the exact same moment.

Replace the store with your database. Replace the crowd with your app servers. Replace 9 AM with the moment your Redis TTL hits zero.

⚡ It's not a volume problem — it's a synchronization problem. A thousand requests over an hour is fine. A thousand requests in the same millisecond on a cold cache is an outage.

How It Happens

Here's the failure sequence when a cached key expires at peak traffic:

• T=0 · Cache key dropsT+1ms ·

• All servers: cache MISST+2ms ·

• All servers fire DB queriesT+50ms ·

• DB connection pool fullT+500ms ·

• Timeouts → retries (worse)T+10s · 503 errors · site down

The naive code pattern that causes this looks completely innocent:

//Looks fine. Will destroy your DB under load. 
async function getData() { let data = await redis.get('homepage'); if (!data) { 
// All 50 servers hit this at the same millisecond 
data = await db.query('SELECT * FROM articles LIMIT 20'); await redis.set('homepage', data, 'EX', 60); } return data; }

Real-World Examples

Hotstar / IPL — 35M concurrent viewers. A scorecard cache expiring mid-match means tens of thousands of simultaneous DB queries. Hotstar built custom thundering-herd-resistant layers for exactly this.

Netflix — A show drops at midnight. Millions check "What's New" simultaneously. If recommendation caches were set to expire at midnight, the herd triggers at peak traffic. Netflix uses probabilistic refresh to prevent it.

Stack Overflow — Documented using mutex-based cache refresh so only one thread rebuilds any given key, regardless of how many readers are waiting.

How to Fix It

Five battle-tested techniques — pick based on your use case:

🔒 Cache Locking (Mutex) — Only one server refreshes the cache. Others wait 50ms or return stale data. One DB query instead of fifty.

const lock = await redis.set('key:lock', '1', 'NX', 'EX', 5); if (lock) { // Only this server hits the DB 
const data = await db.query(...); await redis.set('key', data, 'EX', 60); await redis.del('key:lock'); } else { await sleep(50); // wait and retry — cache will be warm }

🎲 TTL Jitter (Simplest fix) — Add random variance to every TTL. Keys expire at different times instead of all at once. One line of code.

// Instead of a fixed 60s for everyone: 
const ttl = 60 + Math.floor(Math.random() * 20 - 10); // 50–70s 
await redis.set('key', data, 'EX', ttl);

🔀 Request Coalescing — 500 requests for the same key collapse into 1 upstream DB query. All 500 wait for that single result.

⏱ Exponential Backoff — Retry after 1s → 2s → 4s → 8s. Prevents retry storms from amplifying the failure.

♻ Background Refresh — Refresh cache at T+55s before the 60s TTL expires. Cache is always warm. Users never cause a miss.

📌 Key Takeaways

• Cache expiry + many servers = synchronized DB flood

• It's a synchronization problem, not a traffic volume problem

• Adding more servers makes itworse

• TTL jitter is the simplest fix — always add it

• Cache locking (mutex) is the most complete fix

• Background refresh gives the best user experience

Javascript, the Dynamic language which powers the web, is constantly evolving. While this evolution brings exciting new features, it can also create compatibility issues, older browsers might not support the latest Javascript features, leading to broken functionality and a frustrating user experience. This is where polyfills come to the rescue.

What is a Polyfill?

A polyfill is a piece of Javascript code that provides modern functionality in older browser environments which don’t natively support it. Think of it like a “Filling in the gaps” mechanism. It replicates a new feature's behaviour so your code can run smoothly across different browsers, ensuring a consistent user experience.

Why use polyfills?

The primary reason for using polyfill is to avoid situations where your web application or website doesn’t work on older browsers due to a lack of support.

Future-proofing code: Using polyfill, you can start modern Javascript features today. knowing that your code will continue to work even as browsers evolve.

Let us now create our polyfills.

We will start will forEach () function/method used in the iteration of the array.

ForEach() function/method Array instance executes a provided function once for each array element.

// Fist we will name the method myForEach, second we will check if the method exist in the array, 
// If it doesnt then only we can create it
if(!Array.prototype.myForEach) {
Array.prototype.myForEach = function(callback) {
 for(let i = 0; i < this.length; i++) { // we are using for iterating over the array and then 
            callback(this[i], i); // for each element the callback , which we have passed here as an argument
        }                         // callback function is called with two arguments
}
}
// now lets demonstrate it
const arr1 = [1, 2, 3, 4 , 5];
arr1.myForEach((e) => {
console.log(e)
}); // this will print each element in the array in the console.

The second polyfill we will have a look at is the map() function/method, instances create a new array populated with the results of calling a provided function on every element in the calling array.

// myMap method creation
// again we will check if it exists, if it doesnt then we will create a myMap()
if(!Array.prototype.myMap) {
Array.prototype.myMap = function(userFunction) {
const resultArray = []; //initialising an empty array
         // this points to an exisiting context
for(let i=0; i < this.length; i++) {
// now we will push the userFunction with two arguments which are index and the element of the array 
// by using this
resultArray.push(userFunction(i, this[i]);
}
return resultArray[] // returnning the new array 
}
};

// testing this myArray polyfill
const arr1 = [1, 2, 3, 4 , 5];
const newArr = arr.myMap((e) => e ** 2);
// 
console.log(newArr) // => the output will be [1, 4, 6, 8, 10]

The third polyfill we will create is the filter method in Javascript.

The filter() method creates a new array filled with elements that pass a test provided by a function.

// lets create our own filter method
if(!Array.prototype.myFilter) {
Array.prototype.myFilter = function(userFunction) {
// initializing an new array
const resultArray = [];
// now we will again use a for loop to iterate
for(let i=0; i < this.length /* currentArray length */; i++) {
// The loop will iterate with each element in the array;
if(userFunction(this[i]) {
resultArray.push(this[i)
// element in the array, the function userFunction (which is a callback function passed to myFilter) is called with the current element (this[i]). If userFunction returns true, the element is added to the res array.
}
}
return resultArray;
}
}

// now  check the myFilterFunction
const arr1 = [1, 2, 3, 4 , 5];
const newFilter = arr1.myFilter(e => e %2===0);
console.log(newFilter); // output will be 2 and 4 , as it is divisble by 2 and the remainder is 0.

Conclusion

Polyfills are an essential tool for JavaScript developers who want to build modern, feature-rich web applications that work seamlessly across all browsers. By understanding how polyfills work and how to use them effectively, you can write cleaner, more efficient code while ensuring a consistent and enjoyable user experience for everyone.

In the year 2405, the Starship Enterprise, under the command of Captain Jean-Luc Picard, embarks on a critical mission to establish peaceful relations with the mysterious alien civilization known as the Xelthorians. The Xelthorians possess advanced technology that could revolutionize Starfleet’s understanding of the cosmos. However, their language and data formats are unlike anything the Federation has encountered before.

To facilitate communication and data exchange, Captain Picard and his crew must serialize their data to send it across subspace communication channels and deserialize the data they receive from the Xelthorians.

Serialization: Preparing Data for Subspace Transmission.

Ensign Wesley Crusher, the young and brilliant Starfleet officer, is tasked with preparing the crew's data for transmission. He gathers crucial information about the Enterprise's crew and uses JavaScript to serialize it. This process converts the data into a string format, making it easy to send over subspace communication.

// Data to be serialized
const starFleetOfficer = {
name: "Jean-luc Picard",
rank: "Captain",
ship: "USS Enterprise",
species: "Human",
}
// Serialize the object 
const serializedData = JSON.stringify(starFleetOfficer)
console.log(serializedData);
// the output will be
// {"name":"Jean-luc Picard","rank":"Captain","ship":"USS Enterprise","species":"Human"}

Lieutenant Commander Data, the android officer renowned for his computational prowess, receives a transmission from the Xelthorians. The data arrives in a serialized format, a jumble of characters that only a machine could understand. Using JavaScript, Data deserializes the alien data, converting it back into a readable object.

Deserialization: Deciphering the data

Now Deserialization is a process to convert the JSON string into a Javascript object again, and it is done by using JSON.parse.

const deserializedData = JSON.parse(serializedData);
console.log(deserializedData);
// the output will be again 
/*1111
{
  name: 'Jean-luc Picard',
  rank: 'Captain',
  ship: 'USS Enterprise',
  species: 'Human'
}
*/

Here is how it works in a flow diagram

The exchange of bridging worlds

The bridge of the Enterprise buzzes with activity as Wesley and Data work together. The crew’s data, now serialized, is transmitted to the Xelthorians. Moments later, Data deciphers the incoming alien data.

// Crew data to be sent
const crewData = [
    { name: "William Riker", rank: "Commander", ship: "USS Enterprise", species: "Human" },
    { name: "Data", rank: "Lieutenant Commander", ship: "USS Enterprise", species: "Android" }
];

// Serialize the crew data
const serializedCrewData = JSON.stringify(crewData);
console.log("Sending data:", serializedCrewData);
// Output: Sending data: [{"name":"William Riker","rank":"Commander","ship":"USS Enterprise","species":"Human"},{"name":"Data","rank":"Lieutenant Commander","ship":"USS Enterprise","species":"Android"}]

// Data received from the alien ship
const receivedData = '[{"name":"Spock","rank":"Commander","ship":"USS Enterprise","species":"Vulcan"},{"name":"Uhura","rank":"Lieutenant","ship":"USS Enterprise","species":"Human"}]';

// Deserialize the received data
const deserializedAlienData = JSON.parse(receivedData);
console.log("Received data:", deserializedAlienData);
// Output: Received data: [ { name: 'Spock', rank: 'Commander', ship: 'USS Enterprise', species: 'Vulcan' }, { name: 'Uhura', rank: 'Lieutenant', ship: 'USS Enterprise', species: 'Human' } ]

Conclusion

Thanks to the combined efforts of Wesley Crusher and Lieutenant Commander Data, the Enterprise successfully establishes a data exchange with the Xelthorians. This achievement marks a significant step towards understanding and cooperation between two civilizations, bringing the galaxy closer to a future of peace and harmony.

With serialization and deserialization, the crew of the Enterprise bridges the gap between worlds, proving once again that in the vastness of space, knowledge and collaboration are the keys to unlocking new frontiers.

And so, the mission continues, boldly going where no one has gone before... 🖖😄

In the world of programming, objects play a crucial role, they are fundamental building blocks which assist in structuring and organizing code. Objects play a pivotal role in Javascript, enabling developers to create complex structures and manage information efficiently. In this article, we will explore the core concepts of Javascript objects, their properties, and various use cases.

What is a Javascript Object?

A Javascript object is a collection of key-value pairs, where each key is known as a property name and is associated with a value. These values can be of any data type, including strings, numbers, arrays, or even objects. Objects are versatile and provide a way to group related data and functionalities.

Here is a way of declaring a Javascript object:

const person = {
name: "Spiderman",
age: "30",
alias: "Peter parker",
occupation: "Super hero",
}

Accessing and modifying properties of Object -

You can access and modify the properties of a Javascript object using either a dot notation or bracket notation. Let’s take a look at both approaches:

Dot notation

console.log(person.name); // output will be Spiderman
// modifying the age of spider man, lets make him old
person.age = 40;
console.log(person.age) // output will be the age is 40

Bracket notation

console.log(person["occupation"]); // output will be Super hero
// let us change it to photographer
person["occupation"] = "Photographer";
console.log(person["occupation"]); // Out put will be Photographer

Adding and deleting properties

Javascript objects are dynamic, meaning you can add or delete properties even after the object has been created.

Adding a property

// lets add nemesis of spiderman to the list
person.nemesis = "Green goblin";
console.log(person.nemesis); // output: green goblin

Deleting a property:

// lets delete or terminate the nemesis
delete person.nemesis;
console.log(person.nemesis); // output: undefined

Methods in Javascript Objects

Methods are functions that are associated with objects. They allow objects to perform actions and manipulate their own data. You can define and use a method within an object:

const person = {
name: "Spiderman",
age: "30",
alias: "Peter parker",
occupation: "Super hero",
greet: function() {
console.log("Hello, my name is " + this.name);
},
league: {
avengers: "yes",
},
};

person.greet() // Output will be, Hellom my name is Spiderman

Iterating in objects

To iterate over the properties of an object, you can use a for...in loop. This will allow to access each key-value pair within the object.

for (let key in person) {
  console.log(key + ": " + person[key]);
}

Copying objects

There are several ways to copy Javascript objects, ranging from shallow to deep copies.

Shallow copy

A shallow copy of an object creates a new object that references the same memory locations as the original object for nested objects or arrays. This means that changes to nested objects or arrays in the copied object will also affect the original object and vice versa.

Example with Object.assign();

const newPerson = Object.assign({}, person);

// modifying the nest object in the shallow copy
newPerson.league.avengers = "No";
console.log(person.league.avengers); // No
console.log(newPerson.league.avengers); // No

Example with spread operator.

const newPerson = {...person}

// modifying the property in the shallow copy
newPerson.league.avengers = "Maybe";
console.log(person.league.avengers); // Maybe; 
console.log(newPerson.league.avengers); // Output will be Maybe

Deep copy

A deep copy of an object creates a new object with a completely separate memory location for all nested objects and arrays, this means that changes to the objects, nested objects and arrays in the copied object will not affect or change the original object and vice versa.

Example with JSON methods:

One common method to create a deep copy is by using JSON.stringify() and JSON.parse(). This method converts the object to a JSON string and then parses it back into a new object.

const deepCopy = JSON.parse(JSON.stringify(person));

// modifying the value of the object in the deep copy
deepCopy.league.avengers = "No";
console.log(person.league.avengers) // Maybe
console.log(deepCopy.league.avengers) // No

Understanding Objects is very important for writing robust and maintainable JS code, especially when you are working with large and complex data structures.

What is Javascript?

Have you ever wondered, when you click on a button for example pay button, you are taken to a form and then you fill the form on the website, and the payment is made, my friend that is nothing but Javascript working behind the scenes of the web application or web site 😱. Yes, you heard it right Javascript is the one that makes the website interactive for users. Now you know that, we will look into some of its basics and features.

Welcome to the magic world of Variables

A thought must have come to your mind, what are variables, in layman's terms variables are nothing but containers where you can store your data or values. They are also known as identifiers.

Here you can see various containers or boxes and their values.
There are two ways of declaring variables: the Implicit and the Explicit ways.

Explicit way

The word explicit itself says that we are specifying a keyword/identifier before the variable name.

There are three ways in which you can declare a variable in JavaScript. var let and const. Before getting to that, we should know how to declare variables and follow certain standards.

Var

var a = 10;

when we console.log here we will get the value of a is 10. Var is the global scope, which means when we declare a with the var keyword, it is accessible everywhere in the javascript program.

But var is loosely scoped, which means it can be re-declared or re-assigned, what it did was it caused problems in behaviour, bugs, and memory leaks, especially in large-scale projects and complex codebases.

var name = "ojas"

console.log(name);

function greet() {
console.log(`Welcome ${name}`}
}
greet(); // When I call greet function here it is taking the name reference from the top.

The limitation of var is used to show unexpected behaviour in the program, which results in bugs, mostly in large and complex projects. To solve that two identifiers were introduced in Javascript standards and those were let and const.

let

let identifier was introduced in ES6 standards, it is re-assignable, block-scoped, optionally initializing each to a value.

// demonstrating this through a code snipet
let x=10; 
console.log(x)  // initialized with a value 10.
// let x = 20; 
// Uncaught SyntaxError: redeclaration of let x . What this says is you cannot redeclare x again.
// we are also able to change the value here
x = 20;
console.log(x) // so here it will give you x = 20 here. so we can change the value of x which is declared by using let keyword.
// But there is more, when we declare x again inside a curly braces , then lets see what happens
{
 let x = 30;
 console.log(x) // x = 30;  here something thing happened, we were able to re declare the x variable and assign different value to it.
}

const

const identifier was also introduced in ES6 standards, It is block scoped local variable. The value of const cannot be changed/reassigned but if it is an object then the values can be added, updated or removed.

const x; // We need to initialize the value of a const, it cannot be kept uninitialized
const x = 20;
x = 30; // in this case this will give an error which will tell value of const cannot be reassigned.

const names = ['Abhijit', 'Bipin', 'Ojas'];
names.push('Aniket') // here we are adding Aniket in the array which is behind the scenes an object so, we can add this value in the array even if it is defined using a const keyword.

Implicit Declaration

When a user declares or assigns a value to a variable which is not declared by using var, let or const, Javascript declares that variable for you, but caution, when you declare a variable implicitly then it is always global scope, even if it is declared in a function body.

// example of declaration of variable implicitly
name = "Abhijit"
console.log(name) // this will print Abhijit in the console.

Difference between var let and const.

This is a brief introduction to variables in JavaScript and how they work.

Datatypes in Javascript

There are two main sets of data types in JS, those are primitive and non-primitive data types.

Primitive data types

• String: Represents a sequence of characters, for example, "Hello, World!".

• Number: Represents both integer and floating-point numbers, for example, 42 or 3.14.

• Boolean: Represents a logical entity and can have two values: true or false.

• Undefined: A variable that has been declared but not yet assigned a value.

• Null: Represents the intentional absence of any object value. It is treated as falsy for boolean operations.

• Symbol: A unique and immutable primitive value used as the key of an object property. For example, Symbol('description').

• BigInt: Represents integers with arbitrary precision. It can handle values larger than the Number type. You can create a BigInt by appending n it to an integer, for example, 123n.

Non-primitive data types

• Objects

• Arrays

// Object data type
const person = {
name:"Abhijit",
age:"20",
}

// array data type
const fruits = ['Apple', 'Banana', 'Grapes']

This is a brief introduction to data types in JavaScript.

This is the year 1987; we are at Jungle base.

let level1 = ['grunt', 'grunt', 'flying-soldier', 'grunt'];
// we need to engage now
console.log(level1, "Engage");

Methods in arrays

Shift()

Our hero, Bill needs to take out a few enemies. here we use the shift method, which removes element from the start.

level.shift();
level.shift();
console.log(level1) // output is level1=['flying-soldier', 'grunt'] 'grunt' and 'grunt' are terminated

Push()

Now we go ahead in the level, and new enemies appear, here we use the push method, so that we can insert new elements in the level1

level1.push("Soldier-sniper", "scuba-soldier", "Boss");
console.log(level1); // here we get level1=['flying-soldier', 'grunt', 'Soldier-sniper', 'scuba-soldier', 'Boss']

indexOf()

Now I want to locate where is the enemy in the jungle stage, so for this, we will use the index of method which will give me the position of the ‘Boss’ in the level1 array

console.log(level1.indexof("Boss"); // the index will be 4. so my final enemy is located at the last.

Concat()

Now we have to give the bill a power, but it is in a different section of the level, we need to bring it to level 1, how can we do that, We use the concat method, which will merge two arrays

let powerups = ['S-wide range bullets', 'L Laser-gun', 'grunt'];
console.log(level1.concat(powerups)); //  here we get level1=['flying-soldier', 'grunt', 'Soldier-sniper", 'scuba-soldier', 'Boss', 'S-wide range bullets', 'L Laser-gun']

filter()

Now we must remove Grunt from the level 1 jungle, so what should we do? we should perform the filter method; it will return a new array which passes the test case

let onlyGrunts = level1.filter((e) => e === 'grunt'); // it will filter out grunts

pop()

Now we need to eliminate mid-level enemies like “scuba soldiers”, and it is placed at the end of the enemies array, how will we do that, we will use the pop method, pop removes the last element in the array

let enemies = ['Grunts', 'Soldier-sniper', 'Scuba-soldiers'];
console.log(enemies.pop()); // output is the last element ie the Scuba-soldier is removed from the enemies list

includes()

Now, Bill needs to check if the enemies contain sniper-soldier and how he will be able to do that. we use the includes method, This will check if the array consists of that specific value or not

console.log(enemies.includes('Soldier-sniper')); // This will give the result as true to Bill./

map()

We need to describe each element in the level1 array like what bill has encountered

// let level1 = ['grunt', 'grunt', 'flying-soldier', 'grunt'];
console.log(level1.map((item => item + ' encountered!')); //  let level1 = ['grunt encountered', 'grunt encountered', 'flying-soldier encountered', 'grunt encountered'];

slice()

now Bill needs to extract a portion of the level, we can achieve this by using the slice method, which extracts a section of an array and returns a new array

let levelSection = level1.slice(0, 2); // Extracts elements from index 0 to 2
console.log(levelSection);

unshift()

Now we need to add some staring area like a wall in the level1 array, how are we going to achieve it by using the unshift method, Adds one or more elements to the beginning of an array, like adding a new starting area to the level

level1.unshift('wall', 'wall');
console.log(level1) // The output will be level1 = ['wall', 'wall', 'grunt encountered', 'grunt encountered', 'flying-soldier encountered', 'grunt encountered'];

Conclusion

Here I have tried to explain few method of arrays in javascript in a fun way.

The Internet is a worldwide network linking various devices, including (computers, mobiles, tablets, and gaming consoles like PS5 and Xbox). Consider it a freeway, where traffic(Data) from one plays to another and vice versa from millions of endpoints. Everything is connected via cables and it’s an extensive network for connecting the entire globe, a large amount of cables are laid under seas and oceans, as shown in the figure below.

Image credits: https://www.submarinecablemap.com/

Working the Internet.

Now that we have a basic idea of what the Internet is, let us dive deep and understand, how it works.

Physical Medium: A device connects through the medium of Wires.

a Fibre Optic Cables: These are used for long-distance connectivity, which transmits the data as light.

b Ethernet cables: These are used for short-distance connectivity, which also ensures direct connectivity and fast transmission.

Explaining it further

• Physical devices like Computers, Mobile, and Tablets send and receive the data.

• Internet Service Provider(ISP): These service providers play a key role in or you can say it is a medium which helps you connect to the internet.

• Routers: Routers are nothing but a mechanism which guides your signal or information to reach the proper source.

• Servers: Servers serve you the information, like a restaurant person getting your food and serving it. It also holds the information.

The basic flow of how the internet works is shown in the figure above.

Travel journey of the data

Consider an example when you hit www.google.com in your browser what does happen exactly behind the scenes? Let’s dive in.

1 User enters www.google.com in the browser, but the computer doesn’t understand www.google.com, what does the internet do it asks where can I find this www.google.com.

2 (Tada!) Here comes the DNS(Domain name service). This is a digital phonebook or Yellow Pages of the internet. It translates google.com to an address that the internet understands ie 142.250.191.78. so the whole crux is the DNS does is simply translate the google.com to an Internet Protocol address, which is then read correctly by the internet.

3 After the DNS is done locating the address, the web request is made in action.

• Routers: This gives a proper direction to the request.

• ISP(Internet Service Providers): These are the ones issuing connections and initiating the requests through them to the global network.

• Servers: The end destination where the request is fulfilled and the response is sent back to the client's computer.

Request/Response Cycle

The above figure shows the dataflow via the internet to the server and back.

Conclusion

This is an overview of how the internet works.

Let’s begin from scratch. What is GIT?
Git is a version control system designed to track project file changes. It also helps you collaborate with other developers, so you can work in sync. It was developed by Linus Torvalds in 2005. It also allows or is used in integrating code snippets from different branches. Terms like Branches and Merges can be a little overwhelming a bit, but relax in this tutorial you will be familiar with these terms/jargon. Git is an open-source software, where you can install it on Windows, Linux and Mac.

What is a Repository?
A repository is nothing but a folder, where your files are stored. The repositories are of two types.

a) Local Repository - The folder which is present locally ie on your computer

b) Remote Repository - The folder which is located on the central server(Accessible to all).

Getting Started with Git.

To install git you can visit the official website https://git-scm.com/downloads.

You will land up here, and then according to your operating system, you can download the specific version of GIT. GIT is free to use and open source.

After you have done the installation, you can check if the git is installed properly or not by using this command in your command prompt or bash shell.

git --version
git version 2.24.0.windows.2

You will see the version details like “git version 2.24.0.windows.2**” which is also shown in the above snippet.**

Creating an account with GitHub

One more thing we need to do is create an account with Github. A brief introduction to GitHub

GitHub is a web-based platform that uses Git for version control. It allows developers to host and manage their code repositories, collaborate on projects, and track changes. Think of GitHub as a social network for programmers, where you can share your projects and contribute to others' work.

Step 1

Go to GitHub and you will see the homepage.

Step 2
Click on the Signup button on the top right corner. You will proceed with filling out the information given in the image below.

Step 3
After successfully creating an account, You will be able to sign in to the GitHub website or app.
Now that we have covered this basic sign-up tutorial, we will move ahead to understanding the basics of Git, commands like Git init, Git add, Git commit and so on.

Git Basics Guide

We will be going through some commands
1 Initialization

Create a folder named chaicode-cohort

go into that folder.

// for initialzing the git repository type the following command
git init

what this will do is, it will create a .git folder in your chaicode-cohort folder and also which will be hidden

You can see it in the above image, for viewing all the folders in the chain code-cohort, we need to run the command ie using the git bash is ls -a, it will show you all the subdirectories including the .git folder.

When you open this folder in your code editor, ie the VS code editor, this is how it will appear

Now if you closely look, By default git will show U besides the file name, which means the files are not being tracked, now to track those files we need to add them to git or let git know that, start tracking those files.

for that we use

git add filename // for single file 
git add . // for multiple files

This is also known as the staging stage, that is we are making git aware that these files are the ones you should keep track of.

// now suppose I want to track a single file.
git add one/info.txt

after using that command now you can see the info.txt U ie untracked status is changed to A, now it will be tracked or staged for commit. But this doesn’t work for large file sets, so we use

git add . // This commands adds everything to staged for commit

Here, when I use that command then you can see every untracked file U is changed to A ie it will be tracked from now on.

Now that the files are staged and ready to be committed in the git folder, we will commit them and specify a message, so that it can be easy for us to keep track of the commit.
for that, we use the command

git commit -m "First commit for chaicode-cohort"

When I use the commit command with a message, you can see that there are 3 files changed and 2 insertions are made.

For viewing the Commit ID, we can use the git log

git log

When I use this command it gives me the information regarding the commit. like, commit id, Author, Message and date.

Now what if I make a change in info.txt and I want to see what change I made then “git status” is the command you will use

git status

You can see in the above image that I have made some changes in the info.txt and git is amazingly tracking it and showing it to me when I use the git status command.

after committing the new change and logging, we can see that my head has shifted to the new commit.

Now that we have the gist of how git works. we will move ahead to Github.

We will create a Remote repository accessible to all of our peers.

GitHub basics

Now we need to push the local repository to the centralized place where our peers can access it.

Go to GitHub and log in. You will see the home screen.

Here you can see the new button. click on it.

In the above image, enter the repository name, chaicode-cohort in our case and then click on Create the repository.

Now we see the repository is created in GitHub, now we need to push our existing repository over here

so first we need to add the remote folder or remote origin folder here.

git remote add origin https://github.com/abhijitWebDev/chaicode-cohort.git

after adding the folder we need to set the branch ie in our case the master branch

git branch -M main

after setting the branch to main, now we are ready to push the code to the centralize folder

git push -u origin main

after using this command our local repository is also uploaded in our central repository.

The above image shows that it is successfully uploaded and now anyone can use this by cloning it.

I hope this is helpful.

Things to be followed while committing to the central repository

1 The commit message should be clear and the description should be to the point

2 The message body should contain whether it is a feature / bug-fix / documentation-improvement

3 The message body should contain the task id for ex “Ch-5506” like a task id.

4 Always take a pull from the main branch or release branch.

5 Create branches from the release branch or main branch.

6 Commit your changes more frequently.

This concludes the tutorial.

State management is a fundamental aspect of building modern web applications with React. It involves managing the data that drives component behaviour and appearance dynamically. From simple values to complex objects, a React state reflects the application’s current UI and logic state.

Here are some key points about state management in React:

1 Component State

• React Component can have its own local state.

• The state is mutable and can be updated with the setState method.

• Example

    import React, { useState } from 'react';
  
    function Counter() {
      const [count, setCount] = useState(0);
  
      const increment = () => {
        setCount(count + 1);
      };
  
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      );
    }
  

  This code snippet is a React functional component called Counter. It uses the useState hook from React to manage state. The useState(0) initializes a state variable count with an initial value of 0, and setCount is the function used to update the count state.

  The component renders a <div> containing a <p> element that displays the current value of count, and a <button> element labeled "Increment". When the button is clicked, the increment function is called, which updates the count state by incrementing it by 1. This triggers a re-render of the component with the updated count value displayed.

  2 Lifting the state up

• To share the state between components, you can lift it up to a common ancestor.

• This allows multiple child components to access and modify the same state.

Example

function Parent() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <Child1 message={message} />
      <Child2 setMessage={setMessage} />
    </div>
  );
}

This code snippet defines a React functional component called Parent. Inside the component, it uses the useState hook to create a state variable message initialized with an empty string and a function setMessage to update the message state.

The Parent component returns a <div> element containing two child components: Child1 and Child2. It passes the message state variable as a prop to Child1 and the setMessage function as a prop to Child2. This allows communication between the parent component and its child components by passing data and functions as props.

Why is State management needed?

State management is essential in React for several reasons:

1. Maintaining Component State: React components can have an internal state that determines their behaviour and appearance. State management allows components to store and update their state, triggering re-renders when the state changes.

2. Handling User Input: State management is crucial for handling user interactions like form inputs, button clicks, and other events. By managing state, React components can respond to user input and update the UI accordingly.

3. Managing Data: React applications often need to fetch and display data from APIs or other sources. State management enables components to store and manage this data, ensuring that the UI reflects the latest information.

4. Passing Data Between Components: State management facilitates passing data between components in a React application. By lifting the state up to a common ancestor or using context, components can share and update data effectively.

5. Optimizing Performance: Efficient state management can help optimize performance by minimizing unnecessary re-renders. React's reconciliation process compares the current state with the previous state to determine what needs to be updated in the DOM.

Overall, state management in React is crucial for building interactive, dynamic, and data-driven applications while maintaining a clear and predictable flow of data and updates throughout the component hierarchy.

In the further blogs, we will analyze various tools of state management.