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?

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

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, it’s easy to miss some of the basic stuff that needs to be taken care of in your webpage, because your framework’s boilerplate code adds up most of the stuff and takes care of the basics. But it’s always good to know some of them that are important or aren’t 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; That’s 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 templates—your 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.

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

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, let’s 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)

How can people with disabilities use the applications

Accessibility Standards

Web Content Accessibility Guidelines (WCAG)

Defines Accessibility levels as A, AA & AAA

Read More: https://www.w3.org/WAI/standards-guidelines/wcag/

Accessible Rich Internet Applications (ARIA)

Adds accessibility support to non-semantic elements.

Read More: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/

Americans with Disabilities Act (ADA)

Legal mandate in the US for accessible digital content

Read More: https://www.ada.gov/

AA is the most commonly required level of compliance.

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.

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.

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

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 isn’t 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.

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 you’ll casually say, "Sure, do you want it with comments or without?"

Today, we’re building polyfills for:

• flat()

• map()

• filter()

• reduce()

Let’s 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.

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

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

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

But no worries. You’re 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 they’re 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 doesn’t 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 let’s make our versions

Polyfill for call

Here’s 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, let’s 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 doesn’t 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.

That’s 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, it’s just about creatively manipulating JavaScript’s 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, that’s a quote from Shoe Dog. Still fits perfectly here, doesn’t it?)

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

That’s 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. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

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 friend’s WhatsApp group, Instagram, Twitter( now X), Linkedin almost everywhere I could.

But seems like someone didn’t 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 didn’t 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

That’s all, folks! I hope 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. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

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 one’s not for you—it’s 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 they’re grouped in interview questions. Let me break it down for you—this 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 closer—they invoke the function immediately—while bind returns a new function. That’s why I’ve 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, it’s how they take the additional argument that differentiates them.

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

Examples

Let’s look at the below example 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.

That’s 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. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

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 function’s 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

That’s 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. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website

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

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:

• SQL

• NoSQL

  • Document

  • Key-value

  • Graph

  • Timeseries

  • Wide column

  • Multi-model

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

Let’s 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:

• PostgreSQL

• MySQL

• MariaDB

• Amazon Aurora

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

• MongoDB

• Amazon DocumentDB

• CouchDB

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. They’re 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 can’t be filtered

• Lacks indexing and scanning capabilities

• Not optimized for complex queries

Examples

• Redis

• Memcached

• Amazon DynamoDB

• Aerospike

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

• Neo4j

• ArangoDB

• Amazon Neptune

• JanusGraph

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

• InfluxDB

• Apache Druid

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

• BigTable

• Apache Cassandra

• ScyllaDB

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

• ArangoDB

• Azure Cosmos DB

• Couchbase

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

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 Nine’s 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.

$$Availability = \frac{Uptime}{(Uptime + Downtime)}$$

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 in Sequence vs Parallel

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

Sequence

Overall availability decreases when two components are in sequence.

$$Availability \space (Total) = Availability \space (Foo) * Availability \space (Bar)$$

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.

$$Availability \space (Total) = 1 - (1 - Availability \space (Foo)) * (1 - Availability \space (Bar))$$

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.

Let’s discuss different types of scaling:

Vertical scaling

Vertical scaling (also known as scaling up) expands a system’s scalability by adding more power to an existing machine. In other words, vertical scaling refers to improving an application’s 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 system’s 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. Let’s 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. Let’s 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

Let’s compare all the features of different RAID levels:

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

The Basics of Prompts

To understand the magic behind ChatGPT, let's start with the basics. A prompt is essentially a piece of text or code that you provide to the AI model to initiate a conversation or request a specific task. It's like giving instructions to an intelligent assistant, and ChatGPT responds based on the input you provide.

For example, if you want to ask ChatGPT to generate a creative story about a space adventure, your prompt might look like this:

"Once upon a time, in a galaxy far, far away, there was a brave astronaut named Buzz Lightyear. Write a story about Buzz's thrilling journey through the cosmos."

The prompt instructs ChatGPT to generate a story about an astronaut named Buzz Lightyear in a space adventure setting. What makes this fascinating is that prompts can be as simple or as complex as you need them to be.

Creative Writing

Prompts have opened up exciting possibilities for writers and content creators. ChatGPT can assist with brainstorming ideas, generating story outlines, and even producing entire articles or pieces of fiction. By providing a well-crafted prompt, you can tap into the AI's creative abilities to jumpstart your writing process.

For instance, you could use ChatGPT to:

• Generate creative story plots or twists.

• Compose catchy headlines for blog posts or articles.

• Draft engaging dialogue for characters in a novel.

• Create captivating product descriptions for e-commerce websites.

The flexibility of prompts makes ChatGPT an invaluable tool for writers seeking inspiration or assistance with their projects.

Problem Solving and Information Retrieval

Prompts are not limited to creative writing; they are equally adept at solving problems and retrieving information. ChatGPT can be your virtual assistant for tasks such as:

• Answering questions on a wide range of topics.

• Providing code snippets for programming challenges.

• Translating text from one language to another.

• Summarizing lengthy documents or articles.

• Assisting with research by generating ideas and insights.

By crafting precise prompts, you can harness the AI's knowledge and problem-solving abilities to tackle a variety of tasks efficiently.

Conversation and Chatbots

ChatGPT is also well-suited for creating chatbots and simulating human-like conversations. You can use prompts to initiate dialogue with the AI model and build chat-based applications. Whether it's for customer support, virtual assistants, or interactive storytelling, ChatGPT's conversation capabilities are impressive and adaptable.

Tips for Crafting Effective Prompts

While prompts are incredibly versatile, there are a few tips to keep in mind when crafting them:

1. Be Clear and Specific: Clearly define your request or question in the prompt to get the desired response.

2. Experiment: Don't be afraid to experiment with different prompts to see what works best for your needs.

3. Use Context: You can provide context in your prompts, reference previous messages in a conversation, or set the persona of the AI to guide the responses.

4. Review Output: Always review and edit the output generated by ChatGPT to ensure accuracy and coherence.

Conclusion

Prompts are the gateway to unlocking the potential of ChatGPT. Whether you're a writer seeking creative inspiration, a developer building applications, or someone looking for quick answers and solutions, ChatGPT's capabilities are at your fingertips. With a well-crafted prompt, you can harness the power of artificial intelligence to enhance your productivity and creativity.

As technology continues to advance, the possibilities for ChatGPT prompts are only limited by our imagination. So, go ahead, experiment, and see how ChatGPT can assist you in achieving your goals and bringing your ideas to life. The future of AI-powered interactions is here, and it all starts with a prompt.

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

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

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

Twitter | Instagram | Github | Website

This helps prevent variable and function name clashes, improves code maintainability, and promotes the concept of separation of concerns.

Here's an example of how you can implement the Module Design Pattern in JavaScript:

// Module using the Module Design Pattern
var Module = (function() {
  // Private variable
  var privateVariable = "I am a private variable";

  // Private function
  var privateFunction = function privateFunction() {
    console.log("This is a private function");
  }

  // Public function
  var publicFunction = function() {
      console.log("This is a public function");
  }
  // Public interface
  return {
    publicFunction:publicFunction,
    // Public variable accessing private variable
    publicVariable: privateVariable
  };
})();

// Usage of the module
console.log(Module.publicVariable); // Output: "I am a private variable"
Module.publicFunction(); // Output: "This is a public function"

// Trying to access private members directly (will result in an error)
console.log(Module.privateVariable); // Output: undefined
Module.privateFunction(); // Output: Uncaught TypeError: MyModule.privateFunction is not a function

In the above example, we've created a module called Module using an Immediately Invoked Function Expression (IIFE). Inside the IIFE, we define private variables and functions that are not accessible from outside the module. We then return an object containing the public members (functions and variables) that we want to expose.

Benefits of the Module Design Pattern:

1. Encapsulation: Private members are not accessible from outside the module, which helps prevent unintended modifications or conflicts with other parts of the codebase.

2. Organization: Code is organized into logical modules, making it easier to manage and understand.

3. Namespacing: The module acts as a namespace, reducing the chances of naming collisions in a global scope.

