DEV Community: Bishal Pahari

Recreating Ambient Mode from Youtube Videos

Bishal Pahari — Sat, 01 Mar 2025 04:16:38 +0000

Briefly About Ambient Mode

In October 2022, YouTube introduced Ambient Mode, an immersive feature that enhances the viewing experience by extending the video's colors into the interface background. This effect, available exclusively in Dark Mode, reduces eye strain and adds a cinematic touch to video playback.

In this blog, we'll create a dynamic ambient mode similar to YouTube's Ambient Mode.

Step by Step Guide

It's essentially two different stacked videos playing in sync with effects.

First, wrap two video elements within a div.container. Here, we'll use the first video element for the ambient mode and the second as our main video. Ensure you mute and remove the controls of the ambient video element.

Next, set the container's position to relative and the second video's position to absolute, positioning the main video over the ambient one.

At this stage, your setup should look similar to the picture above.

Now, scale up the ambient mode video element so it expands and becomes visible.

Add some blur to the ambient mode video element.

Finally, reduce the opacity of the ambient mode video element to enhance the effect.

If you want to create a dynamic ambient mode that syncs with the main video, you can achieve this using JavaScript. Configure actions so that the main video's controls also affect the ambient mode video.

Thanks for following along! I hope you found this guide helpful and easy to understand.

Youtube blog: Open (Watch YouTube in ambient mode)

Demo Site: Youtube-ambient-mode

Source Code: Github

The Magical effect Behind the KPR Verse Footer Effect

Bishal Pahari — Wed, 09 Oct 2024 03:48:12 +0000

I was scrolling through the KPR-verse website when I noticed this cool effect at the bottom. Whenever I see something like this, I always want to recreate it. My process is simple: I start by trying to replicate the effect, then make a blog to explain how it’s done, aiming to break down complex designs into easy-to-understand steps.

At first, I often doubt whether I can pull it off, but after some deep thought, I usually find a way to break the design into pieces. By connecting those pieces, I manage to achieve the effect. Enough talk — let’s dive into how you can make it yourself!

Breaking Down the KPR Verse Footer Effect

At the end of the site, you’ll find the KPR banner in the background. At first glance, it might seem a bit complex, but it’s not that complicated.

First, create a div with the class .container. This will be the root element for our tutorial.

Next, divide the .container into two parts: .subcontainer-wrapper and footer. The footer element will hold the KPR banner.

Now, further divide the .subcontainer-wrapper into two parts. The upper part contains all the content for our website, while the lower part is left blank with no background—essentially invisible, but it still has the width and height of the viewport. The lower half is crucial because it allows us to see the footer.

Up to this point, all the elements are in the normal HTML flow, i.e., top-to-bottom. Now, we need to break this order by placing the footer behind and bringing the .subcontainer-wrapper in front. To do this, we'll set the .subcontainer-wrapper to position: absolute relative to its parent .container. This will remove the .subcontainer-wrapper from the normal DOM flow.

That’s all we need to set up the effect. Now, fill the upper part of the .subcontainer-wrapper with content, but leave the lower part—the invisible div—empty. Also, add content to the footer.

Once you’ve added the content, it should look something like this.

The upper part hides the background, and as you scroll down, when the visible content ends, the invisible section reveals the footer. Voilà! There you have it — simple and easy.

_Thanks for following along! I hope you found this guide helpful and easy to understand. Stay curious and keep exploring!

original: KPR-verse

Demo site: Demo Link , For this demonstration, I used the Google I/O site (https://io.google/2024/) and adapted it to showcase a similar concept.

Source code: Github Link_

iOS-Style Switch Button: A Simple Step-by-Step Guide

Bishal Pahari — Sat, 16 Mar 2024 07:37:50 +0000

Have you ever wanted to create an iOS-style switch button for your web apps? No need to be an expert! Let’s create one together using HTML, CSS, and JavaScript.

Pre-requisites

Basic knowledge of HTML, CSS, and JavaScript.
A text editor of your choice.

Let’s deep dive into the code
Create a new file named index.html within your project folder and add the following HTML code:

index.html

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

    <!-- Link to the external CSS file for styling -->
    <link rel="stylesheet" href="./styles.css" />

    <!-- Link to the external JavaScript file for functionality -->
    <script defer src="./main.js"></script>
  </head>
  <body>
    <!-- Container for the switch button -->
    <div class="switch-container">

      <!-- Box containing the image and text -->
      <div class="pack-box">
        <!-- Image for the switch button -->
        <img id="svg-icon" src="./active.svg" />
        <!-- Text for the switch button -->
        <p>Notification Alert</p>
      </div>

      <!-- Label associating the input with the switch functionality -->
      <label for="switch-1" class="switch">
        <!-- Input checkbox acting as the switch button -->
        <input type="checkbox" id="switch-1" onClick="handleChange()" />
        <!-- Span element creating the appearance of the slider button -->
        <span class="slider"></span>
      </label>

    </div>
  </body>
</html>

I’ve structured the content to include a switch container .switch-container housing a pack box .pack-box holding an image .svg-icon and text "Notification Alert". A label .switch is associated with a checkbox input .switch-1 and a span .slider to create the appearance of a slider button.

Styling the Switch Button with CSS
To style the switch button, create a file named styles.css and link it to your HTML file. Begin by ensuring proper alignment and centering of elements:

/* Centering body content */ 
body {
  height: 100dvh;
  width: 100dvw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling container */ 
.switch-container {
  width: 300px;
  height: 150px;
  border: 3px solid #636363;
  border-radius: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}


.switch-container img {
  width: 25px;
}

/* Styling box with image and text */
.pack-box {
  display: flex;
  gap: 1rem;
}

Moving to the main logic for the switch button styling, we define its dimensions and behavior. The .switch class sets the width and height of the label and positions it relatively:

/* Styling switch button */
.switch {
  width: 60px;
  height: 35px;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

The .slider class positions the slider element absolutely within its container, ensuring it fills the entire area with flush positioning:

/* Styling slider button */ 
.switch .slider {
  position: absolute;
  inset: 0;
  background: rgb(145, 145, 145);
  border-radius: 25px;
}

To hide the checkbox, set its display property to none:

/* Hiding checkbox input */ 
.switch input {
  display: none;
}

Using the ::before pseudo-class, add a blank content before the slider to center the toggle button and change its appearance to circular:

/* Styling slider appearance */
.switch .slider::before {
  content: "";
  position: absolute;
  height: 27px;
  width: 27px;
  left: 5px;
  top: 4px;
  background: white;
  transition: 0.5s all;
  border-radius: 50%;
}

By leveraging the :checked pseudo-class, we modify the background color of the slider to green when the switch is toggled:

/* Styling checked state */
.switch input:checked + .slider {
  background: rgb(12, 235, 12);
}

Lastly, to enable the slider button to move when toggled, use the transform property to translate it horizontally:

 /* Styling slider movement */
.switch input:checked + .slider::before {
  transform: translateX(23px);
}

These CSS rules make sure the switch button works smoothly. It changes its look and moves as expected when you toggle it.

Adding JavaScript for Interactivity

Create a file named main.js and link it to your HTML file. Use the following JavaScript code to change the icon when toggling:

Main.js

const svgIcon = document.querySelector("#svg-icon");

const handleChange = () => {
  // Toggle icon based on switch state
  if (document.getElementById("switch-1").checked) {
    svgIcon.src = "./active.svg";
  } else {
    svgIcon.src = "./nonActive.svg";
  }
};

Conclusion
Creating an iOS-style switch button for your web applications is achievable with basic knowledge of HTML, CSS, and JavaScript. By following the simple steps outlined in this guide. Feel free to customize the styling and functionality to suit your specific needs and preferences.

For the full code and resources used in this tutorial, you can find them in my GitHub repository: https://github.com/Bishal-Pahari/iOS-Button

Simple Introduction to Higher Order Components in React

Bishal Pahari — Sat, 16 Mar 2024 04:19:36 +0000

Introduction
Have you ever heard of Higher Order Components (HOCs)? Don’t let the fancy name intimidate you! Think of them as powerful tools in React that can make your life easier when building complex applications. In this article, we’ll take a simple dive into what Higher Order Components are, why they’re useful, and how they can level up your React development skills without getting tangled in complex jargon.

So, grab your favorite beverage, settle into your comfy chair, and let’s explore the world of Higher Order Components together!

Why use Higher Order Components?
Higher Order Components offer several benefits in React development. Firstly, it helps in reusing logic across multiple components. They simplify handling common functionalities like authentication, logging, or data fetching. With HOCs, you can separate concerns and keep your components focused on their specific tasks. HOCs enable composing multiple behaviors or features into a single component effortlessly. Additionally, they make the code cleaner and easier to understand by moving complex logic out of components. This organization helps keep components focused on their main tasks, resulting in more organized and maintainable code overall

When to use Higher Order Components?
Imagine we have a dashboard, a profile page, and a settings page in our React application. Each of these pages requires the user to be logged in before accessing the content. Instead of writing authentication logic separately for each component, we can create a single Higher Order Component called withAuth that wraps around these components.

The withAuth HOC can check if the user is authenticated. If the user is authenticated, it renders the component; otherwise, it redirects the user to the login page.

This approach helps in keeping our code clean, modular, and easy to maintain. If the authentication logic needs to be updated or modified, we only need to do it in one place, inside the withAuth HOC, rather than updating it in multiple components.

Implementing Higher Order Components in your React App
I will try to explain to you the concept of Higher Order Components (HOCs) using a simple analogy that involves cookies:

Imagine you have two cookies, and you want to add chocolate chips on top of each one. Now think if you only have two cookies, it’s easy to manually place the chocolate chips on each cookie. But what if you have a hundred cookies? Doing it manually for each cookie would take forever!

This is where Higher Order Components (HOCs) come in handy. Think of the cookies as your components and the chocolate chips as some extra functionality or props you want to add to them. With a HOC, you can create a special function that automatically adds the chocolate chips to each cookie component without having to do it manually for each one. So, whether you have two cookies or a hundred, the HOC takes care of the job for you, making your life as a baker (or developer) much easier!

First, let’s create a file called App.js, which will be our entry point of our React application.

App.js

import React from "react";
import Cookie1 from "./components/Cookie1";
import Cookie2 from "./components/Cookie2";

const App = () => {
  return (
    <div>
      <h1>Cookies with Chocolate Chips:</h1>
      <Cookie1 />
      <Cookie2 />
    </div>
  );
};

export default App;

Now, let’s create a file called HOC.js, which will be our Higher Order Component (HOC) responsible for adding chocolate chips to our cookies.

HOC.js
We define our Higher Order Component called WithComponentChips. This function takes a WrappedComponent as input and returns an enhanced version of it. In this case, it adds functionality to track and display the number of chocolate chips added to the cookies.

import React, { useState } from "react";

const WithComponentChips = (WrappedComponent) => {
  const EnhancedComponent = () => {
    const [addChocolateChips, setAddChocolateChips] = useState(0);
    const handleChange = () => {
      setAddChocolateChips(addChocolateChips + 1);
    };
    return (
      <WrappedComponent
        addChocolateChips={addChocolateChips}
        handleChange={handleChange}
      />
    );
  };
  return EnhancedComponent;
};

export default WithComponentChips;

Next, let’s create another file called Cookie1.js & Cookie2.js, which will represent our cookie component.

Cookie1.jsx

import React from "react";
import WithComponentChips from "../HOC";

const Cookie1 = ({ addChocolateChips, handleChange }) => {
  return (
    <div>
      <p> {addChocolateChips} 🍫 Chocolate Chips 🍫</p>
      <button onClick={handleChange}>Add Chocolate Chip</button>
    </div>
  );
};

export default WithComponentChips(Cookie1);

Cookie2.jsx

import React from "react";
import WithComponentChips from "../HOC";

const Cookie2 = ({ addChocolateChips, handleChange }) => {
  return (
    <div>
      <p> {addChocolateChips} 🍫 Chocolate Chips 🍫</p>
      <button onClick={handleChange}>Add Chocolate Chip</button>
    </div>
  );
};

export default WithComponentChips(Cookie2);

These files represent our individual cookie components. They receive props addChocolateChips and handleChange from the Higher Order Component. Each component displays the number of chocolate chips added and includes a button to add more chips when clicked.

The magic happens when we export the Cookie1.jsx and Cookie2.jsx components after enhancing them with the WithComponentChips HOC. By doing so, both cookies automatically gain the ability to track and add chocolate chips without us having to manually add this functionality to each one individually.

This example demonstrates how Higher Order Components (HOCs) can make it easier to add extra features to lots of components in our React app. It’s like adding chocolate chips to cookies — instead of doing it one by one, we use a special method that does it automatically for all our cookies. So, whether we have just a couple of cookies or a whole bunch, the HOC does the work for us, making our code neater and simpler to manage.

Conclusion
In this guide to Higher Order Components (HOCs) in React, we’ve learned how they make building apps easier. HOCs are like special helpers that let us add extra features to lots of components without repeating ourselves. We saw how they help keep our code organized, by separating different tasks into smaller pieces. Using a simple example with cookies and chocolate chips, we understood how HOCs work: just like adding chocolate chips to cookies, we can use HOCs to automatically add functionality to our components. Whether we have a few components or many, HOCs do the hard work for us, making our code cleaner and simpler to manage.