DEV Community: Azad Shukor

Understanding CIDR Notation

Azad Shukor — Sun, 12 Apr 2026 02:05:48 +0000

Understanding IPv4 CIDR Blocks

A CIDR block looks like:

10.0.0.0/16

It has two parts:

IP address → starting point
Prefix (/16) → how many bits are fixed

Core Idea (Memorize This First)

IPv4 = 32 bits total
CIDR /N = N bits are fixed (network)
Remaining bits = host bits (free to change)

Total addresses = 2^(32 - N)

IPv4 Structure

An IPv4 address:

10.0.0.0

Breakdown:

10       . 0       . 0       . 0
8 bits     8 bits    8 bits    8 bits

Total = 32 bits

Each block:

8 bits = values from 0 to 255
Example:
- 0 → 00000000
- 255 → 11111111

Think in Terms of LOCKED vs FREE

Instead of memorizing formulas, think:

Locked bits = define the network
Free bits = generate all possible addresses

Example: `10.0.0.0/16`

Step 1: Count free bits

32 - 16 = 16 free bits

Step 2: Calculate total addresses

2^16 = 65,536

Step 3: Visualize

10       . 0       . 0       . 0
[LOCKED]   [LOCKED]   [FREE]    [FREE]
  8 bits     8 bits     8 bits    8 bits

First 2 blocks fixed → 10.0
Last 2 blocks vary → 0.0 to 255.255

Range:

10.0.0.0 → 10.0.255.255

How to Read Any CIDR Quickly

Rule:

Move left to right, filling 8 bits per block, until you reach /N.

Example: `/10`

10.0.0.0/10

10       . 0       . 0       . 0
[8 LOCK]   [2 LOCK]   [FREE]    [FREE]

8 bits from first block
2 bits from second block

Total locked = 10 bits
Free = 22 bits
Total addresses = 2^22 = 4,194,304

Example: `/20`

10.0.0.0/20

10       . 0       . 0       . 0
[8 LOCK]   [8 LOCK]   [4 LOCK]   [FREE]

Locked = 20 bits
Free = 12 bits
Total = 2^12 = 4,096

Example: `/26`

10.0.0.0/26

10       . 0       . 0       . 0
[8 LOCK]   [8 LOCK]   [8 LOCK]   [2 LOCK]

Locked = 26 bits
Free = 6 bits
Total = 2^6 = 64

Example: `/30`

10.0.0.0/30

10       . 0       . 0       . 0
[8 LOCK]   [8 LOCK]   [8 LOCK]   [6 LOCK]

Free bits = 2
Total = 2^2 = 4

Range:

10.0.0.0 → 10.0.0.3

Shortcut Patterns (High Value)

Instead of recalculating every time:

CIDR	Free Bits	Total IPs
/16	16	65,536
/24	8	256
/26	6	64
/30	2	4

Important Practical Note

Not all addresses are usable:

First IP → network address
Last IP → broadcast address

Example /30:

10.0.0.0 → network
10.0.0.1 → usable
10.0.0.2 → usable
10.0.0.3 → broadcast

Mental Model (Best Way to Think)

Treat CIDR like a binary lock:

/N = how many switches are locked
Remaining switches = combinations

More free bits → bigger network
Fewer free bits → smaller network

One-Line Summary

CIDR is just: how many bits are fixed vs how many bits can vary.

Next.js ConnectRPC Proxy Pattern

Azad Shukor — Wed, 04 Feb 2026 14:05:13 +0000

This article demonstrates a strictly typed gRPC implementation in Next.js using ConnectRPC and TanStack Query.

The core architectural goal is to unify the Server and Client definitions. It achieves this by implementing a Proxy Pattern: the Next.js API route exposes a local GreetService that acts as a typed gateway, forwarding requests to a remote ElizaService while reusing the exact same Proto definitions.

1. Dependencies

Required packages for ConnectRPC v2, Next.js 15, and TanStack Query.

package.json