4. Reusability: Modules can be easily reused in different parts of your application or different projects.

5. Maintenance: Separation of concerns and encapsulation make it easier to maintain and refactor code.

That's a concise explanation of the module design pattern in Javascript.

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

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

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

Twitter | Instagram | Github | Website

From Design to APIs, You have to master all! The life of a front-end developer: juggling frameworks, libraries, and everything in between. Ultimately, you become everything but just a front-end developer.

You graduate from college and get out in the job market. You have done Leetcode or CodeChef or just basic DSA and algo..!!

You sit in an interview and get through it by doing everything you could do right. Your stars are aligned and you get your first job..!!

Elated, you tell your parents all about it, it’s a good salary package for a fresher and the brand is also good.

It’s your first day, They tell you, you are going to be a front-end Engineer. You will be working on HTML, CSS, JavaScript, jquery, Angular, and whatnot..!!

Every day there is a new framework, Vue is the new guy in the corner one day, and the next day it’s Aurelia. They all claim it’s going to be the next big thing..!!

You learn one new library/framework, do some POC, and add it to your resume. Because you see it’s a game of keywords. You have learned enough SEO to understand that it’s all about Keywords..! So you add SEO as an additional skill in your resume.

With time you have become better, you can tell if a font is not correct or if it’s different by one pixel from the design..!!

Oh design, you have come a long way from Photoshop to Figma..!! You have seen Sketch be the rage and then die a slow death. You have got a great design sense by now. So much so you can train a fresher designer, who is a design school grad, about design sense.

Oh Don't forget accessibility, you know all about it, yet somehow you forget to add it to your resume. It’s such a crucial skill but yet you miss adding it because not everyone cares about it unless a client escalates about it.

All said and done, you have 100 skills in your resume and less space to put them all in, so you add most of them in your LinkedIn and ask your friends and colleagues to endorse you because that’s going to give you some additional visibility..!!

It’s been 5 years, you have been a front-end developer, and you are good at your craft. Master of JavaScript and Pro at React, but you are sick of waiting for the middleware team to provide you with the API endpoint till the last day of the release.

Everyone asking you what’s taking so long, as you have been given the design a month in advance, but no one seems to understand that, you need to wire the APIs, test the fail case, add handlers, and whatnot..!!

Sick of it, you decide to write your APIs, oh come on, how hard writing a controller could be. It’s just api/bla/bla..!!

You write APIs and you write the front end, you wire them together, and you feel now you are a full stack developer. But no one tells you that there is more to writing APIs than writing controllers.

And the expectations, oh don’t get me started, now you are expected to write APIs, front end, and everything in the same amount of time you used to take to build a part of it( the front end).

While, juggling between Front end and APIs, you realize, you are already a veteran in the field and the job market has changed a lot.

While they are asking DSA and Algo in the interviews, you have forgotten all of it to keep up with frameworks and libraries.

In between all the chaos of, DSA, Algo, system design, accessibility, frameworks, and whatnot, You realize, you are back to where you started.

In the quest of being a front-end developer, you become everything but a front-end developer..!!

Regards,

A front-end developer

That's the rant..!!

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

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

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

Twitter | Instagram | Github | Website

I got the opportunity to learn about large language models recently and I have been thinking of writing about it since then.

While you may have read many blogs on large language models (LLM). This is yet another blog talking about the same topic that has been discussed in various forums in the past few weeks and has been in the news for quite some time now.

So Let's get going.

What is a Large Language Model?

A large language model (LLM) is a type of artificial intelligence (AI) that can generate text, translate sentences from one language to another, write different kinds of creative content, and answer your questions in an informative way.

Training a Large Language Model.

LLMs are trained on massive datasets available over the internet. The "large" in the large language model refers to the number of adjustable parameters in the model. The more parameters a model has, the more complex it is and the more data it can learn from. Some of the most successful LLMs have hundreds of billions of parameters, which allows them to learn from massive datasets and perform complex tasks.

Here is an analogy that may help to explain this concept:

Imagine a model with only a few parameters. This model would be like a simple machine with a few moving parts. It could only perform simple tasks, such as adding two numbers together.

Now imagine a model with hundreds of billions of parameters. This model would be like a complex machine with thousands of moving parts. It could perform much more complex tasks, such as translating languages or writing creative content.

The more parameters a model has, the more complex it is and the more data it can learn from. This allows LLMs to perform complex tasks that would be impossible for smaller models.

Some of The most well-known examples of large language models:

• GPT

• BERT

• BARD

What is Transformer?

Most LLMs are pre-trained on a large, general-purpose dataset and Can be fine-tuned further to be used for specific cases. All this could be possible because of the transformer architecture.

Transformers are a type of neural network architecture that is used for natural language processing (NLP) tasks. They were first introduced in the paper "Attention Is All You Need" by Vaswani et al. (2017).

Transformers work by using self-attention mechanisms to learn long-range dependencies in sequences. This makes them much more powerful than traditional neural network architectures, such as recurrent neural networks (RNNs), for NLP tasks.

The transformer architecture has made the wide adaptability of LLMs possible. It has made the training of the models progressive in the sense that someone creating a model may not have to train the model completely from scratch and they can use a pre-trained model to fine-tune them to perform their specific task.

What is Fine-Tuning?

Fine-tuning is a process in which a pre-trained large language model (LLM) is further trained on a smaller, task-specific dataset. This allows the model to learn the specific features of the task and improve its performance.

Let's take the example of creating a chatbot that can answer all the queries related to one specific set of documents. Assume these documents are proprietary and are not available over the Internet.

Someone can fine-tune an existing LLM by feeding the data specific to these documents and with some iterations of training, the Model will start answering questions related to these documents.

Here are some of the benefits of fine-tuning LLMs:

• It can improve the performance of an LLM on a specific task.

• It can be used to adapt an LLM to a new domain or task.

• It can be used to improve the accuracy and reliability of an LLM.

Here are some of the challenges of fine-tuning LLMs:

• It can be time-consuming and computationally expensive.

• It can be difficult to find a task-specific dataset that is large enough and high-quality enough to train the LLM.

• It can be difficult to tune the hyperparameters of the fine-tuning process.

In this blog, I have covered the basics of LLMs and How LLMs work. In my next blog, I will try to cover different types of transformers and different components of the transformer model.

That's all folks for now.

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

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

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

Twitter | Instagram | Github | Website

Hacker News:

Hacker News is a popular community-driven news aggregator that has become a go-to source for developers, entrepreneurs, and tech enthusiasts. It features a wide range of topics, including programming, startups, artificial intelligence, cybersecurity, and more. Hacker News is known for its no-nonsense approach to news, where the content is curated by the community, ensuring that only the most relevant and interesting stories make it to the front page. It is run by the investment fund and startup incubator Y Combinator.

Link: https://news.ycombinator.com/

TechCrunch:

TechCrunch is a popular technology news website that covers the latest in the world of tech, startups, gadgets, and entrepreneurship. The website features news, reviews, analysis, and opinions on a wide range of topics, including artificial intelligence, blockchain, cybersecurity, and more. TechCrunch is known for its in-depth reporting, insightful commentary, and its focus on the people and companies that are shaping the future of technology. The website also hosts numerous conferences and events, including Disrupt, which brings together the best and brightest minds in the tech industry.

Link: https://techcrunch.com/

The Verge:

The Verge is a popular technology news website that covers the latest in the world of tech, science, art, and culture. The website features news, reviews, analysis, and opinions on a wide range of topics, including smartphones, laptops, gaming, entertainment, and more. The Verge is known for its in-depth reporting, investigative journalism, and engaging storytelling. The website also hosts numerous podcasts and video series, including The Vergecast and Verge Science, which delve deeper into the latest tech news and trends.

Link: https://www.theverge.com/

DevBytes:

Devbytes is one of the latest news apps that brings highly curated tech news to your phone. DevBytes provides coding news in a short and crisp format. This short news app has been designed especially for developers, product managers, and engineering managers to stay updated with what is happening in the technology world. DevBytes selects the latest advanced coding and technology news from multiple national and international sources, famous tech blogs, and social media and summarizes them in less than 64 words. Additionally, The App UI is pretty cool too.

Link: https://devbytes.co.in

Pocket:

Pocket is a popular application that allows users to save articles, videos, and other web content to read later. With Pocket, users can save content from their web browser, social media apps, or other sources by simply clicking on the "Save to Pocket" button or sharing the content to the app. The app then syncs the content across devices, so users can access their saved content from their smartphone, tablet, or computer. Pocket also offers a recommendation feature that suggests articles based on the user's reading history, and users can also follow other Pocket users to see what they are reading and recommending.

Link: https://getpocket.com/en/

Feedly:

Feedly is a news aggregator that allows users to read and curate content from various sources. With Feedly, users can subscribe to RSS feeds from blogs, news sites, and other online sources. The app categorizes and organizes content based on the user's interests and presents articles in a visually appealing and easy-to-navigate interface. Feedly also offers a discovery feature that suggests new content based on the user's reading history and interests. Overall, Feedly is a great tool for people who want to streamline their online reading experience and stay up-to-date on the latest news and trends from various sources.

Link: https://feedly.com/

GitHub:

GitHub is a code hosting platform that also features a news feed. It is a great resource for developers who want to stay updated on the latest open-source projects and development trends. The news feed displays notifications for events such as pull requests, comments, and issues that are relevant to the user. Users can customize their news feed to filter out notifications they don't want to see and focus on the ones they care about. The news feed is a convenient way for developers and collaborators to stay up-to-date on project activity and stay engaged with the GitHub community.

Link: https://github.com

ZDNet:

ZDNet is a business technology news website that provides coverage on various topics such as security, artificial intelligence, cloud computing, and internet of things. It offers a combination of news, analysis, and commentary for IT professionals, developers, and business executives. ZDNet also features a variety of multimedia content including videos, podcasts, and webinars. With a focus on business technology, ZDNet is a valuable resource for anyone looking to stay informed on the latest trends and developments in the tech industry.

Link: https://www.zdnet.com/

Engadget:

Engadget is a tech news website that covers everything from gadgets and gaming to software and the internet. Its mobile app makes it easy for developers to stay updated on the latest tech news and product launches. The website's team of expert journalists and reviewers provides insightful and informative articles, videos, and podcasts to help readers stay up-to-date on the latest tech trends and products.

Link: https://www.engadget.com/

CNET:

CNET is a leading technology media outlet that offers comprehensive coverage of the latest tech news, reviews, and analysis. CNET has become a trusted source of information for millions of readers, providing insights and opinions on a wide range of topics, including smartphones, laptops, home entertainment, gaming, and much more. The website also features video content, podcasts, and interactive tools to help users stay connected with the latest in tech.

Link:https://www.cnet.com/

In conclusion, keeping up with the latest tech news is essential for developers, and there are plenty of apps that make it easy to do so. The apps listed above are just a few of the many options available, and developers should choose the ones that best fit their needs and preferences. With these apps, developers can stay informed, stay ahead of the curve, and revolutionize their news consumption.

That's all folks for now.

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

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

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

Twitter | Instagram | Github | Website

In this blog post, I will be taking you through the quirks of gitigore and will talk about how what git hooks are and how to write a basic hook. You can use these two git features to manage your codebase and write cleaner code. So Let's get going...

As I have mentioned this in my previous blog post, managing code in a collaborative environment can be a challenging task, particularly when it comes to version control.

Git is one of the most popular tools for managing code, and it offers many features that can help make code management easier. In this blog, we'll discuss how to use gitignore and git hooks for better code management.

What is gitignore?

When working on a project, there are often files and directories that you don't want to track with Git. These might include log files, build artifacts or configuration files that contain sensitive information. Gitignore is a feature of Git that allows you to specify patterns of files and directories that should be ignored by Git.

To use gitignore, create a file called .gitignore in the root directory of your Git repository. In this file, you can list patterns of files and directories that Git should ignore. For example, if you want to ignore all log files, you can add the following line to your .gitignore file:

*.log

This will tell Git to ignore all files with the extension .log. You can also use wildcards to ignore entire directories, like this:

logs/

This will tell Git to ignore the entire logs directory and all of its contents.

Using gitignore is important because it keeps your Git repository clean and organized. When you commit changes to your repository, you only want to include the files that are relevant to your project. Ignoring unnecessary files and directories can help prevent your repository from becoming cluttered and difficult to manage.

Gitignore patterns

Gitignore patterns are a way of telling Git which files or directories to ignore. A pattern is simply a string that Git uses to match file and directory names. Here are some common Gitignore patterns:

• *.log: Ignore all files with the extension .log.

• logs/: Ignore the entire logs directory and all of its contents.

• config.py: Ignore the file config.py.

• /build/: Ignore the build directory only if it is in the root directory of the repository.

• **/build/: Ignore the build directory and all of its contents, no matter where it is in the repository.

The double asterisk (**) is a special pattern that matches any number of subdirectories. Using ** in a pattern can be useful if you want to ignore a particular file or directory no matter where it is in the repository.

You can also use negation patterns to specify files or directories that should not be ignored. Negation patterns start with an exclamation mark (!). For example, if you want to ignore all files in a directory except for one, you can use a pattern like this:

mydir/*
!mydir/file.txt

This tells Git to ignore all files in the mydir directory except for file.txt.

What are git hooks?

Git hooks are scripts that Git runs before or after certain Git events, such as committing or pushing changes. Git hooks are stored in the .git/hooks directory of your Git repository, and they can be used to automate tasks or enforce rules for your team's workflow.

There are two types of Git hooks: client-side hooks and server-side hooks. Client-side hooks are run on the local machine where changes are being made, while server-side hooks are run on the remote Git server.

Some common uses of Git hooks include:

• Enforcing code quality standards

• Running tests automatically before committing changes

• Preventing commits that don't meet certain criteria (such as a commit message that doesn't follow a specific format)

Git hook types

Git has a number of hooks that can be used to automate tasks or enforce rules for your team's workflow. Here are some of the most commonly used Git hooks:

Pre-commit hook

The pre-commit hook is run before a commit is made, and it can be used to perform checks or tests on the changes being committed. This hook is useful for enforcing coding standards, running linters or static analysis tools, and preventing commits that don't meet certain criteria.

For example, you can use a pre-commit hook to ensure that all of the code being committed passes a linting check. This can help maintain consistent code quality and prevent bugs caused by common coding errors.

Post-commit hook

The post-commit hook is run after a commit has been made, and it can be used to perform tasks or updates that need to happen after the commit has been made. This hook is useful for performing tasks such as updating a database, sending notifications, or triggering a build process.

For example, you can use a post-commit hook to trigger a build process that automatically deploys your changes to a test environment.

Pre-push hook

The pre-push hook is run before changes are pushed to a remote repository, and it can be used to perform checks or tests on the changes being pushed. This hook is useful for preventing bad code from being pushed to a remote repository and ensuring that all changes meet certain criteria.

For example, you can use a pre-push hook to ensure that all of the code being pushed has passed a test suite. This can help ensure that your codebase remains stable and consistent.

Post-receive hook

The post-receive hook is run after changes have been pushed to a remote repository, and it can be used to perform tasks or updates that need to happen after the changes have been received. This hook is useful for performing tasks such as updating a database, sending notifications, or triggering a build process.

For example, you can use a post-receive hook to trigger a build process that automatically deploys your changes to a production environment.

Prepare-commit-msg hook

The prepare-commit-msg hook is run after a commit message has been entered, but before the commit is made. This hook can be used to modify the commit message or add additional information to it.

For example, you can use a prepare-commit-msg hook to automatically add the branch name or issue number to the commit message. This can help keep your commit messages consistent and organized.

Pre-rebase hook

The pre-rebase hook is run before a rebase operation is performed, and it can be used to perform checks or tests on the changes being rebased. This hook is useful for preventing bad code from being rebased and ensuring that all changes meet certain criteria.

For example, you can use a pre-rebase hook to ensure that all of the code being rebased has passed a test suite. This can help ensure that your codebase remains stable and consistent.

Post-merge hook

The post-merge hook is run after a merge operation has been performed, and it can be used to perform tasks or updates that need to happen after the merge has been completed. This hook is useful for performing tasks such as updating a database, sending notifications, or triggering a build process.

For example, you can use a post-merge hook to trigger a build process that automatically deploys your changes to a test environment.

How to use git hooks

To use Git hooks, you first need to create a script that Git will run. The script should be named after the Git hook you want to use (for example, pre-commit or post-commit). The script should be saved in the .git/hooks directory of your Git repository, and it should be executable.

Here's an example of a pre-commit hook that runs a script to check the formatting of all Python files in your repository:

#!/bin/bash

echo "Checking Python formatting..."

if ! black --check .
then
    echo "Python files are not formatted correctly!"
    exit 1
fi

To make this script executable, you need to run the following command:

chmod +x .git/hooks/pre-commit

This will allow Git to run the script when the pre-commit hook is triggered.

Once you've created your Git hook script, you need to configure Git to use it. You can do this by adding a line to the appropriate Git configuration file. For example, if you want to use a pre-commit hook, you would add the following line to the .git/config file:

[core]
    hooksPath = .git/hooks

This tells Git to use the hooks in the .git/hooks directory of your Git repository.

Git hooks are one of the most important git tools as it can enable you to automate a lot of things in your project i.e. running a code lint or running all the tests before a commit happens. You can even run both lint and test if you want to.

This can help you assure that no bad commits get into the code repository and you can have lesser bugs in the live environment.

That's all folks for now.

Feel free to comment on how you like my blog or shoot me a mail at connect@nandan.dev If you have any queries and 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. Make sure to subscribe to my newsletter to get regular updates on my upcoming posts.

Twitter | Instagram | Github | Website

While I was answering their questions, I could see a lot of their questions revolved around recent layoffs and the evolution of Artificial Intelligence(AI).

While we all know these layoffs are completely business decisions of individual organizations and an impact of current market instability, which I hope will be settled soon and the IT job markets soar again. The fear of AI eating up IT jobs is still there among people and might keep bothering them for some time to come.

We all know AI is a rapidly advancing technology transforming various industries, including IT. AI does have the potential to automate many IT jobs, leading to fears that it will replace human workers. However, in this blog, we will try to break down how AI is unlikely to replace IT jobs entirely. While AI will change the nature of some IT jobs, it will also create new opportunities for IT professionals.

To understand why AI is unlikely to replace IT jobs, it is essential to consider what AI can and cannot do. AI refers to the ability of machines to perform tasks that typically require human intelligence, such as speech recognition, visual perception, decision-making, and language translation. AI systems use machine learning algorithms to analyze and learn from large amounts of data, allowing them to improve their accuracy and performance over time.

While AI can automate many routine tasks, it cannot replace the creativity, problem-solving skills, and emotional intelligence that humans bring to the table. This means that IT jobs that involve critical thinking, creativity, and human interaction are less likely to be automated by AI. These jobs include software engineering, computer programming, IT support, and customer service.

Software engineering and computer programming require creativity and critical thinking skills that cannot be easily replicated by AI. These jobs require a deep understanding of programming languages, algorithms, and software development methodologies, which are areas where AI still has a long way to go. Similarly, jobs that require human interaction, such as IT support and customer service, are unlikely to be replaced by AI. These roles require empathy, problem-solving skills, and the ability to communicate effectively with customers, which are difficult for machines to replicate.

Furthermore, AI is expected to create new job opportunities in the IT industry. As companies adopt AI technology, they will need skilled professionals to manage and maintain these systems. This includes data scientists, machine learning engineers, and AI developers who can create and improve AI algorithms and systems. In fact, AI is already creating new jobs in the IT industry. For example, the demand for data scientists and machine learning engineers has increased dramatically. These professionals are responsible for developing and implementing AI algorithms and systems that can analyze large amounts of data and provide insights for businesses.

Another reason why AI is unlikely to replace IT jobs is that AI technology is still in its infancy. While AI has made significant advances in recent years, many areas still have yet to make a substantial impact. For example, AI is not yet capable of performing tasks that require human emotions or empathy, such as counseling or social work. There are also many areas where AI cannot replace human judgment, such as legal or ethical decision-making. Therefore, humans will always need to work alongside AI to provide context, make decisions, and provide empathy.

Furthermore, the impact of AI on jobs is a complex issue. While AI may not replace all IT jobs, it may lead to job displacement for some workers. This is why it is essential for governments, businesses, and individuals to prepare for the impact of AI on the workforce. This includes investing in education and training programs to help workers develop the skills needed for the jobs of the future. It also means that companies should develop strategies to ensure that workers are not left behind as AI technology advances.

It is also essential to consider the ethical implications of AI and automation. The rise of AI and automation could exacerbate income inequality and lead to joblessness. Therefore, it is essential to ensure that the benefits of AI are distributed equitably across society. Governments and businesses must work together to create policies that promote social inclusion and prevent job displacement.

In conclusion, while AI will undoubtedly impact the IT industry, it is unlikely to replace all IT jobs. Instead, it will transform the way we work, creating new opportunities and changing the nature of existing roles. By embracing AI, and leveraging it for our productivity and help we can actually get better results and improve our final outcome.

That's all folks.

Feel free to comment on how you like my blog or shoot me a mail at connect@nandan.dev If you have any queries and 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. Make sure to subscribe to my newsletter to get regular updates on my upcoming posts.

Twitter | Instagram | Github | Website

Someone once told me, If you want to learn about something start teaching it to others. While I am not good at 1:1 teaching or creating youtube videos, I chose to blog as my medium of teaching.

While I chose front-end and git as my initial topics for my blogs because I felt I was already good at them and that helped me gain initial confidence but now I blog while I learn and hence my frequency of new blogs has been a bit on the lower side.

I will try to be more frequent so I can cover various topics, Series by series.

Around the start of the year 2022, I made a switch from a full-time front-end engineer to Natural Language Processing (NLP) Engineer in my current organization. I started learning more about the NLP technologies that were being widely used. I got introduced to Stanford NLP, BERT, and related technologies.

While I was getting comfortable with all of these, Chatgpt started to gain traction and everyone was talking about it and that is when I got introduced to terms like transformer learning, self-supervised learning, etc. It is when I decided to re-learn the concepts of Natural Language Processing (NLP) that I started this series.

I will start with the basics of NLP and take you through my learnings along the way in the upcoming months. So let's get going.

Natural Language Processing (NLP)

Natural Language Processing (NLP) is a branch of Artificial Intelligence (AI) that focuses on the interaction between computers and human language. It is an interdisciplinary field that combines linguistics, computer science, and information engineering to understand, interpret, and generate human language.

Why use NLP

One of the main goals of NLP is to enable computers to understand and analyze human language in a way that is similar to how humans do it. This allows computers to perform tasks such as language translation, text summarization, sentiment analysis, and more.

Some of the most common NLP techniques include:

• Tokenization: breaking down the text into individual words or phrases

• Lemmatization: reducing words to their base form

• Part-of-speech tagging: identifying the role of each word in a sentence (e.g. noun, verb, adjective)

• Named Entity Recognition: identifying and classifying proper nouns in the text (e.g. people, places, organizations)

• Sentiment Analysis: determining the emotional tone of text (e.g. positive, negative, neutral)

Usage of NLP

NLP is used in a wide range of applications such as chatbots, virtual assistants, language translation, and text summarization. In recent years, NLP has become increasingly important in industries such as finance, healthcare, and customer service.

NLP is a rapidly growing field, and new techniques and technologies are constantly being developed to improve the accuracy and functionality of NLP systems. With the increasing amount of data being generated and the growing importance of understanding and analyzing human language, NLP is set to play an increasingly important role in the future of technology.

In conclusion, NLP is a powerful tool that can be used to analyze and understand human language. From chatbots to text summarization, NLP is being used in a wide range of applications and industries. With the rapid pace of development in the field, it is an exciting time for NLP and its potential to revolutionize the way we interact with technology.

That's all folks for now. In the next blog in this series, I will cover more details on the NLP techniques I have listed above.

Feel free to comment on how you like my blog or shoot me a mail at connect@nandan.dev If you have any queries and 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. Make sure to subscribe to my newsletter to get regular updates on my upcoming posts.

Twitter | Instagram | Github | Website