Forem: Hardique Dasore

Here's a Sneak Peek of What We've Built at Nexus Beings

Hardique Dasore — Wed, 11 Feb 2026 03:14:52 +0000

After months of building, iterating, and stress-testing ideas late into the night, I'm excited to finally share a sneak peek of what we've been working on at Nexus Beings: a new way for brick-and-mortar businesses and SMEs to create and deploy digital agents effortlessly.

This demo showcases how simple it is to design, configure, and launch a fully functional Al-powered multilingual digital agent without writing a single line of code.

From idea to live agent in minutes.

Why this matters for brick-and-mortar stores and SMES?

No complex setup
No technical barriers
No need for large teams or long deployment cycles

Just powerful digital agents that can capture leads, collect information, answer questions, and engage customers consistently and at scale.

This is only the beginning. We're building Nexus Beings to help businesses extend their presence beyond physical locations and operating hours, while keeping experiences personal, conversational, and human.

More updates coming soon and we can't wait to share what's next.

If you're curious about where Al agents are headed for real-world businesses, join the waitlist → nexusbeings.ai

Demo

Developing real-time, humanlike AI video agents that enable natural customer interactions

Hardique Dasore — Sun, 30 Nov 2025 01:58:51 +0000

“You should live your life like a lion which means that most of your time you’re resting, lazing around, doing whatever you find entertaining, and then once in a while, you get obsessed with something and you just pour everything into it.” - Naval Ravikant

Last year, I completed my Masters in Australia. Two paths lay ahead: accept a comfortable job with visa security, or build something that could create real impact.

This philosophy captured my journey with Nexus Beings. For a long time, the concept lived quietly in notes and sketches while I navigated life as an international student. Then came the obsession: building digital agents that don't just respond, but understand; systems that bring context, emotion, and intent to the world of service.

I chose to build.

Today, Nexus Beings has achieved proof of concept.

Bootstrapping as an immigrant meant every decision carried extra weight. Without external funding or a safety net, every line of code, every experiment, and every pivot had to matter. These constraints became my greatest teacher, fostering innovation through limitation and patience through uncertainty.

This milestone represents more than technical validation. It proves that conviction outlasts complexity and that clarity of purpose sustains when traditional resources cannot.

While Nexus Beings continues to evolve, our foundation stands strong: intelligent real-time conversational video agents that deliver warmth, reliability, and empathy to service environments. What began as an experiment is steadily advancing toward redefining digital presence in customer experience.

The comfortable job would have been easier. But building technology that transforms how businesses connect with customers? That obsession was worth every risk.

The journey continues, grounded in purpose and guided by the belief in what's next.

How to increase the transparency of the background image without affecting the content?

Hardique Dasore — Wed, 27 Dec 2023 17:07:13 +0000

While creating landing pages, we often encounter the issue that the background image of the banner is too dark and any content added to the banner is not visible clearly.

Consider the following code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url('img_girl.jpg');
  padding: 100px 20px;
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background image <br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>

We cannot see the text clearly as the image's contrast is high. We try to reduce the opacity of the background image by adding opacity: 0.5 to the style.

But this reduces the opacity of the text/content as well.

We can solve the issue using 2 different approaches:

Approach 1: Using Wrapper Container

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
    background-image: url("img_girl.jpg");
  background-repeat: no-repeat;
}
p{
width: 100%;
heigth: 100%;
padding: 100px 20px;
 background-color: rgba(255, 255, 255, 0.5);  
}
</style>
</head>
<body>

<h2>Background Image</h2>
<div class="wrapper">
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</div>
</body>
</html>

Approach 2: Using Linear Gradient

<!DOCTYPE html>
<html>
<head>
<style>
p {
  padding: 100px 20px;
    background-image: url("img_girl.jpg"), linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
    background-blend-mode: overlay;
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>

Generate code snippet for REST API call from Postman

Hardique Dasore — Sat, 09 Sep 2023 17:01:11 +0000

Testing REST APIs in Postman is a norm for all software developers. Once the REST API is tested in Postman, it is time to integrate the same with the frontend interface to fetch or post data.
During the integration phase, if you face a blocker while developing the code for an API call, then Postman is here to help.
Just follow the below-mentioned steps:

Add the REST API call in POST man and initialize the body and headers based on the method (GET or POST)
Once you receive the success response, click the code icon in the top right corner. In the dialog box, select the relevant coding language from the dropdown.
Postman will generate a code snippet that you can now copy and paste in your project.

BEWARE: The snippet may require some modification based on your project.

Happy Coding!

How to a add link to JSON?

Hardique Dasore — Thu, 08 Jun 2023 14:08:55 +0000

In another edition to the JSON series, we can also add clickable links are part of the paragraph in the JSON. We can encapsulate the link in the anchor tag <a href='#'></a>. We can add the redirection link in the href so that the user can redirect to the link on click. This hack helps us in avoiding the creation of a separate variable just for the links.

<!DOCTYPE html>
<html>
<body>
<h2>JSON with clickable link</h2>
<span id="heading"></span><br/>
<span id="paragraph"></span>
<script>
const faq= {
 heading: "<b>Heading 1</b>", 
 paragraph: "This is a link to <a href='https://www.google.com'>Google</a>" 
 } 
document.getElementById("heading").innerHTML = faq.heading;
document.getElementById("paragraph").innerHTML = faq.paragraph;
</script>
</body>
</html>

Note: Make sure you use single inverted commas for the link otherwise the JSON will become invalid if we use double inverted commas inside double inverted commas.

The DOM identifies the HTML element in the JSON and converts the text encapsulated to the link. This will help you code your FAQs page better.

Happy Coding!

How to embed Google Map without API Key?

Hardique Dasore — Sun, 21 May 2023 01:47:33 +0000

Make your website more interactive by embedding Google Map for the location of your business. To embed Google maps to your webpage, one doesn't need an API key.

To embed a Google Map in your webpage, you can follow these steps:

1) Go to Google and search the location you want to embed in your web page

2) Maximize the location details in Google page

3) Click on the share icon in the location details card

4) Select the "Embed a map" tab in the dialog box

5) Copy HTML for the code (iframe) to be added to your webpage

Happy Coding!

Steps to adopt micro frontends architecture for your frontend application in Angular

Hardique Dasore — Fri, 10 Mar 2023 16:07:01 +0000

If you have an Angular project with a mono repo that is shared among various teams, you should consider changing the monolithic architecture of your application to micro-frontends using module federation.

1 Create an nx-worspace using:

npx create-nx-workspace@latest <project name>

• Select angular and scss

2 Change the directory to the project folder using:

cd <project name>

3 Open Visual Studio code using:

code .

4 Create separate containers using:

nx generate @nrwl/angular:app <container name>

5 Compile and run all containers using:

nx run <container name>:serve:development - port <port>

Note: You can also use ng instead of nx

6 Use the following command to create new components:

nx generate @nrwl/angular:component <component name> - project <project name>

7 Set up module federation in all containers:

npm i @angular-architects/module-federation

8 Run the following command to add webconfig file to all the containers:

ng g @angular-architects/module-federation:init

• Select container and assign port

9 Expose the component you want to use in other containers in webpack.config.js:

exposes: {
    './Module': './apps/<container-name>/src/app/remote-entry/remote-entry.module.ts',
     },

10 Use the exposed module in the routing of app.module.ts of the shell container:

RouterModule.forRoot(
     [
       {
           path: '<container-name>',
           loadChildren: () =>
           loadRemoteModule({
           remoteEntry: 'http://localhost:<port>/remoteEntry.js',
           type: 'module',
           exposedModule: './Module',
           }).then((m) => m.RemoteEntryModule),
        }
       ],
       { initialNavigation: 'enabledBlocking' }
      )
    ],

11 In order to create a shared service in a shared folder, use:

ng g @nrwl/angular:lib shared/test-service

12 Install ngx-mfe (version 3.0.2):

npm i ngx-mfe

13 Create index.ts file and import:

export * from './lib/shared-test-service.module';
export * from './lib/test-service.service';

14 Add the path to tsconfig.base.json:

"paths": {
          "@micro-frontends/shared/test-service": ["libs/shared/test-service/src/index.ts"]
         }

15 Add the shared service to the webpack.config.js file of the container you want to use the service in:

sharedMappings.register(sharedMappings.register(
         path.join(__dirname, '../../tsconfig.base.json'),
         path.join(__dirname,'../../tsconfig.base.json'),
         [/* mapped paths to share */]);
         ['@micro-frontends/shared/shared/test-service']);]);

16 In order to use the service, import it into the component:

import{{ TestService }} from '@micro-frontends/shared/test-service'

Note: Please change micro-frontends to the name of your project and test-service to the name of your service in the above commands.

Happy Coding!

How to use tailwindcss to add dark mode to your website?

Hardique Dasore — Wed, 18 Jan 2023 20:46:47 +0000

Dark mode has become a popular feature in recent years, as it allows users to reduce eye strain and conserve battery life on their devices. In this blog post, we will show you how to toggle between dark and light mode on your website using Next.js and Tailwind CSS.

First, let's set up a basic Next.js project. Create a new directory and run the following command to initialize a Next.js project:

npx create-next-app

Next, we need to install Tailwind CSS. Run the following command in your project directory:

npm install tailwindcss
npx tailwindcss init

In your tailwind.config.js file, you will need to add the following line to enable the darkModeclass:

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
  dark: 'class',
};

Now in App.js add the following piece of code:

import React, { useEffect, useState } from "react";

// Function to toggle modes between dark and light 
// This can be moved into a separate js file in order to share it between pages
function useDarkMode() {
  const [theme, setTheme] = useState(
    typeof window !== "undefined" ? localStorage.theme : "dark"
  );
  const colorTheme = theme === "dark" ? "light" : "dark";

  useEffect(() => {
    const root = window.document.documentElement;

    root.classList.remove(colorTheme);
    root.classList.add(theme);

    if (typeof window !== "undefined") {
      localStorage.setItem("theme", theme);
    }
  }, [theme]);

  return [colorTheme, setTheme];
}

function App() {
  const [colorTheme, setTheme] = useDarkMode();

  return (
    <div className="dark:bg-zinc-900 bg-white h-screen dark:text-black text-white place-items-center grid">
      <button className={`bg-gray-500 ${colorTheme !=='dark'?'hover:bg-yellow-400':' hover:bg-blue-400'} text-white p-2 rounded-full`} onClick={() => setTheme(colorTheme !== "dark"? "light": "dark")}>
//HeroIcons is used for svg vectors
        {colorTheme === 'dark' ? <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
        </svg> : <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
        </svg>}

      </button>
    </div>

  );
}

export default App;

We can also create a separate component for the toggle button but for demo purposes, we have added the piece of code to App.js file.

This code uses the useState and useEffect hooks to keep track of the dark/light mode state and sets the background color of the page based on the state. The button toggles the mode state when clicked.

That's it! With just a few lines of code, you can add a dark mode toggle to your Next.js website using Tailwind CSS. Users will appreciate the ability to switch between dark and light modes to reduce eye strain and save battery life on their devices.

Code Snippet: GitHub: Tailwindcss Dark Mode

Happy Coding!

Avoid "delete" keyword in JavaScript to remove property

Hardique Dasore — Wed, 11 Jan 2023 17:53:09 +0000

The delete keyword is used to remove a property from an object in JavaScript. When a property is deleted, it cannot be accessed. The syntax for using the delete keyword to remove a property is as follows:

delete objectName.propertyName;

For example:

const myObject = { a: 1, b: 2 };

// Removing the 'a' property from the object
delete myObject.a;
console.log(myObject);  // Output: { b: 2 }

Using delete on variable will remove variable from memory as well, so be careful and make sure that variable is not being referenced anywhere else before deletion.

Deleting property in JavaScript using destructuring

Using destructuring, you can easily create a new object without the property you want to remove. Destructuring allows you to extract properties from an object and assign them to variables. When you destructure an object, you can specify which properties you want to extract and which properties you want to ignore.

Here's an example of how you can use destructuring to create a new object without a specific property:

const myObject = { a: 1, b: 2, c: 3 };

// Using destructuring to create a new object without the 'b' property
const { b, ...updatedObject } = myObject;

In this example, the properties of myObject that are not b is assigned to updatedObject variable. This b variable will contain the value of b property from myObject. This will not mutate the original object myObject.

You can also use destructuring in a function argument

function myFunction({ a, c }) {
    // The 'b' property is not destructured and is therefore not accessible within this function
    console.log(a,c)
}

myFunction(myObject);

In this way you can filter out the specific properties that you don't want and also you can use destructuring in function argument to only extract the specific properties you want.

Happy Coding!

Will AI replace development jobs?

Hardique Dasore — Tue, 10 Jan 2023 02:21:45 +0000

It is a common question whether artificial intelligence (AI) will eventually replace development jobs, and it's a topic that has been debated by experts for many years. While it is certainly true that AI and automation technologies have the potential to revolutionize the way we work, it is unlikely that they will completely replace development jobs in the near future.

One of the main reasons that AI is unlikely to replace development jobs is because software development is a highly creative and intellectual task that requires a deep understanding of complex concepts and abstract thinking. While AI algorithms can certainly be trained to perform certain tasks, they are not yet capable of the kind of creative problem-solving and decision-making that is required to design and build software applications.

Additionally, there are many aspects of software development that are difficult to automate, such as debugging, testing, and maintaining code. These tasks often require a human touch and involve a lot of trial and error, which is difficult for AI algorithms to replicate.

It is also worth noting that software development is a constantly evolving field, with new programming languages, frameworks, and technologies being developed all the time. Keeping up with these changes requires a level of flexibility and adaptability that is difficult for AI algorithms to achieve.

Overall, it is unlikely that AI will completely replace development jobs anytime soon. While it may automate certain tasks and change the way we work, it is unlikely to

Fun fact: This blog was generated using ChatGPT.

Happy Coding!

Different types of cases in variable naming convention

Hardique Dasore — Tue, 10 Jan 2023 01:49:58 +0000

There are several different conventions for naming variables in code, and the choice of which one to use often depends on the programming language and the style guide being followed. Here are some common variable naming conventions:

Pascal case: Words in the variable name are concatenated, with the first letter of every word being capitalized. For example, MyVariableName.
Snake case: Words in the variable name are concatenated and separated by underscores. For example, my_variable_name.
Camel case or Dromedary case: Words in the variable name are concatenated, with the first letter of each word except the first being capitalized. For example, myVariableName.
Kebab case: Words in the variable name are concatenated and separated by hyphens. For example, my-variable-name.
Screaming snake case: Similar to snake case, but all letters are capitalized. For example, MY_VARIABLE_NAME.
Train case or Screaming kebab case: Similar to kebab case, but all letters are capitalized. For example, MY-VARIABLE-NAME.
Flat case: Words in the variable name are concatenated, with no capitalization or punctuation. For example, myvariablename.
Upper case: All letters in the variable name are capitalized. This is sometimes used for constants that should not be modified. For example, MYVARIABLENAME.

It's important to follow a consistent naming convention in your code to make it easier to read and understand. Some programming languages have specific conventions that are followed by most developers, so it's a good idea to familiarize yourself with these conventions if you're working with a new language.

Happy Coding!

How to make substring bold in JSON?

Hardique Dasore — Fri, 06 Jan 2023 23:51:59 +0000

We often encounter this problem where we want the substring of the description or paragraph to have a font-weight greater than the rest of the paragraph. To achieve the same, we settle for a messy inefficient code where we manually encapsulate the substring in a <strong></strong> tag.
I recently encountered a similar problem, while creating a FAQs page for a client. In one of the answers coming from JSON, the ask was to highlight certain substrings by increasing the font weight (making the string bold). For example, This is the answer to question 1.
I was not happy with the solution of creating a separate object for bold strings for each of the answers. After a few hours on the internet and multiple permutation and combinations, I finally found how to make the substring bold in the JSON itself.
We can directly encapsulate the substring we want to make bold in JSON with the <b></b> tag.

<!DOCTYPE html>
<html>
<body>
<h2>JSON with bold substring</h2>
<span id="question"></span><br/>
<span id="answer"></span>
<script>
const faq= {
 question: "Question 1", 
 answer: "This is <b>answer</b> to question 1" 
 } 
document.getElementById("question").innerHTML = faq.question;
document.getElementById("answer").innerHTML = faq.answer;
</script>
</body>
</html>

The DOM identifies the HTML element in the JSON and increases the font weight of the substring from 300 to 600.
This hack helped me in decreasing the lines of code significantly.

Happy Coding!