DEV Community: ayka.code

The Complete Developer's Guide to the HTTP Request/Response Lifecycle

ayka.code — Wed, 05 Aug 2026 17:17:47 +0000

From DNS resolution to TCP handshakes and raw headers—here is exactly what happens when your client sends a GET request.

Introduction

The HTTP Request/Response Lifecycle is the synchronous network protocol execution loop through which a client establishes a connection, negotiates a security context, and exchanges structured headers and payloads with a remote server over TCP/IP.

In today's landscape of abstract, zero-configuration cloud hosts, it's easy to forget that beneath every Next.js route or AI agent API call lies a physical sequence of raw socket writes, DNS recursive traversals, and cryptographic handshakes.

Understanding these transport-layer mechanics is not academic; it is the boundary between an application that breaks under load and a robust, scalable system that performs gracefully at production scale.

In this guide, we'll bypass framework-specific abstractions and trace the exact, step-by-step physical journey of an HTTP request.

We'll dissect raw socket interfaces, analyze packet sequence structures, and write a functional client using low-level Go socket primitives to see the protocol in its purest form.

1. Phase 1: Domain Name System (DNS) Recursive Resolution

Before a single socket can be opened, the client must resolve the human-readable domain name into a routable physical IP address.

The process of translating dev.to into an IP address is a highly optimized, hierarchical lookup sequence designed to minimize latency and protect root network resources.

The Local Resolution Chain

The operating system resolver first attempts to fulfill the query locally to bypass network latency.

Browser Cache

Modern browsers maintain their own DNS caches with strict, short Time-to-Live (TTL) expiration frames.

OS Resolver Cache

The browser executes a system call (typically getaddrinfo() on Unix-like systems).

The OS resolver first checks its local static mapping file (/etc/hosts) before searching its system-level DNS cache.

Local Router / ISP Cache

If the record is missing, the resolver queries the Local DNS Server configured via DHCP (usually your router or ISP resolver).

The Recursive Resolution Loop

If the record remains unresolved, the recursive DNS resolver initiates a multi-step query loop across the global DNS hierarchy.

[ OS Resolver ] --(1. Query: dev.to)--> [ Recursive Resolver ]
                                               |
        +--------------------------------------+--------------------------------------+
        | (2. Query .)                         | (4. Query .to)                       | (6. Query dev.to)
        v                                      v                                      v
  [ Root Name Server ]                  [ TLD Name Server ]                  [ Authoritative Name Server ]
  (Returns .to NS)                      (Returns dev.to NS)                  (Returns A/AAAA IP Record)

Root Nameservers (`.`)

The recursive resolver queries one of the 13 logical root nameservers.

The root server does not know the IP address of dev.to, but it returns the name servers responsible for the requested top-level domain.

TLD Nameservers (`.to`)

The resolver queries the .to TLD nameserver.

It responds with the authoritative name servers responsible for dev.to.

Authoritative Nameservers

Finally, the resolver contacts the authoritative DNS server.

This server returns either:

an A Record (IPv4)

an AAAA Record (IPv6)

The IP address is then cached locally and returned to the browser.

2. Phase 2: Transport Layer Connectivity — TCP & TLS 1.3

Once the destination IP is acquired, the client initiates transport layer connectivity.

Since HTTP relies on TCP for reliable, ordered delivery of data streams, a TCP connection must first be established.

Port 80 → HTTP
Port 443 → HTTPS

The TCP Three-Way Handshake

Client                                                  Server
  |                                                       |
  | -------- SYN (Seq = X) -----------------------------> |
  |                                                       |
  | <------- SYN-ACK (Seq = Y, Ack = X + 1) ------------ |
  |                                                       |
  | -------- ACK (Ack = Y + 1) -------------------------> |
  V                                                       V

1. SYN

The client transmits a TCP segment with the SYN flag set.

A random Initial Sequence Number (ISN) is generated.

2. SYN-ACK

The server allocates TCP buffers, generates its own sequence number, and acknowledges the client's sequence.

3. ACK

The client acknowledges the server.

The TCP connection is now established.

The Cryptographic Dance: TLS 1.3

TLS 1.3 reduces connection setup from two round trips (TLS 1.2) to a single round trip.

Step 1 — Client Hello

The client sends:

Supported TLS versions
Supported cipher suites
ECDHE public key

Step 2 — Server Hello

The server returns:

Selected cipher suite
Server certificate
Server public key
Handshake signature
Finished message

Both parties independently compute the same symmetric session key.

Step 3 — Client Finished

The client verifies the certificate, validates the signature, computes the shared secret, and sends an encrypted Finished message.

From this point onward, every byte written to the TCP socket is encrypted.

3. Phase 3: Inside the Raw HTTP Request

With TLS established, the browser constructs the actual HTTP request.

Instead of using net/http, we'll manually build and transmit an HTTP request over a raw socket.

package main

import (
    "crypto/tls"
    "fmt"
    "io"
    "log"
    "net"
)

