DEV Community: Dedar Alam

Introducing HTTP Tracker Plus: Request Capture form Browser

Dedar Alam — Thu, 08 Jan 2026 12:50:25 +0000

API inspectors and debuggers are essential tools for web application development. Being able to inspect API requests and responses makes debugging much easier and more effective.

I often use Chrome DevTools to check request and response data. I have also been using HTTP Tracker, but one important feature was missing: capturing the response body.Since HTTP Tracker is open source, I spent a long time exploring the codebase and trying to implement this feature, but I was not successful at first.

I finally found a solution by using Chrome Debugger Mode, which makes it possible to capture the response body. While working on this, I also improved the UI to make it clearer and easier to use.

The update includes:
Response body capture for selected requests only
UI improvements for better readability and usage

I plan to publish this version to the Chrome Store and also submit a PR to the original project so others can benefit from it.
I have added a short GIF demo to show how it works.
GitHub repository (check the new branch): https://github.com/devded/http-tracker-plus
Feedback and suggestions are welcome.

How to Host Images with Dropbox

Dedar Alam — Sat, 17 May 2025 09:18:41 +0000

If you’ve ever needed a quick and reliable way to host an image online—for use in HTML, Markdown files, or just sharing directly—Dropbox can help! In this guide, I’ll walk you through how to turn a Dropbox image link into a direct image URL that can be used anywhere online.

📌 Step-by-Step: Hosting Images on Dropbox

1. Upload Your Image

First, go to your Dropbox account and upload the image you want to host. You can drag and drop it into your Dropbox folder or use the upload button.

2. Create a Shareable Link

Hover over the image.
Click the “Share” button.
Then, in the popup, click “Create link” and “Copy link.”

This will give you a link like this:

https://www.dropbox.com/s/abcd1234/your-image.jpg?dl=0

3. Modify the Link for Direct Access

To make the image load directly (instead of going to a Dropbox preview page), you need to change the end of the URL:

Change ?dl=0 to ?raw=1 OR
Replace www.dropbox.com with dl.dropboxusercontent.com

So the final direct link might look like:

https://dl.dropboxusercontent.com/s/abcd1234/your-image.jpg

✅ Use This Link Anywhere!

You can now use this link as the image source in HTML like so:

<img src="https://dl.dropboxusercontent.com/s/abcd1234/your-image.jpg" alt="My Image">

🔧 Bonus: Use a Tool to Convert It Automatically

Not a fan of editing URLs manually? No worries. Try this simple tool:

👉 dropboxlink.vercel.app

Just paste your Dropbox share link, and it will instantly give you the direct image URL!

That’s it! With Dropbox and a tiny tweak, you’ve got yourself a reliable image host. Great for blogging, portfolio sites, or sharing graphics with friends.

SS7 Attacks: Is Your Phone Really Safe?

Dedar Alam — Mon, 30 Sep 2024 16:16:44 +0000

Did you know your phone calls and text messages might be intercepted without your knowledge? The SS7 Attack is a significant cybersecurity threat that takes advantage of vulnerabilities in the global telecom infrastructure.

SS7 (Signaling System No. 7) is the protocol used by mobile networks to route calls and messages across carriers worldwide. It was designed decades ago, long before modern cyber threats, leaving it exposed to hackers and cybercriminals.

🔍 How Does the SS7 Attack Work?

Unauthorized Access: Hackers gain entry into the SS7 network.
Interception: They can intercept your phone calls, SMS messages, and even sensitive two-factor authentication (2FA) codes.
Real-Time Tracking: With just your phone number, hackers can track your location in real-time.
Call Redirection: They can redirect or block calls without you realizing it.

💼 Why Is This Important?

Imagine someone thousands of miles away listening to your private calls, reading your messages, or accessing your financial information by intercepting your 2FA codes. SS7 attacks have been used for everything from espionage to financial fraud.

🛡 How to Protect Yourself

Avoid SMS-based 2FA: Switch to app-based authentication like Google Authenticator or Authy for added security.
Use Encrypted Messaging Apps: For secure communication, use apps with end-to-end encryption like Signal or WhatsApp.
Enhance Privacy Settings: Regularly review and update your phone's privacy settings to minimize exposure.

While telecom companies are working on solutions, this is a reminder that our digital world is not always as secure as it seems. Stay informed, stay vigilant, and protect your data! 💡

🎬 Demo by Veritasium

Exploring Language Models with Gitpod & Ollama

Dedar Alam — Mon, 11 Dec 2023 16:52:48 +0000

Ever fantasized about embarking on an adventurous journey with your very own chat-GPT-style model? Open-source Large Language Models (LLMs) are at your disposal for exploration. In this guide, I'll guide you through setting up a playground using Gitpod and Ollama, turning your coding dreams into an exciting reality!

Setting Things Up:

Create a GitHub Playground:
Start your coding adventure by creating a new repository on GitHub. Consider it your coding playground where you can freely experiment with a variety of cool stuff.

Unlock Gitpod's Magic:
Open this repository in Gitpod by adding gitpod.io# to the beginning of your GitHub repository link. Witness as Gitpod works its magic, setting up a ready-to-use coding space just for your explorations.

Embarking on the Exploration:

Install Ollama:
With Gitpod ready, infuse your coding space with the magic of Ollama by entering this command in the terminal:


curl https://ollama.ai/install.sh | sh

Set the Ollama Stage:
Make your model accessible by typing the following commands in the terminal:

ollama

ollama serve

Choosing Your Adventure Companion:

Navigate to Ollama's library (https://github.com/jmorganca/ollama#model-library) and choose a model. These models are like adventurous chat buddies, capable of understanding and generating language. For this exploration, let's go with the starling-lm model.

ollama run starling-lm

Witness the magic unfold as your new language companion eagerly joins in on the exploration! Feel free to experiment with different prompts, ask intriguing questions, or weave captivating tales. The possibilities are as vast as your imagination.

Simplifying Web Application Middleware with Flowcharts

Dedar Alam — Sat, 17 Jun 2023 15:28:56 +0000

Web application middleware plays a crucial role in enhancing security and enabling various functionalities. Two commonly used middleware components are authentication and Cross-Origin Resource Sharing (CORS) middleware. In this blog post, we will explore how to visualize the flow of these middleware components using flowcharts, providing a clear understanding of the process. We will use the popular Mermaid syntax to create the flowcharts.

Understanding the Flowchart Components:

Start: The starting point of the flowchart.

Nodes: Represent specific steps or actions in the middleware process.

Arrows: Indicate the flow of the process from one step to another.
Decision Points: Represent conditional branches in the flow.

End: The final point of the flowchart.

Step 1: Receiving the Request:
At the start of the flowchart, the web server receives a request from the client.
This step serves as the entry point for the middleware process.

Step 2: Applying Authentication Middleware:

The received request is passed through the authentication middleware.
The authentication middleware validates the user's credentials and determines if the request is authenticated.
If the request is authenticated, the flow continues to the next step. Otherwise, an error response may be sent back to the client.
Step 3: Applying CORS Middleware:

After authentication, the request proceeds to the CORS middleware component.
The CORS middleware checks the request headers for CORS-related information.
Based on the CORS headers, the middleware determines whether the request is valid or not.

Step 4: Checking CORS Headers:

If the CORS headers are valid, the flow proceeds to respond with the requested resource.
However, if the CORS headers are invalid, an error response indicating a CORS issue is sent back to the client.

Step 5: Handling Error (Optional):

If an error occurs during the middleware process, such as a CORS error, an error-handling step is triggered.
The error-handling step determines whether to report the error or handle it internally.
If the error is reported, the client can send an error report to the server.
The server responds with an error handling response, which may provide additional information or guidance.

Step 6: Finalizing the Process:

After error handling or responding with the requested resource, the flow reaches its end.
The middleware process is completed, and the server can proceed with further actions, if necessary.

How ChatGPT Work

Dedar Alam — Sun, 26 Feb 2023 17:16:59 +0000

As an AI language model, ChatGPT work by processing and analyzing vast amounts of text data using machine learning algorithms to understand natural language and generate responses to user inputs.

Here's a brief overview of how it work:

Training Data: It was trained on a large corpus of text data, such as books, articles, and web pages. The training data was pre-processed to remove noise, such as HTML tags, punctuation, and stopwords.

Language Model Architecture: It based on a transformer architecture, which is a type of deep neural network designed for natural language processing. The transformer architecture uses a sequence-to-sequence approach that is particularly effective for tasks such as machine translation and text generation.

Tokenization: When you send a message, it first tokenize it into a sequence of tokens or subwords. This process breaks down the text into smaller units that are easier for the model to process.

Encoding: The tokenized input is then passed through an encoder, which generates a sequence of contextualized embeddings that capture the meaning and context of each token.

Decoding: The contextualized embeddings are then passed through a decoder, which generates a response based on the input and the knowledge stored in the model.

Post-Processing: The generated response is then post-processed to remove any noise or redundant information, such as repeating phrases or meaningless filler words.

Response Delivery: The final response is delivered to the user in natural language form.

It's important to note that ChatGPT responses are only as good as the data it was trained on, so there may be instances where it don't understand or correctly respond to your input. Nonetheless, it'll do it best to provide helpful and informative responses to your questions!

This blog is written with the help of ChatGPT 🫰

Git Cherry Pick

Dedar Alam — Mon, 30 Jan 2023 18:53:17 +0000

git cherry-pick

Check out the branch you want to apply the changes to: git checkout
Use git log to find the commit hash of the change you want to apply
Run git cherry-pick to apply the change to your current branch

For example:

$ git checkout my-feature-branch
$ git log
commit ca82a6dff817ec66f44342007202690a93763949
Author: John Doe <johndoe@example.com>
Date:   Mon Mar 5 15:14:15 2021 -0800

Add new feature X

$ git cherry-pick ca82a6dff817ec66f44342007202690a93763949

This will apply the changes from the specified commit to the current branch. If there are any conflicts, Git will prompt you to resolve them before committing the cherry-picked changes.

How to revert git commit easily

Dedar Alam — Fri, 16 Sep 2022 19:48:03 +0000

First check the git log by running the command git log --oneline

Here you can see last six commit of this git repository.

add hello file this commit for add the hello file
and after this commit last five commit i add five line

Now i want to revent the line 5 commit.
I add this line on 1009bb3 add line 5 commit.
here
1009bb3 - commit hash
add line 5 - commit message

so next step is run revert command git revert --no-commit <commit hash>
here our revert command is git revert --no-commit 1009bb3

After run the revert commit, line 6 is gone. now i have to commit the revert commit changes

here commit all the changes after run revert commit

now time to check git log. now here one new commit add Revert "add line 5"

Reference Source

Commit case-sensitive only filename changes in Git

Dedar Alam — Thu, 28 Oct 2021 16:53:54 +0000

Suppose you have a folder name Dashboard you changed it to dashboard default configuration git doesn't recognize that change. Same things happens to files.

For that need to clean the cache, after struggle few hours I found a simple workable solution.

Here it is

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push

source Issue

Set up .env in react project tips

Dedar Alam — Sun, 24 Oct 2021 18:54:47 +0000

Found this tips while i'm fetching issue set up .env variable in react project

The .env file should be in the root for you application folder. That is one level above your src folder, the same place where you have your package.json
The variable should be prefixed with REACT_APP_ You need to restart the server to reflect the changes in your code.
You should access the variable in your code like this process.env.REACT_APP_SOME_VARIABLE
No need to wrap your variable value in single or double quotes.
Do not put semicolon ; or comma , at the end of each line.

Source One
Source Two

Commit case-sensitive only filename changes in Git

Dedar Alam — Tue, 12 Oct 2021 19:44:24 +0000

Suppose you have a folder name Dashboard you changed it to dashboard default configuration git doesn't recognize that change. Same things happens to files.

For that need to clean the cache, after struggle few hours I found a simple workable solution.

Here it is

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push

source

How to clear port 8080 in windows

Dedar Alam — Sat, 24 Jul 2021 21:56:28 +0000

Step 1:

Open up cmd.exe (note: you may need to run it as an administrator, but this isn't always necessary), then run the below command:

netstat -ano | findstr <Port Number>

(Replace with the port number you want, but keep the colon)

The area circled in red shows the PID (process identifier). Locate the PID of the process that's using the port you want.

Step 2:

Next, run the following command:

taskkill /F /PID <Process Id>

Example

STEP - 1

netstat -ano | findstr 8080

TCP  0.0.0.0:18080    0.0.0.0:0     LISTENING    19788
TCP  [::]:18080       [::]:0        LISTENING    19788

STEP - 2

taskkill /F /PID 19788

SUCCESS: The process with PID 19788 has been terminated.

Source