Video content is rich but hard to search through. If you've ever wanted to find that one moment in a long video a specific visual, object, or scene you know how frustrating it can be. Unlike text, video isn't naturally searchable by keywords or phrases unless someone takes the time to manually add descriptions (and honestly, who has time for that?).

That’s where Video Query AI comes in.

With Video Query AI, you can ask a question like:

❓ "When does the chef dice the onions in this cooking tutorial?"

❓ "Where is the elephant in this video"

❓ "Can you show me where koalas are clapping?"

...and it will instantly give you the exact timestamps where those items appear in your videos. Whether you're searching across all your content or a specific video, you'll get precise results without any manual tagging required.

Introducing Video Query AI 🧠

A fully local, privacy-first app that helps you semantically search through videos using natural language. Simply upload a video, and we’ll do the heavy lifting to process frames, generate descriptions using AI, embed them, and allow fast search.

🎯 Use cases:

• Find key moments in tutorials

• Detect objects/scenes in surveillance videos

• Find specific scenes or moments in videos with text search

App Walkthrough ✨

1️⃣ 🏠 Home & Video Library

• Land on a clean dashboard with a sidebar listing all uploaded videos.

• Browse or search through your video collection easily.

2️⃣ 📤 Video Upload & Processing

• Drag and drop a video file for processing.

• The backend kicks off a background job to:

  • Extract frames using ffmpeg

  • Generate descriptions via LLaVA

  • Generate vector embeddings of those descriptions for semantic search

• Real-time progress updates

  • Updates are streamed live via WebSockets.

  • Progress persists across reloads using Redis Pub/Sub for state sync

3️⃣ 🔍 Natural Language Search

• Enter a query like "Where is the elephant?" or "Chef chopping onions"

• The app performs a vector similarity search against frame captions.

• You’ll get timestamps + thumbnails of the best matching moments in the video.

⚙ System Architecture

Under the Hood 🛠

Video Query AI follows a modular architecture built by:

• Frontend: React + TypeScript with Vite and React Router

• Backend: FastAPI serving REST and WebSocket endpoints

• Job Queue: Redis + RQ for background processing

• Embedding Store: ChromaDB for vector search

• Realtime Updates: WebSockets with Redis Pub/Sub for progress tracking and resumable streams

📼 Video Processing Flow

Here’s what happens behind the scenes when you upload a video:

1. Upload

   • File is saved to disk and its metadata is stored in ChromaDB.

2. Job Queuing

   • A video processing job is pushed to a Redis Queue and handled asynchronously by a worker.

3. Frame Extraction

   • Frames are extracted from the video using ffmpeg.

4. Frame Analysis

   • Each frame is sent through LLaVA (via Ollama) to describe it.

   • Description is embedded into a vector using a sentence transformer.

5. Storage

   • Vector embeddings + metadata is stored in ChromaDB.

6. Progress Updates

   • Real-time progress is sent to the frontend via WebSockets + Redis PubSub.

🔍 Search Flow

Users can search across:

• All uploaded videos

• A single selected video

When a query is made:

1. The backend embeds the query using the same embedding model.

2. A vector similarity search is performed in ChromaDB.

3. Top 10 closest matches (timestamps + thumbnails) are returned.

🔁 Real-Time Progress & Resumability

Even if the user refreshes the page mid-processing:

• The frontend reconnects via WebSocket.

• The backend reads the current job state from Redis and resumes updates seamlessly.

What’s Next ✨

• 🔍 Multi-modal search: Use both audio and visual cues

• 🧩 Tag-based search: Filter by detected objects/tags

• 🎬 Scene-wise processing: Break videos into meaningful segments and let users search by scene, not just individual frames.

Useful links 🔗

• Demo link

• GitHub Repo

That’s all folks ��

Building Video Query AI was a fun way to bring together my interests in video processing, LLMs, and systems engineering. I hope it helps you explore your video content more easily or gives you an idea for something you'd like to build!

Let’s connect:

• Twitter

• GitHub

• LinkedIn

Promise.all()

• It accepts an iterable of promises as its argument and returns a Promise

• If all promises resolve, then the returned promise is resolved with an array of fulfilled values. The order of the values is the same as that of the promises.

• If any of the promises reject, then the returned promise is rejected with the reason of the first rejected promise.

Custom implementation:

Promise.myAll = function (promises) {
  const result = [];
  let resolvedCount = 0;

  if(promises.length === 0) {
    return Promise.resolve(promises)
  }

  return new Promise((resolve, reject) => {
    promises.forEach((promise, idx) => {
      Promise.resolve(promise)
        .then((res) => {
          result[idx] = res;
          resolvedCount++;

          if (resolvedCount === promises.length) {
            resolve(result);
          }
        })
        .catch((err) => {
            reject(err)
        });
    });
  });
};

Test cases:

Test case 1: If all the promises resolve

const case1 = [
  new Promise((resolve) => {
    timer2 = setTimeout(resolve, 3000, "resolved");
  }),
  200,
  Promise.resolve("Hello"),
];

Promise.myAll(case1)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// [ "resolved", 200, "Hello"]

Test case 2: If any of the promises reject

const case2 = [
  Promise.reject("rejected"),
  new Promise((resolve, reject) => {
    timer2 = setTimeout(reject, 3000, "rejectedReason");
  }),
];

Promise.myAll(case2)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// Error: rejected

Test case 3: If an empty array

const case3 = [];

Promise.myAll(case3)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// []

Promise.any()

• It accepts an iterable of promises as its argument and returns a Promise

• The Promise resolves when the first promise in the array resolves. It is resolved with the value of the first promise.

• The Promise rejects when all the promises are rejected. It is rejected with an AggregateError which includes all the rejected promises’ reasons.

Custom implementation:

Promise.myAny = (promises) => {
  const errorsList = new Array(promises.length);
  let counter = 0;

  return new Promise((resolve, reject) => {
    promises.forEach((promise, idx) => {
      Promise.resolve(promise)
        .then((res) => resolve(res))
        .catch((err) => {
          errorsList[idx] = err;
          counter++;

          if (counter === promises.length) {
            reject(
              new AggregateError(errorsList, "All promises were rejected")
            );
          }
        });
    });
  });
};

Test cases:

Test case 1: If any of the promises resolve

const case1 = [
  new Promise((resolve) => {
    timer2 = setTimeout(resolve, 3000, "resolved");
  }),
  200,
  Promise.reject("Hello"),
];

Promise.myAny(case1)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// 200

Test case 2: If all of the promises reject

const case2 = [
  Promise.reject("rejected"),
  new Promise((resolve, reject) => {
    timer2 = setTimeout(reject, 3000, "rejectedReason");
  }),
];

Promise.myAny(case2)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err.name, err.message, err.errors));

// Output:
// Error: AggregateError All promises were rejected ["rejected", "rejectedReason"]

Promise.race()

• It accepts an iterable of promises as its argument and returns a Promise

• It returns a Promise when any of the passed promises is settled.

• If the first settled promise is resolved, the returned promise is resolved.

• If the first settled promise is rejected, the returned promise is rejected.

Polyfill:

Promise.myRace = (promises) => {
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      Promise.resolve(promise).then(resolve, reject).catch(reject);
    });
  });
};

Test cases:

Test case 1: If the first settled promise resolves

const case1 = [
  new Promise((resolve) => {
    timer2 = setTimeout(resolve, 3000, "resolved");
  }),
  200,
  Promise.reject("Hello"),
];

Promise.myRace(case1)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// 200

Test case 2: If the first settled promise rejects

const case2 = [
  Promise.reject("rejected"),
  new Promise((resolve) => {
    timer2 = setTimeout(resolve, 3000, "rejectedReason");
  }),
];

Promise.myRace(case2)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// Error: rejected

Promise.allSettled()

• It accepts an iterable of promises as its argument and returns a Promise

• It returns a Promise when all of the passed promises are settled.

• It is resolved with an array of values that provided the status of the promise i.e. whether it is fulfilled or rejected and the value or the reason with which the promise was fulfilled or rejected respectively.

Polyfill:

Promise.myAllSettled = (promises) => {
  const results = new Array(promises.length);
  let counter = 0;

  return new Promise((resolve, reject) => {
    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then((res) => {
          results[index] = { status: "fulfilled", value: res };
        })
        .catch((err) => {
          results[index] = { status: "rejected", reason: err };
        })
        .finally(() => {
          counter++;
          if (counter === promises.length) {
            resolve(results);
          }
        });
    });
  });
};

Test cases:

Test case: When all promises settle

const case1 = [
  new Promise((resolve) => {
    timer2 = setTimeout(resolve, 3000, "resolved");
  }),
  200,
  Promise.reject("Hello"),
];

Promise.myAllSettled(case1)
  .then((res) => console.log(res))
  .catch((err) => console.log("Error: ", err));

// Output:
// [
//  { status: 'fulfilled', value: 'resolved' },
//  { status: 'fulfilled', value: 200 },
//  { status: 'rejected', reason: 'Hello' }
// ]

That’s all folks 👋

Hope you liked this article! If there are any improvements that can be made in the polyfills, feel free to raise an issue here 👇

Let’s connect:

• Twitter

• GitHub

• LinkedIn

1. Understanding the Problem 💻

Nowadays websites have large headers or navigation. This makes it difficult for screen reader and keyboard users to quickly navigate to the main content. They need to tab through each navigation link before reaching the main content. This results in a bad user experience.

2. Skip Links: The Solution 🔗

To make it easy for screen readers, keyboard users, and other assistive technology users to navigate to the main content, skip links should be built.

• Skip links are present at the top of the website and are visually hidden.

• On the first Tab press, this link gains focus and is visible to the users.

• The users can then navigate directly to the main content by using the link.

3. Building a Skip Link 👩‍💻

Following are the steps to build a skip link:

1. Create a link that navigates it to the main content.

2. Place the link at the top of the website so that it gains focus on the first Tab press.

3. Make the link visually hidden.

4. Show the link on focus.

3.0 The basic setup

The body of the HTML has 4 navigation links and then the main content. Screen readers or keyboard users will travel through all these navigation links before going to the main content.

<body>
    <nav>
        <a href="/">Nav link 1</a>
        <a href="/">Nav link 2</a>
        <a href="/">Nav link 3</a>
        <a href="/">Nav link 4</a>
    </nav>
    <main>
        <h1 id="main">Hello world </h1>
        <a href="/">About us</a>
    </main>
</body>

3.1. Creating a link

• Create a link to the main content on the page.

• Place it at the top of the web page.

<body>
  <a href="#main" class="skip-link">Skip to content</a>

    <nav>
        <a href="/">Nav link 1</a>
        <a href="/">Nav link 2</a>
        <a href="/">Nav link 3</a>
        <a href="/">Nav link 4</a>
  </nav>
  <main id="main">
    <h1>Hello world </h1>
    <a href="/">About us</a>
  </main>

</body>

3.2. Hiding the link

Giving the link an absolute position and translating it by the X-axis by -100% will make it hidden.

.skip-link {
    position: absolute;
    background: white;
    transform: translateX(-100%);
    overflow: hidden;
    width: 1px;
}

3.3. Showing the link on focus

Translating the skip link to 0% will make the link visible.

.skip-link:focus {
    transform: translateX(0%);
    overflow: auto;
    width: auto;
}

4. Result ✨

Now, on Tab press, the Skip to content link is visible. By clicking on that link, we can skip the navigation links and go directly to the main content.

5. That’s all folks 🙌

By providing a quick and easy way for users to navigate directly to the main content, skip links can improve the overall user experience and accessibility of a website.

Let’s connect:

• Twitter

• GitHub

• LinkedIn

1. Setup Google Colab

1.1. Create a new notebook on Google Colab

To create a new notebook on Google Colab, follow these steps:

1. Go to colab.research.google.com in your web browser.

2. Sign in to your Google account if you are not already signed in.

3. In the top-left corner of the page, click on File and then select the "New Notebook" button.

   

4. This will open a new notebook in a new tab in your web browser.

5. In the top-left corner of the notebook, you will see the name "Untitled0" - you can click on this to give your notebook a new, more descriptive name.

6. You are now ready to start using your new notebook on Google Colab.

1.2. Change the Runtime

To change the runtime in Google Colab, follow these steps:

1. Open the notebook that you want to change the runtime for in Google Colab.

2. In the top-left corner of the notebook, click on the "Runtime" dropdown menu.

3. From the dropdown menu, select the "Change runtime type" option.

   

4. This will open the "Runtime type" pop-up window.

5. In the "Hardware accelerator" dropdown menu, select GPU.

   

6. Click on the "Save" button to save your changes and apply the new runtime.

   

7. The runtime for your notebook will now be changed to the selected option.

2. Setup Cuda

2.1 Clean the instance

In a code cell, run the following command to remove all CUDA-related packages and files from the Google Colab instance:

!apt-get --purge remove cuda nvidia* libnvidia-*
!dpkg -l | grep cuda- | awk '{print $2}' | xargs -n1 dpkg --purge
!apt-get remove cuda-*
!apt autoremove
!apt-get update

2.2 Install Cuda

To install CUDA on Google Colab, in a code cell, run the following command:

!wget  --no-clobber https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/cuda-repo-ubuntu1804_10.0.130-1_amd64.deb
!dpkg -i cuda-repo-ubuntu1804_10.0.130-1_amd64.deb
!sudo apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/7fa2af80.pub
!apt-get update
!apt-get install cuda-10-0

2.3 Check Installation

After the installation is complete, run the following command to verify that CUDA has been installed correctly:

!nvcc --version

This should print the version of CUDA that has been installed on your Google Colab instance.

Output:

3. Install the NVCC plugin

3.1 What is the NVCC plugin?

• The NVCC plugin is an extension that allows you to compile and run CUDA C/C++ code directly in your Google Colab notebook.

• The NVCC plugin uses the NVCC (NVIDIA CUDA Compiler) command-line tool to compile and run CUDA code, providing a convenient and easy-to-use interface for writing, testing, and debugging CUDA code within the notebook environment.

• Once the NVCC plugin is installed and loaded, you can use it to write and run CUDA C/C++ code in the code cells of your notebook.

• The plugin will automatically compile your code using NVCC and run it on the available CUDA-capable GPU, allowing you to take advantage of the GPU's parallel processing capabilities to speed up your code.

3.2 Install the nvcc plugin

To load the NVCC plugin on Google Colab, in a code cell, run the following command to install the NVCC plugin:

!pip install git+https://github.com/andreinechaev/nvcc4jupyter.git

3.3 Load the plugin

After the installation is complete, to load the extension run the following command:

%load_ext nvcc_plugin

4. Run the CUDA program

To start a CUDA code block in Google Colab, you can use the %%cu cell magic. To use this cell magic, follow these steps:

1. In a code cell, type %%cu at the beginning of the first line to indicate that the code in the cell is CUDA C/C++ code.

2. After the %%cu cell magic, you can write your CUDA C/C++ code as usual.

3. When the code is executed, the %%cu cell magic will automatically compile the code using NVCC and run it on the available CUDA-capable GPU. The results of the code execution will be displayed in the output of the code cell.

Example:

%%cu
#include <stdio.h>
#include <stdlib.h>
int main() {
    printf("Hello world");
    return 0;
}

Output:

5. Run the OpenMP program

5.1. Write code using the %%cuda cell magic

To start an OpenMP code block in Google Colab, you can use the %%cuda cell magic followed by the --name option and the name of the CUDA file that will contain your OpenMP code. To use this cell magic, follow these steps:

1. Open the notebook that you want to use the %%cuda cell magic in Google Colab.

2. In a code cell, type %%cuda --name omp_cuda.cu at the beginning of the first line to indicate that the code in the cell is CUDA C/C++ code that will be saved in a file named "omp_cuda.cu".

3. After the %%cuda cell magic, you can write your OpenMP code as usual.

%%cuda --name omp_cuda.cu

Example:

%%cuda --name omp_cuda.cu
#include <stdio.h>
#include <omp.h>
int main() {
    printf("Hello world");
    return 0;
}

Output:

5.2. Run the OpenMP code

To run an OpenMP code on Google Colab, in a code cell, run the following command to compile the OpenMP code using NVCC and generate an executable file:

!nvcc -Xcompiler="-fopenmp" -arch=sm_75 -o /content/src/omp_cuda /content/src/omp_cuda.cu
!/content/src/omp_cuda

• The command in the first line will compile OpenMP code in the file "omp_cuda.cu" using NVCC and generate an executable file named "omp_cuda" in the content/src directory.

• The f-openmp option indicates the code uses the OpenMP library.

• The -arch=sm_75 option specifies the compute capability of the GPU the code will run on.

• The command in the second line will run the "omp_cuda" executable file, which will in turn execute the OpenMP code on the available CUDA-capable GPU. The output of the code execution will be displayed in the output of the code cell.

Output:

That's all folks 👋

I hope this article helps you to run your CUDA and OpenMP program on Google Collab! Let's connect:

• Twitter

• GitHub

• LinkedIn

While working on projects, I used many JavaScript methods. I was curious about their implementation. So, I tried to implement some of them and it was fun! Fast forward to today, I wrote polyfills for 32 JavaScript Array methods.

In this article, I’ve shared my custom implementation of the JavaScript methods.

While implementing, I’ve divided the methods into 6 categories:

1. Searching methods
2. Manipulation(Mutating) methods
3. Iterative methods
4. Map, filter, and reduce methods
5. Returning array iterator methods
6. Other operations methods

PS: There might be some improvements that can be made or some test cases that I’ve missed addressing in the custom implementations. You can create an issue in this repository if you find any improvement that can be made. Thanks!

Searching methods:

1. at()

at() method accepts an integer and returns the element present at that index in the array

Test cases:

1. Positive integer
   • returns the element present at that index
2. Negative integer
   • counts the element from the last index and returns the element present at that index
3. Integer which is out of range of the array length
   • returns undefined

Custom implementation:

Array.prototype.myAt = function (index) {
  if (index >= 0) {
    return this[index];
  } else {
    return this[this.length + index];
  }
};

Output:

const arr = ["a", "b", "c", "d", "e"];

// Test case 1:
console.log(arr.myAt(3));
//  output: d 

// Test case 2:
console.log(arr.myAt(-1));
// output: e

// Test case 3:
console.log(arr.myAt(7));
// output: undefined

2. indexOf()

indexOf() method accepts an element and returns the first index at which the element is present in the array

Test cases:

1. Element found
   • returns the index of the first element where the given element is present
2. Element not found
   • returns -1

Custom implementation:

Array.prototype.myIndexOf = function (element, fromIndex = 0) {
  for (let i = fromIndex; i < this.length; i++) {
    if (this[i] === element) {
      return i;
    }
  }
  return -1;
};

Output:

const arr = ["a", "b", "c", "d", "e", "a"];

// Test case 1:
console.log(arr.myIndexOf("a"));
//  output: 0 

// Test case 2:
console.log(arr.myIndexOf("z"));
// output: -1

3. lastIndexOf()

lastIndexOf() method accepts an element and returns the last index at which the element is present in the array

Test cases:

1. Element found
   • returns the index of the last element where the given element is present
2. Element not found
   • returns -1

Custom implementation:

Array.prototype.myLastIndexOf = function (
  element,
  fromIndex = this.length - 1
) {
  for (let i = fromIndex; i >= 0; i--) {
    if (this[i] === element) {
      return i;
    }
  }
  return -1;
};

Output:

const arr = ["a", "b", "c", "d", "e", "a"];

// Test case 1:
console.log(arr.myLastIndexOf("a"));
//  output: 5 

// Test case 2:
console.log(arr.myLastIndexOf("z"));
//  output: -1

4 find()

• find() method accepts a callback testing function which is executed on every element of the array.
• The first element in the given array that fulfills the testing function is returned by the find() method.

Test cases:

1. Element found
   • returns the first element for which the callback function returns a truthy value
2. Element not found
   • returns undefined

Custom Implementation:

Array.prototype.myFind = function (cb) {
  for (let i = 0; i < this.length; i++) {
    if (cb(this[i], i, this)) {
      return this[i];
    }
  }
};

Output:

const arr = [10, 20, 31, 44, 55, 67];

const result1 = arr.myFind((element) => element % 20 === 0);
console.log(result1);
// output: 20

const result2 = arr.myFind((element) => element % 3 === 0);
console.log(result2);
// output: undefined

5 findIndex()

• findIndex() method accepts a testing callback function that executes on every element of the array
• The index of the first element in the given array that fulfills the testing function is returned by the find() method.

Test cases:

1. Element found
   • returns the index of the first element for which the callback function returns a truthy value
2. Element not found
   • returns -1, if the callback function doesn’t return a truthy value for any element in the array

Custom Implementation:

Array.prototype.myFindIndex = function (cb) {
  for (let i = 0; i < this.length; i++) {
    if (cb(this[i], i, this)) {
      return i;
    }
  }
  return -1;
};

Output:

const arr = [10, 20, 31, 44, 55, 67];

const result1 = arr.myFindIndex((element) => element % 20 === 0);
console.log(result1);
// output: 1

const result2 = arr.myFindIndex((element) => element % 3 === 0);
console.log(result2);
// output: -1

6 findLast()

• findLast() method accepts a testing callback function that executes on every element of the array
• The last element in the given array that fulfills the testing function is returned by the find() method.

Test cases:

1. Element found
   • returns the last element for which the callback function returns a truthy value
2. Element not found
   • returns undefined

Custom Implementation:

Array.prototype.myFindLast = function (cb) {
  for (let i = this.length; i >= 0; i--) {
    if (cb(this[i], i, this)) {
      return this[i];
    }
  }
};

Output:

const arr = [10, 20, 31, 44, 55, 67];

const result1 = arr.myFindLast((element) => element % 5 === 0);
console.log(result1);
// output: 55

const result2 = arr.myFindLast((element) => element % 3 === 0);
console.log(result2);
// output: undefined

7 findLastIndex()

• findLastIndex() method accepts a callback function that executes on every element of the array
• The index of the last element in the given array that fulfills the testing function is returned by the find() method.

Test cases:

1. Element found
   • returns the index of the last element for which the callback function returns a truthy value
2. Element not found
   • returns -1, if the callback function doesn’t return a truthy value for any element in the array

Custom Implementation:

Array.prototype.myFindLastIndex = function (cb) {
  for (let i = this.length; i >= 0; i--) {
    if (cb(this[i], i, this)) {
      return i;
    }
  }
  return -1;
};

Output:

const arr = [10, 20, 31, 44, 55, 67];

const result1 = arr.myFindLastIndex((element) => element % 5 === 0);
console.log(result1);
// output: 4

const result2 = arr.myFindLastIndex((element) => element % 3 === 0);
console.log(result2);
// output: -1

8 includes()

includes() checks whether the given element is present in the array if it is present, the method returns true, else false.

Test cases:

1. Element found
   • returns true
2. Element not found
   • returns false

Custom implementation:

Array.prototype.myIncludes = function (element, fromIndex = 0) {
  for (let i = fromIndex; i < this.length; i++) {
    if (this[i] === element) {
      return true;
    }
  }
  return false;
};

Output:

const arr = ["a", "b", "c", "d", "e", "a"];

// Test case 1:
const result1 = arr.myIncludes("a");
console.log(result1)
// output: true

// Test case 2:
const result2 = arr.myIncludes("z");
console.log(result2)
// output: false

9 some()

• some() method accepts a callback function that executes on every element of the array
• it returns true if at least one element in the array returns a truthy value for the callback function provided.

Test cases:

1. At least one element found
   • returns true
2. No element found
   • returns false

Custom Implementation:

Array.prototype.mySome = function (cb) {
  for (let i = 0; i < this.length; i++) {
    if (cb(this[i])) {
      return true;
    }
  }
  return false;
};

Output:

// Test case 1:
const arr1 = [10, 21, 32, 43, 54, 65];
const hasEven = arr1.mySome((el) => el % 2 === 0);
console.log(hasEven);
// output: true 

// Test case 2:
const arr2 = [10, 20, 30, 40, 50, 60];
const hasOdd = arr2.mySome((el) => el % 2 !== 0);
console.log(hasOdd);
// output: false

10 every()

• every() method accepts a callback function that executes on every element of the array
• It returns true if every element in the array returns a truthy value for the callback function provided

Test cases:

1. Every element found
   • returns true
2. Some elements found
   • returns false
3. No element found
   • returns false

Custom Implementation:

Array.prototype.myEvery = function (cb) {
  for (let i = 0; i < this.length; i++) {
    if (!cb(this[i])) {
      return false;
    }
  }
  return true;
};

Output:

// Test case 1
const arr1 = [10, 20, 30, 40, 50, 60];
const isAllEven = arr1.myEvery((el) => el % 2 === 0)
console.log(isAllEven);
// output: true 

// Test case 2
const arr2 = [10, 21, 30, 41, 50, 60];
const isAllEven1 = arr2.myEvery((el) => el % 2 === 0)
console.log(isAllEven1);
// output: false

// Test case 3
const arr3 = [11, 21, 30, 41, 51, 61];
const isAllEven2 = arr3.myEvery((el) => el % 2 === 0)
console.log(isAllEven2);
// output: false

Iterative:

11 forEach()

• forEach() accepts a callback function and executes it on every element.
• returns undefined
• the callback function is not invoked on uninitialized elements

Test cases:

1. Array with all elements:
   • the callback function is executed on every element
2. Sparse array
   • the callback function is not executed on uninitialized elements

Custom implementation:

Array.prototype.myForEach = function (cb) {
  for (let i = 0; i < this.length; i++) {
    if (typeof this[i] !== "undefined") {
      cb(this[i], i, this);
    }
  }
};

Output:

// Test case 1:
const arr = ["a", "b", "c"];

arr.myForEach((element, index) => console.log({[index]: element}));
// output:
// {0: 'a'}
// {1: 'b'}
// {2: 'c'}

// Test case 2:
const arr1 = ["a", , "c"];

arr1.myForEach((element, index) => console.log({[index]: element}));
// output:
// {0: 'a'}
// {2: 'c'}

map, filter, reduce

12 map()

• map() method accepts a callback function that executes on every element of the array
• it returns a new array
• the new array contains the return values of the callback function that is executed on every element of the array

Custom implementation:

Array.prototype.myMap = function (cb) {
  let result = [];

  for (let i = 0; i < this.length; i++) {
    const value = cb(this[i], i, this);
    result.push(value);
  }

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

const result = arr.myMap((el) => el * 2);

console.log(result);
// output: [2, 4, 6, 8, 10];

13 filter()

• filter() method accepts a callback function that executes on every element of the array
• it returns a new array
• the new array contains only those elements for which the callback function returns a truthy value

Custom implementation:

Array.prototype.myFilter = function (cb) {
  let result = [];

  for (let i = 0; i < this.length; i++) {
    if (cb(this[i], i, this)) {
      result.push(this[i]);
    }
  }

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

const result = arr.myFilter((el) => el % 2 === 0);

console.log(result);
// output: [2, 4];

14 reduce()

• reduce() method accepts a callback function called the reducer.
• The reducer is executed on every element of the array and reduces it to a single value.
• The reducer function has four arguments: previous value, current value, the current index, and the array

Test cases:

1. Without passing the initial value
2. Passing initial value

Custom implementation:

Array.prototype.myReduce = function (cb, initialValue) {
  let result;
  let startIndex = 0;

  if (arguments.length <= 1) {
    result = this[0];
    startIndex = 1;
  }

  if (arguments.length >= 2) {
    result = initialValue;
  }

  for (let i = startIndex; i < this.length; i++) {
    result = cb(result, this[i]);
  }

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

// Test case 1:
const sum = arr.myReduce((prev, curr) => prev + curr);
console.log(sum);
// output: 15

// Test case 2:
const oddEvenCount = arr.myReduce(
      (prev, curr) =>
        curr % 2 == 0
          ? { ...prev, even: prev.even + 1 }
          : { ...prev, odd: prev.odd + 1 },
      { even: 0, odd: 0 }
    );
console.log(oddEvenCount)
// output: {even: 2, odd: 3};

15 reduceRight()

reduceRight() is the same as the reduce() method, the only difference being that it executes the reducer function backward from the last element of the array.

Test cases:

1. Without passing the initial value
2. Passing initial value

Custom implementation:

Array.prototype.myReduceRight = function (cb, initialValue) {
  let result;
  let startIndex = this.length - 1;

  if (arguments.length <= 1) {
    result = this[this.length - 1];
    startIndex = this.length - 2;
  }

  if (arguments.length >= 2) {
    result = initialValue;
  }

  for (let i = startIndex; i >= 0; i--) {
    result = cb(result, this[i]);
  }

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

// Test case 1:
const sum = arr.myReduceRight((prev, curr) => prev + curr);
console.log(sum);
// output: 15

// Test case 2:
const oddEvenCount = arr.myReduceRight(
      (prev, curr) =>
        curr % 2 == 0
          ? { ...prev, even: prev.even + 1 }
          : { ...prev, odd: prev.odd + 1 },
      { even: 0, odd: 0 }
    );
console.log(oddEvenCount)
// output: {even: 2, odd: 3};

Manipulating methods:

16 unshift()

• unshift() adds elements to the start of the array.
• It mutates the original array.
• It returns the new length of the array.

Custom implementation:

Array.prototype.myUnshift = function () {
  if (arguments.length > 0) {
    // move elements of the array ahead
    for (let i = this.length - 1; i >= 0; i--) {
      this[i + arguments.length] = this[i];
    }

    // add the args elements at the start
    for (let i = 0; i < arguments.length; i++) {
      this[i] = arguments[i];
    }
  }

  return this.length;
};

Output:

const array = ["a", "b", "c", "d", "e"];
const result = array.myUnshift("z", "y", "p");

console.log(result)
// 8

console.log(array)
// ["z", "y", "p", "a", "b", "c", "d", "e"];

17 pop()

• pop() removes the last element of the array.
• It mutates the original array.
• It returns the removed element.

Test cases:

1. empty array
   • returns undefined
2. non-empty array
   • returns the new length of the array

Custom implementation:

Array.prototype.myPop = function () {
  if (this.length > 0) {
    let lastEl = this[this.length - 1];
    this.length -= 1;
    return lastEl;
  }
};

Output:

// Test case 1:
const array = ["a", "b", "c", "d", "e"];
const result = array.myPop();
console.log(result); // "e"
console.log(array); // ["a", "b", "c", "d"];

// Test case 2:
const emptyArray = [];
const result1 = emptyArray.myPop();
console.log(result1); // undefined
console.log(emptyArray); // [];

18 push()

• push() adds elements to the end of the array.
• It mutates the original array.
• It returns the new length of the array.

Custom implementation:

Array.prototype.myPush = function () {
  for (let i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i];
  }
  return this.length;
};

Output:

const array = ["a", "b", "c", "d", "e"];
const result = array.myPush("z", "y", "p");

console.log(result)
// 8

console.log(array)
// ["a", "b", "c", "d", "e", "z", "y", "p"];

19 shift()

• shift() removes the first element of the array.
• It mutates the original array.
• It returns the removed element.

Test cases:

1. empty array
   • returns undefined
2. non-empty array
   • returns the new length of the array

Custom implementation:

Array.prototype.myShift = function () {
  if (this.length > 0) {
    const firstEl = this[0];

    for (let i = 0; i < this.length; i++) {
      this[i] = this[i + 1];
    }

    this.length -= 1;

    return firstEl;
  }
};

Output:

// Test case 1:
const array = ["a", "b", "c", "d", "e"];
const result = array.myShift();
console.log(result); // "a"
console.log(array); // ["b", "c", "d", "e"];

// Test case 2:
const emptyArray = [];
const result1 = emptyArray.myShift();
console.log(result1); // undefined
console.log(emptyArray); // [];

20 fill()

• fill() fills or replaces elements in an array with a given value.
• It accepts three arguments: value, start, and, end.
• It fills the elements between start and end with the given value.

Test cases:

1. No start and end provided
   • fills all the elements with the value given.
2. start provided, end not provided
   • fills all the elements starting from the start index with the value given.
3. start and end both provided
   • fills all the elements between start and end with the value given. (element at the end index is not included)
4. Negative indexes:
   • counts the index backward from the last element of the array

Custom implementation:

Array.prototype.myFill = function (value, start = 0, end = this.length) {
  if (start < 0) {
    start = this.length + start;
  }

  if (end < 0) {
    end = this.length + end;
  }

  for (let i = start; i < end; i++) {
    this[i] = value;
  }

  return this;
};

Output:

// Test case 1:
const arr1 = ["a", "b", "c", "d", "e"];
const result1 = arr1.myFill("*");
console.log(result1)
// ["*", "*", "*", "*", "*"];

// Test case 2:
const arr2 = ["a", "b", "c", "d", "e"];
const result2 = arr2.myFill("*", 1);
console.log(result2)
// ["a", "*", "*", "*", "*"];

// Test case 3:
const arr3 = ["a", "b", "c", "d", "e"];
const result3 = arr3.myFill("*", 1, 3);
console.log(result3)
// ["a", "*", "*", "d", "e"];

// Test case 4:
const arr4 = ["a", "b", "c", "d", "e"];
const result4 = arr4.myFill("*", -4, -1);
console.log(result4)
// ["a", "*", "*", "*", "e"];

21 reverse()

reverse() method reverses the array. It mutates the original array and returns the reversed array

Custom implementation:

Array.prototype.myReverse = function () {
  let start = 0,
    end = this.length - 1;

  while (start < end) {
    let temp = this[start];
    this[start] = this[end];
    this[end] = temp;
    start++;
    end--;
  }

  return this;
};

Output:

const arr = [1, 2, 3, 4, 5];
const result = arr.myReverse();

console.log(arr); // [5, 4, 3, 2, 1]
console.log(result); // [5, 4, 3, 2, 1]

22 sort()

• sort() method sorts the array.
• By default, it converts the elements to strings and sorts them in ascending order.
• We can provide a comparator function to sort the elements in a custom order.

Test cases:

1. comparator function not provided
   • It converts the elements to strings and sorts them in ascending order.
2. comparator function provided
   • It sorts the elements based on the comparator function

Custom implementation:

function defaultComparator(a, b) {
  a = a.toString();
  b = b.toString();
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  return 0;
}

Array.prototype.mySort = function (cb = defaultComparator) {
  for (var i = 0; i < this.length; i++) {
    for (var j = i + 1; j < this.length; j++) {
      if (cb(this[i], this[j]) > 0) {
        var swap = this[i];
        this[i] = this[j];
        this[j] = swap;
      }
    }
  }
};

Output:

// Test case 1:
const arr = [30, 55, 1, 3, 66, 22];
arr.mySort();
console.log(arr);
// output: [1, 22, 3, 30, 55, 66];

// Test case 1:
const arr1 = [30, 55, 1, 3, 66, 22];
arr1.mySort((a, b) => a - b);
console.log(arr1);
// output: [1, 3, 22, 30, 55, 66];

23 copyWithin()

copyWithin() copies a portion of the array to another location within the same array. It accepts three arguments: target, start, and end.

Test cases:

1. target provided, start and end not provided
   • It will copy the element at the 0th index to the target index
2. target and start provided, end not provided
   • It will copy the element present at the start index to the target index
3. target, start, and, end provided
   • It will copy the elements lying between the start and end to the target index. (element present at the end index will not be included)

Custom implementation:

Array.prototype.myCopyWithin = function (
  target = 0,
  start = 0,
  end = this.length
) {
  if (target < 0) {
    target = this.length + target;
  }

  if (start < 0) {
    start = this.length + start;
  }

  if (end < 0) {
    end = this.length + end;
  }

  for (let i = start; i < end && target < this.length; i++) {
    this[target] = this[i];
    target++;
  }

  return this;
};

Output:

// Test Case 1:
const array1 = ['a', 'b', 'c', 'd', 'e'];
array1.myCopyWithin(4); 
console.log(array1)
// output: ['a', 'b', 'c', 'd', 'a']

const array2 = ['a', 'b', 'c', 'd', 'e'];
array2.myCopyWithin(3, 1); 
console.log(array2)
// output: ['a', 'b', 'c', 'b', 'c']

const array3 = ['a', 'b', 'c', 'd', 'e', 'f'];
array3.myCopyWithin(0, 3, 5); 
console.log(array3)
// output: ['d', 'e', 'c', 'd', 'e', 'f']

Returning iterator methods

24 keys()

keys() creates and returns an Array Iterator object with the key for each item in the array.

Custom implementation:

Array.prototype.myKeys = function () {
  let keys = [];
  for (let i = 0; i < this.length; i++) {
    keys.push(i);
  }

  function* iterator() {
    yield* keys;
  }

  return iterator();
};

Output:

const arr = ["a", "b", "c", "d", "e"];

const keys = arr.myKeys();

console.log(keys.next().value);
//output: 0

for (let key of keys) {
        console.log(key);
}

/**
output:
1
2
3
4
**/

25 values()

values() creates and returns an Array Iterator object with the value for each item in the array.

Custom implementation:

Array.prototype.myValues = function () {
  let keys = [];
  for (let i = 0; i < this.length; i++) {
    keys.push(this[i]);
  }

  function* iterator() {
    yield* keys;
  }

  return iterator();
};

Output:

const arr = ["a", "b", "c", "d", "e"];

const values = arr.myValues();

console.log(values.next().value);
//output: a

for (let value of values) {
        console.log(value);
}

/**
output:
a
b
c
d
e
**/

26 entries()

entries() creates and returns an Array Iterator object with key-value pairs for each item in the array.

Custom implementation:

Array.prototype.myEntries = function () {
  let keys = [];
  for (let i = 0; i < this.length; i++) {
    keys.push([i, this[i]]);
  }

  function* iterator() {
    yield* keys;
  }

  return iterator();
};

Output:

const arr = ["a", "b", "c", "d", "e"];

const entries = arr.myEntries();

console.log(entries.next().value);
//output: [0, 'a']

for (let entry of entries) {
        console.log(entry);
}

/**
output:
[1, 'b']
[2, 'c']
[3, 'd']
[4, 'e']
**/

Other methods:

27 slice()

• slice() is used to slice the array and get a portion of the array.
• It accepts the start and end index as arguments and returns the portion of the array lying between them.

Test cases:

1. Positive start index
   • Returns the array elements starting from the start index
2. Positive start and end index
   • Returns the portion array lying between the start and end index. (the element lying on the end index is not included)
3. Negative start index
   • The index is counted backward from the end.
4. Negative start and end index
   • The index is counted backward from the end. Returns the portion array lying between the start and end index. (the element lying on the end index is not included)

Custom implementation:

Array.prototype.mySlice = function (start = 0, end = this.length) {
  if (start < 0) {
    start = this.length + start;
  }

  if (end < 0) {
    end = this.length + end;
  }

  let arr = [];
  for (let i = start; i < end; i++) {
    arr.push(this[i]);
  }

  return arr;
};

Output:

const arr = 
["a", "b", "c", "d", "e"];

// Test case 1:
const result1 = arr.mySlice(2);
console.log(result1);
// output: ["c", "d", "e"]

// Test case 2:
const result2 = arr.mySlice(2, 4);
console.log(result2);
// output: ["c", "d"]

// Test case 3:
const result3 = arr.mySlice(-1);
console.log(result3);
// output: ["e"]

// Test case 4:
const result4 = arr.mySlice(-5, -2);
console.log(result4);
// output: ["a", "b", "c"]

28 concat()

concat() method merges two or more arrays or values.

Test cases:

1. merging two arrays
   1. returns the merger array
2. merging a variable with an array
   1. merges the variable to the array and returns the merged array
3. merging three arrays
   1. merges the three arrays in the order given and returns the merged array

Custom implementation:

Array.prototype.myConcat = function () {
  let newArr = [];

  for (let i = 0; i < this.length; i++) {
    newArr.push(this[i]);
  }

  for (let i = 0; i < arguments.length; i++) {
    if (Array.isArray(arguments[i])) {
      const dummyArr = arguments[i];
      for (let i = 0; i < dummyArr.length; i++) {
        newArr.push(dummyArr[i]);
      }
    } else {
      newArr.push(arguments[i]);
    }
  }

  return newArr;
};

Output:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// Test case 1:
const result1 = arr1.myConcat(arr2);
console.log(result1);
// output: [1, 2, 3, 4, 5, 6]

// Test case 2:
const result2 = arr1.myConcat("a");
console.log(result2);
// output: [1, 2, 3, "a"]

// Test case 3:
const result3 = arr1.myConcat(arr2, arr3);
console.log(result3);
// output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

29 flat()

flat() methods flatten an array up to a given depth. Flattens here means it concatenates the sub-array elements into the original array. It returns the flattened array.

Test cases:

1. no depth specified
   • flattens till depth 1
2. depth argument passed
   • flattens till the given depth

Custom implementation:

Array.prototype.myFlat = function (depth = 1) {
  const result = [];

  (function flatten(arr, depth) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i]) && depth > 0) {
        flatten(arr[i], depth - 1);
      } else {
        result.push(arr[i]);
      }
    }
  })(this, depth);

  return result;
};

Array.prototype.myDeepFlat = function () {
  let result = [];

  (function flatten(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        flatten(arr[i]);
      } else {
        result.push(arr[i]);
      }
    }
  })(this);

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

// Test Case 1:
const arr1 = [10, 20, ["a", "b"]];
const result1 = arr1.myFlat();
console.log(result1);
// output: [10, 20, "a", "b"];

// Test Case 2:
const arr2 = [10, 20, [["a", "b"]]];;
const result2 = arr2.myFlat(2);
console.log(result2);
// output: [10, 20, "a", "b"];

30 flatMap()

flatMap() accepts a callback function. It executes the callback function on every element of the array, flattens the result to depth 1, and returns the newly formed array

Custom implementation:

Array.prototype.myFlatMap = function (cb) {
  let result = [];

  for (let i = 0; i < this.length; i++) {
    let cbRes = cb(this[i], i, this);

    if (Array.isArray(cbRes)) {
      for (let i = 0; i < cbRes.length; i++) {
        result.push(cbRes[i]);
      }
    } else {
      result.push(cbRes);
    }
  }

  return result;
};

Output:

const arr = [10, 21, 30, 42, 50];

// Test case 1: 
const result1 = arr.myFlatMap((el) => (el % 10 === 0 ? [] : [el]));
console.log(result1);
// output: [21, 42];

// Test case 2: 
const result2 = arr.myFlatMap((el) => el);
console.log(result2);
// output: [10, 21, 30, 42, 50];

31 join()

join() method concatenates the array and returns a string.

Test cases:

1. no separator argument passed:
   • concatenates element using , a comma as a separator
2. separator passed
   • concatenates elements using the separator provided

Custom implementation:

Array.prototype.myJoin = function (separator = ",") {
  let result = "";

  for (let i = 0; i < this.length; i++) {
    if (i === this.length - 1) {
      result += this[i];
    } else {
      result += this[i] + separator;
    }
  }

  return result;
};

Output:

const arr = [1, 2, 3, 4, 5];

// Test Case 1:
const commaSeperatedString = arr.myJoin();
console.log(commaSeperatedString);
// output: 1,2,3,4,5

// Test Case 2:
const result = arr.myJoin("*");
console.log(result);
// output: 1*2*3*4*5

32 splice()

• The splice() method can:
  • remove elements from the array
  • replace elements in the array
  • add elements in the array
• It mutates the original array.
• It accepts the following arguments:
  • start - index from which to mutate the array
  • deleteCount - the number of elements to delete, 0 or negative if no elements to delete
  • item1, item2, … itemn - items to add to the array

Test cases:

1. start is given; deleteCount and items not given
   • deletes all items from the start index
2. negative start is given; deleteCount and items not given
   • start is counted backward from the end of the array and all items starting from it are deleted
3. start is given and deleteCount is given; deleteCount is greater than 0; items not given
   • it deletes deleteCount number of elements starting from the start index in the array
4. start, deleteCount, items are given; deleteCount is 0
   • the items are added to the array from the start index
5. start, deleteCount, items are given; deleteCount is greater than 0
   • it deletes deleteCount number of elements starting from the start index in the array
   • it then adds the items in the array from the start index

Custom implementation:

Array.prototype.mySplice = function () {
  let returnResult = [];
  let start, deleteCount;
  let items = [];

  if (arguments.length === 0) {
    return returnResult;
  }

  // start
  start = arguments[0];
  if (start >= this.length) {
    return returnResult;
  }
  if (start < 0) {
    start = this.length + start;
  }

  // deleteCount
  if (arguments.length === 1) {
    deleteCount = this.length - start;
  }
  if (arguments.length >= 2) {
    deleteCount = arguments[1];

    if (deleteCount > this.length - start) {
      deleteCount = this.length - start;
    }
  }

  // items
  if (arguments.length > 2) {
    for (let i = 2; i < arguments.length; i++) {
      items.push(arguments[i]);
    }
  }

  // delete elements if delete count > 0
  if (deleteCount > 0) {
    for (let i = 0; i < deleteCount; i++) {
      returnResult.push(this[start + i]);
    }

    for (let i = start, j = 0; i <= this.length - deleteCount; i++, j++) {
      this[start + j] = this[start + j + deleteCount];
    }

    this.length = this.length - deleteCount;
  }

  // add elements if items are provided
  if (items.length > 0) {
    for (let i = this.length - 1; i >= start; i--) {
      this[i + items.length] = this[i];
    }

    for (let i = 0; i < items.length; i++) {
      this[start + i] = items[i];
    }
  }
  return returnResult;
};

Output:

// Test case 1:
const arr1 = ["a", "b", "c", "d", "e"];
const result1 = arr1.mySplice(2); 
console.log(arr1); // ['a', 'b']
console.log(result1); // ['c', 'd', 'e']

// Test case 2:
const arr2 = ["a", "b", "c", "d", "e"];
const result2 = arr2.mySplice(-2);
console.log(arr2); // ['a', 'b', 'c'] 
console.log(result2); //  ['d', 'e']

// Test case 3:
const arr3 = ["a", "b", "c", "d", "e"];
const result3 = arr3.mySplice(2, 1);
console.log(arr3); // ['a', 'b', 'd', 'e']
console.log(result3); // ['c']

// Test case 4:
const arr4 = ["a", "b", "c", "d", "e"];
const result4 = arr4.mySplice(2, 0, "A", "B");
console.log(arr4); 
// ['a', 'b', 'A', 'B', 'c', 'd', 'e']
console.log(result4); // []

// Test case 5:
const arr5 = ["a", "b", "c", "d", "e"];
const result5 = arr5.mySplice(2, 1, "A");
console.log(arr5);
// ['a', 'b', 'A', 'd', 'e']
console.log(result5); 
// ['c']

Contributing 👩‍💻

You can find the code in the following repository 👇

There might be some improvements that can be made or some test cases that I’ve missed addressing. You can create an issue in this repository if you find any improvement that can be made. Thanks!

That’s all folks 👋

These were the custom implementations of array methods I worked on. Let's connect:

• Twitter
• Linkedin
• GitHub

You must have seen link previews when you are tweeting a link or sending a message with a link on Discord, Slack, WhatsApp, etc. like this 👇

Do you want to integrate such link previews in your chat app, social media app, etc. Or Do you just want to test how your link preview will look like when you share it on social media?

Introducing get link preview 🔗:

Get link preview is an app that will generate these rich previews for any given link. You can view the rich previews of any given link in our app. We provide API and an NPM package, If you want to add the feature of link preview in your app.

Features ✨:

1. Generate link previews using or app 💻
2. Use our API to fetch link preview data and integrate it into your app 🌐
3. Use our NPM package which provides a custom hook to fetch link preview data and integrate it into your React app.

1. Generate link previews on our app 💻

You can view the rich preview of any link using our app!

2. Get link preview API 🌐

Our app also provides an API endpoint, which you can integrate in your app to fetch link previews.

API endpoint:

https://get-link-preview.herokuapp.com/?url=https://github.com/siddhigate

Request type: GET

Response:

{ 
  "success":true,
  "title":"siddhigate - Overview",
  "description":"Full stack developer. siddhigate has 49 repositories available. Follow their code on GitHub.",
  "image":"https://avatars.githubusercontent.com/u/80971056?v=4?s=400",
  "sitename":"GitHub",
  "ogUrl":"https://github.com/siddhigate",
  "type":"profile",
  "domain":"github.com",
  "favicon":"https://github.githubassets.com/favicons/favicon.svg"}
}

3. Get link preview NPM package 🚀

get-link-preview NPM package provides a custom hook to fetch link previews and use the data in your app.

Step 1: Install the package

npm i get-link-preview

Step 2: Use the custom hook

const { getLinkPreviewData, loading, error, data } = useLinkPreview("https://npmjs.com");

• You can pass the URL in the custom hook as a param

    const { data } = useLinkPreview("https://npmjs.com");
  

• When the hook is fetching the link preview data, the loading will be true, it will be false once it is done loading

• If an error occurs, the error variable will include the error

• The data will contain the link preview data, an example format for the same is:

    { 
      "success":true,
      "title":"siddhigate - Overview",
      "description":"Full stack developer. siddhigate has 49 repositories available. Follow their code on GitHub.",
      "image":"https://avatars.githubusercontent.com/u/80971056?v=4?s=400",
      "sitename":"GitHub",
      "ogUrl":"https://github.com/siddhigate",
      "type":"profile",
      "domain":"github.com",
      "favicon":"https://github.githubassets.com/favicons/favicon.svg"}
    }
  

• The hook also provides a getLinkPreview function which accepts a URL as a parameter. You can use it to fetch the link preview data for any URL.

Tools and Technologies used ⚒:

1. React for building frontend
2. Node.js and Express.js for building the backend
3. Heroku to deploy the backend
4. Vercel to deploy the frontend

How I built it 👩‍💻:

The data present in the head tags, more specifically the meta tags of the website is used in the link preview. To fetch this data, we will first need to fetch the website and extract the appropriate tags. I’ve extracted the following data using cheerio:

I built an API which will respond with this data for the link provided as query in the request. I built the backend using Node.js and Express.js, and built the frontend using React. After integrating the API in frontend, I built the custom hook and published it as a NPM package.

Challenges I faced🔨:

• Relative path image URLs: In some websites, the favicon and og:image URLs were given in relative path. To get the absolute path, I converted the relative path to the absolute path.
• Missing og:title: In case, the website didn't include the meta og:title tag, I extracted the <title> tag from the given URL.
• Invalid URL: To handle invalid URLs, I used the URL constructor to check if the given URL is valid or not.
• Publishing NPM package: As this was my first time publishing an NPM package, I failed many times. But by referring to different resources, I was finally able to publish the package.

Useful links 🔗:

• Live link
• NPM package
• GitHub source

That’s all folks 👋

If you have any ideas or features you wish to add to this project, feel free to contribute to the project. I hope you’ll find this app useful! Let’s connect:

• Twitter
• GitHub
• LinkedIn

Developers spend almost half of the day on the desk working. As all of our work is done while sitting in one position in front of our computer screens, we invite all sorts of health issues like back pain and eye strain. On top of that, various developers listen to music with earphones while working for long hours. All these habits can cause a negative impact on our eyes, back, and ears.

We all care about our health and we have always tried to find solutions to these problems. The solutions are fairly simple too, like, having a good posture, taking small breaks for relaxing our eyes, not using earphones for a long time, and so on. Even though the solutions are easy, the main issue is to practice these exercises consistently. This is because, once we get into the coding zone, we are solely focused on the work and we tend to forget about them. So, to help developers to take care of their health while working, I have built Dev Care.

Introducing Dev Care 👩‍💻

One-stop solution to take care of your health as developers. Dev Care will help you to take care of your back, eyes, and ears while working. The solutions we are working with are as follows:

Back health:

For back health, the app has the feature of posture detection. It detects your posture at regular intervals and reminds you to sit straight if you are not.

Eyes health:

To relax your eyes there is a 20-20-20 rule which states that:

For every 20 minutes spent looking at a screen, a person should look at something 20 feet away for 20 seconds

This exercise relaxes our eyes and reduces eye strain. The app reminds you to follow this exercise at regular intervals.

Ear health:

For ear health, there is a 60-60 rule:

Only turn your device volume up to 60% and listen for no more than 60 minutes per day

The app checks if you are using earphones for longer than 60 minutes and reminds you to control your earphone usage if it is becoming unhealthy.

App walkthrough✨

Onboarding👋

When a user visits the app for the first time, initial information and instructions are displayed to the user to make them familiar with the app. This app doesn’t require a login or signup.

Posture detection initial setup🧍‍♂️

The app first needs to understand what a good posture is and what a bad posture is. For that, you’ll need to click at least 10 pictures for both cases. The app will learn from those images what a correct and incorrect posture is. After which, at regular intervals, the app will be able to check your posture and further inform you if it is not correct.

Dashboard 🏠

The dashboard displays the countdown timer. You can start and stop it whenever you want. You can opt to select only a few options to receive notifications for between back care, eye care, and ear care. Additionally, the app has a sweet cartoon creator whose mood will depend on how effectively you use this app.

Reminders 🔔

You’ll receive reminders for doing the exercise, if your posture is incorrect and if you are using your earphones more than the limit at regular intervals.

Analysis📊

Dev Care will perform an analysis of your habits and visualize them through different charts. For back care, a pie chart is used to visualize how many times you are found sitting in good and bad posture. For eye care, a line chart is used to depict how many times a day you follow the exercise. For ear care, a bar graph is used to depict the daily usage of earphones.

Technologies and Tools used🛠

• React JS for building the frontend of the app.
• TensorFlow JS for posture detection.
• Chart JS for visualization of data.
• Netlify for deploying the app.

Building Dev Care👩‍🏭

Planning 📝

I used Notion to plan the project and used my diary to write daily to-dos. While planning, I divided the entire work into 2 parts; UI design and implementation. Further, I divided the implementation part into different features and made a list of all the possible tasks that need to be done.

Designing 🎨

For designing the app I used excalidraw. It is a simple tool to design the wireframes of the app. My initial design of the app looked like this👇

Building 👩‍💻

My plan was ready. The only thing left was implementing it. I used React.js which is a JavaScript library to build this app. The main feature which I felt challenging was the back posture prediction; which required machine learning. I discovered "tensorflow.js" which is a library for machine learning in JavaScript. Using this library, we can implement machine learning models in the browser.

It took me a lot of time in understanding new things like using tensorflow.js, notifications, etc. But with the help of documentation and some resources, I was able to implement all the features.

Deploying 🚀

I used Netlify for deploying Dev Care. Netlify offers hosting services for web applications with CI-CD and makes the deployment process easier.

Challenges I faced ☠

The main challenge I faced while building this app was the bad posture detection feature. For classifying the posture into a good or a bad one, first, we need examples to train the machine learning model and I didn’t find any existing dataset for this. To solve this problem, I decided to ask the users to take their own pictures in both good and bad posture and then trained the model in the browser with those examples. It worked this way! Also, all the user data resides in their browser only, the app don’t store it anywhere else.

While building this app, there were a lot of things that I wasn’t familiar with. The topmost is using tensorflow.js for posture detection. It was quite difficult for me to understand the process at the start. But by going through the docs thoroughly I was able to understand & then implement it for classifying between a good posture and a bad posture. The second one was implementing the notification feature which works on both desktop browsers and mobile browsers. But again, after going through the docs and a few articles I was able to build the feature. Mostly, all of my challenges were solved by going through the docs thoroughly.😉

What’s next ✨

I’m looking forward to adding more features in Dev Care:

• Customized reminder time intervals
• PWA

Useful links 🔗

• App link
• GitHub Repo

That’s all folks 👋

This is all about Dev Care. I hope that Dev Care will help you to take care of your health. Let’s connect:

• Twitter
• GitHub
• LinkedIn

I have a simple notion:

Plan the work, then work the plan!

Following is how I executed this notion and tried to manage college, work, and other activities.

Content

Plan the work

1. Wake up with a clear plan 🌞
2. Assign time slots to the tasks ⌛
3. Prioritize the tasks 📝
4. Make achievable tasks ✔

Work the plan

1. Pomodoro and focused sessions ⏰
2. Take enough rest and breaks😴
3. Don't work in between lectures (during break) 👩‍💻❌
4. Believe in yourself 😎
5. Spend a lot of time with friends and family 👨‍👩‍👧‍👦

Plan the work 🗓

1. Wake up with a clear plan 🌞

Earlier, when I woke up I had no clear idea of what I should do for the day. My mind was a mess and it kind of caused a negative start to the day. Having a clear plan in mind while waking up, made me feel sorted and in control of my day. For that, before going to sleep I planned the day.

2. Assign time slots to the tasks ⌛

For planning the day, earlier, I did whatever task at whatever time of the day depending on my mood. My day didn't have any structure. This made my day messy and I didn't feel like I was in control. Later, I discovered time-boxing. Then, I assigned time slots to different tasks. For the first few days, I tried different combinations to find out which best suited me, and then, I stuck to the one!

3. Prioritize the tasks 📝

Even though, I started time-boxing. It was not possible to give an equal amount of time to all of these things. Somedays, academic stuff was urgent and important and somedays, work stuff. Then, I decided to prioritize the tasks and then decide how much time to give to each of them. Due to this, I was able to complete every assignment or work on time.

4. Make achievable tasks ✔

Forming the tasks was itself a tough task too! For a long time, I tried to do everything at once and I expected a lot from myself. It took me a long time to realize that some tasks take time to do and it's fine! What's not fine is to burden yourself and create unnecessary pressure. Before doing the unachievable tasks, I felt the pressure that how will I do those tasks, and eventually, I was unable to complete those tasks which made me feel miserable. Things can be done in a positive mindset and without pressure. For that, forming achievable goals for the day was the most important task. By practicing this, I was able to achieve a lot than in my previous state as I spent more time doing than worrying.

Work the plan 👩‍💻

1. Pomodoro and focused sessions ⏰

But, assigning the time slots, is not it! I wanted to achieve the maximum from that time. For that, I used the traditional Pomodoro method, kept the phone away from me, and just gave 100% on the task at hand without any distraction and with maximum focus. This made me complete all the tasks with the best results. Got very good feedback from professors and seniors as well!

2. Take enough rest and breaks😴

While doing all of these things, it's important to be energetic. Many-a-times, I felt tired and didn't feel like doing anything. Taking enough breaks and rest in between was the solution for this. Sometimes, I felt guilty for taking breaks. I used to think that I am not utilizing my time efficiently and instead of taking breaks I could have studied or worked. But, this mindset took a toll on my health and my performance. I then started to take enough breaks in between and did entirely different things than my current work during the break or just did nothing. Out of all my break activities, talking with my mom or friends made me feel the most relaxed and happy😇

3. Don't work in between lectures 👩‍💻❌

I had this bad habit of working in between lectures. I thought that I was being productive and utilizing my time efficiently. But this was not the case. It was quite the opposite. I was not able to focus and achieve maximum output while working in those breaks. Also, attending the next lectures with full attention got difficult. Break time should be utilized for breaks and taking rest. I learned it the hard way. I then, utilized my breaks just to take a rest and refresh my mind to attend the next lecture with full enthusiasm.

4. Believe in yourself 😎

Believe in yourself that you can achieve the tasks and you are halfway there. Self-doubt, overthinking just costs us time. Even after doing all the above things, sometimes I lacked confidence and I didn't believe that I can complete any of those tasks. But soon I realized that this was just costing me time and affecting my mindset. The only solution to this is to believe in yourself and give your best. Spend time doing the things than worrying about them.

5. Spend a lot of time with friends and family 👨‍👩‍👧‍👦

The most important of all the things is this! Spending an ample amount of time with friends and family. Talking to them made me feel happy and relaxed.

That's all folks 👋

This is what I did to manage my college and work effectively. Thank you for reading this article!

🌍 Let's connect

• Twitter @SiddhiGate
• LinkedIn @siddhigate

In this blog, I'll explain how I used graphs to implement a social network and how I used the Dijkstra algorithm to provide people you may know user recommendations.

There are 2 main parts:

1. Building a social network
2. Providing people you may know user recommendations

What is a social network?

A social network is a structure consisting of users and connections between them.

We can say that a social network is a graph where,

• Nodes are users
• Edges are connections/relations
• Weight is the closeness between the users

How to determine the closeness between the users?

The weight of the edge between two nodes will decide the closeness between the users. Lower the weight, the closer the two users are. But how to determine the closeness between two users.

To calculate the closeness between two users, I designed a simple algorithm, where

1. When the user makes a connection the weight between them is set to some MAX value.
2. After that, whenever a user likes the other user's post they become close by 2 weights,
3. When user1 comments on user2's post they become close by 4 weights.

This closeness parameter will help us to provide better recommendations.

The less the weight between two users, the more close they are.

So by using graph and this closeness algorithm, the social network can be implemented. Now, the next part is providing user recommendations.

What is the Dijkstra algorithm?

Dijkstra's algorithm is an algorithm for finding the shortest paths between nodes in a graph

We will not get into the details of the implementation of the algorithm, but rather focus on what it does and how it can be used in this application.

Let's take an example, we have the following graph

We want to find the shortest path between A and E,

• There are two paths between A and E, which are A-B-C-E and A-D-E
• The weight of the path A-B-C-E is 3 + 2 + 2 = 7
• The weight of the path A-D-E is 2 + 2 = 4
• Dijkstra algorithm will return the shortest path.
• So, in this example, it will return A-D-E.

But, the main question is how will we use this algorithm to provide user recommendations?

How to use Dijkstra to provide user recommendations?

The steps are simple. If we want to find user recommendations for a particular user,

1. We will need to find the shortest path from that user to all the other users in the network.
2. Sort them according to weight.
3. Now we will have the people you many know in ascending order of how likely that user might know them.

Let's understand this with an example,

Finding People you may know for User A,

1. Dijkstra algorithm will find the shortest path to all other users

   B - 3, C - 5, D - 12, E - 15

2. We will drop the connections of the user A, so now we have,

   C - 5, E - 15

3. We will sort the list by weight

   C - 5, E - 15

4. Now, we get our result. Here, User A is more likely to know user C as it is the first element in the sorted list.

We are likely to know users who are friends with our closest friends. Such users can be found by using the procedure mentioned above.

What does the result mean?

These steps will return the users with the least path. The connection weight between the users will be less. The less the connection weight between them, the more likely they know each other. Thus, the recommendations will be useful.

This is how I used graphs and the Dijkstra algorithm to implement a social network and to provide people you may know user recommendations.

Background

As a software developer, I am in front of my screen 24/7. With everything being remote, my screen time just went up. This increase in screen time only caused my eye strain to increase. It was then I realized how harsh it was for my eyes and how much the health of my eyes mattered. Sooner, I came across 20-20-20 rule.

The rule says that for every 20 minutes spent looking at a screen, a person should look at something 20 feet away for 20 seconds. Following the rule is a great way to remember to take frequent breaks. This should reduce eye strain caused by looking at digital screens for too long.

Though this rule sounds easy to follow, it is much harder to maintain discipline. That's when I thought of making an app that will remind me to follow this rule and thus, help to take care of my eyes.

How does it work

• Eye Care will remind you every 20 minutes to look 20 ft away for 20 seconds.
• The main challenge is to stay disciplined, for that:
  • This app will plant a flower
  • Every time eye care reminds you, you should follow the rule
  • The more you stay disciplined, your flower will bloom happily.

Features

Reminder to follow the 20:20:20 rule

Score based on your discipline

• Every time you follow this rule your score will increase.
• As your score increases, your flower will bloom

Technologies

Frontend built with

• JavaScript
• HTML
• CSS

Backend built with

• Node.jS
• Express.jS
• HarperDB

Building Eye Care

I'm new to web development. That's why, even though, the functionalities seem easy, it was quite challenging for me to implement.

To simplify the development of this app, I formed smaller tasks which were:

Section 1: Frontend

1. Timer
2. Modal dialog
3. Sign in, sign up pages
4. Api calls through JavaScript
5. Authentication

Section 2: Backend

1. Getting familiar with HarperDB
2. REST API for CRUD operations
3. Authentication
4. Authenticated private routes

After performing the tasks, I later integrated them into one, which turned out to be this Eye Care app.

What's next

I am looking forward to add more features this app.

• Garden of flowers - A feature where user will be able to plant a garden of flowers with a variety of different flowers.

• Back care - As almost everything is now being remote, we are constantly sitting in front of our screens. Maintaining a good posture while sitting is important. A feature to detect bad posture will help to notify the user to sit straight. This feature is next on the list.

• and more

Links

• Frontend repo
• Backend repo
• Eye care app

This is my submission for the #harperdbhackathon. I hope this app helps you.