DEV Community: Vidit Kushwaha

Published my first npm package: react-popupify!

Vidit Kushwaha — Wed, 03 Jul 2024 08:06:00 +0000

What is `react-popupify`?

React-Popupify is a simple and easy to use popup component library for Reactjs applications. It manages popups using a singleton pattern with a central popup manager instead relies on a global manager to handle popups.

JavaScript's default alert, confirm, and prompt dialogues have long served as a standard for simplicity. However, they suffer from several UI inconsistencies, especially when integrated into modern web applications with custom styling and user interfaces. These inconsistencies can lead to a jarring user experience, disrupting the overall aesthetic and feel of the application.

To address these issues, react-popupify come into place, a React library designed to provide consistent and customizable popup dialogs. With feature like controlled visibility and customizable behavior to support for transitions and focus management, the library addresses many common needs when working with popups and modals, ensuring a smooth and accessible user experience.

Key Features

Easy to Use: Simple API for quick integration.
Highly Customizable: Customizable transitions, styles, and behavior.
Custom Animations: Supports various animation types such as bounce, flip, zoom, and fade.
Auto-Close: Option to auto-close the popup after a specified duration.
Event Handlers: Callbacks for when the popup is entered and exited.
Esc Key and Outside Click: Configurable options to close the popup using the escape key or clicking outside.
Component-Based: Built with modern React principles and practices.

Installation

You can install react-popupify via npm:

npm install react-popupify

How It Works

Using react-popupify is straightforward. Here's a quick guide to get you started:

1 Adding CSS

import "react-popupify/dist/bundle.css";

2 Create Popup Components

  import React from 'react';
  import { Popup } from 'react-popupify';

  const CustomPopup = () => {

    return (
          <Popup
            popupId="customPopupId"
            animation="bounce"
            open={false}
            closeOnEscape={true}
            closeOnOutsideClick={true}
            closeButton={true}
        >
          Say Hello to React-Poupify !!
        </Popup>
    );
  }

export default CustomPopup

3 Import CustomPopup into to root of your project:

  import React from 'react';

  const App = () => {

    return (
    // importing custom popup to root of project
    <CustomProject />
    );
  }

  export default App

4 Display Popups

Use the showPopup instance to show popups:


  import React from 'react';

  import { showPopup } from 'react-popupify'

  const PopupButton= () => {

  const popup = () => showPopup('customPopupId', { open: true })

    return (
      <div>
        <button onClick={popup}>Show Popup!</button>
      </div>
    );
  }

export default PopupButton

Contributing

I welcome contributions to react-popupify. If you have ideas for new features, improvements, or bug fixes, feel free to open an issue or submit a pull request on GitHub.

Check out the GitHub repository for more details, and don't forget to ⭐ star the project if you like it!

Happy coding! 🚀

Git & GitHub Essentials: Understanding Version Control and Collaboration

Vidit Kushwaha — Thu, 23 May 2024 12:05:48 +0000

Version Control

Imagine Doctor Strange casting spells and constantly modifying reality (the code) to defeat a foe (a bug). Unlike the film's time loop, Strange (the developers) must keep track of the changes. That's a subtle way of introducing version control, so let's describe it as a system for tracking and managing changes to code or other collections of files. It enables many individuals to work on the same project without overwriting each other's modifications, and it includes a method for reverting to prior versions of the project if necessary.

There are some tools that provide version control.

Git: It’s distributed version control system that allows multiple people to work on a project at the same time without overwriting each other's changes. It is a popular choice among software developers.
Subversion (SVN): It’s a centralized version control system that keeps all the versioned files in a central repository. Often used for large-scale projects where centralized system is preferred.
Perforce: It’s a version control system that is designed for large-scale software development projects. It offers features such as atomic commits, branching and merging, and access control.

Google uses its own version control system called Piper, which is a centralized version control tool. Piper is a renowned version control tool that Google uses as a vast repository, distributed over around ten Google data centers.

There are several hosting platforms available for version control systems. Here are a few popular ones:

GitHub: GitHub is a web-based version control repository hosting service that is one of the most popular platforms for version control. It offers both public and private repositories, issue tracking, wikis, and collaboration features.
Bitbucket: Bitbucket is another web-based version control repository hosting service that is owned by Atlassian. It supports both Git and Mercurial version control systems.
GitLab: GitLab is a web-based DevOps lifecycle tool that provides a Git-repository manager. It offers features such as continuous integration, continuous deployment, and issue tracking.

Mostly we will be understanding version control system in term of git and GitHub.

Install Git

Here is official guide to install git to your operating system:

Official page: Git - Installing Git (git-scm.com)

GitHub Guide: https://github.com/git-guides/install-git

How to introduce version control into your project?

Introducing version control into your project, git as control system.

The git init command is used to initialize a new Git repository in your local system. It creates a hidden folder named .git in the current directory, which contains all the necessary metadata required for version control.

git init

Staging, Commits in Git

In Git, a commit is a snapshot of your project at a particular point in time. When you commit, you're creating a new version of your project that you can refer back to later.