func main() {
    host := "dev.to"
    port := "443"
    address := net.JoinHostPort(host, port)

    // Step 1: Establish low-level TCP Connection
    tcpConn, err := net.Dial("tcp", address)
    if err != nil {
        log.Fatalf("Failed to establish TCP connection: %v", err)
    }
    defer tcpConn.Close()

    fmt.Printf("[+] Established TCP Connection to %s\n", address)

    // Step 2: Wrap TCP connection in TLS
    tlsConfig := &tls.Config{
        ServerName: host,
        MinVersion: tls.VersionTLS13,
    }

    tlsConn := tls.Client(tcpConn, tlsConfig)

    err = tlsConn.Handshake()
    if err != nil {
        log.Fatalf("TLS Handshake failed: %v", err)
    }

    fmt.Printf(
        "[+] Established TLS 1.3 Session. Cipher Suite: %s\n",
        tls.CipherSuiteName(
            tlsConn.ConnectionState().CipherSuite,
        ),
    )

    // Step 3: Construct raw HTTP request
    httpRequest :=
        "GET / HTTP/1.1\r\n" +
            "Host: " + host + "\r\n" +
            "User-Agent: RawGoSocketClient/1.0\r\n" +
            "Accept: text/html,application/xhtml+xml\r\n" +
            "Connection: close\r\n" +
            "\r\n"

    // Step 4: Send request
    _, err = io.WriteString(tlsConn, httpRequest)
    if err != nil {
        log.Fatalf("Failed to write HTTP request: %v", err)
    }

    fmt.Println("[+] Sent Raw HTTP GET Request:")
    fmt.Println(httpRequest)

    // Step 5: Read response
    responseBuffer := make([]byte, 4096)

    n, err := tlsConn.Read(responseBuffer)
    if err != nil && err != io.EOF {
        log.Fatalf("Error reading response bytes: %v", err)
    }

    fmt.Println("[+] Received Raw Response Bytes:")
    fmt.Println(string(responseBuffer[:n]))
}

Deconstructing the HTTP Request Structure

A raw HTTP request consists of three logical sections.

Request Line

GET / HTTP/1.1

GET → HTTP Method
/ → Requested resource
HTTP/1.1 → Protocol version

Headers

Headers provide metadata about the request.

Example:

Host: dev.to
User-Agent: RawGoSocketClient/1.0
Accept: text/html

The Host header is mandatory in HTTP/1.1 because servers often host multiple websites on the same IP.

Blank Line

A mandatory \r\n\r\n separates the headers from the body.

If this were a POST request, the JSON payload would begin immediately afterward.

4. Phase 4: Server Processing and the Raw HTTP Response

When encrypted bytes arrive at the server's Network Interface Card (NIC), the operating system passes them to the listening web server.

Examples include:

NGINX
HAProxy
Apache
Go binaries

Server Processing Loop

TLS Decryption
Parse the HTTP stream
Route the request
Authentication / Authorization
Database queries
Construct the response
Send the response back through the encrypted TLS socket

Raw HTTP Response

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1042
Connection: close
Date: Wed, 05 Aug 2026 11:56:15 GMT
Cache-Control: public, max-age=3600
ETag: "9b4d186f-52fe"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEV Community</title>
</head>
<body>
    <h1>Welcome to DEV!</h1>
</body>
</html>

Response Structure

Status Line

HTTP/1.1 200 OK

Contains:

Protocol
Status code
Status text

Headers

Examples include:

Content-Type
Content-Length
Cache-Control
ETag

Blank Line

Separates headers from the response body.

Body

The actual resource:

HTML
JSON
Images
CSS
JavaScript

5. Phase 5: Performance Optimization & Caching Boundaries

To protect origin servers and reduce latency, modern applications rely heavily on caching.

Browser Cache

Example:

Cache-Control: max-age=31536000, immutable

This instructs the browser to reuse the resource without contacting the server for up to one year.

ETags and Conditional Requests

Suppose the cached asset expires.

Instead of downloading the file again, the browser sends:

If-None-Match: "9b4d186f-52fe"

If the file has not changed, the server responds with:

304 Not Modified

No body is transmitted, saving bandwidth.

CDN Edge Caching

Content Delivery Networks (CDNs) cache static assets at servers geographically close to users.

Instead of reaching the origin server, clients receive content from nearby edge locations.

Benefits include:

Lower latency
Faster page loads
Reduced origin server load
Improved Largest Contentful Paint (LCP)

Conclusion

The HTTP request/response lifecycle is a highly choreographed protocol sequence executed millions of times per second.

Behind the elegant abstractions of modern frameworks lies a transport layer governed by strict rules of synchronization, validation, and encryption.

By understanding the complete journey your data takes—from DNS resolution to TCP connectivity, TLS encryption, HTTP message construction, server processing, and caching—you gain the systems-level knowledge needed to build faster, more resilient, and production-ready applications.

Follow me

📐👷🏻‍♂️🏛️ | A quick architecture challenge for you - Rate-limiting

ayka.code — Tue, 28 Jul 2026 10:38:30 +0000

Hi there,

I just shared a new visual lesson on X, and I thought you'd enjoy it.

It's a simple architecture challenge:

You're building an LLM generation API.

Which rate-limiting algorithm would you choose?

Token Bucket?

Sliding Window Counter?

The first image presents a real-world scenario and lets you think through the problem on your own. The second image walks through the reasoning, explains how both algorithms work, and shows when each one is the better choice in production.

If you enjoy learning through visual diagrams instead of long articles, I think you'll like this one.

Check out the post here 👇

📐👷🏻‍♂️🏛️ | A quick architecture challenge for you - Rate-limiting

If you're not following me on X yet, consider following me there. I regularly share practical backend architecture, system design, Node.js, DevOps, security, and distributed systems content that doesn't always make it into my courses or emails.

Thanks for being part of this community, and I'd love to know which algorithm you picked before seeing the answer.

Build a Serverless RAG Engine for with Gemini chatbot and deploy it for $0

ayka.code — Fri, 13 Feb 2026 12:30:01 +0000

Master modern AI architecture with Node.js, Gemini 2.5, and Cloudflare R2

👉 Get the Source Code & Template Here

👉 Read the full tutorial here

Introduction: The Problem with "Toy" RAG Apps

Most RAG tutorials skip the hard parts that actually matter in production:

No security model: Users can access each other's private data.
Naive file handling: Large uploads crash your Node.js server.
Expensive infra: AWS egress fees and managed vector DBs drain your wallet.
Blocking operations: Processing files freezes your entire API.

We are going to solve all of these using a production-proven architecture.

The $0 Tech Stack

Every piece of this stack has a generous free tier:

Cloudflare R2: S3-compatible storage with zero egress fees.
Gemini 2.5 Flash: High-performance LLM with a free tier of 15 requests/minute.
PostgreSQL + pgvector: Battle-tested database with native vector support.
BullMQ: Redis-backed job queue to handle heavy processing in the background.

Step 1: Understanding the Architecture

We follow a 4-phase workflow designed for scale:

Direct-to-Cloud Uploads: Browser uploads files directly to R2 using presigned URLs. Your server never touches the raw bytes, preventing memory crashes.
Asynchronous Ingestion: A BullMQ worker handles the "heavy lifting"—downloading, chunking, and embedding—without blocking your API.
Hybrid Retrieval: We use PostgreSQL row-level security so users only search their own data.
Contextual Generation: Gemini generates answers with smart citations (temporary links to the source files).

Step 2: Zero-Cost Storage with Cloudflare R2

Traditional uploads stream data through your server. If 10 users upload 50MB files simultaneously, your server spikes by 500MB and likely crashes.

The Solution: The Reservation Pattern
We issue a time-limited Presigned URL. The browser sends the file directly to Cloudflare.

// Backend: Generate the permission
const { signedUrl, fileKey, fileId } = await uploadService.generateSignedUrl(
  fileName,
  fileType,
  fileSize,
  isPublic,
  req.user 
);
res.send({ signedUrl, fileKey, fileId });

Step 3: Contextual Query Rewriting

If a user asks "Who is the CEO of Tesla?" followed by "What about SpaceX?", a naive vector search for "What about SpaceX?" will fail because it lacks context.

We use Gemma 3-12B to rewrite queries in ~200ms:

// User: "What about SpaceX?"
// Gemma Rewrites: "Who is the CEO of SpaceX?"

This ensures your vector search actually finds the right documents.

Step 4: Hybrid Search with Row-Level Security

Multi-tenancy is the biggest hurdle in RAG. You can't let User A see User B's documents. Instead of filtering in JavaScript (which is slow and buggy), we do it in SQL:

SELECT d.content, d.metadata, f."originalName",
       (d.embedding <=> ${vectorQuery}::vector) as distance
FROM "Document" d
LEFT JOIN "File" f ON d."fileId" = f.id
WHERE (d."userId" = ${userId} OR f."isPublic" = true)
ORDER BY distance ASC LIMIT 5;

This enforces security at the database layer. No accidental data leaks.

Step 5: Visual RAG - Understanding Images

Traditional RAG is text-only. If you upload a receipt, most systems fail. We use Gemini Vision to describe the image in detail, then embed that description.

Input	Gemini Vision Output
Photo of coffee receipt	"Starbucks receipt, Jan 15, 2026. Grande Latte $5.45. Paid with Visa..."

Now, when you search "How much did I spend at Starbucks?", the system finds the image because of its semantic description.

Conclusion: Build vs Buy

Commercial RAG solutions can cost $1,900+/year. By building this architecture, you save that money while gaining skills in:

Distributed systems (BullMQ)
Vector Database optimization (pgvector)
Cloud Security (Presigned URLs)

🚀 Want the Full Source Code?

If you want to save 40+ hours of setup, I’ve packaged this entire production-ready architecture into the Node.js Enterprise Launchpad.

Standard Price: $20
Launch Special: $4 (80% OFF)

It includes the RAG pipeline, Auth, RBAC, Socket.io, and Docker configurations.

👉 Get the Source Code & Template Here

Build Your First REST API with Node.js and Express (in 15 Minutes)

ayka.code — Tue, 10 Jun 2025 09:58:58 +0000

Learning backend development might seem overwhelming at first — databases, APIs, routing, deployment — where do you even start?

Well, here's some good news: You can build your first backend API using Node.js and Express in just 15 minutes. And by the end of this post, you'll have your own working API ready to go!

Let’s jump right in 👇

🚀 What We're Building

A simple Books API with 3 routes:

GET /books — List all books
POST /books — Add a new book
GET /books/:id — Get a book by ID

🛠️ Step 1: Setup Your Project

mkdir books-api
cd books-api
npm init -y
npm install express

Create a file named index.js.

🧠 Step 2: Create a Simple Express Server

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // for parsing JSON

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Run the server:

node index.js

📚 Step 3: Add Book Routes

let books = [
  { id: 1, title: 'Clean Code' },
  { id: 2, title: 'The Pragmatic Programmer' },
];

// GET all books
app.get('/books', (req, res) => {
  res.json(books);
});

// GET a book by ID
app.get('/books/:id', (req, res) => {
  const book = books.find(b => b.id === parseInt(req.params.id));
  if (!book) return res.status(404).send('Book not found');
  res.json(book);
});

