DEV Community: Nisab Mohd

Understanding Prototype Inheritance in JavaScript

Nisab Mohd — Mon, 10 Mar 2025 13:54:26 +0000

One of the fundamental building blocks of object-oriented programming is inheritance, which minimizes duplication by enabling an object to inherit properties from another object. Classes are the basis for inheritance in static languages like Java, C++, etc. The inheritance model used in traditional JavaScript was prototype-based inheritance.

In order to understand this, let's create an object and print it.

const obj = {};
console.log(obj); // [object Object]

You will see that it prints something like an [object Object], but how does that happen? We made an object with no fields, so how come the toString method is present in it? If you open the console, you will find a property named [[Prototype]], and when you expand it, you will see a few methods that we never defined. How are those available? Our object is inheriting from Object.prototype. Let's go through everything properly, one by one.

JavaScript internally handles [[Prototype]] inheritance chain and allows us to modify it at runtime (which can't be done in static languages). People think it's a flaw, but that is a super powerful feature in JavaScript. While this prototype is internal, we can manipulate it using the __proto__ property in an object. This acts like a getter to that prototype, but we are not directly maintaining it.

So, let's create two objects—one parent and one child—and make an inheritance connection between them.

const obj1 = {
  familyName: "Karis",
  name: "Sam",
};

const obj2 = {
  name: "Kyle",
  __proto__: obj1, // making obj1 parent of obj2
};

console.log(obj2.name); // Kyle
console.log(obj2.familyName); // Karis

What just happened here? We did inheritance, the obj2 can access properties of the parent. As the familyName property was not present in obj2, it took it from the parent. And we can keep doing this chain by making multiple levels of inheritance. Also, we can add methods to parent objects, which can be used by children.

Let's see that in action.

const obj1 = {
  familyName: "Karis",
  name: "Sam",
  sayHello() {
    console.log("Hello");
  },
};

const obj2 = {
  name: "Kyle",
  __proto__: obj1, // making obj1 parent of obj2
};

const obj3 = {
  __proto__: obj2,
};

console.log(obj3.name); // Kyle ( took just above one)
console.log(obj2.familyName); // Karis
obj3.sayHello(); // Hello

Now we created obj3, which does not have the name property in it, but when we print it, we get the name from the object above—Kyle. That means in the upper chain, as soon as a value is found, it is taken. The same applies to functions as well.

Now we understand how to make an object extend another. Remember, we are doing this with objects, not classes—that's the difference in JavaScript.

This is clear, but when we created an object in the very first example, we didn’t do this explicitly—we didn’t add a property named __proto__ to that empty object. So how was it still inherited? To understand this, we must first understand Constructor Functions. But before that, let's take an example.

const box1 = {
  val: 1,
  getValue() {
    return this.val;
  },
};

const box2 = {
  val: 2,
  getValue() {
    return this.val;
  },
};

const boxes = [box1, box2];

You see that all box objects have the same shape. Each box has a val property and a getValue function. We are repeating the code every single time, and the getValue function is present on each object, taking up memory despite having the same functionality in all boxes.

Why not keep this function in a prototype? Let's do that and see the code:

const boxProto = {
  getValue() {
    return this.val;
  },
};

const box1 = {
  val: 1,
  __proto__: boxProto,
};

const box2 = {
  val: 2,
  __proto__: boxProto,
};

const boxes = [box1, box2];

Okay, we came out of one overhead—now there is only one function for all boxes instead of each box having its own copy. But it is still tedious to write.

This is where Constructor Functions come into the picture.

Constructor functions

Constructor Functions are a special type of function that creates and returns objects based on the structure we define. This way, we don’t need to write repetitive code to create objects when many objects share the same structure.
So, from the above example, let's make a Box constructor.

It is prefereed to keep the function name capital for valid reasons.

function Box(val) {
  this.val = val;
  this.getValue = function () {
    // again same issue
    return this.val;
  };
}

const box1 = new Box(1);
const box2 = new Box(2);

The code already looks better! As you can see, each time the Box constructor just creates and returns an object.

But there is still an issue—the getValue method is present on all objects individually. This should not happen, right?

Let's fix it by understanding one more concept: F.prototype.

F.prototype `F.prototype`

In JavaScript, functions are objects as well, and they have a property called prototype. Remember, this is just a property on the function—don’t confuse it with __proto__ or [[Prototype]]. This property helps establish the prototype chain when an object is created. Simply put, the prototype property can be an object or null. When a constructor is called, an object is created, and that object's __proto__ is set to the object present in the function’s prototype property.

function Box(val) {
  this.val = val;
}

Box.prototype.getValue = function () {
  return this.val;
};

What did we just do? As mentioned, the Box constructor has a property named prototype, which is an object by default. We added a method to that object, ensuring that when a Box object is created, its parent has the getValue function. This solves our problem—now the getValue method exists only once and is shared by multiple Box objects.

Also, the default value of this prototype is an object with a property named constructor, which again points to our function.

// The equivalent class code for Box constructor:
// which internally does the same
class Box {
  constructor(val) {
    this.val = val;
  }

  getValue() {
    return this.value;
  }
}

This is how it works internally for many objects. When we create an object using the {} literal, behind the scenes, it actually does new Object().

Coming back to our first example, the object is created via the Object constructor. This means the prototype of the Object constructor contains methods like toString, valueOf, etc. That’s why our object has access to these properties as well.

Constructors like Array, Number, and String behave the same way, where their methods exist on their prototypes. These methods are accessible via child objects, which is why we refer to them as Array.prototype.map, Array.prototype.filter, String.prototype.replace, etc.

However, if we go one level above and try accessing __proto__, it will be null, because there is nothing further up the inheritance chain.

const obj = {};
console.log(obj.__proto__); // toString, valueOf, ...
console.log(obj.__proto__.__proto__); // null

Never change the prototype reference to another object directly. While it will work, you’ll lose the constructor property. If you modify it, make sure to add the constructor back in the new reference.

Now, let’s compare this with classes while doing multi-level inheritance via constructors. If you remember from the previous examples, we learned how to make one object the parent of another by adding a __proto__ property. But what if we wanted every object of a certain base structure to also inherit properties from another structure? For example, when a Dog object is created, it should automatically include Animal properties by extending it. The key thing to remember here is that objects are yet to be created—we don’t have any objects at this point.

class Animal {
  constructor(specie) {
    this.specie = specie;
    this.eats = true;
  }

  breath() {
    console.log("Breathing!!");
  }
}

class Dog extends Animal {
  constructor(name, specie) {
    super(specie);
    this.name = name;
  }

  bark() {
    console.log("Barking!!");
  }
}

const dog = new Dog("Tommy", "Husky");

The class syntax was added later in JavaScript to make inheritance easier to understand, especially for developers coming from Java or C++. However, under the hood, it didn’t change the implementation of inheritance—it still works the same way. As you can see, the class syntax makes the code much cleaner. Now, let’s also implement a functional version, and I bet you’ll prefer the class syntax over it. But understanding how it works under the hood is definitely worth it.

function Animal(specie) {
  this.specie = specie;
  this.eats = true;
}

Animal.prototype.breath = function () {
  console.log("Breathing!!");
};

// Until here, everything is the same as we discussed earlier

// Here comes the worst part –
//  if you thought debugging was bad, wait till you see this!

function Dog(name, specie) {
  Animal.call(this, specie);
  this.name = name;
}

// If you directly do this:
// Dog.prototype.bark = function () {}
// You will not get Animal's methods inside Animal.prototype

// In order to get the functions,
// we need to assign Animal's prototype to Dog's prototype
Dog.prototype = Object.create(Animal.prototype);

// Reassigning the Dog constructor because we changed the reference
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function () {
  console.log("Barking!!");
};

// Now this works the same as the class version
const dog = new Dog("Tommy", "Husky");

This is how prototype inheritance works in JavaScript. There are methods like Object.getPrototypeOf(obj) to access an object's [[Prototype]], but using __proto__ is also fine for learning and debugging. In class-based inheritance, methods defined inside the class body are non-enumerable by default, meaning they don’t show up when logging the object but are still accessible. In the functional version, methods added via prototype are also non-enumerable, but properties defined inside the constructor remain enumerable. If you want non-enumerable properties in the functional version, you can use Object.defineProperty.

Next.js 15 Internationalization Simplified

Nisab Mohd — Mon, 10 Mar 2025 13:40:33 +0000

Because Nextjs has server and client components, maintaining internationalization is more difficult than it is in a traditional React application. We'll look at how to keep Nextjs 15 international in this article. The procedures outlined in Nextjs' documentation will be what we do. The documentation can be found here.

As stated in the official documentation, I will attempt to keep it simple. For this, we won't be using any libraries. Although a negotiator-like library can be used, subpath routing will be used in this case. The entire application must be wrapped in a [lang] route. For example, if you have a /article page, it will now be /[lang]/article, with lang representing the language code such as en, fr, es, etc. In order to handle situations where the lang code is not available, we will add a fallback code and use it to reroute the same path. Thus, middleware is used because we will be managing this in each route segment.

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { getLocale, pathnameHasLocale } from "./lib/locale";

export function middleware(request: NextRequest) {
    // Check if there is any supported locale in the pathname
    const { pathname } = request.nextUrl;
    const hasLocale = pathnameHasLocale(pathname);
    if (hasLocale) return;

    // Redirect if there is no locale
    const locale = getLocale(pathname);
    request.nextUrl.pathname = `/${locale}${pathname}`;
    // e.g. incoming request is /docs/get-started
    // The new URL is now /en/docs/get-started
    return NextResponse.redirect(request.nextUrl);
}

export const config = {
    matcher: [
        // Skip all internal paths (_next)
        "/((?!_next).*)",
    ],
};

In the middleware, we check if the pathname has a locale. If it doesn't, we get the locale and redirect to the same path with the locale. The getLocale and pathnameHasLocale functions are defined in the lib/locale.ts file.

// lib/locale.ts
export const locales = ["en", "fr", "ja"] as const;
export type Locale = typeof locales[number];

export function getLocale(pathname: string) {
    const [locale] = pathname.split("/").filter(Boolean);
    return locales.includes(locale as Locale) ? locale : locales[0];
}

export function pathnameHasLocale(pathname: string) {
    return locales.some(
        (locale) =>
            pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
    );
}

Localization

Changing displayed content based on the user’s preferred locale, or localization, is not something specific to Next.js. The patterns described below would work the same with any web application. lets assume we have ja and en as supported langauges, so we create two dictionaries for each language.

// en.json
{
    "home": {
        "title": "AriaDocs - Template",
        "description": "This comprehensive ....."
    }
}

// ja.json
{
    "home": {
        "title": "AriaDocs - テンプレート",
        "description": "Next.jsで作成されたこの包括的な ..."
    }
}

now we need to get this dictionary in our server components so we make a util in dictionary.ts where we pass locale and it will resolve the dictionary for that locale.

// lib/dictionary.ts
const dictionaries = {
    en: () => import("@/dict/en.json").then((module) => module.default),
    ja: () => import("@/dict/ja.json").then((module) => module.default)
};

export const getDictionary = async (locale) => dictionaries[locale]();

As a result, we have implemented localization and ensure that the path of our pages contains a lang code. Therefore, each page and layout will have prop lang that will be used to render the content in the appropriate language when the application is wrapped in a [lang] route. Let's see if we can accomplish this.

// pages/[lang]/article.tsx
export default async function Home({ params }: LangProps) {
    const { lang } = await params;
    const dict = await getDictionary(lang);
    return <div>
        <h1>{dict.home.title}</h1>
        <p>{dict.home.description}</p>
    </div>
}

Each page will have these lang properties, which are inside the lang route, and you can now render the content from the dictionary according to the locale. The client components can then render the content according to the locale by passing this resolved dictionary to them. If the client component is located far from the lang path, we can create a context that accepts the resolved dictionary and passes it to all of its child components. This context can then be used from the useDictionary hook.

// components/contexts/dictionary-provider

"use client";

import { Dictionary } from "@/lib/dictionaries";
import { createContext, PropsWithChildren, useContext } from "react";

export function ClientDictionary({
  children,
  dict,
}: PropsWithChildren<{ dict: Dictionary }>) {
  return (
    <DictionaryContext.Provider value={{ dict }}>
      {children}
    </DictionaryContext.Provider>
  );
}

const DictionaryContext = createContext<{ dict: Dictionary } | null>(null);

export function useDictionary() {
  const val = useContext(DictionaryContext);
  if (!val) throw new Error("...");
  return val.dict;
}

As you can see in the code above, we have created a context that accepts the dictionary and passes it to all of its child components. The useDictionary hook can then be used to access the dictionary from any child component. This is how we can keep our Next.js application internationalized without using any libraries. The below shows how we wrapping the RootLayout with the ClientDictionary.

// layout.tsx
export default async function RootLayout({children,params}) {
  const { lang } = await params;
  const dict = await getDictionary(lang);
  return (
    <html lang={lang} suppressHydrationWarning>
      <body>
        <ClientDictionary dict={dict}>
            <main>
              {children}
            </main>
        </ClientDictionary>
      </body>
    </html>
  );
}

Because the error and not-found pages in Nextjs don't receive dynamic props, they should be client components that retrieve the dictionary using the useDictionary hook. An example of turning the error page into a client component can be found below.

// error.tsx
"use client"; // Error components must be Client Components
import { useDictionary } from "@/components/contexts/dictionary-provider";
import { useEffect } from "react";

export default function Error({error}) {
  const dict = useDictionary();

  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div>
       <p>{dict.error.something_went_wrong}</p>
       <p>{dict.error.sub_text}</p>
    </div>
  );
}

Everything functions perfectly, but there is a problem: because lang is a dynamic path, all pages are made dynamic. However, we are aware of the number of languages we support, so we can create static pathways for them using generateStaticParams; the code is shown below.

// layout.tsx
import { locales } from "@/lib/locale";

export async function generateStaticParams() {
   return locales.map((locale) => ({ lang: locale }));
}

Finally, we can develop a lang-select component that will change the locale and reroute to the same page with the new locale. This will allow us to manually change the locale using the language dropdown in the user interface.

// components/lang-select.tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { LanguagesIcon } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";

const available_locales = [
  {title: "English",code: "en"},
  {title: "日本語",code: "ja"}
];

export default function LangSelect() {
  const pathname = usePathname();
  const router = useRouter();

  function handleChangeLocale(newLocale: string) {
    router.push(pathname.replace(/\/[a-z]{2}/, `/${newLocale}`));
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <LanguagesIcon className="h-[1.1rem] w-[1.1rem]" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {available_locales.map((locale) => (
          <DropdownMenuItem
            onClick={() => handleChangeLocale(locale.code)}
            key={locale.title}
          >
            {locale.title}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Hence we have successfully implemented internationalization in Next.js 15 without using any libraries. This is a simple and effective way to handle internationalization in Next.js i have used this is in one of my project AriaDocs and you can find the source code here

Is this a bug in Java?

Nisab Mohd — Thu, 10 Oct 2024 19:33:41 +0000

Recently, I wanted to recreate the flexibility of console.log in Java, so I decided to write a generic print function that could accept multiple arguments and print them comma-separated, just like console.log in JavaScript or TypeScript. The result? I was left with more questions than answers. Let me walk you through it.

The Java Code

I started by writing a simple generic function in Java that takes varargs of type T and prints them, separating the values with commas:

public class Main {
    public static void main(String[] args) {
        Main.print(1, "4", new ArrayList<>());
        // Expected type issues, but it ran without any problem!
    }

    private static <T> void print(T... args) {
        System.out.println(Arrays.toString(args));
    }
}

I expected Java’s strict typing to warn me or throw an error when I passed mixed types—Integer, String, and ArrayList—but it didn’t. The code compiled and ran just fine, printing [1, 4, []] without any complaints.

This left me astonished because, as someone who also works with TypeScript, this felt off. Shouldn't Java catch this type inconsistency?

Trying It in TypeScript

Naturally, I turned to TypeScript to see how it would handle this. I wrote a similar function in TypeScript:

function print<T>(...args: T[]) {
  console.log(args.join(","));
}

print(1, "4", []);
// TS warns (which makes sense):
// Argument of type 'string' is not assignable to parameter of type 'number'.

As expected, TypeScript threw a warning! Since TypeScript inferred the type T as number from the first argument (1), it flagged the second and third arguments ("4" and []) as invalid. This behavior made perfect sense because TypeScript enforces consistent types for generic functions.

So, Is This a Bug in Java?

Not necessarily. What’s happening here is that Java’s type system behaves differently due to type erasure. In Java, generic type information is erased at runtime, meaning that when you pass different types to T... args, Java won’t enforce that all arguments are of the same type. It simply treats the inputs as objects.

TypeScript, on the other hand, keeps strict checks at both compile and runtime, ensuring that all arguments match the inferred or declared type.

Conclusion

This experience left me pondering: should Java enforce stricter type checks like TypeScript does? Or is this flexibility an intentional part of Java’s design?

What do you think? Have you encountered similar quirks when switching between Java and TypeScript? I’d love to hear your thoughts in the comments!

Introducing the Feature-Packed Documentation Starter Template

Nisab Mohd — Thu, 28 Sep 2023 16:14:27 +0000

Hello, esteemed members of our development community!

I'm delighted to introduce a remarkable project that I've personally made the Documentation Starter Template. This template is designed to simplify and enhance your documentation creation process, offering a user-friendly and feature-rich experience. Let's delve into the exciting features that this template brings to the table:

🌟 Stunning Shadcn UI: Immerse yourself in the visually stunning Shadcn UI, meticulously designed to not only convey information but also create a captivating documentation experience.

📚 Table of Contents - Your Navigational Aid: For seamless navigation through extensive documentation, rely on the dynamic Table of Contents as your trusted guide, ensuring you always find your way.

💡 Syntax Highlighting for Code Brilliance: Code clarity is paramount. I've integrated sophisticated syntax highlighting to make your code snippets visually engaging and easy to understand.

🚀 Line Highlighting for Emphasis: When a specific line of code requires attention, the Line Highlighting feature enables you to emphasize it with finesse, ensuring important details are never overlooked.

📂 Seamless Code File Names: Keeping your code organized is essential. With the seamless display of code file names, your documentation maintains a structured and easily navigable appearance.

🌓 Customizable Light and Dark Modes: Personalize your documentation experience with a choice between light and dark modes, ensuring optimal comfort and readability in any environment.

🔍 Effortless Doc Search: Empowered by a powerful search functionality, you can quickly locate specific information, ensuring you find what you need precisely when you need it.

📝 MDX-Powered Content: Enjoy unparalleled flexibility as all data on the page is dynamically fetched from MDX files, simplifying content management and updates.

🚀 next-mdx-remote Magic: This template leverages "next-mdx-remote" for seamless MDX compilation, eliminating compatibility concerns and delivering a smoother, more reliable experience.

🛠️ Custom Components in MDX: Tailor your documentation to perfection by incorporating custom components within MDX files, allowing you to meet your specific requirements effortlessly.

🚀 Next.js 13 for Blazing-Fast Performance: The template is powered by the latest Next.js 13, ensuring lightning-fast load times and unmatched responsiveness.

🔄 React Server and Client Components: Elevate user engagement with dynamic interactivity using React server and client components, breathing life into your documentation.

🧪 Enhanced Content Processing with Rehype Plugins: To take your content processing capabilities to the next level, I've harnessed the power of Rehype plugins, ensuring your documentation is informative and engaging.

I'm thrilled to share this personal project with you, and I believe it will empower you to create outstanding documentation for your projects. As the creator of the [Repo Name] Documentation Starter Template, I'm here to support you on your documentation journey.

Feel free to explore this project further on the GitHub repository and share your valuable feedback. Your insights are instrumental in helping me refine and perfect this template.

Screenshots

Thank you for being an integral part of our community, and I can't wait to see the incredible documentation you create using these innovative features.

Stay tuned for more updates,

ChatGPT clone with Next13 & OpenAPI

Nisab Mohd — Sun, 16 Jul 2023 17:30:51 +0000

🤖 Introducing NextGPT: Conversational AI Powered by Next.js 13, React 18, Tailwind CSS, Shadcn UI, and Prisma! 🚀

I'm excited to present ChatGPT, a powerful conversational AI clone developed using cutting-edge technologies. ChatGPT leverages the latest advancements, including Next.js 13, React 18, Tailwind CSS, Shadcn UI, and Prisma, to deliver exceptional conversational experiences.

🔗 GitHub Repository: nisabmohd/ChatGPT

🚀 Key Technologies and Features:

Next.js 13: ChatGPT is built as a clone using Next.js 13, a highly versatile framework for server-rendered React applications. It offers improved performance and exciting new features to enhance your development experience.
React 18: Utilizing the latest version of React, ChatGPT benefits from enhanced performance, improved concurrency, and new features like server components, allowing for more efficient and dynamic user interfaces.
Tailwind CSS: ChatGPT adopts Tailwind CSS, a utility-first CSS framework, to simplify styling and achieve a consistent and responsive user interface. Customize and extend styles effortlessly to match your project's requirements.
Shadcn UI: With Shadcn UI, ChatGPT showcases beautiful and interactive components that enhance the visual appeal and user experience of your conversational AI application. It provides a wide range of UI elements to create engaging interfaces.
Prisma: ChatGPT integrates Prisma, a modern database toolkit, enabling seamless and efficient data management. Prisma simplifies database interactions and allows for flexible data modeling, making it easier to store and retrieve conversational data.

🌐 Use Cases:

Chatbots: Develop intelligent and conversational chatbots capable of providing personalized and contextually relevant responses to users' inquiries.
Virtual Assistants: Create virtual assistants that can assist users by offering helpful information, performing tasks, and interacting seamlessly through conversations.
Customer Support: Enhance customer support experiences by integrating ChatGPT into your systems, providing efficient and accurate responses to customer queries and issues.
Language Generation: Leverage ChatGPT's powerful language generation capabilities to generate creative and contextually appropriate text for various applications.

🖥️ Get Started:
The repository provides comprehensive documentation and code samples to help you get started with ChatGPT. Follow the installation instructions and explore the examples to integrate this conversational AI clone into your projects seamlessly.

🔗 Explore the Repository: nisabmohd/ChatGPT

📢 Contributions:
Contributions to the project are welcome and encouraged! Help improve ChatGPT by submitting bug fixes, new features, or enhancements to its functionality. Let's make conversational AI even more powerful and accessible together!

📧 Feedback and Support:
If you have any questions, feedback, or need support while working with ChatGPT, please don't hesitate to open an issue on the GitHub repository. Your feedback and suggestions are invaluable in shaping the future of ChatGPT.

Experience the potential of conversational AI with ChatGPT, powered by Next.js 13, React 18, Tailwind CSS, Shadcn UI, and Prisma. Let's create engaging and intelligent chat experiences! 🚀

Create your own API fetching & caching mechanism in React

Nisab Mohd — Fri, 30 Jun 2023 19:42:27 +0000

To fetch data from an API and display a response in a React application, you need to create a component that handles the API request. Inside the component, you can use the useState hook to initialize a state variable to hold the fetched data. Then, use the useEffect hook to fetch the data when the component mounts. Inside the useEffect hook, make an HTTP request to the API using methods like fetch or a library like Axios. Once you receive the response, update the state variable with the fetched data. Finally, render the response in the component's JSX, accessing the relevant data from the state.

Yup that is great but so much of code and not efficient, The main thing is you cant cache you API responses, So if your server is bit slow and you don’t want to keep making request for same query then caching at client side will be the an option for you. Caching API responses can improve the performance and efficiency of your application by reducing unnecessary network requests.

There are plenty of libraries which gives you this out of box, such as TanStackQuery and few more.

Understanding how things work instead of relying solely on libraries can have several advantages:

Flexibility and customization: When you have a deep understanding of how things work, you have more control and flexibility over your code. You can customize and adapt solutions to meet specific requirements without being limited by the functionalities provided by a library.
Troubleshooting and debugging: When you encounter issues or bugs in your code, having a deeper understanding of the underlying mechanisms can help you troubleshoot and debug more effectively. You can identify and fix problems by examining the code and the logic behind it.
Efficiency and performance: Libraries often come with additional overhead, such as extra dependencies, size, or processing time. By understanding how things work, you can optimize your code for efficiency and performance, potentially avoiding unnecessary dependencies or streamlining processes.
Learning and growth: Exploring how things work on a fundamental level allows you to expand your knowledge and skills. It enhances your ability to grasp new concepts, solve complex problems, and adapt to changing technologies and frameworks.

However, it’s important to strike a balance. Libraries and frameworks can provide convenience, speed up development, and handle complex tasks more efficiently. They are often built by experts and undergo rigorous testing. Leveraging libraries can save time and effort, especially for common or well-established functionalities.

Ultimately, the choice between understanding how things work and relying on libraries depends on the specific context, project requirements, and personal preferences. A combination of both approaches can often yield the best results, leveraging libraries when appropriate and delving into the underlying concepts when necessary.

In order to understand what is caching lets understand first what is cache? In computing, a cache is a temporary storage location that stores frequently accessed data or instructions in order to expedite future requests for that data. The purpose of a cache is to improve system performance by reducing the time and resources required to retrieve data from the original source.

Okay now we understand that cache means a temporary data storage, so how do we store this cache, but more importantly when we store some data how will we be accessing the particular data you need in an efficient way. So you can store a cache with a key. So best way is an creating and object with keys and data as value, or a map data structure to perform the same.

So here starts the implementation of cache in react (not fetching just caching).

This cache should be available to all components, so lets keep this over a context and wrap over main component.

import { createContext, useContext, ReactNode } from "react";

type ContextType = {
  getCache: (key: string) => any;
  setCache: (key: string, value: any, ttl?: number) => void;
  clearCache: () => void;
  deleteCache: (key: string) => void;
};

type cacheBody = {
  expiry: Date;
  data: any;
};

const CacheContext = createContext<ContextType | null>(null);

export function useCache() {
  return useContext(CacheContext) as ContextType;
}

export default function CacheProvider({ children }: { children: ReactNode }) {
  const map = new Map<string, cacheBody>();

  function getCache(key: string) {
    const cacheValue = map.get(key);
    if (!cacheValue) return undefined;
    if (new Date().getTime() > cacheValue.expiry.getTime()) {
      map.delete(key);
      return undefined;
    }
    return cacheValue.data;
  }

  function setCache(key: string, value: any, ttl: number = 10) {
    var t = new Date();
    t.setSeconds(t.getSeconds() + ttl);
    map.set(key, {
      expiry: t,
      data: value
    });
  }

  function clearCache() {
    map.clear();
  }

  function deleteCache(key: string) {
    map.delete(key);
  }

  const contextValue = {
    getCache,
    setCache,
    clearCache,
    deleteCache
  };

  return (
    <CacheContext.Provider value={contextValue}>
      {children}
    </CacheContext.Provider>
  );
}

As now the context is created lets wrap our App by this CacheContext. We can see the cache context gives you four methods to set, delete, get & empty the cache, The set method takes a key string , a value of type any and a ttl(Time to live in seconds) which determines when this cache should be invalidated. The get method gives you cache if present under expiry time otherwise gives you undefined, The other two functions are to remove a cache or to empty cache respectively.

<CacheProvider>
    <App />
</CacheProvider>

So, now our caching mechanism is ready, but as our aim is to cache the API responses, But now if we check if cache is present in every component while making request would not be a great idea. Instead we can create a custom hook which will do everything for us out of the box, We just need to provide API URL, key and few config.

import { useEffect, useState } from "react";
import { useCache } from "../contexts/Cache";
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";

type CustomAxiosConfig = AxiosRequestConfig & {
  key: Array<unknown>;
  initialEnabled?: boolean;
  cache?: {
    enabled?: boolean;
    ttl?: number;
  };
  onSuccess?: (data: AxiosResponse) => void;
  onFailure?: (err: AxiosError) => void;
};

function keyify(key: CustomAxiosConfig["key"]) {
  return key.map((item) => JSON.stringify(item)).join("-");
}

export default function useFetch<T = any>({
  key,
  initialEnabled = true,
  cache,
  ...axiosConfig
}: CustomAxiosConfig) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<T | undefined>();
  const [error, setError] = useState<any>();
  const { getCache, setCache, deleteCache } = useCache();

  const refetch = (hard: boolean = false) => {
    setLoading(true);
    setError(undefined);
    const cacheKey = keyify(key);
    if (cache?.enabled && getCache(cacheKey) !== undefined && !hard) {
      setData(getCache(cacheKey));
      setLoading(false);
      setError(undefined);
      return;
    }
    axios(axiosConfig)
      .then((data) => {
        setData(data as T);
        if (cache?.enabled) setCache(cacheKey, data, cache.ttl);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  function inValidate(invalidationKey: CustomAxiosConfig["key"]) {
    deleteCache(keyify(invalidationKey));
  }

  useEffect(() => {
    if (initialEnabled) refetch();
  }, []);

  return { loading, data, error, refetch, inValidate } as const;
}

Here is an custom hook called useFetch which can be called in a component and it provides you all the benefits of state management. You don’t have to maintain multiple states such as loading, error and data in component. This is all returned by the hook itself. The hook also provides you methods to refetch and invalidate a query.

import useFetch from "./hooks/useFetch";

export default function App() {
  const { loading, error, data, refetch } = useFetch({
    url: "https://randomuser.me/api",
    method: "get",
    key: ["app", "get", "user", { name: "nisab" }],
    cache: {
      enabled: true,
      ttl: 10
    }
  });

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Something went wrong</p>;
  }
  return (
    <div className="App">
      {JSON.stringify(data, null, 4)}
      <br />
      <button onClick={() => refetch()}>get user</button>
    </div>
  );
}

Here is an implementation of useFetch hook which demonstrates the usage of fetching data and caching it if needed. The useFetch hook takes a config shown above where caching is optional. The hook config parameter also takes onSuccess & onFailure for callbacks and you can provide all other axios config in the parameter itself.

If you want to look complete implementation of this cache mechanism in react and the output how this works. Then do check out this sandbox repo where the complete working repo is hooked up.

Code Sandbox

Node Express Template

Nisab Mohd — Sun, 28 May 2023 20:01:12 +0000

🔗 Exciting News! Introducing the Node Express Template for Node.js Web Applications! 🔗

Are you a developer looking to streamline your Node.js Express projects? Look no further! I'm thrilled to share the Node Express Template, a game-changing repository designed to boost your development productivity and ensure code reliability.

📁 Key Features:

✨ TypeScript Magic: Harness the power of TypeScript, enabling type-safe and error-free development for your Node.js applications.

🔍 Robust Validation with Zod: Ensure data integrity and validate inputs effortlessly using the Zod library. Say goodbye to runtime errors and embrace secure and reliable code.

🛠️ Middleware Galore: Benefit from an extensive collection of middleware options, including body parsing, CORS, and logging. Simplify development and enhance security without compromising on flexibility.

📂 Scalable Folder Structure: Enjoy a well-organized and scalable codebase with a folder structure optimized for easy navigation and maintainability.

🚀 Getting Started:

1️⃣ Clone the Repository: Get started by cloning the repository.

2️⃣ Install Dependencies: Navigate to the project directory and install the dependencies.

3️⃣ Empower with Configuration: Customize your project's configurations to fit your specific needs. Seamlessly adapt to various environments with ease.

4️⃣ Rock Solid Error Handling: Handle errors gracefully using specialized middleware, ensuring a smooth user experience and quick debugging.

🚀 Supercharge your Node.js Express projects with the Node Express Template today! 🚀

Check it out here: GitHub Repository

Join the community and elevate your development experience with TypeScript, Zod, and an array of powerful middleware options. Let's build robust and secure applications together! 💪🚀

Check out my Medium Clone on GitHub

Nisab Mohd — Sun, 09 Apr 2023 15:52:58 +0000

Hi everyone,

I wanted to share with you a project I've been working on recently - a Medium clone! If you're not familiar with Medium, it's a popular platform for writers and bloggers to share their content with a wider audience.

I created a clone of Medium using React, Node.js, and MongoDB. The clone includes many of the same features as Medium, such as creating and publishing articles, following other users, and leaving comments on articles.

I'm really proud of how the clone turned out, and I've made the code available on my GitHub profile. You can check it out here: https://github.com/nisabmohd/Medium-clone

Feel free to fork the repository and use it for your own projects. And if you have any feedback or suggestions for improvement, I'd love to hear them!

Thanks for taking the time to check out my Medium clone. I hope you find it useful!

Data Structures Internal Implementations

Nisab Mohd — Tue, 16 Aug 2022 07:42:00 +0000

Data Structures

We know how data structure plays an important role in interview preparation as well for problem solving.

Usually we use internal data structures and we don’t know how things are working behind. Using a data structure without knowing its working its useless. This data structure implementation are asked in interview and if you know how to implement a data structure you can design your own custom data structure according to your needs.

So you understood that data structure implementation will not only help you in interview but also can be used in development for creating custom structures. So from where we need to learn this?

I have made a GitHub repository containing all the internal collection framework of Java plus Data structures needed in daily
life. Below is the list of Data structures in my GitHub repo .

ArrayList
LinkedList (Single , Double , Circular)
Stack
Queues (Standard, Circular , Deque )
Trees ( Binary ,Binary Search , N-Arry )
Map ( HashMap , LinkedHashMap , TreeMap )
Set ( HashSet , LinkedHashSet , TreeSet)
Heap ( MaxHeap , MinHeap )
Trie
Graph

This repo is completely free and share with your friends and
star/fork the repo if its helping you. Happy Coding

nisabmohd / Data-Structures-Java

I've implemented a comprehensive set of generic data structures in Java, including arrays, linked lists, stacks, queues, trees, and more, ensuring versatility and efficiency in data handling.

Data Structure Implementations in Java

We know how data structure plays an important role in interview preparation as well for problem solving.

So you understood that data structure implementation will not only help you in interview but also can be used in development for creating custom structures. So from where we need to learn this?

I have made this GitHub repository containing all the internal collection framework of Java plus Data structures needed in daily life. Below is the list of Data structures in my GitHub repo

S.NO

Data Structure

Prerequisite

Lists

S.NO	Data

…

View on GitHub

opencodegrep : opensouce code compiler

Nisab Mohd — Sat, 09 Jul 2022 11:56:35 +0000

opencodegrep is an open source online code compiler for C , C++ , Python , Java. Do check out this opensource project, star and fork this repo and bug report or feature request also appreciated. Open PR
repo link

Features :
Realtime code collaboration with multiple users , Error shown at which line , Output formatted , Comments , Syntax Highlight , Dark / light mode , Auto indent , Execution time

DS CUSTOM IMPLEMENTATIONS

Nisab Mohd — Mon, 20 Jun 2022 19:32:57 +0000

Hello everyone I have started this repository in which all data structures and collection framework implementations is done in java.
Do check out and share with people
https://github.com/nisabmohd/DS-Implementations

Tweeter - Solution for a challenge from Devchallenges.io.

Nisab Mohd — Fri, 10 Jun 2022 04:33:17 +0000

Tweeter is a Twitter clone with all twitter functionalities.
A solution for a challenge from devchallanges.io

GitHub repo : https://github.com/nisabmohd/Tweeter
Challenge link : https://devchallenges.io/challenges/rleoQc34THclWx1cFFKH