For most contributors, the answer is simple: nothing. The repositories they contributed to become distant memories, the architecture they briefly touched remains unexplored, and the relationships they could have built with maintainers never formed.

I decided to do things differently this year. Let me tell you how one Hacktoberfest discovery turned into a masterclass in production AI systems.

The Problem: October-Only Open Source

Let's be honest about the Hacktoberfest paradox:

The Surface-Level Contribution Trap: Quick documentation fixes and typo corrections are valuable, don't get me wrong. But if that's ALL you do, you're missing the forest for the trees. The real learning happens when you understand why the code is structured a certain way, not just that a semicolon was missing.

Chasing Swag Over Growth: T-shirts and badges are nice, but they don't teach you how to build production-grade systems. The developers who grow fastest are the ones who stick around after October.

Missed Opportunities: The best open source contributions come from contributors who understand the codebase deeply. That takes time, more than one month.

The Discovery: Finding Skyflo.ai

While searching for interesting projects to contribute to, I stumbled upon Skyflo.ai, an open-source AI agent for DevOps and cloud-native operations.

As someone actively learning AI engineering and building agent architectures, this wasn't just another contribution opportunity. It was exactly what I was looking to learn:

• LangGraph for stateful agent orchestration

• MCP (Model Context Protocol) for standardized tool execution

• Human-in-the-loop safety patterns

• Kubernetes-native deployment

Instead of submitting a quick PR and moving on, I decided to dive deep.

What is Skyflo.ai?

Skyflo.ai is an AI copilot that unifies Kubernetes operations and CI/CD systems behind a natural-language interface. Instead of memorizing CLI commands or clicking through UIs, you just tell Skyflo.ai what you want:

Show me the last 200 lines of logs for checkout in production. 
If there are errors, summarize them.

Or:

Progressively canary rollout auth-backend in dev through 10/25/50/100 steps

The magic is in how it does this safely, with human approval required for any mutating operation.

Understanding the Architecture

This is where the real learning happened. Skyflo's architecture is a textbook example of how to build production AI agent systems.

The Three-Layer Design

1. Frontend Layer: Command Center

• Built with Next.js, TypeScript, and Tailwind

• Real-time streaming: SSE to frontend, Streamable HTTP for MCP

• Shows every action the agent takes in real-time

2. Intelligence Layer: The Engine

• FastAPI backend with LangGraph workflows

• Manages the Plan → Execute → Verify loop

• Handles approvals and checkpoints

• Real-time SSE updates to UI

3. Tool Layer: MCP Server

• FastMCP implementation for tool execution

• Standardized tools for kubectl, Helm, Jenkins, Argo Rollouts

• Safe, consistent actions across all integrations

Why This Architecture Works

The separation of concerns is beautiful:

• UI changes don't affect the agent logic

• New tools can be added without touching the intelligence layer

• Each component is independently deployable and testable

Key Learnings from Production AI Systems

1. LangGraph for Stateful Agents

Traditional LLM chains are stateless—you send a prompt, get a response, done. But real-world AI agents need to:

• Remember context across multiple steps

• Handle failures gracefully with checkpoints

• Support human intervention at any point

LangGraph provides graph-based orchestration that enables all of this. The agent's workflow is defined as nodes and edges, with state persisted at each step.

Here's how Skyflo.ai implements this workflow in engine/src/api/agent/graph.py:

from langgraph.graph import StateGraph, START, END

def _build_graph(self) -> StateGraph:
    workflow = StateGraph(AgentState)

    # Define the workflow nodes
    workflow.add_node("entry", self._entry_node)
    workflow.add_node("model", self._model_node)
    workflow.add_node("gate", self._gate_node)
    workflow.add_node("final", self._final_node)

    # Define the flow
    workflow.add_edge(START, "entry")
    workflow.add_conditional_edges(
        "entry", route_from_entry,
        {"gate": "gate", "model": "model"}
    )
    workflow.add_conditional_edges(
        "model", route_after_model,
        {"gate": "gate", "model": "model", "final": "final"}
    )
    workflow.add_conditional_edges(
        "gate", route_after_gate,
        {"model": "model", "final": "final"}
    )
    workflow.add_edge("final", END)

    return workflow

This creates a stateful workflow where the agent can loop between planning (model), execution (gate), and verification phases until the task is complete.

2. MCP: The USB-C for AI

Model Context Protocol is becoming the standard for how AI agents interact with tools. Instead of building custom integrations for each tool (the "M x N nightmare"), MCP provides:

• A universal interface for tool discovery

• Standardized invocation patterns

• Clean separation between agent logic and tool implementation

Think of it as "OpenAPI for AI agents."

3. Human-in-the-Loop is Non-Negotiable

For DevOps operations, automatic execution without approval is dangerous. Skyflo's pattern:

1. Agent creates a plan

2. User reviews and approves

3. Agent executes

4. Agent verifies the outcome

5. Repeat until complete

This Plan → Execute → Verify loop with human approval gates is a pattern every production AI system should adopt.

4. Real-Time Streaming Builds Trust

Users need to see what the agent is doing. Skyflo.ai streams every action in real-time:

• Tool invocations

• Intermediate reasoning

• Execution results

• Verification steps

This transparency is critical when your agent is touching production infrastructure. Skyflo.ai streams events via SSE from the Engine to the UI, while the Engine communicates with the MCP server over Streamable HTTP transport for efficient tool execution.

5. Safety-First Design

Key safety patterns I observed:

• Dry-run by default for Helm operations

• Diff-first before any apply

• Approval gates for all mutations

• Audit logging of every action

Architecture Note: The communication between components uses different protocols optimized for their use case:

• Engine → UI: Server-Sent Events (SSE) for real-time user feedback

• Engine → MCP Server: Streamable HTTP transport for tool execution

My Contributions to Skyflo.ai

Over the past few months, I've contributed multiple features and fixes to Skyflo.ai:

Features Shipped

• Jenkins Build Control: Added tools to stop/cancel running builds, enabling full CI/CD lifecycle management

• Kubernetes Rollout Management: Implemented rollout history and rollback tools for safer deployments

• Helm Template Rendering: Added helm_template tool to preview manifests before deployment

• Label Selector for K8s Resources: Enhanced k8s_get tool with label selectors for more precise resource queries

• Chat History Search: Implemented debounced server-side search for better conversation management

Bug Fixes & UX Improvements

• Message Continuity Fix: Resolved critical issue where chat messages disappeared after tool approval/denial

• Approval Flow Refinement: Streamlined approval action handling and message finalization in the UI

• Navigation Enhancements: Made logo clickable and added GitHub project link to navbar

• Profile Management: Fixed button state management for profile updates

• SSE Timeout Fix: Increased Nginx proxy timeouts to prevent 60-second SSE connection cutoffs

Documentation

• Fixed architecture guide link in CONTRIBUTING.md to help new contributors

Each contribution taught me something new about production AI systems, from SSE streaming patterns to Kubernetes operations safety.

My Journey: Challenges and Breakthroughs

Contributing to Skyflo.ai wasn't always smooth sailing. Here are the challenges I faced and what I learned from them:

Understanding LangGraph State Management

The Challenge: At first, I didn't understand how state flows through the workflow nodes. The conditional edges and state updates seemed complex.

The Breakthrough: After reading through engine/src/api/agent/graph.py and experimenting locally, I realized that LangGraph's state is additive, each node returns updates that merge with the existing state. This pattern makes it easy to maintain conversation context while allowing nodes to be independent.

Decoding the MCP Abstraction

The Challenge: The abstraction between the Engine, MCP Client, and MCP Server initially confused me. I couldn't understand why we needed three separate components.

The Breakthrough: Once I traced a tool call through the entire flow, it clicked:

1. Engine receives user intent via LLM

2. MCP Client (engine/src/api/services/mcp_client.py) acts as a bridge

3. MCP Server (mcp/tools/) executes actual kubectl/helm commands

This separation means you can swap out tools without touching the agent logic—brilliant architecture.

Grasping the Approval Flow

The Challenge: Understanding when and how approval gates trigger took time. The interaction between approval_decisions state and ApprovalPending exceptions was not immediately obvious.

The Breakthrough: I discovered that the gate node checks if a tool requires approval, then raises ApprovalPending which halts execution. The state is checkpointed, and when the user approves/denies, the workflow resumes from exactly where it stopped. This is production-grade error handling.

Beyond Hacktoberfest: The Year-Round Journey

October: The Starting Point

Hacktoberfest is a fantastic catalyst. It lowers the barrier to entry and introduces you to projects you'd never discover otherwise. Use it as your launchpad, not your destination.

November-December: Go Deeper

This is where the real learning happens:

• Read the entire codebase, not just the file you're changing

• Join Discord/Slack discussions to understand the roadmap

• Pick up complex issues that intimidate you

• Ask questions about architectural decisions

Year-Round: Become a Maintainer

Consistent contributions build trust. Over time:

• You start reviewing other contributors' PRs

• Maintainers ask for your input on design decisions

• You shape the project's future direction

• You build lasting professional relationships

The Contributor Mindset

Here's what separates occasional contributors from impactful ones:

1. Choose projects you want to learn from

Don't just pick easy projects to farm PRs. Pick projects that use technologies you want to master. My contribution to Skyflo.ai taught me more about production AI systems than any tutorial could.

2. Contribute in multiple ways

• Code features and bug fixes

• Documentation improvements

• Test coverage

• Code reviews

• Community support

All contributions are valuable. Mix them up.

3. Build relationships

Open source is as much about people as it is about code. The maintainers and contributors you meet today become your professional network tomorrow.

4. Track your growth, not just your PRs

The real metric isn't merged PRs, it's skills gained, patterns learned, and confidence built.

Your Turn: Start Now

Whether it's Skyflo.ai or another project that excites you, the best time to start contributing is now. Not next October, now.

Here's your action plan:

1. Find a project that aligns with what you want to learn

2. Read the contributing guidelines and code of conduct

3. Set up the development environment locally

4. Start with the codebase, not the issues, understand before you contribute

5. Join the community (Discord, Slack, Discussions)

6. Pick your first issue and dive in

7. Stay around after your first PR merges

Resources

• Skyflo.ai GitHub: github.com/skyflo-ai/skyflo

• Skyflo.ai Discord: discord.gg/kCFNavMund

• LangGraph Docs: docs.langchain.com/langgraph

• Model Context Protocol: modelcontextprotocol.io

Connect With Me

I'm sharing my AI engineering journey, open source contributions, and developer productivity tips:

• YouTube: @sachin-chaurasiya

• Blog: blog.sachinchaurasiya.dev

• LinkedIn: in/sachin-chaurasiya

• X: @sachindotcom

• Dev.to: sachinchaurasiya

What's a project that taught you something unexpected? Drop a comment, I'd love to hear your open source stories.

Developers are divided. One side claims coding agents suck. The other insists you’re just using them wrong; it’s a skill issue. While there is truth to both perspectives, the most common skill issue isn’t about prompt engineering ,  it’s about a fundamental misunderstanding of the tool’s primary constraint.

If there is a skill issue that I see most often with devs, it is not thinking enough about the context window.

What is the Context Window?

The context window is the complete set of input and output tokens an LLM processes in a single session. Think of it as the model’s working memory, everything it can see and consider when generating a response.

This includes:

• Input Tokens: Your system prompt, instructions, and user messages

• Output Tokens: The assistant’s generated responses

As your conversation grows, so does the token count. Eventually, you’ll hit a limit set by the model’s provider. This can happen if a conversation becomes too long, or even from a single, very large input like uploading extensive documentation. Exceeding this limit results in an error, and generation will stop cold.

Context Windows in 2025

Model providers set different limits based on architecture and cost. These can range from a few thousand to several million tokens , but as we’ll see, bigger isn’t always better.

Gemini has really large context windows, but as we’ll see… bigger is not always better.

The Paradox: More Context, Worse Performance

Here’s the counterintuitive truth: the more information you give a model, the worse it performs at retrieving specific details. This is true for all models, from the smallest to the largest.

Why doesn’t infinite context exist? Two reasons:

1. Cost & Memory

LLM processing is expensive. Larger contexts consume significantly more memory per process, driving up both computational costs and latency.

2. Performance Degradation

This is the critical one. An LLM’s attention is not distributed evenly across the context. Information at the very beginning and very end of a conversation has the most impact on the output. Information in the middle? It’s often de-prioritized or ignored entirely.

This is called the Lost in the Middle problem.

This isn’t a bug, it’s an emergent property of transformer architecture. Interestingly, it mirrors human cognitive biases:

• Primacy Bias: Better recall for items at the beginning

• Recency Bias: Better recall for items at the end

Just like humans do, models do better with less, more focused information.

Case Study: A 10 Million Token Window is Useless If the Model Can’t Use It

When Meta announced a model with a 10-million-token context window, it seemed like a breakthrough. However, real-world testing quickly revealed it suffered from severe lost-in-the-middle problems. You could feed it vast amounts of information, but the model would fail to retrieve or act on it effectively.

When you’re assessing an LLM, you shouldn’t just look at how big the context window is. You should look at how well it retrieves information from its context window.

The Solution: Keep Your Context Lean and Focused

Since shorter context windows suffer less from the lost-in-the-middle problem, the key to better performance is proactive management. Regularly clearing your coding agent’s chat history refreshes its memory and ensures your instructions are given high priority.

This is the single most effective way to improve results.

Step 1: Get Full Transparency Into Your Context Usage

You cannot manage what you cannot measure. A good coding agent provides tools to inspect the current state of your context window. For example, in Cursor:

Step 2: Your Default Action Should Be to clear the Conversation

When you start a new, unrelated task, or when context usage gets high (e.g., less than 50k tokens free), the best practice is to clear the conversation history entirely. This frees up the entire context window, giving you a blank slate and ensuring maximum performance for the new task.

Step 3: Use compact When You Need to Preserve the Conversation's Intent

compact is an alternative that clears the detailed history but generates an LLM-powered summary. This preserves the vibes or core goals of the conversation in a much smaller package.

This preserves some of the intention… like a mini rules file just for this conversation.

While useful, be aware that generating the summary itself takes time and consumes tokens.

A Word of Warning: Hidden Context Can Sabotage Performance

Be extremely cautious about tools and configurations that add large amounts of hidden context. This bloats your window from the start, pushing your actual conversation into the dreaded middle.

Common Culprits:

• LSP/MCP Servers: These can inject enormous toolsets into your system prompt

• Large Rule Files: Overly complex or numerous custom rules in tools like Cursor or Claude Code

When hidden tools consume most of your context, your actual messages end up in the lost in the middle zone , exactly where the model pays the least attention.

Key Takeaways

1. The context window is the model’s entire memory (input + output). As conversations grow, this fills up quickly and performance suffers.

2. All models have a hardcoded limit and suffer from lost-in-the-middle attention decay. Even million-token windows aren’t immune to this problem.

3. A leaner, more focused context consistently yields better performance. Clear early, clear often.

The New Mindset

Develop a healthy paranoia about what’s in your context. Actively manage it with tools like clear and compact. This skill is what separates frustrating interactions from productive partnerships with AI.

Mastering the context window is the key to great results.

Everyone is building agents, demos, and workflows, but very few of them are production-ready.

I recently read a research paper on designing, developing, and deploying production-grade agentic AI workflows, and it stood out because it focuses less on hype and more on engineering discipline.

This post is a practical breakdown of what it actually takes to build reliable, scalable, and maintainable agentic AI systems, not prototypes, not experiments, but systems that can survive in production.

These are my key learnings, translated from research language into real-world engineering insights.

Agentic AI Is a Shift in System Design

Traditional AI systems were simple:

• Prompt goes in

• Response comes out

Agentic AI systems are very different.

They involve agents that can:

• Plan steps

• Call tools

• Validate results

• Retry on failure

• Coordinate with other agents

• Operate with minimal human intervention

This is not about writing better prompts.

It’s about designing AI systems, not AI demos.

From Single Models to Agentic Workflows

Earlier AI models were built for specific tasks:

• Sentiment analysis

• Image classification

• Entity extraction

Now, with large language models, we have general-purpose reasoning engines. But the real power comes when we combine them into agentic workflows.

In an agentic workflow:

• Each agent has a specific role

• Multiple agents collaborate

• Reasoning, validation, and execution are separated

This modularity is what makes systems reliable and scalable.

One Agent, One Responsibility

One of the strongest principles from the paper is simple:

Do not overload agents.

Each agent should:

• Have a single responsibility

• Ideally use a single tool

• Produce a predictable output

When agents try to do too much:

• Prompts become complex

• Behavior becomes non-deterministic

• Debugging becomes painful

This is just classic software engineering, applied to AI.

Tools Matter More Than Intelligence

A key insight I strongly agree with:

Agents don’t need to be smarter. They need better tools.

The reliability of an agent depends on:

• Deterministic tools

• Clear input/output contracts

• Reduced ambiguity

Your agent is only as good as the tools and boundaries you give it.

Don’t Use AI Where You Don’t Need It

Not everything needs AI.

If a task is deterministic, like:

• Writing files

• Calling APIs

• Creating database records

• Generating timestamps

Don’t ask an LLM to reason about it.

The paper recommends:

• Moving such tasks into pure functions

• Keeping AI only where reasoning is actually required

This reduces:

• Cost

• Latency

• Failure points

• Unpredictable behavior

Responsible AI Through Multi-Model Reasoning

Single-model outputs can hallucinate, drift, or bias results.

A powerful pattern discussed in the paper:

• Use multiple models to generate outputs

• Use a reasoning agent to consolidate and validate them

This approach:

• Improves accuracy

• Reduces bias

• Aligns better with responsible AI practices

Responsible AI is a system design problem, not just a model choice.

Separate Workflow Logic from Interfaces

Another important architectural idea:

• Keep agentic workflow logic separate from MCP servers or external interfaces

• MCP servers should act as thin adapters

• Core logic should live in a clean backend workflow engine

This separation:

• Improves maintainability

• Allows independent scaling

• Keeps systems flexible as tools and models evolve

Containerization and Production Readiness

Agentic AI systems are production systems.

That means:

• Containerized deployments

• Kubernetes orchestration

• Logging, monitoring, retries

• Secure tool access

• Versioned prompts and workflows

Without this, agentic systems remain fragile prototypes.

Keep It Simple (KISS)

One of the most important reminders from the paper:

Complexity kills agentic systems.

Over-engineering leads to:

• Hidden behaviors

• Hard-to-trace failures

• Unmaintainable workflows

Simple, flat, function-driven designs work best, especially when LLMs are involved.

Final Thoughts

Agentic AI is not magic. It’s a system design problem.

What this research paper made very clear is that moving from demos to production-grade agentic AI requires strong engineering discipline, clear responsibilities, deterministic tooling, thoughtful orchestration, and simplicity in design.

Models will keep improving, but without good system design, agentic workflows will remain fragile and hard to maintain. The real leverage comes from how we compose agents, tools, and workflows, not from chasing the latest model.

If you’re serious about building agentic AI systems that actually work in production, this paper is worth reading end to end: A Practical Guide for Designing, Developing, and Deploying Production-Grade Agentic AI Workflows

I’ll continue sharing learnings as I apply these ideas while building real systems.

Canvas rendering, animation, and user interaction occur on the main thread. If the rendering and animation are intensive, they can affect performance. After a few weeks, we received feedback from users that the application felt laggy and slow. So, I decided to move the whole pipeline to a web worker. However, Canvas requires DOM access for rendering and animations, which is not available in web workers. This limitation makes using Canvas in web workers challenging.

This is a big challenge if you want to improve the performance of a web application that frequently uses canvas rendering. So, how can we solve this problem? Fortunately, OffscreenCanvas is the answer. OffscreenCanvas provides a canvas that can be rendered offscreen, removing the dependency on the DOM.

In this article, I will discuss the OffscreenCanvas API and how to use it, using image capturing as an example. Let’s get started.

What is OffscreenCanvas?

OffscreenCanvas is a Web API that provides a canvas that can be rendered offscreen. It decouples the DOM from the Canvas API, so the <canvas> element is no longer entirely dependent on the DOM. Rendering operations can also run inside a worker context, allowing certain tasks to be performed in a separate thread and reducing the load on the main thread.

OffscreenCanvas accepts two parameters: the height and width of the canvas. You can then get the context using the getContext method:

const offScreenCanvas = new OffscreenCanvas(width, height)
const context = offScreenCanvas.getContext('2d')

Now that you understand the limitations of canvas and the benefits of OffscreenCanvas, let’s look at its usage through an image capturing example.

Using Canvas in the main thread

Before jumping into OffscreenCanvas, let’s first discuss using canvas on the main thread.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camera Capture Every 5 s</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 2rem;
      }
      #video {
        border: 2px solid #444;
        border-radius: 8px;
      }
      #captures {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
      }
      #captures img {
        width: 160px; /* thumbnail size */
        height: auto;
        border: 1px solid #888;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <button id="startBtn">Start Camera</button>

    <video id="video" width="640" height="480" autoplay playsinline muted hidden></video>

    <h2>Captured Images (every 5 s)</h2>
    <div id="captures"></div>

    <div>
      <p>Type in the input below to experience lag during image capture:</p>
      <input
        type="text"
        id="lagInput"
        placeholder="Type here to experience lag..."
        style="width: 300px; padding: 8px; margin-bottom: 10px"
      />
      <div id="typingStats">
        <p>Characters typed: <span id="charCount">0</span></p>
        <p>Typing lag: <span id="lagTime">0</span> ms</p>
      </div>
    </div>

    <script>
      const startBtn = document.getElementById('startBtn');
      const video = document.getElementById('video');
      const captures = document.getElementById('captures');

      let stream = null;
      let captureIntervalId = null;

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.canvas.width = 640;
      ctx.canvas.height = 480;

      function captureFrame() {
        if (!stream) return;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(
          (blob) => {
            if (!blob) return;
            const url = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = url;

            img.onload = () => URL.revokeObjectURL(url);

            captures.prepend(img);
          },
          'image/webp',
          0.9,
        );
      }

      function startCapturing() {
        if (captureIntervalId) return;
        captureIntervalId = setInterval(captureFrame, 5000);
      }

      async function initCamera() {
        try {
          stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
          video.srcObject = stream;
          video.hidden = false;
          startBtn.disabled = true;
          startCapturing();
        } catch (err) {
          console.error(err);
          alert('Unable to access camera: ' + err.message);
        }
      }

      startBtn.addEventListener('click', () => {
        if (!stream) {
          initCamera();
        }
      });

      window.addEventListener('beforeunload', () => {
        if (stream) {
          stream.getTracks().forEach((track) => track.stop());
        }
        if (captureIntervalId) {
          clearInterval(captureIntervalId);
        }
      });

      const lagInput = document.getElementById('lagInput');
      const charCount = document.getElementById('charCount');
      const lagTime = document.getElementById('lagTime');

      lagInput.addEventListener('input', () => {
        const startTime = performance.now();
        const currentCount = lagInput.value.length;
        charCount.textContent = currentCount;
        const endTime = performance.now();
        const typingLag = endTime - startTime;
        lagTime.textContent = typingLag.toFixed(2);
      });
    </script>
  </body>
</html>

In this example, we capture an image by creating a canvas element, drawing the image on it, converting it to a blob, and then rendering it in the UI.

const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.canvas.width = 640;
      ctx.canvas.height = 480;

function captureFrame() {
        if (!stream) return;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(
          (blob) => {
            if (!blob) return;
            const url = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = url;

            img.onload = () => URL.revokeObjectURL(url);

            captures.prepend(img);
          },
          'image/webp',
          0.9,
        );
  }

Try the example. While capturing an image, type into the input box and observe any lag.

Now that we know there is lag, let’s move canvas operations to a worker to improve performance.

Using Canvas in a Web Worker

We will change the example above by adding a worker script and then using the worker to capture the image.

The initWorker function will create the worker by loading the worker script URL. It will then create the offscreen canvas and use postMessage to send the event data to the worker, passing the offscreen canvas as a transferable object in the second parameter.

Transferable objects are objects that can have their resources moved from one place to another, ensuring the resources are used in only one place at a time.

Now, the offscreen canvas will be available in the worker and can be used for canvas-related tasks.

Offscreen canvas has a different method for converting image data to a blob, called convertToBlob. By default, it provides a high-quality image, so be sure to include the quality parameter as well.

...

<body>
    <script>
      ...
      let worker = null;
      function initWorker() {
        const blob = new Blob(
          [
            `
        self.onmessage = async (e) => {
          if (e.data.type === 'init') {
            self.canvas = e.data.canvas;
            self.ctx = self.canvas.getContext('2d');
          } else if (e.data.type === 'frame') {
            const { bitmap } = e.data;
            self.ctx.drawImage(bitmap, 0, 0, self.canvas.width, self.canvas.height);
            bitmap.close();
            const blob = await self.canvas.convertToBlob({ type: 'image/webp', quality: 0.9 });
            self.postMessage({ type: 'image', blob });
          }
        };
        `,
          ],
          { type: 'application/javascript' },
        );
        const workerUrl = URL.createObjectURL(blob);
        worker = new Worker(workerUrl);

        const offscreen = new OffscreenCanvas(640, 480);
        worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);

        worker.onmessage = (e) => {
          if (e.data.type === 'image') {
            const url = URL.createObjectURL(e.data.blob);
            const img = document.createElement('img');
            img.src = url;
            img.onload = () => URL.revokeObjectURL(url);
            captures.prepend(img);
          }
        };
      }

    </script>
</body>
...

Then update captureFrame to use the worker and send the video frame as a bitmap to the worker. This allows the worker to use the bitmap data to draw and capture the image on the canvas.

We use the createImageBitmap API to turn the video frame into a bitmap and then send it as a transferable object. This makes it available in the worker context and usable by the OffscreenCanvas.

function captureFrame() {
        if (!stream || !worker) return;
        createImageBitmap(video).then((bitmap) => {
          worker.postMessage({ type: 'frame', bitmap }, [bitmap]);
        });
}

Lastly, update the initCamera and call the initWorker function before the startCapturing function.

async function initCamera() {
        try {
          stream = await navigator.mediaDevices.getUserMedia({ video: true });
          video.srcObject = stream;
          video.hidden = false;
          startBtn.disabled = true;
          initWorker(); // NEW
          startCapturing();
        } catch (err) {
          console.error(err);
          alert('Unable to access camera: ' + err.message);
        }
}

Try the updated example. While capturing an image, use the input box to type as quickly as possible and observe for any lag.

Notice the difference: when the canvas renders on the main thread, the log is 0.80ms, but in a web worker, it's 0.20ms. This clearly demonstrates better performance. In the real world, this difference can save significant money and reduce the user churn rate.

Conclusion

OffscreenCanvas is a helpful API that allows moving canvas tasks off the main thread, improving performance and user experience. In our example, we:

1. Created a regular canvas on the main thread

2. Moved it to a web worker using OffscreenCanvas

3. Handled image rendering in the worker

4. Sent the result back to the main thread for display

By using web workers and OffscreenCanvas, you can significantly improve performance in apps that use canvas for rendering. Try it in your next project.

Thanks for reading! If you found this article useful, please like, comment, and share it.

Resources

• OffscreenCanvas

• Web Workers API

• Transferable Objects

• CreateImageBitMap

• CanIUse: OffscreenCanvas

To give AI the right instructions, you need to know what you want, why you want it, and how it will impact your work. That's why having strong basics in coding and problem-solving is more important than ever.

How AI is Changing Software Development

AI has changed how developers work in several ways:

Writing Code

AI tools can write functions, classes, or components based on descriptions. They understand context and can match your coding style.

Understanding Code

AI can analyze large codebases, explain unfamiliar code, and find patterns across different parts of your project.

Finding and Fixing Problems

These tools can spot bugs, suggest fixes, and find performance issues that humans might miss.

Automating Repetitive Tasks

Tasks like creating standard code, transforming data, and making tests can be automated with AI, letting developers focus on more important work.

Helping with Documentation

AI can create, summarize, and update documentation to keep information current.

These features boost productivity, but they depend on your ability to guide the AI effectively. Unclear instructions lead to poor solutions, which is why knowing the basics is so important.

Why The Basics Matter More Now

Good In = Good Out

AI works like this: what you tell it decides what you get back. Clear instructions get good answers. You need:

• Basic Skills: Know how coding works so you can ask for what you need

• Planning Skills: Understand how parts fit together to guide AI

• Problem-Solving: Break big problems into small pieces AI can handle

