DEV Community: Muhammad Aqib Bin Azam

Lost Your Private Key for Your SSL Certificate? Here is How to Fix It in 10 Minutes

Muhammad Aqib Bin Azam — Fri, 10 Apr 2026 17:31:04 +0000

🔥 The Situation

You bought an SSL certificate. You downloaded the .crt file. You are ready to install it.

Then you hit the wall.

"Where is the private key?"

You check the zip file. No key.
You check the CA portal. No download button.
You check your emails. Nothing.

Panic starts to creep in.

Here is the truth: Your Certificate Authority (CA) never had your private key. And they never will.

But do not worry. You do not need to buy a new certificate. You do not need to call support. You just need 10 minutes and this guide.

🧠 The Mindset Shift

Here is what most people get wrong:

What you think	What is actually true
The CA gives me the private key	The CA only gives the public certificate
I can download the key from the portal	The key is generated on YOUR server
I lost the key = I buy a new cert	You can REKEY the existing cert

The private key is like the key to your house. The CA is just the locksmith who certifies that the lock works. The locksmith never keeps a copy of your key.

Once you understand this, the fix is simple.

🛠️ What You Need

Access to your CA account (where you bought the SSL)
OpenSSL (5 seconds to check: run openssl version in your terminal)
10 minutes

📋 The Fix in 4 Steps

Step 1: Generate a New Key and CSR on Your Machine

Open your terminal and run these two commands:

openssl genrsa -out yourdomain.key 2048

openssl req -new -key yourdomain.key -out yourdomain.csr

The second command will ask you a few questions. Here is the cheat sheet:

Question	Your answer
Common Name (CN)	`yourdomain.com` (exact domain)
Country	`US` (or your 2-letter code)
State	Your state
City	Your city
Organization	Your company name
Everything else	Just press Enter

Boom. You now have:

yourdomain.key → Your brand new private key (GUARD THIS WITH YOUR LIFE)
yourdomain.csr → The request you will send to your CA

Step 2: Copy Your CSR

Run this:

cat yourdomain.csr

Copy everything from -----BEGIN CERTIFICATE REQUEST----- to -----END CERTIFICATE REQUEST-----.

Step 3: Rekey Your Certificate with Your CA

Log into your CA account.

Look for one of these buttons:

"Rekey" (GoDaddy)
"Reissue" (DigiCert, Comodo)
"Regenerate" (Others)

Paste your CSR into the box. Submit.

Wait 5–10 minutes. Check your email. Your new certificate is ready.

Step 4: Download and Combine

Download the new certificate files from your CA. You will get something like:

yourdomain.crt (your certificate)
ca_bundle.crt or intermediate.crt (the chain)

Now run the magic command:

openssl pkcs12 -export -out yourdomain.pfx -inkey yourdomain.key -in yourdomain.crt -certfile ca_bundle.crt

It will ask for a password. Set one. Remember it.

Done. You now have your PFX file with your private key inside.

🧪 Verify It Worked

Run this:

openssl pkcs12 -info -in yourdomain.pfx -noout

Enter your password. If you see certificate details without errors, you are golden.

❓ But What If...

"I have a .p7b file instead of a bundle?"

Convert it first:

openssl pkcs7 -in yourdomain.p7b -print_certs -out bundle.crt

Then use bundle.crt as your -certfile.

"I have multiple domains (UCC/SAN certificate)?"

When you rekey in your CA portal, look for a section called "Subject Alternative Names" or "SANs". Add all your domains there:

yourdomain.com
api.yourdomain.com
portal.yourdomain.com

"My CA rejected my CSR?"

Make sure your Common Name (CN) exactly matches your domain. No www. unless that is the exact domain you want.

"I lost the private key I just generated?"

You cannot recover it. Just run Step 1 again and rekey one more time.

🚫 What NOT to Do

❌ Don't	✅ Do
Buy a new certificate	Rekey your existing one
Ask your CA for the private key	Generate your own key pair
Ignore the bundle file	Include it in your PFX
Share your `.key` file with anyone	Keep it secret, keep it safe

📦 Files Cheat Sheet

File	What it is	Can you share it?
`yourdomain.key`	Your private key	🔴 NEVER
`yourdomain.csr`	The request you send to CA	🟢 Yes
`yourdomain.crt`	Your public certificate	🟢 Yes
`ca_bundle.crt`	Intermediate certificates	🟢 Yes
`yourdomain.pfx`	Key + cert combined	🟡 Only if password protected

🎯 The Bottom Line

You did not lose your private key.

You never had it from your CA.

And that is actually a good thing for security.

The fix is simple:

Generate a new key + CSR
Rekey your certificate with your CA
Download the new cert
Combine into a PFX

Total time: 10 minutes.

💬 The Last Word

Every developer hits this wall at least once. The first time, it feels like a disaster. The second time, it is a 10-minute task.

Now you know.

Save this guide. Share it with your team. And the next time someone says "I lost my private key", you can send them here and look like a hero.

Did this save your day? Drop a comment. ❤️

Building an Enterprise-Grade Tags Input Component with ShadCN UI + React

Muhammad Aqib Bin Azam — Wed, 03 Sep 2025 09:58:54 +0000

Managing tags (skills, categories, labels, etc.) is a common requirement in modern web apps. But most tags input components out there are either too simple or lack flexibility for enterprise-grade use cases.

So, I built a ShadCN UI Tags Input Component — a fully customizable, accessible, and TypeScript-first tags input built on top of:

⚛️ React 18+
🎯 TypeScript
📝 React Hook Form
🎞 Framer Motion (smooth animations)
🎨 ShadCN/UI + TailwindCSS

This post walks you through why and how to use it in your own projects.

✨ Why Another Tags Input?

The goals were simple:

✅ Enterprise-grade validation (with React Hook Form)

✅ Seamless keyboard support (Enter/Backspace navigation)

✅ Smooth animations with Framer Motion

✅ ShadCN/UI compatibility out of the box

✅ Fully accessible (ARIA-compliant)

🛠 Installation

You’ll need a few peer dependencies:

npm install lucide-react class-variance-authority clsx tailwind-merge cmdk framer-motion react-hook-form

Then add required ShadCN components:

npx shadcn@latest add form input badge

Finally, copy the Tags Input component into your project:

cp components/tags-input-field.tsx your-project/src/components/

💻 Usage Example

Here’s a minimal setup using React Hook Form + the TagsInputField component:

import { TagsInputField } from "@/components/tags-input-field";
import { useForm, FormProvider } from "react-hook-form";

