DEV Community: Pedram

Why do I build projects but never monitor them?

Pedram — Tue, 10 Feb 2026 16:32:44 +0000

I recently read a document about monitoring and its impact on production projects.

And it hit me with an uncomfortable question:

Why do I never set up monitoring on my own projects?

I build things.
I deploy them.
Then... I just move on.

No visibility.
No data.
No idea who's visiting, what's slow, or if something breaks.

So I decided to fix that.

Since my portfolio is deployed on Vercel, I started researching monitoring options and realized something simple but important:

👉 Vercel already gives you analytics out of the box.

No complex setup.
No external dashboards.
No overengineering.

Just enable it, add one component, and you're done.

Vercel Analytics lets you track:

Page views
Visitors
Basic performance insights

And if your project gets less than 50,000 requests per month, you can use it for free --- which is perfect for personal projects and portfolios.

I set it up on my portfolio, and honestly?
It was a really fun experience.

Seeing real data from something you built changes how you think about your project. It stops being "just a deployed site" and starts feeling like a living product.

Lesson learned:
Even small projects deserve monitoring.
Especially the ones you're proud of.

Building a WebSocket Server in Pure Node.js (No Libraries)

Pedram — Fri, 02 Jan 2026 10:07:50 +0000

Recently I had a question: how does a WebSocket work backstage?\
I had used WebSockets before (mostly with socket.io or ws), but I realized I didn't really understand what was happening under the hood.

So I decided to learn it properly - by building a WebSocket server from scratch, using only Node.js built-in modules.

And the result became this step-by-step article.

What We're Building

By the end of this tutorial you'll have:

A pure Node.js WebSocket server (no libraries)
A browser client using the native WebSocket API
The ability to:
- complete the WebSocket handshake
- receive messages (decode frames)
- send messages back (encode frames)

This is not production-ready - it's learning-ready, and that's the point.

What You Should Know First (Short & Clear)

HTTP vs WebSocket

HTTP is:

✅ request → response → connection closes

WebSocket is:

✅ connection stays open\
✅ client and server can send messages anytime

WebSockets are perfect for chat, notifications, live dashboards, typing indicators, etc.

Project Setup

Create a folder and two files:

pure-ws/ server.js client.html

Step 1 - Create a normal HTTP server

Let's start with something familiar: an HTTP server.

Create server.js:

const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end("Hello HTTP\n");
});

server.listen(4000, () => {
  console.log("Server running on http://localhost:4000");
});

Run it:

node server.js

Open:

http://localhost:4000

✅ If you see Hello HTTP, you're good.

Step 2 - Listen for WebSocket upgrade requests

A WebSocket connection starts as an HTTP request, but with these headers:

Upgrade: websocket
Connection: Upgrade

Node gives us an event for that:

server.on("upgrade", (req, socket) => {});

Update server.js:

const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end("Hello HTTP\n");
});

server.on("upgrade", (req, socket) => {
  console.log("🔥 Upgrade request received!");
  socket.end();
});

server.listen(4000, () => {
  console.log("Server running on http://localhost:4000");
});

Now we need a client that triggers this event.

Step 3 - Create a WebSocket client in the browser

Create client.html:

<!DOCTYPE html>
<html>
  <body>
    <h1>WebSocket Client</h1>

    <script>  const socket = new WebSocket("ws://localhost:4000");

      socket.onopen = () => console.log("✅ connected");
      socket.onerror = (e) => console.log("❌ error", e);
      socket.onclose = () => console.log("🔌 closed");
    </script>
  </body>
</html>

Open the file in your browser.

Your server should log:

✅ Upgrade request received!

Your browser will disconnect because we call socket.end().

That's expected for now.

Step 4 - Complete the WebSocket handshake

Now comes the "magic".

The browser sends:

Sec-WebSocket-Key

The server must respond with:

Sec-WebSocket-Accept

Formula:

accept = base64(sha1(key + MAGIC_STRING))

Magic string (always the same):

258EAFA5-E914-47DA-95CA-C5AB0DC85B11

Update server.js:

const http = require("http");
const crypto = require("crypto");

const MAGIC_STRING = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end("Hello HTTP\n");
});

server.on("upgrade", (req, socket) => {
  const wsKey = req.headers["sec-websocket-key"];

  const acceptKey = crypto
    .createHash("sha1")
    .update(wsKey + MAGIC_STRING)
    .digest("base64");

  const responseHeaders = [
    "HTTP/1.1 101 Switching Protocols",
    "Upgrade: websocket",
    "Connection: Upgrade",
    `Sec-WebSocket-Accept: ${acceptKey}`,
    "\r\n",
  ];

  socket.write(responseHeaders.join("\r\n"));
  console.log("✅ WebSocket handshake done!");
});

server.listen(4000, () => {
  console.log("🚀 Server running on http://localhost:4000");
});

Now open client.html again.

✅ The browser should connect successfully.

But if you send messages, nothing useful happens yet.

Because messages are not plain strings --- they are frames.

Step 5 - Listen for incoming frames

Once the handshake is done, WebSocket messages come as raw bytes.

Add this inside the upgrade handler (after socket.write(...)):

socket.on("data", (buffer) => { console.log(buffer); });

Now update your client to send a message:

socket.onopen = () => {
  console.log("✅ connected");
  socket.send("Hello server!");
};

Run again.

You'll see a Buffer full of bytes.

That's a WebSocket frame.

Now we decode it.

Step 6 - Decode a WebSocket frame (client → server)

Add this helper function at the bottom of server.js:

function decodeWebSocketFrame(buffer) {
  const secondByte = buffer[1];
  const isMasked = (secondByte & 0b10000000) !== 0;
  let payloadLength = secondByte & 0b01111111;

  let offset = 2;

  if (payloadLength === 126) {
    payloadLength = buffer.readUInt16BE(offset);
    offset += 2;
  } else if (payloadLength === 127) {
    payloadLength = Number(buffer.readBigUInt64BE(offset));
    offset += 8;
  }

  let maskingKey;
  if (isMasked) {
    maskingKey = buffer.slice(offset, offset + 4);
    offset += 4;
  }

  const payload = buffer.slice(offset, offset + payloadLength);

  if (isMasked) {
    for (let i = 0; i < payload.length; i++) {
      payload[i] ^= maskingKey[i % 4];
    }
  }

  return payload.toString("utf8");
}`

Now update the `data` listener:

`socket.on("data", (buffer) => {
  const msg = decodeWebSocketFrame(buffer);
  console.log("📩 Message:", msg);
});

✅ Now server logs the real message.

Step 7 - Send a message back (server → client)

Now we need to send a frame back.

Add this helper function:

function encodeWebSocketFrame(message) {
  const payload = Buffer.from(message);
  const payloadLength = payload.length;

  let frame;

  if (payloadLength < 126) {
    frame = Buffer.alloc(2 + payloadLength);
    frame[0] = 0b10000001; // FIN + text frame
    frame[1] = payloadLength; // server frames are NOT masked
    payload.copy(frame, 2);
  } else {
    throw new Error("Payload too large for this demo");
  }

  return frame;
}`

Now inside `socket.on("data")`:

`socket.on("data", (buffer) => {
  const msg = decodeWebSocketFrame(buffer);
  console.log("📩 Message:", msg);

  socket.write(encodeWebSocketFrame("Server got: " + msg));
});`

Update client:

`socket.onmessage = (e) => {
  console.log("📩 from server:", e.data);
};

✅ Now you have full two-way communication.

Step 8 - Make the client interactive

Replace client.html with:

<!DOCTYPE html>
<html>
  <body>
    <h1>Pure WebSocket Client</h1>

    <input id="msg" placeholder="Type message..." />
    <button id="send">Send</button>

    <ul id="log"></ul>

    <script>  const log = (text) => {
        const li = document.createElement("li");
        li.textContent = text;
        document.getElementById("log").appendChild(li);
      };

      const socket = new WebSocket("ws://localhost:4000");

      socket.onopen = () => log("✅ Connected!");
      socket.onmessage = (e) => log("📩 Server: " + e.data);
      socket.onclose = () => log("❌ Disconnected");
      socket.onerror = () => log("⚠️ Error happened");

      document.getElementById("send").onclick = () => {
        const input = document.getElementById("msg");
        socket.send(input.value);
        log("📤 You: " + input.value);
        input.value = "";
      };
    </script>
  </body>
</html>

✅ Now you can type messages and see replies.

What This Teaches You (The Real Value)

This tutorial shows you what WebSocket libraries do for you:

handshake logic
frame decoding (client messages are masked)
frame encoding
keeping connections open

And also why libraries are used:

Because real WebSocket servers must handle:

fragmented frames
ping/pong keepalive
close frames
multiple frames per TCP chunk
partial frames split across chunks
binary payloads

Final Notes

This is not a replacement for ws or socket.io.

But if you build this once, you stop thinking of WebSockets as magic.

You understand the protocol.
And I think it's fun :D.

You Probably Don’t Need useEffect (Most of the Time)

Pedram — Wed, 10 Dec 2025 12:49:15 +0000

React developers (including me) often reach for useEffect way too early
But the truth is simple: most logic in your app does not belong inside an Effect at all.

useEffect is not a data-management tool.
It's a synchronization tool a bridge between React and the outside world.

Here's the rule that changed how I write React:

If something can be expressed with state, props, or pure calculations, don't use an Effect.
Use useEffect only when you need to sync with something external to React.

Let's break it down with real examples.

1. Derived State? No Effect Needed.

Bad: mirroring values into another state.

const [first, setFirst] = useState("Taylor");
const [last, setLast] = useState("Swift");
const [full, setFull] = useState("");

useEffect(() => {
  setFull(first + " " + last);
}, [first, last]);

Better: compute during render.

const full = `${first} ${last}`;

If React can calculate it, you don't need an Effect.

2. Filtered Lists? Still No Effect.

Unnecessary Effect:

const [visible, setVisible] = useState([]);

useEffect(() => {
  setVisible(items.filter(i => i.done));
}, [items]);

Correct approach:

const visible = items.filter(i => i.done);

If performance matters, wrap it in useMemo not an Effect.

3. User Actions Should Not Trigger Effects

A very common anti-pattern:

const [submitted, setSubmitted] = useState(false);

useEffect(() => {
  if (submitted) {
    sendToServer();
  }
}, [submitted]);

The intention is simple: when the user submits, send data
But this should happen inside the event handler:

function handleSubmit(e) {
  e.preventDefault();
  sendToServer();
}

No Effects for user-triggered actions.

4. Resetting State When a Prop Changes

Some developers do this:

useEffect(() => {
  setText("");
}, [userId]);

Better: use a key so React remounts the component cleanly.

<CommentForm key={userId} />

Cleaner. More predictable.

So... When Should You Use `useEffect`?

Only for real side effects meaning, things React cannot do on its own:

Fetching from APIs
Subscribing to WebSocket or event listeners
Working with timers
Syncing with localStorage or URL
Integrating with third-party libraries (charts, modals, etc.)
Manually touching the DOM

If the logic doesn't touch the outside world, it probably doesn't belong in an Effect.

The Humble Takeaway

I used to sprinkle useEffect everywhere
It made my components harder to reason about, harder to test, and easier to break.

Once I started asking "Can React derive this without an Effect?",\
my code became simpler, smaller, and way more predictable.

Most of the time, the answer is yes.

you can find more information here.

Why React Components Must Return a Single Root Element

Pedram — Mon, 28 Apr 2025 11:07:27 +0000

When you start building UIs with React, one of the first rules you encounter is: a component must return a single root element. But why is this necessary? Why can't we just return multiple tags side-by-side? Let's dive deep into this!

React's Need for a Single Root

Every React component must return only one parent element. This rule comes from how React builds and manages its virtual DOM under the hood.

When React renders a component, it expects a single node to represent that component in the virtual DOM tree. If multiple sibling elements were returned without a parent, React wouldn't know how to correctly attach or update them. It would break the consistent tree structure that React relies on for efficient updates and reconciliation.

Think of React like managing a tree:

- App
  - Header
  - Main
  - Footer

If a component gave two or more separate roots instead of one, it would disrupt the structure.

How We Solve This: Wrapping Elements

React requires you to wrap multiple elements inside:

A normal HTML tag like <div>, <section>, etc.
Or a special wrapper called a Fragment: <React.Fragment> or its shorthand <> and </>

Example with a `<div>`:

function MyComponent() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

Example with a Fragment:

function MyComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

Fragments are useful because they don't add an extra node to the actual HTML output---they're "invisible" wrappers.

What Happens if You Don't Use a Wrapper?

React will throw an error like this:

Adjacent JSX elements must be wrapped in an enclosing tag.

This means React detected multiple siblings but no common parent---and it doesn't know how to manage them.

Deeper Reason: Virtual DOM and Diffing

React's virtual DOM and reconciliation algorithm rely on a strict tree structure:

Each component must be a single unit (a single node).
This makes comparing old and new trees fast and reliable.
Updates to the real DOM are surgically precise.

Without a single root, React would have to manage multiple independent nodes per component, making updates slower, less predictable, and error-prone.

Quick Summary

Question	Answer
Why can't we return multiple tags directly?	It would break the tree structure React depends on.
Why use Fragments or divs?	They act as a single wrapper for multiple children.
What's the deep reason?	To maintain efficient virtual DOM diffing and updates.

Final Thoughts

Next time you see yourself adding that extra <>...</> around your JSX, know that it's not just a syntactic rule, it's a deep part of how React maintains performance and stability. 🚀

🔐 Clerk + Next.js: A Developer-Friendly Auth Stack That Gets Out of Your Way

Pedram — Mon, 14 Apr 2025 19:37:59 +0000

Implementing authentication is a common task in almost every web app. But let's be honest --- building a secure, reliable auth system from scratch is a time sink. Sessions, password reset, MFA, social login... it adds up quickly.

So in a recent project, I decided to try Clerk --- and honestly, it felt like cheating in the best way. 🔥

Clerk gave me a secure, production-ready authentication system with modern features, a beautiful UI, and full flexibility --- without the usual boilerplate.

✅ What Is Clerk?

Clerk is an Identity-as-a-Service (IDaaS) platform that integrates beautifully with frontend-first frameworks like Next.js, Remix, and React.

It provides:

Authentication (password, OAuth, passkey, Web3)
Full session management
User profiles
Organizations (multi-tenant support)
MFA, Webhooks, and admin tools

You can use Clerk with zero backend --- or deeply customize it to match your architecture.

⚙️ Key Features + Code Examples

1. 🔌 Quick Integration with Next.js

Install Clerk's SDK:

npm install @clerk/nextjs

In your middleware.ts (for protecting routes):

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

export const config = {
  matcher: ["/dashboard(.*)", "/account(.*)"], // protect these routes
};

Then wrap your app with Clerk provider:

// app/layout.tsx or _app.tsx (Next.js)
import { ClerkProvider } from "@clerk/nextjs";

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  );
}

2. 🧩 Drop-in Components

Want a sign-in page in 10 seconds?

import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return <SignIn />;
}

Need a user profile page?

import { UserProfile } from "@clerk/nextjs";

export default function ProfilePage() {
  return <UserProfile />;
}

And yes --- Clerk handles all the logic, redirects, error handling, and styling out of the box.

3. 🎨 Customization (Themes & CSS)

Clerk lets you completely style the UI using a simple appearance prop:

<SignIn
  appearance={{
    variables: {
      colorPrimary: "#4F46E5",
      fontFamily: "Inter, sans-serif"
    },
    elements: {
      card: "shadow-xl rounded-2xl",
      headerTitle: "text-xl font-bold"
    }
  }}
/>

Or skip Clerk's UI entirely and build your own:

const { signIn, isLoaded, setActive } = useSignIn();

async function handleSubmit(email, password) {
  const res = await signIn.create({ identifier: email, password });
  await setActive({ session: res.createdSessionId });
}

4. 🔐 Modern Authentication Methods

Clerk supports:

Email/password login
Magic link (passwordless)
OAuth (Google, GitHub, etc.)
Web3 wallets (MetaMask, Coinbase)
Passkey (FIDO2)
Multi-factor authentication (MFA)

Want to enable social login?

Just toggle it in your Clerk dashboard --- no OAuth config nightmares.

5. 📦 Session Management Done Right

Once a user logs in, Clerk gives you easy access to their session via hooks or server helpers.

Client-side:

import { useUser } from "@clerk/nextjs";

const { user, isSignedIn } = useUser();

Server-side (in RSC or API route):

import { auth } from "@clerk/nextjs/server";

export default async function handler(req, res) {
  const { userId, sessionId } = auth();
  if (!userId) return res.status(401).end();
  res.json({ message: "Authenticated ✅" });
}

Sessions auto-refresh, are CSRF-protected, and can be invalidated per device from the Clerk dashboard.

6. 🛠 Developer Experience

What makes Clerk feel great to use as a developer:

Amazing TypeScript support
Zero-config CLI for local dev
Full API + Webhook access
Multi-tenant orgs
Audit logs and role-based access (coming soon)

Everything is customizable if you want it --- but works out of the box if you don't.

⚠️ One Limitation: Not Self-Hosted

Clerk is cloud-based only. All user data lives on Clerk's infrastructure. That's great for speed and simplicity, but might not be suitable if:

You need full data control
You require on-prem or regional hosting
You're working under strict compliance (HIPAA, GDPR, etc.)

If that's your case, check out Auth.js or Supertokens --- I'll cover those in another post.

✅ When to Use Clerk

Use Clerk if:

You want modern auth with minimal config
You're using Next.js, React, or Remix
You value great UX out-of-the-box
You don't want to worry about security/session edge cases

Avoid Clerk if:

You need to self-host your auth infrastructure
You have legal/privacy requirements for user data

🧵 Final Thoughts

Clerk lets you go from zero to secure, modern auth in minutes --- without giving up control when you need it. I've used it in production apps and prototypes, and it's quickly becoming one of my favorite tools in the React/Next.js ecosystem.

In the next post, I'll cover Auth.js (NextAuth) --- a great self-hosted alternative for devs who want full data ownership.

💬 Got questions or experience with Clerk? Drop them in the comments --- I'd love to hear what you think.

More posts like this coming soon. Follow me for deep dives into modern frontend stacks, auth flows, and developer-first tools.

Happy coding! 🚀

🔍 A Developer-Friendly Guide to Prisma with Next.js (From Basics to Powerful Features)

Pedram — Sat, 12 Apr 2025 20:39:33 +0000

📌 Overview

Prisma is a modern, type-safe ORM that simplifies database workflows in Next.js apps. Instead of writing raw SQL or dealing with complex query builders, you get:\
✔ Declarative schema (schema.prisma)\
✔ Auto-generated, type-safe queries (@prisma/client)\
✔ Seamless integration with Next.js (API routes, Server Components, Server Actions)\
✔ Powerful features like relations, filtering, pagination, and caching

This guide covers everything---from initial setup to advanced patterns---so you can build scalable, type-safe full-stack apps with ease.

🧠 What is Prisma?

Prisma is a TypeScript-first ORM for Node.js that simplifies database access. It supports:

PostgreSQL
MySQL
SQLite
SQL Server
MongoDB (preview)

Instead of writing SQL, you define models in a schema.prisma file, and Prisma generates a fully typed client for you.

⚙️ Why Prisma + Next.js = ❤️

Next.js (especially with App Router & Server Components) pairs perfectly with Prisma. You can:\
✔ Define models in a declarative schema\
✔ Auto-generate a type-safe client (@prisma/client)\
✔ Query your DB in API routes, server actions, or route handlers\
✔ Get autocompletion & type safety out of the box

No more manual type definitions or runtime errors---just smooth, predictable database interactions.

🛠️ Quick Setup

1️⃣ Install Prisma

npm install prisma @prisma/client
npx prisma init

2️⃣ Define your schema in prisma/schema.prisma

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
  posts Post[]
}

3️⃣ Sync your database

npx prisma db push  # For quick dev updates
npx prisma migrate dev  # For production migrations

4️⃣ Use Prisma in your Next.js app

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

const users = await prisma.user.findMany()

🚀 Advanced Prisma Features

🔍 Filtering & Querying

Prisma's query API is expressive and type-safe:

// Find users with emails ending in "@gmail.com"
const users = await prisma.user.findMany({
  where: {
    email: { endsWith: "@gmail.com" },
    posts: { some: { likes: { gt: 100 } } }
  }
})

📄 Select & Include (Optimize Queries)

Fetch only what you need:

// Get only user names and their post titles
const users = await prisma.user.findMany({
  select: {
    name: true,
    posts: { select: { title: true } }
  }
})

📦 Built-in Pagination

No extra libraries needed:

// Pagination: skip 10, take 5
const posts = await prisma.post.findMany({
  skip: 10,
  take: 5
})

✍️ CRUD Made Easy

// Create
await prisma.user.create({ data: { name: "Alice" } })

// Update
await prisma.user.update({ where: { id: 1 }, data: { name: "Bob" } })

// Delete
await prisma.user.delete({ where: { id: 1 } })

🔗 Relations & Nested Writes

Define one-to-many, many-to-many, or one-to-one relations in your schema:

model Post {
  id     Int    @id @default(autoincrement())
  title  String
  author User   @relation(fields: [authorId], references: [id])
  authorId Int
}

Then query nested data easily:

const postsWithAuthors = await prisma.post.findMany({
  include: { author: true }
})

🌱 Seeding Your Database

Use prisma/seed.ts to populate test data:

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

async function seed() {
  await prisma.user.createMany({
    data: [
      { name: "Alice", email: "alice@example.com" },
      { name: "Bob", email: "bob@example.com" }
    ]
  })
}
seed()

Run with:

npx prisma db seed

⚡ Caching & Revalidation in Next.js

Prisma doesn't handle caching, but Next.js does!

Option 1: Server-Side Caching

// Force-cache (default)
fetch('/api/users', { cache: 'force-cache' })

// No-store (always fresh)
fetch('/api/users', { cache: 'no-store' })

Option 2: Manual Revalidation

// Revalidate a route after a mutation
revalidatePath('/dashboard')

🎯 Final Thoughts

Prisma + Next.js is a game-changer for full-stack devs. You get:
✔ Type-safe database queries
✔ Zero-boilerplate CRUD
✔ Clean, intuitive API
✔ Built-in tools like Prisma Studio (npx prisma studio)

If you're using Next.js, give Prisma a try it's one of those tools that just feels right.

🔥 What's Next?

Try the Prisma Quickstart
Explore Next.js + Prisma templates
Check out Prisma's docs for advanced use cases

What's your favorite ORM for Next.js? Let me know in the comments! 👇

Crack the Code: How to Make Coding as Addictive as Video Games

Pedram — Sat, 14 Dec 2024 11:05:30 +0000

Ever thought coding could be as thrilling as a boss battle in your favorite video game or as addictive as doom-scrolling Instagram at midnight? Buckle up, because this article is your ticket to rewiring your brain and making coding a dopamine-packed adventure. Inspired by the insightful and highly engaging video “How to Trick Your Brain to Love Coding” by a seasoned programmer who turned his gaming obsession into a passion for coding, we’ll dive into some genius hacks to turn coding into your new obsession. Let’s gamify your journey to becoming a code ninja!

🎮 The Science Behind the Addiction:

Meet Your Brain's MVP
Why are video games so hard to put down, but coding can feel like pulling teeth? Two words: instant dopamine. This magical molecule in your brain is responsible for those addictive bursts of joy when you win a game level or get a social media like. The problem? Coding doesn’t naturally serve up those quick dopamine hits—at least not at first. But don’t worry; we’ve got five brilliant hacks (borrowed from the video) to trick your brain into loving code like it’s the next season of your favorite show.

💡 Hack #1: Embrace the Power of Streaks

You’ve seen it on apps like Duolingo or GitHub—streaks make you want to keep showing up. Why? Because breaking that chain feels like letting down your entire lineage.

Start small: Solve one LeetCode problem or write 10 lines of code daily.
Visualize your progress: Use a calendar or app to track your streaks and bask in the glory of consecutive wins.
The video highlights how daily consistency, even for just 15 minutes, can build unstoppable momentum. Remember, even a short session a day keeps the coding blues away.

🎯 Hack #2: Level Up Gradually

Video games never drop you into the hardest level right away—they ease you in with tutorials and small wins. Do the same with coding:

Begin with simple projects like a to-do list or calculator.
Move to slightly harder challenges as your confidence grows.
Treat every small victory like beating a mini-boss.
The creator of the video emphasizes starting small and working your way up, creating a positive feedback loop that keeps you hooked.

🎨 Hack #3: Make It Fun (Because Why Not?)

Stop treating coding like a dull homework assignment. Turn it into a sandbox of creativity:

Build quirky projects that make you laugh or solve random problems in your life.
Try gamifying your goals—assign points for finishing tasks and reward yourself (chocolate or Netflix, anyone?).
Forget the pressure of landing a dream job or nailing an interview—code just for fun sometimes.
In the video, the speaker shares how coding moved from a boring task in school to a joyful creative outlet when they started building passion projects like games and fun applications.

🗂 Hack #4: Break It Down with Checklists

A giant goal like “become a full-stack developer” can feel overwhelming. Break it into bite-sized tasks:

Write down micro-goals like “learn HTML basics” or “build a simple web page.”
Check off tasks as you complete them and enjoy the sweet dopamine rush.
Use tools like Notion or a classic sticky note system—whatever feels satisfying.
In the video, there’s a great analogy comparing coding checklists to video game missions: every small task completed is a mini victory.

🤹 Hack #5: Spice Things Up with Novelty

Routine is the enemy of excitement. Keep your brain entertained by mixing things up:

Dive into new languages or frameworks (hello, Python vs. Java wars!).
Explore different domains—AI, web development, game dev—you name it.
Experiment with new learning formats: hands-on projects, tutorials, or hackathons.
The video encourages embracing novelty to stay engaged and avoid coding burnout. Learning a new language or switching up projects can reignite your enthusiasm.

🧘 Hack #6: Detox from Distractions

Let’s face it: social media and gaming are dopamine hogs. A quick detox can work wonders for your focus:

Identify your biggest distractions and save them as rewards for after coding sessions.
Start your day with coding instead of Instagram—you’ll be surprised at how satisfying it feels.
Celebrate small wins, even if it’s just solving a pesky bug.
In the video, the speaker shares how reducing instant dopamine hits from distractions helped them appreciate the slower but deeply satisfying rewards of coding.

🚀 Conclusion:

Level Up, One Line at a Time
Coding doesn’t have to be a grind. With these hacks, inspired by the brilliant advice in “How to Trick Your Brain to Love Coding,” you can transform it into an engaging, rewarding journey that you actually look forward to. Remember, it’s not about trying everything at once—pick the strategies that resonate with you and tweak them as needed.

Now, put down the controller and pick up the keyboard. Your dopamine-fueled coding adventure awaits!

Exploring React 19: Key Features You Need to Know

Pedram — Sat, 07 Dec 2024 19:13:53 +0000

React continues to evolve, and with each new version, it brings innovations that simplify development and improve performance. React 19 is no exception, offering an array of features designed to optimize the developer experience and make apps more efficient. Whether you're working on large-scale projects or building smaller applications, the new capabilities in React 19 promise to enhance your workflow and tackle common pain points. In this post, we'll explore some of the most exciting new features in React 19 and how they can make your React development even better.

1. React Compiler (React Forget):

What is it?
React Compiler, also known as "React Forget," is a powerful tool that automatically handles memoization optimizations. This means you no longer need to manually use useMemo, useCallback, or React.memo.

Why is it important?
In large projects, with many components, unnecessary re-renders can slow down the application and complicate the code. This compiler solves this issue, allowing developers to focus on the core logic of their code.

How does it work?
React Forget analyzes your code and detects where memoization is needed. Internally, it uses optimization methods that are fully compatible with React's architecture.

Example:
Without React Forget:

function TodoList({ todos, addTodo }) {
  const handleAddTodo = useCallback(() => {
    addTodo('New Todo');
  }, [addTodo]);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
      <button onClick={handleAddTodo}>Add Todo</button>
    </ul>
  );
}

With React Forget:


function TodoList({ todos, addTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
      <button onClick={() => addTodo('New Todo')}>Add Todo</button>
    </ul>
  );
}

No optimization is lost, but the code is cleaner and simpler.

2. Web Components and Custom Elements:

What are they?
Web Components are like building blocks that you can use to create an app, even if it's not written in React. The new version of React makes it easier to integrate Web Components within React components.

Features:

Better support for default web features like className, ref, and onClick.
Better coordination with states like Shadow DOM.
Native support for attributes and properties.
Why is it important?
If you're working in a large team that uses different technologies (e.g., some people use React, while others use Vanilla JS or Web Components), this feature makes it easier to integrate various codebases.

Example:
Imagine you have a Web Component for selecting a date:

<date-picker selected-date="2024-12-07"></date-picker>

In React:


function App() {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.addEventListener('change', (event) => {
      console.log(event.detail.selectedDate); // Get the selected date
    });
  }, []);

  return <date-picker ref={ref} selected-date="2024-12-07"></date-picker>;
}

You can easily use the features of your Web Component in React.

3. Enhanced Hooks:

What are they?
React hooks have always been used for state and behavior management. Now, with improvements to existing hooks and the addition of new ones, you can solve common issues more easily.

New Features:

Improved useMemo and useCallback: More optimized performance with reduced memory overhead.
New useResource hook: Manages Async Resources like fetching data.
Form-related hooks: useFormState and useFormStatus.
Why is it important?
Handling forms and async resources has always been tricky. These updates make these tasks much easier.
Example (Form Management):
Previously, you had to use useState or libraries like Formik to manage form state. Now, with useFormState and useFormStatus, it’s simpler:

function MyForm() {
  const { formState, setFormState } = useFormState();
  const { isSubmitting, errors } = useFormStatus();

  const handleSubmit = () => {
    setFormState({ ...formState, isSubmitting: true });
    // Submit form...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formState.email || ''}
        onChange={(e) => setFormState({ ...formState, email: e.target.value })}
      />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit" disabled={isSubmitting}>Submit</button>
    </form>
  );
}

4. Server Components and Actions:

What are they?
Server components allow you to render parts of the UI on the server and only send the final result to the browser.

Benefits:

Better SEO: The HTML content is ready to be served.
Higher performance: Reduces the JavaScript load on the client.
Actions: You can send data and interact with the server directly from inside React.
Why is it important?
This improves application speed and reduces load on the client.

Example (Actions):
Imagine you have a component that fetches and manages a list of users from the server:

// Server Component
export default function UserList() {
  const users = fetchUsers(); // This renders on the server

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

5. Asset Loading:

What is it?
A new feature that allows you to preload files like images, CSS, or even scripts before they're needed.

Why is it important?
This reduces page load time and provides a better user experience.

Example:

import { preload } from 'react';

preload('styles/page.css', { as: 'style' }); // Preload CSS file
preload('images/banner.jpg', { as: 'image' }); // Preload image

Metadata and Styles Management: What is it? You can now natively manage meta tags, titles, and styles.

Example:

export function Head() {


  return (
    <>
      <title>React 19 Features</title>
      <meta name="description" content="Explore the latest features of React 19." />
    </>
  );
}

Conclusion:
React 19 brings some exciting and game-changing features that will undoubtedly enhance your development experience. From automating optimizations with React Forget to streamlining form management with new hooks, these updates will help you write cleaner, faster, and more efficient code. Whether you're working with Web Components, improving SEO with server-side rendering, or speeding up asset loading, React 19 is packed with improvements that address common challenges faced by developers. Embrace these new features to keep your React projects at the forefront of modern web development!

Now, you have a comprehensive look at some of the most impactful updates in React 19. Happy coding!

DEV Community: Pedram

Why do I build projects but never monitor them?

Building a WebSocket Server in Pure Node.js (No Libraries)

What We're Building

What You Should Know First (Short & Clear)

HTTP vs WebSocket

Project Setup

Step 1 - Create a normal HTTP server

Step 2 - Listen for WebSocket upgrade requests

Step 3 - Create a WebSocket client in the browser

Step 4 - Complete the WebSocket handshake

Step 5 - Listen for incoming frames

Step 6 - Decode a WebSocket frame (client → server)

Step 7 - Send a message back (server → client)

Step 8 - Make the client interactive

What This Teaches You (The Real Value)

Final Notes

You Probably Don’t Need useEffect (Most of the Time)

1. Derived State? No Effect Needed.

2. Filtered Lists? Still No Effect.

3. User Actions Should Not Trigger Effects

4. Resetting State When a Prop Changes

So... When Should You Use useEffect?

The Humble Takeaway

Why React Components Must Return a Single Root Element

React's Need for a Single Root

How We Solve This: Wrapping Elements

Example with a <div>:

Example with a Fragment:

What Happens if You Don't Use a Wrapper?

Deeper Reason: Virtual DOM and Diffing

Quick Summary

Final Thoughts

🔐 Clerk + Next.js: A Developer-Friendly Auth Stack That Gets Out of Your Way

✅ What Is Clerk?

⚙️ Key Features + Code Examples

1. 🔌 Quick Integration with Next.js

2. 🧩 Drop-in Components

3. 🎨 Customization (Themes & CSS)

4. 🔐 Modern Authentication Methods

5. 📦 Session Management Done Right

6. 🛠 Developer Experience

⚠️ One Limitation: Not Self-Hosted

✅ When to Use Clerk

🧵 Final Thoughts

🔍 A Developer-Friendly Guide to Prisma with Next.js (From Basics to Powerful Features)

📌 Overview

🧠 What is Prisma?

⚙️ Why Prisma + Next.js = ❤️

🛠️ Quick Setup

🚀 Advanced Prisma Features

🔍 Filtering & Querying

📄 Select & Include (Optimize Queries)

📦 Built-in Pagination

✍️ CRUD Made Easy

🔗 Relations & Nested Writes

🌱 Seeding Your Database

⚡ Caching & Revalidation in Next.js

🎯 Final Thoughts

🔥 What's Next?

Crack the Code: How to Make Coding as Addictive as Video Games

🎮 The Science Behind the Addiction:

💡 Hack #1: Embrace the Power of Streaks

🎯 Hack #2: Level Up Gradually

🎨 Hack #3: Make It Fun (Because Why Not?)

🗂 Hack #4: Break It Down with Checklists

🤹 Hack #5: Spice Things Up with Novelty

🧘 Hack #6: Detox from Distractions

🚀 Conclusion:

Exploring React 19: Key Features You Need to Know

1. React Compiler (React Forget):

2. Web Components and Custom Elements:

3. Enhanced Hooks:

4. Server Components and Actions:

5. Asset Loading:

So... When Should You Use `useEffect`?

Example with a `<div>`: