Forem: Manjush

From Spec to Deploy: Building an Expense Tracker with SpecKit

Manjush — Sat, 27 Sep 2025 18:30:00 +0000

I’m still exploring and learning SpecKit. If you spot anything incorrect, have suggestions, or know a better way of doing things, please feel free to share your thoughts in the comments.

The "why"

I was exploring some simple projects to build with copilot. An expense tracker seemed straightforward, but I wanted to avoid the usual pitfalls of unclear requirements, scope creep, and endless refactoring by just starting with a large prompt. Instead of jumping straight into code, I tried Spec-Driven Development with GitHub's SpecKit.

Why SpecKit Works

Previous development with AI: "I need an expense tracker" (with some details) → starts coding → unclear requirements → endless refactoring → ships something that kinda works.

SpecKit flips this: specifications become executable blueprints. You have a conversation with your future code before writing a single line.

The 5-Step Workflow

/constitution - Set project principles (quality, testing, UX)
/specify - Define what you're building (what/why, not how)
/plan - Choose tech stack and architecture
/tasks - Generate actionable task lists
/implement - Execute tasks according to spec

Each step validates the previous one, catching issues before they become expensive code problems.

My Development Journey

Step 1: Constitution

I established non-negotiable principles:

TypeScript strict mode + 80% test coverage
Consistent UX with clear error messages
Minimal dependencies + comprehensive docs
Test-first development (TDD)

These became automated quality gates for every piece of code.

Step 2: Specification

I focused on user value, not tech choices:

"Users record income/expenses, categorize spending, view monthly summaries, get spending limit alerts, recurring bill reminders, and anomaly detection for unusual transactions."

Result: 16 specific, testable requirements in business-friendly language.

Step 3: Tech Planning

Only after requirements were clear did I choose my stack:

Frontend: React 19 + TypeScript + Vite
Backend: NestJS + SQLite + TypeORM
Auth: JWT with Node.js and native crypto
Charts: Nivo for interactive visualizations

SpecKit generated: 7 entities, 16 API endpoints, 39 numbered tasks.

Step 4: Task Execution

SpecKit broke everything into executable chunks:

 T001-T008: Project setup & config  
 T009-T023: Tests first (TDD)
 T024-T031: Database & models  
 T032-T045: Backend APIs
 T046-T055: Frontend components  
 T056-T077: Polish & optimizations

Key insight: Tests before implementation caught edge cases early.

What I Shipped

Features Built

JWT Authentication with secure login/register
Transaction CRUD with smart categorization
Budget Tracking with real-time progress bars
Interactive Charts showing spending trends
Anomaly Detection flagging unusual spending ($500 groceries vs usual $300)
Monthly Reports with actionable financial insights

Technical Results

Full TypeScript end-to-end type safety
Modern Stack React 19, NestJS, latest tooling

Why This Approach Won

Quality Gates Prevent Debt: Constitutional principles meant no "fix it later" code reached production.

Test-First Actually Works: Writing failing tests first caught edge cases I'd never have thought of.

Faster Development: More upfront planning = less refactoring, clearer decisions, fewer "what am I building?" moments.

Challenges Faced

I did face a few issues with the initial setup, and some AI-generated code needed tweaking, but overall the process was smooth. As we updated tasks during implementation, SpecKit kept everything aligned. We could start with fresh context and still have the full history of decisions.

Try SpecKit Yourself

# Install SpecKit
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

# Initialize project  
specify init my-app --ai copilot

# Follow the workflow
/constitution  # Set principles
/specify       # Define requirements  
/plan          # Choose tech stack
/tasks         # Generate tasks
/implement     # Build it!

Links & Resources

SpecKit Repository: github.com/github/spec-kit
My Expense Tracker: Source Code

Built something cool with SpecKit? I'd love to hear about your experience! Share your projects and lessons learned in the comments below.

GitKraken MCP: Supercharging Your AI Development Workflow

Manjush — Fri, 26 Sep 2025 02:30:00 +0000

Introduction

After diving into GitKraken's MCP (Trial) implementation, I've discovered how this tool can help in transforming routine Git operations into intelligent, context-aware workflows. Whether you're using Claude, Cursor, VS Code with Copilot, or any other AI agent, GitKraken MCP opens up possibilities that go far beyond simple code completion.

What Makes GitKraken MCP Special?

The Problem It Solves

Traditional AI coding assistants are excellent at generating code but often lack context about your repository's history, branches, pull requests, and team dynamics. They can't tell you who worked on a specific piece of code, what branches are stale, or help you manage complex multi-repository workflows.

GitKraken MCP solves this by providing AI agents with direct access to:

Git repository operations (branches, commits, stashes, worktrees)
Pull request management across GitHub, GitLab, Bitbucket, and Azure DevOps
Issue tracking integration with Jira, GitHub Issues, GitLab Issues, and Azure Boards
Team insights through blame annotations and commit history analysis
Workspace management across multiple repositories

Why This Matters

GitKraken's implementation means your AI assistant can now:

Understand your codebase's evolution and contributors
Make informed decisions based on repository history
Perform complex Git operations across multiple repositories
Integrate seamlessly with your existing project management tools

Getting Started: Setup and Configuration

Setting up GitKraken MCP is straightforward, but there are some nuances worth highlighting from my experience.

Prerequisites

GitKraken CLI: Download and install from gitkraken.com/cli
Authentication (need to create a account if not already): Run gk auth login to enable full functionality
AI Tool of Choice: VS Code, Cursor, Claude Desktop, or any MCP-compatible client

VS Code Configuration

For VS Code integration, create or update your MCP configuration file:

{
    "servers": {
        "gitkraken": {
            "command": "gk",
            "args": ["mcp"]
        }
    }
}

The configuration file location varies by platform. I have created at .vscode/mcp.json in my project root for easy access.

Real world workflows That helped in development process

1. Smart Branch Cleanup

The Challenge: Local repositories accumulate stale branches over time, making branch selection cumbersome and potentially causing confusion.

The GitKraken MCP Solution:

Analyze all local branches in this repository. Show me branches that 
haven't been modified in 30 days, excluding main/master/develop branches. 
After I review the list, delete the stale branches locally while preserving 
any that have unmerged changes.

The AI agent intelligently identifies cleanup candidates while preserving important work.

2. Intelligent Code Review Preparation

The Challenge: Before submitting pull requests, I needed to understand who had expertise in the areas I was modifying and ensure my changes aligned with the codebase's patterns.

The GitKraken MCP Solution:

Analyze the git blame for the files I've modified in my current branch. 
Identify the developers who have the most experience with these areas 
and suggest who I should add as reviewers for my upcoming PR.

This query not only identifies subject matter experts but also provides context about recent changes and potential conflicts.

3. Cross-Repository Dependency Management

The Challenge: Managing dependency updates across multiple repositories in a microservices architecture was time-consuming and error-prone.

The GitKraken MCP Solution:

For all repositories in my GitKraken workspace, check if they use the 
'shared-utils' library. For those that do, create a new branch called 
'update-shared-utils-v2.1.0', update the dependency, and create 
pull requests with appropriate reviewers tagged.

What used to take hours of manual work across repositories now happens with a single, intelligent command.

4. Issue-Driven Development

The Challenge: Connecting development work to project management tools and ensuring proper issue tracking throughout the development lifecycle.

The GitKraken MCP Solution:

Look at issues assigned to me in Jira with high priority. For the most 
critical one, create a new branch with an appropriate name, analyze 
the codebase to identify relevant files, and provide a development plan 
based on the issue requirements and existing code patterns.

This creates a seamless bridge between project planning and actual development work.

Safety First: Essential Precautions When Using GitKraken MCP

⚠️ Important: GitKraken MCP gives AI agents powerful Git operation capabilities. With great power comes great responsibility – here are essential safety practices to protect your work.

The Reality Check: AI Agents Can Make Mistakes

While GitKraken MCP is incredibly powerful, it's crucial to understand that AI agents can and will make mistakes. They might:

Delete branches you didn't intend to remove
Create commits with incorrect messages or content
Modify files in ways you didn't expect
Push changes to the wrong branches or repositories
Misunderstand complex Git scenarios

Essential Safety Practices

1. Always Review Before Destructive Operations

Never let the AI agent perform destructive operations without explicit confirmation:

❌ BAD: "Delete all old branches in my repository"

✅ GOOD: "Show me all branches older than 30 days with their last 
commit info. I'll review the list before deciding which ones to delete."

2. Use Staging Areas and Dry Runs

For complex operations, ask for a plan first:

"Create a plan for updating dependencies across all repositories. 
Show me which files will be changed and what the commit messages 
will be before making any actual changes."

3. Backup Critical Work

Before major operations:

Ensure your work is committed and pushed
Consider creating backup branches for important work
Use git stash to save uncommitted changes

4. Start Small and Test

Begin with less critical repositories or operations:

Test workflows on feature branches first
Use personal/test repositories to validate commands
Gradually increase complexity as you build confidence

5. Implement Branch Protection

Use your Git hosting platform's protection features:

Protect main/master branches from direct pushes
Require pull request reviews for critical branches
Set up branch protection rules before using MCP extensively

Recommended Workflow Patterns

The "Show First, Act Later" Pattern

User: "I want to clean up old branches"
AI: "I found 12 branches older than 60 days. Here's the list with 
their last commit dates and authors. Which ones should I delete?"
User: [Reviews list] "Delete branches X, Y, and Z, but keep branch A"
AI: [Deletes only the specified branches]

The "Staged Confirmation" Pattern

User: "Update package.json versions across all repos"
AI: "I'll update 5 repositories. Here's what I plan to change:
- repo-1: update lodash from 4.17.19 to 4.17.21
- repo-2: update react from 17.0.2 to 18.2.0
Should I proceed with these changes?"
User: "Yes, but skip the React update in repo-2"
AI: [Proceeds with modified plan]

Recovery and Rollback Strategies

Know Your Escape Routes

Before starting complex operations, understand how to undo them:

Branch operations: git reflog can recover deleted branches
Commits: git reset or git revert can undo changes
Stashes: git stash list shows all stashed changes
Remote operations: Contact your team if you've pushed problematic changes

Set Up Git Aliases for Quick Recovery

git config --global alias.undo 'reset HEAD~1'
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'

Repository-Specific Safeguards

For Production Repositories

Never allow direct operations on production branches
Always use pull request workflows
Implement mandatory code reviews
Set up CI/CD checks that must pass

For Shared Team Repositories

Communicate major operations with your team
Use branch naming conventions that indicate AI-generated work
Document AI-assisted changes clearly in commit messages

Red Flags: When to Stop and Think

Be extra cautious when the AI suggests:

Deleting multiple branches at once
Force pushing to any branch
Modifying commit history on shared branches
Operations spanning multiple repositories simultaneously
Changes to configuration files or build scripts

Building Trust Gradually

Start with these low-risk operations to build confidence:

Read-only queries: Repository analysis, blame information, commit history
Branch creation: New feature branches (easily deleted if wrong)
Stash operations: Temporary storage of work (recoverable)
Status checks: Repository state and branch information

Gradually work up to more complex operations as you understand the AI's behavior patterns.

Advanced Features and Technical Insights

GitKraken Workspaces Integration

One of GitKraken MCP's most powerful features is its integration with GitKraken Workspaces. This allows AI agents to operate across multiple repositories simultaneously, understanding relationships and dependencies between projects.

Multi-Platform Issue Management

The integration supports multiple platforms:

GitHub: Issues, pull requests, and project boards
GitLab: Issues, merge requests, and milestones
Jira: Stories, bugs, and sprints
Azure DevOps: Work items and pull requests

Performance Considerations

From my testing, GitKraken MCP performs well even with large repositories. The CLI efficiently caches repository information and provides quick responses for most operations. However, cross-repository operations can take time depending on the number of repositories in your workspace.

Troubleshooting Common Issues

Authentication Problems

Ensure gk auth login was completed successfully
Check that your GitKraken CLI version is up to date
Verify network connectivity for remote operations

MCP Server Connection Issues

Restart your AI client after configuration changes
Check that the gk command is available in your system PATH
Review MCP server logs for detailed error messages

Performance Optimization

Use specific repository paths when possible to limit scope
Consider workspace organization for frequently accessed repositories
Monitor resource usage during large multi-repository operations

Safety-Related Issues

Accidental Destructive Operations

If you've accidentally deleted branches or made unwanted changes:

# Recover deleted branches (works within ~90 days)
git reflog
git checkout -b recovered-branch <commit-hash>

# Undo last commit (keeps changes in working directory)
git reset --soft HEAD~1

# Completely undo last commit (loses changes)
git reset --hard HEAD~1

AI Agent Misunderstanding Context

Always verify the AI understands your repository structure
Provide explicit branch names rather than using "current" or "main"
Confirm the scope of operations (single repo vs. workspace-wide)

Preventing Future Issues

Set up Git hooks to prevent dangerous operations
Use .gitignore_global for system-wide file exclusions
Configure Git to require explicit push destinations

Conclusion

GitKraken MCP transforms AI coding assistants from simple code generators into intelligent development partners. By bridging the gap between AI capabilities and Git repository management, it enables workflows that were previously impossible or extremely time-consuming.

The setup is straightforward, the integration is seamless, and the potential for improving development efficiency is enormous. Whether you're managing a single repository or a complex multi-service architecture, GitKraken MCP provides the context and capabilities to make your AI assistant truly useful for Git operations.

References

GitKraken MCP blog

Have you tried GitKraken MCP? Do share your experiences and creative workflows

JavaScript's Temporal API: A Better Way to Handle Dates & Times

Manjush — Fri, 20 Jun 2025 05:11:46 +0000

Introduction

If you've worked with JavaScript's Date object, you've probably run into quirks that make even simple tasks frustrating. Time zone issues, unpredictable parsing, and mutable behavior are just a few of the common pain points.

Thankfully, JavaScript now has a modern solution: the Temporal API. It's built from the ground up to be reliable, precise, and intuitive. In this article, we'll explore what makes Temporal so powerful and how it improves on the classic Date object.

Why Temporal?

Here's a quick look at why Temporal is a big deal:

Feature	`Date`	`Temporal`
Mutable?	Yes	No
Time zone support	Limited	Robust and explicit
Parsing behavior	Inconsistent	Predictable
Supports durations?	No	Yes (via `Temporal.Duration`)
Calendar support	No	Yes
Precision	Milliseconds	Nanoseconds
API style	Verbose and quirky	Clean and expressive

1. Getting the Current Date

Using `Date`:

const today = new Date();
console.log(today.toDateString()); // e.g., "Fri Jun 20 2025"

Using `Temporal`:

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // "2025-06-20"

With Temporal, you get a clean, ISO-compliant string. No surprises.

2. Getting the Current Date & Time

`Date`:

const now = new Date();
console.log(now.toISOString()); // "2025-06-20T04:30:00.000Z"

`Temporal`:

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // "2025-06-20T10:00:00"

No need to worry about time zone conversions or formatting.

3. Adding or Subtracting Time

`Date` (mutates the original object):

const date = new Date();
date.setDate(date.getDate() + 7);
console.log(date.toDateString());

`Temporal` (immutable and predictable):

const date = Temporal.Now.plainDateISO();
const nextWeek = date.add({ days: 7 });
console.log(nextWeek.toString());

4. Working with Time Zones

`Date` (clunky and confusing):

const utc = new Date(Date.UTC(2025, 5, 20, 10));
console.log(utc.toLocaleString("en-US", { timeZone: "Asia/Tokyo" }));

`Temporal` (straightforward):

const zoned = Temporal.Now.zonedDateTimeISO("Asia/Tokyo");
console.log(zoned.toString());

You get exact time zone info, down to the name and offset.

5. Calculating Durations

`Date`:

const start = new Date("2025-01-01");
const end = new Date("2025-12-31");
const diff = (end - start) / (1000 * 60 * 60 * 24);
console.log(diff); // 364

`Temporal`:

const start = Temporal.PlainDate.from("2025-01-01");
const end = Temporal.PlainDate.from("2025-12-31");
const duration = end.since(start);
console.log(duration.toString()); // "P364D"

The API gives you back a human-readable duration string.

6. Error Handling and Validation

`Date` silently fails:

console.log(new Date("2025-13-01")); // Invalid Date

`Temporal` throws a clear error:

Temporal.PlainDate.from("2025-13-01"); // RangeError: Invalid month

Much safer, especially in production environments.

Using Temporal Today

If you're using a modern browser or Node.js, Temporal is likely supported natively. For older environments, use the official polyfill:

npm install @js-temporal/polyfill

Then in your code:

import { Temporal } from '@js-temporal/polyfill';

Final Thoughts

Temporal is a long-overdue improvement to JavaScript’s handling of dates and times. It’s reliable, powerful, and intuitive — everything that Date never quite managed to be.

Whether you're building schedulers, logs, or anything time-sensitive, Temporal will help you write clearer and safer code.

Learn More

Switching from Date to Temporal may feel like a small change, but it can significantly improve the reliability and readability of your JavaScript code.

Checkout Some of projects

Movies Web App

Exploring Functional Programming in JavaScript

Manjush — Mon, 30 Sep 2024 12:30:00 +0000

What is Functional Programming?

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions. It avoids changing state and mutable data. The fundamental idea is to build programs using pure functions, avoid side effects, and work with immutable data structures.

The main characteristics of functional programming include:

Pure functions: Functions that, given the same input, will always produce the same output and have no side effects.
Immutability: Data cannot be changed once created. Instead, when you need to modify data, you create a new copy with the necessary changes.
First-class functions: Functions are treated as first-class citizens, meaning they can be passed as arguments, returned from other functions, and assigned to variables.
Higher-order functions: Functions that either take other functions as arguments or return them as results.
Declarative code: The focus is on what to do rather than how to do it, making the code more readable and concise.

Core Concepts of Functional Programming in JavaScript

Let’s explore some of the most important concepts that define FP in JavaScript.

1. Pure Functions

A pure function is one that does not cause side effects, meaning it doesn’t modify any external state. It depends solely on its input parameters, and given the same input, it will always return the same output.

Example:

// Pure function example
function add(a, b) {
  return a + b;
}

