DEV Community: Nandan Kumar

Give it a read.

Nandan Kumar — Thu, 25 Jun 2026 05:13:21 +0000

Nandan Kumar

Jun 25

I Got Tired of Goodreads. So I Built Kitaaben.com

#books #bookreview #bookstagram

3 min read

I Got Tired of Goodreads. So I Built Kitaaben.com

Nandan Kumar — Wed, 24 Jun 2026 15:57:55 +0000

I read a lot. Not as much as I'd like to, but enough that I needed a place to keep track of it all.

For years, Goodreads was that place. Then Amazon bought it in 2013 and... nothing happened. No meaningful update. No design refresh. No new features worth talking about. Just a bloated, slow, social-feed-first app that cared more about what your friends were reading than what you actually wanted from a reading tracker.

So I stopped waiting and built my own. It's called Kitaaben.

What Even Is Kitaaben?

Kitaaben is a private bookshelf tracker. That's it, honestly.

You sign in with Google, add your books, and start tracking. No followers, no public profile, no algorithm telling you what to read next. Just your books, organized the way you want them.

I built it as a React SPA, backed by Firestore for real-time sync and Google OAuth for auth. It works as a PWA too, so you can install it directly on your phone or desktop and it behaves like a native app. Even logs notes offline and syncs when you're back online.

The stack is deliberately simple. I didn't want to over-engineer a reading tracker.

The Features That Actually Matter

Reading Progress Tracking

You can log how many pages you've read, mark a book as "Reading", "To Read", or "Completed", and watch your progress bar move. Small thing, weirdly satisfying.

Yearly Reading Goals

Set a target at the start of the year. Kitaaben shows you a clean gauge of where you stand. No gamification, no streaks, no push notifications guilt-tripping you into reading. Just the number.

The AI Review Assistant

This one is my favourite. You know how you finish a book, you have all these raw thoughts, and then you sit down to write a review, and your mind goes blank?

Kitaaben fixes that. You log rough chapter notes as you read. When you're done, one click and the AI turns your messy notes into a proper, readable review. It uses Gemini under the hood, server-side, so nothing weird is happening with your data.

Beautiful Bookshelf UI

You can pick colour palettes for your book spines, attach local photos, or link directly to publisher dust jackets. Your shelf actually looks good. Goodreads shelf looks like it was designed in 2009 because it was.

Cloud Sync + Offline PWA

Everything syncs in real-time to Firestore. Works across your phone, tablet, and desktop. Add notes on a flight, they'll sync when you land.

Your Data Is Yours

No corporate sponsors. No ads. No one is analysing your reading habits to sell you something. The free tier is genuinely free, forever. If you want AI reviews and premium themes, there's an Elite plan, but the core is completely free.

Kitaaben vs Goodreads — Let's Be Honest

	Goodreads	Kitaaben
Last major update	Years ago	Actively built
Social feed	Yes, and you can't remove it	No. Just your books.
Ads	Yes	Never
Data privacy	Amazon owns everything	Private, encrypted, yours
AI reviews	No	Yes
Offline support	No	Yes (PWA)
Design	Dated	Clean, warm, actually nice
Free tier	Yes	Yes

Goodreads isn't bad because it was badly built. It's bad because it stopped being built. Amazon has no incentive to fix it. It already has 150 million users who have nowhere to go.

Kitaaben is built for readers who are tired of that and just want something that works, looks good, and doesn't treat your reading life as a data point.

Who Is It For?

Honestly? People like me.

If you read regularly and want a clean private place to track it, Kitaaben will feel like a breath of fresh air. If you rely on Goodreads mainly for its social features — seeing what friends are reading, community reviews, that sort of thing — Kitaaben isn't trying to replace that. It's not a social network. It never will be.

It's a personal reading sanctuary. That's the whole point.

Try It

kitaaben.com — Sign in with Google, takes about 60 seconds to set up.

If you have feedback, brutal or otherwise, reach me at namastay@kitaaben.com or find me on Twitter. I'm building this in the open and I actually read every message.

Thanks, Nandan

How to Convert Nested Objects to Flat Objects in JavaScript.

Nandan Kumar — Wed, 04 Mar 2026 00:59:34 +0000

I am sure you have been asked this question in one of the interviews.

It looks simple at first. But the interviewer is actually checking whether you understand recursion, objects, and how JavaScript treats arrays.

So basically, you are given a nested object, and you are expected to simplify it by removing the nesting and printing it in a non-nested format.

Here is a simple input and output :

const input = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};

Output:

 { a: 1, 
    b_c: 2, 
    b_d_e: 3, 
 }

Now look at the solution :

function flatten(obj, prefix = "", res = {}) {
    // Loop through every key in the object
    for (let key in obj) {

        // Skip properties coming from prototype chain
        if (!obj.hasOwnProperty(key)) return;

        // If prefix exists, append current key using _
        // Otherwise just use the key itself
        let objKey = prefix ? `\({prefix}_\){key}` : key;

        let value = obj[key];

        // If value is an object and not null,
        // recursively flatten it
        if (typeof value === 'object' && value !== null) {
            flatten(value, objKey, res);
        } else {
            // If it's a primitive value, assign it directly
            res[objKey] = value;
        }
    }

    // Return the accumulated result
    return res;
}

Let us test it.

const input = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: [1, 2]
    }
  }
};

console.log(flatten(input));

// {a: 1, b_c: 2, b_d_e_0: 1, b_d_e_1: 2 }

Now observe something interesting.

It flattens the nested object correctly.

But it also destructures the array and adds indexes as keys.

Why do you think that happened?

💡

As you know, everything in JavaScript is an object. Even Arrays.

So when we check:

typeof value === 'object'

Arrays also satisfy that condition.

That means our recursive call is going inside arrays as well, and treating indexes (0, 1) like object keys.

That is why we are getting:

b_d_e_0: 1
b_d_e_1: 2

So, how do we fix it?

Simple.

We add one more condition to ignore Arrays.

function flatten(obj, prefix = "", res = {}) {
    for (let key in obj) {

        // Ensure we are working only with object's own properties
        if (!obj.hasOwnProperty(key)) return;

        let objKey = prefix ? `\({prefix}_\){key}` : key;
        let value = obj[key];

        // Only recurse if:
        // 1. value is an object
        // 2. value is not null
        // 3. value is NOT an array
        if (
            typeof value === 'object' &&
            value !== null &&
            !Array.isArray(value)
        ) {
            flatten(value, objKey, res);
        } else {
            // Directly assign primitives and arrays
            res[objKey] = value;
        }
    }

    return res;
}

Testing Both Cases

const input1 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: [1, 2]
    }
  }
};

const input2 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};

console.log(flatten(input1));
console.log(flatten(input2));

// { a: 1, b_c: 2, b_d_e: [1, 2] }
// { a: 1, b_c: 2, b_d_e: 3 }

That is it.

A simple recursion problem. But it tests whether you truly understand:

How objects work
How arrays behave internally
How recursion accumulates results
And how small edge cases can break your logic

This is why interviewers love this question.

That’s all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

Built something over last weekend, thought I will share with my dev community. https://bailoutt.com

Nandan Kumar — Tue, 23 Sep 2025 16:11:02 +0000

BailOutt | Escape Awkward Situations | AI Fake Call Service | Social Anxiety Solution

Never get trapped in awkward situations again. Get real, believable phone calls from real numbers when you need them most. BailOutt’s AI-powered fake call service helps you escape bad dates, long meetings, and social anxiety with ease.

bailoutt.com

HTML Pitfalls and Gotchas Every Developer Should Avoid

Nandan Kumar — Fri, 05 Sep 2025 04:23:19 +0000

HTML is easy, said every developer ever.

HTML is deceptively simple. You open a tag, you close a tag, and something appears on screen. But beneath that simplicity lurk gotchas that can silently break your layout, wreck your SEO, or make your site look unprofessional when shared on social media.

In this world of frameworks and libraries, its easy to miss some of the basic stuff that needs to be taken care of in your webpage, because your frameworks boilerplate code adds up most of the stuff and takes care of the basics. But its always good to know some of them that are important or arent added by your framework by default.

Here are the critical HTML pitfalls to avoid and how to fix them immediately.

1. Forgetting the DOCTYPE Declaration

Skipping the doctype triggers something called as the quirks mode , where browsers start behaving like it's 1999. This results in inconsistent CSS rendering and unpredictable JavaScript behaviour across browsers.

Always declare it at the very top of your HTML file:

<!DOCTYPE html>

2. Missing the Character Encoding Meta Tag

Without proper character encoding, special characters turn into garbled symbols i.e. (). This breaks accented letters, smart quotes, and emojis, and it makes your webpage content look broken and unprofessional.

Place this inside the <head> tag:

<meta charset="UTF-8">

3. Forgetting the Viewport Meta Tag

Has it ever happened to you? Your page zooms awkwardly when users double-tap on mobile; Thats because you're missing the viewport meta tag. Without it, your site isn't truly responsive, regardless of your CSS.

Add this to your <head> section :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Skipping Open Graph Meta Tags

Ever shared your blog on LinkedIn, Twitter, or Facebook only to see a bare URL with no preview card? That's because Open Graph tags are missing. These tags control how your content appears when shared on social media.

Add these OG tags for rich sharing previews:

<meta property="og:title" content="My Blog Title">
<meta property="og:description" content="A quick guide to avoiding HTML gotchas.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/blog">

Pro tip: Also consider adding Twitter Card tags for optimal Twitter/X previews.

5. Ignoring Content Security Policy

Content Security Policy (CSP) helps prevent cross-site scripting (XSS) attacks and other code injection vulnerabilities. It tells browsers which scripts, styles, and resources are allowed to run on your page.

Start with a basic CSP meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline';">

Note: This is a starting point. Adjust the policy based on your specific needs and third-party resources.

6. Improper Nesting of Elements

Browsers are forgiving, but invalid HTML nesting leads to unpredictable rendering and can break JavaScript that relies on the DOM structure.

Common nesting mistakes:

<!-- Inline elements shouldn't contain block elements -->
<span><div>Wrong!</div></span>
<!-- Paragraphs can't contain divs -->
<p><div>Also wrong!</div></p>

Follow these nesting rules:

Inline elements (<span>, <a>, <strong>) should never contain block-level elements (<div>, <section>, <p>)
<p> Tags should only wrap inline content, never block-level elements
When in doubt, check the HTML specification for content models

Conclusion

These six HTML gotchas might seem minor, but they're the difference between a professional website and one that breaks in subtle, embarrassing ways. Take five minutes to audit your HTML templatesyour future self (and your users) will thank you.

Quick checklist for your next project:

DOCTYPE declaration at the top
UTF-8 character encoding
Viewport meta tag for mobile
Open Graph tags for social sharing
Basic Content Security Policy
Valid HTML nesting

Remember: browsers are forgiving, but that doesn't mean we should be sloppy. Clean HTML is the foundation of a reliable web experience.

Thats all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

Accessibility in Front End Development

Nandan Kumar — Sat, 09 Aug 2025 16:57:50 +0000

Let me start with this: Accessibility is not a buzzword; its a crucial feature that every web application should have.

It should not be mandated by the government, but rather it should be taken as the responsibility of every developer to make their websites accessible to all users.

Making a website accessible will not just help you avoid government penalties, it will also give you a wider user base. Accessibility is all about making your website accessible to everyone.

On that note, lets get this blog started -

What is Accessibility

Accessibility is ensuring that your web application is usable by people with disabilities, including people with

Visual impairment (Blindness, Colour Blindness) -
Hearing loss
Motor Impairment ( Difficulty using the mouse)
Cognitive limitation (Dyslexia, Attention Disorder)

Accessibility Core Principle (POUR)

Principle	Description
Perceivable	Content must be perceivable by all (e.g., alt text, captions)
Operable	All functionality must work via keyboard or assistive devices
Understandable	Content should be readable and predictable
Robust	Must work with various assistive technologies

How can people with disabilities use the applications

Accessibility Need	Requirement / Support
Visual Impairment	Should be usable with screen readers, VoiceOver, and font scaling support
Hearing Loss	Closed captions for video and audio
Motor Impairment	Keyboard accessibility support
Cognitive Limitation	Simple language

Accessibility Standards

Web Content Accessibility Guidelines (WCAG)

Defines Accessibility levels as A , AA & AAA

Accessible Rich Internet Applications (ARIA)

Adds accessibility support to non-semantic elements.

Americans with Disabilities Act (ADA)

Legal mandate in the US for accessible digital content

How to make a web application Accessible

Use Semantic Tags

Use tags like <button> , <nav>, <header>, <section> etc.
Avoid using div and span all over your application

Support Keyboard Accessibility

Actions should be usable via. keyboard, including opening modals, dropdowns, and toasts.
Use tabindex to align focus correctly.
Use focus, keydown event listeners correctly

Use Aria Roles when needed

Use aria-label, aria-hidden, role="dialog", etc., when native semantics are not sufficient
https://w3c.github.io/aria/

Focus Management

Trap focus in modals
Restore focus when modals close
Visibly indicate focus using focus-visible or outline

Maintain Colour Contrast

4.5: 1 for normal text in AA Standard
7:2 for AAA
Check contrast: https://webaim.org/resources/contrastchecker/

Using Images and Other Media

Use alt text for images
Add transcripts/captions for videos/audio
Avoid autoplaying media files. i.e. Video

Tools for Accessibility Testing

The tools listed below are some of the most common tools for testing accessibility in a web application.

Tool	Use Case
axe DevTools	Chrome extension to audit a11y
Lighthouse	Built-in browser audits
NVDA / VoiceOver	Screen reader testing
Tab key	Test keyboard navigation

WCAG AAA is harder to implement, and most website are expected to maintain AA compliant.

I hope by the end of this post, you have a good idea of why accessibility is important and how you can add accessibility support to your application.

Thats all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

Instagram Front-End System Design

Nandan Kumar — Fri, 01 Aug 2025 05:19:41 +0000

Let me start by putting one thing forward: System design is not about writing a memorised answer on paper. Its more about thinking, planning and strategising.

Hence, there is no correct answer, but a correct Framework. Understanding and approaching system design with the RADIO RADIO framework (Requirements, Architecture, Design, Implementation, Optimisation) helps you streamline your answer.

Additionally, you can treat this blog as a framework for everything that requires building a feed, i.e. Twitter, Facebook, or Orkut, for that matter.

But everything beyond that is dependent on your knowledge and understanding of the system.

Designing a platform like Instagram might sound overwhelming at first, but breaking it down using the RADIO framework (Requirements, Architecture, Design, Implementation, Optimisation) makes it manageable and actually kinda fun. I recently took a shot at this, and here's what I came up with, plus a few tweaks and lessons learned along the way.

Requirements

🔧 Functional Requirements:

News Feed that shows text, images, and videos
User info (photo, username) on each post
Like, comment, and share buttons
Pagination or infinite scroll
Lazy loading for media

🚫 Non-Functional Requirements:

Fully responsive (mobile + desktop)
Accessibility compliant
Optimised for performance
Supports A/B testing for features
Localisation and translation support

Bonus points if it supports offline mode and has a fallback UI.

Architecture

Start by defining your core building blocks:

📂 Components:

PostCard
├── TextContent
├── ImageGallery / VideoPlayer
├── UserHeader (avatar + name)
├── PostActions (like/comment/share)

Feed
└── PostCard[]

CommentSection
LikeButton
ShareButton

Each of these is reusable and maintainable the key to scalable front-end architecture.

Design

Keep your data models clean and normalised. Here's what worked well:

type Post = {
  id: string;
  text?: string;
  images?: string[];
  video?: string;
  userId: string;
  comments: Comment[];
  likes: Like[];
  createdAt: string;
};

type User = {
  id: string;
  name: string;
  username: string;
  avatar: string;
  postIds: string[];
};

type Like = {
  userId: string;
  postId: string;
};

type Comment = {
  id: string;
  userId: string;
  postId: string;
  text: string;
  createdAt: string;
};

Avoid embedding full User objects inside posts
Use IDs to reference everything
Support multiple images per post (carousel style)

Implementation

Here's how the main flow looks:

Feed Page : loads posts using a custom hook (useFetchPosts)
Loop through PostCard components to render UI
Use libraries like React Query or SWR for cache + fetch
Defer comment loading until user clicks "View all comments"

Suggested folder structure:

/components
  /Post
    PostCard.tsx
    PostMedia.tsx
    PostFooter.tsx
  /User
  /Comment
/hooks
  useFetchPosts.ts
/pages
  index.tsx // News Feed

Optimization

Performance matters more than ever. Here's what to prioritise:

📸 Lazy load images and videos
🔄 Use IntersectionObserver for infinite scroll
🏔 PWA support (with service workers)
📑 Bundle splitting + code-splitting
🚀 Skeleton loaders while fetching
🌍 Localised text using react-i18next
📉 Memoise unchanging components with React.memo

TL;DR

Designing Instagram from the front-end isnt about copying their UI; it's about building a thoughtful system that can scale, perform, and feel native on any device. Use the RADIO framework to break down the chaos into manageable parts, and you'll be surprised how fast it comes together.

Polyfills of JS Array Methods - Flat, Map, Filter & Reduce

Nandan Kumar — Tue, 13 May 2025 14:03:11 +0000

Alright, confession time, Ive been writing JavaScript for a while now, but theres something oddly satisfying about going back to the basics. You know, like trying to bake your bread from scratch even though you live next to a bakery. Thats exactly what this post is about: baking our versions of some classic array methods.

Want to understand what polyfills are? I have covered them in my blog Polyfills for Call, Apply & Bind.

Why? Because it's fun. Because it's educational. And because the next time someone throws a technical interview curveball at you, like "Can you write your own reduce" and youll casually say, "Sure, do you want it with comments or without?"

Today, were building polyfills for:

flat()
map()
filter()
reduce()

Lets roll.

`flat()` A Pancake Stack for Arrays

if(!Array.prototype.myFlat){
    Array.prototype.myFlat = function(depth){
        if(depth < 0) return this;

        const flatten = function(arr, depth){
            return arr.reduce((acc,ele)=>{
                if(Array.isArray(ele) && depth > 0){
                    acc = acc.concat(flatten(ele,depth -1));
                }else{
                    acc.push(ele);
                }
                return acc;
            },[])
        }

        return flatten(this,depth);
    }
}

const nestedArray = [1, [2, [3, [4, 5]]], 6];

console.log(nestedArray.myFlat()); // Default depth = 1 => [1, 2, [3, [4, 5]], 6]
console.log(nestedArray.myFlat(2)); // Depth = 2 => [1, 2, 3, [4, 5], 6]
console.log(nestedArray.myFlat(3)); // Depth = 3 => [1, 2, 3, 4, 5, 6]
console.log(nestedArray.myFlat(0)); // Depth = 0 => [1, [2, [3, [4, 5]]], 6]

Just a basic flattening function. Will it replace your backend job? No. But will it make you feel cool? Absolutely.

`map()` Because Sometimes Arrays Need a Makeover

if(!Array.prototype.myMap){
    Array.prototype.myMap = function(fn, thisArg){
       if(this == null)  { return new Error("Not an array")};

       if(typeof(fn) != 'function') {return new Error("Not an array")}

       let result = [];

       for(let i=0; i< this.length; i++){
           if(i in this){
               result.push(fn.call(thisArg,this[i], i, this));
           }
       }
       return result;
    }
}

a = [1,2,3,4,5].myMap(function (mem) {
    return mem*mem;
})

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

Simple and clean. No magical spells involved.

`filter()` Only the Worthy Shall Pass

if(!Array.prototype.myFilter){
    Array.prototype.myFilter = function(fn, thisArg){
       if(this == null)  { return new Error("Not an array")};

       if(typeof(fn) != 'function') {return new Error("Not an array")}

       let result = [];

       for(let i=0; i< this.length; i++){
           if(i in this && fn.call(thisArg,this[i], i, this)){
               result.push(this[i]);
           }
       }
       return result;
    }
}

b = [1,2,3,4,5].myFilter(function (mem) {
    return mem > 1;
})

console.log(b) //[ 2, 3, 4, 5 ]

Give it a test run with your own weird conditions. Even filter out people who don't like coffee; your call.

`reduce()` The Boss Level

if(!Array.prototype.myReduce){
    Array.prototype.myReduce = function(callback,initialValue){
        if(this == null) {return new Error("Not an Array");}

        if(typeof(callback) != 'function') {
            return new Error("Not a function");
        }

        let arr = this;
        let len = arr.length;

        let hasInitial = arguments.length > 1;
        let accumulator = hasInitial ? initialValue : arr[0];
        let startIndex = hasInitial ? 0 : 1;

        if (len === 0 && !hasInitial) {
          throw new Error("Reduce of empty array with no initial value");
        }


        for (let i = startIndex; i < len; i++) {
          if (i in arr) {
            accumulator = callback(accumulator, arr[i], i, arr);
          }
        }

        return accumulator;
    }
}

let a = [1, 2, 3].myReduce((acc, val) => acc + val, 0);
console.log(a);

Reduce is like that friend who seems intimidating at first, but once you get to know them, they carry the whole squad.

Why Do This?

You may never need to use these in a production app. But knowing how they work helps you:

Understand JavaScript fundamentals better.
Appreciate the built-in methods more.
Have something cool to say in interviews or while pretending to debug in coffee shops.

So go ahead, mess around with these, add your own flavour, and maybe even extend a couple more methods just for fun.

Thats all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

Polyfills for Call, Apply, and Bind — Let’s Build Them From Scratch

Nandan Kumar — Mon, 28 Apr 2025 16:51:28 +0000

Okay, so if you have ever deep-dived into JavaScript interviews or just casually scrolled through dev Twitter (yes, thats a thing), you would have stumbled upon someone throwing around the words polyfill like they were born building web browsers.

And if youre like me, you probably nodded along, opened a tab to Google it later, and procrastinated.

But no worries. Youre here now, and we are going to figure this out together.

First things first What the heck is a polyfill?

A polyfill is just a piece of code (usually JavaScript) that adds functionality to older browsers that do not natively support a certain feature.

Think of it like you bringing a power bank to an event where there are no charging points. Your phone is old? No problem. You got the backup.

Now Why Call, Apply, and Bind?

Because theyre like the Avengers of function manipulation in JavaScript.

And also because they confuse almost everyone at first.

call lets you call a function with a given this value and arguments.
apply is like call, but arguments are passed as an array.
bind doesnt immediately invoke the function. It returns a new function with a given this.

Here is a detailed write-up on call, apply & bind.

Simple enough, right? Now lets make our versions

Polyfill for call

Heres how we can build a polyfill for call :

Function.prototype.myCall = function(context,...args){ 
    context = context || globalThis;
    let Symbolfn = Symbol("fn"); // Unique key
    context[Symbolfn] = this; // Assign 'this' function to the context
    let result = context[Symbolfn](...args); // Call the function
    delete context[Symbolfn];  // Clean up
    return result;
}

// Usage
function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Nandan" };
sayHello.myCall(user, "Hello");

Cool, right? Not rocket science.

Polyfill for apply

Now, lets tweak it a bit for apply :

Function.prototype.myApply = function(context,args){
    context = context || globalThis;
    let Symbolfn = Symbol("fn");
    context[Symbolfn] = this;
    let result = args ? context[Symbolfn](...args) : context[Symbolfn]();
    delete context[Symbolfn];
    return result;
}

// Usage
sayHello.myApply(user, ["Hi"]);

Polyfill for bind

Now comes the big boss bind.

Function.prototype.myBind = function(context,...initialArgs){
    let fn = this;
    return function(...functArgs){
        return fn.apply(context, [...initialArgs,...functArgs])
    }
}

// Usage
const boundSayHello = sayHello.myBind(user, "Hey");
boundSayHello(); // Outputs: Hey, Nandan

bind doesnt call the function right away.
It returns a new function that you can call later.
We merge the arguments provided at bind-time and call-time.

Thats it You just built call, apply, and bind polyfills!

Honestly, when I first read about polyfills, I thought it was some deep internal browser magic. Turns out, its just about creatively manipulating JavaScripts behavior.

If you take one thing from this post, let it be this:

The cowards never started and the weak died along the way. That leaves us, ladies and gentlemen. Us.

(Yeah, thats a quote from Shoe Dog. Still fits perfectly here, doesnt it?)

Heres one if you want to read a review of the book Shoe Dog, written by me.

Thats all, folks! I hope you found this short note on Polyfills of Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

I Vibe Coded an AI Book Recommendation App and was DDOS-ed for it.

Nandan Kumar — Tue, 15 Apr 2025 10:37:13 +0000

Last week, Google introduced its AI copilot Firebase Studio, and I decided to give it a try. It got me thinking about what I want to do next.

If you may be following me on socials, I just started a newsletter for book reviews & suggestions. Check https://kitaaben.com. That got me thinking: What if I built a small book recommendation application that can help users get book recommendations based on their interests?

I started building it on Firebase studio. Started with a simple prompt to build an AI-based book recommendation application that shows a good variety of genres by default and an interest field for additional context. The Number of books you want to be recommended is either 1/3/6 or 12.

The initial version came with these fields. But after some iterations, I decided to add the email field and email integration to help users get the recommendation directly to their email.

The tech stack looks something like this:

Nextjs + Reactjs ( For the application)
Gemini API (For AI)
Firebase (For Hosting)
Resend (For Email - Free Tier)

The final version looked like this:

After some testing and a lot of dopamine, I went ahead and made it public. Mapped it to a subdomain and made it public. Here is the URL if you want to give it a try: https://bookwise.kitaaben.com

I shared it in my friends WhatsApp group, Instagram, Twitter( now X), Linkedin almost everywhere I could.

But seems like someone didnt like the spamming and decided to do something about it. By launching a DDOS attack on my website.Targeting my email functionality, trying to exhaust my email limit and increasing my cloud hosting + AI usage cost.

See the sudden spike in the requests?

Panic set in; I didnt know what to do. Should I bring down the site and end this or something else? I decided not to give up and just think and act quickly

I did and quickly signed up for Cloudflare, added the Cloudflare protection layer to my app and observed the behaviour for some time. By this time, my email limit of 200 emails by resend had already been exhausted, so I waited for the next day and added a caching layer to store the emails and rate limit the emails to 3 emails per hour.

Things seem to be stable for now. The traffic has dropped as well. However, I would not mind some humans trying the app, benefiting from it and providing some real feedback.

If you are a human reading this, give the app a try. Tell me what you like/dislike. I am always just an email away at connect@nandan.dev

Thats all, folks! I hope you found this short note on Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my website, https://nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

Yet another blog on Call, Apply & Bind..!!

Nandan Kumar — Fri, 22 Nov 2024 11:05:15 +0000

Bla Bla Bla..

Okay, Hear me out..!!

Hundreds of blogs and tutorials explain call, bind, and apply. Heck, even ChatGPT and Copilot can simplify them for you!

So why another post? Well, this ones not for _you_its my self-note as I revisit JavaScript fundamentals.

Even after 8 years in front-end development, I sometimes mix up these methods. Turns out, the confusion often stems from how theyre grouped in interview questions. Let me break it down for youthis time, in a way that sticks.

Can we skip to the good part.

Why is it always call, bind, and apply in interviews? Functionally, call and apply are closerthey invoke the function immediatelywhile bind returns a new function. Thats why Ive grouped them this way in the title.

Let's look at their usage to understand it better.

What is common among Call, Bind & Apply?

call , bind , and apply are methods available on functions that allow you to explicitly set the value of this and pass arguments to the function.

What is the difference between Call, Bind & Apply?

While Call and Apply Immediately invoke the function, the Bind method does not immediately invoke the function. instead, it returns a new function with this set to a specified value, and this returned function can be invoked/executed later.

What is the difference between Call and Apply then?

While both Call and Apply immediately invoke the function with the custom this, its how they take the additional argument that differentiates them.

While Call takes the individual arguments, Apply takes an array of arguments.

Examples

Lets look at the below argument to understand the use of call, apply and bind.

function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function

Some Additional Examples

Using call : Borrowing methods from another object:

let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar

Using apply : Finding the max value in an array:

let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5

Using bind : Event handling with custom this:

let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user));

Additionally, I hope this table will help you understand it better.

Feature	Execution	Arguments	Use Case
call	Executes the function immediately	Passed individually	When you know arguments at call time
apply	Executes the function immediately	Passed as an array	When arguments are in an array
bind	Returns a new function (does not execute)	Optionally pre-filled for the new function	When you need a reusable or pre-configured function

Thats all, folks! I hope you found this short note on Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my website, https://nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

What are Javascript Closures?

Nandan Kumar — Mon, 18 Nov 2024 17:04:39 +0000

Closures are a fundamental concept in JavaScript that enables powerful features like data privacy, state persistence, and functional programming. This blog will demystify closures with examples and practical use cases.

When are closures created?

Closures are created when a function (inner function) is defined inside another function (outer function). The inner function has access to the outer function's lexical scope (variables) even after the outer function is executed.

Lexical Scope in Javascript

Lexical scope means a functions scope is determined by where it is written in the code, not where it is executed. This allows inner functions to access variables from their outer functions even if the outer function has already finished executing.

Usage

Closures are used for creating Private variables and persistent States (Cache, Memoisation etc.).

Closures with Examples

A Simple counter

function Outer() {
    let count = 0; // count is a private variable
    return function inner() {
        count++; // count is updated every time inner is called
        return count; // the updated value of count is returned
    };
}

let Counter = Outer(); 
Counter(); // 1 (count starts at 0, incremented to 1)
Counter(); // 2 (incremented again)
Counter(); // 3

Building a cache leveraging closure

function ObjectCache() {
    let Obj = {}; // Obj acts as a private cache
    return function ObjectUpdate(key, value) {
        if (!Obj[key]) {
            Obj[key] = value; // Add key-value to cache if not already present
            return Obj; // Return updated cache
        } else {
            return new Error("Duplicate Key"); // Prevent overwriting
        }
    };
}

let cache = ObjectCache();
cache("a", "b"); // {a: 'b'}
cache("a", "c"); // Error: Duplicate Key
cache("alpha", "romeo"); // {a: 'b', alpha: 'romeo'}

Real World Examples

Event Listeners - Click Counter

function attachListener(element) {
    let count = 0;
    element.addEventListener('click', () => {
        count++;
        console.log(`Clicked ${count} times`);
    });
}

A Better Counter

const CounterModule = (() => {
    let count = 0;
    return {
        increment: () => ++count,
        reset: () => (count = 0),
        decrement: () => --count
    };
})();

CounterModule.increment(); // 1
CounterModule.increment(); // 2
CounterModule.decrement(); // 1
CounterModule.reset(); // 0

Thats all, folks! I hope you found this short blog on closures helpful. If you enjoyed this, check out more articles on my website, https://nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Dont forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

DEV Community: Nandan Kumar

Give it a read.

I Got Tired of Goodreads. So I Built Kitaaben.com

I Got Tired of Goodreads. So I Built Kitaaben.com

What Even Is Kitaaben?

The Features That Actually Matter

Kitaaben vs Goodreads — Let's Be Honest

Who Is It For?

Try It

How to Convert Nested Objects to Flat Objects in JavaScript.

Here is a simple input and output :

Output:

Now look at the solution :

So, how do we fix it?

Testing Both Cases

Built something over last weekend, thought I will share with my dev community. https://bailoutt.com

BailOutt | Escape Awkward Situations | AI Fake Call Service | Social Anxiety Solution

HTML Pitfalls and Gotchas Every Developer Should Avoid

1. Forgetting the DOCTYPE Declaration

2. Missing the Character Encoding Meta Tag

3. Forgetting the Viewport Meta Tag

4. Skipping Open Graph Meta Tags

5. Ignoring Content Security Policy

6. Improper Nesting of Elements

Conclusion

Accessibility in Front End Development

What is Accessibility

Accessibility Core Principle (POUR)

How can people with disabilities use the applications

Accessibility Standards

Web Content Accessibility Guidelines (WCAG)

Accessible Rich Internet Applications (ARIA)

Americans with Disabilities Act (ADA)

How to make a web application Accessible

Use Semantic Tags

Support Keyboard Accessibility

Use Aria Roles when needed

Focus Management

Maintain Colour Contrast

Using Images and Other Media

Tools for Accessibility Testing

Instagram Front-End System Design

Requirements

🔧 Functional Requirements:

🚫 Non-Functional Requirements:

Architecture

📂 Components:

Design

Implementation

Suggested folder structure:

Optimization

TL;DR

Polyfills of JS Array Methods - Flat, Map, Filter & Reduce

flat() A Pancake Stack for Arrays

map() Because Sometimes Arrays Need a Makeover

filter() Only the Worthy Shall Pass

reduce() The Boss Level

Why Do This?

Polyfills for Call, Apply, and Bind — Let’s Build Them From Scratch

First things first What the heck is a polyfill?

Now Why Call, Apply, and Bind?

Polyfill for call

Polyfill for apply

Polyfill for bind

Thats it You just built call, apply, and bind polyfills!

I Vibe Coded an AI Book Recommendation App and was DDOS-ed for it.

Yet another blog on Call, Apply & Bind..!!

Can we skip to the good part.

What is common among Call, Bind & Apply?

What is the difference between Call, Bind & Apply?

What is the difference between Call and Apply then?

Examples

Some Additional Examples

What are Javascript Closures?

When are closures created?

Lexical Scope in Javascript

Usage

Closures with Examples

Real World Examples

`flat()` A Pancake Stack for Arrays

`map()` Because Sometimes Arrays Need a Makeover

`filter()` Only the Worthy Shall Pass

`reduce()` The Boss Level