DEV Community: Arindam Chowdhury

Designing a Stunning Floating Blob in the Background: A Step-by-Step Guide

Arindam Chowdhury — Wed, 20 Sep 2023 12:43:49 +0000

Have you ever visited a website and been mesmerized by a beautifully designed background that seems to flow and morph like a floating blob?

If you're looking to add a touch of creativity and uniqueness to your web projects, you might want to consider incorporating a floating blob with gradient colors. In this tutorial, we'll guide you through the process of achieving this effect using HTML and CSS.

This is the result of what we'll be creating :

1️⃣ Create Blob

Begin by crafting an empty div with the class "blob."

Now, let's shape our blob. While SVG is a common choice, we'll opt for something simpler in this tutorial: border-radius.

border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;

But what's the '/' in `border-radius`?

Normally, we specify one value, like border-top-right-radius: 10px;. However, you can define both horizontal and vertical radii for any side. For instance, with border-top-right-radius: 10px 20px;, where 10px is the horizontal radii and 20px is the vertical one.

2️⃣ Style the Blob

Give your blob some life by adding background color, width, and height:

Use this tool to create beautiful CSS gradients.

.blob {
    ...
    background: linear-gradient(47deg, rgba(255,88,139,1) 21%,  rgb(0 164 173) 67%, rgba(118,74,166,1) 81%);
    width: 400px;
    height: 400px;
}

(Optional): Spice things up with more colors and shapes using box-shadow with inset:

.blob {
    ...
    box-shadow: inset 50px 50px 17px 0px #ff588b,
                inset 100px 100px 17px 0px #66319f;
}

Let's tone it down a notch. Apply some blur, reduce opacity, and push it to the background with a negative z-index:

.blob {
    ...
    opacity: 0.5;
    filter: blur(40px); 
    z-index: -1;
}

Animate the Blob 🕺🏿

Time to make it dance! Animate with translate, scale, and rotate. Don't forget to animate the border-radius too, so the blob keeps morphing. Use position: absolute for the blob and position: relative for the parent div.

.blob {
    ...
    animation: animate 20s cubic-bezier(0.68, -0.55, 0.27, 1.55) 
               infinite alternate forwards;
}

@keyframes animate {
  0% {
    transform: translate(40%, -25%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    transform: translate(0%, 13%);
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    transform: translate(-45%, 39%);
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}

🌟 Finishing Up 🌟

For the finishing touch, you can add your content on top of the blob to create a captivating final product.

And voila! You've got yourself a dynamic, eye-catching blob. Enjoy the creative process!

References:
Youtube video

A Step-by-Step Guide to Integrating Better-SQLite3 with Electron JS App Using Create-React-App

Arindam Chowdhury — Tue, 08 Aug 2023 18:46:26 +0000

Are you trying to build your own Electron JS application with React? Do you also want to store and manage data efficiently with SQLite? In this step-by-step guide, I will show you how to integrate Better-SQLite with your Electron JS app, using Create-React-App. This is what we will build.

1️⃣ Introduction

Before we jump into the technical stuff, let's quickly cover what we aim to achieve. Our goal is to integrate Better-SQLite3 (The fastest and simplest library for SQLite3 in Node.js.) into an Electron JS application built with Create-React-App. This will allow us to persist data in our user's system only.

2️⃣ Setup and Initialization

I hope you know how to set up Electron project with create-react-app. If you don't, you can follow this article to get started. (Sorry for being lazy 😛)

Now we need to initialize the database. To do this, we will create a new file first named demo_table.db. This will be the file that stores the database data. Then using DBeaver, we will create a table in this database called person.

Note: Tables and DB files can be created using better-sqlite3 as well. I did it this way to make the setup easier.

Next, you need to install better-sqlite3.
We also need to install electron-rebuild. This is required to run better-sqlite3 if you're facing any issues where the node versions don't match. This is taken from their docs:

This executable rebuilds native Node.js modules against the version of Node.js that your Electron project is using. This allows you to use native Node.js modules in Electron apps without your system version of Node.js matching exactly (which is often not the case, and sometimes not even possible).



npm install better-sqlite3
npm install --save-dev electron-rebuild

After the installation is completed, add this to your package.json



{   
    ...
    "scripts": {
        ...             
        "rebuild": "electron-rebuild -f -w better-sqlite3",
    }
}

And then do npm run rebuild to rebuild better-sqlite3 for your system.

3️⃣ Setting up DBManager.js

In public folder, we will create a folder called Database which will contain all the files related to the database. Let's create a DBManager.js file :



const Database = require("better-sqlite3")
const path = require("path")

const dbPath =
    process.env.NODE_ENV === "development"
        ? "./demo_table.db"
        : path.join(process.resourcesPath, "./demo_table.db")

const db = new Database(dbPath)
db.pragma("journal_mode = WAL")

exports.db = db

For production, the demo_table.db file will be kept in a folder called resources. We can get the path of this folder using process.resourcesPath.

The db file is an extra resource that we need to mention in our package.json, so that when the build happens, demo_table.db is moved to resources folder. This configuration is given for build done using electron-builder.



{
    "name": "electron-sqlite",
    ...
    "scripts": {
        ...     
        "package-windows": "rm -rf build && rm -rf dist && npm run build 
       && electron-builder -w -c.extraMetadata.main=build/electron.js",
    },
    "build": {
        "appId": "sqlite.electron-test.app",
        "productName": "SQLite Electron",
        "files": [
            "build/**/*",
            "node_modules/**/*",
            "public/**/*"
        ],
        "directories": {
            "buildResources": "public"
        },
        "extraResources": [
            "./demo_table.db"
        ]
    }
}

4️⃣ Create a Manager file to manage a Table instance

Let's create a file called PersonManager.js to invoke methods related to Person table.

We will create a method to read all the data from the Person table.

For inserting data, we will use a transaction. So that if an exception is thrown, the transaction will be rolled back (and the exception will propagate as usual).



const dbmgr = require("./dbManager")
const db = dbmgr.db

const readAllPerson = () => {
    try {
        const query = `SELECT * FROM person`
        const readQuery = db.prepare(query)
        const rowList = readQuery.all()
        return rowList
    } catch (err) {
        console.error(err)
        throw err
    }
}

const insertPerson = (name, age) => {
    try {
        const insertQuery = db.prepare(
            `INSERT INTO person (name, age) VALUES ('${name}' , ${age})`
        )

        const transaction = db.transaction(() => {
            const info = insertQuery.run()
            console.log(
                `Inserted ${info.changes} rows with last ID 
                 ${info.lastInsertRowid} into person`
            )
        })
        transaction()
    } catch (err) {
        console.error(err)
        throw err
    }
}

module.exports = {
    readAllPerson,
    insertPerson,
}

5️⃣ Creating a Bridge with Preload.js

In Electron, security is essential, so we use the contextBridge in Preload.js to expose our PersonManager functions to the renderer process securely. This prevents any unauthorized access and keeps our data safe.



const { contextBridge } = require("electron")
const personDB = require("./Database/PersonManager")

contextBridge.exposeInMainWorld("sqlite", {
  personDB,
})

6️⃣ Fetching/Inserting Data in React

Time to get React involved! In your React component, you can create a fetchData() function to fetch all the Person data from the database. You also don't have to import anything as well!



const fetchData = useCallback(() => {
    const data = window.sqlite.personDB?.readAllPerson()
    setData(data)
}, [])

To insert data, we can use the insertPerson( ) function defined above.



const name = e.target.name?.value
const age = e.target.age?.value
if (!name || !age) return

window.sqlite.personDB?.insertPerson(name, parseInt(age))
fetchData() // Fetch updated data, and set it to the UI

Possible Errors

If you're getting any errors in your console due to SQLite, check all the other errors that are being shown. Many a time, the other errors contain the exact information which you need to resolve the issue (talking from personal experience 😥).
Check whether Electron can read the DB file properly and whether the path to the DB file is proper or not.
Temporary files like demo_table.db-shm, demo_table.db-wal gets created when running the application. Sometimes, the creation of new files makes React refresh, and this turns into an infinite refresh of the page. To stop this, you have to disable hot-reload, using an ignore path. Or you can keep the db file outside of the root directory like I did for a private project.

Build and Final Touch

Now, you can add new persons from the UI, then refresh or even close the application. Next time when you open it, everything should be present there.

To build it for Windows, you can run npm run package-windows. dist folder will contain the executable file through which you can install it on any machine. It also generates a portable exe file, present inside win-unpacked which can be run without installation.

For Linux and Mac, you can add this to your scripts in package.json.



"package-mac": "rm -rf build && rm -rf dist && npm run build && 
   electron-builder build  -m -c.extraMetadata.main=build/electron.js ",
"package-linux": "rm -rf build && rm -rf dist && npm run build && 
   electron-builder -l -c.extraMetadata.main=build/electron.js"

P.S. I haven't tested for Linux and Mac, since I don't have one. If any changes are required, do let me know.

You can find the Github repo here.

Congratulations, you've made it to the end of this guide! Integrating Better-SQLite with your Electron JS app using Create-React-App might have seemed daunting at first, but you did it like a champ! You can now confidently store and manage data using SQLite in your Electron JS app.

References:

Achieve a Glow Effect in VS Code

Arindam Chowdhury — Sun, 18 Jun 2023 18:02:23 +0000

In this blog post, we will explore how we can achieve a captivating glowy effect in VSCode with the help of the Custom CSS and JS Loader extension. Let's dive into the step-by-step guide to create a unique and visually appealing coding environment!

1️⃣ Installing the Custom CSS and JS Loader Extension

To get started, we need to install the Custom CSS and JS Loader extension from the Visual Studio Code Marketplace. This powerful extension allows you to inject custom CSS and JS styles into your editor, giving you full control over the appearance of your coding environment.

2️⃣Enabling Custom CSS in VSCode

Once the extension is installed, open your VSCode and access your User Settings JSON by pressing Ctrl+Shift+P and selecting Open User Settings (JSON). In the JSON file, add the following code snippet to enable custom CSS:



"vscode_custom_css.imports": [
    "file:///C:/path-to/custom.css"
]

Note: Remember to replace "C:/path-to/custom.css" with the actual file path where you will store your custom CSS file. Refer to documentation, if settings have changed.

Windows File URL Example: file:///C:/Users/MyUserName/Documents/custom.css
- The C:/ part is REQUIRED.
MacOS and Linux File URL Example: file:///Users/MyUserName/Documents/custom.css

3️⃣Adding the Glowy Effect CSS

To achieve the captivating glowy effect, we can utilize an existing CSS file created by Robb Owen. Simply copy the content of the CSS file and paste it into your custom CSS file.

4️⃣ (Optional): Customizing the Glow Effect

I am using the Moonlight theme along with custom CSS.

If you want to take your customization further, here are some optional steps to consider :

⭕ Toggle developer mode in VSCode by pressing Ctrl+Shift+P and selecting Toggle Developer Tools. This allows you to inspect the elements of the files you have opened in your VS Code.

⭕ Identify the CSS class used for the specific element you want to modify. In most cases, it will fall within the range of .mtk1 to .mtk14.

⭕ Experiment with additional changes like changing the background image, using gradients, or adding images to your VSCode editor using CSS. You can find inspiration in this custom CSS file that includes the glowy effect.

5️⃣ Restarting and Activating Custom CSS in VSCode

Windows users

In Windows, make sure you run your Visual Studio Code in Administrator mode before enabling or disabling your custom style!

Mac and Linux users



sudo chown -R $(whoami) $(which code)
sudo chown -R $(whoami) /usr/share/code

In case of issues, do check the documentation.

Next, press Ctrl+Shift+P and activate the command Enable Custom CSS and JS from the command palette.

Final Result

Restart your VSCode editor, and witness the stunning glowy effect come to life! The unique and captivating style of your customized VSCode environment will make coding even more enjoyable and visually appealing.

CSS Grouping in VS Code with CSS Organizer: Streamline Your Workflow

Arindam Chowdhury — Fri, 09 Jun 2023 16:37:58 +0000

When working on CSS, it can be challenging to keep track of numerous properties within a single rule. It becomes even more complicated when dealing with complex styles that require many properties.

One popular method that some people use is organizing properties alphabetically. This approach involves arranging the properties in alphabetical order, making it easier to locate specific properties and identify conflicting ones. However, this method may not be suitable for everyone.

One alternative approach, which Kevin Powell recommends, involves grouping properties based on their functionality and importance. We can group the properties into different categories, such as display, positioning, box model, typography, manipulation, and miscellaneous.

Display:

* Property 1

* Property 2

Positioning:

* Property 1

* Property 2

Box Model:

* Property 1

* Property 2

Typography:

* Property 1

* Property 2

Manipulation:

* Property 1

* Property 2

Miscellaneous:

* Property 1

* Property 2

By grouping the properties this way, it becomes easier to locate and work with specific sets of properties. For example, if you need to modify the box model properties, you can quickly find them in the designated section. This approach reduces cognitive load and streamlines the development process.

How To Automate Grouping of CSS in Visual Studio?

Step 1: Install CSS Organizer

To begin, you need to install the CSS Organizer extension from the ucsoftware publisher.

Step 2: Change the settings of CssOrganizer

Once the extension is installed, open the VSCode settings by navigating to File > Preferences > Settings or using the shortcut Ctrl + , (comma). In the search bar of the Settings tab, type "CSS-organizer" to filter the options.

Inside the CSS Organizer settings, you can configure various options. For this automation, we'll go ahead with the following preferences:

Display Option: Nothing (to avoid any unnecessary visual clutter)
User Grouping File Use: Checked (to utilize the custom grouping file).

Step 3: Edit the grouping configuration (optional).

If you want to customize the way CSS properties are grouped, you can modify the grouping configuration. To do this, navigate to the user's extensions directory. The path is typically %USERPROFILE%\.vscode\extensions\. Look for a folder named ucsoftware.css-organizer-version (the version may vary), and open it. Inside the resources folder, you'll find a file named user-grouping.json. Open this file in a text editor and make the desired changes to the property orders or add/remove properties as needed. Save the file after making the modifications.

Step 4: Automatically call the extension's commands on save

To automate the grouping process when saving a CSS file, we'll define a keybinding that triggers the necessary commands. Press Ctrl + Shift + P to open the Command Palette, then type "Open Keyboard Shortcuts (JSON)" and select it. This will open the keybindings.json file, where you can define custom keybindings.

Inside the keybindings.json file, add the following object to the array:



[...
{
  "command": "runCommands",
  "key": "ctrl+shift+alt+s", // You can choose a different keybinding if desired
  "args": {
    "commands": [
      "editor.action.selectAll",      // Select all the code
      "css-organizer.grouped",        // Call the group command from Css Organizer
      "workbench.action.files.save",  // Save the file
      "cancelSelection"               // Cancel the whole selection
    ]
  },
  "when": "editorTextFocus"
}
]

Save the keybindings.json file after adding the object.

By following these steps, you have automated the process of grouping CSS in VSCode using the CSS Organizer extension. Now, whenever you save a CSS file, the extension will automatically group the CSS properties based on the defined configuration.

Remember, if you encounter any issues or want to explore more features of the Css Organizer extension, you can refer to the official documentation or the extension's GitHub repository for additional information.

Improving React Performance: Dealing with Input Lag

Arindam Chowdhury — Thu, 27 Apr 2023 21:56:35 +0000

Backstory

Hey there! So, I recently faced an issue in my React project that I want to share with you.

I had a parent component that contained two child components - Header and List. The Header component had a search input field, where the search value was stored in the parent component. On the other hand, the List component was responsible for displaying a list of 50 users' data at a time, with each user represented inside a card.

The search input field was used to filter the displayed list, but when I started typing in the search field, there was a noticeable delay in the words being typed. This was causing a bad user experience, and I knew I had to fix it.

At first, I thought that there might be some debounce method implemented somewhere, which was causing the delay. But upon further inspection, I didn't find any such method in the code. So, I tried moving the search input field to the Header component, which did resolve the lagging issue. However, I didn't want to shift the search state inside the header component, as it was better for it to remain in the parent component to be used to call an API to filter out the data.

After reading through some forums, I learned that the lag could be caused by the List component being re-rendered every time the parent component was re-rendered due to a state change. To confirm this, I used the React Profiler present in Chrome and observed that the ListItem component was getting re-rendered every time I typed something in the search field.

Resolution

Memoization in React

To fix this problem, I memoized the ListItem component using memo().

So, what is memoization? Memoization is a technique where the output of a function is cached based on its input. In the context of React, memoization refers to caching the result of a component's rendering based on its props. If the props of the component haven't changed, React will reuse the cached result instead of re-rendering the component.

Memoization is particularly useful when working with complex or expensive components that take a lot of time to render. By memoizing these components, you can significantly improve the performance of your application. It's important to note that memoization only works for functional components and not class components.

When we memoize a component using memo(), the component will only re-render if its props or state have changed. Memoization by default only works for props that are primitives. If the props passed to the component are functions or objects that are created inside the parent component, they will be recreated on every render, causing the memoization to be ineffective.

This is where the useCallback and useMemo hooks come in. These hooks can be used to memoize functions and objects that are used as props in a memoized component, so that they are only recreated if their dependencies change.

Now let's see how to memoize a React component in practice. React provides a built-in function called memo() that we can use to memoize a component. Here's an example:



import React, { memo, useCallback, useMemo } from 'react';

const ParentComponent= () => {
  const [query, setQuery] = useState('')

  const handleClick = useCallback((value) => {
    setQuery(value);
  }, []);

  const processedData = useMemo(() => {
    // some expensive computation using data
    return processedData;
  }, [query]);

  return <>
      <HeaderComponent />
      <BigListComponent handleClick={handleClick} 
       processedData={processedData} />
    </>
};

const HeaderComponent= (props) => {
  // render component
};

// Memoizes component
const BigListComponent = memo((props) => {
   // render component
});

Demo of React memo:

In summary, if you're facing a similar issue where there's a delay in updating the UI due to a large number of unnecessary re-renders, memoizing the components can be a useful solution. It's always a good practice to keep an eye on the performance of your React application using tools like React Profiler to identify and fix any performance-related issues.

P.S. You should also consider using React virtualization for big lists, to improve the performance.

Creating an Infinite Looping Image Carousel with CSS and JavaScript

Arindam Chowdhury — Thu, 06 Apr 2023 17:45:21 +0000

Creating a carousel with HTML, CSS, and JavaScript can be a fun and rewarding project for web developers. In this blog post, we'll explore the steps involved in creating a carousel and break it down into smaller tasks to make it easier to understand and implement.

This is what we will build

Pretty cool, huh?

Task 1: Creating a straight row with all the images lined horizontally centered

To start, we need a row of images that are horizontally centered. We can accomplish this by using CSS Flexbox. Here are the steps involved:

Create a section with the below styles, so that everything inside it is placed horizontally and vertically centered.

section{  
  height:100%;
  display:flex;  
  align-items:center;  
  justify-content:center;
}

Create a container div with the class carousel, which contains all the images. We will also make this a flex item, and give it a max-width (optional).
```
<section>
    <div class="carousel">
      
    </div>
</section>
```
Set the justify-content property of the container div to "center" to center all the images horizontally.

Set the gap property of the container div to add some space between the images.

.carousel {
  display: flex;
  max-width:1000px;
  gap:20px;      
}

Let's also add the transition to carousel, as we will need this for animating the slide effect. The class sliding-transition will be added and removed using Javascript.
```
.carousel.sliding-transition {
  transition: transform 0.5s ease-in-out;
}
```

Task 2: Adding the Images

We will be using images from the free website picsum.photos (The Lorem Ipsum for photos.)

Add <img> inside the carousel, and give them a class carousel-image

 <div class="carousel">
   <img src="https://picsum.photos/id/23/500" alt="Image 1" class='carousel-image'>
   <!-- Rest of the images in similar fashion -->
</div>

Add any CSS you want, for styling the images. I will just go ahead with some box-shadow. (P.S. If you're facing problems with setting the width of the images, try using flex-basis instead.)

.carousel-image {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
}

Task 3: Adding the background image with the blur and other effects

To make the carousel visually interesting, we can add a background image with a blur effect. We will place the currently selected image as the background image itself. Here's how to do it:

Create an <img /> element with the class bg-image.

<section>
  <img ... class='bg-image' />
    <div class="carousel">
     <!-- images here -->
    </div>    
</section>

Set the width and height of the image to 100% to make it fill the entire screen.
Add a blur effect using the CSS property filter and set it to blur(8px).

We will also put a position: absolute and inset:0 so that the image is placed behind the carousel. Added some other CSS which are for styling the image.

.bg-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform:scale(1.1);
  object-fit:cover;
}

Task 4: Designing the buttons for the left arrow and the right arrow

To allow users to navigate through the images, we need to create arrow buttons. Here's how to do it:

Create two buttons with the classes left-arrow and right-arrow, with arrow-button being common.
We need to position them absolute, and for that, we will need a div with position: relative.
Create a div with class carousel-container which will contain the carousel and the buttons.
```
.carousel-container {
  position: relative;
  overflow: hidden;
}
```

```xml
<section>
  <img ... class='bg-image' />
  <div class="carousel-container">
    <div class="carousel">
      <!-- images here -->
    </div>
    <button class="arrow-button left-arrow"></button>
    <button class="arrow-button right-arrow"></button>
  </div>
</section>
```

Set the top of the buttons to 50% and use the transform: translateY(-50%) property to vertically center them.
Give the buttons a circular shape using the border-radius property.

These are the CSS used to add some extra look and feel.

.arrow-button {
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  cursor: pointer;
  background: rgb(255, 255, 255, 0.3);
  width: 36px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1;
  -webkit-box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
}

We will use Unicode to create the arrows : ‹ and ›. Put them inside a span, with a width and height of 100%;

span {
  height: 100%;
  width: 100%;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

```xml
<button class="arrow-button left-arrow"><span>&#8249;</span></button>
<button class="arrow-button right-arrow"><span>&#8250;</span></button>
```

Task 4: Creating the JavaScript to change the current image.

Bear with me, we are almost done. Phew!

These are all the initializations:

const carousel = document.querySelector(".carousel");
const backgroundImage = document.querySelector(".bg-image");

const leftArrow = document.querySelector(".left-arrow");
const rightArrow = document.querySelector(".right-arrow");

let currentIndex = 0;
let prevIndex;
const images = document.querySelectorAll(".carousel-image");

const totalImages = Object.keys(images).length;

// const imageWidth = images[1].getBoundingClientRect().x;
const imageWidth = 520;

I am using a constant value of image width of 520 pixels, since there were some issues with Javascript loading late and calculating the width incorrectly in CodePen. I have commented the ideal approach for calculating width using getBoundingClientRect().

P.S. 520 Since <img> is 500 pixels wide and the flex box has a gap of 20px.

Here's the Pseudo Code for the Right Arrow :

1. When right arrow button is clicked, set prevIndex = currentIndex.
2. Set currentIndex = (currentIndex + 1) % totalImages
3. Now, to have the animation part, we will add the class `sliding-transition` to carousel.
4. Move the carousel to the left by the width of one image using `translateX(-imageWidth pixels)`.
5. Set the background image to the new current image.
6. After the transition is completed:
   1. Move the prevIndex image to the end of `carousel` DOM.
   2. Remove the class `sliding-transition` from carousel.
   3. Remove the transform property as well, since we re-ordered the DOM.

By removing the transition class, we ensure that the transition only occurs when we want it to and that we have full control over the carousel's movement.

rightArrow.addEventListener("click", () => {
  carousel.classList.add("sliding-transition");

  prevIndex = currentIndex;
  currentIndex = (currentIndex + 1) % totalImages;

  carousel.style.transform = `translateX(-${imageWidth}px)`;
  backgroundImage.src = images[currentIndex].src.slice(0, -3) + "1000";

  setTimeout(() => {
    carousel.appendChild(images[prevIndex]);
    carousel.classList.remove("sliding-transition");
    carousel.style.transform = "";
  }, 500);
});

Now, here is the Pseudo Code for the Left Arrow (a tad bit more complex than the Right Arrow) :

1. When left button is clicked, set prevIndex = currentIndex.
2. Set currentIndex = (currentIndex - 1 + totalImages) % totalImages
Why modulo?
In case currentIndex = 0, we need to do modulo, so as to implement the cyclical images.
3. Move the carousel to the left by the width of one image using `translateX(-imageWidth pixels)`.
4. Move the currentIndex image to the beginning of `carousel` DOM.
5. Now, to have the animation part, we will add the class `sliding-transition` to carousel.
6. Now make the carousel move to the right by width of one image (basically setting `translateX(0)`), or you can remove the transform property as well.
7. Set the background image to the new current image.
8. After the transition is completed, remove the class `sliding-transition` from carousel. (This can be done using timeout matching the animation's duration)

Here's the javascript code.

    leftArrow.addEventListener("click", () => {
      prevIndex = currentIndex;
      currentIndex = (currentIndex - 1 + totalImages) % totalImages;

      // Move Carousel to the left by one image, and insert the image at currentIndex at the beginning of carousel's DOM
      carousel.style.transform = `translateX(-${imageWidth}px)`;
      carousel.insertBefore(images[currentIndex], carousel.firstChild);

      // Now, let's start the transition effect, from -520 px to 0 px.
      setTimeout(() => {
        carousel.style.transform = "";
        carousel.classList.add("sliding-transition");

        // Changing the background Image
        backgroundImage.src = images[currentIndex].src.slice(0, -3) + "1000";
      }, 10);

      setTimeout(() => {
        // By removing the transition class, we ensure that the transition only occurs when we want it to and that we have full control over the carousel's movement.
        carousel.classList.remove("sliding-transition");
      }, 490);
    });

Here's the CodePen if you want to see the full code and mess around with it.

In conclusion, creating a carousel involves using HTML, CSS, and JavaScript to position and animate a series of images. By breaking down the process into smaller tasks, we can make it easier to understand and implement.

Automate Your Code Formatting with Prettier , Husky and Lint-Staged: A Complete Guide

Arindam Chowdhury — Fri, 24 Mar 2023 19:02:16 +0000

As developers, we all want our code to be consistent and easy to read. After all, we don't want to read badly formatted code written by others.

However, when working in a team or on a large project, maintaining consistent code formatting can be a challenge. That's where Prettier and Husky come in.

Prettier is a popular code formatter that automatically formats code according to a set of rules. Husky is a popular Git hook manager that makes it easier to manage and configure Git. One can run scripts automatically before each commit, allowing developers to ensure that code is properly formatted before it is committed to the repository.

In this post, we'll walk through the steps of setting up Prettier and Husky to ensure consistent code formatting in your projects.

Setting up Prettier

The first step is to install the Prettier package in your project.



npm install --save-dev prettier

Next, you'll need to create a configuration file for Prettier. This file should be named .prettierrc and should be located in the root directory of your project. Here's the one which I use mostly:



{
    "parser": "babel",
    "arrowParens": "avoid",
    "trailingComma": "es5",
    "singleQuote": true,
    "semi": false,
    "useTabs": true,
    "tabWidth": 2,
    "jsxSingleQuote": true
}

This configuration file specifies that Prettier sets options such as using Babel to parse the code, omitting parentheses when possible for arrow function parameters, using a trailing comma if allowed by the language, using single quotes for string literals and JSX attributes, omitting semicolons, using tabs for indentation, and setting the tab width to 2 spaces.

Setting Up Husky

Now that you've set up the Prettier configuration to format your code, it's time to set up Husky.

Step 1: Install Husky

First, you'll need to install Husky as a dev dependency in your project, as well as initialize it using husky-init.



npx husky-init && npm install

It will set up husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run npm test when you commit.

Step 2:

Configure Husky to run lint-staged before committing.
Open this file .husky/pre-commit. You can remove npm test, if it's not required.



#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged --allow-empty

--allow-empty: By default, when linter tasks undo all staged changes, lint-staged will exit with an error and abort the commit. Use this flag to allow creating empty git commits.

Lint-staged will automatically run against staged files, and then add modifications to the commit as long as there are no errors. No need to do git add . anymore. 😌

Now, let's add this configuration to package.json



"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,jsx}": [
        "npx prettier --config .prettierrc --write"
    ]
},

The line "*.{js,jsx}": ["npx prettier --config .prettierrc --write"] uses a glob pattern to select all .js and .jsx files and then applies the Prettier formatting command to update those files.

Testing

Now that you've set up Husky to run Prettier before each commit, you can test the setup by making changes to your code. Do git add . followed by git commit. Husky should automatically run lint-staged, which in turn will run Prettier before the commit is made, and you should see the changes reflected in the file.

References:

Step-by-Step Guide: Host a React App on Firebase using GitHub Actions and Secret Management

Arindam Chowdhury — Thu, 09 Mar 2023 19:40:58 +0000

Hello, React enthusiasts! In this blog post, we'll walk you through the steps to host your React app on Firebase using GitHub Actions. We'll even show you how to store environment variables in a super secret key on GitHub. Cool, huh? Let's get started!

Deploy your code to GitHub

First things first, we need to get your code up on GitHub. Here's what you need to do:

First, open GitHub in your browser, click on the "+" icon in the top right corner of the screen and select "New repository".
Give your repository a name and description, choose whether it will be public or private, and select any additional settings you want. Click "Create repository" to create your new repo.

In your system (Windows/ Mac/ Linux), open up a terminal or command prompt and change the directory to your local React project's directory.

git init 
git add . 
git commit -m "First Commit" 
git branch -M main 
git remote add origin $Your_Url 
git push -u origin main

Make sure to replace $Your_Url with the custom URL you'll get. You can see it in the picture below. Don't worry, it's easier than it sounds!

Initializing Firebase Hosting

Now that your code is on GitHub, it's time to set up Firebase Hosting. Here's what you need to do:

You'll need to install the Firebase CLI (command line interface) on your local machine. You can do this by running the command npm install -g firebase-tools in your terminal or command prompt.

Then follow the below steps:

firebase login
firebase init hosting
? Are you ready to proceed? (Y/n) Y
? What do you want to use as your public directory? (public) build

I used build for the public directory, since by default create-react-app deploys it to build folder.

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) Y
? Set up automatic builds and deploys with GitHub? (y/N) Y
? File build/index.html already exists. Overwrite? (y/N) N
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) arindam1997007/testing

You can get the GitHub repository by going to your repo. The URL will be in the format "https://github.com/user/repository", you can get the user/repository from there.

? Set up the workflow to run a build script before every deploy? (y/N) Y
? What script should be run before every deploy? (npm ci && npm run build)
? Set up automatic deployment to your site's live channel when a PR is merged? Y
? What is the name of the GitHub branch associated with your site's live channel? (master) main

Since the master branch of my repo is main while I was pushing the code to GitHub (git branch -M main), so I gave main in here.

Editing Workflow File

Navigate to your repository on GitHub and click on the "Actions" tab.
Click on the name of the workflow you want to edit. There should be two of them if you followed my steps, one for the pull request and one for the merge. If you're feeling indecisive, just pick one and let fate decide.
Click on the file name now, as shown below. And then click the Edit button to edit the file.

Now, add the env part as mentioned below

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - master
env:
  CI: false
  REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
  REACT_APP_STRIPE_API_KEY: ${{ secrets.REACT_APP_STRIPE_API_KEY }}
  REACT_APP_STAGING_BASE_URL: ${{ secrets.REACT_APP_STAGING_BASE_URL }}
  REACT_APP_ADMIN_EMAIL: ${{ secrets.REACT_APP_ADMIN_EMAIL }}
jobs:
  build_and_deploy:
   ...

Make sure to add CI: false, otherwise any warnings thrown by the build will be treated as errors for your React project. Don't let the warnings rain on your parade!
Once you have added all of the environment variables you need, click on the "Start Commit" button, followed by "Commit changes". Double the fun, double the commits!
Make the same changes, if you also have created a workflow for Pull Request.

That's it! Your yml file should now include all of the environment variables you added. Make sure to double-check that the syntax is correct before committing the changes, as errors in the YAML file could cause the workflow to fail.

Adding Action Secrets

(aka hiding your secrets like a spy)

So, you've got some secrets that you need to use in your workflow files, but you don't want to show them to the world. What do you do? You add them as Action Secrets! Here's how you can do it:

Navigate to your repository on GitHub and click on the "Settings" tab.
In the left-hand menu, go to Security -> Secrets and Variables -> Actions.
Click on the "New repository secret" button.
Enter a name for your secret in the "Name" field. Make sure, it matches the name you gave in the yml file ${{ secrets.REACT_APP_FIREBASE_API_KEY }}. Consistency is key!
Enter the value of your secret in the "Value" field.
Click the "Add" button to save the secret.

That's it! Your action secret is now added to your repository and can be accessed in your workflow files using the ${{ secrets.SECRET_NAME }} syntax. We have already done that, so no need to worry.

Testing Time!!

(aka showtime)

Push Your Code to GitHub To test whether your deployment is working, start by making any changes to your code on your local computer. Then commit and push your code to your GitHub repo.
After pushing your code to your repo, open your GitHub repo and go to the "Actions" tab. If nothing shows up, wait for some time and then refresh the page. You'll start seeing running progress. After it's completed successfully, deployment should be completed, and you can access it in the live app. If you get errors in the workflow runs, click on the workflow run to debug what caused the error.
You can get the URL of your live app by going to your Firebase console and clicking on "Hosting" from the left-hand menu. You should be able to see the URL now. Open it and check whether your project is successfully deployed or not. If it is, give yourself a pat on the back! You did it!

If you have any constructive criticism and feedback, to make this blog even better, I would love to hear them! So don't be shy, let me know what you're thinking!

Beginner's guide to data-attributes in CSS

Arindam Chowdhury — Thu, 02 Feb 2023 06:47:04 +0000

What are data-attributes?

They are custom HTML attributes, that you can use on any HTML elements. You just need to prefix those custom attributes with data-.

It's recommended not to make your own attributes, i.e., creating attributes which are not prefixed with data-.

Syntax

You can use anything after data-. And one HTML element can have multiple data attributes.

<div data-category='cars' data-type='luxury'> 
    Audi 
</div>
<div data-category='laptop'>
    Lenovo
</div>

Use Cases

Javascript

Suppose you want to add custom icons, based on the data-category.

You can access data-attributes via getAttribute(attribute-name)

const data = document.querySelectorAll("[data-category]");
data.forEach((item) => {
  console.log(item.getAttribute("data-category")) 
  // cars or laptop will be the output  
  // Add icons based on cars or laptop
})

You can also access them via dataset property.

If you console.log(item.dataset), you'll see all the data-attributes for that HTML element, in an object.

const data = document.querySelectorAll("[data-category]");
data.forEach((item) => {
  console.log(item.dataset.category) 
  // cars or laptop will be the output   
  // Add icons based on cars or laptop 
});

After adding the required Javascript, this is how it looks

CSS

Now, if we want to add custom designs to the elements, based on the data-attributes, we can select them in CSS using the attribute-selector.

[data-category="cars"] {
  background:  #feffd4 ;
}

After, adding the required CSS, this is how it looks