add(2, 3); // Always returns 5

A pure function has several advantages:

Testability: Since pure functions always return the same output for the same input, they are easy to test.
Predictability: They behave consistently and are easier to debug.

2. Immutability

Immutability means once a variable or object is created, it cannot be modified. Instead, if you need to change something, you create a new instance.

Example:

const person = { name: "Alice", age: 25 };

// Attempting to "change" person will return a new object
const updatedPerson = { ...person, age: 26 };

console.log(updatedPerson); // { name: 'Alice', age: 26 }
console.log(person); // { name: 'Alice', age: 25 }

By keeping data immutable, you reduce the risk of unintended side effects, especially in complex applications.

3. First-Class Functions

In JavaScript, functions are first-class citizens. This means that functions can be assigned to variables, passed as arguments to other functions, and returned from functions. This property is key to functional programming.

Example:

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Bob")); // "Hello, Bob!"

4. Higher-Order Functions

Higher-order functions are those that take other functions as arguments or return them. They are a cornerstone of functional programming and allow for greater flexibility and code reuse.

Example:

// Higher-order function
function map(arr, fn) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(fn(arr[i]));
  }
  return result;
}

const numbers = [1, 2, 3, 4];
const squared = map(numbers, (x) => x * x);

console.log(squared); // [1, 4, 9, 16]

JavaScript’s Array.prototype.map, filter, and reduce are built-in examples of higher-order functions that help in functional programming.

5. Function Composition

Function composition is the process of combining multiple functions into a single function. This allows us to create a pipeline of operations, where the output of one function becomes the input to the next.

Example:

const multiplyByTwo = (x) => x * 2;
const addFive = (x) => x + 5;

const multiplyAndAdd = (x) => addFive(multiplyByTwo(x));

console.log(multiplyAndAdd(5)); // 15

Function composition is a powerful technique for building reusable, maintainable code.

6. Currying

Currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each take a single argument. It’s particularly useful for creating reusable and partially-applied functions.

Example:

