In today's digital landscape, effective data visualization is crucial for understanding and communicating complex information like it's for business intelligence, scientific research, or storytelling, data visualization tools play a crucial role in helping us make sense of complex datasets.

Among the Excess Surplus of tools available, D3.js (Data-Driven Documents) and Nivo stand out as powerful libraries for crafting visually stunning and interactive graphics.

This blog explores the features, pros and cons, and practical examples of both D3.js and Nivo to help you choose the right tool for your data visualization needs.

Section 1: Understanding D3.js

D3.js, short for Data-Driven Documents, is a powerful JavaScript library for creating dynamic, interactive data visualizations in web browsers. D3.js enables developers to create custom visualizations tailored to specific needs and apply data-driven transformations to generate visual representations of the data. It provides a comprehensive toolkit for manipulating documents based on data, making it ideal for building custom and highly expressive visualizations.

Here are some of the things you can do with D3:

• Create bar charts, line charts, pie charts, and other common chart types.

• Create more complex visualizations, such as maps, heatmaps, and treemaps.

• Add interactivity to your visualizations, such as panning, zooming, and brushing.

Drawbacks:

• we need to write the code everything from scartch to create charts

• there is no pre-built, high-level components, requiring custom solutions for common visualization tasks.

• we need to handle many details manually, which is diffcult to manage code and longer development times.

• Lack of Official Support that leading to slower bug fixes and less predictability to counter the bug

Installing D3.js in a React Application:

To install D3.js in a React application using npm, you can run the following command in your project directory:

npm install d3

Once D3.js is installed, you can import it into your React component like this:

import * as d3 from 'd3';

// Sample dataset
const data = [10, 20, 30, 40, 50];

// Create SVG container
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 200);

// Create bars
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 50)
  .attr('y', (d) => 200 - d)
  .attr('width', 40)
  .attr('height', (d) => d)
  .attr('fill', 'steelblue');

Section 2: Introducing Nivo

Nivo is a powerful React data visualization library that built on top of D3.js, Nivo abstracts away much of the complexity of D3 to offer a rich set of customizable and responsive components for creating stunning visualizations. Built with React developers in mind, Nivo provides a declarative API and a wide range of ready-to-use chart types, making it easy to create complex visualizations with minimal code.

Features of Nivo:

Declarative API:

Nivo's declarative API allows developers to define visualizations using simple React components, abstracting away much of the complexity of D3.js while maintaining flexibility and customization options.

Rich Set of Components:

Nivo offers a diverse collection of components for various chart types, including line charts, bar charts, pie charts, scatter plots, and more, catering to a wide range of data visualization needs.

Responsive Design:

All Nivo components are designed to be responsive out of the box, ensuring that visualizations adapt gracefully to different screen sizes and devices, providing an optimal viewing experience across desktop and mobile platforms.

Customization:

Nivo provides extensive customization options, allowing developers to fine-tune every aspect of the visualizations, including colors, labels, legends, tooltips, and animations, to match the design and branding requirements of their applications.

Installing Nivo in a React Application:

to install Nivo in a React application using npm, you can run the following command:

npm install @nivo/pie @nivo/bar

Importing Nivo Components in a React Component:

Once Nivo is installed, you can import the desired Nivo components into your React component. For example, if you want to use the bar chart component, you can import it like this:

import { ResponsiveBar } from '@nivo/bar';

1. Importing Nivo Components in a React Component:

Once Nivo is installed, you can import the desired Nivo components into your React component. For example, if you want to use the bar chart component, you can import it like this:

import { ResponsiveBar } from '@nivo/bar';

import React from "react";
import { ResponsiveBar } from "@nivo/bar";

const data = [
  {
    country: "AD",
    "hot dog": 103,
    "hot dogColor": "hsl(299, 70%, 50%)",
    burger: 153,
    burgerColor: "hsl(31, 70%, 50%)",
    sandwich: 98,
    sandwichColor: "hsl(228, 70%, 50%)",
    kebab: 198,
    kebabColor: "hsl(124, 70%, 50%)",
    fries: 13,
    friesColor: "hsl(17, 70%, 50%)",
    donut: 123,
    donutColor: "hsl(18, 70%, 50%)",
  },
  {
    country: "AE",
    "hot dog": 126,
    "hot dogColor": "hsl(313, 70%, 50%)",
    burger: 167,
    burgerColor: "hsl(354, 70%, 50%)",
    sandwich: 109,
    sandwichColor: "hsl(179, 70%, 50%)",
    kebab: 190,
    kebabColor: "hsl(51, 70%, 50%)",
    fries: 77,
    friesColor: "hsl(313, 70%, 50%)",
    donut: 19,
    donutColor: "hsl(73, 70%, 50%)",
  },
  {
    country: "AF",
    "hot dog": 67,
    "hot dogColor": "hsl(16, 70%, 50%)",
    burger: 25,
    burgerColor: "hsl(265, 70%, 50%)",
    sandwich: 78,
    sandwichColor: "hsl(335, 70%, 50%)",
    kebab: 128,
    kebabColor: "hsl(269, 70%, 50%)",
    fries: 82,
    friesColor: "hsl(20, 70%, 50%)",
    donut: 93,
    donutColor: "hsl(279, 70%, 50%)",
  },
  {
    country: "AG",
    "hot dog": 63,
    "hot dogColor": "hsl(215, 70%, 50%)",
    burger: 197,
    burgerColor: "hsl(191, 70%, 50%)",
    sandwich: 159,
    sandwichColor: "hsl(241, 70%, 50%)",
    kebab: 44,
    kebabColor: "hsl(2, 70%, 50%)",
    fries: 144,
    friesColor: "hsl(147, 70%, 50%)",
    donut: 15,
    donutColor: "hsl(108, 70%, 50%)",
  },
  {
    country: "AI",
    "hot dog": 28,
    "hot dogColor": "hsl(270, 70%, 50%)",
    burger: 37,
    burgerColor: "hsl(172, 70%, 50%)",
    sandwich: 18,
    sandwichColor: "hsl(3, 70%, 50%)",
    kebab: 199,
    kebabColor: "hsl(210, 70%, 50%)",
    fries: 75,
    friesColor: "hsl(294, 70%, 50%)",
    donut: 35,
    donutColor: "hsl(317, 70%, 50%)",
  },


];

const Nivobar = () => {
  return (
    <div style={{ width: "80vw", height: "54vh", margin: "auto" }}>
      <ResponsiveBar
        data={data}
        keys={["hot dog", "burger", "sandwich", "kebab", "fries", "donut"]}
        indexBy="country"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: "linear" }}
        indexScale={{ type: "band", round: true }}
        colors={{ scheme: "nivo" }}
        defs={[
          {
            id: "dots",
            type: "patternDots",
            background: "inherit",
            color: "#38bcb2",
            size: 4,
            padding: 1,
            stagger: true,
          },
          {
            id: "lines",
            type: "patternLines",
            background: "inherit",
            color: "#eed312",
            rotation: -45,
            lineWidth: 6,
            spacing: 10,
          },
        ]}

        borderColor={{
          from: "color",
          modifiers: [["darker", 1.6]],
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "country",
          legendPosition: "middle",
          legendOffset: 32,
          truncateTickAt: 0,
        }}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "food",
          legendPosition: "middle",
          legendOffset: -40,
          truncateTickAt: 0,
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{
          from: "color",
          modifiers: [["darker", 1.6]],
        }}
        legends={[
          {
            dataFrom: "keys",
            anchor: "bottom-right",
            direction: "column",
            justify: false,
            translateX: 120,
            translateY: 0,
            itemsSpacing: 2,
            itemWidth: 100,
            itemHeight: 20,
            itemDirection: "left-to-right",
            itemOpacity: 0.85,
            symbolSize: 20,
            effects: [
              {
                on: "hover",
                style: {
                  itemOpacity: 1,
                },
              },
            ],
          },
        ]}
        role="application"
        ariaLabel="Nivo bar chart demo"
        barAriaLabel={(e) =>
          e.id + ": " + e.formattedValue + " in country: " + e.indexValue
        }
      />
    </div>
  );
};

export default Nivobar

Conclusion

Choosing between D3.js and Nivo depends on project requirements and developer preferences. Both empower developers to transform data into compelling visual narratives, driving informed decisions in the ever-evolving landscape of data visualization.

May your visualizations illuminate insights and inspire action. Happy visualizing!

A TypeScript generic can be defined as a programming feature that enables the creation of reusable components and functions capable of working with various data types without sacrificing type safety. By allowing the specification of type parameters when defining functions, classes, or interfaces, generics empower developers to write flexible and adaptable code that maintains strict type checking, enhancing code readability, maintainability, and scalability in our projects.

When To Use? 🤔:)

Have a look at the above screenshot, here I am trying to store a number in an array. This is the correct way, but what if after going ahead I have a requirement to do the same thing with a string or a boolean or anything else? You can solve it by writing another function according to your requirement or you will use "any" and it will work absolutely fine, but it is not a good practice to write the same code again and again and use "any" with Typescript as well. Also At this time, the generics came into the picture. let's solve this and I will explain after.

In the above example, I did the same thing but with multiple data types. Let's understand how it works.

Syntax :)

<> (angle brackets) : We pass and receive data types using these brackets.

In the above example, I am receiving the datatypes in <T>, T is not mandatory you can use anything. Following the syntax, I pass the data types inside <> as per my requirements and don't need to write extra codes.

Do you think, it is possible to work with multiple data types? Yes, we can use it. Let's see in action :)

In the above, I defined a function named sendResponse. When I have to send a response, The response might be a success or an error or whatever, according to the response I am sure that the data type has never been a constant. So I am using Generics here so that I can use data types as per my requirement.

Use Generics With Types 🛶:)

As a developer, we all are doing API calls, and we are getting the response in different Data Types as per our requirements, but most of the time structures are the same. As I create a structure for storing the responses, as we know "any" is not a good practice. So what can we do?

If we use generic and pass the data type of the data which we are going to store 💡. Let's do this 🚀.

In the provided example, I have a structure where I need to store data against the "data" key. However, my requirements vary, so I created a generic type holder named <Data>. Now, I am storing various data types in a single structure. Initially, I store a user's details in a variable named userDetails. Subsequently, I store the details of all users in a variable named allUsers.

Conclusion 🌨️:)

That's all from my side.

Thanks for your valuable time.

I am looking forward to hearing from you if I missed something.

Happy Coding :)

Imagine a world where nothing has labels. A supermarket without aisle signs. A library without cataloging.

Chaos, right? That’s exactly how media and content would exist without metadata.

Metadata is the behind-the-scenes genius that gives context to your content—whether it’s a picture-perfect sunset photo, a killer YouTube video, or your latest blog masterpiece. It may not be flashy, but trust me, metadata deserves a spotlight.

Still not convinced? Let’s explore why this invisible hero matters more than you think—and how it’s working its magic every time you interact with the digital world.

What Exactly is Metadata? (And Why Does It Matter?)

In plain English, metadata is data about data. Still sounds dull? Let me make it more relatable:

- A Photo: Pixels make the image, but metadata tells you who took it, where, and when.

- A Video: The visuals tell the story, but metadata organises it—tags, thumbnails, descriptions.

- A Blog Post: The content is what you read, but metadata drives it to your screen—title tags, keywords, and categories.

Metadata is the unsung hero that ensures content isn’t just created—it’s found, understood, and shared.

Media + Metadata: How It Works Its Magic

1. Image Metadata: What Your Photos Aren’t Telling You ^🤫

Take a photo with your phone, and you’re unknowingly saving a lot of details—like time, location, and camera settings. This is called EXIF metadata. Why does it matter?

- Platforms use it to categorise and recommend images.

- Search engines rely on metadata like alt text to “see” and display your images.

- Tools can verify metadata to spot fake or manipulated photos—a critical weapon in the fight against misinformation.

Task Time!

Let’s have a little fun. Go to Media Metadata Viewer.

1. Upload any image from your gallery.

2. Discover its hidden metadata—location, camera model, and even date.

It’s like peeking behind the curtain of your digital photos. Spooky, right? And yet super cool. Speaking of digital authenticity, if you’re curious how tech battles fake images, check out Demystifying Deep Fakes.

2. Video Metadata: Turning Views into Virality

Ever wondered how YouTube recommends videos you can’t resist clicking? That’s metadata at work.

Every thumbnail, tag, and description plays a role:

- Title Tags: The eye-catching first impression.

- Descriptions: A keyword-rich invitation to watch.

- Tags: Categories that help the algorithm push content to the right audience.Whether it’s Netflix predicting your next binge-watch or YouTube showing you that “one more video” , metadata quietly keeps you glued to your screen.

3. Website Metadata: The Digital Glue That Holds It Together

If you’ve ever Googled something and clicked the perfect result, thank metadata. It powers:

- Title Tags: The bold, clickable blue links.

- Meta Descriptions: Snappy previews that convince you to click.

- Schema Markup: Code that helps search engines understand whether it’s a blog, recipe, or review.

But metadata isn’t just for SEO—it also enhances user experience. Imagine scrolling through a messy website with no headings or structure. Nightmare, right? Proper metadata ensures clarity and navigation.

In fact, smart metadata helps users build habits effortlessly—much like the concept of muscle memory, which we explored in From Click to Habit.

Why Metadata Is More Relevant Than Ever

Metadata isn’t just technical fluff; it’s essential. Here’s why:

1. Digital Transparency

As deep fakes and scams become more sophisticated, metadata acts as a truth detector. Tools can analyse image or video metadata to determine authenticity—something we cover more in Safeguarding Against Scams in Apps.

2. Content Organisation

Your phone gallery, Spotify playlists, or Netflix recommendations—everything is sorted and served through metadata. Without it, the digital world would be chaos.

3. Accessibility

Metadata powers screen readers, describing images to visually impaired users. Adding alt text doesn’t just boost SEO—it’s the right thing to do.

4. AI and Personalisation

From voice assistants to AI-driven recommendations, metadata helps machines understand and organise your content for you. It’s paving the way for a more intuitive, personalised digital future.

How to Unlock the Full Potential of this hidden data?

Ready to give metadata the love it deserves? Here are some tips:

1. For Images and Videos

• Add alt text that’s descriptive but concise.

• Use file names like “sunset-beach-2024.jpg” instead of*“IMG1234.jpg”*

• Update video tags, descriptions, and captions for clarity.

2. For Websites

• Write engaging title tags with keywords.

• Craft click-worthy meta descriptions that hook readers.

• Add structured data (schema markup) to enhance search results.

3. Update Old Metadata

Think of your older content as treasure chests gathering dust ? Update their metadata, and they might shine like gold again—reaching new audiences organically.

Conclusion: Small, Silent, and Seriously Powerful

Metadata isn’t just “extra stuff”—it’s the hidden genius that makes content accessible, discoverable, and authentic. From organising your photo gallery to helping search engines find the right answers, metadata is working hard behind the scenes.

So, next time you upload an image, post a blog, or binge-watch a Netflix series, take a moment to appreciate metadata. Without it, the digital world would be a chaotic, unsorted mess.

Ready to dive in?

Go explore your image’s metadata and start optimising your content—because even heroes need a little polish.

It’s invisible, but once you notice it, you’ll wonder how you ever ignore it. 🚀

In the ever-evolving landscape of web development, React has emerged as a powerhouse, transforming how developers build user interfaces. At the heart of React's efficiency lies a fascinating duo – the Virtual DOM and the Real DOM.

In this blog, we'll embark on a journey to demystify these concepts, explore their intricacies, and understand why they are pivotal in shaping React applications.

Real Dom: Unraveling the Traditional Web Page Representation 🪔

The Real DOM (Document Object Model), a stalwart of web development, directly mirrors the structure of a web page. As changes occur, the entire Real DOM is recalculated and updated, a process that can become a bottleneck as applications grow in complexity. Direct manipulation of the Real DOM is not only cumbersome but can lead to sluggish user experiences.

Virtual DOM: The Ingenious Solution 🚀

Enter the Virtual DOM, a lightweight and nimble representation of the Real DOM. React ingeniously leverages the Virtual DOM to optimize rendering, addressing the inefficiencies of direct Real DOM manipulation. But how does it work? 💡

The Rendering Process 🛠️

React's rendering process involves a dance between the Virtual DOM and the Real DOM. When changes occur, React creates a new Virtual DOM, compares it with the previous one using a reconciliation algorithm, and then selectively updates the Real DOM with only the necessary changes. This dance minimizes redundant updates, resulting in a smoother and more responsive user interface.

Reconciliation The Key || Core Part 🎯

React reconciliation is the process of comparing the previous state of the DOM with the new state, identifying the differences, and updating only the necessary parts to reflect the changes. It makes react so fast and efficient.

Benefits of the Virtual DOM 🎖️

Performance Boost: By minimizing direct interaction with the Real DOM, React significantly enhances performance, making applications faster and more efficient.

Efficient Updates: The Virtual DOM allows React to update only the components that have changed, reducing the overall workload and ensuring a seamless user experience.

Simplified Development: Developers can work with a more abstract representation of the UI, focusing on building components without getting bogged down by manual DOM manipulation.

It’s extremely fast as compared to the Browser’s DOM — It can produce about 200,000 Virtual DOM Nodes / Second 😲

In a NUTSHELL 🥜

Performance Comparison: In a head-to-head comparison, the Virtual DOM emerges as the victor in performance. Its ability to batch updates and strategically apply changes to the Real DOM sets it apart from the direct manipulation of the Real DOM.

DOM Manipulation: Direct manipulation of the Real DOM requires meticulous attention to detail and can result in unnecessary reflows and repaints. The Virtual DOM, acting as an intermediary, streamlines this process, making the developer's life easier and the application more responsive.

Rendering Efficiency: React's reconciliation algorithm, the secret sauce behind the Virtual DOM, ensures that updates are applied with surgical precision. This not only minimizes computational overhead but also leads to a more efficient rendering process.

I’d love to hear your thoughts! 🤩.

Happy Coding 👨🏼‍💻

What's Muscle Memory BTW?

Muscle memory refers to the process by which our brains encode and automate repetitive physical actions, making these actions more efficient and requiring less conscious thought over time.

Examples:

Driving a car: Shifting gears, pressing pedals, and turning the steering wheel - all happens without consciously thinking about these actions.

Using a TV remote: At our home, we hardly look at the remote while adjusting volume or accessing some other functionalities. If you have used JIO Set-top box, you must have found it very difficult to use initially. Muscle memory is one of the reason.

A UX Perspective

From a UX perspective, muscle memory is crucial in designing web and mobile apps. When users become accustomed to a particular interface, their ability to navigate and interact with it becomes second nature. This leads to a smoother, more intuitive experience, reducing cognitive load and increasing user satisfaction.

Examples:

Google Pay - Payment Navigation: Users who frequently use Google Pay for transactions develop a habit of navigating the payment interface with ease. The consistent placement of the "Scan QR code" button and "Pay contacts" options helps users complete transactions swiftly.

Facebook- Like Button: Regular users of Facebook instinctively know the location and appearance of the "Like" button. Over years of usage, the placement of this button has become a part of their muscle memory.

A UX Developer's Approach

Consistency is Key!

Ensure that the placement of key elements like buttons, navigation bars, and icons remains consistent across all versions of the app. This helps users develop muscle memory, making their interaction more intuitive.

Example: WhatsApp has kept its chat interface largely unchanged over the years, allowing users to rely on muscle memory for quick navigation and message sending.

(Image source: Reddit)

Here are a few more suggestions to consider:

1. Follow Established Patterns: Adhere to common design patterns and conventions familiar to users. For example, placing navigation tabs at the bottom of the screen in mobile apps, as seen in Instagram and Facebook.

2. Usability Testing and Feedback: Conduct regular usability tests to observe how users interact with the app. Gather feedback to identify areas where users struggle and make necessary adjustments while maintaining consistency.

3. Keep things simple and predictable: Design with a clear visual hierarchy to guide user attention to important elements. Consistent use of colors, fonts, and iconography helps users quickly recognize and interact with key features.

4. Documentation: Create comprehensive design guidelines and documentation to ensure that all developers and designers follow the same principles, ensuring consistency, even across different app versions.

Conclusion

Muscle memory plays a vital role in creating intuitive and user-friendly experiences, whether in mobile apps, websites, or physical interactions. By leveraging muscle memory, designers and developers can ensure that their users navigate and interact with digital products effortlessly.

The idea of writing this article stemmed from the fact that there are not many resources available on the role of muscle memory in UX design. If you found the ideas and examples shared here valuable, I would love to hear your thoughts in the comments below. Your encouragement will motivate me to delve deeper into this topic and explore in-depth concepts and implementations that can further enrich our understanding of muscle memory in UX design.

At Utkal Labs, we prioritize futuristic trends and best practices in UX design to deliver high-quality solutions tailored to our clients' needs. By understanding user behavior and focusing on consistency, accessibility, and familiarity, we help create products that not only meet but exceed user expectations.

In today's fast-paced digital world, embedding communication tools into your applications is not just a bonus; it's a necessity. CallHippo, a powerful cloud-based telephony solution, offers seamless communication capabilities that can be integrated into any application, including React-based projects.

This blog post will walk you through the process of integrating CallHippo into a React application, enabling direct phone calls from your app's interface.

Prerequisites

Before we dive in, make sure you have the following:

• Node.js installed on your system.

• A basic understanding of React and its ecosystem.

• An active CallHippo account to obtain your API token.

Setting Up Your React Application

First, create a new React application using Create React App or Vite. For this guide, we'll use Vite with yarn for its simplicity:

yarn create vite my-vue-app --template vue
cd callhippo-vite-app
yarn
yarn dev

We can also use npm:

npm create vite@latest callhippo-vite-app -- --template react
cd callhippo-vite-app
npm install
npm run dev

Integrating CallHippo

Integration involves embedding the CallHippo dialer into your application and configuring it with your API token. Here's how:

How to Obtain Your API Token

Integrating CallHippo into your React application starts with securing an API token. This token is essential for authenticating your requests and interacting with CallHippo's services securely. Here’s how you can obtain it:

1. Sign Up or Log In to CallHippo

   • If you haven't already, start by creating an account on CallHippo or log into your existing account. Visit the CallHippo website and navigate to the signup or login page.

2. Access the Integrations Section

   • Once logged in, navigate to the Integrations tab in the sidebar menu. This section typically contains various integration options for your CallHippo account.

3. Navigate to the REST API Section

   • Within the Integrations tab, locate and click on the REST API section. This is where you can manage your API settings and access your API token.

4. Locate Your Unique API Token

   • Upon entering the REST API section, you should find your unique API token displayed prominently. This token serves as the key to access CallHippo's API services.

5. Copy Your API Token

   • To use the API token in your React application, simply copy it from the CallHippo dashboard. Ensure you securely store this token as it grants access to your CallHippo account.

6. Implement the Token in Your Application

   • With your API token in hand, you're now ready to integrate CallHippo into your React app. When making API requests, include the token in the headers for authentication purposes.

Embed the Dialer Script

Insert the CallHippo dialer script into your index.html or dynamically load it within your React component to keep your application modular.

Create the ClickToCall Component

This component will manage the dialing functionality. It loads the CallHippo script and initializes the dialer when clicking a phone number.

Implementation Details

The ClickToCall component plays a pivotal role. Here's a simplified version of what the component's structure might look like:

import React from "react";

const ClickToCall = ({ phoneNumber }) => {
  const loadCallHippoDialer = () => {
    if (window.TOKEN && window.EMAIL) {
      window.chCall(phoneNumber);
      return;
    }

    var chWidgetDiv = document.createElement("div");
    chWidgetDiv.id = "ch-dialer-container";
    document.body.appendChild(chWidgetDiv);
    window.TOKEN = <<YOUR_TOKEN>>;
    window.EMAIL = <<YOUR REGISTERED CALL HIPPO EMAIL ID>>;
    window.REGION = "global";

    var callhippoScript = document.createElement("script");
    callhippoScript.type = "text/javascript";
    callhippoScript.async = true;
    callhippoScript.src =
      "https://d1x9dsge91xf6g.cloudfront.net/callhippo/files/ch-dialer.js";
    document.body.appendChild(callhippoScript);

   callhippoScript.onload = () => {
     console.log("CallHippo script loaded successfully.");
     if (window.chCall) {
       console.log("Attempting to make a call to:", phoneNumber);
       window.chCall(phoneNumber);
     } else {
       console.error("window.chCall is not defined.");
     }
   };

  };

  return (
    <div
      onClick={loadCallHippoDialer}
      style={{ cursor: "pointer", color: "blue", textDecoration: "underline" }}
    >
      {phoneNumber}
    </div>
  );
};

export default ClickToCall;

With the API token securely integrated into your project, the next step involves directly incorporating the CallHippo dialer functionality into your React application. This is achieved by calling the ClickToCall component within App.jsx and passing the desired phone number as a prop. Here’s a step-by-step guide to do just that:

1. Import the ClickToCall Component

   • Begin by importing the ClickToCall component into your App.jsx file. This assumes you've already created a ClickToCall component that encapsulates the dialer's logic and UI.

2. Place the ClickToCall Component in Your App's UI

   • Determine where you want the CallHippo dialer to appear within your application. Inside the App.jsx return statement, including the ClickToCall component at the desired location.

3. Pass the Phone Number as a Prop

   • The ClickToCall component should be designed to accept a phone number as a prop. This allows the component to be reusable and dynamically adjust based on the phone number you wish to dial. Pass the desired phone number to the ClickToCall component as follows:

<ClickToCall phoneNumber="+1234567890" />

Testing the Integration

After setting up the ClickToCall component, test the integration by clicking on the phone number in your application. Ensure the CallHippo dialer opens and is ready to place a call.

Best Practices and Tips

• Keep your API token secure and avoid exposing it in your client-side code.

• Utilize environment variables for sensitive information.

• Explore CallHippo's documentation for advanced features and customization options.

Conclusion

Following the steps outlined in this guide, you can seamlessly integrate CallHippo into your React application, enhancing its communication capabilities. For those interested in exploring a live demonstration of the integration, you can access the demo project through this Google Drive link.

We encourage you to delve deeper into the integration process and customize it to fit your specific requirements. Should you have any questions or encounter any challenges along the way, feel free to reach out for assistance. Happy coding!

References and Further Reading

• CallHippo API Documentation

Feel free to adapt this draft to include more specific details about your project or any additional insights you gained from the integration process.

Let's embark on a journey through time to uncover the truth.

The Golden Age of Torrents

Rewind to the early 2000s, when dial-up tones still haunted our dreams, and the word 'streaming' was mostly associated with water. It was the era of slow internet connection and even slower official releases. Enter BitTorrent, a protocol created by Bram Cohen in 2001. It was a game-changer, allowing large files to be shared by breaking them into tiny pieces, making the download process faster and more efficient.

The Peak of Piracy and Popularity

At its zenith, around the mid-2000s, Torrent was the go-to for downloading almost anything. From college students sharing lecture notes to recordings of online classes, Torrent had it all. It was the era of uTorrent and Vuze, where every file felt just a click away.

Bollywood movies like Udta Punjab, Manjhi and Paanch found their way onto Torrent sites even before their official release dates, causing a stir in the industry. Popular movies like Paa was also made available on Torrent sites on the same day of its theatre release. I didn't find any reference in the internet but I can recall, I have watched the I am Kalam uncut movie around 15 days before it was released. The leaks not only sparked debates over digital rights but also highlighted the rampant issue of piracy in the country. It wasn't just the big screen that felt the impact. Popular TV shows, often not available through official channels, were downloaded in mass, creating a parallel universe of entertainment consumption.

Even Hollywood blockbusters like Avatar and The Dark Knight found themselves swirling in the Torrent storm, with early leaks causing a headache for studios and led to significant box office losses.

In 2001, Torrent was a newborn, taking its first steps in the digital playground. By 2006, it was a superstar, with millions of users worldwide.

The Decline of Torrent

Fast forward to the present day, and the landscape has drastically changed. Streaming services like Netflix, Hotstar, Spotify and many more have taken over, offering convenience and speed.

Torrent files sometimes had malware, adware or viruses that severely infect the system and was a major concern.

Torrent sites face constant legal battles, with giants like The Pirate Bay playing a never-ending game of cat and mouse with authorities.

Is Torrent Really Dead Now?

Not quite. While it's true that the golden age of Torrenting has passed, the protocol itself is far from extinct. It's no longer the mainstream colossus but rather a niche player. Torrents are still used for sharing open-source software, large datasets, and in regions where streaming services are limited.

In India, despite the government's efforts to block access to Torrent websites, the practice remains popular. There are still active Torrent sites that cater to the Indian audience, offering everything from Bollywood movies to software and games.

It's important to note that while Torrenting itself is not illegal, downloading copyrighted material is illegal in India and many other countries. This has led to a complex situation where Torrent sites operate in a grey area, often being blocked and then reappearing under different domains.

Conclusion

Torrent technology revolutionized file sharing, and its impact is undeniable. So, is Torrent dead? The answer is a resounding no. It's simply transformed, adapting to the new digital ecosystem. Torrent might not be the king of the jungle anymore, but it's still out there, quietly powering downloads in its own unique way.

Hello dev mates, today I am sharing about the Object.groupBy() method which was recently introduced by Javascript, Basically what it is doing like its grouping the elements of an iterable(such as an array).

Syntax 📌

Object.groupBy(items, callbackFn)

From its syntax we know that it takes two parameters first one is items and another is a callback function.

items An iterable (such as an Array) whose elements will be grouped.

callback function It is applied to each item in the group of items. This function should provide a result that will be treated as a key (like a name or symbol) indicating which group the current item belongs to. The function is given some information when it's called, and it needs to return something that represents the category or group of the current item.

Let's understand from the examples💡

Example 1

The below code snippet showcases the implementation of the groupBy() method to organize an array of cars based on their respective models.

Within the first parameter, the array of cars is passed, and in the callback function's initial parameter, the 'model' property is destructured from each element. Subsequently, the callback function returns the model name.

In accordance with the syntax, the groupBy() method utilizes this returned model name as the key for grouping, resulting in the desired organized structure.

Various approaches exist to solve this problem, and the chosen method is considered straightforward and easy to comprehend.

Example 2

In Example 2, the objective is to group an array of students based on their ages.

The solution involves organizing the students according to their respective ages. In the code, I created the grouping keys to achieve this task.

Conclusion 🔚

Thanks for reading. I would love to hear more about your thoughts 🤩.

Happy Coding 👨🏼‍💻

🛡️ In the contemporary digital era, technology plays a pivotal role in shaping our daily lives, leading to the widespread adoption of smartphones and increased internet usage across all age groups. While smartphones offer convenience, they also expose us to vulnerabilities such as scams.

🔍 As software testers, it's vital to spot and address threats by raising awareness and taking proactive steps. Testing isn't just about bugs; it's about protecting our digital world.

App Ecosystem

📱 With over 3.7 million apps on Google Play and 1.8 million on the App Store, downloaded 250 million times daily, mobile apps are integral to daily life. Yet, their convenience poses security challenges. Many apps are vulnerable to scams, increasing risks. Rigorous testing is crucial to mitigate these risks

The Scam Epidemic: A Growing Concern

📈 The app ecosystem's rapid growth has led to a surge in scams, highlighted by recent high-profile incidents. Individuals have fallen victim to fraudulent schemes promising lucrative job opportunities and high returns, resulting in significant financial losses, identity theft, and data breaches.

This underscores the urgent need for robust testing measures to combat these threats and emphasizes testing's critical role in safeguarding security🛡️🔍💼

Importance of Testing: A Cornerstone for Security

Rigorous testing

Rigorous testing can be a secure and reliable app ecosystem. Thorough rigorous testing will help in identifying vulnerabilities and weaknesses in the app. By proactively identifying and fixing weaknesses, we can help ensure the safety and security of our users.

Security testing

Security testing plays a pivotal role in identifying and addressing potential vulnerabilities that could be exploited by hackers to steal data, inject malware, or disrupt operations. The methods include Penetration Testing, Mobile Application Security Testing, and Static Application Security Testing.

Functionality Testing

Functionality Testing is crucial to ensuring that app features and functionalities operate as intended, preventing exploitation by scammers, and robust testing helps identify and rectify issues before reaching end-users.

User Experience (UX) Testing

User Experience Testing is integral for building trust among users, with good UX leading to increased satisfaction and loyalty, while poor user experience can contribute to the success of scams. UX testing focuses on creating a secure and user-friendly environment.

Compliance testing verifies whether the app adheres to industry standards and regulations, a critical aspect of ensuring user protection.

Continuous testing throughout the development lifecycle is essential. Best practices include regular security audits, comprehensive functional testing, and ongoing UX testing for a seamless user experience.

Safe App Downloading Practices

• 📱 Always download apps from official app stores (e.g., Apple App Store, Google Play Store).

• 🔍 Verify the company providing the app.

• 📝 Read reviews before installing an app.

• 🚫 Caution against granting unnecessary permissions that could compromise privacy and security.

• 🌟 Stay away from apps with poor reviews and lack of developer information.

• 🛡️ Always stay informed about app security.

• 🔄 Always keep apps updated with the latest security patches.

• 🚨 Always report any suspicious apps or security concerns to the app store and relevant authorities.

• 👫 Share information with friends and family to collectively contribute to a safer digital environment

Final Thoughts

🏰 Let's see our app experience as crafting a resilient stronghold. Thorough testing methods work like examining every brick, ensuring our walls are sturdy. But it's not just developers' duty – users also have a critical role.

Selecting apps from trusted sources, reviewing feedback, and updating apps bolster our digital sanctuary. Together, with developers reinforcing defenses and users making informed decisions, we can shape a safer digital realm for all.🛡️👤🔒

Svelte stands out as an open-source front-end framework designed to craft dynamic and engaging user interfaces within web browsers.

Tell me more...⬇️

It takes a unique approach – acting as a compiler, not just a framework – resulting in faster performance compared to counterparts like ReactJS, AngularJS, and VueJS. Svelte is ideal for building reactive web applications, ensuring instantaneous updates whenever data changes.

It excels in rapid application development (RAD), allowing the swift creation of minimally coded software applications. Additionally, Svelte plays a pivotal role in web optimization, distinguishing itself by avoiding the use of a virtual DOM.

When it comes to deployment, Svelte stands apart; there's no need to deploy it separately, streamlining the process and contributing to its rapid execution.

Prerequisites 🎒

Before diving into Svelte, ensure the following prerequisites are in place:

• Any text editor (e.g., VS Code, Atom, etc.).

• NodeJS is installed on your system.

Installation Steps 🔨

Step 1: Install Degit

Open your command prompt or terminal and install the 'degit' package globally:

npm install -g degit

Step 2: Create a Svelte Project

Create a directory on your desktop and run the following command:

degit sveltejs/template project-name

Step 3: Project created.

Open it in your text editor. In 'src', find main.js (the Svelte app executor), App.svelte (the root component), and check package.json for dependencies. Ready to roll! 🚀

Step 4: Navigate to Project Directory

Ensure you are in your project directory:

cd project-name

Step 5: Install Dependencies

Install project dependencies:

npm install

Step 6: Start the Development Server

Create a local development server to run your application:

npm run dev

Step 7: Follow the Link

Open the provided link in your browser to explore and develop your Svelte application further.

Thats it..!

Congratulations on Choosing Svelte! 🎉 Get ready to code at warp speed. Time to sprinkle some magic on your web development journey with Svelte's lightning-fast vibes! 🚀✨

Happy Coding🤠

Today, I am taking you on a journey of automating a Lead Management System. Lead Tracking System, as the name suggests is a system designed to keep track of all the leads a company has or procures.

From a broader perspective, it is a system where an organization can store, view, and update all the information about their prospects and their requirements.

Background

We have our own in-house Lead Management System, and as a member of the automation team, I and my peer Gopabandhu Barik were assigned the responsibility of automating the system.

I used Selenium (in JAVA) for the above purpose. To get into the system, first, I used my official credential to log in.

The application consists of 3 roles namely.

1. Admin,

2. Sales, and

3. Delivery Owner

To cover most scenarios, I used the account with Admin privileges. Upon a successful login, the registered lands on the Dashboard page.

What is Selenium?

Selenium is a widely used tool that automates web browsers, facilitating the creation of scripts for automated interactions with web applications.

QA professionals can utilize Selenium to automate processes without the need for manual clicks through tasks on the web. Selenium programmatically emulates human actions, such as clicking buttons, filling out forms, and navigating websites.

It supports various programming languages like Java, Python, C#, and Ruby, making it accessible to many developers.

Benefits of Using Selenium in Java

Powerful and flexible

Selenium is a powerful and flexible automation tool that can be used to automate a wide variety of tasks.

Open source

Selenium is an open-source tool, which means that it is free to use and modify.

Cross-Browser Compatibility Testing

Selenium enables testing web applications across multiple browsers, ensuring compatibility and a consistent user experience.

Integration with J Meter

Selenium can be integrated with J Meter, allowing you to create robust automation scripts for testing while simulating user load tests.

How to Set Up Selenium in Java

Before you start using Selenium in Java, you need to set up your development environment. Follow these steps:

Java Installation

Ensure you have Java Development Kit (JDK) installed on your Windows machine. You can download it from the official Oracle website. Or

IDE (Optional)

You can use an Integrated Development Environment (IDE) like Eclipse or IntelliJ IDEA for writing and running Selenium scripts. Download and install your preferred IDE.

Download and Install Selenium WebDriver

Download Selenium JAR Files: Visit the official Selenium website and download the latest version of the Selenium WebDriver Java bindings.

Download and Configure Browser Drivers

Download Browser Drivers
1. Depending on the web browser you need to automate (e.g., Chrome, Firefox, Edge), download the respective browser driver executable ( https://www.selenium.dev/downloads/ )

2. For Chrome, download ChromeDriver from the official site.

3. For Firefox, download GeckoDriver from the official site.

4. For Edge, download the Microsoft Edge WebDriver from the official site.

Set Up Your Selenium Script Using Eclipse

1. Open Eclipse and create a new Java project.

2. Add the Selenium WebDriver JAR files to the project's build path.

3. Create a new Java class and import the packages.

package Basicweb;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Firsttestclass {
public static void main(String[] args) {
System.setProperty(
"webdriver.chrome.driver","C:\\Users\\Utkal Labs\\Desktop\\New folder\\chrome\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://leadstaging.utkallabs.com/");

driver.manage().window().maximize();

driver.findElement(By.name("email")).sendKeys("Vivek.singhdeo@utkallabs.com");
driver.findElement(By.name("password")).sendKeys("12345678");
driver.findElement(By.xpath(
"//*[@id=\"root\"]/div/div[2]/div[2]/div/div/div[2]/div/form/div/div[4]/button")).click();
driver.findElement(By.cssSelector(
"input[class= 'MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-10ygcul']")).click();
System.out.println(driver.getTitle());
System.out.println(driver.getCurrentUrl());
driver.close();
    }
}

1. Create a new WebDriver object, passing in the path to the ChromeDriver executable as an argument.

WebDriver driver = new ChromeDriver();

5. Use the WebDriver object to navigate to the web page that you want to automate.

driver.get("https://leadstaging.utkallabs.com/");

6. Use the WebDriver object to interact with the web page elements. For example, you can use the findElement() method to locate a web element and the sendKeys() method to enter text into a text field.

driver.findElement(By.name("email")).sendKeys("Vivek.singhdeo@utkallabs.com");

driver.findElement(By.xpath(
"//*[@id=\"root\"]/div/div[2]/div[2]/div/div/div[2]/div/form/div/div[4]/button")).click();

driver.findElement(By.cssSelector(
"input[class= 'MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-10ygcul']")).click();

7. Use the close() method to close the WebDriver object and the web browser.

driver.close();

Going Forward

In the forthcoming blog, we will embark on creating content centered around JMeter and Selenium primarily focusing on showing you the details of load testing using
JMeter and Selenium.

Stay tuned for an insightful exploration into the practical application of these tools in the realm of performance testing. 🥂

In the realm of computer vision, object detection takes center stage, with the primary goal of identifying objects within images or video streams. This task is pivotal in a wide range of applications, from security systems to autonomous vehicles. Let's have a leap through the categories.

Categories

Object detection methods can be broadly classified into two categories: non-neural and neural approaches.

Non-Neural Methods

• Viola-Jones: This approach harnesses Haar features to achieve robust and efficient object detection.

• SIFT (Scale-Invariant Feature Transform): SIFT extracts key points and descriptors from images, enabling effective object recognition.

• HOG (Histogram of Oriented Gradients): HOG is a feature descriptor that characterizes objects based on their shape and appearance.

Neural Network Methods

• R-CNN Family (Region-Based Convolutional Neural Networks): These models leverage region proposals to enhance object detection accuracy.

• SSD (Single Shot Detector): SSD is renowned for real-time object detection, accomplishing this task in a single pass through the network.

• Retina-Net: Exceptional at managing objects of varying scales and aspect ratios.

• YOLO (You Only Look Once): YOLO is a real-time object detection marvel that performs the detection and classification of objects in a single, efficient pass through a neural network.

Understanding YOLO

What is YOLO?

You Only Look Once (YOLO), born in 2016, stands as a formidable object detection algorithm renowned for its speed and accuracy.

In a single efficient pass through the network, YOLO predicts both bounding boxes and object classes, rendering it perfect for real-time applications. YOLO's elegance and its proficiency in handling diverse objects have propelled it to popularity.

Training Your YOLO Model

When it comes to training your YOLO model, you have the freedom to harness datasets such as those provided by Roboflow.

By creating an account and downloading YOLO-compatible formats, you are poised to embark on the journey of customizing your YOLO model to suit your specific objectives.

To acquire your custom dataset, execute the following command:

curl -L "https://public.roboflow.ai/ds/YOUR-LINK-HERE" > roboflow.zip; unzip roboflow.zip; rm roboflow.zip

Before you begin training your YOLOv5 model, you need to set up data.yaml configuration file. This file is essential for defining key parameters, including:

• The location of your YOLOv5 image folder.

• The path to your YOLOv5 labels folder.

• Custom class information.

This data.yaml file serves as a blueprint for your training process. It provides the necessary instructions for your YOLOv5 model, ensuring it understands your dataset, class labels, and how to handle them effectively during training.

Installing the YOLOv5 Environment

To start with YOLOv5 we first clone the YOLOv5 repository and install dependencies. This will set up our programming environment to be ready to run object detection training and inference commands.

!git clone https://github.com/ultralytics/yolov5.git

%cd /content/yolov5

!pip install -U -r yolov5/requirements.txt

YOLOv5 Model Configuration and Architecture

For our YOLOv5 model, we've opted for the leanest and swiftest base model available. However, it's important to note that you have a range of YOLOv5 model options to choose from, depending on your specific requirements:

• YOLOv5s

• YOLOv5m

• YOLOv5l

• YOLOv5x

Training Your Custom YOLOv5 Detector

Now that we have our data.yaml and yolov5s.yaml files primed and ready, we're all set to commence our training journey.

To initiate the training process, execute the training command with the following pivotal options:

• img: Specifies the input image size.

• batch: Determines the batch size for training.

• epochs: Sets the number of training epochs.

• data: Points to the path of our data.yaml configuration file.

• cfg: Specifies the model configuration (in this case, yolov5s.yaml).

• weights: Allows you to specify a custom path to pre-trained weights.

• name: Defines the name for your training results.

• nosave: Saves only the final checkpoint, minimizing disk space usage.

• cache: Enables image caching to expedite the training process.

Execute this training command to kickstart your YOLOv5 model customization and training.

!python train.py --data ../data.yaml --weights yolov5s.pt \
    --img 640 --epochs {EPOCHS} --batch-size 16 --name {RES_DIR}

After training it will save in this path as best.pt

runs/train/results_1/weights/best.pt

Run YOLOv5 Inference on Test Images

Once our YOLOv5 model has been meticulously trained, it's time to put it to the test by making inferences on test images. After the training process has concluded, the model weights will be securely stored in the 'weights/' directory.

You can employ the 'source' parameter to specify the source of inference. It's versatile and can accept a variety of inputs, including:

• A directory containing multiple images

• Individual image files

• Video files

• Even a webcam's input port

To put our model to the test with test images, utilize the following command:

!python detect.py --weights runs/train/{RES_DIR}/weights/best.pt \

--source {data_path} --name {INFER_DIR}

Here are some visualizations after running test images.

Image Courtesy: Roboflow

Image Courtesy: Roboflow

To further assess the performance of our trained model, we've acquired random images from the internet. These additional tests serve to showcase the model's versatility and effectiveness, Here are the results of these evaluations

Image Courtesy: click4vector

Image Courtesy: pexels

Conclusion

Training your custom YOLO object detection model is a rewarding experience. YOLO stands out for its lightweight and user-friendly nature, enabling quick training, fast inferences, and outstanding performance. Whether you're working on real-time applications or complex projects, YOLO is a versatile and powerful tool in your computer vision toolkit.

Happy Coding…. 🙏🙏🤝

We will start with setting up a project and creating one HTML file called index.html with starter code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React BTS</title>
</head>
<body>

</body>
</html>

Let's add a root div where we will render our React app. Also, we will add two script tags which are basically used to include react library and react-dom. Then, we will add one empty script tag where we will write our code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>

    </script>
  </body>
</html>

First script tag is used to include the React library in our web page.

Second script tag is used to include ReactDOM, which used for integrating React with the DOM (Document Object Model). ReactDOM is used for rendering React components into the actual HTML DOM.

Now let's add our react code, we will add a very simple h1 with the text Hello World!.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      const App = () => {
        return React.createElement(
          "div",
          {},
          React.createElement("h1", {}, "Hello World!")
        );
      };

      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </body>
</html>

Let's break this code.

const App = () => { ... }:

• This code defines a React functional component called App. Functional components are a way to define React components using JavaScript functions.

• Inside the component, there is a return statement that uses the React.createElement function to create a virtual DOM element. Here, it creates a div element containing an h1 element with the text "Hello World!"

const container = document.getElementById("root"):

• Here we have fetched an HTML element with the id "root" using document.getElementById. This element will serve as the container in which the React application will be rendered.

const root = ReactDOM.createRoot(container):

• This creates a React Root using ReactDOM.createRoot(). A React Root is a new rendering API introduced in React 18 to enable concurrent rendering.

• The container element we obtained earlier is passed as an argument to createRoot(), indicating that this is where the React application will be rendered.

root.render(React.createElement(App)):

• The last line of code renders the App component into the specified container using the React Root's render method.

• React.createElement(App) creates an instance of the App component, and the root.render() method renders it into the container.

Let's run this code and see the output.

You can see we have created our Hello World React app with just a few lines of code. At the end of the day, all the JSX code we write is transformed into React.createElement() calls by transpilers like Babel before it's executed by a JavaScript engine.

We just explored the process of creating a "Hello World!" React app using just a single HTML page. Now, we will delve into the separation of our JavaScript code from our HTML page and learn how to create reusable components.

This is the code we have till now:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      const App = () => {
        return React.createElement(
          "div",
          {},
          React.createElement("h1", {}, "Hello World!")
        );
      };

      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </body>
</html>

Now, let's first move our JS code to a separate file called app.js and include it in our HTML page using a script tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

// app.js
const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Hello World!")
  );
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

If we run this project now, the output will remain the same.

Let's create our first component:

// app.js

const Student = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "John"),
    React.createElement("h2", {}, "Male"),
    React.createElement("h3", {}, "21"),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

Here we have created a component called Student which uses React.createElement to create a DOM structure with a parent "div" element and three child elements ("h1," "h2," and "h3"). When this component is rendered, it will produce the following HTML structure:

<div>
  <h1>John</h1>
  <h2>Male</h2>
  <h3>21</h3>
</div>

The output would be something like this:

Now that we have a component, we can utilize it multiple times by simply calling it.

// app.js

const Student = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "John"),
    React.createElement("h2", {}, "Male"),
    React.createElement("h3", {}, "21"),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student),
    React.createElement(Student),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

And the output would be.

Here, we can see that it doesn't make any sense to use the component twice, as it gives the same output. That's because, until now, we have been using static data only.

Let's make this component dynamic using props:

// app.js

const Student = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.gender),
    React.createElement("h3", {}, props.age),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student, { name: "John", gender: "Male", age: 21 }),
    React.createElement(Student, { name: "Mary", gender: "Female", age: 20 }),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

Here, we have used props to pass some dynamic data to the component, and then we are using them accordingly. Let's see the output.

As a result, we've successfully separated our JavaScript code from the HTML, created components, and gained a deeper understanding of how React operates.

Deepfake videos have become a concerning issue in the digital age, leveraging the power of artificial intelligence (AI) and machine learning to create realistic-looking videos with altered appearances and voices. This article delves into the world of deepfakes, exploring their creation process, the threats they pose, and methods to detect them, as well as tools for defense.

What is Deepfake?

Deepfake videos are a type of manipulated or forged video content that uses artificial intelligence (AI) and machine learning techniques to create realistic-looking videos in which the appearance and sometimes even the voice of a person are convincingly altered. The term "deepfake" is a combination of "deep learning," a subset of machine learning, and "fake."

How deepfake videos are made?

Data Collection

Deepfake creators require an extensive collection of data to initiate the process. This dataset often includes a substantial number of images and audio clips featuring the target person.

Training the Model

The collected data is then used to train sophisticated machine learning models, specifically deep neural networks. Through this training, the AI system learns to replicate the target person's facial expressions, vocal nuances, and mannerisms.

Generation

Once the AI model is effectively trained, it can begin to generate manipulated content. The most common application of deepfake technology involves mapping the target person's face onto another individual's face in a video. This results in a video that seemingly portrays the target person saying or doing things they never actually did.

The Looming Threat

The rise of deepfake technology has raised alarm bells due to its potential for misuse. These manipulated videos can serve a range of sinister purposes, including:

• Misinformation and Disinformation: Deepfakes can be exploited to spread false narratives, deceive the public, and undermine trust in legitimate sources of information.

• Identity Theft and Harassment: Individuals can fall victim to impersonation and character assassination, as deepfakes are used to manipulate their likeness in compromising situations or making false statements.

• Propaganda and Political Manipulation: Political adversaries may use deepfakes to tarnish the reputation of rivals, sway public opinion, or distort the truth in the political arena.

How to detect Deepfake?

Blink Frequency

Watch for how often images blink in a video. Real people blink and move their eyes naturally, while deepfakes may blink less often or in an unnatural way.

Face-Body Discrepancies

Deepfake tech mainly changes faces, so check for mismatches in body proportions or differences in expressions and body actions.

Video Duration

Real videos are longer, capturing real events, while deepfakes are usually shorter, often just a few seconds, due to the complexity of creating them.

Sound and Vision

Focus on the video's sound. Changing audio is tough for software. Be cautious if there's no audio or if it doesn't match the visuals, especially the lips.

Mouth Matters

Check the mouth's fine details like the tongue, teeth, and oral area. Deepfakes struggle with these. Blurriness or oddities inside the mouth may hint at a fake image.

Do We Have Tools to Detect Deepfakes?

Deepfake videos are a growing problem, but there are tools in the works to spot them. These tools are getting better at telling real from fake. As we face this challenge, improving our detection methods is key to keeping digital info safe.

Here are some tools you can use to protect yourself

Sentinel

Intel’s Real-time Deepfake Detector

WeVerify

Microsoft’s video authenticator tool

Phoneme-Viseme

Conclusion

While these tools are instrumental in the battle against deepfakes, it's important to stay informed and use them in conjunction with a critical eye to ensure the digital landscape remains trustworthy and authentic.

Thanks for reading. 🤝

The question was, how the following conditions get satisfied to print the text in the console.

How I solved it? 💡

Let's solve this with the help of Javascript Object.

First, we will define an object and use one of the Object Accessors.

Basically, there are two types of accessors in javascript

• getters

• setters

Here we are using get also we can say getters.

More about the accessors can be referred from here, https://www.w3schools.com/js/js_object_accessors.asp

Now we can see here that the output is printing that log as we expected.

It satisfies the first condition with the temp's actual value for the very first time because get accessor is not called until the value of the temp is actually used. This is because JavaScript uses a process called lazy evaluation.

Please let me know if you have any other approach to solve this.

Happy coding 😊

As a part of my job, I come across people from different parts of the globe and talk to them about multiple projects, ideas, architectures, implementations etc. 🌏 Many times I found people talking about the pinching factors in outsourcing the work such as trustworthiness, poor customer experiences, etc. These are the kinds of key worrying points for them to outsource the work.

When I sat down to evaluate, I did find valid points to their worrying ones especially when someone is outsourcing or hiring from a few thousand miles away.

Below are the points, I found the factors that cause the issues:

🔗 The Missing Link

I have seen people working hard and dedicated but not communicating the same with the customer. They are always waiting for a stage to touch before they report to the client. That's quite possible the stage may take days or weeks. When we reach the stage and start communicating, the expectation clash happens between the client and vendor as there is the presence of silent days.

📊 Missing Progress Bar

The human brain loves to see the progress. Probably that is the reason, we enjoy seeing a progress bar on screen while the huge dataset gets loaded rather than seeing a white screen and knowing nothing about what is happening in the background. Similarly, a lack of proper communication misaligned the progress syncing process between customer and vendor.

⚫ The Black Box

"What's going on??? " are the possible words of frustration coming from the client to vendors which eventually leads to a poor customer experience. If they are not seeing the progress transparently then it becomes a black box and they have no clue what is happening.

💡 How we tackle this at Utkal Labs

At Utkal Labs, we practice transparent communication with the customer from the beginning of the projects.

A milestone-driven agile approach sets the timely expectations of our customers as we keep progressing.

Challenges in the work are inevitable but communicating with the customers and keeping "the customers in sync always" is our approach to avoid the frustration of the black box. 🚀

Share your thoughts on how you handle these challenges! 💬🤝

A few lines before we present the challenge to you. We at Utkal Labs believe in delivering creative work while having fun as a team, we call it UL Family. Last month, we had this fantastic fun activity where one has to guess the Indian city name from a hint consisting of an icon and an incomplete phrase that forms the city name.

While allowing work from home to their employees is a big headache for most companies, we are one of the very few companies in India that have the whole team working remotely. To know more about the UL Culture and some interesting insider stories (our secret sauce🤫) stay tuned. These fun activities are part of the employee engagement program.

So, here I present you the visuals we used in that activity.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

[40]

[41]

[42]

[43]

[44]

[45]

[46]

[47]

[48]

[49]

[50]

Please share your guesses/answers in the comment.

If you liked this fun activity, please like-comment-share this article.

Credits: Biswarekha Jagadev, Pragati Pattnaik, Sradhanjali Kabi, Chandrani Das, Suvendu Shekhar Giri and team.

Thank you! 🙏

In this article, I am about to discuss something that was given to me as part of my interview task. Which was to create a preview of the picture before it is uploaded. So let's start.

Here, I have used a React application. After clearing the app.js file, the code now looks like this:

export default function App() {
  return (
    <div className="App">
    </div>
  );
}

Then I added a header and a div which will contain input and an image:

export default function App() {
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
      </div>
    </div>
  );
}

After that, I added the styles:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.imageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Then I added an input for uploading the picture and used a state to store it:

import "./styles.css";
import { useState } from "react";

export default function App() {
const [image, setImage] = useState(null);

const handleImageUpload = (e) => {
    setImage(URL.createObjectURL(e.target.files[0]));
  };

  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
          <input type="file" accept="image/*" onChange={handleImageUpload} />
      </div>
    </div>
  );
}

Note: The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter. Read more ->

Now the page would look something like this:

Lastly, I displayed the image if it existed and added styles:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [image, setImage] = useState(null);

  const handleImageUpload = (e) => {
    setImage(URL.createObjectURL(e.target.files[0]));
  };
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
        <input type="file" accept="image/*" onChange={handleImageUpload} />
        {image ? <img src={image} className="image" alt="preview" /> : null}
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.imageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  border: 1px solid black;
  border-radius: 5px;
}

The final result after uploading a picture:

Link to code-sandbox ->

Thanks for reading. Have a nice day. 🙂

Let's connect - 👋👋👋

For now, you can know more about us by visiting our website and LinkedIn. 🤝🤝