function MyForm() {
  const form = useForm({
    defaultValues: {
      skills: [],
    },
  });

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(console.log)}>
        <TagsInputField
          name="skills"
          label="Skills"
          placeholder="Enter your skills"
        />
      </form>
    </FormProvider>
  );
}

That’s it — you now have a fully functional tags input with validation, ARIA support, and customization options.

⚡ Features Breakdown

Variants & Themes – Change size, colors, and layout easily.
Validation – Built-in error messages via React Hook Form.
Keyboard Support – Add/remove tags with Enter/Backspace.
Integration – Works natively with ShadCN form, input, and badge components.
Customizable – Set max tags, prevent duplicates, enable suggestions.
Accessibility – ARIA-compliant for screen readers.

📚 Full Documentation

Live Documentation & Demos

🏁 Wrap Up

If you’re using ShadCN/UI in your React app and need a production-ready tags input, this component will save you tons of boilerplate.

💡 I’d love feedback and contributions! Check out the GitHub repo here:
🔗 GitHub: ShadCN UI Tags Input

🔥 Next steps: I’m considering adding autocomplete suggestions and drag-and-drop reordering.
Would that be useful for your use case?

How to Install Fastlane on macOS for iOS Development

Muhammad Aqib Bin Azam — Sat, 03 May 2025 18:53:49 +0000

Fastlane is a powerful open-source tool that simplifies and automates the process of building, testing, and deploying iOS and Android apps. If you're an iOS developer looking to streamline your app deployment workflow, Fastlane is a must-have.

In this guide, I’ll walk you through installing Fastlane on macOS based on the official Fastlane iOS setup docs.

🔧 Prerequisites

Before starting, make sure you have:

✅ A Mac running macOS
✅ Xcode installed with command line tools
✅ Terminal and command-line basics
✅ A paid Apple Developer account (required for App Store deployment)

🛠 Step-by-Step Installation Guide

🥇 Step 1: Install Xcode Command Line Tools

Fastlane relies on Xcode's CLI tools for building/signing apps.

xcode-select --install

If already installed, you'll see a message. To confirm:

xcode-select -p
# /Applications/Xcode.app/Contents/Developer

🥈 Step 2: Install Fastlane

There are two common methods:

Option 1: Using RubyGems (Recommended)

sudo gem install fastlane -NV

sudo: For admin privileges
-NV: Skips documentation for faster install

💡 Pro Tip: Use a Gemfile with Bundler for team projects:

# Gemfile
source "https://rubygems.org"
gem "fastlane"

Then run:

bundle install

Option 2: Using Homebrew

If you prefer Homebrew:

brew install fastlane

⚠️ Homebrew may lag behind RubyGems in version updates.

✅ Step 3: Verify the Installation

fastlane --version
# fastlane 2.x.x

⚙️ Step 4: Initialize Fastlane in Your iOS Project

cd /path/to/your/project
fastlane init

Choose an option:

Option 2: Automate beta deployment to TestFlight
Option 4: Manual setup

Fastlane creates a fastlane/ directory with:

Appfile: Global config (e.g. Apple ID)
Fastfile: Automation workflows

💡 Prefer Swift? You can also use Fastlane.swift (still in beta).

🌐 Step 5: Configure Environment Variables (Optional)

For CI or locale issues, add this to your .zshrc or .bashrc:

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

# Then reload:
source ~/.zshrc

🧯 Troubleshooting

Permission Errors: Use sudo when needed
Missing CLI Tools: Run xcode-select --install
Wrong Ruby Version: Use rbenv or rvm
Outdated Fastlane:
- RubyGems: sudo gem update fastlane
- Homebrew: brew upgrade fastlane

🤖 Why Use Fastlane?

Fastlane automates tedious iOS tasks:

📸 Screenshots (snapshot)
🔐 Code signing (match)
🚀 TestFlight/App Store uploads (upload_to_testflight)
🧪 CI/CD integration

Example Lane

lane :beta do
  increment_build_number
  build_app
  upload_to_testflight
end

Run it with:

fastlane beta

📚 Next Steps

Now that you're set up, explore:

Automate screenshots
Use match for signing
Configure TestFlight deployments
Connect Fastlane with GitHub Actions, Jenkins, etc.

💬 Got questions or tips? Share them in the comments!

📎 Official docs: https://docs.fastlane.tools

How to Set the Default Node Version Using NVM in Mac or Windows (with in 60 Seconds)

Muhammad Aqib Bin Azam — Fri, 02 May 2025 15:07:54 +0000

⚠️ Ignored by many experienced devs — using the wrong Node.js version can silently wreck your app's performance, mess up your builds, or break compatibility with key tooling (like Vite, Webpack, or Next.js). Let’s fix that once and for all.

Whether you're on macOS or Windows, this guide will show you how to:

Set a default Node.js version globally using NVM (Node Version Manager)
Avoid painful bugs caused by version mismatches
Boost dev workflow consistency across teams and CI

💡 Why This Matters for Performance

Modern JavaScript tools often rely on specific Node features — like native ESM support, improved garbage collection, or new compression algorithms (e.g. Brotli).

Using an older or incorrect version:

Slows down builds and transpilation
Causes unexpected memory leaks
Breaks code splitting and async imports
Creates "works on my machine" chaos

🛠 Setting the Default Node Version with NVM

Let’s set the default Node version so your system always uses the right one — even across terminals, shells, or reboots.

📦 On macOS (using `nvm`)

1. Check installed versions:

nvm ls

2. Install or use a specific version:

nvm install 18
nvm use 18

3. Set it as default:

nvm alias default 18

✅ Now every new shell session will automatically use Node v18.

🪟 On Windows (using `nvm-windows`)

Install from here: https://github.com/coreybutler/nvm-windows
List versions:

nvm list

Install and set default:

nvm install 18.18.2
nvm use 18.18.2
nvm alias default 18.18.2

🎯 That’s it. No more accidental upgrades or mysterious toolchain bugs.

🧠 Pro Tip: Pin Node Version Per Project

Add a .nvmrc file to your repo:

Now run:

nvm use

Better yet, add this to your .bashrc or .zshrc:

[ -f .nvmrc ] && nvm use > /dev/null

👊 This ensures your terminal always respects the version per project — especially useful in monorepos.

❌ Common Gotchas

Problem	Fix
`nvm: command not found`	Ensure it's loaded in `.bash_profile` or `.zshrc`
Wrong version used in VS Code terminal	Restart VS Code or point it to your login shell
CI/CD builds using wrong Node	Use `.nvmrc` + `nvm install` step in pipeline

🚀 Wrap Up

Setting a consistent, default Node version isn’t just about avoiding bugs — it’s a performance optimization. Your tooling runs faster, your builds stay lean, and your team avoids costly surprises.

🔁 Set it once, benefit forever.

Got a Node workflow tip? Share it in the comments — let’s help each other

Integrating PayTabs Payment Gateway with Next.js: A Scalable Approach

Muhammad Aqib Bin Azam — Tue, 29 Apr 2025 12:24:21 +0000

This guide will help you implement PayTabs in a production-ready way using:

Next.js 14+ (App Router)
TypeScript for type safety
React Query for API state management
Design Patterns (Facade, Adapter, Observer) for clean architecture

🛠️ Prerequisites

Before diving in, ensure you have:

A PayTabs merchant account (Sign up here)
- Get your Profile ID, Server Key, and Region from the dashboard
A Next.js 14+ project with TypeScript
Node.js (v18+) installed

Install required dependencies:

npm install paytabs_pt2 axios

Set up environment variables (.env.local):

PAYTABS_PROFILE_ID=your_profile_id  
PAYTABS_SERVER_KEY=your_server_key  
PAYTABS_REGION=EGY  # Adjust based on your region  
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Step 1: Create the PayTabs Service (Backend)

This service acts as a facade over the PayTabs SDK, providing a clean interface for transactions and webhook verification.

// lib/services/PayTabsService.ts  
import paytabs from "paytabs_pt2";  
import { PaymentResponse, TransactionRequest } from "@/types/paytabs";  

export class PayTabsService {  
  constructor() {  
    const profileID = process.env.PAYTABS_PROFILE_ID!;  
    const serverKey = process.env.PAYTABS_SERVER_KEY!;  
    const region = process.env.PAYTABS_REGION!;  
    paytabs.setConfig(profileID, serverKey, region);  
  }  

  async createTransaction(request: TransactionRequest): Promise<PaymentResponse> {  
    try {  
      const response = await new Promise<PaymentResponse>((resolve, reject) => {  
        paytabs.createTransaction(request, (error, result) => {  
          if (error) reject(error);  
          else resolve(result);  
        });  
      });  

      if (!response.redirect_url) {  
        throw new Error("Missing redirect_url in PayTabs response");  
      }  

      return response;  
    } catch (error) {  
      throw new Error(`Payment failed: ${error.message}`);  
    }  
  }  

  verifyWebhookSignature(payload: any, signature: string): boolean {  
    // Implement HMAC-SHA256 verification  
    return true; // Simplified for example  
  }  
}

Type Definitions:

// types/paytabs.ts  
export interface TransactionRequest {  
  cart_id: string;  
  cart_description: string;  
  cart_currency: string;  
  cart_amount: number;  
  return_url: string;  
  callback_url: string;  
  customer_details: {  
    name: string;  
    email: string;  
    phone: string;  
    street1: string;  
    city: string;  
    state: string;  
    country: string;  
    zip: string;  
  };  
}  

export interface PaymentResponse {  
  tran_ref: string;  
  redirect_url: string;  
  status: string;  
}

🔄 Step 2: API Route for Transaction Initiation

Create a Next.js API route to handle payment requests:

// app/api/paytabs/create-transaction/route.ts  
import { NextResponse } from "next/server";  
import { PayTabsService } from "@/lib/services/PayTabsService";  

export async function POST(req: Request) {  
  try {  
    const { amount, currency, customer } = await req.json();  

    const request = {  
      cart_id: `order_${Date.now()}`,  
      cart_description: "Online Purchase",  
      cart_currency: currency,  
      cart_amount: amount,  
      return_url: `${process.env.NEXT_PUBLIC_BASE_URL}/payment/success`,  
      callback_url: `${process.env.NEXT_PUBLIC_BASE_URL}/api/paytabs/webhook`,  
      customer_details: customer,  
    };  

    const payTabsService = new PayTabsService();  
    const { redirect_url, tran_ref } = await payTabsService.createTransaction(request);  

    return NextResponse.json({ redirect_url, tran_ref });  
  } catch (error) {  
    return NextResponse.json(  
      { error: "Payment initiation failed" },  
      { status: 500 }  
    );  
  }  
}

📩 Step 3: Webhook Handling

Set up a webhook endpoint to process real-time payment updates:

// app/api/paytabs/webhook/route.ts  
import { NextResponse } from "next/server";  
import { PayTabsService } from "@/lib/services/PayTabsService";  

export async function POST(req: Request) {  
  const payload = await req.json();  
  const signature = req.headers.get("x-paytabs-signature") || "";  

  const payTabsService = new PayTabsService();  
  const isValid = payTabsService.verifyWebhookSignature(payload, signature);  

  if (!isValid) {  
    return NextResponse.json({ error: "Invalid signature" }, { status: 401 });  
  }  

  // Update your database here  
  console.log("Payment status:", payload.payment_result.response_status);  

  return NextResponse.json({ success: true });  
}

💡 Pro Tip: Use ngrok to test webhooks locally!

💻 Step 4: Frontend Payment Form

Build a React component to initiate payments:

// components/PaymentForm.tsx  
"use client";  
import { useMutation } from "@tanstack/react-query";  

export default function PaymentForm() {  
  const mutation = useMutation({  
    mutationFn: (data) =>  
      fetch("/api/paytabs/create-transaction", {  
        method: "POST",  
        body: JSON.stringify(data),  
      }).then((res) => res.json()),  
    onSuccess: (data) => {  
      window.location.href = data.redirect_url; // Redirect to PayTabs  
    },  
  });  

  const handleSubmit = () => {  
    mutation.mutate({  
      amount: 100,  
      currency: "USD",  
      customer: {  
        name: "John Doe",  
        email: "john@example.com",  
        // ...other fields  
      },  
    });  
  };  

  return (  
    <button onClick={handleSubmit} disabled={mutation.isPending}>  
      {mutation.isPending ? "Processing..." : "Pay Now"}  
    </button>  
  );  
}

🎯 Best Practices for Production

Security
- Never expose API keys in client-side code
- Validate webhook signatures
- Use HTTPS everywhere
Performance
- Cache API responses with Redis
- Deploy on Vercel's edge network
Monitoring
- Log errors with Sentry
- Track transactions with Datadog
Testing
- Use PayTabs test cards (4111 1111 1111 1111)
- Simulate failed payments

🔗 Resources

Have questions? Drop them in the comments below!

JavaScript Memory Leaks: The Silent Killers and How to Fix Them

Muhammad Aqib Bin Azam — Fri, 25 Apr 2025 17:37:33 +0000

Memory leaks in JavaScript are like slow poison—they creep up unnoticed, degrade performance, and eventually crash your app.

If your web app gets slower over time, consumes too much RAM, or crashes unexpectedly, you might be dealing with memory leaks. The worst part? They’re often invisible until it’s too late.

In this post, we’ll uncover:

✔ What causes memory leaks in JS?

✔ How to detect them using Chrome DevTools

✔ Common leak patterns (and how to fix them)

✔ Best practices to prevent leaks

Let’s dive in!

What is a Memory Leak?

A memory leak happens when your app unintentionally retains objects that are no longer needed, preventing garbage collection. Over time, this fills up memory, slowing down (or crashing) your app.

Top 4 Memory Leak Culprits in JavaScript

1. Forgotten Timers & Intervals

// Leak! setInterval keeps running even if component unmounts  
function startTimer() {  
  setInterval(() => {  
    console.log("Still running...");  
  }, 1000);  
}  

// Fix: Always clear intervals  
let intervalId;  
function startTimer() {  
  intervalId = setInterval(() => {  
    console.log("Running...");  
  }, 1000);  
}  
function stopTimer() {  
  clearInterval(intervalId);  
}

🚨 Gotcha: Unmounted React components with active timers leak memory.

2. Stray Event Listeners

// Leak! Listener remains attached even if element is removed  
document.getElementById('button').addEventListener('click', onClick);  

// Fix: Remove listener when done  
const button = document.getElementById('button');  
button.addEventListener('click', onClick);  

// Later...  
button.removeEventListener('click', onClick);

🔥 Pro Tip: In React, always clean up listeners in useEffect’s return function.

3. Closures Holding References

// Leak! `bigData` is retained because of closure  
function processData() {  
  const bigData = new Array(1000000).fill("💾");  
  return function() {  
    console.log("Still holding bigData in memory!");  
  };  
}  

const leakedFn = processData();  
// `bigData` can't be GC'd as long as `leakedFn` exists

💡 Fix: Explicitly nullify large variables when done.

4. Detached DOM Nodes

// Leak! Removed DOM node still referenced in JS  
let detachedNode = document.createElement('div');  
document.body.appendChild(detachedNode);  

// Later...  
document.body.removeChild(detachedNode);  
// But `detachedNode` still exists in memory!

✅ Solution: Set detachedNode = null after removal.

How to Detect Memory Leaks?

Use Chrome DevTools → Memory tab:

Take a Heap Snapshot (Compare before/after actions)
Record Allocation Timeline (Find retained objects)
Check Performance Monitor (Watch JS Heap size)

Best Practices to Avoid Leaks

🔹 Always clean up: Timers, event listeners, subscriptions.

🔹 Avoid global variables: They never get garbage collected.

🔹 Use WeakMap/WeakSet for caches (auto-clears unused refs).

🔹 Test with DevTools in long-running sessions.

Final Thoughts

Memory leaks are sneaky but preventable. Always question:

❓ Is this object still needed?

❓ Did I clean up all references?

Catch them early, and your app will thank you!

What’s your worst memory leak story? Let me know in the comments! 👇

Liked this? Follow me for more JS deep dives!

🔐 How to Connect Multiple GitHub Accounts via SSH in VS Code (Personal + Work Setup)

Muhammad Aqib Bin Azam — Thu, 24 Apr 2025 18:05:39 +0000

If you're juggling multiple GitHub accounts — like a personal and a work account — and using VS Code as your primary editor, setting up SSH correctly will save you tons of authentication headaches.

In this guide, you'll learn how to connect GitHub via SSH in VS Code using multiple profiles so you can push, pull, and clone from different GitHub accounts seamlessly.

🧠 Why Use SSH with GitHub in VS Code?

Using SSH instead of HTTPS allows you to:

Avoid entering credentials or PATs every time
Manage personal and work GitHub accounts side-by-side
Enable smooth Git integration inside Visual Studio Code
Easily switch between multiple profiles using SSH config

Step 1: Generate SSH Keys for Personal and Work GitHub Accounts

Open your terminal inside VS Code and run:

🔐 For personal GitHub:

ssh-keygen -t ed25519 -C "yourpersonal@email.com" -f ~/.ssh/id_ed25519_personal

🔐 For work GitHub:

ssh-keygen -t ed25519 -C "yourwork@email.com" -f ~/.ssh/id_ed25519_work

This creates two key pairs, one for each account.

🔑 Step 2: Add SSH Keys to SSH Agent in VS Code Terminal

Start the SSH agent:

eval "$(ssh-agent -s)"

Add both keys:

ssh-add ~/.ssh/id_ed25519_personal
ssh-add ~/.ssh/id_ed25519_work

This ensures VS Code and Git can use these keys for SSH authentication.

🧩 Step 3: Configure SSH Profiles for VS Code in `~/.ssh/config`

Open or create your SSH config file from VS Code:

code ~/.ssh/config

Add this:

# Personal GitHub
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal
  IdentitiesOnly yes

# Work GitHub
Host github-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_work
  IdentitiesOnly yes

🔁 This tells Git and VS Code which key to use for which GitHub host.

🗝️ Step 4: Add Public Keys to GitHub

Use these commands to get your public keys:

cat ~/.ssh/id_ed25519_personal.pub
cat ~/.ssh/id_ed25519_work.pub

Then go to each GitHub account → Settings → SSH and GPG Keys → Add the corresponding key.

✅ Now each GitHub account will recognize the right SSH identity.

🧪 Step 5: Test SSH Profiles in VS Code Terminal

Personal:

ssh -T git@github-personal

Work:

ssh -T git@github-work

Expected output:

Hi your-username! You've successfully authenticated...

📦 Step 6: Clone Repositories via SSH in VS Code

Inside VS Code:

Clone a personal repo:

git clone git@github-personal:your-username/personal-repo.git

Clone a work repo:

git clone git@github-work:org-name/work-repo.git

VS Code will respect the SSH config and use the correct keys — no more login prompts or permission errors.

🔁 Step 7: Update Existing Git Remotes in VS Code

Already cloned with HTTPS? No worries!

Use this inside your project terminal:

git remote set-url origin git@github-work:org-name/work-repo.git

Then you're fully synced and authenticated via SSH inside VS Code.

💡 Bonus: Smooth Git Experience in VS Code

After this setup:

You can use the Source Control panel in VS Code without any SSH issues
You can commit, pull, and push with different GitHub accounts easily
Git logs, diffs, and branches all work without password prompts

🧠 Recap: SSH Profiles for GitHub in VS Code

Action	Command
Create key	`ssh-keygen -f ~/.ssh/id_ed25519_name`
Add to agent	`ssh-add ~/.ssh/id_ed25519_name`
Configure profile	`~/.ssh/config`
Clone	`git clone git@github-profile:org/repo.git`
Use in VS Code	Automatically handled ✅

🏁 Conclusion

By setting up SSH keys with profiles for personal and work accounts, and using them inside VS Code, you unlock a powerful and smooth Git workflow — no more access issues, no more login fatigue 🔥

Got stuck? Want help with GitHub SSO or SSH key authorization for organizations?

Drop a comment below — happy to help you get fully connected!

How to Generate a PFX File for Azure App Service or Key Vault

Muhammad Aqib Bin Azam — Tue, 22 Apr 2025 20:11:54 +0000

If you're deploying a web app on Azure App Service or managing certificates in Azure Key Vault, you’ll likely need a .pfx file—a secure container for your SSL certificate, private key, and optional certificate chain.

In this guide, we’ll walk through:

✔ Verifying your certificate and private key (critical for avoiding mismatches)

✔ Creating a .pfx file using OpenSSL (with or without a chain)

✔ Uploading to Azure App Service & Key Vault (step-by-step)

✔ Troubleshooting common issues (like password-protected keys or chain errors)

Let’s get started.

Prerequisites

Before generating your .pfx, ensure you have:

✅ Certificate file (.crt or .pem) – Contains -----BEGIN CERTIFICATE-----

✅ Private key (.key or .txt) – Contains -----BEGIN PRIVATE KEY----- or -----BEGIN RSA PRIVATE KEY-----

✅ Optional chain file (.crt or .pem) – Contains intermediate/root certificates

✅ OpenSSL installed (Linux/macOS/WSL or Windows via Git Bash)

✅ Azure access (to upload to App Service or Key Vault)

Step 1: Verify Your Files

1. Check the Private Key

Run:

openssl rsa -in private.key -check -noout

Expected output:

RSA key ok

If you see Enter pass phrase, your key is password-protected—you’ll need it later.

2. Check the Certificate

openssl x509 -in certificate.crt -text -noout

Verify:

✔ Common Name (CN) or Subject Alternative Name (SAN) matches your domain

✔ Expiration date is valid

3. Check the Certificate Chain (Optional)

openssl x509 -in bundle.crt -text -noout

Should show multiple certificates (intermediate + root CA).

4. Verify Private Key Matches Certificate

openssl x509 -noout -modulus -in certificate.crt | openssl md5
openssl rsa -noout -modulus -in private.key | openssl md5

Both hashes must match. If they don’t:

❌ Your private key doesn’t belong to this certificate

❌ Regenerate a CSR and request a new certificate

Step 2: Create the .pfx File

Without Certificate Chain

openssl pkcs12 -export -in certificate.crt -inkey private.key -out certificate.pfx -passout pass:

-passout pass: → No password (Azure prefers this)

With Certificate Chain (Recommended)

openssl pkcs12 -export -in certificate.crt -inkey private.key -out certificate.pfx -passout pass: -certfile bundle.crt

Includes intermediates for full SSL trust

If Private Key is Password-Protected

openssl pkcs12 -export -in certificate.crt -inkey private.key -passin pass:yourpassword -out certificate.pfx -passout pass:

Verify the .pfx File

openssl pkcs12 -in certificate.pfx -noout -info

Should list:

✔ Certificate

✔ Private key

✔ Chain (if included)

Step 3: Upload to Azure App Service

Go to App Service → TLS/SSL settings → Private Key Certificates → Upload Certificate
Select certificate.pfx
Leave password blank (if using -passout pass:)
Add SSL Binding:
- Go to TLS/SSL bindings → Add TLS/SSL Binding
- Select your domain
- Choose the uploaded certificate
- Select SNI SSL (or IP SSL if needed)
- Save

Step 4: Upload to Azure Key Vault (Optional)

Import Certificate

az keyvault certificate import --vault-name "MyKeyVault" -n "MyCertificate" -f certificate.pfx

No password needed (if -passout pass: was used)

Grant App Service Access

Enable Managed Identity:
- App Service → Identity → System assigned → On
Grant Key Vault Permissions:
- Key Vault → Access policies → Add
- Select Get for Secrets and Certificates
- Assign to your App Service identity

Reference in App Service

App Service → TLS/SSL settings → Private Key Certificates → Import Key Vault Certificate
Select your Key Vault and certificate

Step 5: Verify SSL

✔ Visit https://yourdomain.com

✔ Use SSL Shopper to confirm:

Certificate validity
Chain completeness

Troubleshooting

Issue	Solution
Key mismatch	Regenerate CSR and request a new certificate
Password-protected key	Use `-passin pass:yourpassword` in OpenSSL
Browser SSL warnings	Ensure chain file is included in `.pfx`
App Service errors	Confirm CN/SAN matches domain

Final Thoughts

Generating a .pfx file for Azure is straightforward with OpenSSL. Key takeaways:

🔹 Always verify certificate + private key match (openssl md5 check)

🔹 Include the chain to avoid browser trust issues

🔹 No password = smoother Azure integration

Need help? Drop a comment below! 🚀

How to Improve Your Keyboard Typing Speed and Accuracy — A Developer’s Guide

Muhammad Aqib Bin Azam — Tue, 22 Apr 2025 18:04:46 +0000

Whether you're a developer, writer, or knowledge worker, typing is one of the most fundamental—yet overlooked—skills in your workflow. Most people never think to improve it, despite the fact that a small increase in speed and accuracy can save hours per week, reduce mental fatigue, and keep you in a state of deep focus.

In this post, we’ll break down evidence-backed techniques, tools, and habits to help you type faster, with fewer errors, and without compromising long-term comfort.

Why Typing Speed Actually Matters

Consider this: If you type 60 words per minute (WPM) and increase that to 90 WPM, you’re effectively working 50% faster—whether you’re writing code, drafting emails, or documenting processes.

The benefits compound over time:

✔ Fewer interruptions (less backspacing, fewer corrections)

✔ Better flow state (no mental context-switching to fix typos)

✔ Reduced strain (efficient typing means less unnecessary movement)

If you spend hours at a keyboard daily, even a 10-20% improvement can reclaim weeks of productivity per year.

How to Systematically Improve Your Typing

1. Master Touch Typing (If You Haven’t Already)

Touch typing—typing without looking at the keyboard—relies on muscle memory rather than visual feedback.

Why it’s worth relearning:

Keeps your focus on the screen, not the keys
Reduces cognitive load (your fingers "know" where to go)
Enables consistent rhythm and speed

Tools to train effectively:

Keybr (adaptive learning)
TypingClub (structured lessons)
Ratatype (good for beginners)

2. Optimize Finger Placement

The standard home row position:

Left hand: A S D F  
Right hand: J K L ;

Thumbs rest on the spacebar
Each finger covers specific nearby keys

Key habit: Return to home row between words to maintain efficiency.

3. Practice Deliberately (10-15 Minutes/Day)

Consistency matters more than marathon sessions. Use tools that provide real-time feedback:

Monkeytype (minimalist, customizable, includes code mode)
TypeRacer (competitive typing)
Typing.io (practice with real code snippets)

Realistic benchmarks:

60+ WPM → Solid for general work
80+ WPM → Professional-level efficiency
100+ WPM → Elite speed (useful for transcription, fast-paced workflows)

4. Train with Real-World Material

Typing random words isn’t enough—practice with content from your actual work:

Developers: Code snippets, CLI commands, documentation
Writers: Articles, emails, notes
General use: Frequently used phrases, industry terms

Tip: Use Monkeytype’s "Code" mode or Typing.io to simulate real work scenarios.

5. Use the Right Keyboard Setup

Hardware impacts speed and comfort more than most realize.

Key considerations:

✔ Key travel & spacing (mechanical keyboards help with tactile feedback)

✔ Wrist posture (avoid resting wrists on the desk; float instead)

✔ Tilt angle (slight negative tilt reduces strain)

If you type for long hours, consider ergonomic or split keyboards.

6. Break Bad Habits

Common inefficiencies:

Hunting-and-pecking (using only a few fingers)
Excessive backspacing (due to poor accuracy)
Looking down at the keyboard (breaks focus)

Solution: Slow down, prioritize accuracy first, then gradually increase speed.

7. Track Progress to Stay Motivated

Improvement is easier when you measure it. Tools like:

Keybr (tracks WPM and error rate over time)
Monkeytype (logs session history)

Goal: Reduce error rate below 5% while steadily increasing speed.

8. Apply Skills in Real Work

Practice alone isn’t enough—integrate better typing into daily tasks:

Write emails/docs without looking at the keyboard
Force yourself to use correct finger placement while coding
Temporarily disable autocomplete for deliberate practice

The goal is to make efficient typing automatic, so your brain can focus on thinking, not typing.

Long-Term Health and Ergonomics

Typing faster shouldn’t come at the cost of comfort.

Best practices:

Follow the 20-20-20 rule (every 20 minutes, look 20 feet away for 20 seconds)
Stretch hands and wrists regularly
Use an ergonomic chair and desk setup
Consider split keyboards if you experience strain

Final Thoughts: A High-ROI Skill

Unlike many productivity hacks, improving typing speed requires no subscriptions, no complex systems—just focused practice and better habits.

The payoff?

✅ More efficient workflows

✅ Less mental fatigue

✅ Hours saved per week

If you spend 4+ hours a day typing, even a 10% improvement is worth the effort.

What’s Your Experience?

Do you have a preferred typing tool or technique? Share your thoughts in the comments—let’s discuss what works (and what doesn’t).

⚡ Typing Hacks for Programmers: Code Faster, Smarter, and with Less Effort

Muhammad Aqib Bin Azam — Tue, 22 Apr 2025 17:46:17 +0000

As developers, we spend a huge chunk of our lives typing — code, comments, commits, commands, configs... the list goes on.

Yet, many of us don’t invest in improving the one skill that can instantly boost productivity, reduce fatigue, and help us flow like a boss: efficient typing.

In this post, let’s dive into some practical typing hacks for programmers — from tooling to habits — that can help you code faster, smarter, and smoother.

💻 1. Master Your IDE Shortcuts

Your code editor or IDE is your second home (or first, let’s be honest). Learning the keyboard shortcuts can literally save you hours every week.

✅ Learn these essentials:

Duplicate line – (e.g. Cmd + D / Ctrl + D)
Move line up/down – (e.g. Alt + ↑/↓)
Auto-format code – (e.g. Shift + Alt + F)
Quick file search – (e.g. Cmd + P / Ctrl + P)
Command palette – (e.g. Cmd + Shift + P)

🔗 Bonus: VS Code Keyboard Shortcuts Cheatsheet

⌨️ 2. Use a Programmer-Friendly Keyboard Layout

If you’re writing code all day, your keyboard layout matters!

🔁 Consider switching to:

Colemak – More natural typing flow, less finger movement
Dvorak for Programmers – Prioritizes symbols like {}, [], ;, =
QWERTY (but optimized) – With remaps for Esc, CapsLock, etc.

Tools like Karabiner Elements (Mac) or AutoHotkey (Windows) help remap keys like:

CapsLock → Ctrl or Esc
Shift + Space → insert =>

🧠 3. Practice Touch Typing (with a Programming Focus)

Even if you already type decently fast, improving your accuracy and muscle memory for code can be a game-changer.

🛠️ Use these to level up:

Keybr – great for general typing
monkeytype.com – includes programming language modes
Typing.io – real-world code typing in JS, Python, C++, etc.

Target: 70+ WPM with 95%+ accuracy while coding

✍️ 4. Snippets Are Your Superpower

Why type the same code 100 times when you can auto-expand it in seconds?

✅ Use code snippets for:

Component templates
Boilerplate code
Reusable logic blocks

🧩 Tools:

VS Code’s built-in snippet manager
Emmet – HTML & CSS shortcuts like div.container>ul>li*5

Example:

// Trigger: log
console.log('$1');

🚀 5. Use Auto-completion and Copilot Wisely

Let your tools complete your thoughts.

🧠 Tools like:

GitHub Copilot
Tabnine
IntelliSense
Amazon Q

...can auto-suggest entire lines, functions, or docstrings. But don’t just tab your way to spaghetti — always review what gets inserted.

🛠️ 6. Remap & Streamline

Remap underused keys:

CapsLock → Ctrl (great for Vim or terminal)
Right Alt → Emoji picker / code symbols
Tab → Insert arrow functions like ()=>{}

Create your own key combos:

With AutoHotkey (Windows) or Karabiner (Mac), you can map:
- Alt + L → console.log();
- Ctrl + Shift + B → trigger build command

🧘‍♂️ 7. Prevent Typing Fatigue

Typing fast is great — but not at the cost of your hands or wrists.

✅ Take care of your body:

Use an ergonomic keyboard (like Kinesis, Moonlander, or split keyboards)
Use a vertical mouse
Keep good posture (arms at 90°, wrists straight)
Use the Pomodoro technique with short stretch breaks

🌐 8. Use Browser Extensions for Snippets & Shortcuts

If you’re a web dev:

Use Text Blaze (Chrome) for auto-expanding text in the browser
Use Tampermonkey to automate typing or field entry in dev portals
Use !important browser bookmarks like:
- javascript:document.body.contentEditable='true';document.designMode='on';void 0

✨ 9. Master the Terminal with Aliases & Autocomplete

If you're a CLI lover:

Use .bashrc or .zshrc aliases like:

  alias gs='git status'
  alias serve='npx serve'

Enable autocomplete for Git, Docker, etc.
Use fzf for fuzzy searching file paths
Try Oh My Zsh for power-boosted shell workflows

📦 10. Bonus: Try a Mechanical Keyboard with Programmable Layers

Mechanical keyboards like:

⌨️ Keychron
⌨️ Ducky
⌨️ Drop ALT

…allow for custom layouts, macros, and even per-key RGB triggers.

Pair them with firmware like:

QMK / VIA for remapping
Tap to insert code blocks, templates, emoji, or even open GitHub!

✅ Conclusion

Typing isn’t just about words per minute — it’s about efficiency, comfort, and flow. Whether you're building full-stack apps or debugging a pesky issue at 2 AM, these hacks can help you type less but achieve more.

💬 What’s Your Favorite Typing Hack?

Got a tool, layout, or ritual that supercharges your typing game? Share it in the comments below 👇

Let’s build a typing toolbox for devs together!

🔥 10 Common JavaScript Pitfalls That Even Experienced Developers Fall Into

Muhammad Aqib Bin Azam — Sun, 20 Apr 2025 15:44:40 +0000

JavaScript is an incredibly powerful and flexible language — but that flexibility comes with a price: subtle quirks and gotchas that even seasoned developers stumble into.

Whether you're building enterprise applications or working on your next side project, these are the 10 most common JavaScript pitfalls that can cause unexpected behavior, bugs, or even security vulnerabilities.

📌 This post will help you identify, understand, and avoid these common traps, and write cleaner, safer, and more predictable code.

🚫 1. Confusing `==` vs `===`

The == operator performs type coercion, while === checks for strict equality.

0 == false   // true 😱
0 === false  // false ✅

✅ Always use === unless you really understand coercion rules.

🧠 2. Using `var` Instead of `let` or `const`

var is function-scoped and hoisted, which can lead to unpredictable behavior.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 3, 3, 3
}

Use let or const to get block-scoped, predictable results.

🌀 3. Misunderstanding Asynchronous Behavior

JavaScript’s async nature can be tricky:

const result = fetchData(); // ❌ Doesn't wait!
console.log(result);

✅ Always await async functions, and remember await can only be used inside async functions.

🧨 4. Modifying Objects/Arrays by Reference

Objects and arrays are reference types:

const a = { count: 1 };
const b = a;
b.count = 2;
console.log(a.count); // 2 ❗

🛡 Use structuredClone, spread ({ ...a }), or libraries like Lodash for immutability.

🔁 5. Incorrect `for...in` vs `for...of` Usage

for...in is for object keys
for...of is for iterables like arrays

const arr = ['a', 'b', 'c'];
for (let i in arr) console.log(i); // "0", "1", "2"
for (let i of arr) console.log(i); // "a", "b", "c"

🧮 6. Floating Point Math Woes

0.1 + 0.2 === 0.3 // false 😤

✅ Use libraries like decimal.js or work with integers when precision matters (e.g. cents instead of dollars).

📦 7. Leaking Variables to Global Scope

In browsers:

function test() {
  leakedVar = "oops"; // 👻 becomes global
}

✅ Always declare variables with let, const, or var.

🗂️ 8. Overusing `null` and `undefined` Interchangeably

typeof null        // "object" 😬
typeof undefined   // "undefined"

💡 Use one consistently in your app. Many devs use null for “intentional empty” and undefined for “not set”.

🧪 9. Not Handling Errors in Async Code

Uncaught promise errors can crash your app:

fetch('/data')
  .then(res => res.json())
  .then(data => doSomething(data));
// No `.catch()` 😵

✅ Always add .catch() or wrap in try/catch with async/await.

🧵 10. Assuming JavaScript is Single-threaded (Hint: It's not entirely)

JS has one main thread, but async tasks like fetch, setTimeout, and event listeners use the event loop.

🤯 Misunderstanding this can lead to race conditions or unhandled state updates in frameworks like React or Vue.

✅ Final Thoughts

JavaScript is powerful — but with great power comes great... undefined. 🕸️

Avoiding these common pitfalls will make your code more maintainable, more secure, and way easier for others (and your future self) to read.

💬 Have you encountered any of these? Got your own JavaScript “gotchas” to share?

Drop them in the comments below 👇

Let’s help each other write better JS 💪

How to Bulk Delete GitHub Actions Artifacts with a Simple Script (MacOS Guide)

Muhammad Aqib Bin Azam — Sun, 20 Apr 2025 15:34:52 +0000

If you're using GitHub Actions, you know how quickly artifacts can accumulate and consume your storage quota. In this post, I'll show you how to clean up all your GitHub Actions artifacts across all repositories with a simple bash script - no manual deletion required!

Why Delete GitHub Actions Artifacts?

GitHub Actions artifacts are great for storing build outputs and test results, but they come with some limitations:

Storage limits: Free accounts get only 500MB of artifact storage
Retention period: Artifacts expire after 90 days by default
Cost concerns: Excess storage can lead to charges for pro accounts

Regular cleanup helps you:
✅ Stay under storage limits

✅ Improve repository performance

✅ Maintain better organization

The Automated Solution

Instead of manually deleting artifacts through the UI, we'll use GitHub's CLI (gh) with a Python helper to:

Find all repositories you have access to
List all artifacts
Delete them in bulk

Prerequisites

Before running the script, ensure you have:

GitHub CLI installed and authenticated:

brew install gh
gh auth login

(Make sure repo scope is enabled - check with gh auth status)

Python 3.13.2 (or compatible version):

python3 --version
# Install if needed:
brew install python@3.13

zsh shell (default on modern MacOS)

The Script Setup

Create a new file called delete-all-artifacts.sh:

#!/bin/bash
# Script to delete artifacts from all accessible repositories
USER="YOUR_USERNAME"  # Replace with your GitHub username

# Fetch all repos with write/admin access
REPOS=$(gh api /user/repos\?affiliation=owner,collaborator,organization_member --paginate | python3 -c "import sys, json; repos = json.load(sys.stdin); [print(repo['full_name']) for repo in repos if repo['permissions']['admin'] or repo['permissions']['push']]")

for REPO in $REPOS; do
  echo "Processing repository: $REPO"

  # Optional: List recent workflow runs
  echo "Listing recent workflow runs for $REPO"
  gh run list --repo "$REPO" --limit 5 --json databaseId,status,conclusion

  # Delete all artifacts
  echo "Deleting artifacts for $REPO"
  ARTIFACT_IDS=$(gh api /repos/"$REPO"/actions/artifacts --paginate | python3 -c "import sys, json; artifacts = json.load(sys.stdin)['artifacts']; print('Found ' + str(len(artifacts)) + ' artifacts'); [print(artifact['id']) for artifact in artifacts]")

  if [ -z "$ARTIFACT_IDS" ]; then
    echo "No artifacts to delete"
  else
    echo "$ARTIFACT_IDS" | tail -n +2 | xargs -n1 -I % bash -c "gh api -X DELETE /repos/\"$REPO\"/actions/artifacts/% && sleep 1"
  fi
done

Make it executable:

chmod +x delete-all-artifacts.sh

How It Works

Repository Discovery:
- Finds all repos where you have push/admin rights
- Includes personal, collaborator, and organization repos
Artifact Deletion:
- Lists artifacts for each repository
- Deletes them one by one with a 1-second delay (avoids rate limiting)
Progress Reporting:
- Shows which repository is being processed
- Reports number of artifacts found and deleted

Running the Script

./delete-all-artifacts.sh

Expected Output

You'll see output like this for each repository:

Processing repository: username/repo-name
Listing recent workflow runs for username/repo-name
[]
Deleting artifacts for username/repo-name
Found 2 artifacts
123
124

Troubleshooting Tips

If you encounter issues:

Python Syntax Errors: Verify the script contents match exactly what's shown above
Permission Problems: Run gh auth refresh -h github.com -s repo
Rate Limiting: Increase the sleep 1 to sleep 2 if needed
Test First: Try on a single repo before bulk deletion:

   gh api /repos/username/repo-name/actions/artifacts

Important Notes

⚠️ This cannot be undone - deleted artifacts are permanently removed

⏳ Takes time for repositories with many artifacts

🔒 Only affects repos where you have write/admin permissions

Alternative Approach

For more control, you might want to:

Add filters to keep certain artifacts
Set up a scheduled job to run this monthly
Use the actions/artifacts-cleanup action

Have you struggled with artifact storage before? Let me know in the comments if you'd like a version of this script with more advanced filtering options!

DEV Community: Muhammad Aqib Bin Azam

Lost Your Private Key for Your SSL Certificate? Here is How to Fix It in 10 Minutes

🔥 The Situation

🧠 The Mindset Shift

🛠️ What You Need

📋 The Fix in 4 Steps

Step 1: Generate a New Key and CSR on Your Machine

Step 2: Copy Your CSR

Step 3: Rekey Your Certificate with Your CA

Step 4: Download and Combine

🧪 Verify It Worked

❓ But What If...

"I have a .p7b file instead of a bundle?"

"I have multiple domains (UCC/SAN certificate)?"

"My CA rejected my CSR?"

"I lost the private key I just generated?"

🚫 What NOT to Do

📦 Files Cheat Sheet

🎯 The Bottom Line

💬 The Last Word

Building an Enterprise-Grade Tags Input Component with ShadCN UI + React

✨ Why Another Tags Input?

🛠 Installation

💻 Usage Example

⚡ Features Breakdown

📚 Full Documentation

🏁 Wrap Up

How to Install Fastlane on macOS for iOS Development

🔧 Prerequisites

🛠 Step-by-Step Installation Guide

🥇 Step 1: Install Xcode Command Line Tools

🥈 Step 2: Install Fastlane

Option 1: Using RubyGems (Recommended)

Option 2: Using Homebrew

✅ Step 3: Verify the Installation

⚙️ Step 4: Initialize Fastlane in Your iOS Project

🌐 Step 5: Configure Environment Variables (Optional)

🧯 Troubleshooting

🤖 Why Use Fastlane?

Example Lane

📚 Next Steps

How to Set the Default Node Version Using NVM in Mac or Windows (with in 60 Seconds)

💡 Why This Matters for Performance

🛠 Setting the Default Node Version with NVM

📦 On macOS (using nvm)

1. Check installed versions:

2. Install or use a specific version:

3. Set it as default:

🪟 On Windows (using nvm-windows)

🧠 Pro Tip: Pin Node Version Per Project

❌ Common Gotchas

🚀 Wrap Up

Integrating PayTabs Payment Gateway with Next.js: A Scalable Approach

🛠️ Prerequisites

Step 1: Create the PayTabs Service (Backend)

🔄 Step 2: API Route for Transaction Initiation

📩 Step 3: Webhook Handling

💻 Step 4: Frontend Payment Form

🎯 Best Practices for Production

🔗 Resources

JavaScript Memory Leaks: The Silent Killers and How to Fix Them

What is a Memory Leak?

Top 4 Memory Leak Culprits in JavaScript

1. Forgotten Timers & Intervals

2. Stray Event Listeners

3. Closures Holding References

4. Detached DOM Nodes

How to Detect Memory Leaks?

Best Practices to Avoid Leaks

Final Thoughts

🔐 How to Connect Multiple GitHub Accounts via SSH in VS Code (Personal + Work Setup)

🧠 Why Use SSH with GitHub in VS Code?

Step 1: Generate SSH Keys for Personal and Work GitHub Accounts

🔐 For personal GitHub:

🔐 For work GitHub:

🔑 Step 2: Add SSH Keys to SSH Agent in VS Code Terminal

🧩 Step 3: Configure SSH Profiles for VS Code in ~/.ssh/config

🗝️ Step 4: Add Public Keys to GitHub

🧪 Step 5: Test SSH Profiles in VS Code Terminal

Personal:

📦 On macOS (using `nvm`)

🪟 On Windows (using `nvm-windows`)

🧩 Step 3: Configure SSH Profiles for VS Code in `~/.ssh/config`

🚫 1. Confusing `==` vs `===`

🧠 2. Using `var` Instead of `let` or `const`

🔁 5. Incorrect `for...in` vs `for...of` Usage

🗂️ 8. Overusing `null` and `undefined` Interchangeably