function add(a) {
  return function(b) {
    return a + b;
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8

This technique allows you to create specialized functions without needing to rewrite the logic.

7. Recursion

Recursion is another functional programming technique where a function calls itself to solve a smaller instance of the same problem. This is often used as an alternative to loops in FP, as loops involve mutable state (which functional programming tries to avoid).

Example:

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

Recursion enables you to write cleaner, more readable code for tasks that can be broken down into smaller sub-problems.

8. Avoiding Side Effects

Side effects occur when a function modifies some external state (like changing a global variable or interacting with the DOM). In functional programming, the goal is to minimize side effects, keeping functions predictable and self-contained.

Example of Side Effect:

let count = 0;

function increment() {
  count += 1;  // Modifies external state
}

increment();
console.log(count);  // 1

In functional programming, we avoid this kind of behavior by returning new data instead of modifying existing state.

FP Alternative:

function increment(value) {
  return value + 1;  // Returns a new value instead of modifying external state
}

let count = 0;
count = increment(count);
console.log(count);  // 1

Advantages of Functional Programming

Adopting functional programming in JavaScript offers numerous benefits:

Improved readability: The declarative nature of FP makes code easier to read and understand. You focus on describing the "what" rather than the "how."
Reusability and modularity: Pure functions and function composition promote reusable, modular code.
Predictability: Pure functions and immutability reduce the number of bugs and make the code more predictable.
Easier testing: Testing pure functions is straightforward since there are no side effects or dependencies on external state.
Concurrency and parallelism: FP allows easier implementation of concurrent and parallel processes because there are no shared mutable states, making it easier to avoid race conditions and deadlocks.

Functional Programming Libraries in JavaScript

While JavaScript has first-class support for functional programming, libraries can enhance your ability to write functional code. Some popular libraries include:

Lodash (FP module): Lodash provides utility functions for common programming tasks, and its FP module allows you to work in a more functional style.

Example:

   const _ = require('lodash/fp');
   const add = (a, b) => a + b;
   const curriedAdd = _.curry(add);
   console.log(curriedAdd(1)(2)); // 3

Ramda: Ramda is a library specifically designed for functional programming in JavaScript. It promotes immutability and function composition.

Example:

   const R = require('ramda');
   const multiply = R.multiply(2);
   const add = R.add(3);
   const multiplyAndAdd = R.pipe(multiply, add);

   console.log(multiplyAndAdd(5)); // 13

Immutable.js: This library provides persistent immutable data structures that help you follow FP principles.

Example:

   const { Map } = require('immutable');

   const person = Map({ name: 'Alice', age: 25 });
   const updatedPerson = person.set('age', 26);

   console.log(updatedPerson.toJS()); // { name: 'Alice', age: 26 }
   console.log(person.toJS()); // { name: 'Alice', age: 25 }

Conclusion

Functional programming offers a powerful paradigm for writing clean, predictable, and maintainable JavaScript code. By focusing on pure functions, immutability, and avoiding side effects, developers can build more reliable software. While not every problem requires a functional approach, integrating FP principles can significantly enhance your JavaScript projects, leading to better code organization, testability, and modularity.

As you continue working with JavaScript, try incorporating functional programming techniques where appropriate. The benefits of FP will become evident as your codebase grows and becomes more complex.

Happy coding!

Mastering Load Balancing: Ensuring Fast, Reliable, and Scalable Web Performance

Manjush — Mon, 23 Sep 2024 14:30:00 +0000

NOTES

The vast majority of web users go about their online activities without a second thought regarding the intricate and massive process that operates behind the scenes to bring them the content they desire.

The challenges don’t stop there. As websites grow in popularity, they inevitably face the daunting task of handling a constant surge in monthly traffic. This surge can lead to frustratingly slow loading times, impacting the overall user experience for both new and loyal visitors. It’s not uncommon for some websites to attract more visitors in a single month than their competitors do in an entire year. The sheer volume of traffic places immense pressure on the servers, often necessitating frequent and costly upgrades to maintain acceptable page speed and ensure a seamless browsing experience.

In this article, we’re going to dive into the world of load balancing and see how it works its magic to keep everything running smoothly. No more “404 not found” errors or endlessly spinning wheels of doom! So buckle up, because load balancing is about to take you on a ride through the tech wizardry that keeps the internet chugging along without a hitch. Let’s get started! 🚀

What is Load Balancing?

Imagine you have a favorite restaurant that’s always packed with hungry customers. Now, this place has only one chef, and as much as they love cooking, it’s tough for them to handle all the orders alone. As a result, some customers end up waiting forever for their food, while others get served quickly.

Load balancing is like having a team of chefs in the kitchen. When the restaurant gets busy, the orders are evenly distributed among the chefs. This way, each chef can focus on a manageable number of orders, ensuring that everyone gets their food promptly.

In the world of computers and the internet, load balancing works similarly. When a website or online service becomes super popular, it starts receiving a flood of requests from users all over the place. Instead of relying on a single server to handle all these requests (like the one chef scenario), load balancing spreads the workload across multiple servers.

By doing this, no single server gets overwhelmed with too much traffic, and every server gets to share the load. This prevents crashes, slowdowns, and annoying error messages, making sure that users like you and me have a smooth and enjoyable experience while browsing websites or using online applications.

Load balancing algorithms decide which server should handle each request, making sure they’re divvied up fairly. Think of it as a smart traffic cop redirecting cars during rush hour, ensuring that everyone gets where they need to be without a traffic jam.

Practical Example of where a Load Balancer would be necessary

Let’s say you’re running a popular online store that sells trendy clothing and accessories. Your website has been getting a ton of traffic lately, especially during peak shopping seasons like Black Friday and Cyber Monday.
After running a website that popular

With so many customers browsing your website, adding items to their carts, and checking out, your servers are working overtime to handle all the requests.

Without a load balancer in place, this surge in traffic could overwhelm your servers, leading to slow loading times, unresponsive pages, and maybe even crashes. As a result, frustrated customers might abandon their shopping carts and take their business elsewhere.
Crashing down after being abandoned

But fear not! This is where the load balancer swoops in to save the day. You set up a load balancer that sits between your website’s users (the shoppers) and your servers. Now, when a customer visits your website and clicks on a link or adds something to their cart, their request goes to the load balancer first.

The load balancer, being the smart cookie it is, checks which of your servers is the least busy at that moment. It’s like having a traffic cop who directs the incoming shoppers to the checkout lines with the shortest wait times. The load balancer then sends the customer’s request to that particular server.

As more and more shoppers come in, the load balancer continues to evenly distribute the incoming traffic across all your servers. Each server gets a fair share of customers to serve, preventing any one server from getting overwhelmed.

With the load balancer at work, your website can handle the surge in traffic like a champ. Customers enjoy speedy page loading times, a smooth shopping experience, and no frustrating delays. Even if one of your servers decides to take a coffee break (i.e., goes down), the load balancer can reroute the traffic to the remaining healthy servers, ensuring continuous service and minimal disruption.

Thanks to the load balancer, your online store can keep up with the high demand, retain happy customers, and make the most of those peak shopping seasons without breaking a sweat!

Types of Load Balancers based on the OSI Model

Load balancers are categorized based on the layer of the OSI (Open Systems Interconnection) model at which they operate.

Network Load Balancer (Load Balancer 4):

Layer 4 Load Balancer operates at the transport layer (Layer 4) of the OSI model. It makes decisions based on information such as the source and destination IP addresses, as well as the port numbers of incoming requests. The main focus of Layer 4 load balancers is to distribute network traffic efficiently across multiple servers.

🔑 How it works:
When a user sends a request to access a website or application, the Layer 4 Load Balancer receives the request. It then looks at the transport layer data (IP addresses and ports) to determine which server should handle the request. The load balancer uses various algorithms (e.g., round-robin, least connections) to decide the best server to forward the request to. This ensures that traffic is evenly spread among the servers, improving performance and avoiding overloading any single server.

✅ Advantages:

High performance and low latency due to its network-level decisions.
Suitable for distributing TCP and UDP traffic efficiently.
Ideal for scenarios where content-based decisions are not necessary.

❌ Disadvantages

Limited in making application-specific decisions.

Application Load Balancer (Load Balancer 7):

Layer 7 Load Balancer operates at the application layer (Layer 7) of the OSI model. It can make more intelligent decisions based on application-specific data, such as HTTP headers, cookies, and URLs. Layer 7 Load Balancers understand application protocols, enabling them to optimize traffic distribution for specific applications or services.

🔑 How it works:
When a user sends a request, the Layer 7 Load Balancer analyzes the content of the request to gain insights into the application being accessed. For example, it can identify the type of service (e.g., HTTP, HTTPS, FTP) or the specific URL being requested. Using this information, the load balancer can make intelligent decisions about which server is best suited to handle the request. This allows for more advanced load balancing strategies, such as sending certain requests to specialized servers that can handle specific application tasks.

✅ Advantages:

Application-aware and can optimize traffic based on specific application requirements.
Allows for content-based routing and advanced load balancing algorithms.
Suitable for complex applications that require different server responses based on the type of request.

❌ Disadvantages

Higher processing overhead compared to Layer 4 Load Balancer due to content analysis.

Load Balancing Algorithms:

1. Round Robin

The Round Robin load balancing algorithm is one of the simplest and most straightforward methods used to distribute incoming network traffic across multiple servers. It operates at the transport layer (Layer 4) of the OSI model and is commonly used in various load balancers.

🔑 How it works:

Server Pool: To begin, the load balancer maintains a pool of available servers that are ready to handle incoming requests. These servers could be physical machines, virtual instances, or containers.
Request Distribution: When a new request comes in, the load balancer starts at the first server in the pool and forwards the request to that server. For the next request, it moves to the next server in line and forwards the request to that server, continuing this sequential pattern.
Circular Pattern: The load balancer cycles through the list of servers in a circular fashion. Once it reaches the last server in the pool, it goes back to the first server and starts the cycle again. This ensures an even distribution of requests across all servers.

Each server receives an equal number of requests in the long run. If there are N servers in the pool, then each server will handle approximately 1/N of the total incoming requests.

The Round Robin algorithm is stateless, meaning it doesn’t consider the current load or responsiveness of servers when making the distribution decision. All servers are treated equally, regardless of their current workload.

📔 Understanding through an example

Let’s say you have three servers in your server pool: Server A, Server B, and Server C. The load balancer receives six incoming requests:

Request 1: Forwarded to Server A (First server in the pool).
Request 2: Forwarded to Server B (Next server in line).
Request 3: Forwarded to Server C (Next server in line).
Request 4: Forwarded to Server A (Cycle back to the first server).
Request 5: Forwarded to Server B (Continuing the circular pattern).
Request 6: Forwarded to Server C (Continuing the circular pattern).

And so on…

✅ Advantages:

Simplicity: Round Robin is one of the simplest load balancing algorithms to implement. It doesn’t require complex calculations or in-depth server monitoring.
Equal Workload: The algorithm ensures an even distribution of incoming requests among all servers in the pool. Each server gets an equal share of the load, promoting fair resource utilization.
No Session Affinity: Round Robin is stateless, meaning it doesn’t rely on session information or maintain any state about previous requests. This makes it suitable for stateless applications or scenarios where session affinity is not required.
Low Overhead: Round Robin has low computational overhead since it only involves basic tracking of the last server used. This makes it efficient and scalable for large server pools.
No External Dependencies: The algorithm doesn’t require external data, such as server health information or response times. It can work without any additional monitoring systems.

❌ Disadvantages

Unequal Server Capacities: Round Robin treats all servers equally, regardless of their capacities or performance capabilities. This can lead to some servers being overburdened if they are less powerful than others in the pool.
No Health Monitoring: The algorithm lacks intelligence to monitor server health or responsiveness. If a server becomes unavailable or experiences performance issues, Round Robin continues to forward requests to that server.
Load Imbalance: In practice, the actual workload of requests can vary, even with Round Robin. Certain requests may be more resource-intensive, leading to imbalances in server loads.
Inefficient for Dynamic Environments: In dynamic environments where servers are frequently added or removed from the pool, Round Robin may not adapt quickly to changes. New servers might not immediately receive an equal share of the load.
No Geo-location Awareness: Round Robin doesn’t consider the geographic location of users or servers. In global applications, this might result in suboptimal user experiences due to requests being sent to distant servers.
Persistent Connections: If clients use persistent connections (keep-alive), Round Robin can cause all requests from a single client to be sent to the same server, leading to potential load imbalances.

2. Weighted Round Robin

The Weighted Round Robin load balancing algorithm is an extension of the basic Round Robin algorithm. It aims to address the issue of unequal server capacities by assigning different weights to each server in the pool. These weights represent the relative capacity or performance of each server. Servers with higher weights get a larger share of the incoming traffic, while servers with lower weights receive a smaller share.

🔑 How it works:

Assigning Weights: Each server in the pool is assigned a weight, which represents its capacity or processing power. Servers with higher capacities are given higher weights, and those with lower capacities receive lower weights.
Weight-Based Distribution: When a new request comes in, the load balancer uses the weights to determine which server should handle the request. It cycles through the servers in a circular manner, as in the basic Round Robin algorithm, but with a slight modification. Instead of equal distribution, it takes into account the weights of the servers.
Proportional Allocation: The load balancer forwards incoming requests to servers based on their weights. Servers with higher weights receive a larger proportion of the traffic, while servers with lower weights handle fewer requests.
Equal Load per Weight: Within the subset of servers with the same weight, the load is distributed equally using basic Round Robin. This ensures that all servers with the same weight share the traffic evenly.

📔 Understanding through an example

Let’s consider a scenario where you have three servers in your pool with the following weights:

Server A: Weight 4
Server B: Weight 2
Server C: Weight 1

The load balancer receives six incoming requests:

Request 1: Forwarded to Server A (Weight 4).
Request 2: Forwarded to Server B (Weight 2).
Request 3: Forwarded to Server C (Weight 1).
Request 4: Forwarded to Server A (Weight 4).
Request 5: Forwarded to Server B (Weight 2).
Request 6: Forwarded to Server A (Weight 4).

As you can see, Server A, with a weight of 4, handles more requests compared to Server B (weight 2) and Server C (weight 1). The load balancer ensures that the ratio of requests served by each server matches the ratio of their weights.

✅ Advantages:

Capacity-Based Distribution: Weighted Round Robin accounts for the different capacities of servers, ensuring that more powerful servers handle a higher proportion of the traffic.
Fine-Tuned Balancing: The ability to set specific weights allows for precise tuning of the load distribution, accommodating servers with varying capabilities.

❌ Disadvantages

Static Configuration: Weighted Round Robin requires manual configuration of server weights. It may not adapt dynamically to changes in server performance or capacity.
Complexity: The algorithm introduces some complexity compared to basic Round Robin, as administrators need to assign and manage the weights appropriately.

3. IP Hash

The IP Hash load balancing algorithm is a method used to distribute incoming network traffic across multiple servers based on the source IP address of the client. This algorithm operates at the application layer (Layer 7) of the OSI model and is commonly used in environments where session persistence or sticky sessions are required.

🔑 How it works:

Client IP Address: When a client (usually a user’s device) sends a request to access a website or application, the load balancer extracts the source IP address from the incoming request.
Hashing the IP Address: The IP address is then hashed, meaning it is converted into a unique numerical value using a hash function. The hash function ensures that the same IP address will always produce the same hash value.
Determining the Server: The load balancer uses the hashed value to map the client’s IP address to a specific server in the pool. This mapping is typically done by dividing the hash value by the total number of servers and selecting the corresponding server.

The key feature of IP Hash is that for a given client IP address, it will consistently map to the same server. This ensures session persistence, meaning subsequent requests from the same client are always directed to the same server.

📔 Understanding through an example

Let’s say you have three servers in your pool and the IP addresses of two clients are as follows:

Client 1 IP Address: 203.0.113.12
Client 2 IP Address: 198.51.100.35

The load balancer uses a hash function to convert these IP addresses into numerical values:

Client 1 IP Hash: 2895
Client 2 IP Hash: 1578

If the pool has three servers (Server A, Server B, and Server C), the load balancer could map the clients to servers based on the hash values:

Client 1 (IP Hash 2895) → Server B
Client 2 (IP Hash 1578) → Server A

Since the mapping is consistent, subsequent requests from Client 1 will always be directed to Server B, and requests from Client 2 will always go to Server A.

✅ Advantages:

Session Persistence: IP Hash provides session affinity, ensuring that subsequent requests from the same client are always directed to the same server. This is crucial for applications that rely on maintaining user sessions or state.
Equal Load per Client: Each client’s requests are consistently sent to the same server, achieving balanced load distribution for individual clients.

❌ Disadvantages

Uneven Workload: If a few clients generate a disproportionately large amount of traffic, the corresponding servers may experience a higher workload, potentially causing imbalances.
Client Dependency: IP Hash relies heavily on the client’s IP address for mapping, making it less effective when clients are behind NAT (Network Address Translation) or use multiple IP addresses.

4. Least Connection Algorithm

The Least Connection load balancing algorithm is designed to distribute incoming network traffic across multiple servers based on the number of active connections each server currently has. The main objective of this algorithm is to direct new requests to the server with the least number of connections, ensuring a more balanced distribution of the workload.

🔑 How it works:

Tracking Connections: The load balancer continuously monitors the number of active connections on each server in the pool. It keeps track of how many clients are currently connected to each server.
Choosing the Least Connection: When a new request comes in, the load balancer evaluates the current connection count for each server and selects the server with the fewest active connections.
Load Distribution: The new request is then forwarded to the chosen server, which has the least burden of active connections.
Equalizing Connections: By directing new requests to servers with fewer connections, the Least Connection algorithm attempts to balance the number of connections across all servers in the pool.

📔 Understanding through an example

Let’s consider a scenario with four servers in the pool and their respective connection counts:

Server A: 10 active connections
Server B: 7 active connections
Server C: 5 active connections
Server D: 8 active connections

If a new request comes in, the load balancer will choose Server C, as it currently has the fewest active connections (5) among all servers. The new request will be forwarded to Server C, helping to distribute the workload more evenly.

✅ Advantages:

Dynamic Load Distribution: The Least Connection algorithm adapts in real-time to the actual workload on each server, ensuring that new requests are directed to the least busy server at that moment.
Balanced Resource Utilization: By spreading the connections evenly across servers, Least Connection helps prevent any single server from becoming overloaded, thus optimizing resource usage.

❌ Disadvantages

Connection Fluctuations: The Least Connection algorithm may cause frequent fluctuations in connections for some servers, especially when the workload is volatile.
Spike Handling: During sudden spikes in traffic, servers that initially had fewer connections may receive a surge of new requests, potentially causing temporary performance issues.
No Consideration of Server Capacity: Least Connection doesn’t consider server capacity or performance; it only looks at the number of connections. Thus, a powerful server may handle more connections than a less powerful one, leading to potential inefficiencies.

5. Least Response Time Algorithm

The Least Response Time load balancing algorithm is a method used to distribute incoming network traffic across multiple servers based on their response times to previous requests. The main objective of this algorithm is to direct new requests to the server with the shortest response time, ensuring that clients are served by the most responsive server available.

🔑 How it works:

Monitoring Response Times: The load balancer continuously measures the response times of each server in the pool to previous requests. It keeps track of how quickly each server responds to client requests.
Choosing the Fastest Server: When a new request comes in, the load balancer evaluates the response times of each server and selects the server with the shortest response time.
Load Distribution: The new request is then forwarded to the chosen server, which has demonstrated the fastest response time in the recent past.

As response times change, the load balancer updates its evaluations and may switch to a different server if its response time becomes faster than the current one.

Time to First Byte (TTFB) is the time taken by a server to send the first byte of data in response to a client’s request. It includes the time spent on processing the request, database queries, and any other backend operations before the server starts sending the response data.

The Least Response Time load balancing algorithm implicitly takes into account the Time to First Byte as it evaluates the overall response time of each server. The response time includes the TTFB along with the time taken to transmit the complete response data.

So, when the load balancer chooses the server with the shortest response time, it inherently considers the server’s efficiency in processing the request and delivering the first byte of data. A server with a shorter TTFB is likely to have a quicker response time overall, making it more attractive to the load balancer.

📔 Understanding through an example

Let’s consider a scenario with four servers in the pool and their respective response times to previous requests:

Server A: 50 ms
Server B: 40 ms
Server C: 35 ms
Server D: 60 ms

If a new request comes in, the load balancer will choose Server C, as it has the shortest response time (35 ms) among all servers. The new request will be forwarded to Server C, ensuring that the client is served by the most responsive server available.

✅ Advantages:

Optimal User Experience: The Least Response Time algorithm ensures that clients are directed to the server that can respond the fastest, leading to a more responsive and smoother user experience.
Dynamic Adaptation: The load balancer continuously evaluates server response times and adjusts its routing decisions accordingly, making it suitable for dynamic environments with varying server performance.

❌ Disadvantages

Response Time Fluctuations: If server response times fluctuate frequently, the load balancer may switch clients between servers often, potentially causing inconsistency in the user experience.
Vulnerable to Outliers: A sudden spike in response time on one server may lead to temporarily routing more traffic to a slower server, impacting the overall performance.
Dependence on Monitoring: The Least Response Time algorithm requires ongoing monitoring of server response times, which may introduce additional overhead.

Finishing off with the article here. I really hope, I made the article worth your while and you learned a great deal from it.

References:

Securing JavaScript Applications: Common Vulnerabilities and How to Avoid Them

Manjush — Sun, 15 Sep 2024 18:30:00 +0000

JavaScript is one of the most popular languages for web development, but it is also a common target for attackers due to its widespread use. Securing JavaScript applications is crucial to avoid security breaches that can lead to stolen data, compromised user accounts, and more. This article will explore some of common vulnerabilities in JavaScript applications and provide strategies to mitigate them.

Common JavaScript Vulnerabilities

1. Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) occurs when an attacker is able to inject malicious scripts into a web page that is viewed by other users. These scripts can steal cookies, session tokens, or other sensitive information.

Example of a Vulnerable Code:

document.write(location.search);

If a user is directed to a URL like https://example.com/?name=<script>alert('XSS')</script>, the document.write() will directly render the malicious script on the page.

How to Prevent XSS:

Sanitize Input: Always validate and sanitize user input.

  const userInput = sanitizeHtml(getUserInput());

Use libraries such as DOMPurify to sanitize input.

Use Content Security Policy (CSP): A CSP header can block the execution of scripts that are not from trusted sources.

Example of CSP header:

  Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com

2. Cross-Site Request Forgery (CSRF)

CSRF is an attack where an attacker tricks a user into submitting a malicious request unknowingly. It exploits the fact that a browser automatically includes credentials like cookies with requests, allowing attackers to perform actions on behalf of users.

Example of Vulnerable Form:

<form action="/update" method="POST">
  <input type="hidden" name="username" value="newUsername">
</form>

If the form is vulnerable, an attacker can create a fake form on another site to submit the request on behalf of the logged-in user.

How to Prevent CSRF:

Use Anti-CSRF Tokens: Generate unique tokens for each session or form submission and validate them on the server side.

  <input type="hidden" name="_csrf" value="randomToken123">

SameSite Cookies: Set cookies with the SameSite attribute, which restricts cross-origin requests from being made with the cookie.

  Set-Cookie: sessionId=abc123; SameSite=Strict

3. Insecure Deserialization

Insecure deserialization occurs when untrusted data is used to create an object in the application, allowing attackers to execute arbitrary code or escalate privileges.

Example of Vulnerable Code:

const user = JSON.parse(dataFromUser);

If the dataFromUser is tampered with, the deserialization process could result in the creation of unintended objects or execution of dangerous methods.

How to Prevent Insecure Deserialization:

Avoid Deserialization of Untrusted Data: Always validate and sanitize data before deserializing.
Use Safe Libraries: When possible, use libraries that handle serialization and deserialization securely.

4. Server-Side JavaScript Injection

In some cases, server-side JavaScript execution is required, such as in Node.js environments. Server-Side JavaScript Injection occurs when untrusted data is executed as code on the server, leading to code execution vulnerabilities.

Example of Vulnerable Code:

eval(userInput);

If an attacker controls userInput, they could inject and execute malicious code on the server.

How to Prevent Server-Side JavaScript Injection:

Avoid eval(): Do not use eval() to execute user-provided input.

  const safeFunction = new Function('return 2 + 2');

Use Static Code Analysis Tools: Tools like ESLint can help identify potential code injection points.

5. Broken Authentication

Authentication is the process of verifying a user's identity. Broken authentication occurs when an application has weak or flawed authentication mechanisms, allowing attackers to impersonate legitimate users.

Common Vulnerabilities:

Weak Passwords: Users may choose passwords that are easily guessable or compromised.
Session Hijacking: Attackers may steal session tokens or cookies.

How to Strengthen Authentication:

Use Multi-Factor Authentication (MFA): Require users to verify their identity using multiple methods (e.g., password + SMS code).
Secure Session Management: Use secure, HttpOnly, and encrypted cookies. Regenerate session tokens after login to prevent session fixation attacks.

  res.cookie('sessionId', sessionId, { httpOnly: true, secure: true });

6. Sensitive Data Exposure

Sensitive data such as passwords, credit card numbers, and API keys should be handled carefully. Exposure can occur when this data is stored or transmitted insecurely.

How to Prevent Data Exposure:

Encrypt Sensitive Data: Always use strong encryption algorithms (e.g., AES-256) for storing and transmitting sensitive information.
Use HTTPS: Ensure all communication between the server and client is encrypted using TLS (HTTPS).
Environment Variables for Secrets: Store API keys, database credentials, and other secrets in environment variables or secure vaults rather than hard-coding them in your application.

  export API_KEY=your_api_key

7. Unvalidated Redirects and Forwards

This vulnerability occurs when an attacker manipulates the URL to redirect users to a malicious site.

Example of Vulnerable Code:

res.redirect(req.query.redirectUrl);

If the URL isn't validated, an attacker could send users to a phishing site.

How to Prevent Unvalidated Redirects:

Whitelist URLs: Only allow redirects to trusted, predefined URLs.
Use Secure Redirect Methods: Ensure that the redirection logic checks if the URL is safe before redirecting users.

Best Practices for Securing JavaScript Applications

Regular Security Audits and Penetration Testing: Regularly test your application for vulnerabilities by conducting audits and penetration tests.
Update Dependencies: Keep libraries, frameworks, and packages updated. Use tools like npm audit to check for vulnerabilities in your project dependencies.
Follow the Principle of Least Privilege: Limit the permissions and access that components and users have within your application.
Security Headers: Use HTTP security headers such as X-Content-Type-Options, X-Frame-Options, and Strict-Transport-Security to improve security.

Example of Security Headers:

X-Frame-Options: DENY
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

Input Validation: Always validate user input on both the client and server sides. Input should be validated for length, type, format, and allowed characters.

Conclusion

JavaScript applications, while powerful, are prone to various vulnerabilities that attackers can exploit. By understanding and mitigating these common vulnerabilities, developers can create more secure applications that protect users and data. Regular security audits, secure coding practices, and the use of modern security features will help you stay ahead of potential threats.

For further reading, developers should keep an eye on the OWASP Top Ten vulnerabilities and incorporate these insights into their development practices.

Techniques for Optimizing Performance in React Applications

Manjush — Mon, 09 Sep 2024 01:31:00 +0000

React is a powerful library for building user interfaces, but like any tool, it requires careful use to ensure optimal performance. As applications grow in complexity and size, performance can degrade if not managed properly. This article explores various strategies and best practices for optimizing performance in React applications.

1. Understanding React's Reconciliation

Before diving into optimization techniques, it's essential to understand how React works under the hood, particularly its reconciliation process. React uses a virtual DOM to track changes and updates the actual DOM only when necessary. This process involves diffing the previous and current virtual DOM trees and applying the minimal set of changes. Knowing this helps in understanding why certain optimizations are necessary.

2. Use of React.memo and PureComponent

React.memo

React memo is a higher-order component that prevents functional components from re-rendering if their props have not changed. This can significantly improve performance by avoiding unnecessary re-renders.

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

PureComponent

For Class components, PureComponent can be used to achieve a similar effect. It performs a shallow comparison of the component’s props and state, re-rendering only when they change.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Component logic
}