// POST a new book
app.post('/books', (req, res) => {
  const book = {
    id: books.length + 1,
    title: req.body.title,
  };
  books.push(book);
  res.status(201).json(book);
});

Now you can:

Use Postman or Insomnia to send GET, POST requests

Try it out at http://localhost:3000/books

🌱 What You Just Learned

How to set up an Express server
Basic routing in Node.js
Handling JSON input
Working with dynamic route parameters

This is the first step toward building real-world backend applications.

🎓 Want to Go Deeper?

This was just a glimpse into what you can build with Node.js. If you enjoyed this, I've created a full all-in-one backend development course that covers:

✅ Node.js, Express, TypeScript
✅ MongoDB, PostgreSQL, Mongoose
✅ REST & GraphQL APIs
✅ Authentication, Stripe, Docker
✅ GitHub Actions, CI/CD, and more

🎁 Grab the course with two options:

💸 Support the course (only $9.99):
https://www.udemy.com/course/express-typescript-nodejs-mongodb-more-the-real-path/?couponCode=93AC6D647A1F2AD85580

🙌 Get it free (for early learners):
https://www.udemy.com/course/express-typescript-nodejs-mongodb-more-the-real-path/?couponCode=FA39975BFDE32309993C

Learn Node.js Before React.js: Mastering Node.js as Your First Step Towards Full-Stack Domination

ayka.code — Sun, 02 Jul 2023 12:27:02 +0000

Are you an aspiring JavaScript developer looking to expand your skills and embark on a journey towards becoming a full-stack developer? It's time to make a smart choice that sets a solid foundation for your programming career. In this blog post, we'll explore why starting with Node.js is the best way to kickstart your full-stack development journey. By the end, you'll understand the immense potential Node.js holds and why investing in my comprehensive Node.js course on Udemy is the perfect next step for you.

Why Node.js before React?

While React is undoubtedly a powerful front-end library, mastering Node.js first opens up a world of opportunities that will enhance your overall development prowess. Here are three compelling reasons to prioritize Node.js before diving into React:

1. Full-Stack Synchronization: Node.js enables you to build both the server-side and client-side components of your application using a single language, JavaScript. This synchronicity results in smoother collaboration between the front-end and back-end teams, facilitating faster development cycles and efficient code sharing.

2. Unleashing JavaScript Everywhere: By focusing on Node.js, you solidify your understanding of JavaScript and unlock its full potential on the server-side. This empowers you to build scalable and high-performance web applications, handle real-time communication with ease, and even dive into areas like machine learning and Internet of Things (IoT).

3. Broader Career Opportunities: Node.js has seen a rapid rise in popularity, with numerous enterprises and startups adopting it as their go-to backend solution. Mastering Node.js not only equips you with in-demand skills but also broadens your job prospects and increases your earning potential as a full-stack developer.

Introducing: Nodejs, Express, Typescript, MongoDb & more: The real path Course,

Ready to take the leap and become a proficient Node.js developer? My course, "Nodejs, Express, Typescript, MongoDb & more: The real path," on Udemy is designed with your learning journey in mind. Here's what you can expect:

- Comprehensive Curriculum: Learn the ins and outs of Node.js, including advanced concepts and best practices. Dive into TypeScript, a statically typed superset of JavaScript, to enhance your code quality and development experience.

- Building a Shopping API: Construct a robust shopping API from scratch, incorporating essential features like user authentication, product listing, cart management, and seamless payment integration using Stripe.

- Real-World Projects: Develop practical skills by working on hands-on projects that mimic real-life scenarios. Gain confidence in building scalable APIs and deploying them to production environments.

- Engaging Learning Experience: Benefit from clear explanations, code samples, and quizzes to solidify your understanding of Node.js and TypeScript concepts. The course also provides ongoing support and a vibrant community to assist you along your learning journey.

Choosing the right path for your full-stack development career is crucial. By starting with Node.js, you'll acquire a versatile skill set that empowers you to create powerful applications across the entire tech stack. Take the next step today by enrolling in my "Nodejs, Express, Typescript, MongoDb & more: The real path" course on Udemy. Unleash your potential, become a sought-after developer, and embark on an exciting journey towards full-stack domination.

Don't wait—invest in your future now!

The Ultimate GraphQL and Apollo Server Course with Express and TypeScript

ayka.code — Sun, 23 Apr 2023 07:39:04 +0000

Are you ready to take your API development skills to the next level? Look no further than *The Ultimate GraphQL and Apollo Server Course with Express and TypeScript! (9.99$ for limited time!)
*
In this comprehensive course, we'll start with the basics of GraphQL and Apollo Server and gradually move on to more advanced topics. You'll learn how to use GraphQL with Apollo and advanced tools and technologies to build powerful APIs.

We'll cover key concepts like queries, mutations, and schemas, as well as advanced topics like SocketIo, JWT, and database migration with TypeORM. You'll also learn how to work with TypeORM and use Postgres with Docker, giving you the tools you need to build scalable and efficient APIs.

The teaching is clear and the content is comprehensive, making this course the ultimate resource for developers looking to master GraphQL and Apollo Server with TypeScript and Express. The skills you'll learn are in high demand in the job market, making this course a valuable investment in your career.

By the end of the course, you'll have the skills and knowledge to build your own GraphQL API using Apollo Server and Express with TypeScript, as well as advanced features like SocketIo and database migration with TypeORM. You'll also be able to confidently work with GraphQL and Apollo Server in your own projects.

Enroll now in The Ultimate GraphQL and Apollo Server Course with Express and TypeScript and take your API development skills to the next level!

Do You Really Need to Learn Every Git Command to be a Senior or Mid-Senior Web Developer?

ayka.code — Sat, 14 Jan 2023 19:20:10 +0000

Read on my personal blog: bracketOrbits

As a web developer, it's important to have a solid understanding of version control and Git is one of the most widely used tools for this purpose. But the question is, do you really need to know every single Git command to be a senior or mid-senior web developer? The short answer is no.

While it's certainly beneficial to have a deep understanding of all the different commands and options that Git offers, it's not a requirement for being a successful web developer. In fact, many experienced developers only use a small subset of the available commands on a regular basis.

One of the great things about the field of web development is that it is constantly evolving and changing. This means that as you progress in your career and take on new projects and challenges, you will naturally learn the Git commands that are most relevant to your work. For example, if you work on a large project with many contributors, you will likely need to know how to resolve merge conflicts. On the other hand, if you work on a smaller project with fewer collaborators, you may not need to use this command as often.

The most important thing is to have a good understanding of the basic Git workflow: how to commit, push, pull, and branch. Once you have a solid grasp of these concepts, you can start to explore more advanced features like merging and rebasing.

Here are some of the most commonly used Git commands that are important for each developer to know:

git init: Initializes a new Git repository.

git clone: Creates a copy of a remote repository on your local machine.

git add: Adds changes to the staging area, preparing them to be committed.

git commit: Records changes to the repository with a commit message.

git status: Shows the status of the current repository, including changes that have been made but not yet committed.

git log: Shows a history of all commits made in the repository.

git diff: Shows the differences between the working tree and the last committed version.

git branch: Shows a list of all branches in the repository, with the current branch indicated by an asterisk.

git checkout: Allows you to switch between branches or restore specific file versions.

git merge: Merges changes from one branch into another.

git pull: Fetches the latest changes from a remote repository and merges them with the local branch.

git push: Pushes the local changes to a remote repository.

Another important aspect of Git is understanding how to use it in conjunction with other tools, such as Github or Gitlab. These platforms provide a convenient way to collaborate with other developers and track issues and pull requests. Knowing how to navigate these platforms and use their features is a valuable skill for any web developer.

In summary, while it's great to have a deep understanding of all the different Git commands, it's not a requirement for being a senior or mid-senior web developer. The most important thing is to have a good understanding of the basic Git workflow and how to use it in conjunction with other tools. And as you progress in your career and take on new projects, you will naturally learn the Git commands that are most relevant to your work.

Maximizing the Power of Child Processes in Node.js: Real-world Examples

ayka.code — Fri, 13 Jan 2023 15:12:44 +0000

Node.js is a popular open-source JavaScript runtime that allows developers to build scalable and high-performance web applications. One of the most powerful features of Node.js is its ability to handle child processes. Child processes allow you to spawn new processes, run shell commands, execute scripts, or even fork multiple processes to handle a heavy workload. In this blog post, we will discuss how to use child processes in Node.js and provide real-world examples of how they can be used to improve the performance and scalability of your application.

Using the Child Process module

The built-in 'child_process' module in Node.js provides several methods for spawning and managing child processes. The most commonly used methods are 'exec', 'spawn', and 'fork'.

'exec' method: This method allows you to...Read more:

Maximizing the Power of Child Processes in Node.js: Real-world Examples| BracketOrbits [👨‍💻]

Learn about the power of child processes in Node.js and how they can be used to improve performance and scalability. Discover real-world exam....

bracketorbits.vercel.app

Mastering React in One Month: A Step-by-Step Guide

ayka.code — Wed, 11 Jan 2023 11:23:41 +0000

Mastering React in One Month: A Step-by-Step Guide| BracketOrbits [👨‍💻]

Learn how to master React in just one month with this step-by-step guide. Dedicate 6 hours a day to studying and practicing, and follow our schedule and r....

bracketorbits.vercel.app

Scaling Node.js Applications: Strategies and Techniques

ayka.code — Sun, 08 Jan 2023 22:41:34 +0000

Check on my personal blog: BraketOrbits

As web applications grow and the number of users increases, it becomes important to ensure that the application can scale effectively to handle the increased load. If an application is unable to scale, it can lead to slow response times and a poor user experience.

One popular backend technology that is often used to build scalable web applications is Node.js. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows developers to build scalable network applications quickly and efficiently.

There are several strategies and techniques that can be used to scale Node.js applications. Some of the most effective strategies include:

Vertical scaling: This involves increasing the resources available to a single server, such as adding more CPU or memory. This can be an effective way to scale an application, but it can become expensive as the application grows.

Horizontal scaling: This involves adding more servers to the application, allowing it to handle more traffic and users. This can be an effective way to scale an application, but it requires careful planning to ensure that the application is able to distribute traffic and data effectively across multiple servers.

Caching: Caching involves storing frequently accessed data in a cache so that it can be quickly retrieved when needed. This can help to reduce the load on the database and improve the performance of the application.

Load balancing: This involves distributing traffic across multiple servers to ensure that no single server is overwhelmed. This can be achieved through the use of a load balancer, which routes traffic to the appropriate server based on factors such as server availability and workload.

Asynchronous programming: Node.js uses an event-driven, non-blocking I/O model, which makes it well-suited for scalable applications. By writing code that makes use of asynchronous programming techniques, it is possible to build highly scalable applications that can handle a large number of concurrent requests.

By implementing these strategies and techniques, it is possible to build scalable Node.js applications that can handle a large number of users and a high volume of traffic. This can help to ensure that your application delivers a fast and reliable experience to your users.

Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions

ayka.code — Fri, 06 Jan 2023 21:41:04 +0000

For clear an better UI you can read this blog post on my personal blog: Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions

If you have a blog or website, you may want to create open graph (OG) images to use when sharing your content on social media platforms. OG images are displayed when someone shares your content on social media, and they help to give context to the shared content and make it more visually appealing.

In this tutorial, we'll look at how to create dynamic OG images in a Next.js application using a serverless function. We'll use the @vercel/og package to create the OG image within the serverlessfunction.

Before we get started, you'll need to have a Next.js application set up. If you don't already have one, you can create a new Next.js project by running the following command:

npx create-next-app

Install the @vercel/og package:

npm install @vercel/og

Now that we have the necessary packages installed, we can create the serverless function that will generate the OG image. To do this, create a og.js in the api folder of your Next.js project and import ImageResponse class at the top of the file:

import { ImageResponse } from '@vercel/og';

Next, we'll set the runtime for the serverless function to "edge" in the config object:

export const config = {
  runtime: 'edge',
};

This will ensure that the function is executed on the edge network, which is required for creating OG images.
Now, let's define the main handler function for the serverless function:

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);
    // code for generating the OG image goes here
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

This function takes a request object as an argument and returns an OG image response. If an error occurs while generating the image, it returns a response with a status of 500 and an error message.

Now let's start adding the code for generating the OG image. First, we'll parse the search parameters from the request URL:

const { searchParams } = new URL(req.url);

Then, we'll check if the title search parameter is present in the query string:

const hasTitle = searchParams.has('title');

If the title parameter is present, we slice it to a maximum of 100 characters and assign it to the title variable, If the title parameter is not present, we set the title variable to the default value of "DevToMars":

const title = hasTitle
  ? searchParams.get('title')?.slice(0, 100)
  : 'DevToMars';

Next, we retrieve the mainTopics search parameter from the query string and split it into an array using the split method:

const mainTopics = searchParams.get('mainTopics').split(",")

This allows us to pass multiple main topics as a comma-separated list in the query string.

Now that we have the title and mainTopics variables, we can use them to render the OG image. To do this, we use the ImageResponse class from the @vercel/og package, which allows us to create an OG image from a React component.

We pass a simple div element with some inline styles applied to it to the ImageResponse class as the React component . The styles specify the layout and appearance of the OG image:

return new ImageResponse(
      (
        <div
          style={{
            backgroundColor: 'black',
            backgroundSize: '150px 150px',
            height: '100%',
            width: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            flexWrap: 'nowrap',
            padding: "65px",
          }}
        >
   {/* The Body of the Image */}
</div>

As you can see, we are displaying the div as a flex because Next.js requires this for every element with more than one child. You can use Tailwindcss for styling, but I don't recommend it because it is not stable and it is not fully supported for generating images with Next.js.

Our image will contain a title that fills up 75% of the image width with some padding and a margin-top of 30px, a logo with a brand name, and a list of main topic tags. :

...
<div style={{
                fontSize: 60,
                fontStyle: 'normal',
                letterSpacing: '-0.025em',
                color: 'white',
                marginTop: 30,
                padding: '0 100px',
                lineHeight: 1.4,
                whiteSpace: 'pre-wrap',
                height: "75%",
                fontWeight: 700,
                textTransform: "capitalize"
            }} className="w-10 capitalize">
                {title}
            </div>
            <div style={{ display: "flex", flexDirection: "row", gap: "10px", alignItems: "center" }} >
                <div style={{ width: "70px", height: "70px", display: "flex" }}>
                    <img 
                        src="https://media.graphassets.com/gncWvSEqRFaBSUPZGoTP"
                        width={70}
                        height={70}
                        alt="devtomars blog"
                    />
                </div>

                <div style={{
                    backgroundClip: "text",
                    color: "transparent",
                    backgroundImage: "linear-gradient(to right, #ec4899, #8b5cf6)",
                    fontWeight: 700,
                    fontSize: 30
                }} >DevToMars</div>


                <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end", justifyItems: "center",width: "75%" }}>
                    {
                        mainTopics.map((topic, i) => (
                            <div key={i} style={{ color: "black",  fontSize: 20, padding: "5px", margin: "3px", backgroundColor: "white", borderRadius: "8px" }}>{topic}</div>
                        ))
                    }
                </div>
            </div>
...

Finally, we pass an option object to create an OG image with a width of 1200 pixels and a height of 630 pixels:

return new ImageResponse(
  // JSX element here
  {
    width: 1200,
    height: 630,
  },
);

And that's it! You now have a serverless function that can generate dynamic OG images for your Next.js application. To use the function, simply make a request to the function's URL with the desired title and mainTopics query parameters. For example:

https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react

This will generate an OG image with the title "My Blog Post" and the main topics "nodejs", "javascript", and "react".
You can then use the generated OG image in your social media sharing tags, like so:

<meta property="og:image" content="https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react" />

That's it! You now know how to create dynamic OG images for your Next.js application using a serverless function. I hope this tutorial was helpful!

Create a Post Editor Similar to Twitter with a Responsive Images Grid with tailwindcss

ayka.code — Thu, 05 Jan 2023 21:02:17 +0000

Check my original blog post for better UI: Create a Post Editor Similar to Twitter with a Responsive Images Grid with tailwindcss

In this tutorial, we will create a React component for a social media post editor that allows the user to write posts and display a grid of selected images while preserving their aspect ratio. The component also allows the user to remove images from the grid.

We're going to use Tailwindcss and nextjs in this tutorial so make sure to install and configure your project following Tailwind css with Nextjs guide.

To get started, let's import the necessary dependencies and create a functional component called PostEditorImages:

import React, { useEffect, useState } from 'react';

const PostEditorImages = ({ images, removeImage }) => {
  // component code goes here
}

Our component will accept two props:

images: an array of images of type File, representing the images to be displayed in the grid.
removeImage: a function that removes an image from the images array and updates the state of the parent component.

Next, let's set up some state variables that we will use to control the layout of the image grid:

const [imagesContainerGrid, setImagesContainerGrid] = useState("grid-cols-2 grid-rows-2");
const [aspectRatios, setAspectRatios] = useState({});

The imagesContainerGrid state variable will hold a string of CSS class names that define a grid template columns of 2 and rows of 2. The aspectRatios state variable will hold an object that maps the index of each image to its aspect ratio.

Now, let's write a useEffect hook that updates the imagesContainerGrid state variable based on the number of images:

useEffect(() => {
  setImagesContainerGrid(images.length >= 3 ? "grid-cols-2 grid-rows-2 h-[300px]" : images.length > 1 ?"grid-cols-2" : "grid-cols-1");
}, [images]);

This useEffect hook will run every time the images prop changes. If there are three or more images, it will set the imagesContainerGrid state variable to a string that specifies a grid with two columns and two rows, with a fixed height of 300px. If there are two or more images, it will set the imagesContainerGrid state variable to a string that specifies a grid with two columns. If there is only one image, it will set the imagesContainerGrid state variable to a string that specifies a grid with one column.

Now, let's write a useEffect hook that calculates the aspect ratio of each image and updates the aspectRatios state variable:

useEffect(() => {
      images.forEach((image, index) => {
        const reader = new FileReader();

        reader.onload = function(event) {
          const data = event.target.result;
          const img = new Image();
          img.src = data;
          img.onload = function() {

            const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
            const numerator = img.width / gcd(img.width, img.height);
            const denominator = img.height / gcd(img.width, img.height);
            setAspectRatios(ratios => ({ ...ratios, [index]: `${numerator}/${denominator}` }));
          };
        };

        reader.readAsDataURL(image);
      });
}, [images]);

This code iterates over an array of images and calculates the aspect ratio of each image. It does this by:

Creating a FileReader object for each image, which allows the code to read the contents of the file as a data URL.
Setting an onload event handler for the FileReader object, which is called when the file has been successfully read. The event handler creates a new image object, sets its src property to the data URL, and sets an onload event handler for the image object.

The onload event handler for the image object calculates the aspect ratio of the image by dividing the width by the greatest common divisor of the width and height, and dividing the height by the greatest common divisor. It then updates the aspectRatios state variable by creating a new object that spreads the existing aspect ratios and adds a new key-value pair for the current image's index and aspect ratio.

Finally, the code calls the readAsDataURL method on the FileReader object, passing in the image file as an argument. This starts the process of reading the file as a data URL.

Finally, let's render the image grid in the component's JSX:

return (
  <div className={` [grid-area:images] grid gap-1 ${imagesContainerGrid}  `}>
    {/* display the selected images */}
    {images.length > 0 &&
      [...images].map((image, index) => (
        <div
          key={image.name}
          className={`relative rounded-md`}
          style={{
            backgroundImage: `url(${URL.createObjectURL(image)})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat',
            width: '100%',
            height: '100%',
            aspectRatio: aspectRatios[index]
          }}
        >
          <button
            className="absolute flex items-center justify-center top-0 text-sm right-0 p-2 text-white rounded-full w-7 h-7 shadow-md bg-black bg-opacity-60 hover:bg-opacity-100"
            onClick={() => removeImage(index)}
          >
            <span>X</span>
          </button>
        </div>
      ))
    }
  </div>
);

This JSX creates a div of grid-area:images that will be defined in the parent component , with the grid class and the imagesContainerGrid class, which defines the layout of the image grid. Inside the div, it maps over the images array and renders a div for each image.
Each image div has a background image set to the image file, and the aspectRatio style property set to the aspect ratio of the image. The div also has a remove button that calls the removeImage function and passes in the index of the image to be removed.

That's it! With these simple steps, we have created a React component that displays a grid of images selected by the user, and allows the user to remove images from the grid.

To use the component, we need to create the SocialMediaTextEditor component which represents the text editor for the the social media app:

const SocialMediaTextEditor = () => {
  const [text, setText] = useState('')// state to store the text;
  const [images, setImages] = useState([]); // state to store the images


  const imageContainerRef = useRef()

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const handleImageChange = (event) => {
    // update the images state by concatenating the selected files with the existing ones
    setImages([...images, ...event.target.files]);
  };

  const removeImage = (index) => {
    // create a new array with the selected image removed
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
  };

  return (...)

Here, we have the handleTextChange to save the latest value of the text field, the handleImageChange and removeImage functions are responsible for adding and removing images from the images list.

Now lets define and style the post editor component using grid template areas with tailwindcss:

return (
   <div
  className={` rounded-lg p-4
    grid gap-y-1
    grid-cols-[40px_5px_1fr]
    grid-rows-[40px_1fr_minmax(0,_max-content)_40px]
    [grid-template-areas:'profile_p1_post'_'empty2_p3_post'_'empty3_p3_images'_'empty4_p4_postActions']`}

>
{/*  */}
  </div>
)

The SocialMediaTextEditor component contains a profile area where you can add a profile image. The post area represents the text field where the user can write their post. The p1, p3, and p4 represent a 5px gap that is defined in the grid-cols-[40px_5px_1fr] layout. The postActions area holds the upload images button and the post button. The emptyX fills in the profile area in all grid rows except the first row, giving the component a similar style to the Twitter post editor.

Now, let's define the JSX code for the profile, text field, and displayed images:

...
⁠   {/* profile area */}
  <div className="[grid-area:profile] rounded-full bg-red-500" />
  {/* post area */}
  <textarea
    className="w-full [resize:none] [grid-area:post] h-fit p-2 rounded-lg text-gray-500  focus:outline-none"
    placeholder="Write your post here..."
    value={text}
    onChange={handleChange}
  />

  {/* display selected images */}
  <PostEditorImages images={images} removeImage={removeImage} />
⁠
...

Now add the jsx code that will allow us to select images from the local system :

...
{/* display selected images */}
 <PostEditorImages images={images} removeImage={removeImage} />

  <div className="[grid-area:postActions] flex flex-row justify-between">
    <div className="justify-self-start flex flex-row gap-2">
      {/* add the input element to select images */}
      <label htmlFor="image-upload" className="cursor-pointer">
        <FaImage size={20} color="rgb(31 41 55)" />
      </label>
      <input
        id="image-upload"
        type="file"
        accept="image/*"
        multiple
        onChange={handleImageChange}
        className="hidden"
      />
    </div>
    <button
        className="bg-red-500 justify-self-end hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
    >
        Post
    </button>
 </div>
⁠
...

You can import the FaImage component from react-icons package.

That's it! You now have a fully functional social media post editor component with a responsive display images grid and a style similar to the Twitter post editor. Of course, you still need to create the logic for uploading the images to the server.

I hope this tutorial was helpful in showing you how to display and manage a grid of images in a React app. Happy coding!

DEV Community: ayka.code

The Complete Developer's Guide to the HTTP Request/Response Lifecycle

Introduction

1. Phase 1: Domain Name System (DNS) Recursive Resolution

The Local Resolution Chain

The Recursive Resolution Loop

Root Nameservers (.)

TLD Nameservers (.to)

Authoritative Nameservers

2. Phase 2: Transport Layer Connectivity — TCP & TLS 1.3

The TCP Three-Way Handshake

1. SYN

2. SYN-ACK

3. ACK

The Cryptographic Dance: TLS 1.3

Step 1 — Client Hello

Step 2 — Server Hello

Step 3 — Client Finished

3. Phase 3: Inside the Raw HTTP Request

Deconstructing the HTTP Request Structure

Request Line

Headers

Blank Line

4. Phase 4: Server Processing and the Raw HTTP Response

Server Processing Loop

Raw HTTP Response

Response Structure

Status Line

Headers

Blank Line

Body

5. Phase 5: Performance Optimization & Caching Boundaries

Browser Cache

ETags and Conditional Requests

CDN Edge Caching

Conclusion

📐👷🏻‍♂️🏛️ | A quick architecture challenge for you - Rate-limiting

Build a Serverless RAG Engine for with Gemini chatbot and deploy it for $0

Master modern AI architecture with Node.js, Gemini 2.5, and Cloudflare R2

Introduction: The Problem with "Toy" RAG Apps

The $0 Tech Stack

Step 1: Understanding the Architecture

Step 2: Zero-Cost Storage with Cloudflare R2

Step 3: Contextual Query Rewriting

Step 4: Hybrid Search with Row-Level Security

Step 5: Visual RAG - Understanding Images

Conclusion: Build vs Buy

🚀 Want the Full Source Code?

Build Your First REST API with Node.js and Express (in 15 Minutes)

🚀 What We're Building

🛠️ Step 1: Setup Your Project

🧠 Step 2: Create a Simple Express Server

📚 Step 3: Add Book Routes

🌱 What You Just Learned

🎓 Want to Go Deeper?

🎁 Grab the course with two options:

Learn Node.js Before React.js: Mastering Node.js as Your First Step Towards Full-Stack Domination

Why Node.js before React?

The Ultimate GraphQL and Apollo Server Course with Express and TypeScript

Do You Really Need to Learn Every Git Command to be a Senior or Mid-Senior Web Developer?

Maximizing the Power of Child Processes in Node.js: Real-world Examples

Using the Child Process module

Maximizing the Power of Child Processes in Node.js: Real-world Examples| BracketOrbits [👨‍💻]

Mastering React in One Month: A Step-by-Step Guide

Mastering React in One Month: A Step-by-Step Guide| BracketOrbits [👨‍💻]

Scaling Node.js Applications: Strategies and Techniques

Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions

Create a Post Editor Similar to Twitter with a Responsive Images Grid with tailwindcss

Root Nameservers (`.`)

TLD Nameservers (`.to`)