DEV Community: Hasan Zohdy

One AGENTS.md for Every Coding Agent: Auto-Derive CLAUDE.md, GEMINI.md & Copilot Instructions

Hasan Zohdy — Fri, 29 May 2026 20:49:29 +0000

Part 1 of a 2-part series. This post covers the whole tool and the "one source of truth" problem. Part 2 goes deep on the most novel piece — letting your npm packages ship agent skills. (dev.to shows the series navigation once Part 2 is published.)

TL;DR

Write project instructions once in AGENTS.md → agent-kit derives CLAUDE.md, .gemini/GEMINI.md, .github/copilot-instructions.md, and CONVENTIONS.md. No more drift.
It mirrors skills from your installed packages and your project into every agent's directory (.claude/skills/, .cursor/skills/, …).
Keep nested skills/ folders Claude Code can't read natively — agent-kit flattens them into the layout it requires on sync.
Start: npm i -D @mongez/agent-kit && npx agent-kit init

The problem: every agent wants its own file

AI coding tools are converging on how they work — but not on where they read project instructions. The result is fragmentation.

One agent reads AGENTS.md.

Another expects CLAUDE.md.

GitHub Copilot wants .github/copilot-instructions.md.

Gemini CLI looks for .gemini/GEMINI.md.

Aider uses CONVENTIONS.md.

AGENTS.md is emerging as the open standard — Codex, Cursor, Amp, OpenCode, and Goose read it natively — but the holdouts above each still want their own file at their own path.

So if your team uses more than one agent, you're maintaining several near-identical copies of the same instructions. The moment someone edits one and not the others, they drift apart — and your agents start disagreeing about your own conventions inside the same project.

The skills story has the same shape: reusable SKILL.md files are great, but you end up hand-copying their folders into .claude/skills/, .cursor/skills/, .codex/skills/… and hoping nothing collides. (More on skills — plus a folder-organization win — below.)

The fix: derive everything from one file

@mongez/agent-kit is a small CLI + TypeScript library that closes both gaps:

Derive every per-agent instructions file from a single AGENTS.md.
Sync skills out of your installed node_modules packages into each agent's skills directory — with flat, collision-proof folder names and a safety marker so your hand-written skills are never clobbered.

              AGENTS.md
                  │
                  ▼
          @mongez/agent-kit
                  │
   ┌──────────────┼───────────────┬────────────────────┐
   ▼              ▼               ▼                    ▼
CLAUDE.md   .gemini/GEMINI.md   .github/...md     CONVENTIONS.md

One source of truth. Every agent stays in sync. No copy-pasting, no drift.

npm install -D @mongez/agent-kit

The npm package is @mongez/agent-kit, but the CLI binary is just agent-kit. You install with the scope, you invoke without it.

60-second start

npx agent-kit init

It outputs:

$ npx agent-kit init
✔ Created AGENTS.md
✔ Derived 4 file(s) (4 changed): claude, gemini, copilot, aider

This writes a starter AGENTS.md at your project root (only if one doesn't already exist) and derives every per-tool file from it — CLAUDE.md, .gemini/GEMINI.md, .github/copilot-instructions.md, CONVENTIONS.md.

Then wire it into postinstall so it stays fresh forever:

{
  "scripts": {
    "postinstall": "agent-kit sync"
  }
}

From now on, every install re-derives the per-tool files from AGENTS.md and mirrors skills from your installed packages into .claude/skills/. Edit AGENTS.md, run npx agent-kit sync, and every supported agent picks up the change.

A killer feature: nested skill folders

This one quietly fixes a real annoyance. Claude Code only discovers skills at the top level of .claude/skills/ — no nested folders. So as your skill set grows, everything piles into one flat, unsorted heap. (People hit this constantly and assume nesting just isn't possible.)

agent-kit removes the limit. Keep a single skills/ folder at your project root, organized into category folders as deep as you like:

skills/                      →     .claude/skills/
├── backend/                          backend-auth/
│   ├── auth/SKILL.md                 backend-jobs/
│   └── jobs/SKILL.md                 frontend-forms/
├── frontend/                         deployment/
│   └── forms/SKILL.md
└── deployment/SKILL.md

On agent-kit sync, it walks the tree and flattens each path into a unique top-level name (backend/auth → backend-auth). You organize for humans; Claude gets the flat layout it requires. No manifest, no registration — a folder with a SKILL.md is a skill. Part 2 goes deeper on the naming and safety rules.

The part nobody else does

Here's the idea worth pausing on: agent-kit sync walks your node_modules/ for any package that ships a skills/ folder, and mirrors those skills into your agent's directory automatically.

That means a library author can bundle agent skills with their package. You npm install the dependency, and your coding agent immediately knows how to use it — no docs-spelunking, no copy-paste. A few @mongez/* packages already do this today.

That's a big enough idea that it gets its own post — Part 2 of this series — including the safety guarantees (a .agent-kit-managed sentinel so your own skills are never overwritten) and the collision-proof flat naming.

Pick your agent

agent-kit sync --target accepts claude, cursor, codex, copilot, kiro, antigravity, opencode, amp, goose. The default is claude only — writing into every agent's skills directory on a project that uses none of them would just litter your tree.

# Default — claude
npx agent-kit sync

# Multiple agents on the same project
npx agent-kit sync --target claude,cursor,codex

# Derive-only agents (Gemini, Aider) — skip the skills export
npx agent-kit sync --derive-only

Or pin it in package.json so contributors don't have to remember:

{
  "scripts": { "postinstall": "agent-kit sync" },
  "agentKit": { "targets": ["claude", "cursor"] }
}

The derive step always emits all four derived files regardless of targets — the array gates only the skills export.

With packages in node_modules that ship skills, agent-kit sync prints something like:

$ npx agent-kit sync
✔ Derived 4 file(s) (0 changed): claude, gemini, copilot, aider
✔ Exported 24 skill(s) from 3 package(s) to: claude
[agent-kit 12:39:25 AM] ℹ Claude Code picks up new skills on the next prompt. Other agents (Cursor, Copilot, Codex, Gemini, Kiro, Antigravity) may need a window or session reload.

Why it stays out of your way

Stateless — every sync reads disk truth. No lockfile, no cache, no drift between runs.
Idempotent — re-running when nothing changed is a no-op; files that already match aren't rewritten.
TypeScript-first — the CLI is a thin wrapper over deriveAll, syncSkills, findProjectRoot, and friends, all fully typed.
MIT licensed, dependency-light.

Try it

npm install -D @mongez/agent-kit
npx agent-kit init

GitHub: https://github.com/hassanzohdy/agent-kit
Docs: https://mongez.js.org/agent-kit/overview/
npm: https://www.npmjs.com/package/@mongez/agent-kit

Part 2 goes deep on skills — organizing your own in nested folders, and shipping them inside an npm package so it teaches the agent how to use itself. Feedback and feature requests welcome.

If it saved you some boilerplate, a ⭐ on GitHub helps others find it.

Warlock.js From Nodejs Course Into a fine grained framework

Hasan Zohdy — Thu, 20 Jun 2024 14:35:44 +0000

Introduction

It all started in the beginnings of 2023, where I started a new course here on dev Titled with: Nodejs Course 2023 that we start building the entire project from scratch.

Every single file there were written during the articles writing time, after achieving a very good progress, "that would be enough" I said to myself for the course.

But it didn't stop there, I started working on imporving the source code by using it in a real project, which was actually my own project mentoor.io that's were things were taken to the next level.

After spending hundrueds of hours on developing the code, It has became more sable, rich with features and blazingly fast (thanks to Fastify) for handling http requests, at that point I decided to move on from being just a good project core to use to be a fully functional framework.

Warlock.js Framework 🧙‍♂️

Warlock.js is a nodejs framework that's built on top of Fastify, it's designed to be a very simple, fast and easy to use framework, It's main use is for building from small to large API applications.

Features 🌟

Blazing fast performance 🚀
Hot Module Reload (MHR) for an incredibly fast development experience 🔄
Module-Based Architecture 📂
Entry Point (main.ts) for each module 🗂️
Event-Driven Architecture 📅
Auto Import for Events, Routes, Localization, and Configurations ⚙️
Comprehensive request validation ✔️
Mail Support with React Components 📧
+6 Cache Drivers, including Redis 🗄️
Grouped Routes by prefix or middleware 🛤️
Internationalization Support (i18n) 🌍
File Uploads with image compression and resizing 📸
AWS Upload Support ☁️
Postman Generator for API Documentation 📜
Repositories using the Repository Design Pattern for managing database models 🗃️
RESTful API support with a single base class for each module 🌐
User Management and Auth using JWT 🔐
Model Data Mapping when sending responses using Outputs 🗺️
Full Support for MongoDB backed by Cascade
VS Code Extension for generating modules, request handlers, response outputs, database models, RESTful classes, and repositories 🛠️
Unit Testing Support for testing application API endpoints and modules 🧪
Auto Generate incremental id for each model 🆔

And much more, you can check the full documentation here 📚.

Getting Started 🎉

To start a new project, just run the following command:

npx create-warlock

Then follow the instructions, and you will have a new project ready to go.

Project Structure 🏗

Now let's have a quick look at the project structure:

├── src
│   ├── app
│   │   ├── home
│   │   │   ├── controllers
│   │   │   ├── routes.ts
│   │   ├── uploads
│   │   │   ├── routes.ts
│   │   ├── users
│   │   │   ├── controllers
│   │   │   │   ├── auth
│   │   │   │   │   ├── social
│   │   │   │   ├── profile
│   │   │   │   ├── restful-users.ts
│   │   │   ├── events
│   │   │   ├── mail
│   │   │   ├── models
│   │   │   │   ├── user
│   │   │   ├── output
│   │   │   ├── repositories
│   │   │   ├── utils
│   │   │   ├── validation
│   │   │   ├── routes.ts
│   │   ├── utils
│   │   ├── main.ts
│   ├── config
│   │   ├── app.ts
│   │   ├── auth.ts
│   │   ├── cache.ts
│   │   ├── cors.ts
│   │   ├── database.ts
│   │   ├── http.ts
│   │   ├── index.ts
│   │   ├── mail.ts
│   │   ├── upload.ts
│   │   ├── validation.ts
│   ├── main.ts
├── storage
├── .env
├── warlock.config.ts

Auto Import Routes 🚗

So basically, the app is divided into modules, each module has its own folder, and inside it, there are controllers, routes, events, mail, models, output, repositories, utils, and validation.

The routes.ts file is a special file for each module, it is auto imported and called directly, so all you need is to define your routes there.

Example

Let's see an example of a simple route:

// src/app/categories/routes.ts
import { router } from "@warlock.js/core";
import { getCategories } from "./controllers/get-categories";

router.get("/categories", getCategories);

Here we defined a simple route that listens to GET /categories and calls the getCategories controller.

Let's create our request handler:

// src/app/categories/controllers/get-categories.ts
import {
  type RequestHandler,
  type Request,
  type Response,
} from "@warlock.js/core";
import { categoriesRepository } from "./../repositories/categories-repository";

export const getCategories: RequestHandler = async (
  request: Request,
  response: Response
) => {
  const { documents: categories, paginationInfo } =
    await categoriesRepository.listActive(request.all());

  return response.send({
    categories,
    paginationInfo,
  });
};

So basically we called the repository to list our active categories where isActive is set to true

You can change it in the repository settings to whatever field/value you use in database.

Request Validation

Validation is as much as simple as it should be, you can define your validation schema in the tail of the request handler

// src/app/categories/controllers/add-category.ts

import {
  type RequestHandler,
  type Request,
  type Response,
  ValidationSchema,
} from "@warlock.js/core";

import { categoriesRepository } from "./../repositories/categories-repository";

export const addCategory: RequestHandler = async (
  request: Request,
  response: Response
) => {
  // using request.validated will return the validated data only
  const { name, description } = request.validated();

  const category = await categoriesRepository.create({
    name,
    description,
  });

  return response.send(category);
};

addCategory.validation = {
  rules: new ValidationSchema({
    name: ["required", "string", "minLength:6"],
    description: ["required", "string"],
  }),
};

If the validation fails on any rule, it won't reach the controller, and it will return a validation error response.

A look into the database model

So database models are easy to work with, just define the model, cast the data as it should be there and that's it!

// src/app/categories/models/category.ts
import { type Casts, Model } from "@warlock.js/cascade";

export class Category extends Model {
  public static collection = "categories";

  protected casts: Casts = {
    name: "string",
    description: "string",
    isActive: "boolean",
  };
}

You don't need to define id as the model will auto generate one for each new saved document.

Data Syncing

One of the powered features of Cascade Is Syncing Models, what does that mean?

Consider we have an author for a post, that author's data is changed at some point, in that case we need to update the post's author data as well, and that's what syncing models do.

// src/app/posts/models/post.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { User } from "app/users/models/user";

export class Post extends Model {
  public static collection = "posts";

  protected casts: Casts = {
    title: "string",
    content: "string",
    author: User,
  };
}

Now let's define our User model, that's where the magic happens:

// src/app/users/models/user.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { Post } from "app/posts/models/post";

export class User extends Model {
  public static collection = "users";

  /**
   * Sync the list of the given model when the user data is changed
   */
  public syncWith = [Post.sync("auth")];

  protected casts: Casts = {
    name: "string",
    email: "string",
  };
}

So basically, here we are telling the model, when the user's info is updated, find all posts for that author (user) and update the author field with the new data.

We can also, conditionally tell the model when to sync the data, for example, we can sync the data only when the user's name is changed:

// src/app/users/models/user.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { Post } from "app/posts/models/post";

export class User extends Model {
  public static collection = "users";

  /**
   * Sync the list of the given model when the user data is changed
   */
  public syncWith = [Post.sync("auth").updateWhenChange(["name"])];

  protected casts: Casts = {
    name: "string",
    email: "string",
  };
}

Using updateWhenChange will only update the post's author when the user's name is changed.

Models Relationships

Now let's go to the relationships, assume we are going to fetch the post's author when we fetch the post, that's where the relationships come in.

// src/app/posts/models/post.ts

import { type Casts, Model } from "@warlock.js/cascade";
import { User } from "app/users/models/user";

export class Post extends Model {
  public static collection = "posts";

  public static relations = {
    author: User.joinable("author.id").single(),
  };

  protected casts: Casts = {
    title: "string",
    content: "string",
  };
}

We told the model it is a single relation, and it's joinable by the author.id field.

Now when we fetch the post, the author's data will be fetched as well when calling with method.

const post = await Post.aggregate().where("id", 1).with("author").first();

const authorName = post.get("author.name");

We may also make the relation as a list, for example, if we have a post that has many comments:

// src/app/posts/models/post.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { Comment } from "app/comments/models/comment";

export class Post extends Model {
  public static collection = "posts";

  public static relations = {
    comments: Comment.joinable("post.id"),
  };

  protected casts: Casts = {
    title: "string",
    content: "string",
  };
}

We can also filter comments by passing a query to the with method:

const post = await Post.aggregate()
  .where("id", 1)
  .with("comments", (query) => {
    query.where("isActive", true);
  })
  .first();

This could be useful to filter the data based on the relation, maybe to get comments only for current user,

import { useRequestStore } from "@warlock.js/core";

const post = await Post.aggregate()
  .where("id", 1)
  .with("comments", (query) => {
    const { user } = useRequestStore();
    query.where("createdBy", user.id);
  })
  .first();

Or even we can do it in the relation itself:

// src/app/posts/models/post.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { Comment } from "app/comments/models/comment";

export class Post extends Model {
  public static collection = "posts";

  public static relations = {
    comments: Comment.joinable("post.id")
      .where("isActive", true)
      .select("id", "createdBy", "comment"),
  };

  protected casts: Casts = {
    title: "string",
    content: "string",
  };
}

The data will be return as an array in comments field, to change the return field name, you can use the as method:

// src/app/posts/models/post.ts
import { type Casts, Model } from "@warlock.js/cascade";
import { Comment } from "app/comments/models/comment";

export class Post extends Model {
  public static collection = "posts";

  public static relations = {
    comments: Comment.joinable("post.id")
      .where("isActive", true)
      .select("id", "createdBy", "comment")
      .as("postComments"),
  };

  protected casts: Casts = {
    title: "string",
    content: "string",
  };
}

To return the comment in a model, call inModel() method:

  public static relations = {
    comments: Comment.joinable("post.id").where("isActive", true).select('id', 'createdBy', 'comment').inModel(),
  };

Conclusion 🎉

That's it for now, I hope you enjoyed the article, and I hope you will enjoy using the framework as well.

I'll post more articles about the framework, and how to use it in real-world applications.

Thank you for reading, and have a great day! 🌟

Dependency Inversion Principle (DIP) in Typescript

Hasan Zohdy — Wed, 18 Oct 2023 09:58:44 +0000

Introduction

Dependency Inversion Principle (DIP) is the last principle in S.O.L.I.D principles.

The principle states that: a high level code should depend on abstractions, not on concretions.

High-level modules contain application-specific business logic. They are responsible for controlling and orchestrating the application's behavior.
Low-level modules deal with implementation details and services that the high-level modules use. They handle tasks like data access, I/O operations, and external service integration.

DIP encourages the use of abstract classes or interfaces to define the contracts between high-level and low-level modules. High-level modules depend on abstractions (interfaces or abstract classes) rather than concrete implementations. This allows for flexibility and the ability to swap out implementations without modifying high-level code.

What is an abstraction

An abstraction is a way to hide the implementation details of a class and show only the functionalities to the users either by using an interface or an abstract class.

What is a concretion

A concrete class is a class that implements an abstraction.

So we can conclude that an interface is called abstraction, a class that implements an interface is called concrete class.

Why we need to depend on abstractions

In nutshell, we need to decuple the high level code and level code from concrete classes, why would we do that?

Well, to make the code more flexible and easy to maintain.

How Dependency Inversion makes the code flexible

Let's take an example, we'are developing an e-commerce application, and we have a cart class that needs a payment method to process the payment.

Let's say we will use a CreditCardPayment class.

import CreditCardPayment from './payments/credit-card-payment';

class Cart {
  private payment: CreditCardPayment;
  public constructor() {
    this.payment = new CreditCardPayment();
  }
  // ...rest of the code
}

This will work normally, but what if we decided to add another payment method, let's say PayPalPayment class.

In this case we'll have to update any code that creates the credit card payment class and replace it with paypal payment class.

How to solve this problem

We can solve this problem by depending on an abstraction instead of a concrete class.

interface PaymentMethod {
  pay(): void;
}

class CreditCardPayment implements PaymentMethod {
  public pay(): void {
    console.log('Paying with credit card');
  }
}

class PayPalPayment implements PaymentMethod {
  public pay(): void {
    console.log('Paying with paypal');
  }
}

Now we can depend on the PaymentMethod interface instead of the concrete classes.

import PaymentMethod from './payment-method';

class Cart {
  public constructor(private payment: PaymentMethod) {
    // 
  }
}

Now we can pass any class that implements the PaymentMethod interface.

import Cart from './cart';
import CreditCardPayment from './payments/credit-card-payment';

const cart = new Cart(new CreditCardPayment());

Here we made two things:

We decoupled the high level code from the low level code by depending on an abstraction instead of a concrete class.
We passed created a new instance of payment outside the cart class and passed it to the class, this is also called dependency injection and makes it Decoupled

What is dependency injection

Dependency Injection is a design pattern that is primarily a way to implement Dependency Inversion Principle.

The idea is simple, instead of creating the dependencies inside the class, we create them outside the class and pass them to the class.

Why we need to use dependency injection

For many reasons actually:

Decoupling the high level code from the low level code.
Testing the class will be easier, we can pass a mock class instead of the real class.
Reusability we can reuse the class with different dependencies.
Flexibility we can change the dependencies without changing the class.

How to implement dependency injection

There are many ways to implement dependency injection, we can use a constructor, a setter or a method.

Constructor

class Cart {
  public constructor(private payment: PaymentMethod) {
    // 
  }
}

Setter

class Cart {
  private payment: PaymentMethod;
  public setPayment(payment: PaymentMethod): void {
    this.payment = payment;
  }
}

Method

class Cart {
  public pay(payment: PaymentMethod): void {
    payment.pay();
  }
}

Later on, we'll take more in depth look at dependency injection with Inversion Of Control (IoC) containers.

Conclusion

Dependency Inversion Principle (DIP) is the last principle in S.O.L.I.D principles.

The principle states that: a high level code should depend on abstractions, not on concretions.

We can solve this problem by depending on an abstraction instead of a concrete class.

Following the list

You can see the updated list of design principles from the following link
https://mentoor.io/en/posts/634524154/open-closed-principle-in-typescript

Join us in our Discord Community
https://discord.gg/XDZcTuU8c8

Interface Segregation Principle (ISP) in Typescript

Hasan Zohdy — Sun, 15 Oct 2023 19:12:12 +0000

Interface Segregation Principle In Typescript

Introduction

Interface Segregation Principle is the 4th principle of SOLID principles. It is also known as ISP principle. It was first introduced by Robert C. Martin in his 2000 paper Design Principles and Design Patterns.

Definition

The concept is simple, make the interfaces smaller and more specific to the use case. it is better to have multiple but smaller interfaces than a single large interface.

So basically, a class should not be forced to implement an interface or methods that it does not use.

Key Concepts Of ISP

Cohesion: Interfaces should be highly cohesive. It means the interface methods should be related to each other, if they are not related then they should be separated into different interfaces.
Responsibility: Interfaces should have single responsibility.

Example

Let's take an example of a Printer class that can print, scan and fax. So we can create an interface MultiFunctionPrinter that has all the methods of Printer class.

interface MultiFunctionPrinter {
  print(): void;
  scan(): void;
  fax(): void;
}

Now we have a SimplePrinter class that can only print. So we can implement the MultiFunctionPrinter interface in SimplePrinter class.

class SimplePrinter implements MultiFunctionPrinter {
  print(): void {
    console.log("Printing...");
  }
  scan(): void {
    throw new Error("Simple Printer can not scan.");
  }
  fax(): void {
    throw new Error("Simple Printer can not fax.");
  }
}

This is a total violation of ISP principle. Because SimplePrinter class is forced to implement the scan and fax methods that it does not use.

Solution

To make this run smoothly, we can separate the interface into three different interfaces.

interface Printer {
  print(): void;
}

interface Scanner {
  scan(): void;
}

interface Fax {
  fax(): void;
}

Now we can implement the interfaces in SimplePrinter class.

class SimplePrinter implements Printer {
  print(): void {
    console.log("Printing...");
  }
}

If there is advanced printer class, it can implement multiple interfaces.

class AdvancedPrinter implements Printer, Scanner, Fax {
  print(): void {
    console.log("Printing...");
  }
  scan(): void {
    console.log("Scanning...");
  }
  fax(): void {
    console.log("Faxing...");
  }
}

Conclusion

ISP principle is very important to make the code more maintainable and flexible. It also helps to reduce the coupling between classes and not implementing unnecessary methods.

Following the list

You can see the updated list of design principles from the following link
https://mentoor.io/en/posts/634524154/open-closed-principle-in-typescript

Join us in our Discord Community
https://discord.gg/XDZcTuU8c8

Liskov Substitution Principle In Typescript: Explained

Hasan Zohdy — Fri, 13 Oct 2023 15:09:35 +0000

Introduction

Liskov Substitution Principle is the third principle in S.O.L.I.D principles. It was introduced by Barbara Liskov in 1987. It is a principle in object-oriented programming that states that if a program is using a base class, then the reference to the base class can be replaced with a derived class without affecting the functionality of the program.

Problem

Let's say we have a Rectangle class that has a width and height properties and a getArea method that returns the area of the rectangle.

class Rectangle {
  constructor(public width: number, public height: number) {}

  getArea(): number {
    return this.width * this.height;
  }
}

Now we want to create a Square class that extends the Rectangle class. The Square class has a size property and overrides the getArea method to return the area of the square.

class Square extends Rectangle {
  constructor(public size: number) {
    super(size, size);
  }

  getArea(): number {
    return this.size * this.size;
  }
}

Now let's create a function that takes a Rectangle object and prints its area.

function printArea(rectangle: Rectangle) {
  console.log(rectangle.getArea());
}

Now let's create a Rectangle object and pass it to the printArea function.

const rectangle = new Rectangle(2, 3);

printArea(rectangle); // 6

Now let's create a Square object and pass it to the printArea function.

const square = new Square(2);

printArea(square); // 4

As you can see, the printArea function works fine with both Rectangle and Square objects. But what if we want to create a Square object and pass it to the printArea function as a Rectangle object?

Although this works fine, but we had to override the getArea method in the Square class to make it work. This is a violation of the Liskov Substitution Principle. The Square class is not a proper substitute for the Rectangle class.

Solution

To make it properly addressed, we can do it using base class.

Using A Shape as Base Class

Let's make a base class Shape this is basically an abstract class with abstract getArea method.

abstract class Shape {
  abstract getArea(): number;
}

Now let's make the Rectangle and Square classes extend the Shape class.

class Rectangle extends Shape {
  constructor(public width: number, public height: number) {
    super();
  }

  getArea(): number {
    return this.width * this.height;
  }
}

class Square extends Shape {
  constructor(public size: number) {
    super();
  }

  getArea(): number {
    return this.size * this.size;
  }
}

Now let's create a function that takes a Shape object and prints its area.

function printArea(shape: Shape) {
  console.log(shape.getArea());
}

Another way to solve this problem

We can also solve this problem by using an interface.

interface Shape {
  getArea(): number;
}

Now let's make the Rectangle and Square classes implement the Shape interface.

class Rectangle implements Shape {
  constructor(public width: number, public height: number) {}

  getArea(): number {
    return this.width * this.height;
  }
}

class Square implements Shape {
  constructor(public size: number) {}

  getArea(): number {
    return this.size * this.size;
  }
}

Now let's create a function that takes a Shape object and prints its area.

function printArea(shape: Shape) {
  console.log(shape.getArea());
}

More Example

Imagine that we have a Vehicle class that has a fuelUp and maxFuelCapacity methods

class Vehicle {
    public fuelUp(): string {
        return 'Fueled';
    }

    public maxFuelCapacity(): number {
        return 100;
    }
}

Now Let's create Car class which inherits the Vehicle class, pretty much the same methods in our case.

class Car extends Vehicle {
    // nothing to do
}

Let's use it with a function fuelUpVehicle that takes a Vehicle object and calls the fuelUp method.

function fuelUpVehicle(vehicle: Vehicle): void {
    vehicle.fuelUp();
}

Now let's create a Car object and pass it to the fuelUpVehicle function.

const car = new Car();

fuelUpVehicle(car);

So far so good, now let's create another vehicle, a ElectricCar this time, which also inherits the Vehicle class, but it doesn't need the fuelUp method, because it doesn't use fuel.

class ElectricCar extends Vehicle {
    public fuelUp(): string {
        throw new Error('Electric car does not need fuel');
    }

    public maxFuelCapacity(): number {
        return 0;
    }
}

If we tried to use the same function fuelUpVehicle with the ElectricCar object, it will throw an error.

const electricCar = new ElectricCar();

fuelUpVehicle(electricCar); // Error: Electric car does not need fuel

This violates the Liskov Substitution Principle because ElectricCar is not a proper Substitution for the Vehicle car.

Let's fix this behavior by changing the ElectricCar class

class ElectricCar extends Vehicle {
    public fuelUp(): string {
        return 'Electric car is charged';
    }

    public maxFuelCapacity(): number {
        return 100; // this is the battery capacity in percentage not in liters
    }
}

Now if we tried to use the same function fuelUpVehicle with the ElectricCar object, it will work fine.

const electricCar = new ElectricCar();

fuelUpVehicle(electricCar); // Electric car is charged

Conclusion

To address Liskov Substitution Principle (LSP) we can say that the base class should be able to be substituted with any of its derived classes without affecting the functionality of the program.

In other words, Subtypes must be substitutable for their base types. In simpler terms, if a piece of code works with objects of the base class, it should work equally well (without surprises) with objects of any derived class.

Following the list

You can see the updated list of design principles from the following link
https://mentoor.io/en/posts/634524154/open-closed-principle-in-typescript

Join us in our Discord Community
https://discord.gg/XDZcTuU8c8

Open/Closed Principle In Typescript

Hasan Zohdy — Thu, 12 Oct 2023 12:11:54 +0000

Introduction

Open/Closed Principle is the second principle in SOLID principles, it states that, a software entity should be open for extension, but closed for modification.

What is a software entity?

A software entity is a class, module, function, etc. Basically, it is a piece of code that does something.

What does that mean?

Basically, you should be able to extend the behavior of a software entity without modifying its source code.

Why would i need that?

Actually, for many reasons, let's list them:

Maintainable,Your code will be more maintainable, because you will not need to modify the source code of the software entity.
Testable, as it does not require modification, you will not need to modify the tests.
Reusable, you can use the software entity in other places which can be easily extended.
Scalable, add more features or functions without the need to modify the original source code.

Enough Talking... Show me the code

Let's say we have a User class, and we want to add a new feature to it, which is sendEmail function, which sends an email to the user.

class User {
  constructor(public name: string, public email: string) {}

  sendEmail() {
    console.log(`Sending email to ${this.name} at ${this.email}`);
  }
}

Now, we want to add a new feature to the User class, which is sendSMS function, which sends an SMS to the user.

class User {
  constructor(public name: string, public email: string) {}

  sendEmail() {
    console.log(`Sending email to ${this.name} at ${this.email}`);
  }

  sendSMS() {
    console.log(`Sending SMS to ${this.name} at ${this.email}`);
  }
}

Now, we want to add a new feature to the User class, which is sendPushNotification function, which sends a push notification to the user.

class User {
  constructor(public name: string, public email: string) {}

  sendEmail() {
    console.log(`Sending email to ${this.name} at ${this.email}`);
  }

  sendSMS() {
    console.log(`Sending SMS to ${this.name} at ${this.email}`);
  }

  sendPushNotification() {
    console.log(`Sending Push Notification to ${this.name} at ${this.email}`);
  }
}

Now, we want to add a new feature to the User class, which is sendWhatsAppMessage function, which sends a WhatsApp message to the user.

class User {
  constructor(public name: string, public email: string) {}

  sendEmail() {
    console.log(`Sending email to ${this.name} at ${this.email}`);
  }

  sendSMS() {
    console.log(`Sending SMS to ${this.name} at ${this.email}`);
  }

  sendPushNotification() {
    console.log(`Sending Push Notification to ${this.name} at ${this.email}`);
  }

  sendWhatsAppMessage() {
    console.log(`Sending WhatsApp Message to ${this.name} at ${this.email}`);
  }
}

This is good, but we still have to modify the User class every time we want to add a new feature, which is not totally good, because we are modifying the User class and make it over complicated.

Now let's head to the Open/Closed Principle solution.

Open/Closed Principle Solution

The idea is simple, we will make a contract A.K.A interface, which will be used among variant classes, and each class will implement the contract, and add its own implementation.

The point here is to make the contract as generic as possible, to allow multiple communication channels without touching the original User class.

Step 1: Create a contract

interface CommunicationChannel {
  send(user: User): void;
}

Step 2: Create a class for each communication channel

class EmailChannel implements CommunicationChannel {
  send(user: User) {
    console.log(`Sending email to ${user.name} at ${user.email}`);
  }
}

Now we can add as many communication channels as we want, without touching the User class.

class SMSChannel implements CommunicationChannel {
  send(user: User) {
    console.log(`Sending SMS to ${user.name} at ${user.email}`);
  }
}

class PushNotificationChannel implements CommunicationChannel {
  send(user: User) {
    console.log(`Sending Push Notification to ${user.name} at ${user.email}`);
  }
}

class WhatsAppChannel implements CommunicationChannel {
  send(user: User) {
    console.log(`Sending WhatsApp Message to ${user.name} at ${user.email}`);
  }
}

Area Calculator Example

Let's take another example, we have a Shape and an AreaCalculator classes, and we want to add a new shape to the AreaCalculator class.

class Shape {
  constructor(public type: string) {}
}

class AreaCalculator {
  constructor(public shapes: Shape[]) {}

  area() {
    return this.shapes.reduce((sum, shape) => {
      if (shape.type === "circle") {
        sum += Math.PI * Math.pow(shape.radius, 2);
      } else if (shape.type === "square") {
        sum += Math.pow(shape.side, 2);
      } else if (shape.type === "rectangle") {
        sum += shape.width * shape.height;
      }

      return sum;
    }, 0);
  }
}

What if we want to add a new shape, let's say triangle, we will have to modify the AreaCalculator class, which is not good.

class Shape {
  constructor(public type: string) {}
}

class AreaCalculator {
  constructor(public shapes: Shape[]) {}

  area() {
    return this.shapes.reduce((sum, shape) => {
      if (shape.type === "circle") {
        sum += Math.PI * Math.pow(shape.radius, 2);
      } else if (shape.type === "square") {
        sum += Math.pow(shape.side, 2);
      } else if (shape.type === "rectangle") {
        sum += shape.width * shape.height;
      } else if (shape.type === "triangle") {
        sum += (shape.base * shape.height) / 2;
      }

      return sum;
    }, 0);
  }
}

TOO BIG, is'nt it? let's break it down.

Step 1: Create a contract

interface Shape {
    area(): number;
}

Step 2: Create a class for each shape

class SquareShape implements Shape {
    public constructor(public side: number) {}

    public area() {
        return this.side * this.side;
    }
}

class CircleShape implements Shape {
    public constructor(public radius: number) {}

    public area() {
        return Math.PI * Math.pow(this.radius, 2);
    }
}

class RectangleShape implements Shape {
    public constructor(public width: number, public height: number) {}

    public area() {
        return this.width * this.height;
    }
}

class TriangleShape implements Shape {
    public constructor(public base: number, public height: number) {}

    public area() {
        return (this.base * this.height) / 2;
    }
}

Step 3: Use the contract

class AreaCalculator {
    public constructor(public shapes: Shape[]) {}

    public sum() {
        return this.shapes.reduce((total, shape) => {
            return total + shape.area();
        }, 0);
    }
}

Clean, clear, easy to read and maintainable!

Conclusion

Open/Closed principle is very essential and crucial when you build your software architecture, it will make your code more maintainable, testable, reusable and scalable.

Following the list

You can see the updated list of design principles from the following link
https://mentoor.io/en/posts/634524154/open-closed-principle-in-typescript

Join us in our Discord Community
https://discord.gg/XDZcTuU8c8

Generate React/Nextjs Component with single click!

Hasan Zohdy — Sat, 16 Sep 2023 09:58:31 +0000

Tired of creating react component files? This extension will create a react component file for you.

Generator Z

Because i'm in love with organizing and properly structure my projects, i've created this extension to help me create react components files.

This extension provides many options for generating various types of files not only React or Nextjs components, but in this article we will focus only on these two.

Installing the extension

Open your VSCode and go to the extensions tab, search for Generator Z and install it.

Using the extension

It's pretty much straight forward, just right click on the folder you want to create the file and select the option Generate React Component or Generate Nextjs Component.

Typescript

All generated files are in typescript, if you want to use javascript, just change the extension of the file.

Generate React Component

This feature allows you to generate React component with multiple options, you can choose between:

Generate Basic React Component: this one will generate a component with props types and that's it.
Generate React Memo Component: this one will generate a component and wrap it with React.memo.
Generate React Forward Ref Component: this one will generate a component and wrap it with React.forwardRef.
Generate React Memo And Forward Ref Component: this one will generate a component and wrap it with React.memo and React.forwardRef.

Based on your needs, feel free to select the option that suits you best.

Generate Nextjs Components

If you're a Nextjs developer, you will love this feature, it allows you to generate Nextjs components with multiple options, you can choose between:

Client Component: Which is a React component with "use client" directive.
Server Component: Which is a React component with "use server" directive.

Other generated files

There are other files that are generated by this extension, like: MonPulse model which is a MongoDB model for Nodejs (A very soon article will be written related to it) but you can have a look at MonPulse.

Add More Templates

If you want to add more templates to the extension, feel free to leave a comment with your desired template and i will add it to the extension in the next releases.

Conclusion

This will increase your productivity and save you a lot of time, i hope you find this extension useful, if you have any suggestions or feedback, feel free to leave a comment.

😍 Join our community

Answer problem solving questions and get mentor to review your answer on mentoor.io

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

Courses (Articles)

General Topics

Packages & Libraries

The Power Of Atom: Best React State Management in your projects 2023 Part One

Hasan Zohdy — Fri, 23 Jun 2023 14:56:21 +0000

Introduction

State management in React.js is a crucial aspect of building complex and interactive applications. It involves managing and controlling the data that changes over time within a React component or across multiple components. By using state management, we can easily handle application state, share data between components, and ensure a smooth and consistent user experience. Whether through React's built-in state or by implementing external libraries like Redux or MobX, state management empowers developers to efficiently update and synchronize data in their React applications, making them more robust and scalable.

Using Context API

The Context API in React is a built-in feature that allows developers to pass data through the component tree without explicitly passing props down the hierarchy. It provides a way to share state or other data across multiple components without the need for prop drilling.

Pros of using the Context API

Simplicity: The Context API simplifies the process of sharing data between components by eliminating the need for manually passing props through intermediate components.
Global State: Context allows developers to create global state that can be accessed by any component within the context. This is useful for managing application-level state, such as user authentication or theme preferences.
Avoids Prop Drilling: With Context, you can avoid the problem of prop drilling, where intermediate components need to pass props to deeply nested components that require the data.
Easy to Use: The Context API has a straightforward API that is easy to understand and use. It consists of a Provider component to define the data source and a Consumer component to access that data.

Cons of using the Context API

Performance Considerations: Context updates can trigger re-renders in components that consume the context, potentially impacting performance. It is recommended to use context sparingly and optimize the updates to prevent unnecessary re-renders.
Limited to React Components: The Context API is specifically designed for React components and may not be suitable for sharing data with non-React components or integrating with other libraries.
Reduced Component Isolation: Since Context allows data to be accessed from multiple components, it can reduce component isolation and make it harder to understand and reason about the flow of data within the application.
Overuse Complexity: Overusing Context and relying on it excessively can lead to complex and tightly coupled code, making it difficult to maintain and test.

Using external state management tools

So far, the most popular tool for state management is Redux, which offers great features to use over the application, however, Redux considered to be too complex when dealing with it, writing more code to achieve let's say a good achievement.

Mongez React Atom

When i started looking for a good state management tools to use in my complex application projects, mostly all available tools i used are too complex to achieve small tasks that requires a lot of coding to be written, os yes as you guessed, I MADE A NEW PACKAGE!

Why another state management?

Well, basically i consider it the most efficient and easiest tool among all available packages out there based on all developers that used it.

Here are some of the features that makes it the best:

Simple and easy to use
Can be used in any React Js/React Native application.
Can be used outside components.
Listen to atom's value change.
Listen to atom's object property change.
Lightweight in size.
Manages object and arrays atoms out of the box.
Works in SSR (Server Side Rendering) applications.

Redux VS Redux Toolkit VS React Atom

Let's see a simple example, a currency dropdown that should be displayed in the Header and Footer components, what we need to achieve here is to change the current from the Header component, the Footer component's currency dropdown is changed with the new value and vice versa.

Using Redux

Create a new file called actions.js and add the following code:

// Action Types
export const SET_CURRENT_CURRENCY = "SET_CURRENT_CURRENCY";

// Action Creators
export const setCurrentCurrency = (currency) => {
  return {
    type: SET_CURRENT_CURRENCY,
    payload: currency,
  };
};

Create another file called reducers.js and add the following code:

import { SET_CURRENT_CURRENCY } from "./actions";

// Initial State
const initialState = {
  currentCurrency: "USD",
};

// Reducer
export const currencyReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_CURRENT_CURRENCY:
      return {
        ...state,
        currentCurrency: action.payload,
      };
    default:
      return state;
  }
};

Now, create a new file called store.js to set up the Redux store:

import { createStore } from "redux";
import { currencyReducer } from "./reducers";

const store = createStore(currencyReducer);

export default store;

Next, let's create the header and footer components that will display and update the current currency.

Create a new file called Header.js and add the following code:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCurrentCurrency } from "./actions";

const Header = () => {
  const currentCurrency = useSelector((state) => state.currentCurrency);
  const dispatch = useDispatch();

  const handleCurrencyChange = (e) => {
    dispatch(setCurrentCurrency(e.target.value));
  };

  return (
    <header>
      <h1>Header</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </header>
  );
};

export default Header;

Create another file called Footer.js and add the following code:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCurrentCurrency } from "./actions";

const Footer = () => {
  const currentCurrency = useSelector((state) => state.currentCurrency);
  const dispatch = useDispatch();

  const handleCurrencyChange = (e) => {
    dispatch(setCurrentCurrency(e.target.value));
  };

  return (
    <footer>
      <h1>Footer</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </footer>
  );
};

export default Footer;

Finally, let's create the main App component to bring everything together.

In your main App.js file, add the following code:

import React from "react";
import { Provider } from "react-redux";
import Header from "./Header";
import Footer from "./Footer";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <div className="App">
        <Header />
        <Footer />
      </div>
    </Provider>
  );
};

export default App;

Using Redux Toolkit

Redux Toolkit is a package that provides a set of utilities to simplify common Redux use cases. It includes simplified ways to create reducers and action creators, as well as simplified ways to define initial state and store setup.

Let's see how to achieve the same result using Redux Toolkit.

Create a new file called store.js and add the following code:

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

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

export default store;

Next, let's create the header and footer components that will display and update the current currency.

Create a new file called Header.js and add the following code:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCurrentCurrency } from "./reducers";

const Header = () => {
  const currentCurrency = useSelector(
    (state) => state.currency.currentCurrency
  );
  const dispatch = useDispatch();

  const handleCurrencyChange = (e) => {
    dispatch(setCurrentCurrency(e.target.value));
  };

  return (
    <header>
      <h1>Header</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </header>
  );
};

export default Header;

Create another file called Footer.js and add the following code:

import React from "react";
import { useSelector } from "react-redux";

const Footer = () => {
  const currentCurrency = useSelector(
    (state) => state.currency.currentCurrency
  );
  const dispatch = useDispatch();

  const handleCurrencyChange = (e) => {
    dispatch(setCurrentCurrency(e.target.value));
  };

  return (
    <footer>
      <h1>Footer</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </footer>
  );
};

export default Footer;

Finally, let's create the main App component to bring everything together.

In your main App.js file, add the following code:

import React from "react";
import { Provider } from "react-redux";
import Header from "./Header";
import Footer from "./Footer";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <div className="App">
        <Header />
        <Footer />
      </div>
    </Provider>
  );
};

export default App;

Using React Atom

Now let's see how this can be achieved using React Atom.

Create a atoms.js file and add the following code:

import { atom } from "@mongez/react-atom";

export const currencyAtom = atom({
  key: "currency",
  default: "USD",
});

Now let's create the header and footer components that will display and update the current currency.

Create a new file called Header.js and add the following code:

import React from "react";
import { currencyAtom } from "./atoms";

const Header = () => {
  const currentCurrency = currencyAtom.useValue();

  const handleCurrencyChange = (e) => {
    currencyAtom.update(e.target.value);
  };

  return (
    <header>
      <h1>Header</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </header>
  );
};

export default Header;

Create another file called Footer.js and add the following code:

import React from "react";
import { currencyAtom } from "./atoms";

const Footer = () => {
  const currentCurrency = currencyAtom.useValue();

  const handleCurrencyChange = (e) => {
    currencyAtom.update(e.target.value);
  };

  return (
    <footer>
      <h1>Footer</h1>
      <select value={currentCurrency} onChange={handleCurrencyChange}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
    </footer>
  );
};

export default Footer;

Finally, let's create the main App component to bring everything together.

In your main App.js file, add the following code:

import React from "react";

export default function App() {
  return (
    <div className="App">
      <Header />
      <Footer />
    </div>
  );
}

And that's it! You've successfully implemented a global state management solution using React Atom.

In our next article, we'll go more deeply and see the other amazing features that React Atom provides.

You can see the entire series at mentoor.io

Flags In Programming

Hasan Zohdy — Wed, 05 Apr 2023 13:16:04 +0000

Nodejs Internship

If yuo're looking for a Nodejs internship and you have the gut and power to learn, message me on Discord (Node Js Channel or send me a PM).

Introduction

Flags are a very important concept in programming, specially when you're working with a lot of conditions, and you want to make your code more readable and maintainable.

What is a flag?

A flag is a variable that is used to indicate a condition, it's a boolean variable that is used to indicate a condition, and it's used to control the flow of the program.

It could also be a non-boolean value, but most of the time it's a boolean value.

Why flags?

Flags are very useful when you have a lot of conditions, and you want to make your code more readable and maintainable.

Example

Let's say you have a function that prints in console messages, but this should only be done if debug mode is enabled, and you have a variable called debugMode that is a boolean value, and it's used to indicate if debug mode is enabled or not.

let debugMode = true;

function enableDebugMode() {
    debugMode = true;
}

function disableDebugMode() {
    debugMode = false;
}

function printMessage(message) {
    if (debugMode) {
        console.log(message);
    }
}

printMessage("Hello World");

In the above example, we have a function called printMessage that prints a message in console, but this should only be done if debug mode is enabled, and we have a variable called debugMode that is a boolean value, and it's used to indicate if debug mode is enabled or not.

Let's see another example.

Assuming we have a function called getUsers that returns a list of users, but this should only be done if the user is logged in, and we have a variable called loggedIn that is a boolean value, and it's used to indicate if the user is logged in or not.

let loggedIn = false;

function login() {
    loggedIn = true;
}

function logout() {
    loggedIn = false;
}

function getUsers() {
    if (loggedIn) {
        return [
            { name: "Hassan", age: 25 },
            { name: "Ahmed", age: 30 },
        ];
    }

    return [];
}

getUsers(); // []

In the above example, we have a function called getUsers that returns a list of users, but this should only be done if the user is logged in, and we have a variable called loggedIn that is a boolean value, and it's used to indicate if the user is logged in or not.

Another good realistic example, let's create a function called isUnique that receives an array of numbers and a number, and it returns true if the number is unique in the array, and false if it's not.

function isUnique(numbers, number) {
    let isUnique = true;

    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] === number) {
            isUnique = false;
            break;
        }
    }

    return isUnique;
}

isUnique([1, 2, 3, 4, 5], 6); // true
isUnique([1, 2, 3, 4, 5, 6, 7, 5, 9], 5); // false

Let's take an example of non-boolean flag.

Now we're going to do something similar to the isUnique but this time we are going to make unique function which receives an array and return only the unique values.

function unique(numbers) {
    let uniqueNumbers = [];

    for (let i = 0; i < numbers.length; i++) {
        if (isUnique(numbers, numbers[i])) {
            uniqueNumbers.push(numbers[i]);
        }
    }

    return uniqueNumbers;
}

Flags can be used as caching mechanism

Let's say we're building an Ajax requests package, we need to add feature of caching response, in that sense we can create an object to cache the response and the key of that object will be the url of the request, and the value will be the response.

let cache = {}; // <--- The flag

function ajax(url) {
    if (cache[url]) {
        return cache[url];
    }

    // make the request and save the response in cache
    cache[url] = getResponseFromSomeWhere(url);

    return response;
}

Conclusion

Flags are very useful when you have a lot of conditions, and you want to make your code more readable and maintainable.

Most of the time if you're developing something, you're definitely going to use flags.

😍 Join our community

Answer problem solving questions and get mentor to review your answer on mentoor.io

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

Courses (Articles)

General Topics

Packages & Libraries

Stop Using if..else

Hasan Zohdy — Tue, 04 Apr 2023 15:24:09 +0000

Why?

Well, let me first tell you what i mean by stop using if..else statement.

The if..else statement is a control structure that allows you to execute a block of code if a condition is true, and another block of code if the condition is false.

So what is wrong with that?

Totally fine code, but this could be good in some cases, but not in all cases.

The if stopper

Assume we have a function that returns the first value of an array or object

function firstValue(data) {
    if (Array.isArray(data)) {
        return data[0];
    } else if (typeof data === 'object') {
        return data[Object.keys(data)[0]];
    }
}

The function looks so good, but can we do better with this function?

For sure the answer is yes, let's see how.

function firstValue(data) {
    if (Array.isArray(data)) {
        return data[0];
    }

    if (typeof data === 'object') {
        return data[Object.keys(data)[0]];
    }
}

The function looks the same, but it's not the same, the second function is better than the first one.

Here we get rid of the if else, just by returning a value from the if statement we no longer need to use the else statement.

This makes the code more readable, and more maintainable, the previous example was a little small, but what if the function is huge, it will be harder to see where the else statement starts and ends, espcially if you have a lot of nested if statements.

Let's see an example of if...else statement that each statement has nested if statements and for loops

function firstValue(data) {
    if (Array.isArray(data)) {
        for (let i = 0; i < data.length; i++) {
            if (typeof data[i] === 'object') {
                return data[i];
            }
        }
    } else if (typeof data === 'object') {
        for (let i = 0; i < Object.keys(data).length; i++) {
            if (typeof data[Object.keys(data)[i]] === 'object') {
                return data[Object.keys(data)[i]];
            }
        }
    }
}

This is a bad example, but it's just to show you how bad it can be, and how hard it is to read.

Let's write an improved version of this function

function firstValue(data) {
    if (Array.isArray(data)) {
        for (let i = 0; i < data.length; i++) {
            if (typeof data[i] === 'object') {
                return data[i];
            }
        }
    }

    if (typeof data === 'object') {
        for (let i = 0; i < Object.keys(data).length; i++) {
            if (typeof data[Object.keys(data)[i]] === 'object') {
                return data[Object.keys(data)[i]];
            }
        }
    }
}

Both separated, both readable and everyone is happy.

Using Throw Errors

You can also stop the function using throw errors, let's see a bad example

const largeNumbers = [];
const smallNumbers = [];

export function badNumbersManipulator(value) {
  if (typeof value !== "number") {
    throw new Error("Value must be a number");
  } else if (value > 100) {
    const doubledNumber = value * 2;
    const halvedNumber = value / 2;
    const poweredNumber = Math.pow(value, 2);

    largeNumbers.push({
      number: value,
      double: doubledNumber,
      halved: halvedNumber,
      powered: poweredNumber
    });
  } else {
    const halvedNumber = value / 2;
    const quarterNumber = value / 4;
    const tripledNumber = value * 3;

    smallNumbers.push({
      number: value,
      halved: halvedNumber,
      triple: tripledNumber,
      quarter: quarterNumber
    });
  }
}

Here in the above example, we have a function that takes a number and push it to an array, but if the number is greater than 100, it will push it to the largeNumbers array, and if it's less than 100, it will push it to the smallNumbers array.

You see there are three concatenated if statements and each one of them stops the function, we can do better

const largeNumbers = [];
const smallNumbers = [];

export function goodNumbersManipulator(value) {
  if (typeof value !== "number") {
    throw new Error("Value must be a number"); // stop the function
  }

  if (value > 100) {
    const doubledNumber = value * 2;
    const halvedNumber = value / 2;
    const poweredNumber = Math.pow(value, 2);

    largeNumbers.push({
      number: value,
      double: doubledNumber,
      halved: halvedNumber,
      powered: poweredNumber
    });

    return;
  }

  const halvedNumber = value / 2;
  const quarterNumber = value / 4;
  const tripledNumber = value * 3;

  smallNumbers.push({
    number: value,
    halved: halvedNumber,
    triple: tripledNumber,
    quarter: quarterNumber
  });
}

Using Continue and Break statements

You can also use continue and break statements to stop the loop, let's see an example

function badCountEvenAndOdds(array) {
  const evenNumbers = [];
  const oddNumbers = [];

  for (const value of array) {
    if (value % 2 === 0) {
      evenNumbers.push(value);
    } else {
      oddNumbers.push(value);
    }
  }

  return [evenNumbers, oddNumbers];
}

Here we have a function that takes an array of numbers and returns an array of two arrays, the first array contains the even numbers, and the second array contains the odd numbers, the function adds the number to the proper array.

But let's make it better

function goodCountEvenAndOdds(array) {
  const evenNumbers = [];
  const oddNumbers = [];

  for (const value of array) {
    if (value % 2 === 0) {
      evenNumbers.push(value);
      continue;
    }

    oddNumbers.push(value);
  }

  return [evenNumbers, oddNumbers];
}

Now the code is readable, imagine we have like 3 or 4 if statements, it will be hard to read, but now it's easy to read.

Another example of using break statement

A bad example will be

function doubleThreeAndFour(array) {
  let foundThreeNumber = 0;
  let foundFourNumber = 0;

  for (const value of array) {
    if (value % 3 === 0) {
      foundThreeNumber = value;
      break;
    } else if (value % 4 === 0) {
      foundFourNumber = value;
      break;
    }
  }

  return [foundThreeNumber * 2, foundFourNumber * 2];
}

And a good example will be

function doubledThreeAndFour(array) {
    let foundThreeNumber = 0;
    let foundFourNumber = 0;

    for (const value of array) {
        if (value % 3 === 0) {
            foundThreeNumber = value;
            break;
        }

        if (value % 4 === 0) {
            foundFourNumber = value;
            break;
        }
    }

    return [
        foundThreeNumber * 2,
        foundFourNumber * 2
    ];
}

Conclusion

Writing clean and readable code very essential, specially if you're not working alone on a project, you may have a lot of developers working on the same project, and you don't want to make it hard for them to read your code.

😍 Join our community

Answer problem solving questions and get mentor to review your answer on mentoor.io

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

Courses (Articles)

General Topics

Packages & Libraries

React Atom: A simple yet powerful React JS / React Native state management

Hasan Zohdy — Tue, 21 Mar 2023 10:40:01 +0000

Mongez React Atom

Mongez React Atom (MRA) is a state management tool to manage data between Project's Components

Why?

The main purpose of the birth of this package is to work with a simple and performant state management tool to handle data among components.

Features

The top features of MRA is:

Lightweight package
Can be used everywhere, inside or outside React Components.
Easy to use.
Easy to learn.
Power of focus, works with single value only.
Typescript support.
Can be used with any other state management tool or even better, use it as a replacement for Redux!
Works with React JS and React Native.

Use Cases

The main purpose of a state management is to keep and maintain data, MRA is designed to work with a single value, this gives it a power of control to manage the data and keep it in a single place.

How it works

The concept is simple, everything works in atoms, each atom MUST hold a single value, in nutshell every atom has a single responsibility.

Installation

Yarn

yarn add @mongez/react-atom

NPM

npm i @mongez/react-atom

Pnpm

pnpm i @mongez/react-atom

Usage

Let's assume we have a currency to be displayed in the header, the footer contain a dropdown to change currency from it, we need to update the header's current currency once the user changes it in the footer without re-rendering the other components in same level or even the parent component that holds the header and footer.

Let's create a new simple atom

src/atoms/currency-atom.ts

import { atom } from '@mongez/react-atom';

export const currencyAtom = atom({
  key: 'currency', 
  default: 'USD', // default value for the atom
});

Let's jump to use it in our Header component

src/components/Header.tsx

import { currencyAtom } from 'src/atoms/currency-atom';

export default function Header() {
  // get the current value of the atom
  const currentCurrency = currencyAtom.value;
  return (
    <>
      <div>Current Currency: {currentCurrency}</div>
    </>
  );
}

As you can see, the default value is just a plain string, the atom initiation requires two keys:

key the atom's name, it must be unique for each atom, otherwise an error will be raised in the development environment.
default holds the default value, it can be any type.

Now let's jump to the Footer component

src/components/Footer.tsx

import { currencyAtom } from 'src/atoms/currency-atom';

export default function Footer() {
  return (
    <>
      <button onClick={() => currencyAtom.update('EUR')}>Change to EUR</button>
      <button onClick={() => currencyAtom.update('USD')}>Change to USD</button>
      <button onClick={() => currencyAtom.update('GBP')}>Change to GBP</button>
      <button onClick={() => currencyAtom.update('EGP')}>Change to EGP</button>
    </>
  );
}

This will update the currency atom value, but there will no be any re-rendering for the Header component, because it's not subscribed to the atom, but if we want to re-render the Header component once the currency is changed, we can use useValue hook.

src/components/Header.tsx

import { currencyAtom } from 'src/atoms/currency-atom';

export default function Header() {
  // get the current value of the atom
  // and watch for any changes for the atom value
  // if the atom's value is changed, re-render the component with the new value
  const currentCurrency = currencyAtom.useValue();
  return (
    <>
      <div>Current Currency: {currentCurrency}</div>
    </>
  );
}

Now whenever the user clicks on any of the buttons in the footer, the header will be re-rendered with the new value.

You can find an example code here in CodeSandbox

Working with objects

The previous example was a simple one, now let's try to work with objects, which will be the most use cases in your application, for example, we can use the atom to handle current user data throughout the entire application life cycle.

// src/atoms/user-atom.ts
import { atom } from '@mongez/react-atom';

export type UserData = {
  id: number;
  name: string;
  email: string;  
};

export const userAtom = atom<UserData>({
  key: 'user', 
  default: {},
});

Here we defined a type for the data UserData, we passed it to the atom so we can work with proper typings when using the atom in the application,

Now let's head back again to our header and add the current user name

src/components/Header.tsx

import { userAtom } from 'src/atoms/user-atom';

export default function Header() {
  // get the current value of the atom
  // and watch for any changes for the atom value
  // if the atom's value is changed, re-render the component with the new value
  const currentUser = userAtom.useValue();
  const userName = currentUser.name;
  return (
    <>
      <div>{userName}</div>
    </>
  );
}

Here we are listening to the atom's change, once the atom's value is updated then the component will be re-rendered with the new value.

Now let's add an input to change the user name in the footer

src/components/Footer.tsx

import { userAtom } from 'src/atoms/user-atom';

export default function Footer() {
  return (
    <>
        <input defaultValue={userAtom.get('name')} onChange={e => {
            userAtom.update({
              ...userAtom.value,
              name: e.target.value
            });
        }} />
    </>
  )
}

Here we are using get method to get the current value of the atom, then we are updating the atom's value with the new value, but we are not using update method, because it will replace the entire value, we are using update method to update the value with the new value, but we are keeping the old values.

get method works only with objects, it will return the value of the given key from the object.

This will cause the header to be re-rendered with the new value.

We can use change method to change single key's value

src/components/Footer.tsx

import { userAtom } from 'src/atoms/user-atom';

export default function Footer() {
  return (
    <>
        <input defaultValue={userAtom.get('name')} onChange={e => {
            userAtom.change('name', e.target.value);
        }} />
    </>
  )
}

change method works only with objects, it will update the value of the given key from the object.

Listen for certain changes

That was great so far, but what if the email is changed, the Header component has nothing to do with the email, it needs only the name thus it will cause unnecessary re-rendering when the atom's value is changed, thankfully we can listen for certain changes only using use hook.

src/components/Header.tsx

import { userAtom } from 'src/atoms/user-atom';

export default function Header() {
  // get and listen for changes only for the name key
  const userName = userAtom.use('name');
  return (
    <>
      <div>{userName}</div>
    </>
  );
}

This will cause the header to be re-rendered only when the name is changed, but what if we want to listen for multiple keys, we can use useMany hook.

Even though the atom's object reference is changed, this will not cause any re-rendering, because the header is listening only for the name not the entire object.

Atom update

As we saw earlier we can update the atom's value using update method, there is also another way to update the atom, same as the state updater by passing a callback function to the update method.

import { userAtom } from 'src/atoms/user-atom';

userAtom.update((oldValue) => {
  return {
    ...oldValue,
    name: 'Ali',
  };
});

Partial updates

When dealing with objects or arrays, To make the atom trigger the change event, we must pass a new reference to the atom's update method, same as useState hook, in that sense, we need to spread the old value along with the updated keys to make the atom trigger the change event.

import { userAtom } from 'src/atoms/user-atom';

userAtom.update({
  ...userAtom.value,
  name: 'Ali',
});

This is the way to tell the atom the value has been changed, it is standard and easy to do, but we can use merge method as a shortcut to do the same thing.

import { userAtom } from 'src/atoms/user-atom';

userAtom.merge({
  name: 'Ali',
});

Kindly note that merge method works only with objects.

Before update

Sometimes you may need to make a modification for the data before updating it in the atom or even do other stuff, for example, you may need to make a request to the server to update the data, then you can use beforeUpdate method to do that.

// src/atoms/user-atom.ts
import { atom } from '@mongez/react-atom';

export type UserData = {
  id: number;
  name: string;
  email: string;
  initial: string;
};

export const userAtom = atom<UserData>({
  key: 'user',
  default: {},
  beforeUpdate: (newValue: UserData) => {
    newValue.initial = newValue.name[0];

    return newValue;
  }
});

// src/components/Header.tsx

import { userAtom } from 'src/atoms/user-atom';

userAtom.update({
  ...userAtom.value,
  name: 'Ali',
});

console.log(userAtom.get('initial')); // A

Here we used beforeUpdate to modify the value before storing it in the atom.

Conclusion

We can recap the atom's methods as follows:

update to update the atom's value
merge to update the atom's value with partial updates
use to listen for changes for a certain key
useValue to listen for changes for the entire atom's value
get to get the value key of the atom
change to change the value of a key in the atom
beforeUpdate to modify the value before updating it in the atom

You can find the documentation for package in Github

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

Courses (Articles)

Mongez Cache, a powerful storage manager for web applications

Hasan Zohdy — Thu, 23 Feb 2023 10:17:06 +0000

Introduction

Storing data in the browser is a common task in web applications, and there are many ways to do it, but the most common way is to use the localStorage and sessionStorage handlers.

But the problem with these handlers is that they are not typed, and you have to deal with the JSON.stringify and JSON.parse methods to store and retrieve data.

That's why we created Mongez Cache, a powerful storage for web applications that is based on the localStorage and sessionStorage handlers but with a better and more powerful API.

Installation

Using npm

npm i @mongez/cache

Using Yarn

yarn add @mongez/cache

Using pnpm

pnpm add @mongez/cache

Features

The package has many powerful features that can easily manage your data in the browser, here are some of them:

You can store any type of data, strings, integers, objects, arrays.
Has one api for both localStorage and sessionStorage.
Can store data for a specific time.
Has 5 drivers for storing data.
Can Encrypt data before storing it for more security.
It is agnostic package, you can use it with any framework you want.
Code is cleaner and easier to understand and maintain.

Usage

As mentioned above, the package is shipped with same API for any driver, that means you can easily switch between drivers without changing your code.

Setting up cache configurations

First off, let's setup our cache configurations, which is very simple, we can just start by setting the current cache driver.

import { PlainLocalStorageDriver, setCacheConfigurations } from "@mongez/cache";

setCacheConfigurations({
  driver: new PlainLocalStorageDriver(),
});

Here we are using the PlainLocalStorageDriver, but you can use any of the other drivers that will be listed later.

Now for using the cache, we can just import the cache object and start using it.

import cache from "@mongez/cache";

// Storing data
cache.set("name", "Hasan");

To retrieve data, we can use the get method.

// Retrieving data
const name = cache.get("name");

We can also define a default value to be returned if the key is not found.

// Retrieving data with default value
const email = cache.get("email", "your-email-address"); // your-email-address

For deleting a key, we can use the remove method.

// Deleting a key
cache.remove("name");

Storing objects and arrays

As mentioned earlier, the package can store any type of data, so we can store objects and arrays as well.

// Storing an object
const user = {
  id
  name: "Hasan",
  email: "hassanzohdy@gmail.com",
};

cache.set("user", user);

Now we can retrieve the object.

// Retrieving an object
const user = cache.get("user");

It will automatically be parsed to an object.

Same applies on arrays as well.

// Storing an array
const users = [
  {
    id: 1,
    name: "Hasan",
  },
  {
    id: 2,
    name: "Ahmed",
  },
];

cache.set("users", users);

Now we can retrieve the array.

// Retrieving an array
const users = cache.get("users", []);

Storing data for a specific time

As Local Storage stores data without expiration time, we can pass third parameter to the set method to set the expiration time for the data.

// Storing data for 1 hour
cache.set("name", "Hasan", 60 * 60);

Third argument accepts time in seconds, so in the above example, the data will be stored for 1 hour.

If you tried to retrieve the data after the expiration time, it will return null.

Data won't be deleted automatically, it will be deleted when you try to retrieve it.

Drivers

Here are the available drivers:

Plain Local Storage Driver
Encrypted Local Storage Driver
Plain Session Storage Driver
Encrypted Session Storage Driver
RunTime Driver

Encrypted Data

As you can see, there are encrypted drivers, which means we need a converters for encrypting and decrypting data, you can use Mongez Encryption package to do that.

Just install it

npm i @mongez/encryption

yarn add @mongez/encryption

pnpm add @mongez/encryption

To make this work, make sure that you've set encryption key in Encryption Configuration.

import { encrypt, decrypt setEncryptionConfigurations } from "@mongez/encryption";
import {
  EncryptedLocalStorageDriver,
  setCacheConfigurations,
} from "@mongez/cache";

// make sure to set the encryption key at some point in your application
setEncryptionConfigurations({
  key: "app-key",
});

setCacheConfigurations({
  driver: new EncryptedLocalStorageDriver(),
  // add encryption handlers
  encryption: {
    encrypt,
    decrypt,
  }
});

// The value will be stored as encrypted value something like store-name: asdfgtrhy54rewqsdaftrgyujiy67t54re3wqsd
cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

From now, Any encrypted driver can be used safely to encrypt and decrypt data.

You can use any encryption library you want, as long as you provide the encrypt and decrypt methods.

Now let's head to our drivers.

Plain Local Storage Driver

The plain local storage implements Local Storage of the browser.

The driver name is: PlainLocalStorageDriver

import {
  PlainLocalStorageDriver,
  setCacheConfigurations,
} from "@mongez/cache";

setCacheConfigurations({
  driver: new PlainLocalStorageDriver(),
});

cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

Encrypted Local Storage Driver

Works exactly same as Plain Local Storage Driver except that values are encrypted when stored in the storage.

import { encrypt, decrypt setEncryptionConfigurations } from "@mongez/encryption";
import {
  EncryptedLocalStorageDriver,
  setCacheConfigurations,
} from "@mongez/cache";

// make sure to set the encryption key at some point in your application

setEncryptionConfigurations({
  key: "app-key",
});

setCacheConfigurations({
  driver: new EncryptedLocalStorageDriver(),
  // add encryption handlers
  encryption: {
    encrypt,
    decrypt,
  }
});

// The value will be stored as encrypted value something like store-name: asdfgtrhy54rewqsdaftrgyujiy67t54re3wqsd
cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

Plain Session Storage Driver

The plain session storage implements Session Storage of the browser.

The driver name is: PlainSessionStorageDriver

import {
  PlainSessionStorageDriver,
  setCacheConfigurations,
} from "@mongez/cache";

setCacheConfigurations({
  driver: new PlainSessionStorageDriver(),
});

cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

Encrypted Session Storage Driver

Works exactly same as Plain session Storage Driver except that values are encrypted when stored in the storage.

import { encrypt, decrypt setEncryptionConfigurations } from "@mongez/encryption";
import {
  EncryptedSessionStorageDriver,
  setCacheConfigurations,
} from "@mongez/cache";

// make sure to set the encryption key at some point in your application

setEncryptionConfigurations({
  key: "app-key",
});

setCacheConfigurations({
  driver: new EncryptedLocalStorageDriver(),
  // add encryption handlers
  encryption: {
    encrypt,
    decrypt,
  }
});

// The value will be stored as encrypted value something like store-name: asdfgtrhy54rewqsdaftrgyujiy67t54re3wqsd
cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

Runtime Driver

If you just want to cache the data in the runtime (memory), use RunTimeDriver instead.

import cache, { RunTimeDriver, setCacheConfigurations } from "@mongez/cache";

setCacheConfigurations({
  driver: new RunTimeDriver(),
});

cache.set("name", "Hasan");

console.log(cache.get("name")); // Hasan

The data will be lost when the page is refreshed or closed.

This could be useful for caching data that you want to cache it temporarily.

Conclusion

That's it, Actually this is a very useful package, I use it in any project i work on, and I hope you will find it useful too.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

🚀 Project Repository

You can find the latest updates of this project on Github

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

useFetcher: easiest way to fetch data in React Js

Courses (Articles)