{
  "name": "airborneo-grpc-proxy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "generate": "buf generate proto"
  },
  "dependencies": {
    "@bufbuild/protobuf": "^2.2.3",
    "@connectrpc/connect": "^2.0.1",
    "@connectrpc/connect-next": "^2.0.1",
    "@connectrpc/connect-node": "^2.1.1",
    "@connectrpc/connect-query": "^2.0.1",
    "@connectrpc/connect-web": "^2.1.1",
    "@tanstack/react-query": "^5.0.0",
    "next": "15.1.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@bufbuild/buf": "^1.47.0",
    "@bufbuild/protoc-gen-es": "^2.2.3",
    "@connectrpc/protoc-gen-connect-query": "^2.0.1",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "typescript": "^5"
  }
}

2. Proto Definition & Generation

We define two proto files. GreetService imports ElizaService messages to ensure strict type parity between the proxy and the upstream backend.

proto/connectrpc/eliza/v1/eliza.proto

syntax = "proto3";

package connectrpc.eliza.v1;

message SayRequest {
  string sentence = 1;
}

message SayResponse {
  string sentence = 1;
}

service ElizaService {
  rpc Say(SayRequest) returns (SayResponse) {}
}

proto/greet/v1/greet.proto

syntax = "proto3";

package greet.v1;

import "connectrpc/eliza/v1/eliza.proto"; 

// This service mimics the remote service but is exposed locally
service GreetService {
  rpc Say(connectrpc.eliza.v1.SayRequest) returns (connectrpc.eliza.v1.SayResponse) {}
}

buf.gen.yaml

version: v1
plugins:
  # 1. Generates Types AND Service Definitions (v2 Standard)
  - plugin: es
    path: ./node_modules/.bin/protoc-gen-es
    out: gen
    opt: target=ts

  # 2. Generates React Hooks (TanStack Query)
  - plugin: connect-query
    path: ./node_modules/.bin/protoc-gen-connect-query
    out: gen
    opt: target=ts

Run the generator:

npm run generate

3. The Proxy Utility

This utility dynamically implements a service definition by forwarding method calls to a target client. This allows us to "mount" the remote backend onto our local API route without manually rewriting every resolver.

src/utils/proxy.ts

import { type DescService } from "@bufbuild/protobuf";
import { type Client } from "@connectrpc/connect";

export function createProxy<T extends DescService>(
  service: T,
  client: Client<T>,
) {
  const implementation: any = {};

  for (const method of service.methods) {
    const fnName = method.localName;

    implementation[fnName] = async (req: any) => {
      console.log(`[Proxy] Forwarding ${fnName} for ${service.typeName}`);

      // Call the client dynamically
      return await (client as any)[fnName](req);
    };
  }

  console.log(
    `[Proxy] Built methods for ${service.typeName}:`,
    Object.keys(implementation),
  );

  return implementation;
}

4. API Route Implementation

We create a backend connection to the demo Eliza service, then route our local GreetService to proxy that connection.

pages/api/[[...connect]].ts

import { nextJsApiRouter } from "@connectrpc/connect-next";
import { ConnectRouter } from "@connectrpc/connect";
import { createClient } from "@connectrpc/connect";
import { createConnectTransport } from "@connectrpc/connect-node";

// Generated Code
import { GreetService } from "@/gen/greet/v1/greet_pb";
import { ElizaService } from "@/gen/connectrpc/eliza/v1/eliza_pb";
import { createProxy } from "@/src/utils/proxy";

// 1. The Backend Connection (Target)
const elizaBackend = createClient(
  ElizaService,
  createConnectTransport({
    baseUrl: "https://demo.connectrpc.com",
    httpVersion: "1.1",
  }),
);

function routes(router: ConnectRouter) {
  // ---------------------------------------------------------
  // ROUTE 1: GreetService (Proxy -> ElizaService)
  // URL: /api/greet.v1.GreetService/Say
  // ---------------------------------------------------------
  router.service(GreetService, createProxy(GreetService, elizaBackend));
}

export const { handler, config } = nextJsApiRouter({ routes });
export default handler;

5. Client Consumption

The frontend uses connect-web to talk to the local Next.js API. Note that we are using the GreetService definition here, but the data types (sentence) are strictly typed to the original Eliza definition.

app/page.tsx

"use client";
import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { createClient } from "@connectrpc/connect";
import { createConnectTransport } from "@connectrpc/connect-web"; 
import { GreetService } from "@/gen/greet/v1/greet_pb";

// Point to YOUR local API
const transport = createConnectTransport({ baseUrl: "/api" });
const client = createClient(GreetService, transport);

export default function ChatPage() {
  const [input, setInput] = useState("");
  const [history, setHistory] = useState<string[]>([]);

  const mutation = useMutation({
    mutationFn: async (msg: string) => {
      // Input is typed as SayRequest (from Eliza)
      const res = await client.say({ sentence: msg });

      // Output is typed as SayResponse (from Eliza)
      return res.sentence;
    },
    onSuccess: (answer) => {
      setHistory((prev) => [...prev, `Eliza (via Proxy): ${answer}`]);
    },
  });

  return (
    <div style={{ padding: "50px", fontFamily: "sans-serif" }}>
      <h1>Proxy Chat</h1>
      <div style={{ display: "flex", gap: "10px" }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Say something..."
          style={{ padding: "8px", flexGrow: 1 }}
        />
        <button onClick={() => mutation.mutate(input)} disabled={mutation.isPending}>
          {mutation.isPending ? "Sending..." : "Send"}
        </button>
      </div>

      <div style={{ marginTop: "20px", background: "#f5f5f5", padding: "20px", borderRadius: "8px" }}>
        {history.map((line, i) => (
          <p key={i} style={{ borderBottom: "1px solid #ddd", padding: "8px 0" }}>
            {line}
          </p>
        ))}
      </div>
    </div>
  );
}

Understanding SSL/TLS Certificates

Azad Shukor — Thu, 15 Jan 2026 05:47:38 +0000

The Name Game: SSL vs TLS

SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are often used interchangeably, but here's the reality: SSL is dead. It hasn't been updated since 1996 and is riddled with security vulnerabilities. Everything we use today is actually TLS.

So why do we still hear "SSL" everywhere? Simple—it was the first name people learned, so the industry stuck with it for marketing. When you purchase an "SSL Certificate" today, you're actually getting a certificate that enables TLS.

What Does TLS Actually Do?

Think of TLS as a secure tunnel between two computers. When you click "Proceed to Payment" on a website, TLS creates an encrypted tunnel to transmit your payment information to the payment processor (like Visa or Stripe). Without TLS, anyone could intercept and read that data.

The Trust Problem: Certificate Authorities

Here's the million-dollar question: how do you know the tunnel is actually secure and going to the right place? You need someone to verify the certificate's legitimacy—kind of like an immigration officer checking your passport at the border.

In the TLS world, these "immigration officers" are called Certificate Authorities (CAs). Popular CAs include:

Let's Encrypt
Google Trust Services
Cloudflare
DigiCert
GoDaddy

How It Works: The Certificate Process

Step 1: Generate the Certificate Signing Request (CSR)

First, you generate a certificate locally or on your server. This creates two files:

# Generate a private key
openssl genrsa -out private.key 2048

# Generate a CSR using the private key
openssl req -new -key private.key -out certificate.csr

This gives you:

Private Key (private.key) - Keep this SECRET on your server, never share it
Certificate Signing Request (certificate.csr) - Send this to the CA

Step 2: CA Verification

You submit your CSR to a Certificate Authority. They'll verify:

Is this a legitimate company?
Do you actually own/control this domain?
Is the information accurate?

For domain validation, the CA might ask you to:

Add a DNS record
Upload a specific file to your website
Respond to an email sent to your domain

Step 3: Receive the Signed Certificate

After verification, the CA returns a signed certificate with their cryptographic signature. This is your "stamped passport."

# You'll receive something like this
certificate.crt  # Your signed certificate
ca-bundle.crt    # The CA's chain of trust

Step 4: Install on Your Server

Now you configure your server to use both the private key and the signed certificate.

Example for Nginx:

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private.key;

    # Modern TLS configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
}

Example for Apache:

<VirtualHost *:443>
    ServerName yourdomain.com

    SSLEngine on
    SSLCertificateFile /path/to/certificate.crt
    SSLCertificateKeyFile /path/to/private.key
    SSLCertificateChainFile /path/to/ca-bundle.crt
</VirtualHost>

The Full Handshake (What Happens Behind the Scenes)

When a user visits your site:

Client Hello: Browser says "Hey, I want to connect securely"
Server Hello: Server responds with its certificate (the one signed by the CA)
Certificate Verification: Browser checks if the certificate is signed by a trusted CA
Key Exchange: They agree on encryption keys for the session
Encrypted Communication: All data flows through the secure tunnel

// This is what happens when you make an HTTPS request
fetch('https://api.example.com/payment', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    cardNumber: '4242424242424242',
    amount: 99.99
  })
});

// TLS encrypts everything in that request body automatically
// Without TLS, anyone on the network could read your card number

Why You Should Care

Without TLS:

❌ Passwords sent in plain text
❌ Credit cards visible to attackers
❌ Session tokens can be stolen
❌ Data can be modified in transit

With TLS:

✅ Everything encrypted end-to-end
✅ Authenticity verified by CAs
✅ Protection from man-in-the-middle attacks
✅ That reassuring padlock in the browser

Quick Start with Let's Encrypt (Free!)

# Install Certbot
sudo apt install certbot python3-certbot-nginx

# Get a certificate and auto-configure Nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Auto-renewal is set up automatically
# Certificates are valid for 90 days

That's it. You now have TLS up and running, and your users can browse safely through that secure tunnel.

What is display "block" and display "inline"?

Azad Shukor — Sat, 10 Jan 2026 13:26:02 +0000

Phase 1: The "Why" (The Context)

I am surprised when I put a div and a span side by side, and it isn't what I imagined. The span doesn't behave exactly like a div. You can't set the width on a span the same way you do on a div.

If you inspect the elements closely in your browser, you might notice they have different display properties: div has display: block and span has display: inline.

Does it really matter to understand this? Yes, it does. It is the DNA of the website. Without this, you are just guessing why your layout is breaking.

Phase 2: The Block Element

The block element will take the whole row for himself. You can imagine it like building with Lego blocks that are always the same width as the floor. Even if you put a tiny bit of text inside a div, that div acts like a greedy person on a bus—he sits in the middle and puts his bags on the seats next to him so nobody else can sit there.

Each block element will try to fit itself on its own row. If you put two div tags in your code, the second one will always jump to the next line.

The good part? Because a block element is "solid," it listens to you. If you tell it to be width: 200px or height: 100px, it will obey. It respects your rules for margins and padding on all four sides.

Phase 3: The Inline Element

Now, look at the inline element (like your span or an <a> tag). These are the "team players." They only take up as much space as they actually need. If the word is "Hello," the element is only as wide as those five letters.

This is why they can sit side-by-side on the same line. They flow just like words in a sentence.

The trap: Beginners get frustrated here because inline elements are stubborn. If you try to give a span a width of 500px, nothing happens. The browser ignores you. It also acts weird with vertical space—if you give it a top margin, it won't push the other elements away like a div would. It only cares about left and right.

Phase 4: The Middle Ground (Inline-Block)

So what if you want the best of both worlds? You want elements to sit next to each other (inline), but you also want to control their width and height (block)?

That’s where display: inline-block comes in. It’s the "hybrid" setting. It stays on the same line as other elements, but it finally starts listening to your width and height commands.

Summary Table for your Memory:

Property	Takes full width?	Can set Width/Height?	Sits next to others?
Block (`div`, `p`, `h1`)	Yes	Yes	No
Inline (`span`, `a`)	No	No	Yes
Inline-Block	No	Yes	Yes

Everything happens for a reason in CSS. Once you know if an element is a "greedy block" or a "flowing inline," you stop asking "what the hell is going on" and start actually building.

Simplest Chrome Extension Tutorial for 2024 Using Manifest V3

Azad Shukor — Sun, 14 Jul 2024 00:41:51 +0000

Creating a Color Changer Chrome Extension

This tutorial will guide you through creating a Chrome extension that changes the background color of web pages and keeps track of how many times the color has been changed.

Step 1: Set Up the Folder Structure

First, create a new folder for your extension with the following structure:

my-extension/
│
├── manifest.json
├── background.js
├── popup/
│   ├── popup.html
│   └── popup.js
└── content_scripts/
    └── content.js

Step 2: Create the Manifest File

The manifest.json file is the heart of your Chrome extension. It tells Chrome about your extension, its capabilities, and the files it needs to function.

Create a file named manifest.json in the root of your extension folder with the following content:

{
  "manifest_version": 3,
  "name": "Color Changer",
  "version": "1.0",
  "description": "Changes webpage background color",
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/content.js"]
    }
  ],
  "action": {
    "default_popup": "popup/popup.html"
  }
}

Explanation:

manifest_version: Specifies we're using Manifest V3, the latest version for Chrome extensions.
permissions: Requests access to the active tab and storage API.
background: Specifies the background script file.
content_scripts: Defines which script should be injected into web pages.
action: Specifies the HTML file for the extension's popup.

Step 3: Create the Popup HTML

Create a file named popup.html in the popup folder:

<!DOCTYPE html>
<html>
<head>
  <title>Color Changer</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
    button {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <button id="changeColor">Change Color</button>
  <p>Color changed <span id="count">0</span> times</p>
  <script src="popup.js"></script>
</body>
</html>

This creates a simple popup with a button and a counter. I've added some basic CSS to improve the layout.

Step 4: Create the Popup JavaScript

Create a file named popup.js in the popup folder:

document.addEventListener('DOMContentLoaded', function() {
  var changeColor = document.getElementById('changeColor');
  var countSpan = document.getElementById('count');

  // Load the current count
  chrome.storage.sync.get('colorCount', function(data) {
    countSpan.textContent = data.colorCount || 0;
  });

  changeColor.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {action: "changeColor"}, function(response) {
        console.log(response);
      });
    });

    // Increment the count
    chrome.storage.sync.get('colorCount', function(data) {
      var newCount = (data.colorCount || 0) + 1;
      chrome.storage.sync.set({colorCount: newCount});
      countSpan.textContent = newCount;
    });

    // Notify background script
    chrome.runtime.sendMessage({action: "colorChanged"});
  });
});

Explanation:

We wait for the DOM to load before attaching event listeners.
We retrieve the current color change count from storage and display it.

When the button is clicked, we:

Send a message to the content script to change the page color.
Increment the color change count and update it in storage and on the popup.
Send a message to the background script to log the change.

Step 5: Create the Background Script

Create a file named background.js in the root of your extension folder:

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({colorCount: 0});
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "colorChanged") {
      console.log("Background color was changed");
    }
  }
);

Explanation:

When the extension is installed, we initialize the color count to 0.
We listen for messages from other parts of the extension. When a "colorChanged" message is received, we log it to the console.

Step 6: Create the Content Script

Create a file named content.js in the content_scripts folder:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "changeColor") {
      document.body.style.backgroundColor = getRandomColor();
      sendResponse({status: "Color changed"});
    }
  }
);

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Explanation:

This script listens for messages from the popup.
When it receives a "changeColor" message, it changes the page's background color to a random color.
The getRandomColor() function generates a random hex color code.

Step 7: Load and Test the Extension

Open Chrome and go to chrome://extensions/
Enable "Developer mode" in the top right corner.
Click "Load unpacked" and select your extension folder.
Your extension should now appear in the Chrome toolbar.
Open any webpage and click on your extension icon.
Click the "Change Color" button and observe:

The webpage's background color should change.
The count in the popup should increment.
Check the background script's console (in the extensions page) for the log message.

Displaying dev.to Articles in a React Project with TypeScript

Azad Shukor — Fri, 30 Jun 2023 08:46:54 +0000

Let's go through a step-by-step tutorial on how to display dev.to articles in your own React project using TypeScript.

The following instructions will help you understand the process clearly.

Step 1: Create a React application

To begin, create a new React application by running the following command in your terminal:

npx create-react-app my-app

Step 2: Set up the Article Interface

In your App.js file, you'll need to define an interface that represents the structure of dev.to articles. Paste the following interface code:

interface IArticle {
  type_of: string;
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  slug: string;
  path: string;
  url: string;
  comments_count: number;
  public_reactions_count: number;
  collection_id: null | number;
  published_timestamp: string;
  positive_reactions_count: number;
  cover_image: null | string;
  social_image: string;
  canonical_url: string;
  created_at: string;
  edited_at: null | string;
  crossposted_at: null | string;
  published_at: string;
  last_comment_at: string;
  reading_time_minutes: number;
  tag_list: string[];
  tags: string;
  user: {
    name: string;
    username: string;
    twitter_username: null | string;
    github_username: string;
    user_id: number;
    website_url: null | string;
    profile_image: string;
    profile_image_90: string;
  };
}

This interface represents the structure of dev.to articles that we'll be fetching and displaying.

Step 3: Fetch dev.to Articles

Next, we'll create a function to fetch dev.to articles based on a given username. In this tutorial, we'll use the username "azadshukor" as an example. Paste the following code:

const fetchDevToArticles = (username: string): Promise<IArticle[]> =>
  fetch(`https://dev.to/api/articles?username=${username}`).then((response) =>
    response.json()
  );

The fetchDevToArticles function takes a username parameter and returns a Promise that resolves to an array of IArticle objects. It fetches the articles using the dev.to API.

Step 4: Fetch Articles from the Client Side

Inside the App component, we'll use the useEffect hook to fetch the dev.to articles from the client side. Add the following code:

useEffect(() => {
  fetchDevToArticles("azadshukor")
    .then((articles) => {
      setBlogs(articles);
    })
    .catch((error) => {
      console.error("Error fetching articles:", error);
    });
}, []);

This code will fetch the articles from the dev.to API using the fetchDevToArticles function we defined earlier. The fetched articles will be stored in the blogs state using the setBlogs function. The useEffect hook ensures that the articles are fetched only once when the component mounts.

Step 5: Finalize the App Component

Now, let's update the App.tsx file with the final code:

import { useEffect, useState } from "react";
import "./styles.css";

interface IArticle {
  type_of: string;
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  slug: string;
  path: string;
  url: string;
  comments_count: number;
  public_reactions_count: number;
  collection_id: null | number;
  published_timestamp: string;
  positive_reactions_count: number;
  cover_image: null | string;
  social_image: string;
  canonical_url: string;
  created_at: string;
  edited_at: null | string;
  crossposted_at: null | string;
  published_at: string;
  last_comment_at: string;
  reading_time_minutes: number;
  tag_list: string[];
  tags: string;
  user: {
    name: string;
    username: string;
    twitter_username: null | string;
    github_username: string;
    user_id: number;
    website_url: null | string;
    profile_image: string;
    profile_image_90: string;
  };
}

const fetchDevToArticles = (username: string): Promise<IArticle[]> =>
  fetch(`https://dev.to/api/articles?username=${username}`).then((response) =>
    response.json()
  );

export default function App() {
  const [blogs, setBlogs] = useState<IArticle[]>([]);

  useEffect(() => {
    fetchDevToArticles("azadshukor")
      .then((articles) => {
        setBlogs(articles);
      })
      .catch((error) => {
        console.error("Error fetching articles:", error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {blogs.map((blog) => (
        <div key={blog.id}>
          <h3>{blog.title}</h3>
          <p>{blog.description}</p>
        </div>
      ))}
    </div>
  );
}

This code imports the necessary dependencies, including the useEffect and useState hooks. The App component sets up the state for storing the fetched articles in the blogs variable. The fetched articles are then mapped over and displayed in the component's JSX.

Step 6: Test and Customize

You can now test your application and see the dev.to articles being displayed in your React project. Feel free to customize the code to suit your specific needs.

Conclusion

Congratulations! You have successfully implemented the functionality to display dev.to articles in your React project. I hope this tutorial has been helpful to you. If you have any further questions, feel free to leave a comment. Happy coding!

Setting up Next.js 13 with Vitest

Azad Shukor — Thu, 08 Jun 2023 02:57:13 +0000

In this tutorial, we will demonstrate how to set up a Next.js 13 application with Vitest.

Prerequisites

Before getting started, make sure you have the following installed on your machine:

Node.js
npm

Step 1: Creating a Next.js application

First, let's create a new Next.js application using the create-next-app command. Open your terminal and run the following command:

npx create-next-app my-app --yes

This command will create a new Next.js application in the my-app directory. When prompted, choose No for TypeScript and No for the experimental app/ directory. Next, navigate to the project directory:

cd my-app

Setting up Vitest

Now, we need to install Vitest as a dev dependency for our Next.js application. Run the following command:

npm install --save-dev vitest

Once the installation is complete, open the package.json file in your project and add a new script called "test" under the "scripts" section:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "vitest"
}

We have now configured the test script to run Vitest for our application.

Next, create a configuration file called vitest.config.js in the root directory of your project and paste the following code into it:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {},
});

Step 3: Test the setup

To test if everything is set up correctly, create a new file named index.test.js in the root directory of your project and paste the following code into it:

import { describe, expect, test } from "vitest";

const add = (a, b) => {
  return a + b;
};

describe("test add function", () => {
  test("should return the sum of two numbers", () => {
    const result = add(2, 3);
    expect(result).toBe(5);
  });

  test("should return zero when adding zero to a number", () => {
    const result = add(10, 0);
    expect(result).toBe(10);
  });

  test("should return a negative number when adding a negative and a positive number", () => {
    const result = add(-5, 8);
    expect(result).toBe(3);
  });
});

To run the tests, open your terminal and run the following command:

npm run test

You should see the test results displayed in your terminal:

✓ index.test.js (3)

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  10:43:04
   Duration  414ms (transform 29ms, setup 0ms, collect 18ms, tests 6ms, environment 0ms, prepare 91ms)

How to Link Your Google Domain with Vercel: A Step-by-Step Guide (2023)

Azad Shukor — Thu, 27 Apr 2023 03:35:05 +0000

Log in to your Google Domains account and navigate to the My Domains page. If you have multiple domains, make sure you select the one you want to link with Vercel.

Click on the "Manage" button on the right side of the domain name. This will take you to the domain management page.

On the left sidebar, select "DNS". This will bring up the DNS settings for your domain.

Click on "Custom name servers". This will allow you to add custom name servers for your domain.

Under "Name Server", add the following two name servers:

ns1.vercel-dns.com
ns2.vercel-dns.com

These are the name servers provided by Vercel, and they will handle the DNS requests for your domain.

Click on "Save" to save the changes. Once you've added the custom name servers, your Google domain will be linked with Vercel, and you can start using it to host your website or web application.

Setting up Next.js 13 with TypeScript-ESLint

Azad Shukor — Wed, 12 Apr 2023 03:10:20 +0000

Step 1: Create a new Next.js project with TypeScript

To create a new Next.js project with TypeScript, run the following command:

npx create-next-app@latest --ts my-app

Note that my-app is the name of the project folder, and you can replace it with any name you prefer.

During the creation process, you will be asked several questions. Here are the recommended answers:

Would you like to use ESLint with this project? -> Yes
Which ESLint configuration would you like to use? -> Next.js (uses eslint-config-next)
Would you like to use Tailwind CSS? -> No
Would you like to use the src directory? -> No
Would you like to use the experimental app directory? -> Yes
What would you like to name the import alias? -> @/*

This command will create a new Next.js project with TypeScript and the recommended configuration.

Step 2: Install TypeScript-ESLint as a dev dependency

TypeScript-ESLint is a tool that integrates ESLint with TypeScript. To install it as a dev dependency, run the following command:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

This will install two packages: @typescript-eslint/parser, which allows ESLint to understand TypeScript syntax, and @typescript-eslint/eslint-plugin, which provides additional TypeScript-specific ESLint rules.

Step 3: Configure ESLint for TypeScript

ESLint uses a configuration file (.eslintrc.json) to define the rules and plugins that should be used. Open this file and add the following configuration:

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "root": true
}

Step 4: Test the integration

To test the integration, open pages/index.tsx and add the following code:

type Test = {};

This code defines a new type called Test. If you save the file, you should see an error message in your editor, indicating that the code is not valid:

Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `object` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.
- If you want a type meaning "empty object", you probably want `Record<string, never>` instead.

This error message confirms that TypeScript-ESLint is working correctly and is providing helpful feedback on your code.

Congratulations! You have successfully integrated TypeScript-ESLint in Next.js. From now on, ESLint will check your TypeScript code and provide suggestions to improve its quality

Setting up Next.js 13 with Prisma and SQLite

Azad Shukor — Fri, 10 Mar 2023 03:00:57 +0000

In this tutorial, we will demonstrate how to set up a Next.js 13 application with Prisma as the ORM and SQLite as the database.

Prerequisites

Node.js
npm

Step 1: Creating a Next.js application

First, let's create a new Next.js application using the create-next-app command:

npx create-next-app my-app --yes

This command will create a new Next.js application in the my-app directory. When prompted, choose No for TypeScript and No for the experimental app/ directory.

Next, change into the project directory:

cd my-app

Step 2: Setting up SQLite

To set up a SQLite database for our Next.js application, we need to install the sqlite3 package and create a new dev.db file:

npm install sqlite3

Step 3: Setting up Prisma

Next, we need to install the Prisma and initialize a new Prisma project:

npm install prisma --save-dev && prisma init

This will initialize a new Prisma project in our application directory. Then, we can paste the following code into the schema.prisma file:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id    Int    @id @default(autoincrement())
  email String @unique
}

Don't forget to create dev.db file inside prisma folder

cd prisma
touch dev.db

Step 4: Pushing the Prisma schema and starting the Prisma Studio

Finally, we need to push our schema to the database and start the Prisma Studio to view the database:

prisma db push && prisma studio

Conclusion

Congratulations, you have successfully set up a Next.js 13 application with Prisma as the ORM and SQLite as the database. You can now use Prisma to query the SQLite database in your Next.js application.

DEV Community: Azad Shukor

Understanding CIDR Notation

Understanding IPv4 CIDR Blocks

Core Idea (Memorize This First)

IPv4 Structure

Think in Terms of LOCKED vs FREE

Example: 10.0.0.0/16

Step 1: Count free bits

Step 2: Calculate total addresses

Step 3: Visualize

Range:

How to Read Any CIDR Quickly

Rule:

Example: /10

Example: /20

Example: /26

Example: /30

Shortcut Patterns (High Value)

Important Practical Note

Mental Model (Best Way to Think)

One-Line Summary

Next.js ConnectRPC Proxy Pattern

1. Dependencies

2. Proto Definition & Generation

3. The Proxy Utility

4. API Route Implementation

5. Client Consumption

Understanding SSL/TLS Certificates

The Name Game: SSL vs TLS

What Does TLS Actually Do?

The Trust Problem: Certificate Authorities

How It Works: The Certificate Process

Step 1: Generate the Certificate Signing Request (CSR)

Step 2: CA Verification

Step 3: Receive the Signed Certificate

Step 4: Install on Your Server

The Full Handshake (What Happens Behind the Scenes)

Why You Should Care

Quick Start with Let's Encrypt (Free!)

What is display "block" and display "inline"?

Phase 1: The "Why" (The Context)

Phase 2: The Block Element

Phase 3: The Inline Element

Phase 4: The Middle Ground (Inline-Block)

Summary Table for your Memory:

Simplest Chrome Extension Tutorial for 2024 Using Manifest V3

Creating a Color Changer Chrome Extension

Step 1: Set Up the Folder Structure

Step 2: Create the Manifest File

Step 3: Create the Popup HTML

Step 4: Create the Popup JavaScript

Step 5: Create the Background Script

Step 6: Create the Content Script

Step 7: Load and Test the Extension

Displaying dev.to Articles in a React Project with TypeScript

Step 1: Create a React application

Step 2: Set up the Article Interface

Step 3: Fetch dev.to Articles

Step 4: Fetch Articles from the Client Side

Step 5: Finalize the App Component

Step 6: Test and Customize

Conclusion

Setting up Next.js 13 with Vitest

Prerequisites

Step 1: Creating a Next.js application

Setting up Vitest

Step 3: Test the setup

How to Link Your Google Domain with Vercel: A Step-by-Step Guide (2023)

Setting up Next.js 13 with TypeScript-ESLint

Step 1: Create a new Next.js project with TypeScript

Step 2: Install TypeScript-ESLint as a dev dependency

Step 3: Configure ESLint for TypeScript

Step 4: Test the integration

Setting up Next.js 13 with Prisma and SQLite

Prerequisites

Step 1: Creating a Next.js application

Step 2: Setting up SQLite

Step 3: Setting up Prisma

Step 4: Pushing the Prisma schema and starting the Prisma Studio

Conclusion

Example: `10.0.0.0/16`

Example: `/10`

Example: `/20`

Example: `/26`

Example: `/30`