Know What You Want First

Before asking AI for help, you must know:

• What's the real problem? What can't be changed?

• Why this way? What other ways could work?

• Will it stay good? Is it fast? Easy to fix? Can it grow?

Without these answers, you might get something that works but causes problems later.

Check AI's Answers

Never just trust what AI gives you. Good basics help you:

• Find mistakes in AI's code

• See security problems AI missed

• Make sure the code follows good practices

• Check that it actually fixes your problem

Stop Rewording Your Questions

Many people get stuck asking AI the same thing different ways. Strong basics help by:

• Letting you ask clearly the first time

• Helping you understand what AI says back

• Showing how to make real improvements

How to Use AI Better

Think Before You Ask

Start with your own brain:

1. Know your problem before asking AI

2. Think of some answers yourself first

3. Pick parts where AI can help the most

4. Gather facts that AI needs to understand

Always Double-Check

Never just use what AI gives you:

• Try weird cases that might break it

• Make sure it's fast, not just working

• Look for safety problems AI missed

• Keep it simple so others can read it

Get Better Each Time

When AI gives bad answers:

• Ask why it didn't work

• Learn more about your problem

• Add helpful facts in your next try

• Break big questions into smaller ones

Conclusion

AI is a great tool, but it can't replace knowledge and experience. To get the most out of it, focus on learning the basics, thinking critically, and improving your problem-solving skills. With strong fundamentals, AI can help you work faster and smarter.

What are Web Workers?

Web Workers let JavaScript run tasks in the background without blocking the main thread, which keeps your UI smooth and responsive. You can create them using the Web Workers API, which takes two parameters: url and options. Here is a simple example of creating a web worker.

const worker = new Worker('./worker.js', { type: 'module' });

Why use Web Workers?

As mentioned earlier, web workers run tasks in the background. Here are a few reasons to use them

• Prevents page lag during heavy computations

• Handles large data processing efficiently

• Improves performance for complex web applications

How do they work?

1. The main thread creates a worker and gives it a task

2. The worker handles the task in the background

3. When finished, it sends the result back to the main thread

Alright, now we know what a web worker is, why to use them, and how they work. But that's not enough, right? So let's build the image compression application and see how to use web workers in practice.

Project setup

Create a Next.js project with TypeScript and Tailwind CSS

npx create-next-app@latest --typescript web-worker-with-example

cd web-worker-with-example

To compress images in the browser, we will use the @jsquash/web npm library to encode and decode WebP images. This library is powered by WebAssembly, so let's install it.

npm install @jsquash/webp

Great, our project setup is complete. In the next section, we will create a worker script to manage image compression.

Creating worker script

A worker script is a JavaScript or TypeScript file that contains the code to handle worker message events.

Create an imageCompressionWorker.ts file inside the src/worker folder and add the following code.

/// <reference lib="webworker" />

const ctx = self as DedicatedWorkerGlobalScope;

import { decode, encode } from '@jsquash/webp';

ctx.onmessage = async (
  event: MessageEvent<{
    id: number;
    imageFile: File;
    options: { quality: number };
  }>
) => {
  // make sure the wasm is loaded
  await import('@jsquash/webp');

  const { imageFile, options, id } = event.data;
  const fileBuffer = await imageFile.arrayBuffer();
  try {
    const imageData = await decode(fileBuffer);
    const compressedBuffer = await encode(imageData, options);
    const compressedBlob = new Blob([compressedBuffer], {
      type: imageFile.type,
    });
    ctx.postMessage({ id, blob: compressedBlob });
  } catch (error: unknown) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    ctx.postMessage({ id, error: message });
  }
};

export {};

Here, we import the encode and decode methods from the @jsquash/webp library and use the worker global scope, self, to listen for messages from the main thread.

When a message arrives, we get the image file and options, then compress the image by first decoding and then encoding it with the quality option. Finally, we use postMessage to send the compressed image blob back to the main thread. If there's an error, we handle it and send the error message back using postMessage.

The worker script is ready. In the next section, we will build the Imagelist component, update the styles, update the page, and use the worker script to handle the compression.

Using the web worker

Before we start, let's update the global.css file with the following content and remove the default styling.

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a ImageList.tsx in the src/components folder and add the following code.

/* eslint-disable @next/next/no-img-element */
import React from 'react';

export type ImgData = {
  id: number;
  file: File;
  status: 'compressing' | 'done' | 'error';
  originalUrl: string;
  compressedUrl?: string;
  error?: string;
  compressedSize?: number;
};

interface ImageListProps {
  images: ImgData[];
}

const formatBytes = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = 2;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

const ImageList: React.FC<ImageListProps> = ({ images }) => {
  return (
    <div className="mt-4">
      <h2 className="text-xl font-semibold mb-2">Image List</h2>
      <div className="space-y-4">
        {images.map((img) => (
          <div
            key={img.id}
            className="flex flex-col md:flex-row items-center border p-4 rounded"
          >
            <div className="flex-1 flex flex-col items-center">
              <p className="font-bold mb-2">Original</p>
              <img
                src={img.originalUrl}
                alt="Original"
                className="w-32 h-32 object-cover rounded border mb-2"
              />
              <p className="text-sm">Size: {formatBytes(img.file.size)}</p>
            </div>
            {img.status === 'done' && img.compressedUrl ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold mb-2">Compressed</p>
                <img
                  src={img.compressedUrl}
                  alt="Compressed"
                  className="w-32 h-32 object-cover rounded border mb-2"
                />
                <p className="text-sm">
                  Size:{' '}
                  {img.compressedSize ? formatBytes(img.compressedSize) : 'N/A'}
                </p>
                <a
                  href={img.compressedUrl}
                  download={`${img.file.name.replace(
                    /\.[^/.]+$/,
                    ''
                  )}-compressed.webp`}
                  className="mt-2 inline-block px-3 py-1 bg-blue-500 text-white rounded"
                >
                  Download
                </a>
              </div>
            ) : img.status === 'compressing' ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold">Compressing...</p>
              </div>
            ) : img.status === 'error' ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold text-red-500">Error in compression</p>
              </div>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageList;

The ImageList component takes one prop, images, which is a list of ImgData. It then displays the original and compressed images, showing their size and providing a download option for the compressed images.

Next, update the app/page.tsx with the following code, and let's go through the parts together.

'use client';

import { useState, useRef, useEffect } from 'react';
import ImageList, { ImgData } from '../components/ImageList';

export default function Home() {
  const [images, setImages] = useState<ImgData[]>([]);
  const [text, setText] = useState('');

  const workerRef = useRef<Worker | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || !workerRef.current) return;
    const filesArray = Array.from(files);
    filesArray.forEach((file, index) => {
      const id = Date.now() + index;

      const originalUrl = URL.createObjectURL(file);
      setImages((prev) => [
        ...prev,
        { id, file, status: 'compressing', originalUrl },
      ]);

      // Send the file with its id to the worker.
      workerRef.current!.postMessage({
        id,
        imageFile: file,
        options: { quality: 75 },
      });
    });
  };

  // Initialize the worker once when the component mounts.
  useEffect(() => {
    const worker = new Worker(
      new URL('../worker/imageCompressionWorker.ts', import.meta.url),
      { type: 'module' }
    );
    workerRef.current = worker;

    // Listen for messages from the worker.
    worker.onmessage = (
      event: MessageEvent<{ id: number; blob?: Blob; error?: string }>
    ) => {
      const { id, blob: compressedBlob, error } = event.data;
      setImages((prev) =>
        prev.map((img) => {
          if (img.id === id) {
            if (error) return { ...img, status: 'error', error };
            const compressedSize = compressedBlob!.size;
            const compressedUrl = URL.createObjectURL(compressedBlob!);
            return { ...img, status: 'done', compressedUrl, compressedSize };
          }
          return img;
        })
      );
    };

    return () => {
      worker.terminate();
    };
  }, []);

  return (
    <div className="min-h-screen p-8">
      <h1 className="text-2xl font-bold text-center mb-4">
        Image Compression with Web Workers
      </h1>
      <div className="rounded shadow p-4 mb-4 flex flex-col gap-2">
        <p className="text-sm">
          While images are compressing, you can interact with the textarea below
          and observe the text being typed and UI is not frozen.
        </p>
        <p className="text-sm">
          Even you can open the dev tools and then open the performance tab and
          see the INP(Interaction to Next Paint) is very low.
        </p>
        <textarea
          className="w-full h-32 border rounded p-2 text-black"
          placeholder="Type here while images are compressing..."
          value={text}
          onChange={(e) => setText(e.target.value)}
        ></textarea>
      </div>
      <div className="rounded shadow p-4">
        <input
          type="file"
          multiple
          accept="image/webp"
          onChange={handleFileChange}
        />
        <ImageList images={images} />
      </div>
    </div>
  );
}

First, we import the hooks and the ImageList component, along with ImgData for type.

import { useState, useRef, useEffect } from 'react';
import ImageList, { ImgData } from '../components/ImageList';

Then, we create a ref to hold the worker instance because we don't want to create the worker repeatedly with each re-render. We also want to avoid re-rendering the component if the worker instance changes.

const workerRef = useRef<Worker | null>(null);

In the useEffect, we are initializing the worker instance by using the imageCompressionWorker.ts worker script we created earlier.

We use the URL API with import.meta.url. This makes the path relative to the current script instead of the HTML page. This way, the bundler can safely optimize, like renaming, because otherwise, the worker.js URL might point to a file not managed by the bundler, stopping it from making assumptions. Read more here.

Once the worker is initialized, we listen for messages from it. When we receive a message, we extract the id, blob, and error, then update the images state with the new values.

Finally, we clean up the worker when the component unmounts.

useEffect(() => {
    const worker = new Worker(
      new URL('../worker/imageCompressionWorker.ts', import.meta.url),
      { type: 'module' }
    );
    workerRef.current = worker;

    // Listen for messages from the worker.
    worker.onmessage = (
      event: MessageEvent<{ id: number; blob?: Blob; error?: string }>
    ) => {
      const { id, blob: compressedBlob, error } = event.data;
      setImages((prev) =>
        prev.map((img) => {
          if (img.id === id) {
            if (error) return { ...img, status: 'error', error };
            const compressedSize = compressedBlob!.size;
            const compressedUrl = URL.createObjectURL(compressedBlob!);
            return { ...img, status: 'done', compressedUrl, compressedSize };
          }
          return img;
        })
      );
    };

    return () => {
      worker.terminate();
    };
  }, []);

To manage image file uploads, we use the handleFileChange method. This method listens for the onchange event of the file input, processes the files, and sends them to the worker for compression.

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || !workerRef.current) return;
    const filesArray = Array.from(files);
    filesArray.forEach((file, index) => {
      const id = Date.now() + index;

      const originalUrl = URL.createObjectURL(file);
      setImages((prev) => [
        ...prev,
        { id, file, status: 'compressing', originalUrl },
      ]);

      // Send the file with its id to the worker.
      workerRef.current!.postMessage({
        id,
        imageFile: file,
        options: { quality: 75 },
      });
    });
  };

Finally, render the elements the textarea, image input, and image list.

• User Selects Images: The user picks images using the file input, which makes the component create object URLs and mark each image as "compressing."

• Worker Communication: The component sends each image file (with options) to the Web Worker.

• Parallel Processes:

  • Text Area Interaction: At the same time, the user can type in the text area, showing that the UI is not blocked.

  • Image Compression: The worker compresses the image in the background.

• Completion: When compression is done, the worker sends the result back to the component, which updates the UI with the compressed image while the text area keeps working smoothly.

Great, everything is set up. In the next section, we will run the application and see how the web worker works.

Running the example

Open the terminal and run the command below, then go to http://localhost:3000/.

npm run dev

Try the live demo here: https://web-worker-with-example.vercel.app/

Conclusion

Web workers are a great tool to improve application performance. By using Web Workers, you ensure faster, smoother, and more responsive applications. However, they should not be overused and should only be used when necessary. Also, check browser support, which is currently about 98% globally. You can check it here.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

• Using web workers

• Web worker Browser Compatibility

• Source Code

• Jsquash webp doc

In this guide, I'll show you how to build a collaborative text editor using Next.js and Liveblocks, a library that makes real-time collaboration easy. By the end, you'll have a working editor where multiple users can edit a document, see each other's changes in real-time, and track who is online and what they are doing.

What to Expect from This Guide?

Part 1: Understanding Collaborative Editors and the Role of Liveblocks

In the first part, we'll look at what collaborative editors are, how they work, and the technologies behind them. We'll focus on WebSockets for real-time updates and discuss how Liveblocks makes building these features easier.

Part 2: Building the Collaborative Editor Step-by-Step

In the second part, we'll start building the editor from scratch. We'll set up the project, integrate Liveblocks, and add features like real-time editing, user presence indicators, and managing document state. By the end, you'll have a live, shareable editor to show off.

Ready to get started? First, let's understand the basics of collaborative editors, the technology behind them, and why Liveblocks is perfect for building them.

What is a Collaborative Editor?

Imagine you're editing a document with a friend. You both see each other’s changes in real-time, making it feel like you're working on the same computer. That’s the magic of collaborative editors.

A collaborative editor is a software tool that lets multiple users work on the same document or file at the same time. Each user can make changes, and everyone sees these updates instantly. Examples include Google Docs, Notion, and Figma.

How Do Collaborative Editors Work?

Collaborative editors use real-time communication between users and a shared server. Here’s a simple overview of how it works

1. When a user edits the document, the changes are sent to the server.

2. The server processes these changes and sends them to all connected users.

3. Everyone’s view updates instantly, showing the changes in real-time.

In scenarios where multiple users make changes simultaneously, the editor must effectively manage these updates to ensure consistency. This is where the technology that enables this real-time synchronization comes into play: WebSockets.

The Technology Behind Real-Time Collaboration: WebSockets

Most traditional websites use HTTP requests to talk to servers. This works well for static pages but isn't quick enough for real-time apps like collaborative editors.

WebSockets fix this by allowing ongoing, two-way communication between the client and the server. Instead of sending separate requests for every update, a WebSocket connection stays open. This way, data can be sent and received instantly as changes occur.

Here's a simple explanation of how WebSocket communication works

1. User 1 makes an edit.

2. The server gets the edit and sends it to both User 1 and User 2.

3. User 2 makes an edit, and the server sends it to both users again.

This way, everyone sees the same document version in real-time.

Liveblocks: Simplifying Real-Time Collaboration

Building a collaborative editor from scratch is possible, but handling real-time sync, conflict resolution, and user presence can be tricky. This is where Liveblocks helps.

Liveblocks is a powerful library that makes building collaborative apps easier. Instead of writing all the WebSocket and state management code yourself, you can use Liveblocks’ built-in features, such as

• Presence: Track who is online and what they are doing.

• Storage: Share and sync documents, drawings, or any content.

• Room Management: Manage connections and permissions for multiple users.

Here’s why using Liveblocks can save you a lot of time:

1. Built-in Presence: See who’s editing, where their cursors are, and what they’re typing all in real-time.

2. Conflict Handling: Easily manage updates when multiple users make changes at the same time.

3. Simple Integration: It works seamlessly with popular frontend frameworks like Next.js, making it easier to build and scale.

By using Liveblocks, you can focus on building the core features of your editor without worrying about low-level communication details.

Project Setup

Let's start by creating a new Next.js project.

npx create-next-app@latest collaborative-editor --typescript

After creating the project install the Liveblocks dependencies

npm install @liveblocks/client @liveblocks/node @liveblocks/react @liveblocks/yjs @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor @tiptap/pm @tiptap/react @tiptap/starter-kit yjs

Next, create a Liveblocks config to set up the types for the user information and to display the cursor in the editor.

// liveblocks.config.ts

declare global {
  interface Liveblocks {
    Presence: { cursor: { x: number; y: number } | null };
    UserMeta: {
      id: string;
      info: {
        name: string;
        color: string;
        picture: string;
      };
    };
  }
}

export {};

Go to https://liveblocks.io/ and sign up for a free account. After signing up, you'll be taken to the dashboard where you will see two projects created for you. Select the first project, go to the API keys section on the left panel, and get the secret key.

Create a .env file and add LIVEBLOCKS_SECRET_KEY environment variable and secret key you copied from the API keys dashboard.

LIVEBLOCKS_SECRET_KEY=sk_dev_xxxxxxxxxx_xxxxxxx_xxx_xxxxx_x

Alright, the project setup is done. In the next section, we will create components for our editor.

Create components for the editor

I won't talk about styling because this post is about building a collaborative editor with Liveblocks and Next.js. I'll share a GitHub link for the CSS and icon files.
Here is the link for all components, their CSS files, and icons

Let's start by creating a toolbar component and adding the following code. We will use Tiptap to build the editor because it is one of my favorite tools for creating rich text and collaborative editors.

// components/Toolbar.tsx

import { Editor } from "@tiptap/react";
import styles from "./Toolbar.module.css";

type Props = {
  editor: Editor | null;
};

export function Toolbar({ editor }: Props) {
  if (!editor) {
    return null;
  }

  return (
    <div className={styles.toolbar}>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBold().run()}
        data-active={editor.isActive("bold") ? "is-active" : undefined}
        aria-label="bold"
      >
        <BoldIcon />
      </button>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleItalic().run()}
        data-active={editor.isActive("italic") ? "is-active" : undefined}
        aria-label="italic"
      >
        <ItalicIcon />
      </button>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleStrike().run()}
        data-active={editor.isActive("strike") ? "is-active" : undefined}
        aria-label="strikethrough"
      >
        <StrikethroughIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
        data-active={editor.isActive("blockquote") ? "is-active" : undefined}
        aria-label="strikethrough"
      >
        <BlockQuoteIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().setHorizontalRule().run()}
        data-active={undefined}
        aria-label="horizontal-line"
      >
        <HorizontalLineIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        data-active={editor.isActive("bulletList") ? "is-active" : undefined}
        aria-label="bullet-list"
      >
        <BulletListIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        data-active={editor.isActive("orderedList") ? "is-active" : undefined}
        aria-label="number-list"
      >
        <OrderedListIcon />
      </button>
    </div>
  );
}

Here we are using the Tiptap editor and its formatting options like italic, bold, and lists.

Next, let's create an Avatars component to display all the online users in the room.

// components/Avatars.tsx

import { useOthers, useSelf } from "@liveblocks/react/suspense";
import styles from "./Avatars.module.css";

export function Avatars() {
  const users = useOthers();
  const currentUser = useSelf();

  return (
    <div className={styles.avatars}>
      {users.map(({ connectionId, info }) => {
        return (
          <Avatar key={connectionId} picture={info.picture} name={info.name} />
        );
      })}

      {currentUser && (
        <div className="relative ml-8 first:ml-0">
          <Avatar
            picture={currentUser.info.picture}
            name={currentUser.info.name}
          />
        </div>
      )}
    </div>
  );
}

export function Avatar({ picture, name }: { picture: string; name: string }) {
  return (
    <div className={styles.avatar} data-tooltip={name}>
      <img
        src={picture}
        className={styles.avatar_picture}
        data-tooltip={name}
      />
    </div>
  );
}

Here we are using two hooks:

• useOthers: to get the list of other users connected to the same room I'm in.

• useSelf: to get the info of my own user

Now let's create an ErrorListener component to catch any errors happening inside the Liveblocks provider. most important one is the 4001 when user is trying to connect the room which they don’t have access to.

// components/ErrorListener.tsx

"use client";

import { useErrorListener } from "@liveblocks/react/suspense";

import React from "react";

import styles from "./ErrorListener.module.css";
import { Loading } from "./Loading";

const ErrorListener = () => {
  const [error, setError] = React.useState<string | undefined>();

  useErrorListener((error) => {
    switch (error.code) {
      case -1:
        setError("Could not connect to Liveblocks");

        break;

      case 4001:
        // Could not connect because you don't have access to this room
        setError("You don't have access to this room");

        break;

      default:
        setError("An unexpected error occurred");

        break;
    }
  });

  return error ? (
    <div className={styles.container}>
      <div className={styles.error}>{error}</div>
    </div>
  ) : (
    <Loading />
  );
};

export default ErrorListener;

Thanks to Liveblocks for making things easier with the useErrorListener hook, which handles all the error-catching logic in our collaborative application.

Next is the ConnectToRoom component, which shows the initial UI where the user enters the room name they want to join. Then, it redirects to the room page using the entered name as the roomId.

// components/ConnectToRoom.tsx

"use client";

import React from "react";
import styles from "./ConnectToRoom.module.css";

import { useRouter } from "next/navigation";

const ConnectToRoom = () => {
  const router = useRouter();

  const inputRef = React.useRef<HTMLInputElement>(null);

  const connectToRoom = async () => {
    const roomId = inputRef.current?.value;
    if (roomId && roomId.length > 0) {
      await (async () => router.push(`/room?roomId=${roomId}`))();
    }
  };

  return (
    <div className={styles.container}>
      <h1>Connect to a room</h1>
      <p>Connect to a room to start collaborating with others.</p>
      <input
        ref={inputRef}
        type="text"
        placeholder="Room ID"
        className={styles.input}
      />
      <button className={styles.button} onClick={connectToRoom}>
        Connect
      </button>
    </div>
  );
};

export default ConnectToRoom;

Since we will get the roomId from the URL, let's create a custom hook.

// hooks/useRoomId.ts

import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export const useRoomId = () => {
  const searchParams = useSearchParams();

  const [roomId, setRoomId] = useState<string | null>(
    searchParams.get("roomId")
  );

  useEffect(() => {
    setRoomId(searchParams.get("roomId"));
  }, [searchParams]);

  return roomId;
};

Lastly, there's the Editor component, which works together with Tiptap and Liveblocks to create some of the magic.

// components/Editor.tsx

"use client";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import * as Y from "yjs";
import { LiveblocksYjsProvider } from "@liveblocks/yjs";
import { useRoom, useSelf } from "@liveblocks/react/suspense";
import { useEffect, useState } from "react";
import { Toolbar } from "./Toolbar";
import styles from "./Editor.module.css";
import { Avatars } from "@/components/Avatars";

export function Editor() {
  const room = useRoom();
  const [doc, setDoc] = useState<Y.Doc>();
  const [provider, setProvider] = useState<any>();

  useEffect(() => {
    const yDoc = new Y.Doc();
    const yProvider = new LiveblocksYjsProvider(room, yDoc);
    setDoc(yDoc);
    setProvider(yProvider);

    return () => {
      yDoc?.destroy();
      yProvider?.destroy();
    };
  }, [room]);

  if (!doc || !provider) {
    return null;
  }

  return <TiptapEditor doc={doc} provider={provider} />;
}

type EditorProps = {
  doc: Y.Doc;
  provider: any;
};

function TiptapEditor({ doc, provider }: EditorProps) {
  const userInfo = useSelf((me) => me.info);

  const editor = useEditor({
    editorProps: {
      attributes: {
        class: styles.editor,
      },
    },
    extensions: [
      StarterKit.configure({
        history: false,
      }),
      Collaboration.configure({
        document: doc,
      }),
      CollaborationCursor.configure({
        provider: provider,
        user: userInfo,
      }),
    ],
  });

  return (
    <div className={styles.container}>
      <div className={styles.editorHeader}>
        <Toolbar editor={editor} />
        <Avatars />
      </div>
      <EditorContent editor={editor} className={styles.editorContainer} />
    </div>
  );
}

Liveblocks gives us a YJS provider that helps define and store the editor content. Plus, Tiptap supports collaboration extensions, making it easy to set up collaboration.

Great, our editor is ready, but for collaboration, we need to set up the Liveblocks provider and RoomProvider. This will allow users to authenticate themselves and create a session for the room they want to join.

In the next section, we will discuss rooms and how Liveblocks enable real-time collaboration.

Set Up Liveblocks Provider and Room Provider

Before writing the code let's first understand how Liveblocks work with the diagram.

• When a user opens the app, it sends a request to find out which room they want to join. The room ID is obtained using the useRoomId hook.

• After getting the roomId, the LiveblocksProvider is set up.

• An authentication request is sent to /api/liveblocks-auth (we will set this up soon) with the roomId to check the user's access.

• If the authentication is successful, the room setup starts. This includes creating a new collaborative document instance (Y.Doc) and setting up a provider (LiveblocksYjsProvider) to handle synchronization with the Liveblocks backend.

• The LiveblocksYjsProvider opens a WebSocket connection with Liveblocks, joining the specified room.

• The initial presence state (like cursor position and user activity) is shared with other participants in the room.

• User Presence: When a user joins, their presence is updated and shared with everyone in the room.

• Cursor Tracking: Their cursor position is tracked and shared instantly using the CollaborationCursor extension.

• Document Synchronization: Any changes a user makes are sent to the Liveblocks server, which updates the shared document for all users.

• If User A edits the document, these changes are sent to Liveblocks as updates.

• Liveblocks sends these changes to all users, keeping the document in sync.

• When User B joins, their cursor and presence are shared with everyone.

• When a user leaves, the Y.Doc instance and provider are removed, and the WebSocket connection is closed.

• This starts a cleanup process to remove the user’s presence and updates from the room.

I hope the explanation above helps you understand how Liveblocks works.

As mentioned, Liveblocks needs an endpoint to verify the user and start a session for the room they want to join. So, let's create an API endpoint called liveblocks-auth.

// app/api/liveblocks-auth/route.ts

import { Liveblocks } from "@liveblocks/node";
import { NextRequest } from "next/server";

const liveblocks = new Liveblocks({
  secret: process.env.LIVEBLOCKS_SECRET_KEY!,
});

export async function POST(request: NextRequest) {
  const userId = Math.floor(Math.random() * 10) % USER_INFO.length;

  const roomId = request.nextUrl.searchParams.get("roomId");

  const session = liveblocks.prepareSession(`session-${userId}`, {
    userInfo: USER_INFO[userId],
  });

  session.allow(roomId!, session.FULL_ACCESS);

  const { body, status } = await session.authorize();
  return new Response(body, { status });
}

const USER_INFO = [
  {
    name: "Sachin Chaurasiya",
    color: "#D583F0",
    picture: "https://github.com/Sachin-chaurasiya.png",
  },
  {
    name: "Mislav Abha",
    color: "#F08385",
    picture: "https://liveblocks.io/avatars/avatar-2.png",
  },
  {
    name: "Tatum Paolo",
    color: "#F0D885",
    picture: "https://liveblocks.io/avatars/avatar-3.png",
  },
  {
    name: "Anjali Wanda",
    color: "#85EED6",
    picture: "https://liveblocks.io/avatars/avatar-4.png",
  },
  {
    name: "Jody Hekla",
    color: "#85BBF0",
    picture: "https://liveblocks.io/avatars/avatar-5.png",
  },
  {
    name: "Emil Joyce",
    color: "#8594F0",
    picture: "https://liveblocks.io/avatars/avatar-6.png",
  },
  {
    name: "Jory Quispe",
    color: "#85DBF0",
    picture: "https://liveblocks.io/avatars/avatar-7.png",
  },
  {
    name: "Quinn Elton",
    color: "#87EE85",
    picture: "https://liveblocks.io/avatars/avatar-8.png",
  },
];

Here, we are using fake user data, but in a real product, you would get the user data from the database and then create the session.

This line lets the user access the room with full permissions, which are room:read and room:write. This is just for demo purposes, but in real situations, access will depend on the user's role.

session.allow(roomId!, session.FULL_ACCESS);

Next, Let's create a Provider component and use it in the RootLayout.

// app/Providers.tsx

"use client";

import { useRoomId } from "@/hooks/useRoomId";
import { LiveblocksProvider } from "@liveblocks/react";
import { type PropsWithChildren } from "react";

export function Providers({ children }: PropsWithChildren) {
  const roomId = useRoomId();

  return (
    <LiveblocksProvider
      key={roomId}
      authEndpoint={`/api/liveblocks-auth?roomId=${roomId}`}
    >
      {children}
    </LiveblocksProvider>
  );
}

Update the root layout and wrap the children with the providers.

// app/layout.tsx
import { Providers } from "./Providers";
...

return (
    ...
    <body>
      <Providers>{children}</Providers>
    </body>
    ...
)

Alright, the providers are set up. Now, let's create a Room component using RoomProvider.

// app/Room.tsx

"use client";

import { ReactNode } from "react";
import { RoomProvider } from "@liveblocks/react/suspense";
import { ClientSideSuspense } from "@liveblocks/react";
import ErrorListener from "@/components/ErrorListener";
import { useRoomId } from "@/hooks/useRoomId";

export function Room({ children }: { children: ReactNode }) {
  const roomId = useRoomId();

  return (
    <RoomProvider
      id={roomId ?? ""}
      initialPresence={{
        cursor: null,
      }}
      key={roomId}
    >
      <ClientSideSuspense fallback={<ErrorListener />}>
        {children}
      </ClientSideSuspense>
    </RoomProvider>
  );
}

Here, RoomProvider uses two props: roomId and initialPresence for the user's cursor, which is just the x, y position of the cursor.

We use ClientSideSuspense with the ErrorListener component as a fallback. If there's an error, it will show the error; otherwise, it will display a loader, meaning the providers are still loading.

Next, create the Room page and add the following code. It's straightforward: use the Room component to wrap the Editor so that the editor gets all the connections in that specific room.

// app/room/page.tsx
"use client";

import { Room } from "@/app/Room";
import { Editor } from "@/components/Editor";

export default function RoomPage() {
  return (
    <main>
      <Room>
        <Editor />
      </Room>
    </main>
  );
}

Finally, update the Home page, which is app/page.tsx.

import ConnectToRoom from "@/components/ConnectToRoom";

export default function Home() {
  return (
    <main>
      <ConnectToRoom />
    </main>
  );
}

Alright, Liveblocks providers are set up correctly. Now, let's move on to the most exciting part: testing our collaborative editor. Are you excited? I am too! Let's test it in the next section.

Testing

Start the dev server by running the following command

npm run dev

The server will start on localhost:3000, and you will see the "Connect to Room" interface.

Enter the room ID, and you will be taken to the room page where you can work with other users in real time.

Here is an example of two users connecting to the same room, local-room.

Great job, and congratulations on building the editor with real-time collaboration.

Thanks for reading to the end. If you don't want to miss interesting topics and project-building content, subscribe to the Dev Buddy newsletter.

Conclusion

In this guide, we explore the power of collaborative applications, focusing on building a real-time collaborative text editor using Next.js and Liveblocks.

We break down the process into understanding the role of collaborative editors and setting up a project with features like real-time editing, user presence tracking, and document state management.

Resources

• GitHub Repo

• Thanks to Liveblocks for creating different examples here

What is a Proxy Object?

Before understanding what a Proxy Object is, let's look at the word Proxy. A proxy means something that acts like the original thing but isn't the original thing. Similarly, a Proxy Object is an object created using the original object that can intercept and change how the original object works.

The Proxy constructor takes two parameters

• target: the object you want to create a proxy for

• handler: an object with operations you want to change or redefine

const proxyObject = new Proxy(target, handler)

How Does a Proxy Object Work?

When we create Proxy Objects with a handler that has operations you want to change, it intercepts those operations, catches the call to the target object, and runs the custom logic you defined for those operations.

The operations are called traps, which are basically the internal methods of an object. Some of them are:

• get

• set

• deleteProperty

Here, I have created a simple visual showing how a Proxy Object works. If we try to access or set a value, it intercepts and runs the operations (traps) defined in the handler.

Alright, I hope the what and how of Proxy Objects are clear. Next, we will discuss some use cases to show why Proxy Objects are useful.

Use cases of Proxy Object

Logging

Let's say you want to create a system where every time a property is accessed from the object, it logs the information.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

This is a very simple use case, but it's useful when logging is needed, and you can expand it to do more advanced things.

We can also let users access properties that aren't directly available. For example, in the case above, we might want the full URL of the platform with the user handle.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

Validation

Another use case is checking the value before adding it. For instance, let's say we want to check the handle's value before setting it. We will validate two basic conditions:

• It should be in lowercase

• It can be alphanumeric

const proxyPlatformObj = new Proxy(platform, {
  set(target, key, value) {
    if (key === "handle" && !(/^[a-z0-9]+$/.test(value))) {
      console.error(`[Error]: ${key} should be in small case and can be alphanumerical`);
    } else {
      return Reflect.set(target, key, value);
    }
  },
});

proxyPlatformObj.handle="Sachin87"
// [Error]: handle should be in small case and can be alphanumerical

You might be wondering what Reflect.set(target, key, value) is. It's a namespace object with static methods for calling JavaScript object's internal methods that can be intercepted. If you don't want validation for all properties, you can use the Reflect object to keep the default behavior.

We talked about two use cases logging and validation, but you can intercept other internal methods based on your needs.

Conclusion

We talked about what a Proxy Object is, how it works, and some of its uses. A Proxy Object is helpful, but we should be aware of its downsides. We should use it only when necessary to avoid adding complexity or bugs by mistake.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Further Reading

• MDN Proxy Doc

• MDN Reflect Doc

Why Do Large Language Models (LLMs) Have Limits?

Even though LLMs are incredibly smart, they still have some challenges

1. Old Information

LLMs only know what they were trained on. They don’t know about anything that happened after their training, so they can miss out on the latest news or facts.

2. Limited Memory

If you have a long conversation or ask many questions, LLMs can forget the earlier part of the conversation because they can only hold so much information at once.

3. Guessing Sometimes

Sometimes, LLMs don’t know the answer but will make something up that sounds believable. This is called hallucination and it’s a big problem if you need correct information.

What is Retrieval-Augmented Generation (RAG)?

RAG helps solve these issues by allowing the AI model to look up information before giving you an answer. Here’s how it works

Step 1: Find Information

When you ask a question, instead of only relying on what the model already knows, RAG searches for extra information from the web, databases, or other sources.

Step 2: Combine

After finding relevant information, RAG gives it to the AI model, which combines it with its own knowledge to come up with a response.

Step 3: Generate Answer

The AI then uses both the information it found and what it already knows to create a more accurate and up-to-date answer.

How Does RAG Help?

Here are some of the ways RAG improves how AI models work

1. Stays Up-to-Date

RAG can look for real-time information from live sources, which means it can answer questions based on current facts.

2. Fewer Mistakes

Since RAG finds real facts from external sources, it reduces the chances of the AI making up wrong information.

3. Handles Specific Topics

If the AI needs to answer a question about a specific subject (like medicine or law), RAG can find data from trusted sources in that field, making the answers much more reliable.

In short, Retrieval-Augmented Generation (RAG) makes AI models smarter and more reliable by letting them find and use real-time information before answering. This makes it a fantastic tool for anything that needs up-to-date or factual information, like research, customer service, or learning new things.

RAG is an exciting development, and it shows how AI can continue to get better at understanding and helping us in more useful ways.

Thanks for reading till the end! I’ll see you next week with another interesting topic. Until then, happy learning!

Connect with me

• LinkedIn

• Twitter

• GitHub

What is the Broadcast Channel API?

The Broadcast Channel API is a simple method to enable communication between different tabs, windows, or iframes of the same website. It allows you to broadcast messages to all other contexts listening on the same channel, making it ideal for real-time updates and synchronization.

Why Use It?

• Real-Time Updates: Sync data like user sessions across different tabs.

• Ease of Integration: Simple to add to your existing React app.

• No Additional Libraries: Functions natively in modern browsers without extra dependencies.

Setting Up the Broadcast Channel API in React

Let’s walk through how to use the Broadcast Channel API in a React application by creating a custom hook to manage communication.

Create a Custom Hook

First, create a custom hook named useBroadcastChannel to encapsulate the Broadcast Channel logic.

import { useEffect, useState } from 'react';

const useBroadcastChannel = (channelName) => {
    const [message, setMessage] = useState(null);
    const channel = new BroadcastChannel(channelName);

    useEffect(() => {
        const handleMessage = (event) => {
            setMessage(event.data);
        };

        channel.onmessage = handleMessage;

        // Clean up the channel when the component unmounts
        return () => {
            channel.close();
        };
    }, [channel]);

    const sendMessage = (msg) => {
        channel.postMessage(msg);
    };

    return { message, sendMessage };
};

export default useBroadcastChannel;

This hook creates a new BroadcastChannel, listens for incoming messages, and provides a function to send messages.

Use the Hook in a React Component

Let’s use our custom hook in a React component to manage login sessions across different tabs.

import React, { useEffect } from 'react';
import useBroadcastChannel from './useBroadcastChannel';

const AuthManager = () => {
    const { message, sendMessage } = useBroadcastChannel('auth_channel');

    const handleLogin = () => {
        // Notify all tabs that the user has logged in
        sendMessage({ type: 'login', user: 'JohnDoe' });
    };

    const handleLogout = () => {
        // Notify all tabs that the user has logged out
        sendMessage({ type: 'logout' });
    };

    useEffect(() => {
        if (message) {
            if (message.type === 'logout') {
                alert('You have been logged out in another tab!');
            }
        }
    }, [message]);

    return (
        <div>
            <h1>Authentication Manager</h1>
            <button onClick={handleLogin}>Log In</button>
            <button onClick={handleLogout}>Log Out</button>
        </div>
    );
};

export default AuthManager;

This AuthManager component uses the useBroadcastChannel hook to handle user authentication state across tabs. When a user logs in or out, a message is sent to all other tabs on the auth_channel channel. If a logout message is received in any tab, it triggers an alert to notify the user.

Conclusion

The Broadcast Channel API provides a straightforward way to synchronize data across multiple tabs or windows in your web applications. By using a custom React hook, you can easily manage real-time messaging and improve user experience. Whether you’re handling login states or syncing other types of data, the Broadcast Channel API simplifies cross-tab communication.

Further Reading

• MDN Web Docs on Broadcast Channel API

Connect with me

• LinkedIn

• Twitter

• GitHub

What is the Page Visibility API?

The Page Visibility API is a web tool that lets developers check if a web page is visible or hidden. It has properties and events that notify when a page becomes visible or hidden, so developers can change how the app behaves.

Key Concepts

• document.visibilityState: This property shows if the document is visible or not. Possible values include:

  • visible: The page is visible to the user.

  • hidden: The page is not visible to the user.

• visibilitychange Event: This event occurs whenever the document's visibility state changes.

Why Use the Page Visibility API?

Performance Optimization

When a web page is not visible, it's smart to reduce or stop heavy tasks like animations, video playback, or data polling. This saves CPU and battery life, especially on mobile devices.

User Experience Improvement

By knowing when a user is not looking at the page, you can pause things like video playback or game animations. This way, the user won't miss any content. When the user comes back, you can resume these activities, making the experience smooth.

Accurate Analytics

Tracking visibility changes helps gather more accurate usage data. Knowing when users switch tabs or minimize windows provides better insights into user behavior.

How to Use the Page Visibility API?

Using the Page Visibility API in plain JavaScript is simple. Here’s a basic example

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    console.log('Page is visible');
    // Resume activities
  } else {
    console.log('Page is not visible');
    // Pause activities
  }
});

In this example, an event listener is attached to the visibilitychange event. Depending on the visibility state, appropriate actions are taken.

Using the Page Visibility API with ReactJS

To use the Page Visibility API in a React application, you can create a custom hook that encapsulates the logic.

import { useEffect, useState } from 'react';

const usePageVisibility = () => {
  const [isVisible, setIsVisible] = useState(!document.hidden);

  const handleVisibilityChange = () => {
    setIsVisible(!document.hidden);
  };

  useEffect(() => {
    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isVisible;
};

export default usePageVisibility;

You can then use this custom hook within a React component

import React, { useEffect } from 'react';
import usePageVisibility from './usePageVisibility';

const MyComponent = () => {
  const isVisible = usePageVisibility();

  useEffect(() => {
    if (isVisible) {
      console.log('Component is visible');
      // Resume activities
    } else {
      console.log('Component is not visible');
      // Pause activities
    }
  }, [isVisible]);

  return (
    <div>
      {isVisible ? 'Page is visible' : 'Page is not visible'}
    </div>
  );
};

export default MyComponent;

This approach ensures that your React components can respond to visibility changes efficiently, improving the overall user experience.

Example Use Cases

Video Streaming Services

Platforms like YouTube and Netflix use the Page Visibility API to pause videos when users switch tabs or minimize the browser. This way, users don't miss any content and it saves bandwidth and system resources.

Online Games

Online games can pause the game when the tab is not active. This prevents users from losing progress or missing important events in the game. It also helps save system resources and improve performance.

Data Fetching and Polling

Web applications that often fetch data from a server can slow down or stop polling when the page is not visible. This cuts down on unnecessary network requests and uses resources more efficiently.

Best Practices

Performance Considerations

When using the Page Visibility API, make sure that any paused activities resume efficiently. Avoid unnecessary state changes and resource loading to maintain good performance.

Error Handling

Always include error-handling mechanisms to manage unexpected issues or browser limitations. This helps maintain a smooth user experience, even in rare cases.

User Notifications

Consider letting users know when activities are paused because of visibility changes, especially for important tasks like video calls or gaming. This transparency can boost user trust and satisfaction.

Conclusion

The Page Visibility API helps make web apps better by adjusting to the user's focus. With this API, developers can improve performance, enhance user experience, and get accurate analytics. Whether you're using plain JavaScript or React, the Page Visibility API is very useful for modern web development.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

1. MDN Web Docs on Page Visibility API

2. Can I use: Browser Support for Page Visibility API

3. Test Page Visibility API

Connect with me

• LinkedIn

• Twitter

• GitHub

Locking Down Your Types with const Assertions

Ever wanted to make sure your types stay the same throughout your code? That's where const assertions come in handy! Think of them as superglue for your types. When you use as const, TypeScript ensures nothing changes your types later on. It's like putting a "Do Not Touch" sign on your variables to keep them safe.

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
} as const;

type User = typeof user;

// This will cause a TypeScript error
// user.id = 2;

Creating Custom Types with Pick

Imagine you have a large type, but you only need a few parts of it. No problem! With the Pick trick, you can create a new type that selects only what you need. It's like customizing your order at a restaurant – you get exactly what you want, without any extra stuff.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

const summary: UserSummary = {
  name: user.name,
  email: user.email
};

Narrowing Down Your Options with Extract

Ever had a lot of choices but only needed a few specific ones? That's where Extract helps! It's like a magic wand that picks out exactly what you need from a list of options. Say goodbye to guesswork and hello to precision!

type Fruit = 'apple' | 'banana' | 'cherry' | 'date';
type TropicalFruit = Extract<Fruit, 'banana' | 'date'>;

const myFruit: TropicalFruit = 'banana'; // Valid
// This will cause a TypeScript error
// const myFruit: TropicalFruit = 'apple';

Keeping Things Safe and Sound with Readonly

Imagine you have some important data that should never change. That's where Readonly comes in! It's like putting your data in a secure vault with a strong lock. Once you make something Readonly, no one can change it.

const fruits: ReadonlyArray<string> = ['apple', 'banana', 'cherry'];

// This will cause a TypeScript error
// fruits.push('date');

// This will also cause a TypeScript error
// fruits[1] = 'blueberry';

Mastering the keyof Operator

Ever wanted to find out what keys are in an object? Meet keyof – your helpful tool! It shows you all the keys in an object, making it easier to work with your data.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserKey = keyof User;

const key: UserKey = 'name'; // Valid
// This will cause a TypeScript error
// const invalidKey: UserKey = 'age';

Conclusion

Unlock the full power of TypeScript with five simple tricks: use const assertions to lock your types, create custom types with Pick, narrow down choices with Extract, protect data with Readonly, and use the keyof operator to easily work with object keys. These tips will help you write cleaner and more efficient code.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Connect with me

• LinkedIn

• Twitter

• GitHub

What are Type Predicates in TypeScript?

A type predicate is a function that returns a boolean, showing whether a variable is of a specific type.

function isType(arg: any): arg is Type {
  // logic to check if arg is of Type
}

Here, arg is Type is the type predicate. It tells TypeScript that if the function returns true, arg is of type Type.

Ensuring Data Integrity in API Responses

When dealing with API responses, the data might not always be in the expected format. For example, if we get user data from an API, we need to make sure it matches our User interface before using it.

interface User {
  id: number;
  name: string;
  email: string;
}

function isUser(data: any): data is User {
  return data && typeof data === 'object' && 
         'id' in data && typeof data.id === 'number' &&
         'name' in data && typeof data.name === 'string' &&
         'email' in data && typeof data.email === 'string';
}

// Simulated API response
const apiResponse: any = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com"
};

if (isUser(apiResponse)) {
  // TypeScript now knows that 'apiResponse' is a 'User'
  console.log(`User Name: ${apiResponse.name}`);
} else {
  console.error("Invalid user data");
}

This example shows how type predicates make sure the API response matches the User structure before doing anything with it, preventing possible runtime errors.

Handling Different Event Types in Event Listeners

When handling different event types, it's important to know the exact type of event to handle it properly. For example, if we have a system that logs various events like ClickEvent and KeyboardEvent.

interface ClickEvent {
  type: "click";
  x: number;
  y: number;
}

interface KeyboardEvent {
  type: "keyboard";
  key: string;
}

type Event = ClickEvent | KeyboardEvent;

function isClickEvent(event: Event): event is ClickEvent {
  return event.type === "click";
}

function isKeyboardEvent(event: Event): event is KeyboardEvent {
  return event.type === "keyboard";
}

function handleEvent(event: Event) {
  if (isClickEvent(event)) {
    console.log(`Click at coordinates: (${event.x}, ${event.y})`);
  } else if (isKeyboardEvent(event)) {
    console.log(`Key pressed: ${event.key}`);
  } else {
    console.log("Unknown event type");
  }
}

// Simulated events
const events: Event[] = [
  { type: "click", x: 100, y: 200 },
  { type: "keyboard", key: "Enter" }
];

events.forEach(handleEvent);

This example shows how type predicates can help handle different event types correctly, making sure the right logic is used based on the event type.

Validating Configuration Objects

When working with configuration objects, it's important to make sure they have the right structure before using them. Let's look at an example where we check a configuration object for a web application.

interface AppConfig {
  apiUrl: string;
  retryAttempts: number;
  debugMode: boolean;
}

function isAppConfig(config: any): config is AppConfig {
  return config && typeof config === 'object' &&
         'apiUrl' in config && typeof config.apiUrl === 'string' &&
         'retryAttempts' in config && typeof config.retryAttempts === 'number' &&
         'debugMode' in config && typeof config.debugMode === 'boolean';
}

// Simulated configuration object
const config: any = {
  apiUrl: "https://api.example.com",
  retryAttempts: 3,
  debugMode: true
};

if (isAppConfig(config)) {
  // TypeScript now knows that 'config' is an 'AppConfig'
  console.log(`API URL: ${config.apiUrl}`);
} else {
  console.error("Invalid configuration object");
}

This example shows how type predicates can check configuration objects to make sure they have the right structure before using them in the application.

Alright, we discussed what type predicates are, how we can use them, and what they can do. Now, let's look at the other side: the drawbacks of type predicates.

Drawbacks of Type Predicates

While type predicates are very useful, they have some drawbacks:

1. Runtime Overhead: Type predicates add runtime checks to your code. For complex types or frequent checks, this can slow down performance.

2. Limited by JavaScript Capabilities: Type predicates can only check what JavaScript can do at runtime. They can't enforce more complex TypeScript-only types, like interfaces with methods or generic types.

3. Code Duplication: The logic in type predicates often repeats the type definitions. This can cause problems if the type definitions are updated but the type predicates are not.

4. False Security: If not written correctly, type predicates can give a false sense of security, leading to potential bugs if the type checks are not thorough.

Conclusion

Type predicates improve type safety by checking variable types, preventing errors, and making code clearer.

Despite some drawbacks like runtime overhead and potential code duplication, their benefits make them a valuable tool in TypeScript development.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resource

• Official TypeScript Doc

Connect with me

• LinkedIn

• Twitter

• GitHub

Informational Responses (1XX)

Informational status codes show that the server got the request and is still working on it.

• 100 (Continue): The server has received the request headers, and the client should continue to send the request body.

• 102 (Processing): The server has received the request and is working on it, but there is no response yet.

Successful Responses (2XX)

Successful status codes mean that the server got the request, understood it, and processed it successfully.

• 200 (OK): The request was successful. This is the most common response for successful HTTP requests.

• 201 (Created): The request was successful, and a new resource has been created.

Redirection Messages (3XX)

Redirection codes mean that the user needs to do something else to complete the request.

• 300 (Multiple Choices): The request has more than one possible response. The user or user agent can choose one of them.

• 301 (Moved Permanently): The requested resource has been permanently moved to a new URL provided by the Location header.

Client Error Responses (4XX)

Client error status codes mean the server couldn't process the request because of something wrong on the client's side.

• 400 (Bad Request): The server cannot process the request because of a client error (e.g., bad request syntax).

• 401 (Unauthorized): The request needs user authentication.

• 404 (Not Found): The server cannot find the requested resource.

Server Error Responses (5XX)

Server error status codes mean that the server couldn't complete a valid request.

• 500 (Internal Server Error): The server ran into an unexpected problem and couldn't complete the request.

• 502 (Bad Gateway): The server received an invalid response from the upstream server while trying to fulfill the request.

Practical Application of HTTP Status Codes

Understanding these status codes is important for fixing and improving web applications. Here are some practical uses

• API Integration: When integrating with APIs, handling HTTP status codes correctly ensures strong communication between services. For example, if you get a 401 Unauthorized status, prompt the user to log in again.

• SEO: Using the right status codes like 301 (Moved Permanently) helps keep search engine rankings by properly indicating URL changes.

• User Experience: Informing users with clear messages based on status codes (e.g., showing Page Not Found for a 404 status) improves user satisfaction and reduces frustration.

Resource

• MDN HTTP Status Codes

Conclusion

HTTP status codes are essential for web communication. By knowing and using these codes correctly, developers can build more efficient, user-friendly, and error-resistant applications. Keep this guide nearby as you work on your web projects.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Connect with me

• LinkedIn

• Twitter

• GitHub

In this article, we'll learn how to use the Intersection Observer API with React, a popular JavaScript library for building user interfaces. We'll start by briefly covering the basics of the Intersection Observer API and its benefits. Then, we'll look at a practical example of using it with React to animate a component.

What is the Intersection Observer API?

The Intersection Observer API is a web tool that lets developers track when an element in the DOM enters or leaves the viewport or a specified parent element. Simply put, it helps us know when an element appears or disappears on the user's screen.

One of the main benefits of using the Intersection Observer API is that it offers a more efficient way to track the visibility of elements in the DOM compared to methods like using scroll or resize event listeners. The Intersection Observer API uses a callback-based approach, which means we can set a function to run when an element's visibility changes, instead of constantly checking visibility on each scroll or resize event.

Using the Intersection Observer API with React

To use the Intersection Observer API with React, we can make a custom hook that simplifies using the Intersection Observer API. This hook can be used in any React component to check if an element is visible and take action when it appears.

Here is an example of a custom useElementInView hook that uses the Intersection Observer API to check if an element is visible

const useElementInView = (options) => {
  const [isInView, setIsInView] = useState(false);
  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const [entry] = entries;
      setIsInView(entry.isIntersecting);
    }, options);

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  }, [options]);

  return [targetRef, isInView];
};

This hook creates an IntersectionObserver instance and watches the target element. When the target element becomes visible within the root element, it updates the state with the visibility info.

To use this hook in a React component, you can pass the options to the hook and get the returned ref and visibility info

const MyComponent = () => {
  const [targetRef, isInView] = useElementInView({ threshold: 0.5 });

  return (
    <div ref={targetRef}>
      {isInView ? 'Element is in view!' : 'Element is not in view.'}
    </div>
  );
};

Alright, we have discussed what the Intersection Observer is and how it works. We created a hook called useElementInView, and in the next section, we will use this hook to animate a component.

Scroll to reveal using the useElementInView hook

We will create a component that will animate an element when it comes into view, essentially a scroll-to-reveal animation.

import React from 'react';
import useElementInView from './useElementInView';

const AnimatedComponent = () => {
  const [targetRef, isInView] = useElementInView({ threshold: 0.1 });

  return (
    <div
      ref={targetRef}
      style={{
        opacity: isInView ? 1 : 0,
        transition: 'opacity 0.5s ease-out',
      }}
    >
      I fade in when scrolled into view!
    </div>
  );
};

export default AnimatedComponent;

In this example, the AnimatedComponent starts with an opacity of 0, making it invisible. When at least 10% of the component scrolls into view (as set by the threshold option), the isInView state changes to true, and the component fades in with an opacity of 1.

Conclusion

In this article, we explore the Intersection Observer API and how to use it with React to track when elements are visible in the viewport. We cover the basics of the API, its advantages over older methods, and show a practical example by creating a custom React hook, useElementInView, to animate components when they come into view.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Connect with me

• LinkedIn

• Twitter

• GitHub

What is an error boundary?

Think of error boundaries in React as safety nets. They're like guardians watching over a group of performers (the components) on a stage (the app). If any performer falls down (a JavaScript error occurs), the safety net (the error boundary) catches them. It then logs what happened and puts up a poster (the fallback UI) until the performer is ready to get back on stage.

Implementing Error Boundaries in React

React supports two types of components: class-based and functional components. However, if we want to implement an error boundary, we can't do it with a functional component; we need to create a class-based component for the error boundary. But don't worry, the React community is extensive, and many third-party packages are available to help you use a React error boundary component directly instead of creating it yourself.

We will use the react-error-boundary package, which provides an ErrorBoundary component that catches errors and displays the fallback UI. It offers various methods to show the fallback UI.

Let's begin by installing the react-error-boundary as a dependency in our React project.

yarn add react-error-boundary

OR

npm install react-error-boundary

OR

pnpm add react-error-boundary

After installing the dependency, create the fallback component that you want to display when an error occurs.

import React from "react";
import { FallbackProps } from "react-error-boundary";
import ErrorFallbackIcon from "./error-fallback.svg";

const ErrorFallback: React.FC<FallbackProps> = ({
  error,
  resetErrorBoundary,
}) => {
  return (
    <div className="error-boundary-fallback-wrapper">
      <ErrorFallbackIcon />
      <h1>Something went wrong</h1>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Home</button>
    </div>
  );
};

export default ErrorFallback;

The fallback component accepts two props.

• error : error object that contains the error message.

• resetErrorBoundary : a callback function to reset the error boundary and retry rendering.

Alright, we have the fallback component ready. Now, let's wrap our application with the ErrorBoundary component provided by react-error-boundary.

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useHistory } from 'react-router-dom';
import ErrorFallback from './ErrorFallback';

interface Props {
  children: React.ReactNode;
}

const App: React.FC<Props> = ({ children }) => {
  const history = useHistory();

  const handleErrorReset = () => {
    history.push("/");
  };

  return (
    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={handleErrorReset}>
      {children}
    </ErrorBoundary>
  );
};

export default App;

The ErrorBoundary component accepts several props, but the important ones are:

• FallbackComponent : Fallback component to render when an error occurs.

• onReset : callback function to reset the state of the application so that the error doesn't happen again.

Okay, our application is now wrapped with an error boundary. As a regular user, if you interact with the application and encounter an error on a specific page causing a crash, instead of seeing a blank page, you will be directed to a fallback page. This page will display the exact error message and provide you with the option to navigate back.

Conclusion

Implementing error boundaries in React using the react-error-boundary package can help in gracefully handling errors and providing a fallback UI for users when errors occur. By incorporating error boundaries, developers can ensure a better user experience by preventing blank pages and offering options to navigate back or retry.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

• Official doc

• React Error Boundary npm

Connect with me

• LinkedIn

• Twitter

• GitHub

Crafting and sending emails isn't straightforward. You have to design templates for various emails using an old-fashioned table structure, which can make emails less intuitive. Additionally, you need to set up a server to send emails, and there are other issues like emails ending up in spam folders or being blocked by the recipient's service.

But don't worry, in this article, we'll explore how to create and send emails using React and TypeScript. Exciting, isn't it? Let's dive in!

React can't send emails on its own. So, we'll use Resend, a great tool for sending emails. We'll also use React Email to make our email designs look really good.

We'll make a simple Contact Us form. Then, we'll design an email layout just for that form. Lastly, we'll set it up so that when someone fills out the contact form, an email gets sent.

Setup Project

We will use Next.js for scaffolding our project, so please run the following command in your terminal.

Make sure you have Node installed, version 18.18.2 or higher.

# yarn
npx create-next-app@latest build-send-emails-react-typescript

# navigate to project folder
cd build-send-emails-react-typescript

Resend and React Email

Sign up for a free account on Resend and get your API keys.

After you sign up, go to the API keys on the left side of the screen. Then, create a new API key and copy it.

I named it build-send-emails-react-typescript , but you can choose any name you like. It's totally up to you!

Create .env file in the project root folder and add your API key.

RESEND_API_KEY=XXX-XXX-XXX

Install the Resend Node.js SDK.

yarn add resend

Then, install React Email and React Email Components.

yarn add react-email @react-email/components -E

Great, we've set up our project! Next, we'll create a template for an email that we will send to users when they fill out the Contact Us form.

Email Template

Create a file emails/contact-us.tsx in the src folder. Then, copy and paste the code provided below into that file.

import {
  Body,
  Container,
  Head,
  Html,
  Markdown,
  Preview,
  Text,
} from '@react-email/components';
import { CSSProperties } from 'react';

interface ContactUsEmailProps {
  name: string;
  email: string;
  message: string;
}

export const ContactUsEmail = ({
  name,
  email,
  message,
}: ContactUsEmailProps) => (
  <Html>
    <Head />
    <Preview>Thanks for contacting us {name}!</Preview>
    <Body style={main}>
      <Container style={container}>
        <Text style={paragraph}>Hi {name},</Text>
        <Text style={paragraph}>We have received your message</Text>
        <Markdown
          markdownContainerStyles={{
            boxShadow: '0 0 10px rgba(0, 0, 0, 0.05)',
            borderRadius: '8px',
            padding: '20px',
            backgroundColor: '#f3f4f6',
            border: '1px solid #e5e7eb',
          }}
        >
          {message}
        </Markdown>
        <Text style={paragraph}>
          We will get back to you as soon as possible at {email}.
        </Text>
      </Container>
    </Body>
  </Html>
);

const main: CSSProperties = {
  backgroundColor: '#ffffff',
  borderRadius: '8px',
  border: '1px solid #e5e7eb',
  boxShadow: '0 0 10px rgba(0, 0, 0, 0.05)',
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container: CSSProperties = {
  margin: '0 auto',
  padding: '20px 0 48px',
};

const paragraph: CSSProperties = {
  fontSize: '16px',
  lineHeight: '26px',
};

In this code, we're using components from a react-email to design our email template.

This text will show up in the recipient's inbox.

<Preview>Thanks for contacting us {name}!</Preview>

We're allowing markdown for the message, so we're using a component called Markdown from react-email.

<Markdown
          markdownContainerStyles={{
            boxShadow: '0 0 10px rgba(0, 0, 0, 0.05)',
            borderRadius: '8px',
            padding: '20px',
            backgroundColor: '#f3f4f6',
            border: '1px solid #e5e7eb',
          }}
        >
          {message}
        </Markdown>

Alright, we have created the email template for our form. In the next section, we will create an API route for sending emails.

API Route For Sending Email

Create a file api/email/route.ts in the src/app folder. Then, copy and paste the code provided below into that file.

import { Resend } from 'resend';
import * as React from 'react';
import { ContactUsEmail } from '../../../emails/contact-us';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const payload = await req.json();

  try {
    const { data, error } = await resend.emails.send({
      from: 'your-email@domain.com',
      to: payload.email,
      subject: `Thank you for contacting us, ${payload.name}`,
      react: ContactUsEmail(payload),
    });

    if (error) {
      return Response.json({ error });
    }

    return Response.json({ data });
  } catch (error) {
    return Response.json({ error });
  }
}

This will create the resend instance which will have all the helper methods to send email.

const resend = new Resend(process.env.RESEND_API_KEY);

Next, we have a POST function to handle the POST request on the api/email route.

export async function POST(req: Request) {
  const payload = await req.json();
  ...
}

This code manages everything needed to send an email. It specifies:

• from: Your email address, from which the email will be sent.

• to: The recipient's email address.

• subject: The subject of the email.

• react: The React component we previously created.

const { data, error } = await resend.emails.send({
      from: 'your-email@domain.com',
      to: payload.email,
      subject: `Thank you for contacting us, ${payload.name}`,
      react: ContactUsEmail(payload),
    });

To test the form, you can use the testing domain provided by Resend in the "from" field, which is onboarding@resend.dev. However, it will only allow sending emails to the email address linked with your Resend account.

Resend offers the option to set up your domain for sending emails to any email address. You can do this by going to the Domains section in the left-side menu.

Awesome, we've set up the API route for sending emails! Next, we'll create a Contact Us form and style it using Tailwind CSS to make it look nice.

Contact Us Form

We'll make a super simple form with just three fields:

• name

• email

• message.

Create a components/contact-us.tsx file inside the src directory and add the following code.

'use client';

import React, { useState } from 'react';

interface FormState {
  name: string;
  email: string;
  message: string;
}

const ContactUs: React.FC = () => {
  const [formState, setFormState] = useState<FormState>({
    name: '',
    email: '',
    message: '',
  });
  const [errors, setErrors] = useState<FormState>({
    name: '',
    email: '',
    message: '',
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

  const validateEmail = (email: string) => {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setFormState({ ...formState, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      setIsSubmitting(true);
      const errors = { name: '', email: '', message: '' };

      if (formState.name === '') {
        errors.name = 'Name is required';
      }

      if (formState.email === '' || !validateEmail(formState.email)) {
        errors.email = 'Valid email is required';
      }

      if (formState.message === '') {
        errors.message = 'Message is required';
      }

      setErrors(errors);

      if (!errors.name && !errors.email && !errors.message) {
         await fetch('/api/email', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formState),
        });
        setFormState({ name: '', email: '', message: '' });
      }
    } catch (error) {
      // handle error here
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form
      className="flex flex-col gap-4 justify-center"
      onSubmit={handleSubmit}
    >
      <div className="flex flex-col gap-1">
        <input
          className="w-full rounded-md border-2 border-slate-300 px-2 py-1 outline-purple-500"
          type="text"
          name="name"
          value={formState.name}
          onChange={handleChange}
          placeholder="Name"
        />
        {errors.name && <p className="text-sm text-red-400">{errors.name}</p>}
      </div>

      <div className="flex flex-col gap-1">
        <input
          className="w-full rounded-md border-2 border-slate-300 px-2 py-1 outline-purple-500"
          type="email"
          name="email"
          value={formState.email}
          onChange={handleChange}
          placeholder="Email"
        />
        {errors.email && <p className="text-sm text-red-400">{errors.email}</p>}
      </div>

      <div className="flex flex-col gap-1">
        <textarea
          className="w-full rounded-md border-2 border-slate-300 px-2 py-1 outline-purple-500"
          name="message"
          value={formState.message}
          onChange={handleChange}
          placeholder="Message"
          rows={6}
        />
        {errors.message && (
          <p className="text-sm text-red-400">{errors.message}</p>
        )}
      </div>

      <button
        disabled={isSubmitting}
        className="rounded-md bg-purple-500 text-white px-2 py-1 block"
        type="submit"
      >
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
};

export default ContactUs;

This code sets up a basic Contact Us form with validation. When the user submits the form, it first checks if the data entered is valid. If everything looks good, it then sends an email to the user by making an API call.

await fetch('/api/email', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formState),
 });

To see the demo, let's submit the form. Start the server and go to http://localhost:3000/ in your web browser.

yarn run dev

Here's an example of an email that has been sent.

Conclusion

We created a basic Contact Us form and incorporated Resend and React Email to send emails using only React and TypeScript.

You can experiment with creating more user-friendly templates using other components provided by react-email, such as images, headings, buttons, code blocks, and more.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

• React Email

• Resend

• Source Code

Connect with me

• LinkedIn

• Twitter

• GitHub

Exploring unknown

The unknown type is a safer choice than any. When a variable is of type unknown, TypeScript makes you check the type before you can use that variable. This makes developers clearly state their assumptions, which helps to avoid errors when the code is running.

Think about a situation where you're using data from an API, and you are not sure what the data looks like. Using the unknown helps you deal with this uncertainty in a safe way.

function processData(data: unknown): string {
  if (typeof data === 'string') {
    return data.toUpperCase();
  } else {
    // Handle other cases appropriately
    return "Invalid data";
  }
}

// No compilation error
const result = processData("Hello, TypeScript!");

In simpler terms, using unknown makes sure you double-check what kind of data you have before you do anything with it. This helps prevent mistakes that could happen while the program is running.

Exploring any

On the other hand, any is the most easy-going type in TypeScript. It skips type checking, letting variables of this type to be set to anything without making the code fail to compile. While this freedom can be handy, it means you lose the advantages of static typing.

Think about a situation where you want as much flexibility as possible, and you're sure that your code is type-safe

function processDynamicData(data: any): string {
  // No compilation error
  return data.toUpperCase(); 
}

// No compilation error, works as expected
const result1 = processDynamicData("Hello, TypeScript!"); 
console.log(result1); // Outputs: "HELLO, TYPESCRIPT!"

// No compilation error, but will cause a runtime error
const result2 = processDynamicData(12345); 
console.log(result2); // Error: data.toUpperCase is not a function

In simpler terms, using any means you don't have to check the type of data, but it can cause problems if the data type is not what you expected.

When to use unknown

Use unknown when you're not sure what kinda variable is, and you want to make sure it's the right kind before you do something with it. This makes your code safer and easier to understand, especially when you're working with data from outside or inputs that can change.

When to use any

Consider using any when you need maximum flexibility and are confident that type of safety won't be compromised. However, use any sparingly, as its overuse can lead to a loss of the benefits provided by TypeScript's static typing.

Conclusion

When using TypeScript, you can use unknown when you want to be very careful with your code and make sure everything is the right type. any is used when you want to be more flexible, but this can make your code less safe. You should think carefully about which one to use, depending on what your code needs and how confident you are about the types and safety of your code.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Connect with me

• LinkedIn

• Twitter

• GitHub

OpenAI has even created an API to build custom AI solutions like chatbots, assistants, and more. We can access the APIs using SDKs provided by OpenAI for different programming languages. There are also wrappers built on top of the API to help you build the interface easily.

Vercel has built an AI SDK for constructing the streaming user interface with TypeScript and JavaScript. The best part is that it is open-source and has support for Vercel Edge runtime.

In this article, we will build a SQL Expert ChatBot using the OpenAI API and Vercel AI SDK. We will discuss streaming responses, custom prompts, and much more.

Setup OpenAI Account

First, we will need to create an account on OpenAI and get an API key. You can sign up for a free account on OpenAI's website. Once you're logged in, go to the API keys section in the menu on the left side of the screen. From there, you can create a new API key. I have created one and named it vercel-ai-sdk, but you can choose any name you like.

Okay, now that we have the OpenAI API key, let's move on to the next section where we will talk about the Vercel AI SDK and how to set it up on your computer.

Setup Vercel AI SDK

The Vercel AI SDK is built for OpenAI APIs and includes a range of tools for utilizing OpenAI APIs.

To begin, let's create a Next.js application and install the dependencies ai for the Vercel AI SDK and openai for the OpenAI API client.

pnpm dlx create-next-app ai-sql-expert
cd ai-sql-expert
pnpm install ai openai

Make sure to have the same configuration as shown in the image below

Create a .env file in your project root and add your OpenAI API Key

OPENAI_API_KEY=xxxxxxxxx

Great, now that we have set up the OpenAI and Vercel AI SDKs, let's proceed to create API routes and a user interface for our SQL Expert Bot.

Create API Routes

We will set up an API route to manage user message requests. When a user sends a message, the OpenAI API will process it and send a response back to Next.js.

Create a file named route.ts inside the api/chat folder in your project's src/app directory. Then, add the following code snippet

# app/api/chat/route.ts

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

This section is for setting up the OpenAI instance by providing the API key.

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

By adding this line, we are instructing Next.js to utilize edge runtime for processing the API requests.

export const runtime = 'edge';

The POST function extracts the messages field from the JSON payload sent in the request.

It then uses the openai.chat.completions.create method to send these messages to OpenAI's GPT-3.5-turbo model for processing. This method creates completions (responses) based on the provided messages.

The stream parameter is set to true, indicating that the responses should be streamed back to the client in real time.

After receiving the response from OpenAI, the code converts it into a friendly text stream using a function called OpenAIStream.

Finally, the function constructs a response using the StreamingTextResponse class and returns it. This response contains the streamed text generated by OpenAI in response to the user's messages.

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

Okay, we have created the API route to handle user requests and process messages with the OpenAI API. Next, we will move on to creating the user interface for our SQL Expert Bot.

Create The User Interface

Before adding code for the user interface we will add the contants for initial chat messages which we will be using as custom prompt for our bot to set it's behaviour.

Create constant/chat.constants.ts in the project's src/app directory. Then, add the following code snippet

import { Message } from 'ai/react';

export const INITIAL_MESSAGES: Message[] = [
  {
    id: '',
    role: 'system',
    content: `You are an SQL expert. you can write generate SQL queries for any given problem statement.
        Make sure to return the query with proper formatting and indentation.
        Make sure to return the query with proper explanation and comments.
        If you are not able to solve the problem, you can ask for more details.
        If user is not able to understand the query, you can explain the query in simple words.
        If user is providing wrong prompt, you can ask for correct prompt.
        `,
  },
];

We are providing instructions to the system on how to behave in various scenarios, determining the appropriate responses, and specifying how these responses should be delivered.

Next, add the following code snippet in src/app/pages.tsx.

'use client';

import { useChat } from 'ai/react';
import Markdown from 'react-markdown';
import { INITIAL_MESSAGES } from './constant/chat.constants';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    initialMessages: INITIAL_MESSAGES,
  });
  return (
    <div>
      <div className="text-center py-8">
        <h2 className="text-center text-2xl font-bold mb-2">SQL Expert</h2>
        <p>
          Welcome to the SQL Expert. You can ask any SQL related questions and
          expert will help you out.
        </p>
      </div>

      <div className="flex flex-col w-full max-w-2xl pb-24 mx-auto stretch gap-4">
        {messages
          .filter((m) => m.role !== 'system')
          .map((m) => (
            <div
              key={m.id}
              className="bg-gray-100 p-4 rounded flex gap-2 flex-col"
            >
              <span className="font-medium">
                {m.role === 'user' ? 'You' : 'Expert'}
              </span>
              <Markdown>{m.content}</Markdown>
            </div>
          ))}

        <form
          className="flex gap-4 fixed bottom-0 w-full mb-8"
          onSubmit={handleSubmit}
        >
          <input
            autoFocus
            className="p-2 border border-gray-300 rounded shadow-xl outline-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 flex-grow max-w-xl"
            value={input}
            placeholder="Ask your SQL related question.."
            onChange={handleInputChange}
          />

          <button
            className="border p-2 px-4 rounded shadow-xl border-gray-300 bg-purple-500 text-white"
            type="submit"
          >
            Send
          </button>
        </form>
      </div>
    </div>
  );
}

We will use a client component to display messages and a form for users to send their messages.

'use client';

Since the API will return the response with markdown content, we will utilize react-markdown to parse the markdown content.

import Markdown from 'react-markdown';

The useChat hook helps you create a chat interface for your chatbot app. It makes it simple to show messages from your AI provider, handle chat input, and update the UI when new messages come in. It accepts a bunch of options, and for our case, we are using the initialMessages option to set the system's behavior.

import { useChat } from 'ai/react';

const { messages, input, handleInputChange, handleSubmit } = useChat({
    initialMessages: INITIAL_MESSAGES,
  });

This part is for displaying the messages we receive from the API. We have set a custom prompt for the system, so we will filter it out and only show the user and expert messages.

<div className="flex flex-col w-full max-w-2xl pb-24 mx-auto stretch gap-4">
        {messages
          .filter((m) => m.role !== 'system')
          .map((m) => (
            <div
              key={m.id}
              className="bg-gray-100 p-4 rounded flex gap-2 flex-col"
            >
              <span className="font-medium">
                {m.role === 'user' ? 'You' : 'Expert'}
              </span>
              <Markdown>{m.content}</Markdown>
            </div>
          ))}
...
</div>

Finally, we have the form for users to send their messages. We are using the handleSubmit function provided by the useChat hook to listen for the form submit event.

For the input field, we are using handleInputChange and input to control the input value.

Then, we have a button for submitting the form.

<div className="flex flex-col w-full max-w-2xl pb-24 mx-auto stretch gap-4">
        ...
        <form
          className="flex gap-4 fixed bottom-0 w-full mb-8"
          onSubmit={handleSubmit}
        >
          <input
            autoFocus
            className="p-2 border border-gray-300 rounded shadow-xl outline-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 flex-grow max-w-xl"
            value={input}
            placeholder="Ask your SQL related question.."
            onChange={handleInputChange}
          />

          <button
            className="border p-2 px-4 rounded shadow-xl border-gray-300 bg-purple-500 text-white"
            type="submit"
          >
            Send
          </button>
        </form>
</div>

Thanks to Vercel AI SDK for providing a hook like useChat that takes care of everything from displaying messages to managing user input.

Great! We have built the user interface for our SQL Expert bot. Now, in the next section, we will start the development server and test it out.

Test The Bot

To start the development server, run the following command in your terminal

pnpm run dev

OR

yarn run dev

OR

npm run dev

Visit http://localhost:3000 in your browser to view the application.

You can try out the bot with the provided sample prompts below

1. "Create a SQL query to find the total number of orders placed by each customer in the past year, ordered by the highest number of orders."

2. "Write a SQL query to identify customers who have spent more than $1000 in total on purchases within the last 3 months."

3. "Design a SQL query to calculate the average time it takes for an order to be fulfilled from the moment it's placed, considering the timestamps of order placement and fulfillment."

4. "Develop a SQL query to list the products with the highest profit margin, considering both the cost price and the selling price."

5. "Construct a SQL query to find the monthly revenue trend for the past year, broken down by month."

6. "Create a SQL query to identify customers who have not made a purchase in the last 6 months."

7. "Write a SQL query to find the top 5 categories with the highest number of products sold in the last quarter."

8. "Design a SQL query to identify orders with items that are out of stock at the time of purchase."

9. "Develop a SQL query to calculate the total revenue generated from repeat customers versus new customers in the last month."

10. "Construct a SQL query to identify any anomalies or irregularities in order quantities compared to historical averages for each product."

Let's see the demo with the prompt provided below

Imagine you're tasked with optimizing the database performance of a large e-commerce platform. Write a SQL query to identify the top 10 selling products by revenue over the past month, considering both quantity sold and unit price.

Conclusion

Awesome! Now that we have a functioning SQL Expert Bot, feel free to experiment with it and customize it to suit your requirements. That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

• SQL Expert GitHub Repository

• Vercel AI SDK Docs

• useChat Hook Docs

Connect with me 👋

• LinkedIn

• Twitter

I felt the same and added my latest blogs to my GitHub profile. As we know, GitHub supports markdown for profile README, so I have manually added my latest five blogs to my profile. However, this process became tedious and repetitive because I had to manually update my profile README whenever I published a new blog.

I started looking into how I can automate this process and have the latest updated blogs on my profile. At the same time, Hashnode announced that they have a huge update in their APIs, and new APIs are publicly available. I knew that if I wanted to automate something on GitHub, GitHub Actions was the best solution.

I already knew what GitHub Actions are and how they work; however, I did not know how to build one. I was very curious to create my own GitHub Action and make it available to the community so that others could also use it. Therefore, I decided to invest my time in learning how to build my own GitHub Actions that would help me fetch the latest post from my Hashnode publication and then display it on my Profile README.

For those of you who don't know what GitHub Actions are, you can read my blog here.

One more reason to build something with Hashnode APIs is the Hashnode APIs Hackathon. In this article, I will discuss what Hashnode Blog GitHub action is, the problem it solves, its functionality, how I built it, the challenges I faced, how I solved them, and more.

What is Hashnode blog GitHub Action?

It's a GitHub action to fetch and display your latest blog from Hashnode in a visually pleasing manner. If you are writing on Hashnode (if you don't have a blog yet, set it up here) and want to showcase your latest blogs on your profile README, you can use the Hashnode Blog Action to achieve the same.

Configuring the Hashnode Blog GitHub Action is straightforward, and it supports the following configuration options.

You can create a GitHub workflow as shown below to execute the Hashnode Blog Action.

You can replace blog.sachinchaurasiya.dev with your publication name, and you can also add the FORMAT, FILE, and POST_COUNT options. If you do not provide values for these options, the default values will take effect.

Examples of different available FORMAT options.

List

Stacked

Table

Card

Now that you understand the Hashnode Blog GitHub action, its functionality, and how it works, the upcoming section will delve into how I built it, the challenges I encountered, and how I resolved them.

How I Built the Hashnode Blog GitHub Action?

While learning about GitHub Actions, I came across the GitHub Actions Org, and they have a bunch of templates for building custom GitHub actions. So, I started searching for a template that has TypeScript support, ensuring type safety to write bug-free code. I found the typescript-action template that includes support for tests, linter, versioning, and more.

I clicked on the Use this template button, and within minutes, I had a basic GitHub action with TypeScript support. I then started adding code for my action logic.

First, I defined all the configuration and meta-information for my action in, including the name, description, author information, branding information, inputs, Node.js version, and entry point.

name: 'Hashnode Blog Action'
description: 'Action to pull your latest blog and show it in a nice format.'
author: 'Sachin-chaurasiya'

branding:
  icon: 'hash'
  color: 'blue'

inputs:
  HASHNODE_PUBLICATION_NAME:
    description: 'Your hashnode publication name, Example: blog.hashnode.dev'
    required: true
  POST_COUNT:
    description: 'Number of posts count'
    required: false
    default: 6
  FORMAT:
    description: 'Output format (table, list, card)'
    required: false
    default: 'table'
  FILE:
    description: 'File name to save the output'
    required: false
    default: 'README.md'
  DEBUG:
    description: 'Debug mode'
    required: false
    default: false

runs:
  using: node20
  main: dist/index.js

Then, I started working on logic to fetch the posts from Hashnode using a GraphQL query. I have not used any third-party library for querying Hashnode APIs, I just utilized the JavaScript Fetch API.

import { HashNodeArticleResponse } from 'HashNodeTypes'

export const BASE_URL = 'https://gql.hashnode.com/'

const getQuery = (publicationName: string, limit: number): string => {
  return `{
  publication(host: "${publicationName}") {
    posts(first: ${limit}) {
      totalDocuments
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          url
          title
          brief
          slug
          publishedAt
          coverImage {
            url
          }
          reactionCount
          replyCount
        }
      }
    }
  }
}`
}

export const fetchPosts = async (
  publicationName: string,
  limit: number
): Promise<HashNodeArticleResponse> => {
  const query = getQuery(publicationName, limit)
  const response = await fetch(BASE_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  })
  const data = await response.json()

  return data
}

Then, I worked on utilities such as date and formats. Format utilities are designed to process the response from the Hashnode API posts and return the Markdown string for the requested output format.

For example, the piece of code below will process the list of posts and return the table Markdown format.

const createMarkdownTable = (postList: PostNode[]): string => {
  let tableContent = '<table>'

  postList.forEach(post => {
    const { title, brief, coverImage, url } = post

    tableContent += '<tr>'
    tableContent += `<td><img src="${coverImage.url}" alt="${title}"></td>`
    tableContent += `<td><a href="${url}"><strong>${title}</strong></a><br>${brief}</td>`
    tableContent += '</tr>'
  })

  tableContent += '</table>'

  return tableContent
}

Last but not least, I worked on the entry point of the action, which is the main.ts file. This file includes logic for obtaining inputs, fetching posts, processing the posts, obtaining the output in markdown format, and then finding and replacing that content within a specified regex pattern. Finally, it commits and pushes the changes to the user file repository.

import * as core from '@actions/core'
import { fetchPosts } from './hashnodeQuery'
import fs from 'fs'
import commitFile from './commitFiles'
import { getFormattedContent } from './utils/formatUtils'
import { ContentFormat } from 'HashNodeTypes'

const SECTION_REGEX =
  /^(<!--(?:\s|)HASHNODE_BLOG:(?:START|start)(?:\s|)-->)(?:\n|)([\s\S]*?)(?:\n|)(<!--(?:\s|)HASHNODE_BLOG:(?:END|end)(?:\s|)-->)$/gm

/**
 * The main function for the action.
 * @returns {Promise<void>} Resolves when the action is complete.
 */
export async function run(): Promise<void> {
  try {
    const publicationName: string = core.getInput('HASHNODE_PUBLICATION_NAME')
    const postCount: number = parseInt(core.getInput('POST_COUNT'))
    const outputFileName: string = core.getInput('FILE')
    const format: ContentFormat = (core.getInput('FORMAT') ??
      'table') as ContentFormat
    const isDebug: boolean = core.getInput('DEBUG') === 'true'

    // fetch posts from hashnode
    const response = await fetchPosts(publicationName, postCount)
    const posts = response.data.publication.posts.edges.map(edge => edge.node)

    const filePath = `${process.env.GITHUB_WORKSPACE}/${outputFileName}`
    const fileContent = fs.readFileSync(filePath, 'utf8')

    const output = getFormattedContent(posts, format)

    const result = fileContent
      .toString()
      .replace(SECTION_REGEX, `$1\n${output}\n$3`)

    fs.writeFileSync(filePath, result, 'utf8')

    // commit changes to the file when not in debug mode
    if (!isDebug) {
      // eslint-disable-next-line github/no-then
      await commitFile().catch(err => {
        core.error(err)
        core.info(err.stack)
        process.exit(err.code || -1)
      })
    }
  } catch (error) {
    // Fail the workflow run if an error occurs
    if (error instanceof Error) core.setFailed(error.message)
  }
}

Now that you have an understanding of how I built the action, let's delve into the challenges I faced in the next section.

Challenges Faced

The typescript-action template had a lot of pre-configured workflows. So, when I tried to build the action for the first time, it gave me a bunch of errors.

The second challenge was committing and pushing the changes to the user's file repository. This was, I would say, an exciting challenge, as it was my first time committing and pushing changes programmatically in GitHub.

I thought, No problem! I'm an engineer, and it's my job to face challenges and find solutions. Now, let me explain how I tackled these challenges.

How I Solved the Challenges

To overcome the initial challenge, I carefully read the guide in the template's README and adjusted or changed the workflows to fit my requirements. The key takeaway here is that reading the available documentation can be helpful.

The second challenge was a bit tricky, but I believed that every problem has a solution. I began by searching on Google to find out how to automatically commit and push changes to a GitHub repository. Unfortunately, I couldn't find helpful resources. So, I turned to ChatGPT and GitHub Copilot for assistance. They guided me towards using the GitHub Action bot config to commit and push changes. Check out the bash file for the details on how to do this for the user's file repository.

#!/bin/sh

set -e

if [ -z "$GITHUB_TOKEN" ]; then
    echo "🚩  GITHUB_TOKEN Not Found. Please Set It As ENV Variable"
    exit 1
fi

git config --global user.email "githubactionbot+hashnode@gmail.com"
git config --global user.name "Hashnode Bot"

DEST_FILE="${INPUT_FILE}"

GIT_URL="https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"

git add "${GITHUB_WORKSPACE}/${DEST_FILE}" -f

if [ "$(git status --porcelain)" != "" ]; then
    git commit -m "📚 Latest Blog Updated"
else
    echo "  ✅ Blog List Upto Date"
fi

git push "$GIT_URL"

As this is not something that will be generated on every new build, I directly placed it in the dist directory.

Then, wrote a simple utility function to execute this Bash file and commit and push the changes.

import { spawn } from 'child_process'
import path from 'path'

const exec = async (cmd: string, args: string[] = []): Promise<number> =>
  new Promise((resolve, reject) => {
    const app = spawn(cmd, args, { stdio: 'inherit' })
    app.on('close', (code: number) => {
      if (code !== 0) {
        const err = new Error(`Invalid status code: ${code}`)
        Object.defineProperty(err, 'code', { value: code })
        return reject(err)
      }
      return resolve(code)
    })
    app.on('error', reject)
  })

const main = async (): Promise<number> => {
  return await exec('bash', [path.join(__dirname, './commit.sh')])
}

export default main

This utility function uses the spawn function to execute bash commands.

Conclusion

I hope you find this article genuinely helpful, and that you've learned something from it. I've released the Hashnode blog GitHub action on the GitHub marketplace, so feel free to try it out and share your feedback. It's open source, so pull requests are welcome. You can report bugs, request features, and more.

Show your support for the project by giving it a star ⭐️.

Lastly, I want to express my gratitude to Hashnode for providing this fantastic opportunity to create something using Hashnode's brand-new set of APIs.

And that’s it for this topic. Thank you for reading.

Connect with me 👋

• LinkedIn

• Twitter