export default MyComponent;

3. Using the useMemo and useCallback Hooks

useMemo

useMemo is used to memoize expensive calculations. It returns a memoized value and recomputes it only when one of its dependencies changes.

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <List items={visibleTodos} />
    </div>
  );
}

useCallback

useCallback is similar to useMemo but is used to memoize callback functions. This is particularly useful when passing callbacks to child components to prevent them from re-rendering unnecessarily.

function ProductPage({ productId, referrer, theme }) {
  // Tell React to cache your function between re-renders...
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // ...so as long as these dependencies don't change...

  return (
    <div className={theme}>
      {/* ...ShippingForm will receive the same props and can skip re-rendering */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

4. Keeping Component State Local

Managing state efficiently is key to optimizing performance. Keeping component state local where necessary can prevent unnecessary re-renders. For example, if a state is only relevant to a specific component, avoid lifting it up to a parent component.

5. Avoiding Inline Functions and Objects

Defining functions or objects inside the render method can cause unnecessary re-renders. Instead, define them outside or use useCallback and useMemo to memoize them.

6. Lazy Loading Components/Images

Lazy loading components can help reduce the initial load time of your application by splitting your code into smaller chunks. React's React.lazy and Suspense are useful for this purpose.

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const MyComponent = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);

export default MyComponent;

7. Code Splitting

Code splitting can be done using dynamic imports to load only the necessary code for a particular route or component. This reduces the bundle size and improves the load time.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

export default App;

8. Throttling and Debouncing Events

Throttling and debouncing user input events can prevent excessive function calls and improve performance. Libraries like lodash provide utilities for this.

import React, { useCallback } from 'react';
import _ from 'lodash';

const MyComponent = () => {
  const handleScroll = useCallback(_.throttle(() => {
    // Handle scroll
  }, 200), []);

  return <div onScroll={handleScroll}>Content</div>;
};

export default MyComponent;

9. Applying Web Workers

Web workers allow you to run scripts in background threads, offloading heavy computations from the main thread. This can improve the responsiveness of your application by preventing the main thread from being blocked.

10. Using Immutable Data Structures

Immutable data structures can help optimize performance by preventing unnecessary re-renders. When data is immutable, changes create new objects rather than modifying existing ones. This makes it easier to determine when a component needs to re-render, as you can simply compare object references.

11. Using `useTransition` Hook

useTransition hook allows you to mark updates as non-urgent, letting React prioritize more important updates first.

12. Using Immutable Data Structures

Immutable data structures help prevent unnecessary re-renders by ensuring that data changes are detected efficiently.

Conclusion

Optimizing performance in React applications involves a combination of techniques aimed at reducing unnecessary re-renders, managing state efficiently, and improving the overall responsiveness of the application. By understanding how React updates its UI and implementing these optimization strategies, you can create fast and efficient React applications that provide a better user experience.

References:

Modern JavaScript Features: What’s New in ES2023

Manjush — Mon, 02 Sep 2024 08:30:00 +0000

JavaScript is constantly evolving, and each year brings a new set of features designed to make developers' lives easier. ES2023, the latest update, is packed with new tools that enhance how we write, read, and maintain code. Let’s dive into some of the standout features that you’ll want to start using in your projects.

1. Array `findLast` and `findLastIndex`

Have you ever needed to find an item in an array starting from the end? ES2023 introduces findLast and findLastIndex, which do just that.

findLast: This method finds the last element in an array that meets a specified condition.

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

findLastIndex: This method returns the index of that last element.

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

These methods are great for those situations where you need to reverse your search logic, making your code clearer and potentially more efficient.

2. Hashbangs (`#!`) in JavaScript Files

If you’re writing command-line tools in JavaScript, you’ll appreciate the new support for hashbangs. By adding a #! at the top of your file, you can specify the interpreter directly, making your script executable without needing an external command.

#!/usr/bin/env node

console.log("Hello, world!");

This is a small but handy feature, especially for those who build CLI tools in Node.js.

3. Symbols as WeakMap Keys

Previously, only objects could be used as keys in WeakMap, but ES2023 changes that by allowing symbols as well.

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION');

This enhancement makes WeakMap even more versatile, particularly when you need unique, collision-free keys that symbols provide.

4. Array Grouping by Method

Grouping array elements has become a lot easier with the new group method.

group: This method organizes your array into an object, with keys determined by a function you provide and values as arrays of elements that match each key.

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

This feature is perfect for scenarios where you need to categorize data quickly and efficiently.

5. `Array.prototype.toSorted` and `Array.prototype.toReversed()`

Sorting arrays just got a lot cleaner with toSorted. Unlike sort, which alters the original array, toSorted returns a new sorted array and toReversed returns a new reversed array, leaving the original untouched.

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

This method is a great fit for when you need to preserve the original array while working with a sorted version.

6. `Array.prototype.with`

The with method provides a simple way to create a new array by replacing an element at a specific index.

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

This method is perfect when you want to update an array immutably, making it easier to manage state in functional programming patterns.

7. `Promise.withResolvers`

Managing promises has never been easier, thanks to Promise.withResolvers. This new method lets you create a promise along with its resolve and reject functions in one go.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

It’s a neat and concise way to handle asynchronous operations, especially when you need to control the promise’s outcome from outside its constructor.

Browser Support for ES2023

ES2023, the latest version of JavaScript, is pretty new since it was just finished in 2023. This means not all web browsers can use its new features yet, but they're starting to:

Firefox, Chrome and Edge do support some features Array.prototype.findLast() and Array.prototype.findLastIndex()
Safari doesn't support any of these features yet.
Node.js
- Node.js version 19.0 and up can use:
  - Array.prototype.findLast()
  - Array.prototype.findLastIndex() It's expected to add more ES2023 features in future updates.

Transpilers:
To use the new ES2023 features now, developers can turn ES2023 code into an older version that more browsers understand, using tools called transpilers, like Babel. This way, you can start using the new stuff even if browsers aren't ready for it yet.

Right now, the support for ES2023 is still growing. Big browsers like Firefox and Chrome are beginning to include some of its features. For details on what's supported where, you can check out Can I Use. Using transpilers helps make these new features usable today, while we wait for browsers to catch up over the coming years.

Conclusion

ES2023 brings a range of new features that make JavaScript more powerful and easier to work with. From enhanced array methods to better promise handling, these updates are all about making your code cleaner and more efficient. As JavaScript continues to grow and evolve, staying up-to-date with these changes ensures you’re always getting the most out of the language.

References:

Building Accessible React Applications

Manjush — Sun, 25 Aug 2024 16:30:00 +0000

In today's digital landscape, accessibility is not just a buzzword but a necessity. Building accessible web applications ensures that all users, including those with disabilities, can interact with your content effectively. React, one of the most popular JavaScript libraries for building user interfaces, offers several tools and best practices to help developers create accessible applications. This article explores key strategies and techniques for building accessible React applications.

1. Understanding Web Accessibility

Web accessibility means designing and developing websites and applications that can be used by people with various disabilities, including visual, auditory, motor, and cognitive impairments. The Web Content Accessibility Guidelines (WCAG) provide a set of standards that developers should follow to ensure their content is accessible to all users.

2. Use Semantic HTML

The foundation of any accessible web application is semantic HTML. Elements like <header>, <nav>, <main>, <article>, and <footer> provide meaningful structure to your content, making it easier for screen readers to interpret.

In React, you should always strive to use semantic elements instead of generic

and tags. For example, use for clickable actions instead of with an onClick event.

return <>
    <div onClick={handleClick}>Click me</div>

    {/* More accessible */}
    <button onClick={handleClick}>Click me</button>
</>

3. Manage Focus Properly

Proper focus management is crucial for keyboard navigation and screen reader users. React provides several ways to manage focus, such as the autoFocus attribute and the useRef hook for manually setting focus.

import { useRef, useEffect } from 'react';

function AccessibleForm() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Set focus when component mounts
  }, []);

  return <input ref={inputRef} type="text" />;
}

Ensure that focus is moved to appropriate elements during navigation, especially when implementing modal dialogs, dynamic content, or route changes.

4. Use ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes can enhance the accessibility of non-semantic HTML elements. React supports all ARIA attributes, allowing you to improve accessibility without altering the visual design.

For instance, use role="alert" to announce important messages to screen readers or aria-live="polite" for updating live regions.

function Alert({ message }) {
  return <div role="alert">{message}</div>;
}

However, ARIA should not be used as a substitute for semantic HTML. It’s best used to fill gaps where native elements cannot provide the necessary accessibility features.

5. Accessible Forms

Forms are a critical part of web applications, and making them accessible is essential. Ensure that each form control has a corresponding label. The label element should be explicitly associated with its control using the htmlFor attribute, or you can nest the control within the label.

<label htmlFor="username">Username:</label>
<input id="username" type="text" />

Use aria-describedby for additional context or instructions related to a form control.

<input id="email" type="email" aria-describedby="emailHelp" />
<small id="emailHelp">We'll never share your email.</small>

6. Handling Dynamic Content

React applications often involve dynamic content updates. It’s important to ensure these updates are accessible to all users. Use aria-live regions to announce changes that are not automatically focused, such as loading indicators or updates to a notification area.

<div aria-live="polite">
  {isLoading ? 'Loading...' : 'Content loaded'}
</div>

For more complex state management, consider integrating with a tool like Redux or Context API to manage and communicate state changes effectively.

7. Test for Accessibility

Testing is a vital part of ensuring accessibility. Use tools like axe-core, Lighthouse, or React Testing Library to automate accessibility checks. These tools can identify common accessibility issues such as missing labels, color contrast issues, and improper ARIA usage.

Additionally, manually test your application using keyboard navigation and screen readers like NVDA, JAWS, or VoiceOver. This helps you catch issues that automated tools might miss.

8. Color Contrast and Visual Design

Ensure that your color scheme meets WCAG color contrast standards. Use tools like Color Contrast Checker or Accessible Colors to verify that your text is readable against its background.

In React, you can dynamically adjust color contrast by implementing CSS variables or using a library like styled-components.

const Button = styled.button`
  background-color: var(--primary-color);
  color: var(--text-color);
  &:hover {
    background-color: var(--primary-hover);
  }
`;

9. Accessible Routing

When using React Router or other routing libraries, ensure that the focus is appropriately managed when routes change. This can be achieved by setting focus to the main content area after a navigation event.


import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useFocusOnRouteChange() {
  const location = useLocation();

  useEffect(() => {
    document.getElementById('main-content').focus();
  }, [location]);
}

This ensures that screen reader users are informed of the context change and can navigate the new content easily.

10. Documentation and Collaboration

Finally, building accessible applications is a team effort. Ensure that all team members, including designers, developers, and QA testers, are aware of accessibility best practices. Document your accessibility standards and include them in your code reviews to ensure ongoing compliance.

How to test React accessibility

When it comes to checking and testing accessibility in your React app, there are recommended tools available.

In your text editor, you can install linters such as eslint-plugin-jsx-a11y to catch any accessibility concerns as you are writing the JSX components of your React App.
Later in development, the developer console in your browser combined with the WAVE Web Accessibility Evaluation Tools or aXe DevTools project can help diagnose and fix any issues.
You can also manually test your app in phases with screen readers such as NVDA and the JAWS screen reader.

NOTE: In essence, catch accessibility issues early by using linters, and verify fixed accessibility issues using both the dev console in your browser and aXe DevTools for a faster and more efficient debugging process.

Conclusion

Building accessible React applications requires careful consideration of both code and design. By following these best practices—using semantic HTML, managing focus, leveraging ARIA attributes, and testing thoroughly—you can create applications that are usable by everyone. Remember, accessibility is not just a feature but a fundamental aspect of web development that benefits all users.

Making accessibility a priority not only improves user experience but also expands the reach of your application to a wider audience. Start small, implement these strategies, and continuously refine your approach to accessibility in React.

References:

Error Boundaries and Error Handling in ReactJS

Manjush — Sun, 18 Aug 2024 07:30:00 +0000

Introduction

Error handling is a crucial aspect of building robust and user-friendly web applications. In ReactJS, handling errors gracefully ensures that your application remains functional even when something goes wrong. One of the powerful features React provides for this purpose is Error Boundaries. In this article, we'll explore what Error Boundaries are, how to implement them, and best practices for error handling in React applications.

Understanding Error Boundaries

Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. They provide a way to gracefully handle errors that occur during rendering, in lifecycle methods, and in constructors of the whole tree below them.

When to Use Error Boundaries

Error Boundaries are particularly useful in the following scenarios:

When you want to catch errors that occur during rendering.
When handling errors in lifecycle methods.
When errors occur in the constructors of the components.

Implementing Error Boundaries

To create an Error Boundary, you need to define a class component that implements either or both of the following lifecycle methods:

static getDerivedStateFromError(error)
componentDidCatch(error, info)

Here’s an example of how to implement an Error Boundary:

// Javascript

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Error occurred:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong. Try refreshing the page..</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

// Typescript

import React, { Component, ErrorInfo } from 'react';
import errorBoundryStyles from './errorBoundryStyles';

interface ErrorBoundryProps {
  children: React.ReactNode;
  fallBackMessage?: string;
  hasError?: boolean;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundryProps, State> {

  constructor(props: ErrorBoundryProps) {
    super(props);
    this.state = { hasError: this.props.hasError || false };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(`ErrorBoundary caught an error: ${JSON.stringify(errorInfo)}`);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div className={errorBoundryStyles.errorBoundryConainer}>
        <h1>{this.props.fallBackMessage || "Looks like something went wrong. Please try again or contact support."}</h1>
      </div>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Using Error Boundaries in Your Application

To use the Error Boundary component, simply wrap it around any component that you suspect might throw an error:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';

function App() {
  return (
    <ErrorBoundary>
      <SomeComponent />
    </ErrorBoundary>
  );
}

export default App;

Best Practices for Error Handling

Granular Error Boundaries: Instead of wrapping your entire application with a single Error Boundary, use multiple Error Boundaries for different parts of your application. This ensures that an error in one part of your app doesn’t break the entire UI.
Logging Errors: Always log errors to an external service for monitoring and debugging purposes. Services like Sentry, LogRocket, and New Relic can be integrated to capture error details and user sessions.
User-Friendly Fallback UI: Provide meaningful feedback to users when an error occurs. A simple "Something went wrong" message might not be enough. Consider adding retry buttons, links to support, or detailed error messages that can help users understand the issue.
Handling Asynchronous Errors: Remember that Error Boundaries do not catch errors inside event handlers, async functions, or errors thrown in the global scope. Use traditional try-catch blocks or error handling libraries for these cases.

function handleClick = async () => {
  try {
    // some async operation
  } catch (error) {
    console.error("Error occurred:", error);
  }
};

Conclusion

Error Boundaries are a powerful feature in React that helps you handle errors gracefully and maintain a smooth user experience. By implementing Error Boundaries and following best practices for error handling, you can build more robust and resilient React applications. Always remember to log errors for debugging and provide helpful feedback to users when something goes wrong.

References:

React Docs - Catching rendering errors with an error boundary

The Art of Writing Clean Functions: Clean Code Practices

Manjush — Sun, 11 Aug 2024 06:30:00 +0000

Writing clean and efficient code is an essential skill for any programmer. Clean code is not only easier to understand and maintain but also reduces the likelihood of bugs and errors. One of the fundamental aspects of clean code is writing clean functions. In this article, we'll explore key practices to help you master the art of writing clean functions.

1. Single Responsibility Principle

A function should do one thing and do it well. This is known as the Single Responsibility Principle (SRP). When a function has a single responsibility, it is easier to understand, test, and maintain.

Example:

// Bad example: A function doing multiple tasks
function processOrder(order) {
    validateOrder(order);
    processPayment(order);
    sendConfirmationEmail(order);
}

// Good example: Functions with single responsibilities
function validateOrder(order) {
    // validation logic
}

function processPayment(order) {
    // payment processing logic
}

function sendConfirmationEmail(order) {
    // email sending logic
}

2. Meaningful Names

Function names should be descriptive and convey the purpose of the function. Avoid using vague names like doStuff or processData. Instead, use names that clearly describe what the function does.

Example:

// Bad example
function calc(x, y) {
    return x * y;
}

// Good example
function calculateArea(width, height) {
    return width * height;
}

3. Small Functions

Keep functions small. Ideally, a function should fit within 20-30 lines of code. Small functions are easier to read, understand, and debug.

Example:

// Bad example: Large function
function processLargeDataset(dataset) {
    // many lines of code
}

// Good example: Small functions
function loadData(filePath) {
    // load data logic
}

function cleanData(data) {
    // data cleaning logic
}

function analyzeData(cleanedData) {
    // data analysis logic
}

4. Avoid Side Effects

Functions should avoid side effects, meaning they should not modify any state or data outside their scope. Functions with side effects can lead to unpredictable behavior and are harder to debug.

Example:

// Bad example: Function with side effects
let globalCounter = 0;

function incrementCounter() {
    globalCounter += 1;
}

// Good example: Function without side effects
function increment(value) {
    return value + 1;
}

5. Use Default Arguments

Default arguments can make your functions more flexible and easier to use. They provide default values for parameters, reducing the need for conditional logic within the function.

Example:

// Bad example
function connectToDatabase(host, port) {
    port = port || 3306;
    // connection logic
}

// Good example
function connectToDatabase(host, port = 3306) {
    // connection logic
}

6. Limit the Number of Parameters

A function should ideally have no more than three parameters. If a function requires more parameters, consider grouping related parameters into an object or using a configuration object.

Example:

// Bad example: Too many parameters
function createUser(firstName, lastName, email, age, address, phone) {
    // user creation logic
}

// Good example: Using a configuration object
function createUser(config) {
    const { firstName, lastName, email, age, address, phone } = config;
    // user creation logic
}

const userConfig = {
    firstName: "John",
    lastName: "Doe",
    email: "john.doe@example.com",
    age: 30,
    address: "123 Main St",
    phone: "555-1234"
};

createUser(userConfig);

7. Consistent Formatting

Consistent formatting makes your code more readable. Use a consistent style for indentation, spacing, and brace placement. Adhering to a style guide like Airbnb's JavaScript Style Guide or Google's JavaScript Style Guide can help maintain consistency.

Example:

// Bad example: Inconsistent formatting
function add(x,y) {return x+y;}

function subtract ( x, y ){
    return x - y;
}

// Good example: Consistent formatting
function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

8. Write Comments and Documentation

While clean code should be self-explanatory, comments and documentation can help clarify the intent of complex functions. Write comments to explain why certain decisions were made, and provide documentation for your functions.

Example:

/**
 * Calculate the discounted price.
 *
 * @param {number} price - Original price of the item.
 * @param {number} discountRate - Discount rate as a percentage.
 * @returns {number} - Discounted price.
 */
function calculateDiscount(price, discountRate) {
    return price * (1 - discountRate / 100);
}

9. Clean Organization (Spacing and Returns)

Maintain clean and consistent formatting. Use proper spacing, indentation, and line breaks to enhance readability. A well-organized structure makes the code more accessible and visually appealing.

// Bad example
function messyCode() {
//No spacing, inconsistent indentation
const result = doSomething();return result;
}

// Good example
function cleanCode() {
    // Proper spacing and indentation
    const result = doSomething();
    return result;
}

Conclusion

Writing clean functions is a cornerstone of clean code. By following these practices, you can create functions that are easier to read, maintain, and debug. Remember, clean code is not just about making your code work but making it work well and ensuring it can be easily understood and modified by others.

Happy coding!

Beginner's Guide: Creating a Real-Time Chat App with Next.js and WebSockets

Manjush — Sun, 04 Aug 2024 06:31:00 +0000

Introduction:

In this guide, we'll explore how to create a basic real-time chat application using Next.js and WebSockets. Real-time capabilities are essential for contemporary applications, and the combination of Next.js with WebSockets offers a powerful solution for building interactive and collaborative experiences.

Prerequisites:

Before we begin, ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from nodejs.org.

Setting Up a New Next.js Project:

Create a new Next.js project by running the following commands in your terminal:

npx create-next-app real-time-chat-app
cd real-time-chat-app

Install additional dependencies for managing WebSocket connections:

npm install socket.io-client socket.io

Creating the WebSocket Server

Create a WebSocket server that will handle real-time communication. Create a new folder named server in the project root directory and create a server.js file inside it:

// server/server.js
const http = require('http');
const { Server } = require('socket.io');

const server = http.createServer((req, res) => {
  // Handle HTTP requests if needed
});
const io = new Server(server);

io.on('connection', (socket) => {
  console.log('User connected');

  // Handle chat messages
  socket.on('chat message', (message) => {
    io.emit('chat message', message); // Broadcast the message to all connected clients
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3001, () => {
  console.log('WebSocket server listening on port 3001');
});

Creating the Chat Interface

Update main page with following code in Next.js app:

// pages/index.js
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3001'); // Replace with your server URL

const Index = () => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    // Listen for incoming messages
    socket.on('chat message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
  }, []);

  const sendMessage = () => {
    socket.emit('chat message', newMessage);
    setNewMessage('');
  };

  return (
    <div>
      <h1>Real-Time Chat</h1>
      <div>
        {messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default Index;

Running the Application

Start your Next.js application and the WebSocket server:

npm run dev

Your real-time chat application should now be running at http://localhost:3000. Open it in multiple browser tabs or devices to see real-time messages in action.

Conclusion

Congratulations! You’ve built a real-time chat application using Next.js and WebSockets from scratch. This is a fundamental example, but you can extend it by adding user authentication, message history, and more features to create a full-fledged chat application.

Forem: Manjush

From Spec to Deploy: Building an Expense Tracker with SpecKit

The "why"

Why SpecKit Works

The 5-Step Workflow

My Development Journey

Step 1: Constitution

Step 2: Specification

Step 3: Tech Planning

Step 4: Task Execution

What I Shipped

Features Built

Technical Results

Why This Approach Won

Challenges Faced

Try SpecKit Yourself

Links & Resources

GitKraken MCP: Supercharging Your AI Development Workflow

Introduction

What Makes GitKraken MCP Special?

The Problem It Solves

Why This Matters

Getting Started: Setup and Configuration

Prerequisites

VS Code Configuration

Real world workflows That helped in development process

1. Smart Branch Cleanup

2. Intelligent Code Review Preparation

3. Cross-Repository Dependency Management

4. Issue-Driven Development

Safety First: Essential Precautions When Using GitKraken MCP

The Reality Check: AI Agents Can Make Mistakes

Essential Safety Practices

1. Always Review Before Destructive Operations

2. Use Staging Areas and Dry Runs

3. Backup Critical Work

4. Start Small and Test

5. Implement Branch Protection

Recommended Workflow Patterns

The "Show First, Act Later" Pattern

The "Staged Confirmation" Pattern

Recovery and Rollback Strategies

Know Your Escape Routes

Set Up Git Aliases for Quick Recovery

Repository-Specific Safeguards

For Production Repositories

For Shared Team Repositories

Red Flags: When to Stop and Think

Building Trust Gradually

Advanced Features and Technical Insights

GitKraken Workspaces Integration

Multi-Platform Issue Management

Performance Considerations

Troubleshooting Common Issues

Authentication Problems

MCP Server Connection Issues

Performance Optimization

Safety-Related Issues

Accidental Destructive Operations

AI Agent Misunderstanding Context

Preventing Future Issues

Conclusion

References

JavaScript's Temporal API: A Better Way to Handle Dates & Times

Introduction

Why Temporal?

1. Getting the Current Date

Using Date:

Using Temporal:

2. Getting the Current Date & Time

Date:

Temporal:

3. Adding or Subtracting Time

Date (mutates the original object):

Temporal (immutable and predictable):

4. Working with Time Zones

Date (clunky and confusing):

Temporal (straightforward):

5. Calculating Durations

Date:

Using `Date`:

Using `Temporal`:

`Date`:

`Temporal`:

`Date` (mutates the original object):

`Temporal` (immutable and predictable):

`Date` (clunky and confusing):

`Temporal` (straightforward):

`Date`:

`Temporal`:

`Date` silently fails:

`Temporal` throws a clear error: