Forem: Abdullah

The React + AI Stack for 2026

Abdullah — Wed, 21 Jan 2026 08:50:25 +0000

Generative AI changed how we code. It also quietly picked a winner.

According to the 2025 Stack Overflow Developer Survey, 51% of professional developers now use AI tools daily. When you ask AI to build a UI, it reaches for React almost every time. React isn't objectively better than Vue, Svelte, or Solid. But LLMs trained on millions of GitHub repositories, and React dominates that dataset.

React alone isn't a stack, though. Even with AI writing most of your code, you need to understand what you're building with. Here's the stack I'd reach for today.

Core: React + TypeScript

TypeScript catches mistakes early, makes refactoring less painful, supercharges your IDE's autocomplete, and gives new devs on your team built-in documentation.

React and TypeScript have grown up together. This stack assumes you're using both. Types also give AI tools something to work with, which means fewer fixes after generation.

Framework: Next.js or TanStack Start

Two solid choices here, depending on what you need.

Next.js is the mature option. It has the largest ecosystem, full React Server Components support, and Vercel keeps shipping features like partial pre-rendering. If you want RSC, streaming, and a battle-tested framework, Next.js is a great pick.

TanStack Start is less magic and more control. You decide how data loads, where it runs, and what gets rendered. The type safety is excellent, and it plays beautifully with the rest of the TanStack ecosystem. RSC support is coming but not production-ready yet. If you don't need server components or prefer a lighter, more explicit framework, TanStack Start is worth serious consideration.

Styling: Tailwind CSS

Tailwind CSS is still the answer. Utility-first CSS has won. It works beautifully with AI tools (which can generate Tailwind classes effortlessly), scales well, and reduces the CSS overhead that used to slow down projects.

If you're not using Tailwind yet, 2026 is a good year to start.

UI components: shadcn/ui

shadcn/ui copies components directly into your project. You own the code. You can modify anything. AI tools can read and edit these files directly since there's no abstraction layer in the way.

The recent npx shadcn create command takes customization further. Pick your component library (Radix or Base UI), choose from five visual styles, select fonts and colors. The CLI then rewrites every component to match your choices.

Data fetching: TanStack Query

TanStack Query is the standard for server state management. It handles caching, background refetching, stale data, and error states so you don't have to.

If you're fetching data in React, you should probably be using TanStack Query. The mental model is simple once it clicks, and it gets rid of an entire category of bugs related to data synchronization.

Routing: TanStack Router

TanStack Router has the strongest type safety I've seen in a React router. Routes, params, and search parameters are all fully typed. TypeScript catches routing errors before your code runs.

If you're using Next.js, the App Router handles routing and integrates with server components. But for Vite-based stacks or TanStack Start, TanStack Router is the clear choice.

State management: Zustand

Zustand is my recommendation. It's simple, has minimal boilerplate, and scales well. You get a hook-based API that feels native to React without the ceremony of Redux.

Forms: React Hook Form

React Hook Form remains the best option. It's performant (minimal re-renders), integrates well with validation libraries, and has a clean API.

Testing: Vitest + React Testing Library + Playwright

Vitest is a fast test runner that works with ES modules out of the box and integrates beautifully with Vite-based projects. React Testing Library provides utilities to render and query your components, helping you test like a user would while catching accessibility issues. Playwright covers end-to-end testing across multiple browsers with visual testing and mobile emulation, without the flaky tests.

AI SDK: Vercel AI SDK or TanStack AI

If you're adding AI features to your app, Vercel AI SDK has been the go-to. Streaming, tool calling, hooks for chat interfaces. It works with OpenAI, Anthropic, and other providers out of the box. The AI Elements library adds 20+ React components built on shadcn/ui for message threads, reasoning panels, and voice interfaces. If you're building a chat UI, this saves a lot of time.

TanStack AI is newer but worth watching. Same unified interface across providers, full TypeScript type safety. Given the TanStack team's track record, this could become the standard.

Type-safe APIs: tRPC

tRPC lets your frontend call server functions directly with full TypeScript type safety. No REST endpoints to document. No types to manually sync. You define your logic once and use it on both sides.

If you're building a full-stack TypeScript app, tRPC eliminates a category of bugs and speeds up development.

Validation: Zod

Zod is the safe choice for TypeScript validation. It has the largest ecosystem, most tutorials, and integrates with everything. React Hook Form, tRPC, API routes. Zod works with all of them.

There are lighter alternatives if bundle size is critical, but for most projects, Zod's ecosystem advantage outweighs the extra kilobytes.

Backend services: Supabase or Convex

Supabase is built on PostgreSQL. You get auth, storage, real-time subscriptions, and auto-generated APIs. For AI features, pgvector handles vector similarity search, and you can store embeddings alongside your relational data.

Convex takes a reactivity-first approach. Queries automatically sync to your React components when data changes. The TypeScript integration feels native. Built-in vector search, a RAG component, and AI agent workflows are already there for LLM-powered apps.

ORM: Prisma or Drizzle

Prisma is schema-first. You define your models in a .prisma file, run a generate command, and get a fully typed client. Migrations, a visual data browser, and connection pooling are built in.

Drizzle lets you define schemas directly in TypeScript. The query builder mirrors SQL syntax, so existing SQL knowledge transfers directly. It also includes a migration CLI and a visual data browser called Drizzle Studio.

Auth: Better Auth

Better Auth is a framework-agnostic authentication and authorization library for TypeScript. It handles email/password, social login, two-factor, and passkeys out of the box. Works with Next.js or TanStack Start, Prisma or Drizzle.

The plugin ecosystem adds everything else. Organizations with role-based access, magic links, anonymous auth, SSO. It also ships with an MCP server, so AI tools can help you implement auth without hallucinating the API.

Animation: Motion

Motion (formerly Framer Motion) is the best React animation library. The declarative API makes complex animations accessible, and it handles layout animations that would be painful to build manually.

If your app needs animations beyond CSS transitions, Motion should be your first choice.

Table: TanStack Table

TanStack Table deserves a mention if you're building data-heavy interfaces. It's headless, fully typed, and handles sorting, filtering, and pagination without forcing a specific UI. You bring your own markup and styles.

Mobile: React Native + Expo

React Native with Expo is the choice for cross-platform mobile development. The New Architecture is now the default, with 60fps rendering and 40% faster startup times. Expo removes the Xcode and Android Studio setup, handles builds through EAS, and enables over-the-air updates.

Component development: Storybook

Storybook is essential for building components in isolation. You get a visual testing environment, automatic documentation, and a place where developers and designers can collaborate on UI without spinning up the full app.

AI-assisted development: Builder.io, Claude Code or Cursor

Builder.io is a visual AI IDE where PMs, designers, and developers all work in the same React codebase. You bring your existing components, and the visual editor lets non-developers make changes without touching code directly. Marketing updates copy. Design adjusts layouts. Everyone works in the same source of truth.

Claude Code is Anthropic's agentic coding tool. It runs in the terminal, or as an extension in VS Code, or directly on the web. Point it at your codebase and it can plan changes, write code, run tests, and loop on tasks for hours. If you prefer working solo or in developer-only teams, this is a great option.

Cursor is another great option if you prefer the traditional IDE workflow.

The stack that writes itself

The best stack in 2026 is the one AI already knows. Clear conventions. Minimal magic. The kind of code it can read, write, and debug without hallucinating.

Everything on this list fits that description.

Rate-limiting Server Actions in Next.js

Abdullah — Sat, 20 Dec 2025 13:33:27 +0000

Rate-limiting Next.js Server Actions (The Right Way)

It's easy to look at Next.js Server Actions and forget that they are, effectively, public API endpoints. The "magic" abstraction layer often tricks us into skipping standard backend best practices like validation and security.

But under the hood, Server Actions are still triggered by standard HTTP requests, meaning they are just as vulnerable to spam and abuse as any other route. If you have an action that is computationally expensive or costs money (like an AI call), you need to protect it.

Here is how to properly rate-limit your Server Actions to keep your application resilient.

Rate-limiting based on User ID

Rate-limiting requires a unique identifier for the incoming request. If you are dealing with authenticated users, this is straightforward: use their database ID.

Here's how you might handle this in a standard API route:

// API route (simplified):
export const POST = async () => {
  const user = await auth();

  // "rateLimiter" is a placeholder for your library of choice (e.g., Upstash, Redis)
  const { success } = await rateLimiter.limit(`subscription:${user.id}`);

  if (!success) {
    return new Response("Rate limited", { status: 429 });
  }

  return Response.json(await someExpensiveOperation());
};

When you move to Server Actions, the logic remains almost identical. The main difference is that instead of returning a 429 status code, you return a structured error object.

// Server Action (simplified):
export const action = async () => {
  const user = await auth();

  const { success } = await rateLimiter.limit(`subscription:${user.id}`);

  if (!success) {
    return {
      error: "You are doing that too much. Please try again later.",
    };
  }

  return someExpensiveOperation();
};

Rate-limiting based on IP address

Things get trickier when you need to rate-limit anonymous users (e.g., a public waitlist form or a "contact us" message). Since there is no user ID, the only reliable identifier is the IP address.

In a standard API route, you have direct access to the Request object, that you can use to extract the IP address from the request headers.

// API route:
export const POST = async (req: NextApiRequest) => {
  const ip = getIP(req);

  const { success } = await rateLimiter.limit(`subscription:${ip}`);

  if (!success) {
    return new Response("Rate limited", { status: 429 });
  }

  return Response.json(await someExpensiveOperation());
};

For context, getIP is a small helper that looks at the x-forwarded-for header:

export function getIP(request: Request) {
  const xff = request.headers.get("x-forwarded-for");
  return xff ? xff.split(",")[0] : "127.0.0.1";
}

The Server Action problem

Let's try the same in a Server Action. Just extract the IP address from the request head... hold on, we don't have a request object in a Server Action.

By design, Next.js Server Actions do not expose the raw Request object. However, we can work around this using the headers() function provided by next/headers. This gives us read-only access to the request headers associated with the current incoming request.

export const action = async () => {
  const headerList = await headers();
  const ip = (headerList.get("x-forwarded-for") ?? "127.0.0.1").split(",")[0];

  const { success } = await rateLimiter.limit(`subscription:${ip}`);

  if (!success) {
    return {
      error: "Too many requests.",
    };
  }

  return someExpensiveOperation();
};

By accessing the IP address through the headers() function, we effectively work around the limitation of not having a request object in Server Actions and can apply rate-limiting just as we would in a standard API route.

BetterAuthKit: The Ultimate Next.js 15 Auth Starter You’ve Been Waiting For

Abdullah — Mon, 16 Jun 2025 11:44:00 +0000

Authentication is often one of the most time-consuming and error-prone parts of building modern web applications. Whether you're launching a SaaS platform, building a dashboard, or experimenting with a personal project, having a secure and scalable auth system is non-negotiable.

That’s why I built BetterAuthKit — a production-ready authentication boilerplate powered by Next.js 15, BetterAuth, and Neon PostgreSQL, designed to help developers ship faster without compromising security or best practices.

🚀 Why BetterAuthKit?

BetterAuthKit takes care of all the essentials you need in a modern authentication system:

✅ Google OAuth & Email/Password login
🔒 Domain-based email restrictions (@gmail.com by default)
📧 Secure password reset via email
💻 Built with the latest Next.js 15 (App Router)
🛡️ Security-first design with JWT sessions & hashed credentials
🌱 Seamless integration with Neon (PostgreSQL) and Prisma
⚙️ Fully typed with TypeScript

🧰 Tech Stack Overview

Tech	Role
Next.js 15	Fullstack React framework
BetterAuth	Authentication layer
Prisma ORM	Database ORM for Postgres
Neon	Scalable PostgreSQL hosting
Nodemailer	Email sending & reset links
TypeScript	Type-safe codebase

🧑‍💻 Features at a Glance

🔐 Email + Password Login
Fully secured and hashed with bcrypt, ready for production.
🟢 Google OAuth Integration
Fast and easy social login using your Google credentials.
📬 Password Reset via Email
Users can reset their password using a secure, time-bound link.
🛂 Gmail Domain Restriction
Restrict login and sign-up to specific domains — useful for internal tools or private betas.
🧼 Clean & Scalable Codebase
Follows modern development patterns with a modular structure and strong TypeScript support.

🔧 Getting Started in 5 Steps

1. Clone the Repo

git clone https://github.com/Abdullah-dev0/better-auth-kit.git
cd better-auth-kit

2. Install Dependencies

npm install

3. Configure Your .env.local

cp .env.example .env.local

Add your credentials for Neon, Google OAuth, and SMTP in .env.local.

4. Set Up the Database

npx prisma generate
npx prisma db push

5. Start the Development Server

npm run dev

Visit http://localhost:3000 and you're live!

🔐 Security Highlights

Passwords hashed with bcrypt
JWT session strategy for secure login
Domain-based access control
All sensitive data handled via .env.local
CSRF and token expiration handling included

🌍 Ready to Deploy

BetterAuthKit is 100% deployable on Vercel:

Push to GitHub
Import to Vercel
Add your environment variables
Connect your Neon DB
Done! ✅

⭐ Final Thoughts

BetterAuthKit is more than just a starter — it's a scalable, production-grade foundation for your next web app. Whether you're building an admin dashboard, internal tool, or public product, it saves you countless hours and sets you up for long-term maintainability.

🔗 Check it out on GitHub

🙌 Support & Contributions

If you find this project helpful, please consider giving it a ⭐️ on GitHub. Contributions and feedback are welcome!

Server and Client Component Patterns in Next.js

Abdullah — Sun, 30 Mar 2025 15:31:17 +0000

When to Use Each Type
Server Components Can:
Client Components Can:
Server Component Patterns
- Sharing Data Between Components
- Keeping Server Code Out of the Client
- Using Third-Party Components
- Using Context Providers
Client Component Patterns
- Moving Client Components Down the Tree
- Passing Props from Server to Client Components
- Interleaving Server and Client Components
- Pattern to Avoid: Importing Server Components into Client Components
- Supported Pattern: Passing Server Components as Props

When to Use Each Type

Server Components Can:

Fetch data directly
Access backend resources (databases, internal APIs)
Keep sensitive information secure (tokens, API keys)
Hold large dependencies that don't need to be sent to the client

Client Components Can:

Add interactivity with event listeners (onClick, onChange)
Use React state and lifecycle effects (useState, useEffect)
Access browser-only APIs (window, localStorage)
Use custom hooks that depend on state or browser APIs
Use React class components

Client Components need the "use client" directive at the top of their file to tell Next.js they should run on the client.

Server Component Patterns

Sharing Data Between Components

When multiple server components need the same data, you don't need to pass props down or use context. Instead, each component can fetch the data it needs directly.

Next.js automatically memoizes fetch calls, so if multiple components request the same data, the actual fetch happens only once. For non-fetch functions, use React's cache function for the same effect.

Keeping Server Code Out of the Client

Sometimes server-specific code might accidentally be included in client bundles, like code accessing private environment variables. To prevent this, use the server-only package:

// In your server-only module
import "server-only";

export async function getData() {
  // Code that should only run on the server
  const res = await fetch("https://api.example.com", {
    headers: { authorization: process.env.API_KEY },
  });
  return res.json();
}

If any client component tries to import this module, you'll get a build-time error. For client-only code, use the client-only package.

Using Third-Party Components

Many third-party components haven't yet added the "use client" directive despite using client-only features. These will work in Client Components but fail in Server Components.

The solution is to wrap these third-party components in your own Client Component:

// carousel.tsx
"use client";
import { Carousel } from "acme-carousel";
export default Carousel;

Now you can use your wrapped component in Server Components.

Using Context Providers

React context doesn't work in Server Components. To use context, create your provider in a Client Component:

// theme-provider.tsx
"use client";
import { createContext } from "react";
export const ThemeContext = createContext({});

export default function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

Then use it in your Server Component layout:

// layout.tsx
import ThemeProvider from "./theme-provider";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Place providers as deep in the tree as possible to help Next.js optimize static parts.

Client Component Patterns

Moving Client Components Down the Tree

To reduce JavaScript sent to the browser, move interactive parts into separate Client Components rather than making entire layouts or pages client components.

Example: Keep a layout as a Server Component, but make just the interactive search bar a Client Component.

Passing Props from Server to Client Components

You can pass data from Server to Client Components, but the props must be serializable (can be converted to JSON). Complex objects like functions, dates, or classes won't work.

If you need non-serializable data, either fetch it directly in the Client Component or use a Route Handler.

Interleaving Server and Client Components

You can think of your UI as a tree starting with the root layout (a Server Component). Some subtrees can be rendered on the client by adding "use client".

Within client subtrees, you can still include Server Components, but there are important rules to follow.

Pattern to Avoid: Importing Server Components into Client Components

This doesn't work:

"use client";
// ❌ Error: You cannot import a Server Component into a Client Component
import ServerComponent from "./server-component";

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ServerComponent />
    </>
  );
}

Supported Pattern: Passing Server Components as Props

This works well:

// In client-component.tsx
"use client";
export default function ClientComponent({ children }) {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  );
}

// In page.tsx (a Server Component)
import ClientComponent from "./client-component";
import ServerComponent from "./server-component";

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

This approach allows both components to render independently → the Server Component renders on the server before the Client Component renders on the client.

You're not limited to just the children prop. You can use any prop to pass Server Component content to a Client Component.

Understanding HTTP Responses and Streams

Abdullah — Sun, 09 Mar 2025 17:18:56 +0000

1. Understanding Response Objects
2. Different Ways to Consume Responses
- What is Binary Data?
- What's ASCII?
- What is ArrayBuffer?
- What is Uint8Array?
3. Streams
- Creating Your Own ReadableStream
- Why Streams?
- Combining Chunks
- Transform Streams
- What's Handled for You
Best Practices
- 1. Memory Efficiency
- 2. Cancellation is Important
- 3. Common Stream Pipeline
Recap of Practical Uses

1. Understanding Response Objects

A Response object represents an HTTP response from a request.

The most basic way to create a Response:

const response = new Response("Hello world");

// Key properties that tell us about the response:
console.log(response.status); // 200 (default)
console.log(response.statusText); // OK
console.log(response.ok); // true (status in 200-299 range)
console.log(response.headers); // Headers object

The Response interface gives us information about the HTTP response through its props:

status: The HTTP status code (200, 404, 500, etc.)
ok: Boolean indicating if status is in the successful range (200-299)
headers: Access to the response headers

An important concept is that Response bodies can only be consumed once:

const response = new Response('{"message": "hello"}');

// This works
const data = await response.json();
console.log(data); // { message: 'hello' }

// This fails
try {
  const data2 = await response.json();
} catch (error) {
  console.log("Error: Body already consumed!");
}

If you need to read the body multiple times, use the clone() method before the first consumption:

const response = new Response('{"message": "hello"}');
const clone = response.clone(); // Create copy before consuming

const data1 = await response.json();
const data2 = await clone.json(); // Works! Using the clone

Most of the time, you'll usually get Response objects from fetch:

// Fetch returns a Promise<Response>
const response = await fetch("https://api.example.com/data");

// Check response status
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}

// Check and handle content type
const contentType = response.headers.get("content-type");
if (contentType && contentType.includes("application/json")) {
  const data = await response.json();
  // Process your JSON data
}

If you know it's JSON (a lot of the times you do), no need to check the content type.

2. Different Ways to Consume Responses

We've seen .json() and .clone() in action already.

Let's explore all consumption methods:

// .text() for raw text data
const textResponse = new Response("Hello, world");
const text = await textResponse.text();
console.log(text); // "Hello, world"

// .blob() for binary data like images
const imageResponse = await fetch("image.png");
const blob = await imageResponse.blob();
const imageUrl = URL.createObjectURL(blob);

// .arrayBuffer() for raw binary data
const buffer = await imageResponse.arrayBuffer();
const uint8Array = new Uint8Array(buffer);

// .formData() for form data
const formResponse = new Response("first_name=John&last_name=Doe", {
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
});
const formData = await formResponse.formData();
console.log(formData.get("first_name")); // 'John'

Key points about these methods:

Each method returns a Promise that resolves to the appropriate data type
Once you use any of these methods, the response body is consumed!
Choose the method based on the type of data you're expecting:
- .json() for JSON data
- .text() for plain text, HTML, XML, etc.
- .blob() for files, images
- .arrayBuffer() when you need to process binary data directly
- .formData() for form submissions

What is Binary Data?

Data in its raw form of 1s and 0s. Everything in computers are binary data interpreted differently.

Example: the letter 'A' in binary is 01000001 (65 in decimal).

What's ASCII (American Standard Code for Information Interchange)?

ASCII is a character encoding standard where each letter/symbol maps to a number (0-127).

Modern systems mostly use UTF-8 (which is ASCII-compatible for 0-127)

const a = 97; // lowercase 'a' in ASCII
const A = 65; // uppercase 'A' in ASCII

const text = "hello";
// Converts string to Uint8Array using UTF-8 encoding
const asArray = new TextEncoder().encode(text);
console.log(asArray); // Uint8Array: [104, 101, 108, 108, 111]

What is ArrayBuffer?

ArrayBuffer is raw binary data buffer, just bytes in memory.

You can't manipulate ArrayBuffer directly. It's just raw memory. You need to use a view (a way to read and write to the ArrayBuffer) to access it.

const buffer = new ArrayBuffer(4); // 4 bytes of memory

const view = new Uint8Array(buffer);
view[0] = 104; // 'h'
view[1] = 105; // 'i'

What is Uint8Array?

A Uint8Array is a typed array that handles 8-bit unsigned integers.

Each element is 8 bits (1 byte), allowing values from 0 to 255.

const array = new Uint8Array([104, 101, 108, 108, 111]); // "hello" in ASCII
console.log(array[0]); // 104 (ASCII code for 'h')

// Common ways to create
const empty = new Uint8Array(5); // Creates array of 5 zeros
const fromArray = new Uint8Array([1, 2, 3]); // From regular array
const fromBuffer = new Uint8Array(someArrayBuffer); // From ArrayBuffer

// You can't store values outside 0-255
const array2 = new Uint8Array([256, -1, 1.5]);
console.log(array2); // [0, 0, 1] (values are converted)

They're often used for:

Processing network requests
Reading/writing files
Working with streams
Handling images or audio data

The reason they're befitting for such use cases is because they're fixed-size arrays of 8-bit unsigned integers. Why 8 bits is good:

Matches how data is commonly transmitted over networks (byte by byte)
Most basic unit of data in computers is a byte (8 bits)

3. Streams

We've seen that Response.body is a ReadableStream.

// Basic stream reading
const response = await fetch("large-file.mp4");
const reader = response.body.getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  // value is a Uint8Array chunk
  processChunk(value);
}

A ReadableStream represents a source of data that you can read from piece by piece.

Read operations return an object with {done, value}
value is typically a Uint8Array chunk
done becomes true when stream is finished

Creating Your Own ReadableStream

You can create your own ReadableStream:

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("First chunk");
    controller.enqueue("Second chunk");
    controller.close(); // Close the stream
  },
});

Why Streams?

If streams didn't exist, you'd have to load the entire file into memory.

const response = await fetch("huge-file.mp4");
const blob = await response.blob(); // Memory: 💥

// With streams - process chunk by chunk
const response = await fetch("huge-file.mp4");
for await (const chunk of response.body) {
  // Memory: ✅ Only one chunk at a time
  uploadChunk(chunk);
}

Combining Chunks

// Collecting chunks into a Blob
const response = await fetch("some-file.mp4");
const chunks = [];

// Method 1: Using getReader
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  chunks.push(value);
}

// This is the final blob
// Can be used as is or passed to a file input
const blob = new Blob(chunks);

// Method 2: Using for await...of
// More readable but same concept
const chunks2 = [];
for await (const chunk of response.body) {
  chunks2.push(chunk);
}
const blob2 = new Blob(chunks2);

More info:

for await...of
getReader

Transform Streams

Transform streams are a type of stream that can modify the data as it flows through the stream.

const transformStream = new TransformStream({
  transform(chunk, controller) {
    // Example: convert chunk to uppercase if it's text
    const upperChunk = chunk.toString().toUpperCase();
    controller.enqueue(upperChunk);
  },
});

// Pipe through transform
const response = await fetch("data.txt");
const transformedStream = response.body.pipeThrough(transformStream);

// Now read transformed data
for await (const chunk of transformedStream) {
  console.log(chunk); // UPPERCASE chunks
}

What's Handled for You

Backpressure management
Internal queuing
Stream locking
Memory management

Best Practices

1. Memory Efficiency

// Bad: Loads entire file
const response = await fetch("huge-video.mp4");
const blob = await response.blob(); // Memory: 💥

// Good: Process in chunks
const response = await fetch("huge-video.mp4");
for await (const chunk of response.body) {
  processVideoChunk(chunk); // Memory: ✅
}

2. Cancellation is Important

If you don't cancel a reader on error, you can run into several issues:

// Problem scenario
const reader = response.body.getReader();

try {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // If error happens here
    processChunk(value);
    // Reader isn't cancelled
  }
} catch (error) {
  // ❌ No reader.cancel()
  throw error;
}

The main issues:

Resource Leaks: The underlying stream resources stay open
Memory Leaks: Any internal buffers remain allocated
Network Connections: May stay open if it's a network stream
Other readers can't access: Stream stays locked (no other reader can read from it)

A good pattern to handle this properly:

const reader = response.body.getReader();

try {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    processChunk(value);
  }
} catch (error) {
  reader.cancel();
  throw error;
} finally {
  // Best practice: cancel in finally to ensure cleanup
  // even if the code above doesn't throw
  reader.cancel();
}

3. Common Stream Pipeline

// Fetch -> Transform -> Process -> Save
const response = await fetch("data.json");
const transformed = response.body
  .pipeThrough(parseJSON)
  .pipeThrough(filterData)
  .pipeThrough(compressData)
  .pipeTo(saveToFileStream);

Recap of Practical Uses

Large file handling (upload/download)
Real-time data (video/audio)
Progressive loading (load as you scroll)
Data transformations (compression, encryption)
Network efficiency (don't wait for everything)

Top 10 Clean Code Rules

Abdullah — Sun, 09 Mar 2025 00:00:04 +0000

According to “Clean code” book by Robert C, he defined some guidances and rules that developers should follow. This is more imperative for the less experienced developers. With more experience, comes the possibility of breaking some rules or reinventing them with justifications.

No code comments.

A good code needs no comment. The variables, methods, and any other component of the code such as attributes should use easily identifiable and descriptive names.

“Code comments are smell, remove them.”

Dead comments or code should be deleted.

Any unused piece of code or comments should be deleted. The best place to find them is in the version control systems.

Incorrect behaviour at boundaries.

Boundaries should always be unit tested. No behaviour should be assumed.

Positive conditionals.

Positive conditionals are easier to read than negative conditionals.

Standard architecture, coding, and design guidelines should be followed.

All the set standard architecture, coding, and design guidelines should be adhered to. Tools should also be used to ensure that this is accurate.

Good and Consistent naming.

Try to call variables, methods, classes to be understandable from the caller perspective. And it should be consistent.

KISS principle should be applied.

Needless complexity should be avoided. With increase in complexity, some design and codes in the system become useless. All designs and codes should be kept as simple as possible.

Use of exceptions instead of return codes.

In exceptional cases, an exception should be thrown, when the method fails to do its intended purpose. Null or return codes shouldn’t be used.

Make things small. Class size and method size both matter.

Typically, method should be small and compact in size. Ideally, <100 lines of code.

Boy scout rule- Leave the campground cleaner than you found it.

Leave the campground cleaner than you found it. Don’t ask for permission to refactor the code.

Thank you for stopping by and see you in the next.

Vercel Ai Sdk

Abdullah — Fri, 07 Mar 2025 02:33:19 +0000

As of March 4, 2025, Vercel has introduced enhancements to its AI SDK, focusing on developer experience (DX) improvements and client-side tool execution.

DX Improvements

The AI SDK now offers better observability, allowing developers to monitor token usage and errors when using streamText and streamObject. The new onFinish callback provides insights into token usage upon stream completion.

const result = await streamObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    name: z.object({
      firstName: z.string(),
      lastName: z.string(),
    }),
  }),
  prompt: "Generate a random name",
  onFinish({ object, error, usage, ...rest}) {
    console.log("Token usage:", usage);
    if (object === undefined) {
      console.error("Error:", error);
    } else {
      console.log("Success!", JSON.stringify(object, null, 2));
    }
  },
});

Developers can now access the final, typed object as a promise from the streamObject result, ensuring type safety.

const result = await streamObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    name: z.object({
      firstName: z.string(),
      lastName: z.string(),
    }),
  }),
  prompt: "Generate a random name",
});

result.object.then(({ name }) => {
  console.log("Name:", name.firstName, name.lastName);
});

To optimize bundle size, the AI SDK UI has been split by framework. Developers are encouraged to migrate to @ai-sdk/react, @ai-sdk/vue, @ai-sdk/svelte, or @ai-sdk/solid.

Client-Side Tool Execution

With the 3.2 release, building generative UI chatbots client-side is streamlined using useChat and streamText in React projects. The SDK supports client and server-side tool execution with streamText and introduces toolInvocations and onToolCall utilities, allowing conditional UI rendering based on LLM tool calls.

Example of a chatbot determining user location:

// app/api/chat/route.ts
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages: convertToCoreMessages(messages),
    tools: {
      askForConfirmation: {
        description: "Ask the user for confirmation",
        parameters: z.object({
          message: z.string().describe("The message to ask for confirmation"),
        }),
      },
      getLocation: {
        description: "Get the user location. Always ask for confirmation before using this tool.",
        parameters: z.object({}),
      },
    },
  });
}

In the streamText call, omitting the execute parameter allows client-side tool execution.

// app/page.tsx
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, addToolResult } = useChat({
    maxToolRoundtrips: 5,
    async onToolCall({ toolCall }) {
      if (toolCall.toolName === 'getLocation') {
        return getUserLocation();
      }
    },
  });

  return (
    <div>
      {messages?.map((m: Message) => (
        <div key={m.id}>
          <strong>{m.role}:</strong>
          {m.content}
          {m.toolInvocations?.map((toolInvocation: ToolInvocation) => {
            const toolCallId = toolInvocation.toolCallId;
            const addResult = (result: string) => addToolResult({ toolCallId, result });
            if (toolInvocation.toolName === 'askForConfirmation') {
              return (
                <div key={toolCallId}>
                  {'result' in toolInvocation ? (
                    <b>
                      {toolInvocation.args.message}: {toolInvocation.result}
                    </b>
                  ) : (
                    <>
                      {toolInvocation.args.message}:{' '}
                      <button onClick={() => addResult('Yes')}>Yes</button>
                      <button onClick={() => addResult('No')}>No</button>
                    </>
                  )}
                </div>
              );
            }
          })}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

The onToolCall within useChat defines functions for client-side tools. The toolInvocation provides access to tools selected by the LLM on the client, enabling conditional UI rendering to handle tool calls. The addToolResult function allows passing user-provided information back to the LLM for future responses.

These updates enhance the flexibility and efficiency of building AI-powered applications with Vercel's AI SDK.

Must-Have Skills for Junior Developers Aiming for Senior Positions

Abdullah — Sun, 20 Oct 2024 01:47:06 +0000

You've established a strong base as a junior developer, familiar with coding and perhaps even launching a few features. However, transitioning to a senior role involves more than just writing code; it requires a strategic approach to problem-solving, mentoring, and thinking beyond immediate tasks.

Key Areas to Focus On

1. Technical Mastery Alone Isn’t Sufficient

While being proficient in coding is essential, it's only part of what makes a senior developer. What truly distinguishes you is your ability to understand the underlying principles of how things work and how to enhance them.

System Design is Crucial: As a junior, you might focus on coding features, but seniors design entire systems. This involves creating scalable and maintainable systems that handle complex real-world scenarios. In 2024, this means having a deep understanding of distributed systems, microservices, and cloud architecture to deliver seamless experiences.
Automation is Key: Senior developers excel in automation. Instead of just addressing issues as they arise, they anticipate and automate repetitive tasks, freeing up time for strategic initiatives.
DevOps is Essential: Familiarity with continuous integration, continuous deployment, containerization, and cloud infrastructure is crucial. As a senior, you need to ensure your code transitions smoothly, reliably, and scalably from development to production.

2. Embrace Complexity

For newcomers, complexity can be daunting, but for seniors, it’s an opportunity. The real challenge is simplifying complexity.

Managing Technical Debt: It’s not just about delivering features. Senior developers manage technical debt, knowing when to refactor, when to maintain the status quo, and how to communicate these decisions to non-technical stakeholders.
Code Reviews as a Growth Tool: While juniors focus on spotting errors, seniors use code reviews to elevate their team. It’s about guiding, teaching, and maintaining code quality in a constructive manner.

3. Elevate Your Problem-Solving Abilities

Junior developers solve problems, but seniors tackle issues without clear solutions, often under pressure. Your debugging skills should be exceptional, and you should confidently dissect complex problems.

Adapt to Ambiguity: With rapid changes in tech stacks, requirements, and business needs, staying calm and methodically resolving issues in high-pressure situations is vital.
Mentoring as a Core Skill: As a senior developer, you’ll naturally become a mentor. This involves not just sharing knowledge but empowering others to solve problems independently.

4. Soft Skills are Equally Important

Senior developers are not just focused on coding; they are also collaborators, communicators, and leaders.

Effective Communication: Can you convey complex technical ideas to non-technical stakeholders? Can you create comprehensive yet accessible documentation? Communication is crucial, as senior developers often bridge the gap between technology and business.
Emotional Intelligence: Your ability to handle feedback, manage stress, and resolve conflicts will significantly impact your reputation. People will look to you for both technical solutions and emotional stability.
Negotiation Skills: Sometimes, the optimal technical solution isn’t chosen due to shifting business priorities, limited resources, or stakeholder preferences. A senior developer negotiates effectively, balancing technical excellence with practical constraints.

5. Focus on Business Impact

As a junior, you might concentrate on writing the "best" code, but as a senior, your focus should be on the broader impact. How does your work contribute to the business, the team, and the product in the long run?

Business Acumen: Can you identify features that significantly impact the bottom line? Can you prioritize tasks based on business needs rather than personal interest? This mindset shift is what transforms good developers into senior leaders.
Strategic Vision: Seniors plan ahead, not just for the next sprint but for the next quarter or year. How will the system scale? Will the architecture adapt to future business needs? You’re solving for the future, not just the present.

The journey to becoming a senior developer is challenging but rewarding. Keep pushing your boundaries, continue learning, and start developing these skills now.

Soon, you’ll be the go-to person when challenges arise, marking your arrival as a senior developer.

Guide to Redux: A Robust State Management Library for JavaScript Applications

Abdullah — Sat, 20 Jul 2024 17:55:54 +0000

Redux is widely recognized as a robust state management library designed specifically for JavaScript applications, often utilized in tandem with the popular framework React. By offering a dependable state container, Redux establishes a solid foundation that greatly simplifies the task of handling and troubleshooting application states. This guide delves deeply into the fundamental components that comprise Redux, providing detailed explanations of each element and illustrating how they synergistically interoperate to streamline the overall functionality of the application. This in-depth exploration aims to elucidate the inner workings of Redux, empowering developers to grasp the intricacies of this state management tool and harness its capabilities effectively in their projects.

Introduction to Redux
Setting Up Redux in a React Application
Actions and Action Types
Reducers and Slices
Configuring the Store
Connecting React Components
Conclusion and References

1. Introduction to Redux

Redux follows a unidirectional data flow model and is based on three core principles:

Single source of truth: The state of your whole application is stored in an object tree within a single store. This centralization makes it easier to debug and track changes across your application.
State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that state mutations are predictable and traceable.
Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers. Pure functions are predictable and testable, which simplifies debugging and unit testing.

2. Setting Up Redux in a React Application

First, install Redux and React-Redux:

npm install redux react-redux @reduxjs/toolkit

This command installs the core Redux library, the React bindings for Redux, and the Redux Toolkit, which simplifies many common tasks like setting up the store and creating slices.

3. Actions and Action Types

Actions are payloads of information that send data from your application to your Redux store. Action types are constants that represent the action.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Defining actions and action types clearly helps maintain consistency and reduces errors in your application.

4. Reducers and Slices

Reducers specify how the application's state changes in response to actions sent to the store. Slices are a collection of Redux reducer logic and actions for a single feature of your app, created using Redux Toolkit's createSlice method.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number += 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number += action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

To combine multiple slices:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Configuring the Store

The store is the object that brings actions and reducers together. It holds the application state, allows access to it via getState(), updates it via dispatch(action), and registers listeners via subscribe(listener).

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. Connecting React Components

To connect React components to the Redux store, use the Provider component from react-redux to pass the store down to your components, and use the useSelector and useDispatch hooks to access and manipulate the state.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    <Provider store={store}>
      <div className="container mx-auto mt-24 text-center">
        <img src={MusCo} alt="logo" className="w-40 mx-auto mt-24 rounded-full" />
        <h1 className="container m-auto text-2xl font-semibold text-center text-violet-700">
          Practice Redux with <span className="font-extrabold text-violet-900">MusCo</span>
        </h1>
        <div className="relative inline-block mt-8 text-sm">
          <Counter />
          <h5 className="absolute bottom-0 right-0 mb-2 mr-2 font-semibold text-violet-700">
            <span className="italic font-normal">by</span> 
            <span className="font-semibold text-violet-900">Mus</span>tafa 
            <span className="font-semibold text-violet-900">Coskuncelebi</span>
          </h5>
        </div>
      </div>
    </Provider>
  );
}

export default App;

CounterComponent.js


import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number < 5) {
      showcase.style.visibility = "visible";
    } else {
      showcase.style.visibility = "hidden";
    }
  }, [number]);

  return (
    <div className="container p-5 mx-auto mt-20 text-center bg-green-100 rounded-md shadow-md" style={{ width: "500px" }}>
      <h1 className="mb-3 text-3xl font-bold mt-7 text-violet-700">Counter</h1>
      <p className="text-5xl text-violet-900">{number}</p>
      <div className="flex mx-8 space-x-5" style={{ justifyContent: "space-around" }}>
        <button onClick={() => dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        </button>
        <button onClick={() => dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number < 5 ? { backgroundColor: "transparent" } : { backgroundColor: "#c2ff72" }} disabled={number < 5}>
          Decrement by 5
        </button>
      </div>
      <div className="flex mx-8 mt-5 space-x-3 mb-7" style={{ justifyContent: "space-around", alignItems: "center" }}>
        <div className="p-5 space-x-5 rounded-md outline outline-1 outline-violet-500">
          <input className="w-40 h-10 pl-2 rounded-md outline outline-1 outline-violet-500 text-violet-900" 
                 onChange={(e) => {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
          <button onClick={() => {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          </button>
        </div>
      </div>
      <button onClick={() => {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      </button>
      <h3 className="text-violet-400" id="showcase" style={{ visibility: "hidden", marginBottom: "100px" }}>
        Counter cannot be less than 0
      </h3>
    </div>
  );
}

export default Counter;

7. Conclusion and References

Redux is a powerful library for managing state in your applications. By understanding actions, reducers, the store, and how to connect everything to your React components, you can create predictable and maintainable applications.

Key Points:

Actions: Define what should happen in your app.
Reducers: Specify how the state changes in response to actions.
Store: Holds the state and handles the actions.
Provider: Passes the store down to your React components.

For more information, check out the official Redux documentation:

By following this guide, you should have a solid understanding of Redux and be able to implement it in your own applications.

Git Cheat Sheet – Git Commands You Should Know

Abdullah — Fri, 21 Jun 2024 14:49:37 +0000

What is a Distributed Version Control System?
Git Commands You Should Know
1. How to check your Git configuration
2. How to setup your Git username
3. How to setup your Git user email
4. How to cache your login credentials in Git
5. How to initialize a Git repo
6. How to add a file to the staging area in Git
7. How to add all files in the staging area in Git
8. How to add only certain files to the staging area in Git
9. How to check a repository’s status in Git
10. How to commit changes in the editor in Git
11. How to commit changes with a message in Git
12. How to commit changes (and skip the staging area) in Git
13. How to see your commit history in Git
14. How to see your commit history including changes in Git
15. How to see a specific commit in Git
16. How to see log stats in Git
17. How to see changes made before committing them using “diff” in Git
18. How to see changes using “git add -p”
19. How to remove tracked files from the current working tree in Git
20. How to rename files in Git
21. How to ignore files in Git
22. How to revert unstaged changes in Git
23. How to revert staged changes in Git
24. How to amend the most recent commit in Git
25. How to rollback the last commit in Git
26. How to rollback an old commit in Git
27. How to create a new branch in Git
28. How to switch to a newly created branch in Git
29. How to list branches in Git
30. How to create a branch in Git and switch to it immediately
31. How to delete a branch in Git
32. How to merge two branches in Git
33. How to show the commit log as a graph in Git
34. How to show the commit log as a graph of all branches in Git
35. How to abort a conflicting merge in Git
36. How to add a remote repository in Git
37. How to see remote URLs in Git
38. How to get more info about a remote repo in Git
39. How to push changes to a remote repo in Git
40. How to pull changes from a remote repo in Git
41. How to check remote branches that Git is tracking
42. How to fetch remote repo changes in Git
43. How to check the current commits log of a remote repo in Git
44. How to merge a remote repo with your local repo in Git
45. How to get the contents of remote branches in Git without automatically merging
46. How to push a new branch to a remote repo in Git
47. How to remove a remote branch in Git
48. How to use Git rebase
49. How to run rebase interactively in Git
50. How to force a push request in Git
Conclusion

What is a Distributed Version Control System?

A Distributed Version Control System (DVCS) is a type of version control where the complete codebase—including its full history—is mirrored on every developer's computer. This setup allows for more flexible workflows, including offline work, easier branching, and faster operations compared to centralized version control systems like SVN.

Git Commands You Should Know

Understanding and mastering Git commands is essential for effective version control. Here's a comprehensive guide to help you get started and become proficient with Git.

How to check your Git configuration

Before diving into Git commands, it's crucial to check your Git configuration to ensure everything is set up correctly.

git config --list

How to setup your Git username

Your Git username is used to label your commits with your identity. Set it up using:

git config --global user.name "Your Name"

How to setup your Git user email

Similar to the username, your email address is attached to your commits.

git config --global user.email "you@example.com"

How to cache your login credentials in Git

To avoid entering your credentials repeatedly, you can cache them.

git config --global credential.helper cache

How to initialize a Git repo

Start tracking your project with Git by initializing a repository.

git init

How to add a file to the staging area in Git

Prepare your changes for a commit by adding them to the staging area.

git add <file>

How to add all files in the staging area in Git

Add all your changes to the staging area at once.

git add .

How to add only certain files to the staging area in Git

Sometimes, you only want to stage specific files.

git add <file1> <file2>

How to check a repository’s status in Git

Check the status of your working directory and staging area.

git status

How to commit changes in the editor in Git

Commit your staged changes with an editor for the commit message.

git commit

How to commit changes with a message in Git

Commit your changes directly from the command line with a message.

git commit -m "Your commit message"

How to commit changes (and skip the staging area) in Git

You can commit changes directly without staging them first.

git commit -a -m "Your commit message"

How to see your commit history in Git

Review the history of your commits.

git log

How to see your commit history including changes in Git

View commit history along with the changes introduced.

git log -p

How to see a specific commit in Git

Inspect a particular commit in detail.

git show <commit-hash>

How to see log stats in Git

Get a concise summary of your commit history.

git log --stat

How to see changes made before committing them using “diff” in Git

Compare changes in your working directory.

git diff

How to see changes using “git add -p”

Interactively select changes to stage.

git add -p

How to remove tracked files from the current working tree in Git

Remove files from your working directory and staging area.

git rm <file>

How to rename files in Git

Rename and move files within your repository.

git mv <oldfile> <newfile>

How to ignore files in Git

Use a .gitignore file to exclude files from tracking.

# .gitignore
node_modules/
*.log

How to revert unstaged changes in Git

Discard changes in your working directory.

git checkout -- <file>

How to revert staged changes in Git

Unstage changes while retaining them in your working directory.

git reset <file>

How to amend the most recent commit in Git

Modify the last commit with new changes.

git commit --amend

How to rollback the last commit in Git

Undo the last commit while keeping changes in the working directory.

git reset --soft HEAD~1

How to rollback an old commit in Git

Revert to a specific commit.

git revert <commit-hash>

How to create a new branch in Git

Branching allows you to work on different features or fixes.

git branch <branch-name>

How to switch to a newly created branch in Git

Move to your new branch.

git checkout <branch-name>

How to list branches in Git

See all branches in your repository.

git branch

How to create a branch in Git and switch to it immediately

Create and switch to a new branch in one command.

git checkout -b <branch-name>

How to delete a branch in Git

Remove branches that you no longer need.

git branch -d <branch-name>

How to merge two branches in Git

Combine changes from different branches.

git merge <branch-name>

How to show the commit log as a graph in Git

Visualize your commit history as a graph.

git log --graph

How to show the commit log as a graph of all branches in Git

See the commit history graph for all branches.

git log --graph --all

How to abort a conflicting merge in Git

If a merge goes wrong, you can abort it.

git merge --abort

How to add a remote repository in Git

Link your local repository to a remote one.

git remote add origin <url>

How to see remote URLs in Git

List the URLs of your remote repositories.

git remote -v

How to get more info about a remote repo in Git

Detailed information about your remotes.

git remote show origin

How to push changes to a remote repo in Git

Upload your local changes to a remote repository.

git push origin <branch-name>

How to pull changes from a remote repo in Git

Fetch and merge changes from a remote repository.

git pull

How to check remote branches that Git is tracking

List the remote branches your local repository is tracking.

git branch -r

How to fetch remote repo changes in Git

Download changes from a remote repository without merging.

git fetch

How to check the current commits log of a remote repo in Git

View the commit log for a remote repository.

git log origin/<branch-name>

How to merge a remote repo with your local repo in Git

Combine changes from a remote repository into your local one.

git merge origin/<branch-name>

How to get the contents of remote branches in Git without automatically merging

Fetch remote branches without merging them.

git fetch origin

How to push a new branch to a remote repo in Git

Share your new branch with the remote repository.

git push origin <branch-name>

How to remove a remote branch in Git

Delete a branch from the remote repository.

git push origin --delete <branch-name>

How to use Git rebase

Rebase your current branch onto another branch.

git rebase <branch-name>

How to run rebase interactively in Git

Use interactive rebase for a more controlled process.

git rebase -i <commit-hash>

How to force a push request in Git

Forcefully push changes to a remote repository.

git push --force

Conclusion

Mastering Git commands empowers you to manage your codebase efficiently, collaborate with others, and maintain a robust history of your project's development. Practice these commands and explore more advanced features as you grow more comfortable with Git.

2024 Guide to Succeeding in Technical Interviews

Abdullah — Sun, 09 Jun 2024 18:54:13 +0000

Whether you are an aspiring software engineer or a professional seeking a career change, finding your dream job in the modern tech industry can be challenging. Receiving an interview call is a significant achievement. However, the real challenge begins after you pass the rigorous application phase and secure an interview slot; thorough preparation is essential to succeed.

From exploring various platforms and consulting different guides to gathering numerous resources, the process can be daunting. Nevertheless, with a proper plan and roadmap for the interview, you can manage it effectively. To address this need, we have designed a specialized boot camp to train and guide you on how to excel in technical interviews.

In this article, we will break down and explain the 12-week boot camp to help you prepare efficiently and confidently for your next big interview. Let's get started!

What to Expect in a Tech Interview

Technical interviews can differ significantly based on the company, the role, and the level of the position you are applying for. However, there are several common types of questions you can anticipate:

Technical Skill Assessment: These questions evaluate your proficiency in specific technical skills relevant to the job, such as programming languages (e.g., Python, Java, C++), frameworks (e.g., React, Angular), databases (e.g., MySQL, MongoDB), and tools (e.g., Git, Docker).

Coding Challenges: You will likely be asked to solve one or more coding problems during the interview. These can range from algorithmic puzzles (e.g., sorting, searching, recursion, dynamic programming) to system design challenges (e.g., designing a scalable web application). The objective is to assess your problem-solving skills, coding ability, and familiarity with computer science fundamentals.

System Design Questions: Especially for senior-level positions, you may be asked to design a complex system (e.g., a URL shortening service, a chat application). These questions test your ability to architect scalable, efficient, and reliable systems. You will need to discuss your design choices, considering factors such as scalability, load balancing, database schemas, and APIs.

Behavioral Questions: These questions evaluate how you have handled situations in the past, with a focus on teamwork, conflict resolution, leadership, and problem-solving. Examples include, "Tell me about a time when you faced a challenging bug and how you resolved it," or "Describe a project where you took the lead."

Technical Knowledge and Theory: You will be asked questions to test your understanding of computer science basics, such as data structures, algorithms, operating systems, networking, and databases. This might include explaining how sorting algorithms work or discussing the principles behind RESTful services.

In summary, preparing for these types of questions involves reviewing your technical fundamentals, practicing coding problems, studying system design principles, reflecting on your past experiences, and understanding the company's products, technology stack, and culture.

How to Efficiently Prepare for a Tech Interview in 12 Weeks

Tech interviews demand a solid understanding of foundational concepts and technical skills. To succeed, you must study effectively and develop the necessary skills without wasting time.

The two primary areas to focus on for tech interviews are coding and system design questions.

Here is the complete weekly breakdown of your interview preparation:

Week	Focus Area	Topics

Week 1	Coding	Introduction to Data Structures, Arrays, Matrix
	System Design	Introduction to System Design, Load Balancing, API Gateways
Week 2	Coding	Stack, Queue, Linked List
	System Design	Distributed Systems, DNS, Caching
Week 3	Coding	Tree, HashTable, HashSet
	System Design	CDN, Data Partitioning, Proxy Server
Week 4	Coding	Heap, Graph, Trie
	System Design	Replication, CAP & PACELC Theorems, Databases, Indexes
Week 5	Coding	Recursion
	System Design	Bloom Filters, Long-Polling, WebSockets, Quorum, Heartbeat
Week 6	Coding	Two Pointers Pattern, Fast & Slow Pointers Pattern
	System Design	Checksum, Leader & Follower, Messaging System
Week 7	Coding	Sliding Window Pattern, Merge Intervals Pattern, Cyclic Sort Pattern
	System Design	System Design Interview, Master Template, URL Shortening, Pastebin
Week 8	Coding	In-place Reversal of a LinkedList, Monotonic Stack, Tree BFS, Tree DFS
	System Design	Dropbox, Facebook Messenger, Twitter, Netflix
Week 9	Coding	Island Pattern, Two Heaps Pattern, Subsets Pattern
	System Design	Typeahead Suggestion, API Rate Limiter, Twitter Search, Web Crawler
Week 10	Coding	Modified Binary Search, Bitwise XOR, Top 'K' Elements
	System Design	Facebook Newsfeed, Yelp, Uber, Ticketmaster
Week 11	Coding	K-way Merge, Backtracking, Topological Sort, Multi-threaded
	System Design	Key-Value Store, Mock Interview
Week 12	Coding	Dynamic Programming, 0/1 Knapsack, Fibonacci Numbers, Longest Common Substring
	System Design	Distributed Messaging System

Top ChatGPT Prompts Every Developer Should Know

Abdullah — Wed, 22 May 2024 20:57:28 +0000

Understand ChatGPT:

ChatGPT is an artificial intelligence (AI) chatbot that uses natural language processing to create human-like conversations. This language model can answer questions and write various types of content, including articles, social media posts, essays, code, and emails. It is an exciting tool for programmers at all levels.

OpenAI, an AI research company, created ChatGPT and launched it in November 2022. OpenAI was founded in 2015 by a group of entrepreneurs and researchers, including Elon Musk and Sam Altman. The company is supported by several investors, with Microsoft being the most notable.

What is prompt engineering and why is it important?

Prompt engineering makes it easy for users to get relevant results. It also helps reduce bias that may come from existing human bias in the training data of large language models. Additionally, it improves the user-AI interaction so the AI understands the user's intention even with minimal input.

When crafting a prompt:

Be clear and concise.
Be specific: Specify the programming language and clearly describe the functionality you need. For example, a prompt could be "Write a JavaScript function to calculate the sum of given numbers" instead of a vague “Write a function to calculate the sum."
Include the necessary context and details, but avoid any ambiguity or unnecessary information.
Define inputs and outputs: If the function or piece of code you need requires specific input or output formats, include this information in your prompt.

How ChatGPT Can Help Developers:

ChatGPT, an advanced language model, can assist developers in many ways during their coding journey. Let’s explore some of them.

1. Writing Code: With ChatGPT, you can generate code based on specific descriptions. For example, if you need a C# function to calculate the sum of two numbers, you can prompt ChatGPT as shown below, and it will return the appropriate code.

Prompt Example:

"Write a C# function to calculate the sum of the 2 given numbers."

2. Refactor Code: With ChatGPT's help, you can refactor the code to enhance code efficiency, reduce errors, and make it easier to modify or extend in the future.

Prompt Example:

I have a piece of code and I need you to refactor it:
INSERT YOUR CODE HERE

3.Code Review & Debugging: You can use ChatGPT to review code snippets and identify potential issues or bugs.

Prompt Example:

"Here's a javascript code snippet. The function is supposed to return the maximum value from the given list, but it's not returning the expected output. Can you identify the problem?".
INSERT YOUR CODE HERE

4.Adding Coding Best Practices or Principles: ChatGPT can help you rewrite code to follow style guidelines.

Prompt Example

Rewrite the code below following the Google style guidelines for JavaScript.
INSERT YOUR CODE HERE

5.Explaining Code: ChatGPT can help explain how old and complex code snippets work. To get an explanation of a specific piece of code, provide the code snippet and ask for an explanation.

Prompt Example

"Could you please explain how this typescript function works?".
INSERT YOUR CODE HERE

6.Optimizing Code: ChatGPT can help optimize your code to improve performance or readability, making it more efficient and easier to understand.

Prompt Example:

"Here’s a function I wrote in JavaScript that prints first n Fibonacci Numbers. Could you suggest any optimizations for better performance?"
INSERT YOUR CODE HERE

7. Create Unit Tests: You can use ChatGPT to automate unit testing by writing test cases for you.

Prompt Example:

Please write unit tests for the following code.
INSERT YOUR CODE HERE

8. Add code comments: ChatGPT can quickly add comments to your code if it needs explanations.

Prompt Example:

Add comments to the following code:
INSERT YOUR CODE HERE

9. Create Boilerplate Code: ChatGPT can help you generate boilerplate code.

Write a boilerplate JavaScript function that will take a variable of type User, and validate whether the user has the right permissions or not.

10. Create a Regular Expression: Regular expressions allow us to match, locate, and manage text, making it easier to manipulate data in large programs, and ChatGPT can assist in writing these RegEx.

Write a regular expression that matches:
REQUEST

These are some examples of how ChatGPT can make a developer's life easier, including learning new concepts, understanding design patterns, code refactoring, brainstorming ideas, interview preparations, and more.

Forem: Abdullah

The React + AI Stack for 2026

Core: React + TypeScript

Framework: Next.js or TanStack Start

Styling: Tailwind CSS

UI components: shadcn/ui

Data fetching: TanStack Query

Routing: TanStack Router

State management: Zustand

Forms: React Hook Form

Testing: Vitest + React Testing Library + Playwright

AI SDK: Vercel AI SDK or TanStack AI

Type-safe APIs: tRPC

Validation: Zod

Backend services: Supabase or Convex

ORM: Prisma or Drizzle

Auth: Better Auth

Animation: Motion

Table: TanStack Table

Mobile: React Native + Expo

Component development: Storybook

AI-assisted development: Builder.io, Claude Code or Cursor

The stack that writes itself

Rate-limiting Server Actions in Next.js

Rate-limiting Next.js Server Actions (The Right Way)

Rate-limiting based on User ID

Rate-limiting based on IP address

The Server Action problem

BetterAuthKit: The Ultimate Next.js 15 Auth Starter You’ve Been Waiting For

🚀 Why BetterAuthKit?

🧰 Tech Stack Overview

🧑‍💻 Features at a Glance

🔧 Getting Started in 5 Steps

🔐 Security Highlights

🌍 Ready to Deploy

⭐ Final Thoughts

🙌 Support & Contributions

Server and Client Component Patterns in Next.js

Table of Contents

When to Use Each Type

Server Components Can:

Client Components Can:

Server Component Patterns

Sharing Data Between Components

Keeping Server Code Out of the Client

Using Third-Party Components

Using Context Providers

Client Component Patterns

Moving Client Components Down the Tree

Passing Props from Server to Client Components

Interleaving Server and Client Components

Pattern to Avoid: Importing Server Components into Client Components

Supported Pattern: Passing Server Components as Props

Understanding HTTP Responses and Streams

Table of Contents

1. Understanding Response Objects

2. Different Ways to Consume Responses

What is Binary Data?

What's ASCII (American Standard Code for Information Interchange)?

What is ArrayBuffer?

What is Uint8Array?

3. Streams

Creating Your Own ReadableStream

Why Streams?

Combining Chunks

Transform Streams

What's Handled for You

Best Practices

1. Memory Efficiency

2. Cancellation is Important

3. Common Stream Pipeline

Recap of Practical Uses

Top 10 Clean Code Rules

No code comments.

Dead comments or code should be deleted.

Incorrect behaviour at boundaries.

Positive conditionals.

Standard architecture, coding, and design guidelines should be followed.

Good and Consistent naming.

KISS principle should be applied.