To commit changes in Git, you first need to stage them. Staging is the process of selecting which changes you want to include in your next commit. When you stage changes, you're essentially creating a "staging area" where you can group together changes that you want to commit.

To stage changes in Git, you can use the git add command. For example, if you've made changes to a file called name.txt, you can stage those changes with the following command:

# adding all file to stage
    git add .

# adding invidual file to stage  
    git add name.txt

# adding photograph to album
    git commit -m "name.txt file added"

# remove from stage 
    git restore --staged name.txt

Branches in Git

In Git, a branch represents an independent line of development. It's essentially a movable pointer to a specific commit. When you create a new branch, Git creates a new pointer that moves independently of any other branches.

Here's an example of how to create a new branch in Git:

git branch <new-branch-name>

This creates a new branch with the specified name, but it doesn't switch to that branch yet. To switch to the new branch, you can use the git checkout command:

git checkout <new-branch-name>

To create and switch into new branch in same command:

git checkout -b <new-branch-name>

Once you've switched to the new branch, you can make changes and commit them just like you would on the master branch.

Here's an example of how to merge a branch back into the main branch:

git checkout main
git merge <branch-to-merge>

Here's an example of how to delete a branch in Git:

git branch -d <branch-to-delete>

This deletes the specified branch. However, if the branch has not been merged yet, Git will prevent you from deleting it. In that case, you can use the -D flag to force the deletion

git branch -D <branch-to-delete>

Git Workflow

A typical Git workflow involves several steps, including cloning a repository, making changes, staging those changes, committing them, and pushing them to a remote repository. Here's an example of what that might look like:

Clone a repository:

git clone https://github.com/user/repo.git

Create a branch

The main branch is usually called main. We want to work on another branch, so we can make a pull request and make changes safely. To get started, create a branch off of main. Typically naming convention for branch after a feature or fix.

For feature feat/<name-of-feature>

For fixing a bug fix/<name-of-fix>

Make changes to file (and make a commit)

Once you've created a branch and moved the HEAD pointer to it by "checking out" to that branch, you're ready to make changes in repository. Next, save your changes. You're ready to start the commit!

git add .
git commit -m "descriptive commit message"

Push your changes to the remote

So far commit is made locally, you're the only one that can see it. When you're ready to push your changes to the remote repository, you can use git push origin <branch-name>. This will push your changes to the remote repository, allowing others to see and use your changes.
origin is the default name for the remote repository from which you cloned your local repository. It is a short name to be used when reading and writing to that remote.

git push origin <branch-name>

You can change or remove remote repository using

# removing and re-adding remote:
git remote set-url origin git://<new-url-here>

#To remove remote use this:
git remote remove origin

Open a pull request

Pushing a branch, or new commits, to a remote repository is enough if a pull request already exists, but if it's the first time you're pushing that branch, you should open a new pull request. Pull request is a comparison of two branches that allows users to propose changes to a repository and request that those changes be merged into the main branch.

Merge into `main`

Once repository owner or team decide that the pull request looks good, they can merge it. By merging, you integrate the feature branch into the other branch (most typically the main branch).

If you choose not to merge the pull request, you can also close pull requests with unmerged changes

git checkout main
git merge <branch-to-merge>

Learning by doing

Learning by doing is the greatest way to learn anything.

LearnGitBranching :An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!

Conclusion

Overall, Git is a powerful version control system that allows you to track changes to your code over time, collaborate with others, and maintain a history of your code. By following a typical Git workflow, you can make the most of Git's features and ensure that your code is well-organized and easy to manage.

For additional articles, you can visit the blog.viditkushwaha.com.

Understanding of React Hooks - useEffect.

Vidit Kushwaha — Wed, 15 May 2024 05:11:31 +0000

What is useEffect hook?

According to the creator of react, Jordan Walke, it is introduced as way to manage side effects to functional React components. What are the side effects in functional react component? It mainly refers to the any changes that effect the program state, like modifying a variable, printing to the console, or making an API call, changing the DOM are few that considered side effects. In functional programing, minimizing side effects is important for writing predictable and maintainable code.

Syntax

useEffect is usually called at top level of your component. And required function to executed is passes as argument to useEffect, so every time component is re-render the useEffect is called.

Second argument is passed as array of dependencies. This array tells React to re-run the effect (the first argument function) whenever any of the values in this array change. In this case, the effect behaves like a combination of componentDidMount and componentDidUpdate from class components.

useEffect(() => {
        console.log('Hello World'!);
}, [])

The array of dependencies is empty then in that case the effect will only run once after the initial render of the component. else its re-runs whenever any of the values in the dependencies array change.

// Component.tsx

import { useEffect } from 'react';

export default function Component() { 

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);
//...
}

useEffect with CleanUp

As we know that useEffect hook in React allows you to perform side effects in your functional components. It can also return a cleanup function that runs when the component unmounts, as well as before re-running the effect due to changes in dependencies.

import React, { useEffect } from 'react';

function Component() {
  useEffect(() => {
    // This is the effect
    console.log('Component mounted');

    // This is the cleanup function
    return () => {
      console.log('Component unmounted');
    };
  }, []); // Empty dependencies array means the effect runs only once

  return <div>Hey, Lary</div>;
}

export default Component;

In this example, the console.log('Component mounted') line runs once when the component mounts. The cleanup function () => console.log('Component unmounted') runs when the component unmounts.

This is useful for handling any necessary cleanup for your effects, such as cancelling API requests, or removing event listeners.

Why is Cleanups required?

useEffect(() => {
  const timer = setInterval(() => {
    setTime(prevTime => prevTime - 1);
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

Cleanup is necessary in React to avoid memory leaks and unwanted behavior. When you use the useEffect hook to set up something, like an event listener or a timer, that setup is often persistent and won't automatically go away when the component unmounts. it's not tied to the lifecycle of the component. for example, if you start a timer with setInterval, the timer will continue to run and call its callback function at the specified interval, even if the component that started it has unmounted. The browser doesn't know that the component has unmounted and that it should stop the timer.

That concludes the fundamentals of useEffect. If you enjoyed the article, please share it with your friends and the community. I will put out content a further article about useContext soon.

For additional articles, you can visit the blog.viditkushwaha.

GitHub developer pack

Vidit Kushwaha — Fri, 15 Sep 2023 16:53:25 +0000

🚀 Exciting News for Student Developers! 🎓

Are you a budding developer looking to supercharge your skills and propel your career forward? Look no further! GitHub's Student Developer Pack is here to turbocharge your learning journey.

🌟 Frontend Master Course - Absolutely Free!
As part of this incredible pack, you gain access to Frontend Masters, the premier platform for mastering web development. Dive deep into the world of front-end engineering, learn from industry experts, and hone your skills in HTML, CSS, JavaScript, and more. It's a priceless opportunity to build a strong foundation in web development.

💼 Boost Your Portfolio
But that's not all! The Student Developer Pack offers a treasure trove of goodies. You'll get free access to a suite of tools and services that will help you shine in the developer world. From hosting your projects on GitHub Pages to crafting stunning portfolios with Canva, these resources will give your resume a significant boost.

👩‍💻 Cloud Credits and Developer Tools
As a student developer, you'll receive generous credits for cloud services like AWS, Azure, and DigitalOcean. Plus, you'll unlock access to essential developer tools, including JetBrains IDEs and Postman Pro. These resources will empower you to build, deploy, and test your projects with ease.

🌐 Domain Names and Learning Platforms
Need a cool domain name for your personal website? The pack's got you covered! You'll get free domain names through Namecheap, making your online presence truly professional. And for those eager to expand their knowledge, there are free courses on platforms like DataCamp and Educative.io.

📦 So Much More!
This pack is loaded with benefits, including free GitHub Pro access, exclusive discounts on tech gear, and even free access to the GitHub Campus Program. It's your gateway to a world of learning, networking, and career growth.

🚀 Don't miss out on this golden opportunity to turbocharge your developer journey. Grab your GitHub Student Developer Pack today and unlock a world of possibilities!

🔗 Get Your Student Developer Pack

Let's code, learn, and grow together! 🌟
written by- GPT-3.5

Introducing my New Portfolio!

Vidit Kushwaha — Tue, 20 Jun 2023 06:58:06 +0000

I'm thrilled to share that I've just launched my brand new portfolio website, built from scratch using Next.js, React, and Tailwind CSS! 🎉

🔗 Check it out here: viditkushwaha.live

This portfolio represents the culmination of countless hours of hard work, creativity, and a passion for web development. I've drawn inspiration from the incredible Brittany Chiang and incorporated some elements from her portfolio design.

Key Features of my Portfolio:

✅ Client-side rendering for fast and seamless user experience
✅ Utilizes the power of Next.js to optimize performance
✅ Stunning UI design created with Tailwind CSS
✅ Fully responsive layout for a seamless mobile experience
✅ Integrated Google Analytics for comprehensive website analytics

I have incorporated Google Analytics into my portfolio to gain valuable insights into user behavior, traffic sources, and engagement. This allows me to continuously refine and enhance the user experience.

In addition, I'm excited to share that in the future, I will be adding a Progressive Web App (PWA) to my portfolio. By implementing a service worker, I'll enable offline functionality, faster loading times, and an enhanced user experience.

I'd like to extend a special thanks to the open-source community for their incredible contributions. My portfolio is deployed on DigitalOcean, ensuring reliability and scalability.

🔗 GitHub Repo: Vidit-Kushwaha/v2.portfolio

Feel free to explore the codebase on GitHub and provide any feedback or suggestions. Your input is highly valued!

I'm excited to connect with professionals, recruiters, and fellow developers. Let's collaborate and create amazing projects together. Reach out to me for any opportunities or just to say hello!

You can also find me on social media platforms. Feel free to connect with me and stay updated on my latest projects and endeavors:

🔗 LinkedIn: Vidit Kushwaha

Feel free to connect with me on LinkedIn. I'm always open to networking and exploring new opportunities. Let's connect and grow together!

Thank you for your support and for checking out my new portfolio. I'm looking forward to connecting with all of you!