DEV Community: Robiul

🚧 nextjs and strapi CI/CD, Docker, and the Mystery of the Failing API: A Real-World Debugging Story

Robiul — Sun, 04 Jan 2026 08:51:10 +0000

We Learn From Mistakes: A Real-World CI/CD Debugging Story

When you're a developer working with modern stacks like Strapi, Next.js, and Docker, setting up a CI/CD pipeline feels like a milestone. But sometimes, that smooth automation dream turns into a long night of debugging. This is the story of how I chased down a strange API error—and what I learned along the way.

⚙️ The Setup

Our stack:

Strapi backend
Next.js frontend
Dockerized deployment
CI/CD pipeline for auto-deployments
Self-hosted Linux server

Everything ran smoothly on local development, and even on Vercel (for testing the frontend alone). But once deployed on our self-hosted server, the app broke.

🧨 The Error

Next.js was throwing a cryptic error when trying to fetch data from Strapi:

API or validation error: TypeError: fetch failed
    at async s (.next/server/chunks/507.js:1:806)
    at async m (.next/server/app/categories/page.js:1:747) {
  [cause]: [Error [ConnectTimeoutError]: Connect Timeout Error] {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

It didn't make sense. Why would fetch fail only on the deployed version and not on local or Vercel?

🔍 The Investigation

Here's how I tackled it step-by-step:

✅ Step 1: Reproduce Locally

I ran the same Next.js app with Strapi in Docker locally and everything worked fine—even when using Postman or curl to test the API. So, it wasn't a code issue.

🧱 Step 2: Check Docker Networking

Maybe Docker containers couldn't talk to each other? I made sure both services were on the same Docker network and updated API calls to use:

http://strapi:1337

But the error still persisted. 😩

🔎 Step 3: Look Into the Build Artifacts

Next.js stores route logic inside .next/server/app. I inspected .next/server/app/categories/page.js to see if something was off. But everything seemed normal.

⏱️ Step 4: Increase Timeouts and CORS Configs

I suspected timeout issues and CORS misconfigurations. So I:

Increased the fetch timeout in Next.js
Rechecked Strapi's middleware.js for proper CORS headers

Still nothing.

🧪 Step 5: Strip Docker from the Equation

Out of desperation, I ran the entire stack without Docker on the same self-hosted server. And guess what? It worked.

🎯 The Real Culprit: Network Restrictions

This confirmed it: the issue wasn't with the code, or Docker, or even the CI/CD pipeline. It was a network access issue on the host server. Specifically, the server had restrictions that blocked container-to-container communication or DNS resolution for internal Docker service names.

🛠️ The Fix

The solution was simple once I understood the problem:

✅ I configured Strapi with a real domain name, like https://api.myapp.com, and updated the frontend to fetch from that instead of http://strapi:1337.

After that, I redeployed using the same Docker + CI/CD pipeline—and everything worked. 🥳

🔚 Summary

Problem	Solution
`fetch failed` error with timeout on deployed Next.js	Diagnosed as a network-level issue on self-hosted server
Docker service name (`strapi`) didn't resolve	Replaced with real domain name
CI/CD + Docker setup was fine	But host server's networking caused the fetch to fail

📝 Key Takeaways

Docker networking can behave differently across environments. What works locally might not work on production.
Don't overlook your host's firewall, DNS, or networking rules.
Real domain names can often solve connectivity issues, especially across containers and services.
Debugging isn't always about code—sometimes, it's about the infrastructure.

Hope this saves someone else a few hours (or days) of head-scratching!

Let me know if you've hit similar issues—I’d love to hear how you solved them.

Tp link Archer T2U Plus wifi adapter install on linux

Robiul — Sat, 18 Jan 2025 20:19:26 +0000

Installing Tp link Archer T2U Plus adapter RTL8821AU WiFi Driver on Linux

Install Correct Driver

Clone the repository:

git clone https://github.com/morrownr/8821au-20210708.git
cd 8821au-20210708

Install build dependencies (for Ubuntu/Debian):

sudo apt-get install -y dkms bc build-essential git

Run installation script:

sudo ./install-driver.sh

Reboot system:

sudo reboot

Troubleshooting

If WiFi networks aren't showing after reboot, check:

Verify adapter is recognized:

lsusb

Look for "TP-Link" in the output.

Check if interface is up:

iwconfig

If issues persist, additional troubleshooting may be needed.

Data Structures & Algorithm Linked List Day 1

Robiul — Sat, 12 Oct 2024 19:43:00 +0000

Day 1

Basic data structures

We won't just learn about linked lists in the traditional way; we will also explore what the Node and LinkedList classes are, as well as all the operations that can be performed on them.

What is a Linked List?

A linked list is a collection of elements called nodes, where each node contains a data element and a reference (or link) to the next node in the sequence.
A linked list is a linear data structure in which elements are stored in nodes. Each node contains two parts:
Unlike arrays, *linked lists don’t store elements in contiguous memory locations.
* Instead, each node points to the next node, allowing dynamic memory usage and easy insertion or deletion of elements.

key point of Linked List

1. Node Structure: Linked lists consist of nodes, each containing a value and a reference to the next node. Exploring the structure and properties of nodes helps in understanding how linked lists organize and store data.
2. Head and Tail: The first node in a linked list is called the head, while the last node is referred to as the tail. Understanding the characteristics and functionality of the head and tail nodes is crucial for efficient traversal and manipulation of linked lists.

Key Characteristics:

Dynamic size: It can grow or shrink as needed.
Sequential access: Accessing elements requires traversing from the first node (head).

Types of Linked Lists:

There are three basic forms of linked lists
1. Singly linked lists.
2. Doubly linked lists.
3. Circular linked lists.

In This article, We will explore Singly-linked lists.

Singly linked lists.

Each node has a reference to the next node.

Each node contains:
- Data (the value you want to store).
- A next pointer, which points to the next node in the sequence.
The last node’s next pointer is null because there’s no node after it.

Real-Life Analogy: Arrow – Once an arrow is shot, it can only travel forward.
Once the arrow is released, it flies in a straight line without the ability to return.
Similarly, in Singly Linked List, once you move from one node to the next, you cannot go back—you can only continue moving forward.

[Data | Next] -> [Data | Next] -> [Data | Next] -> null

Operations on Singly Linked List

Insertion:
- Insert at the beginning
- Insert at the end
- Insert at a specific position
Deletion:
- Delete from the beginning
- Delete from the end
- Delete a specific node
Traversal
Searching
Length

Insertion:

Insert at the beginning

Let's create a Node class

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

Let’s break down the Node class.

**The Node class represents each individual element in a linked list. Each node contains two properties:

Properties:

- Data: This holds the value stored in the node (such as a number, string, or object).
- Next: This holds a reference (or pointer) to the next node in the linked list. Initially, it's set to null because when a node is created, it's not yet linked to any other node.

Breakdown:

Constructor (constructor(data)):
This is a special method in JavaScript classes that is called when a new instance of the Node class is created.
The data parameter is passed in when creating a new node, and it stores the actual value of the node.
this.next = null; sets the next property to null initially because when a node is created, it's not connected to any other node yet.

Example:

let node1 = new Node(10); // Create a node with the value 10
console.log(node1.data);  // Output: 10
console.log(node1.next);  // Output: null (because it's not linked to any other node yet)

Let's create a SinglyLinkList class

class SinglyLinkedList {
  constructor() {
    this.head = null; // Initially, the list is empty, so the head is null.
    this.size = 0; // The size is initially 0, as there are no nodes in the list.
  }

  // Insert at the beginning
  insertAtBeginning(data) {
    let newNode = new Node(data); // Create a new node with the given data
    newNode.next = this.head; // The new node's next points to the current head
    this.head = newNode; // Update the head to be the new node
    this.size++; // Increment the size of the list
  }
}

The SinglyLinkedList class represents the entire linked list structure. It manages multiple Node objects and provides methods for working with the list, such as inserting, deleting, and traversing nodes and so on.

Properties:

- Head: This is a reference to the first node (or the "head") of the linked list. Initially, it is set to null, meaning the list is empty.
- Size: This keeps track of how many nodes are currently in the linked list. Initially, it’s set to 0 since the list is empty.

Breakdown:

Constructor (constructor()):

this.head = null;: This initializes the linked list with no elements, so the head points to null.
this.size = 0;: The size starts as 0 because there are no nodes in the list.

insertAtBeginning(data): for the sake of simplicity, later on, we will Deep Dive into the insertAtBeginning(data) method
let newNode = new Node(data);: This creates a new node with the value passed in as data.
newNode.next = this.head;: This links the new node to the current head (which could be nullif the list is empty or point to an existing node if the list has elements).
this.head = newNode;: This updates the head of the list to point to the new node, making it the first node in the list.
this.size++;: The size of the linked list is increased by 1 as a new node has been added.

let's Test

let list = new SinglyLinkedList();
list.insertAtBeginning(10); // List becomes: 10
list.insertAtBeginning(20); // List becomes: 20 -> 10
console.log(list.head.data); // Output: 20 (since the head is now the first node with value 20)
console.log(list.size);      // Output: 2 (since there are two nodes in the list)

Linked List deep dive Line by Line.

let's jump into the insertAtBeginning(data) method .

class Node {
  constructor(data) {
    this.data = data;   
    this.next = null;   
  }
}

class SinglyLinkedList {
  constructor() {
    this.head = null;   
    this.size = 0; 
  }

  // Insert a new node at the beginning of the list
  insertAtBeginning(data) {
   given data
    let newNode = new Node(data);


    newNode.next = this.head;


    this.head = newNode;


    this.size++;
  }
}

// Example Usage:
let list = new SinglyLinkedList();
list.insertAtBeginning(10); 
list.insertAtBeginning(20); 

console.log(list);

output example:

SinglyLinkedList {
  head: Node { data: 20, next: Node { data: 10, next: null } },
  size: 2
}

What Each Step Does

Node Class:

this.data: Stores the data for the node.
this.next: Points to the next node in the list (initialized to null because the node is alone at first).

SinglyLinkedList Class:

this.head: Keeps track of the first node in the list (the "head").
this.size: Tracks the number of nodes in the list.

insertAtBeginning():

A new node is created using the Node class, and it stores the data provided.
This new node points to the current head of the list (whatever it may be, even if null).
The new node becomes the head of the list, taking the top position.
The size of the list is increased by 1 each time a new node is added.

What Happens During Execution

When you insert `10`:

A new node is created with data: 10 and next: null (since it's the first node).
This new node becomes the head of the list.
The size becomes 1.

When you insert `20`:

A new node is created with data: 20 and next pointing to the previous node (which has data: 10).
This new node becomes the head of the list, pushing the 10 node down.
The size becomes 2.

Output

The final structure of the list will be:

The head points to the node with data 20, which points to the node with data 10. The node with 10 has next: null, marking the end of the list.
The list size is 2.

Insert at the end

Let's talk about Insert at the end

class Node {
  constructor(data) {
    this.data = data; 
    this.next = null;   
  }
}

class SinglyLinkedList {
  constructor() {
    this.head = null;   
    this.size = 0;

}

  // Insert at the end
  insertAtEnd(data) {
    let newNode = new Node(data);
    if (this.head == null) {
      this.head = newNode; 
    } else {
      let current = this.head;
      while (current.next != null) {
        current = current.next; 
      }
      current.next = newNode; 
    }
    this.size++;
  }

 }
// Example Usage:
let list = new SinglyLinkedList();
list.insertAtEnd(10);
list.insertAtEnd(20);
list.insertAtEnd(30);
console.log(list);

output example

SinglyLinkedList {
  head: Node { data: 10, next: Node { data: 20, next: Node { data: 30, next: null } } },
  size: 3
}

`insertAtEnd()` Method Explanation

A new node is created using the Nodeclass. This node will store the data provided and its nextpointer will initially be null(since it will be the last node in the list)
If the list is empty (head is null), the new node is set as the head of the list. This means the list will only have one node, and this new node will be the first (and only) element in the list.
If the list is not empty, we need to traverse the list to find the last node (the node whose nextis null). We start from the head and move from one node to the next until we reach the last node.
Once we find the last node, we set its nextpointer to the newly created node. This effectively adds the new node to the end of the list.
The size of the list is increased by 1 each time a new node is added at the end.

What Happens During Execution

When You Insert 10 (First Insertion):

A new node is created with data: 10 and next: null (since it’s the only node and hence the last).
Since the list is empty (head is null), this new node becomes the head of the list.
The list size becomes 1.

When You Insert 20 (Second Insertion):

A new node is created with data: 20 and next: null (it will be the new last node).
The list is not empty, so we traverse the list starting from the head to find the last node (which currently holds the data 10).
The next pointer of the last node (node with data: 10) is updated to point to the new node with data: 20.
The list size becomes 2.

When You Insert 30 (Third Insertion):

A new node is created with data: 30 and next: null.
We traverse the list to find the current last node, which is the node with data: 20.
The nextpointer of the last node (node with data: 20) is updated to point to the new node with data: 30.
The list size becomes 3.

Final Structure of the List

After inserting 10, 20, and 30:

The head points to the node with data: 10.
The node with data: 10 points to the node with data: 20.
The node with data: 20 points to the node with data: 30.
The node with data: 30 has next: null, marking it as the last node in the list.
This forms the linked list: 10 -> 20 -> 30 -> null.

Output

The final structure of the list will be:

The head points to the node with data: 10.
The node with data: 10 points to the node with data: 20, and the node with data: 20 points to the node with data: 30.
The node with data: 30 has next: null, indicating the end of the list.
The list size is 3.

Insert at a specific position

Let's talk about Insert at a specific position


class Node {
  constructor(data) {
    this.data = data; 
    this.next = null;   
  }
}


class SinglyLinkedList {

  constructor() {
    this.head = null;
    this.size = 0;

  }
  // Insert at the beginning
  //insertAtBeginning... method 

  // Insert at the end
  //insertAtEnd... method

  // Insert at a specific index
  insertAtIndex(data, index) {
    if (index < 0 || index > this.size) {
      return console.log('Invalid index');
    }

    let newNode = new Node(data);
    if (index === 0) {
      // Insert at the head
      newNode.next = this.head;
      this.head = newNode;
    } else {
      let current = this.head;
      let previous;
      let count = 0;

      // Traverse to the desired index
      while (count < index) {
        previous = current;
        current = current.next;
        count++;
      }
      // Insert the new node between previous and current
      previous.next = newNode;
      newNode.next = current;
    }
    this.size++;
  }

}


// Example Usage:
list.insertAtBeginning(10);
list.insertAtBeginning(20);
list.insertAtBeginning(30);

// Insert at index
list.insertAtIndex(15,1);

`insertAtIndex()` Method Explanation

A new node is created using the Nodeclass with the given data. The nextpointer of the new node is initially set to null.
If no indexis passed (i.e., index === undefined), the method logs an error message: "Please provide the index to a specific position" and returns immediately. This ensures that the method doesn't proceed without a valid index, preventing unintended behavior.
The method checks if the given indexis valid:
If the indexis less than 0 or greater than the current size of the list, it logs an error message ("Invalid index") and exits the method.
If the indexis 0, the new node is inserted at the beginning of the list:
The nextpointer of the new node is set to the current headof the list.
The headis updated to point to the new node, making it the first node in the list.
If the indexis greater than 0, the list is traversed to find the node at the desired index:
The method starts at the headand moves through the list until it reaches the position just before the specified index.
It keeps track of the previousnode and the currentnode during the traversal.
Once the correct position is reached:
The nextpointer of the previousnode is updated to point to the new node.
The nextpointer of the new node is set to the currentnode, placing the new node between the previousand currentnodes.
The size of the list is increased by 1 after the insertion.

What Happens During Execution

Let's say you have an initial list: head -> 10 -> 20 -> 30.
You want to insert the value 15 at index 1.

Index Validation: The method checks if index 1 is valid (which it is, because the size of the list is currently 3).
Node Creation: A new node is created with data: 15 and next: null.
Inserting at Index: Since the index is not 0, the method traverses the list to the desired position:
Starts at the head(node with data 10).
After one iteration, previouspoints to 10, and currentpoints to 20.
Insertion: The new node is inserted between the 10node and the 20node:
The nextpointer of the previousnode (10) is updated to point to the new node (15).
The nextpointer of the new node is updated to point to the currentnode (20).
Size Update: The size of the list is increased by 1.

Final Structure of the List

After inserting 15at index 1 into the list head -> 10 -> 20 -> 30:

The head points to the node with data: 10.
The node with data: 10 points to the node with data: 15.
The node with data: 15 points to the node with data: 20.
The node with data: 20 points to the node with data: 30.
The node with data: 30 has next: null, marking the end of the list.
The linked list will now look like this:
10 -> 15 -> 20 -> 30 -> null

Output

The final structure of the list will be:

The head points to the node withdata: 10.
The node with data: 10 points to the node with data: 15.
The node with data: 15 points to the node with data: 20.
The node with data: 20 points to the node with data: 30.
The node with data: 30 has next: null, indicating the end of the list.
The list size is now 4.

Deletion:

Delete from the beginning

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }

  // Insert at the beginning
  //insertAtBeginning... method 

  // Insert at the end
  //insertAtEnd... method

  // Insert at a specific index
  //insertAtIndex... method

  // Delete the first node
  deleteFirst() {
    if (this.head == null) return null; // If list is empty
    this.head = this.head.next; // Move head to the next node
    this.size--;
  }


}

// Example Usage:
const list = new SinglyLinkedList();

// Insert at the beginning
list.insertAtBeginning(10);
list.insertAtBeginning(20);
list.insertAtBeginning(30);

// Insert at the end
list.insertAtEnd(40);


// Delete operations
list.deleteFirst();

deleteFirst() Method Explanation

Purpose: The deleteFirst() method removes the first node (or "head") from the linked list. It’s a common operation in linked lists for cases where you want to delete the starting element.

Method Steps:

Check if the List is Empty:
The method first checks if this.head is null, meaning the list is empty. If so, it returns nullimmediately since there's nothing to delete.
Move the Head Pointer:
If the list is not empty, it updates the headpointer to point to the next node in the list (this.head.next). This effectively "removes" the first node because headnow points to the second node.
Decrease the Size:
After removing the first node, the sizeproperty of the list is decreased by 1, keeping track of the updated list length.

What Happens During Execution

Let's say we have the following list initially:

head -> 10 -> 20 -> 30 -> 40 -> null

First Deletion (list.deleteFirst()): The headis pointing to 10, which is the first node.

The deleteFirst() method checks that the list is not empty, then updates headto point to 20, the next node in the list.

The node 10is now effectively removed from the list, and the list size decreases by 1.

Current list structure after first deletion:
head -> 20 -> 30 -> 40 -> null

Second Deletion (another list.deleteFirst()):

headis now 20, so the method updates headto 30, removing 20from the list.

The list size decreases by another 1.

Current list structure after second deletion:
head -> 30 -> 40 -> null

Final Structure of the List

If the initial list was 10 -> 20 -> 30 -> 40 -> null, after two deleteFirst() calls, the list structure is:

head -> 30 -> 40 -> null

Output

After calling deleteFirst():

The list no longer contains the first node of the original list.
The headpoints to the new first node after each deletion.
The sizeproperty accurately reflects the new list length.

If any more calls to deleteFirst() are made until the list is empty, head will eventually become null.

Coming soon...

Data Structures & Algorithm Day 0

Robiul — Sat, 05 Oct 2024 19:07:34 +0000

Day 0

Basic data structures

We will see all the code examples in javascript but these concepts are not language-agnostic

Arrays

An array is a collection of elements, typically of the same type, stored in contiguous memory locations.

Array as a List of Books:
Imagine you have a shelf that holds a specific number of books. Each slot on the shelf is like an index in an array, and each book is like the element stored at that index.

Key Characteristics:

Indexing: Each element can be accessed by its index (0-based or 1-based depending on the language).

const fruit  = ['Banana','Apple','Grape', 'Pineapple']

console.log(fruit[0]) //  Banana is accessed 0 index
console.log(fruit[3]) // Pineapple is accessed 3 index

Fixed-size: Once declared, the size of the array cannot change (static arrays).
In languages with static arrays, when you declare an array, you must specify its size at the time of creation. This means that if you declare an array with a size of 5, you can only store 5 elements in it, and the size cannot be changed later. You can't add more elements once the array is full, nor can you shrink it.

However, JavaScript arrays are dynamic by nature, so you don't have this fixed-size limitation in most cases. But to understand fixed-size arrays conceptually, imagine if JavaScript arrays couldn't grow or shrink.

let fixedArray = new Array(3); // Array with a fixed size of 3
fixedArray[0] = 'apple';
fixedArray[1] = 'banana';
fixedArray[2] = 'cherry';

// Now if you try to add another item:
fixedArray[3] = 'date'; // This would throw an error or overwrite an existing element (hypothetically)


console.log(fixedArray) // [ 'apple', 'banana', 'cherry', 'date' ]

Random access: You can access any element directly using its index.

const fruit  = ['Banana','Apple','Grape', 'Pineapple']

console.log(fruit[0]) // index 0 is the Banana 
console.log(fruit[3]) // index 3 is the Pineapple

Pros:

Fast access to elements by index (O(1) time complexity).
Simple to implement.

Cons:

Insertion and deletion are expensive (O(n) time complexity) because shifting elements may be necessary.
Fixed-size (in some languages), making it less flexible.

Github copilot setup on Austronvim

Robiul — Sun, 22 Sep 2024 09:25:14 +0000

I got in trouble while configuring GitHub copilot on Austronvim into windows os.

Follow these instruction to config should be worked

C:\Users\YOUR_USER\AppData\Local\nvim

create a file into plugins/completions.lua

return{
  {
    "github/copilot.vim"
  }
}

close the file and reopen then follow these instructions.

:Copilot setup

:Copilot auth

Now it's ready to use.

next.js 14 server action, API route vs separate backend

Robiul — Wed, 12 Jun 2024 08:54:33 +0000

Next.js API Routes in Next.js 14:

Pros:

Simplicity:
Unified Codebase:
Serverless Architecture:
Performance

Cons:

Limited Flexibility:
Vendor Lock-in:
Scalability Concerns:

In Next.js 14, API routes have been rewritten using React Server Components, which provide a more efficient and streamlined approach to handling server-side rendering (SSR) and server-side operations.
API routes can now leverage the new Server Actions feature, which allows you to write server-side code directly within your React components, making it easier to integrate server-side logic with the frontend.
With Server Actions, you can perform server-side operations like querying databases, interacting with APIs, or processing data, all within the same component file.
The new architecture in Next.js 14 improves performance and reduces the overhead of server-client communication by minimizing the need for client-side JavaScript and allowing for more efficient rendering on the server.
API routes and Server Actions are well-suited for handling lightweight to moderate server-side operations and can leverage the benefits of Next.js's built-in features like static generation, server-side rendering, and middleware.

Separate Backend (Express, Django, Spring, etc.):

Pros:

Flexibility:
Scalability:
Specialized Frameworks:
Security and Compliance:

Cons:

Increased Complexity:
Deployment and Infrastructure:
Latency:

Using a separate backend application built with frameworks like Express, Django, or Spring is still a viable option in Next.js 14, especially for applications with complex server-side requirements or when you need to leverage the full capabilities of a dedicated server-side framework.
A separate backend allows for better separation of concerns, scalability, and flexibility in choosing the appropriate technology stack for the backend.
Complex server-side operations like real-time communication (WebSockets), background jobs, and advanced database operations can be more easily implemented and managed within a dedicated backend application.
With a separate backend, you have more control over server-side caching, load balancing, and horizontal scaling, which may be necessary for highly scalable and resource-intensive applications.
However, using a separate backend introduces additional complexity in setting up and managing two separate applications (frontend and backend), as well as potential challenges in integrating the frontend and backend, such as handling CORS and authentication.

In Next.js 14, the decision between using Next.js API routes with Server Actions or a separate backend largely depends on the complexity of your application's server-side requirements and the expertise of your development team.

If your application has relatively simple to moderate server-side operations and can leverage the benefits of Next.js's built-in features, using Next.js API routes and Server Actions can provide a more streamlined and efficient development experience, with better integration between the frontend and backend.

On the other hand, if your application requires complex server-side logic, advanced server-side features, or if you need to leverage the full capabilities of a dedicated server-side framework, using a separate backend application may be the better choice. This approach allows for better scalability, flexibility, and separation of concerns, but at the cost of increased complexity in setup, deployment, and integration.

It's also worth noting that you can adopt a hybrid approach, where you use Next.js API routes and Server Actions for lightweight operations, while offloading more complex server-side logic to a separate backend application. This allows you to leverage the benefits of both architectures and mitigate their limitations based on your application's specific needs.

Ultimately, the decision should be based on a careful evaluation of your application's requirements, the complexity of your server-side operations, the expertise of your development team, and the scalability and performance demands of your project.

Did Kafka Just Get Easier?

Robiul — Thu, 16 May 2024 06:23:09 +0000

credit goes: Mayank Ahuja [in/curiouslearner/]

'Apache Kafka Without ZooKeeper - Using KRaft' (Give it a read.)👇

𝐒𝐨𝐦𝐞 𝐁𝐚𝐜𝐤𝐠𝐫𝐨𝐮𝐧𝐝 -

◾ Apache Kafka is a distributed streaming platform designed for high-throughput, fault-tolerant data pipelines.
◾ It enables real-time data processing, event-driven architectures and reliable messaging.
◾ Kafka's architecture originally relied on ZooKeeper, an external coordination service.

📌 𝐖𝐡𝐚𝐭 𝐰𝐚𝐬 𝐙𝐨𝐨𝐤𝐞𝐞𝐩𝐞𝐫'𝐬 𝐫𝐨𝐥𝐞?

◾ Cluster Metadata Management ✔

Stored information about brokers, topics, partitions and their configurations.
Maintained cluster membership and facilitated broker discovery.

◾ Controller Functionality ✔

Elected a leader broker (Controller) responsible for managing cluster operations (e.g., partition reassignment, leader election).
Relied heavily on ZooKeeper for metadata updates and coordination.

📌 𝐋𝐞𝐭'𝐬 𝐚𝐥𝐬𝐨 𝐭𝐚𝐥𝐤 𝐚𝐛𝐨𝐮𝐭 𝐬𝐨𝐦𝐞 𝐜𝐡𝐚𝐥𝐥𝐞𝐧𝐠𝐞𝐬.

◾ External Dependency

Required separate deployment and management of ZooKeeper.
Increased operational complexity and potential points of failure.

◾ Scalability Limitations

ZooKeeper could become a bottleneck for large-scale clusters due to metadata management overhead.

◾ Operational Overhead

Maintaining a ZooKeeper ensemble added administrative burdens.

𝐒𝐨 𝐟𝐢𝐧𝐚𝐥𝐥𝐲,

Apache Kafka Raft (KRaft), a consensus protocol introduced in KIP-500 to eliminate Kafka's reliance on ZooKeeper.

** KIP-500 => Kafka Improvement Proposal 500

📌 𝐇𝐨𝐰 𝐢𝐭 𝐰𝐨𝐫𝐤𝐬? (Kafka with KRaft)

◾ With KRaft, Kafka now manages its own metadata through a 'metadata quorum' of brokers.

◾ These brokers utilize the Raft consensus protocol to ensure data consistency and availability, removing the need for ZooKeeper.

◾ Cluster metadata is stored in a dedicated, internal Kafka topic called '__cluster_metadata'.

◾ This topic is replicated across the metadata quorum, ensuring that metadata changes are durable and available even if some brokers fail.

◾ The Kafka Controller, responsible for various cluster management tasks like partition reassignment and leader election, is elected as a leader among the metadata quorum brokers.

◾ Only the leader Controller can modify the metadata. This ensures that metadata changes are serialized and prevents conflicts.

◾ Whenever metadata changes, the leader Controller appends the changes to the internal '__cluster_metadata' topic.

◾ Other brokers in the quorum follow the leader's decisions and replicate metadata changes.

◾ If the current leader fails, a new leader is elected automatically.

𝐖𝐡𝐢𝐜𝐡 𝐦𝐞𝐚𝐧𝐬,

✔ Simplified architecture.
✔ Improved scalability.
✔ Reduced operational overhead.
✔ Enhanced stability and performance.

📌 Support for ZooKeeper was deprecated in Kafka 3.4, encouraging users to migrate to KRaft.

📌 ZooKeeper support is expected to be removed entirely in a future Kafka release.

⭐ Follow https://www.linkedin.com/in/curiouslearner/

Next.js 14 Server Actions and API Routes

Robiul — Mon, 13 May 2024 07:26:44 +0000

In Next.js, there are two main approaches to handle data fetching: Server Actions and API Routes. Both have their advantages and use cases, and the choice depends on your specific requirements and constraints.

Server Actions:

**Server Actions are a new feature introduced in Next.js 13, designed to handle server-side operations and data fetching directly from a React component. They are meant to replace traditional API routes for certain use cases.
Advantages of Server Actions:

Tighter integration with React components: Server Actions are defined within React components, allowing for a more cohesive and organized codebase.
Simplified data fetching: With Server Actions, you can directly import and use server-side logic and utilities within your React components, eliminating the need for separate API routes.
Improved developer experience: Server Actions provide a more streamlined developer experience by removing the need to switch between client and server contexts.

Use cases for Server Actions:

Simple data fetching operations
Form submissions
User authentication and authorization
Handling sensitive data or operations that should not be exposed through public API routes

API Routes:

API Routes are a well-established feature in Next.js that allows you to create server-side API endpoints within your application.
Advantages of API Routes:

Separation of concerns: API Routes separate the server-side logic from the client-side React components, promoting a more modular and maintainable codebase.
Flexibility: API Routes can handle a wide range of use cases, from simple data fetching to complex server-side operations and integrations with third-party services.
Reusability: API Routes can be consumed not only by your Next.js application but also by other clients or services, making them more versatile and reusable.
Scalability: API Routes can be easily scaled and deployed independently from the client-side application, allowing for more efficient resource allocation and scaling strategies.

Use cases for API Routes:

Complex data fetching and manipulation operations
Integrations with external APIs or services
Handling sensitive data or operations that should be isolated from the client-side code
Exposing a public API for third-party clients or services

In general, if you have simple data fetching requirements and operations that are tightly coupled with your React components, Server Actions can be a more convenient and streamlined approach. However, if you have more complex data fetching and server-side operations, or if you need to expose a public API for third-party clients or services, API Routes might be a better choice.
Ultimately, the decision between Server Actions and API Routes depends on your specific use case, the complexity of your data fetching operations, and your team's preferences and familiarity with either approach.

Next.js Failed to compile Deploying to Vercel

Robiul — Sun, 05 May 2024 20:32:27 +0000

If you are getting the errors below while deploying on Vercel.

Error:”can be escaped with",“,",”. react/no-unescaped-entities

If any JSX files have some of the text with “ or ‘. that file linter shows errors.

const Example = () => {
  return (
    <div >
       <p>  Sign up for new product drops, behind-the-scenes 
          content, and monthly "5 Things I'm Digging" emails</p>
      </div>
  )}

export default Example;

Now we can solve this issue with several options:

Bad practice: Remember don’t suppress linter like below.

//eslint.json
{
  "rules": {
    "react/no-unescaped-entities": 0,
  }
}

Good Practice: Escape HTML or {} Embedding Expressions with Template literals wrap in JSX.

List of the Escape HTML Characters.

const Example = () => {
  return (
    <div >
       <p>  Sign up for new product drops, behind-the-scenes 
          content, and monthly {`"5 Things I'm Digging"`} emails</p>
      </div>
  )}
export default Example;

const Example = () => {
  return (
    <div >
       <p>  Sign up for new product drops, behind-the-scenes 
          content, and monthly &quot;5 Things I&apos;m Digging&quot; emails</p>
      </div>
  )}
export default Example;

Warning: Current Server Discovery and Monitoring engine

Robiul — Thu, 23 Jun 2022 20:34:38 +0000

[MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.

Using the Winston to write the MongoDB logger. we have to pass everything which is required for MongoDB.
If we mistake anything it will make an error

If you use your project Winston logger and you did not pass options into the Winston transport that's why you get the error.

Following this.
The error will be gone.

winston.add(new winston.transports.MongoDB({
    db: 'mongodb://localhost:27017/',
    options: {
        useUnifiedTopology: true,
    }
}));

become a Blockchain Developer

Robiul — Fri, 22 Oct 2021 13:53:58 +0000

Credit goes to: SolorMining

Want to become a Crypto/Blockchain Developer? Here is a list of Free Educational Courses with Free Credentials - on Blockchain, Programming, Software Engineering and more.

For those looking to get into becoming a Blockchain and CryptoCurrency Developer, I have put together a list of Free Courses to help you get started along your journey.

We can always use more Developers!

The list of Free material consists of courses from Saylor Academy, IBM, The Linux Foundation, Cisco, Texas A&M, and others. All Free to take, and all offering some sort of Free Certification or Digital Badge upon completion. Not only are these great Free learning resources from known and reputable sources, but they also come with sharable proof that you learned them :)

Computer Science💻

CS101: Introduction to Computer Science I (Saylor Academy)

CS102: Introduction to Computer Science II (Saylor Academy)

CS105: Introduction to Python (Saylor Academy)

CS107: C++ Programming (Saylor Academy)

CS201: Elementary Data Structures (Saylor Academy)

CS202: Discrete Structures (Saylor Academy)

CS301: Computer Architecture (Saylor Academy)

CS302: Software Engineering (Saylor Academy)

AWR178 Secure Software (Texas A&M)

CS401: Operating Systems (Saylor Academy)

CS403: Introduction to Modern Database Systems (Saylor Academy)

Blockchain / CryptoCurrency

Bitcoin for Everybody (Saylor Academy)

Blockchain Essentials (IBM)

DFIN 511: Introduction to Digital Currencies (UNIC) (Starts Dept 27th)

Blockchain Foundation Developer (IBM)

Build an IoT Blockchain Network for a Supply Chain (IBM)

Learn Solidity with Space Doggo (BitDegree)

Solidity Tutorial & Ethereum Blockchain Programming Course (Crypto Zombies)

Open Source Development

Git Tutorial For Beginners: Git Tutorial for Beginners: Master Version Control (BitDegree)

A Beginner’s Guide to Open Source Software Development (Linux Foundation)

Absolute Guide: Linux Tutorial for Beginners (BitDegree)

A Beginner’s Guide to Linux Kernel Development (Linux Foundation)

Open Source Licensing Basics for Software Developers (Linux Foundation)

Fundamentals of Professional Open Source Management (Linux Foundation)

BONUS: Networking & CyberSecurity

AWR173 Information Security Basics (Texas A&M)

Networking Essentials (Cisco NetAcad)

Introduction to Packet Tracer (Cisco NetAcad)

CS402: Computer Communications and Networks (Saylor Academy)

Introduction to IoT (Cisco NetAcad)

Introduction to CyberSecurity (Cisco NetAcad)

CS:406 Information Security (Saylor Academy)

AWR174 Cyber Ethics (Texas A&M)

AWR175 Information Security for Everyone (Texas A&M)

AWR138 Network Assurance (Texas A&M)

AWR139 Digital Forensics Basics (Texas A&M)

CyberSecurity Essentials (Cisco NetAcad)

AWR168 Cyber Law and White Collar Crime (Texas A&M)

AWR169 Cyber Incident Analysis and Response (Texas A&M)

AWR176 Disaster Recovery for Information Systems (Texas A&M)

AWR177 Information Risk Management (Texas A&M)

2ND BONUS: Math

MA001: College Algebra (Saylor Academy)

MA005: Calculus I (Saylor Academy)

MA121: Introduction to Statistics (Saylor Academy)

Mathematical Optimization for Business Problems (IBM)

Please feel free to add additional resources in the comments. I will add them to the main post if they fit the criteria of being free and providing proof of completion.

Happy learning friends :)

Edit: By request, here is a more streamline curriculum from the courses above, if someone is starting from the very beginning and looking to learn as quickly as possible:

Bitcoin for Everybody (Saylor Academy)

Blockchain Essentials (IBM)

CS101: Introduction to Computer Science I (Saylor Academy)

CS102: Introduction to Computer Science II (Saylor Academy)

CS201: Elementary Data Structures (Saylor Academy)

CS202: Discrete Structures (Saylor Academy)

CS302: Software Engineering (Saylor Academy)

AWR178 Secure Software (Texas A&M)

Blockchain Foundation Developer (IBM)

Learn Solidity with Space Doggo (BitDegree)

Solidity Tutorial & Ethereum Blockchain Programming Course (Crypto Zombies)

Git Tutorial For Beginners: Git Tutorial for Beginners: Master Version Control (BitDegree)

A Beginner’s Guide to Open Source Software Development (Linux Foundation)

Absolute Guide: Linux Tutorial for Beginners (BitDegree)

A Beginner’s Guide to Linux Kernel Development (Linux Foundation)

Open Source Licensing Basics for Software Developers (Linux Foundation)

Fundamentals of Professional Open Source Management (Linux Foundation)

Regex is like an egg

Robiul — Sat, 03 Jul 2021 12:03:42 +0000

Hi my all are dev & tech beautiful friends

you're thinking🤔 why I've written the title of regex is like an egg no worries I'll be explaining that

a little bit of introduction of egg 🥚

Both the white and yolk of an egg are rich in nutrients, including proteins, vitamins, and minerals. The yolk also contains cholesterol, fat-soluble vitamins (such as vitamins D and E), and essential fatty acids. Eggs are also an important and versatile ingredient for cooking wait! ✋ wait!

no worries, it's neither a food article nor I'm a food expert

as we know that the egg is very important in our health and the regex is important part of programming language.

my meet with regex

as a beginner, we have a lot of confusion about the programming language different concepts include with regex. personally, I had a little bit scared about the regex. that's why I tried to learn as much as possible. and I figured out the regex is how cool is that.

What Is a Regular Expression?

🗣️w3schools says

A regular expression is a sequence of characters that forms a search pattern.

When you search for data in a text, you can use this search pattern to describe what you are searching for.

A regular expression can be a single character or a more complicated pattern.

Regular expressions can be used to perform all types of text search and text replace operations.

It is used in almost all languages like C#, Java, Javascript, To, Python, so on.

if you want to learn more check out the link below 👇
Regular expressions javascript.info
Regular expressions MDN
Regular expressions w3schools

Regular Expression with Java, javaScript, python

in this article I'm not going to be teaching you the Regular Expression.
we would try to explore the regex with problem-solving also understand how does regex work.
I hope it would be better for us to understand the regex.

below is the Problem Statement

in this problem, we can solve several ways but we would solve it with regex.

let's do solve with javascript

In the above solution, now we are going to explore what's happening here. at first, we've taken the variable names of zero and one after that InstallShield with regex operation.
s is an input parameter into our function and match() is regex method, it takes a parameter likes a regex pattern.

// forward-slash: in the javascript, we can write regex Pratten Through forward-slash also constructor function, it's calling literal /ab+c/ another it's calling constructor new RegExp('ab+c').

0+ 0 is our expected value and + it's calling Quantifiers, The plus sign indicates one or more occurrences of the preceding 0 element.
g flag modifier it means g is a modifier global flag
Note:in the javascript If the regex does not include the g modifier (to perform a global search), the match() method will return only the first match in the string.

The match() method searches a string for a match against a regex, and returns the matches, as an Array object, returns null if no match is found.

we got likes this [000] from zero and one [1111]
as we saw that the match() method returns null if no match is found. that's why we used after ||or operator it helps to convert the null to the empty array [] after parentheses to grouping the expression we used join() method it helps to convert to the string likes this '0000' and '1111'

now we explore return it just returns boolean value because we subtracted with zero and one length inside of math.abs function and meth.abs function return absolute value after that we compared less than or equal 1 or not this’s our solution with regex.

below is the Problem Statement

as we know, we can solve several ways but we would solve with regex.

let's do solve with python

In the above solution. now we are going to explore what's happening here.
in this problem if we want to make any operation with regex we have to import the re module in python other ways we can't do any operation with regex.

whatever, at first we've taken the variables name of decoded after InstallShield with regex method re.findall().
findall(pattern, string, flags=0) method has up to three arguments.
The findall() is probably the single most powerful function in the re module. findall() finds *all* the matches and returns them as a list of strings, with each string representing one match.
note: If no matches are found, an empty list is returned.

then we have used the pattern[a-zA-Z1-9] a-z it means given the ipute a to z any alphabetic smil latter and as same as that A-Z any alphabetic capital letter also 1-9 it means 1 to 9 any number to the match. if we can use flag I we don't need to mention capital and smail latter.
however, we got this ['John', 'Doe', '123'] from decoded as a list now we can easily use with dictionary and we did that.

below is the Problem Statement

as we know that, we can solve several ways but we would solve it with regex

let's do solve with java

above the solution now we're going to explain that what's happening here.
as we see that ParsonlIdNumber class inside of the validate function which returns boolean, also we need just return boolean.
pin is a parameter associated with matches method matches() is building method in java.
however. at first, we have used ^ it means Matches the beginning of a line.
() it means Capturing group: Matches and remembers the match.
\d it means Matches any digit. Equivalent to [0-9]. also, The extra \ in \\d is used to escape the backslash from the string.
{} it means Matches n number repetitions of the previous character or expression.
| it means Matches either "x" or "y". we can relate like a boolean OR. Matches the expression before or after.
$ it means Matches the end of the line.
how did this pattern ^(\\d{4}|\\d{6})$ work.
start with the number 4 or 6 time with ending. that's our result.

end of this article: Keep Learning

That’s the end of this article, but keep learning and practicing.

I've tried to a couple of examples with solved the problem, because if we see some use cases it really helpful for us to understanding any particular concept that's why I solved the problem by exploring how does work regex.

I don't know could I explain properly or not but I tried as much as possible to explained. if I've mistaken anything please share it with me I'll correct it.

I really passionate about sharing my knowledge Through write an article and in the future, I'll try to write another concept article until stay safe.

happy coding✌️

DEV Community: Robiul

🚧 nextjs and strapi CI/CD, Docker, and the Mystery of the Failing API: A Real-World Debugging Story

We Learn From Mistakes: A Real-World CI/CD Debugging Story

⚙️ The Setup

🧨 The Error

🔍 The Investigation

✅ Step 1: Reproduce Locally

🧱 Step 2: Check Docker Networking

🔎 Step 3: Look Into the Build Artifacts

⏱️ Step 4: Increase Timeouts and CORS Configs

🧪 Step 5: Strip Docker from the Equation

🎯 The Real Culprit: Network Restrictions

🛠️ The Fix

🔚 Summary

📝 Key Takeaways

Tp link Archer T2U Plus wifi adapter install on linux

Installing Tp link Archer T2U Plus adapter RTL8821AU WiFi Driver on Linux

Install Correct Driver

Troubleshooting

Data Structures & Algorithm Linked List Day 1

Basic data structures

What is a Linked List?

key point of Linked List

Key Characteristics:

Types of Linked Lists:

Singly linked lists.

Operations on Singly Linked List

Insertion:

Insert at the beginning

Properties:

Breakdown:

Properties:

Breakdown:

Linked List deep dive Line by Line.

What Each Step Does

Node Class:

SinglyLinkedList Class:

insertAtBeginning():

What Happens During Execution

When you insert 10:

When you insert 20:

Output

The final structure of the list will be:

Insert at the end

insertAtEnd() Method Explanation

What Happens During Execution

Final Structure of the List

Output

Insert at a specific position

insertAtIndex() Method Explanation

What Happens During Execution

Final Structure of the List

Output

Deletion:

Delete from the beginning

deleteFirst() Method Explanation

What Happens During Execution

Final Structure of the List

Output

Coming soon...

Data Structures & Algorithm Day 0

Day 0

Basic data structures

Github copilot setup on Austronvim

next.js 14 server action, API route vs separate backend

Next.js API Routes in Next.js 14:

Separate Backend (Express, Django, Spring, etc.):

Did Kafka Just Get Easier?

𝐒𝐨𝐦𝐞 𝐁𝐚𝐜𝐤𝐠𝐫𝐨𝐮𝐧𝐝 -

📌 𝐖𝐡𝐚𝐭 𝐰𝐚𝐬 𝐙𝐨𝐨𝐤𝐞𝐞𝐩𝐞𝐫'𝐬 𝐫𝐨𝐥𝐞?

📌 𝐋𝐞𝐭'𝐬 𝐚𝐥𝐬𝐨 𝐭𝐚𝐥𝐤 𝐚𝐛𝐨𝐮𝐭 𝐬𝐨𝐦𝐞 𝐜𝐡𝐚𝐥𝐥𝐞𝐧𝐠𝐞𝐬.

📌 𝐇𝐨𝐰 𝐢𝐭 𝐰𝐨𝐫𝐤𝐬? (Kafka with KRaft)

𝐖𝐡𝐢𝐜𝐡 𝐦𝐞𝐚𝐧𝐬,

Next.js 14 Server Actions and API Routes

Server Actions:

Use cases for Server Actions:

API Routes:

Use cases for API Routes:

Next.js Failed to compile Deploying to Vercel

Warning: Current Server Discovery and Monitoring engine

When you insert `10`:

When you insert `20`:

`insertAtEnd()` Method Explanation

`insertAtIndex()` Method Explanation