DEV Community: Nandan Kumar

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

System Design: SQL vs NoSQL databases and what distinguishes them.

Nandan Kumar — Tue, 22 Oct 2024 09:19:51 +0000

In the realm of databases, two primary types of solutions exist, SQL (relational) and NoSQL (non-relational) databases. These two categories differ significantly in their construction, the nature of the data they store, and their storage methods. Relational databases are structured with predefined schemas, while non-relational databases are unstructured, distributed, and feature dynamic schemas.

High-level differences

Here are some high-level differences between SQL and NoSQL:

Storage

SQL stores data in tables where each row represents an entity, and each column represents a data point related to that entity.

NoSQL databases utilize various data storage models, including key-value, graph, and document-oriented approaches.

Schema

In SQL, each record follows a fixed schema, which means that the columns must be determined and chosen before data entry, and each row must contain data for each column. The schema can be modified later, but this involves modifying the database using migrations.

NoSQL schemas are dynamic. Fields can be added on the fly, and each record doesn’t have to contain data for each field.

Querying

SQL databases use Structured Query Language (SQL) to define and manipulate data, which is highly powerful.

In a NoSQL database, queries focus on a collection of documents, with different databases having different syntax for querying.

Scalability

In most cases, SQL databases can be scaled vertically, which can become very costly. While it's feasible to scale a relational database across multiple servers, it's a difficult and time-consuming process.

NoSQL databases are horizontally scalable, which means it's easy to add more servers to handle large traffic. They can be hosted on inexpensive hardware or cloud instances, making them cost-effective compared to vertical scaling. Many NoSQL technologies also distribute data across servers automatically.

Reliability

The majority of relational databases are ACID compliant. Therefore, SQL databases are still the best choice for data reliability and transaction safety.

Many NoSQL solutions prioritize performance and scalability over ACID compliance.

Reasons

As always we should always pick the technology that fits the requirements better. So, let’s look at some reasons for picking SQL or NoSQL based database:

For SQL

Structured data with strict schema
Relational data
Need for complex joins
Transactions
Lookups by index are very fast

For NoSQL

Dynamic or flexible schema
Non-relational data
No need for complex joins
Very data-intensive workload
Very high throughput for IOPS

That's all folks.

Feel free to comment on how you like my blog on the system design series or shoot me an email at connect@nandan.dev If you have any queries I will try to answer them.

You can also visit my website to read some of the articles at https://nandan.dev/

Stay tuned & connect with me on my social media channels. Subscribe to my newsletter to get regular updates on my upcoming posts.

If you're interested in learning about system design, you can join Design Guru's course on System Design Fundamentals.

Twitter | Instagram | Github | Website

System Design: Databases and DBMS

Nandan Kumar — Wed, 01 May 2024 14:46:55 +0000

What is a Database?

A database is a structured collection of information or data that is typically stored electronically in a computer system. The management of the database is usually done by a Database Management System (DBMS). The combination of the data and the DBMS, along with the related applications, is commonly referred to as a database system, which is often shortened to just database.

What is DBMS?

A database is a collection of data that requires a comprehensive database software program, known as a Database Management System (DBMS), to function. Essentially, a DBMS serves as an interface between the database and its end-users or programs, allowing users to retrieve, update, and manage how the information is organized and optimized. Additionally, a DBMS enables oversight and control of databases, enabling a variety of administrative operations such as performance monitoring, tuning, backup, and recovery.

Components

Here are some commonly found components that are present in different databases:

Schema

A schema is responsible for defining the structure of a data storage system and specifying the types of data that can be stored in it. Schemas can be strictly enforced throughout the entire database, enforced loosely in some areas, or not enforced at all.

Table

Each table can have anywhere from two to over a hundred columns, depending on the type of information it contains, similar to a spreadsheet.

Column

A database column contains a single data value of a particular type for each row. The data value can be text, number, enum, timestamp, etc.

Row

Data in a table is recorded in rows. There can be thousands or millions of rows in a table having any particular information.

Types

Below are different types of databases:

Challenges

Here's a revised version of the text to make it clearer and free of spelling, grammar, and punctuation errors:

Running databases at scale can pose some common challenges that need to be addressed.

Absorbing significant increases in data volume : The explosion of data from sensors, connected machines, and other sources is increasing rapidly.
Ensuring data security : Data breaches are becoming increasingly common, making it more important than ever to prioritize both data security and user accessibility.
Keeping up with demand : For timely decision-making and seizing new opportunities, companies require real-time access to their data.
Managing and maintaining the database and infrastructure : As data volumes increase and databases become more complex, companies face the expense of hiring additional talent to manage them.
Removing scalability limits : A business needs to grow to survive, and its data management must grow with it. However, predicting the required capacity of on-premises databases can be challenging.
Ensuring data residency, data sovereignty, or latency requirements : Some organizations have use cases that are better suited to run on-premises. In those cases, engineered systems that are pre-configured and pre-optimized for running the database are ideal..

SQL databases

A SQL or relational database is a collection of items that are related to each other and organized into tables consisting of columns and rows. These tables hold the information about the objects to be represented in the database. Each column in a table holds a specific type of data, and each field stores the actual value of an attribute. The rows in the table represent a collection of related values of one object or entity.

Each row in a table can be identified uniquely with a primary key, and the rows among multiple tables can be related to each other using foreign keys. This data can be accessed in many different ways without the need to reorganize the database tables themselves. SQL databases usually follow the ACID consistency model.

Materialized views

A materialized view is a pre-computed dataset that is derived from a query specification and stored for later use. The data is pre-computed, which makes querying a materialized view faster than executing a query against the base table of the view. This performance difference is significant when a query is run frequently or is complex.

Materialized views enable data subsetting, which improves the performance of complex queries that run on large datasets and reduces network loads. Though there are other uses of materialized views, they are primarily used for performance and replication purposes.

N+1 query problem

The N+1 query problem occurs when the data access layer executes additional SQL statements (N) to retrieve the same data that could have been obtained when executing the primary SQL query. The greater the value of N, the more queries will be executed, leading to a performance impact.

This problem is commonly observed in GraphQL and ORM (Object-Relational Mapping) tools. It can be solved by optimizing the SQL query or by using a dataloader that batches consecutive requests and makes a single data request under the hood.

Advantages

Lets look at some advantages of using relational databases:

Simple and accurate
Accessibility
Data consistency
Flexibility

Disadvantages

Below are the disadvantages of relational databases:

Expensive to maintain
Difficult schema evolution
Performance hits (join, denormalization, etc.)
Difficult to scale due to poor horizontal scalability

Examples

Here are some commonly used relational databases:

NoSQL databases

NoSQL refers to a category of databases that do not primarily use SQL as their data access language. These databases are also known as non-relational databases. Unlike relational databases, NoSQL databases do not require data to follow a predefined schema. NoSQL databases follow BASE consistency model.

Below are different types of NoSQL databases:

Document

A document database, also known as a document-oriented database or a document store, is a versatile database that stores information in the form of documents. These databases can be used for transactional and analytical applications.

Advantages

Intuitive and flexible
Easy horizontal scaling
Schemaless

Disadvantages

Schemaless
Non-relational

Examples

Key-value

One of the simplest types of NoSQL databases, key-value databases save data as a group of key-value pairs made up of two data items each. Theyre also sometimes referred to as a key-value store.

Advantages

Simple and performant
Highly scalable for high volumes of traffic
Session management
Optimized lookups

Disadvantages

Basic CRUD
Values cant be filtered
Lacks indexing and scanning capabilities
Not optimized for complex queries

Examples

Graph

A graph database is a type of NoSQL database that uses graph structures to store and represent data. Instead of tables or documents, it uses nodes, edges, and properties to create relationships between data items.

The nodes represent the data items, while the edges represent the relationships between them. The relationships allow data in the store to be linked together directly and can be retrieved with a single operation in many cases.

Advantages

Query speed
Agile and flexible
Explicit data representation

Disadvantages

Complex
No standardized query language

Use cases

Fraud detection
Recommendation engines
Social networks
Network mapping

Examples

Time series

A time-series database is a database optimized for time-stamped, or time series, data.

Advantages

Fast insertion and retrieval
Efficient data storage

Use cases

IoT data
Metrics analysis
Application monitoring
Understand financial trends

Examples

Wide column

Wide column databases, also known as wide column stores, are schema-agnostic. Data is stored in column families, rather than in rows and columns.

Advantages

Highly scalable, can handle petabytes of data
Ideal for real-time big data applications

Disadvantages

Expensive
Increased write time

Use cases

Business analytics
Attribute-based data storage

Examples

Multi-model

Multi-model databases combine different database models (i.e. relational, graph, key-value, document, etc.) into a single, integrated backend. This means they can accommodate various data types, indexes, queries, and store data in more than one model.

Advantages

Flexibility
Suitable for complex projects
Data consistent

Disadvantages

Complex
Less mature

Examples

That's all folks.

In the next blog, I will try to cover more about SQL V/s NoSQL Databases.

Feel free to comment on how you like my blog on the system design series or shoot me an email at connect@nandan.dev If you have any queries I will try to answer them.

You can also visit my website to read some of the articles at https://nandan.dev/

Stay tuned & connect with me on my social media channels. Subscribe to my newsletter to get regular updates on my upcoming posts.

If you're interested in learning about system design, you can join Design Guru's course on System Design Fundamentals.

Twitter | Instagram | Github | Website

System Design: Availablity, Scalability, and Types Of Storage.

Nandan Kumar — Wed, 13 Dec 2023 03:58:41 +0000

Availability

Availability refers to the duration for which a system performs its intended function within a given timeframe. It measures the percentage of time a system or machine remains operational under normal circumstances, serving as a simple metric of operational continuity.

The Nines of availability

The "Nine's of availability" is a way to measure the reliability and uptime of a system. It is expressed as a percentage or number of nines, where each "nine" represents an additional decimal place of uptime.

If availability is 99.00% available, it is said to have 2 nines of availability, and if it is 99.9%, it is called 3 nines, and so on.

Availability (Percent)	Downtime (Year)	Downtime (Month)	Downtime (Week)
90% (one nine)	36.53 days	72 hours	16.8 hours
99% (two nines)	3.65 days	7.20 hours	1.68 hours
99.9% (three nines)	8.77 hours	43.8 minutes	10.1 minutes
99.99% (four nines)	52.6 minutes	4.32 minutes	1.01 minutes
99.999% (five nines)	5.25 minutes	25.9 seconds	6.05 seconds
99.9999% (six nines)	31.56 seconds	2.59 seconds	604.8 milliseconds
99.99999% (seven nines)	3.15 seconds	263 milliseconds	60.5 milliseconds
99.999999% (eight nines)	315.6 milliseconds	26.3 milliseconds	6 milliseconds
99.9999999% (nine nines)	31.6 milliseconds	2.6 milliseconds	0.6 milliseconds

Availability in Sequence vs Parallel

If a service consists of multiple components prone to failure, the services overall availability depends on whether the components are in sequence or in parallel.

Sequence

Overall availability decreases when two components are in sequence.

For example, if both Foo and Bar each had 99.9% availability, their total availability in sequence would be 99.8%.

Parallel

Overall availability increases when two components are in parallel.

For example, if both Foo and Bar each had 99.9% availability, their total availability in parallel would be 99.9999%.

Availability vs Reliability

If a system is reliable, it means it is available. However, if a system is available, it does not necessarily mean it is reliable. This means that a system with high reliability will also have high availability, but a system can still achieve high availability without being reliable.

High Availability vs Fault Tolerance

Both high availability and fault tolerance are methods for achieving high uptime levels, but they work differently.

A fault-tolerant system ensures that there is no service interruption, but it comes at a higher cost. On the other hand, a highly available system minimizes service interruption. To achieve fault tolerance, hardware redundancy is essential. In case the main system fails, another system takes over without any loss in uptime.

Scalability

Scalability is the measure of how well a system responds to changes by adding or removing resources to meet demands.

Lets discuss different types of scaling:

Vertical scaling

Vertical scaling (also known as scaling up) expands a systems scalability by adding more power to an existing machine. In other words, vertical scaling refers to improving an applications capability via increasing hardware capacity.

Advantages

Simple to implement
Easier to manage
Data consistent

Disadvantages

Risk of high downtime
Harder to upgrade
Can be a single point of failure

Horizontal scaling

Horizontal scaling (also known as scaling out) expands a systems scale by adding more machines. It improves the performance of the server by adding more instances to the existing pool of servers, allowing the load to be distributed more evenly.

Advantages

Increased redundancy
Better fault tolerance
Flexible and efficient
Easier to upgrade

Disadvantages

Increased complexity
Data inconsistency
Increased load on downstream services

Storage

Storage is a mechanism that enables a system to retain data, either temporarily or permanently. This topic is mostly skipped over in the context of system design, however, it is important to have a basic understanding of some common types of storage techniques that can help us fine-tune our storage components. Lets discuss some important storage concepts:

RAID

RAID (Redundant Array of Independent Disks) is a way of storing the same data on multiple hard disks or solid-state drives (SSDs) to protect data in the case of a drive failure.

There are different RAID levels, however, and not all have the goal of providing redundancy. Lets discuss some commonly used RAID levels:

RAID 0 : Also known as striping, data is split evenly across all the drives in the array.
RAID 1 : Also known as mirroring, at least two drives contains the exact copy of a set of data. If a drive fails, others will still work.
RAID 5 : Striping with parity. Requires the use of at least 3 drives, striping the data across multiple drives like RAID 0, but also has a parity distributed across the drives.
RAID 6 : Striping with double parity. RAID 6 is like RAID 5, but the parity data are written to two drives.
RAID 10 : Combines striping plus mirroring from RAID 0 and RAID 1. It provides security by mirroring all data on secondary drives while using striping across each set of drives to speed up data transfers.

Comparison

Lets compare all the features of different RAID levels:

Features	RAID 0	RAID 1	RAID 5	RAID 6	RAID 10
Description	Striping	Mirroring	Striping with Parity	Striping with double parity	Striping and Mirroring
Minimum Disks	2	2	3	4	4
Read Performance	High	High	High	High	High
Write Performance	High	Medium	High	High	Medium
Cost	Low	High	Low	Low	High
Fault Tolerance	None	Single-drive failure	Single-drive failure	Two-drive failure	Up to one disk failure in each sub-array
Capacity Utilization	100%	50%	67%-94%	50%-80%	50%

Volumes

"Volume" refers to a fixed amount of storage space on a disk or tape. Although the term "volume" is often used interchangeably with "storage," it is important to note that a single disk can contain multiple volumes, or a volume can span across multiple disks.

File storage

File storage is a method used to store data in a hierarchical directory structure and present it to users. It is a user-friendly solution that provides easy storage and retrieval of files. In order to locate a file in file storage, one must know the complete path of the file. It is an economical and well-structured method that is commonly used on hard drives. This means that files appear exactly the same for the user and on the hard drive.

Example: Amazon EFS, Azure files, Google Cloud Filestore, etc.

Block storage

Block storage is a method of storing data by dividing it into blocks or chunks, which are then stored as separate entities. Each block is given a unique identifier, which enables the system to store the smaller pieces of data wherever it is most convenient.

Block storage separates data from user environments, making it possible for data to be spread across multiple environments. This creates multiple paths to the data and enables users to retrieve it quickly. When a user or application requests data from the block storage system, the system reassembles the data blocks and presents the data to the user or application.

Example: Amazon EBS.

Object Storage

Object storage, also known as object-based storage, divides data files into smaller units called objects. These objects are then stored in a single repository that can be distributed across multiple networked systems.

Example: Amazon S3, Azure Blob Storage, Google Cloud Storage, etc.

NAS

A Network Attached Storage (NAS) is a device that is connected to a network and allows authorized users to store and retrieve data from a central location. The NAS device is flexible, which means that we can easily add more storage capacity as needed. It is faster and less expensive than using a public cloud service, and it provides all the benefits of cloud storage while giving us complete control over our data.

HDFS

The Hadoop Distributed File System (HDFS) is a file system that can be distributed across multiple machines in a cluster. It's designed to run on inexpensive hardware and is highly fault-tolerant. HDFS offers high-throughput access to large datasets, making it ideal for applications that require handling of massive data.

HDFS uses a block-based approach for storing files. Each file is divided into a sequence of blocks, with all blocks in a file (except the last one) being of the same size. For reliability, the blocks of a file are replicated across different machines in the cluster.

That's all folks.

In the next blog, I will try to cover more about Databases.

Feel free to comment on how you like my blog on the system design series or shoot me a mail at connect@nandan.dev If you have any queries I will try to answer.

You can also visit my website to read some of the articles at https://nandan.dev/

Stay tuned & connect with me on my social media channels. Subscribe to my newsletter to get regular updates on my upcoming posts.

If you're interested in learning about system design, you can join Design Guru's course on System Design Fundamentals.

Twitter | Instagram | Github | Website

DEV Community: Nandan Kumar

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

System Design: SQL vs NoSQL databases and what distinguishes them.

High-level differences

Storage

Schema

Querying

Scalability

Reliability

Reasons

System Design: Databases and DBMS

What is a Database?

What is DBMS?

Components

Schema

Table

Column

`flat()` A Pancake Stack for Arrays

`map()` Because Sometimes Arrays Need a Makeover

`filter()` Only the Worthy Shall Pass

`reduce()` The Boss Level