Firebase, a platform developed by Google, offers a simple and efficient way to add authentication to your app.

In this article, I’ll walk you through the steps to authenticate your app using Firebase. Whether you're working on a web or mobile application, Firebase provides a straightforward way to integrate various authentication methods.

By the end of this article, you'll have a fully functional authentication system that allows users to sign up, sign in, and manage their accounts securely.

Table of Contents

• Table of Contents

• Prerequisites

• Why Use Firebase for Authentication?

• Step 1: How to Set Up a Firebase Project

• Step 2: How to Install Firebase in Your Project

• Step 3: How to Initialize Firebase in Your App

• Step 4: How to Set Up Authentication Methods

• Authentication Method Using Google

• Step 5: How to Upload to GitHub

• Conclusion

Prerequisites

Before we begin, you need to have the following:

• A Google Account: Firebase is a Google product, and you need a Google account to access the Firebase Console and use Firebase services. If you don’t have a Google account, you can create one here.

Why Use Firebase for Authentication?

Firebase Authentication provides backend services and easy-to-use SDKs to authenticate users to your app. It supports various authentication methods, including:

• Email and password authentication

• Google, Facebook, Twitter, and GitHub Authentication

• Phone Number Authentication

• Anonymous Authentication

These features make Firebase an excellent choice for developers who want to implement secure and reliable authentication without dealing with the complexities of building a custom authentication system.

Let’s get started with the setup!

Step 1: How to Set Up a Firebase Project

Before using Firebase Authentication, you need to set up a Firebase project.

i. Create a Firebase Project

• Go to the Firebase Console.

• Click "Add Project" and follow the on-screen instructions to create a new project.

Once your project is created, you’ll be directed to the Firebase project dashboard.

ii. Add Your App to the Project

• In the Firebase console, click on the "Web" icon (</>) to add a web app to your Firebase project.

• Register your app with a nickname, and click "Register app."

• You will be provided with a Firebase SDK snippet (Software Development Kit), which you'll need to add to your app.

• 

Step 2: How to Install Firebase in Your Project

To start with Firebase Authentication, you'll first need to install Firebase in your project. Here's how you can do it:

• In your code editor, open the terminal for your project.

• Run the following command to install Firebase:

npm install firebase

This command will add Firebase to your project, allowing you to use its authentication and other features.

Step 3: How to Initialize Firebase in Your App

After installing Firebase, the next step is to initialize it in your project using the configuration snippet provided in the Firebase console, commonly referred to as the Firebase SDK snippet.

To set this up:

1. Create a folder named config in your project directory.

2. Inside the folder, create a file called firebase.js.

3. Paste the SDK snippet you obtained from the Firebase console into the firebase.js file.

Here’s what your project setup should look like:

This code initializes Firebase in your app, enabling you to utilize Firebase authentication and other services, such as Firebase storage, for managing your data.

Note: Ensure you generate your unique application key for your application to function correctly.

Step 4: How to Set Up Authentication Methods

Firebase supports multiple authentication methods, like using Google, Facebook, GitHub, and so on.

But let’s set up email and password authentication as an example:

• Go to "Authentication" in the left-hand menu in the Firebase console.

• Click on the "Sign-in method" tab.

• Enable "Email/Password" under the "Sign-in providers" section.

  

  Now that you've enabled email/password authentication, you can create a sign-up and a sign-in function in your app.

  Let’s create a working example of a sign-up function:

  • In your project, create a file named sign-up.jsx.

  • Import the function needed to create a user from Firebase. The function you'll use to create a user is createUserWithEmailAndPassword.

  • Before creating a user, make sure to import the auth instance that is initialized in firebase.js into the sign-up.jsx file.

    import { auth } from '../../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      // To create the user with email and password
      const handleUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (err) {
          console.error(err);
        }
      };

      // ... (rest of your SignUp component)
    };

In the return statement, I will use a form, so we need to import the useState() Hook to manage and track changes in the form's input fields.

    <div>
      <h2>Register your Account</h2>
      <form onSubmit={handleCreateUser}>
        <div>
          <label>Name</label>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="confirm_password" className={styles.label}>
            Confirm Password
          </label>
          <input
            type="password"
            id="confirm_password"
            name="confirm_password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>

        <div>
          <div>
            <input type="checkbox" id="terms" name="terms" className="mr-2" />
            <label htmlFor="terms">
              I agree to the <a href="#">Terms and Conditions</a>
            </label>
          </div>
        </div>

        <button type="submit">Register</button>
      </form>
    </div>

Putting all code together (Sign-up.jsx):

    import { useState } from 'react';
    import { auth } from '../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      const [name, setName] = useState('');
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');

      const handleCreateUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (error) {
          console.log(error);
        }
      };

      return (
        <div>
          <h2>Register your Account</h2>
          <form onSubmit={handleCreateUser}>
            <div>
              <label>Name</label>
              <input
                type='text'
                id='name'
                name='name'
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='email'>Email</label>
              <input
                type='email'
                id='email'
                name='email'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='password'>Password</label>
              <input
                type='password'
                id='password'
                name='password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='confirm_password'>
                Confirm Password
              </label>
              <input
                type='password'
                id='confirm_password'
                name='confirm_password'
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
            </div>

            <div>
              <div>
                <input
                  type='checkbox'
                  id='terms'
                  name='terms'
                  className='mr-2'
                />
                <label htmlFor='terms'>
                  I agree to the{' '}
                  <a href='#'>
                    Terms and Conditions
                  </a>
                </label>
              </div>
            </div>

            <button type='submit'>Register</button>
          </form>
        </div>
      );
    };

    export default SignUp;

Now that you've created the sign-up function, it's time to add a sign-in function so users can log into your app.

Here's how to create a simple sign-in function:

• In your project, create a new file named sign-in.jsx.

• Import the initialized auth instance from firebase.js into sign-in.jsx.

• Use the signInWithEmailAndPassword function from Firebase to allow users to sign in.

Here’s the structure for the sign-in function:

import { useState } from 'react';
import { auth } from '../../config/firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

const SignIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert('Signed in successfully');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h2>Sign In</h2>
      <form onSubmit={handleSignIn}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <button type="submit">Sign In</button>
      </form>
    </div>
  );
};

export default SignIn;

The visual display of the result from the code above both sign-up and sign-in

Authentication Method Using Google

As mentioned earlier, you can collect users' emails directly through a form before they use your app and other ways to authenticate the users.

To use Google authentication:

• In the Firebase console, navigate to "Authentication" in the left-hand menu.

• Click on the "Sign-in method" tab.

• Enable "Google" under the "Sign-in providers" section (for this tutorial, we'll stick with Google, though you can choose other providers).

Now that you've enabled Google authentication, you can create a Google sign-up and sign-in function for your app.

Let's go through how to set up a Google sign-up function:

• First, create a file named Google.jsx in your project.

• Import auth and GoogleAuthProvider from the firebase.js file

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';


const firebaseConfig = {
  apiKey: ....,
  authDomain: ....,
  projectId:.... ,
  storageBucket: .... ,
  messagingSenderId: .... ,
  appId: ....,
  measurementId: ....,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth= getAuth(app);
export const googleProvider = new GoogleAuthProvider(app);

• Initialize the Google provider and export it for use in other parts of your application.

import { auth, googleProvider } from './firebase';  // Adjust the path to your Firebase config file
import { signInWithPopup } from 'firebase/auth';

• Import the necessary Firebase function to authenticate a user. Use the signInWithPopup method to authenticate users with Google.

While there are other authentication methods available, signInWithPopup is preferable as it keeps users within the app, avoiding the need to open a new browser tab.

const signInWithGoogle = async () => {
  try {
    await signInWithPopup(auth, googleProvider);
    alert('Signed in successfully with Google');
  } catch (error) {
    console.error('Error signing in with Google', error);
  }
};

• In your return statement, create a button to trigger the Google sign-in.

return (
  <div>
    <button onClick={signInWithGoogle}>Sign in with Google</button>
  </div>
);

The visual display of the result from the code above:

Firebase allows you to sign users out of your application easily. Here's how you can implement a sign-out function:

• First, import the signOut function from Firebase.

• Once imported, you can call signOut to log the user out of the app.

Here’s a simple example:

import { auth } from './config/firebase'; // Adjust the path based on your file structure
import { signOut } from 'firebase/auth';

const handleSignOut = async () => {
  try {
    await signOut(auth);
    alert('User signed out successfully');
  } catch (error) {
    console.error('Error signing out:', error);
  }
};

With this function, users can easily log out of the app.

In the return statement, you'll typically have a button that triggers the handleSignOut function when clicked.

return (
  <div>
    <h2>Welcome to the app!</h2>
    <button onClick={handleSignOut}>Sign Out</button>
  </div>

The visual display of the result from the code above

Make sure your Firebase project is configured to handle authentication correctly, including Google sign-in, to ensure a smooth sign-in and sign-out experience.

Step 5: How to Upload to GitHub

Before pushing your project to GitHub, make sure to store your Firebase API key in an environment variable to keep it secure. This will prevent sensitive information from being exposed in your shared code.

Creating a .env file

• At the root of your application, create a .env file.

• Add your Firebase API key to the firebase.js file.

• Use import or process.env to access your Firebase API key. Since the app was created with Vite, I used import.

• Finally, update your .gitignore file to include the .env file. This step also protects other sensitive files and directories, like node_modules.

# Logs
logs
node_modules
.env

Conclusion

In conclusion, this guide explains how to integrate Firebase Authentication into your app. Firebase simplifies adding authentication features such as email/password and Google login.

By setting up a Firebase project, installing, and initializing it in your app, you can efficiently build secure user sign-up and sign-in functionalities without the need to start from scratch or set up a server.

If you found this article helpful, share it with others who may find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

The code I used for this tutorial article can be found on my GitHub.

Thank you for reading.

Wouldn't this look stunning on your blog or portfolio site?

To achieve this effect, we will use:

• HTML - to add the images and content
• CSS - to style the horizontal scroll container and image wrappers
• JavaScript - to initialize Lightbox for image popups

Sound good? Open up your code editor, and let's get started! We'll be working with 2 files:

index.html: Our HTML file with the scroll container and images
style.css: The CSS styles to position and transform the images on the scroll

Create these 2 files now so you're ready to follow along!

HTML Structure: Setting the Stage

First, we'll set up the basic HTML structure. This is the foundation upon which our parallax scrolling masterpiece will be built.

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

Let's first import our CSS and a few font families that we will use to style our fonts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300italic' rel='stylesheet' type='text/css'>
  <title>Parallax Scrolling</title>
</head>
<body>
  <!-- Content  -->
</body>
</html>

We will create a main container (<div class="external") for the parallax scrolling page. This container holds everything we see on the webpage. 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300italic' rel='stylesheet' type='text/css'>
  <title>Parallax Scrolling</title>
</head>
<body>
    <div class="external">
    <!-- All the cards will be  here -->
  </div>
</body>
</html>

Within the main container, we will create a<div class="horizontal-scroll-wrapper"> that will enable horizontal scrolling. This is where the magic of parallax scrolling happens. 👇

Now, Each image is placed inside a <div class="img-wrapper">. These image containers will move at different speeds, creating the parallax effect.

<body>
  <div class="external">
    <div class="horizontal-scroll-wrapper">
      <div class="img-wrapper" >  <!--  <-- Image Wrapper-->
        <!-- images will be here -->
      </div>
    </div>
  </div>
</body>

Now, within the "img-wrapper" we will use different classes like "slower", "faster", and "vertical" to control the speed and behavior of individual image containers.

<body>
  <div class="external">
    <div class="horizontal-scroll-wrapper">
      <div class="img-wrapper slower" >
        <!-- images will be here -->
      </div>

      <div class="img-wrapper faster">
        <!-- images will be here -->
      </div>
    </div>
  </div>
</body>

Let's delve into the details of why these different classes are used:

1. slower Class: This class is applied to the first image container. It signifies that this image will scroll slower horizontally compared to other images. It adds a parallax effect by creating a visual difference in the scroll speed between this image and the rest of the content.

2. faster Class: The second image container is assigned the "faster" class. This class suggests that this image will scroll faster horizontally. It moves ahead of the scrolling speed of the other content, enhancing the parallax scrolling effect.

3. vertical Class: The third image container combines both the "slower" and "vertical" classes. It indicates that this image will not only scroll slower but also in a slightly vertical direction. This creates a more complex and intriguing parallax effect, as it deviates from the purely horizontal movement of the other images.

You can add an image inside the image containers.👇

<div class="img-wrapper slower" >
  <a href="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" target="_blank"
     rel="noopener">
    <img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" alt="">
  </a>
</div>

Now, you can add more images inside all the img-wrapper containers.👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300italic' rel='stylesheet' type='text/css'>
  <title>Parallax Scrolling</title>
</head>
<body>
  <div class="external">
    <div class="horizontal-scroll-wrapper">
      <div class="img-wrapper slower" >
        <a href="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" target="_blank"
        rel="noopener">
        <img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" alt="">
      </a>
      </div>

      <div class="img-wrapper faster">
        <a href="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" target="_blank"
        rel="noopener">
        <img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_640.jpg" alt="">
      </a>
      </div>
<!-- add as many as you want -->

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

Now, our HTML part is almost over. We need to add this heading👇 [It's an optional thing]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300italic' rel='stylesheet' type='text/css'>
  <title>Parallax Scrolling</title>
</head>
<body>
    <div class="external">
    <div class="horizontal-scroll-wrapper">
    <!--image content -->
    </div>
    <p class="scroll-info" style="display: grid;">Scroll Down</p> <!-- Scroll down text-->
  </div>
</body>
</html>

• The Output will look like this

CSS Styles: Crafting the Parallax Magic

Let's delve into the CSS that transforms this HTML structure into a mesmerizing horizontal parallax scrolling experience. We'll break it down section by section.

Global Styles

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  font-family: Hepta Slab, sans-serif;
  font-weight: 500;
  background: #000000;
  color: #5D4037;
}

* {
  box-sizing: border-box;
}

/* Hide scrollbar */
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

Here, we set up some global styles. We define the entire web page's font family, background color, and text color. We also hide the scrollbar for a cleaner look.

Page Structure

.external {
  overflow: hidden;
  height: 100vh;
}

.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
  transform: rotate(-90deg) translate3d(0, -100vh, 0); /* creates the horizontal scrolling effect */
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 100vw;
  perspective: 1px;
  transform-style: preserve-3d;
  padding-bottom: 10rem;
}

These styles set up the main structure of our horizontal scrolling page. We hide overflow, adjust dimensions, and use CSS transforms to create the horizontal scrolling effect.

Image Containers and Animation

.img-wrapper {
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
  transition: 1s;
}

.img-wrapper:hover {
  min-height: 65vh;
}

.slower {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}

.slower1 {
  transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}

.slower2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
}

.slower-down {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
}

/* You can adjust these styles according to your own choice */
/* You can add more classes here. Like I did below */👇

.faster {
  transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);
}

.faster1 {
  transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
}

.fastest {
  transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}

.vertical {
  transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%);
}

.last {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}

In this section, we define the styles for image containers. Each image container has animation properties, creating the parallax effect as you scroll.

After all these styles, it will look like this 👇

Image Styles

.img-wrapper a {
  overflow: hidden;
  display: block;
  padding: 2px;
  background: #efecdb;
  box-shadow: 0px 12px 50px #5f2f1182;
  border-radius: 15px;
}

img {
  max-width: 45vh;
  max-height: 50vh;
  transition: .5s;
  vertical-align: top;
  border-radius: 15px;
}

a:hover img {
  filter: none;
}

Finally, we define styles for images and their behavior on hover, ensuring they fit seamlessly into our parallax scrolling experience.

Style Title

At last, you can add styling to this title. 👇

.scroll-info,
header {
  position: absolute;
  left: 1rem;
}

header {
  bottom: 1rem;
}

.scroll-info {
  top: 1rem;
  font-family: 'Raleway';
  font-weight: 800;
  font-size: 3rem;
  color: white;
}

a {
  color: inherit;
  font-weight: 500;

}

h1 {
  font-weight: 300;
  font-size: 1rem;
}

Enhancing Your Gallery with Lightbox2

Now, let's enhance our image gallery using Lightbox2. This JavaScript library creates beautiful galleries, providing users with a seamless viewing experience. Here's how to integrate Lightbox2 into your project:

Step 1: Include jQuery and Lightbox2 Libraries

Lightbox2 relies on jQuery, so make sure to include both jQuery and Lightbox2 libraries in your HTML:

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Lightbox2 JavaScript (after jQuery) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<!-- Include Lightbox2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">

Here's why we used each of these:

• jQuery: Lightbox2 relies on jQuery for certain functionalities. jQuery simplifies JavaScript tasks, making it easier to work with the Document Object Model (DOM) and handle events.

• Lightbox2 JavaScript: This script is the core of Lightbox2, providing the functionality for creating the lightbox effect.

• Lightbox2 CSS: The included CSS file styles the lightbox components, such as the overlay, close button, and image display, to ensure a visually appealing presentation.

Step 2: Configure Lightbox Options

Once you've included the necessary libraries, it's time to configure Lightbox2's options to customize the behavior and appearance of your Lightbox gallery:

<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true
    });
</script>

Here's what each option does:

• 'resizeDuration': This option controls the duration (in milliseconds) of the image resizing animation when a user clicks on an image to open it in the lightbox. A value of 200 milliseconds provides a smooth and visually pleasing transition.

• 'wrapAround': When set to true, this option allows us to loop through images in our gallery. When we reach the last image and click 'next,' we'll go back to the first image, creating a seamless loop. This feature improves user navigation through multiple images.

Step 3: Enhance Image Links for Lightbox2

To make Lightbox2 work seamlessly, ensure that the href attribute of your image links matches the src attribute of the corresponding images. Additionally, include data-lightbox and data-title attributes in your links. These attributes tell Lightbox2 what image to display and provide a title for it. Here's an example:

<div class="img-wrapper slower">
  <a href="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_640.jpg" target="_blank"
    rel="noopener" data-lightbox="my-image" data-title="Beautiful Flower Field">
    <img src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_640.jpg" alt="Flower Field">
  </a>
</div>

In this example, the href and src attributes have the same URL, ensuring Lightbox2 displays the correct image. The data-lightbox attribute with the value "my-image" identifies this image for Lightbox2, and the data-title attribute provides a title for the image.

Now, the complete gallery will look like this👇

Wrapping Up

And with that, we've built a fully functional horizontal parallax image slider using HTML, CSS, and JS!

Thanks for reading it. I hope it was insightful. All the source code used in this article is in my GitHub repository.

Follow ReactPlay blogs and read more interesting and insightful content.

If you liked the article, please post likes 👍, give it a ⭐, and share it in your circles.

Let's connect. I share content related to web development, technical writing, and Open Source.👇

• Twitter

• Showwcase

• LinkedIn

Thanks for reading 😊

I stumbled upon fontsource.org the other day and I found the idea of installing fonts from npm packages appealing.

At first, I used it in my personal site built with Astro. The process was incredibly simple. You just have to import fonts in your base layout file and that's it. You are ready to use it in your CSS!

npm i @fontsource/poppins @fontsource/nunito

import "@fontsource/poppins";
import "@fontsource/nunito/400.css";

I thought what if I could use this in my 11ty blog too. The next immediate thing which came to mind was to use 'vite' because it can bundle those fonts for me just like Astro.

I decided to use slinkity. You can call slinkity as an extension for 11ty projects. It adds more features to the table by post-processing your 11ty build output.

Slinkity uses vite for bundling which is great, but it became a problem for me. I have a relatively old and large project with some custom configurations which came in the way of how vite does things, so migrating to vite resulted in a mess. The migration needs more time. I decided to take another approach which might be not so good.

Using Rollup

Rollup is a javascript bundler you can use to bundle your modules.

npm install rollup --save-dev

I created a rollup config file, named rollup.config.mjs at the root of the project.

export default [
    {
        input: "src/js/combine.js",
        output: {
            file: "src/js/minified/index.bundle.js",
            sourcemap: false,
        }
    }
];

The idea is to import the fonts just like I did in astro, in a javascript file and then extract css from it in order to copy it in the styles folder.

Inside the combine.js file, I imported some fonts.

import "@fontsource/nunito";
import "@fontsource/poppins";

To extract css, I used the postcss rollup plugin and the rollup copy plugin to copy the generated css file to the desired directory. I had to use rollup-plugin-copy because of this issue.

Installed the following dependencies:

npm i rollup-plugin-postcss rollup-plugin-copy @rollup/plugin-node-resolve --save-dev

The postcss plugin will extract the styles from the javascript file into a new CSS file.

import { nodeResolve } from "@rollup/plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
export default [
    {
        input: "src/js/combine.js",
        output: {
            file: "src/js/minified/index.bundle.js",
            sourcemap: false,
        }
        plugins: [
            nodeResolve(),
            postcss({
                extract: true, // no way to move output to another folder https://github.com/egoist/rollup-plugin-postcss/issues/250
                minimize: true,
            })
        ],
    }
];

The next step is to move the CSS file to the desired location because the extracted CSS file will be in the same directory as of the javascript file and you can't specify a location outside the parent folder due to a bug in the postcss plugin.

import { nodeResolve } from "@rollup/plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import copy from "rollup-plugin-copy";
export default [
    {
        input: "src/js/combine.js",
        output: {
            file: "src/js/minified/index.bundle.js",
            sourcemap: false,
        }
        plugins: [
            nodeResolve(),
            postcss({
                extract: true, // no way to move output to another folder https://github.com/egoist/rollup-plugin-postcss/issues/250
                minimize: true,
            }),
            copy({
                targets: [
                    {
                        src: "src/js/minified/index.bundle.css",
                        dest: "src/styles/minified",
                        rename: "fonts.bundle.css",
                    },
                ],
                verbose: true,
                hook: "writeBundle",
            })
        ],
    }
];

I am running the copy plugin after all the bundles are written and that's why you see the hook: "writeBundle" build hook specified for the copy plugin.

Run rollup using this command:

npx rollup --bundleConfigAsCjs -c

The font CSS is ready to use, right? No. There is still one problem.

This is how the generated CSS looks:

@font-face{font-display:swap;font-family:Nunito;font-style:normal;font-weight:400;src:url(files/nunito-cyrillic-ext-400-normal.woff2) format("woff2"),url(files/nunito-all-400-normal.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:Nunito;font-style:normal;font-weight:400;src:url(files/nunito-cyrillic-400-normal.woff2) format("woff2"),url(files/nunito-all-400-normal.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}

If you look closely at the src url, you will find that the files which the url is referring to are not present in our directory. Yes, the actual font files.

I used addPassthroughCopy() in 11ty to copy the required font files from node_modules to the output directory as per the url specified in the font stylesheet.

eleventyConfig.addPassthroughCopy({'./node_modules/@fontsource/poppins/files/*.woff2': 'styles/files'})

Copy the required files to the output folder and the fonts are ready to be used.

font-family: "Poppins", "Nunito", sans-serif;

Conclusion

Is this a good solution? I don't know. For me, it's more of a hack than a solution and I think there's a better way. Maybe, all we need is an 11ty plugin :)

This post was originally published in Syntackle.

Yes, you are right. We are talking about Hacktoberfest! In this blog, we want to cover various ways you can participate in Hacktoberfest through the ReactPlay community.

What is Hacktoberfest?

Simply put, Hacktoberfest is an ode to open-source. It's a month-long event dedicated to everything open-source. The developer community celebrates open-source projects, its maintainers, and contributors and organizes various events and activities. The main purpose of Hacktoberfest is to embrace open-source projects and their maintainers, encourage new open-source contributors to participate, and foster collaboration, growth, and innovation in the developer community.

DigitalOcean and its partners organize Hacktoberfest every year in October. This year, DigitalOcean is organizing Hacktoberfest with ILLA Cloud and Appwrite. And this year, it's special. Why you ask? 2023 is the 10th anniversary of Hacktoberfest! For the last decade, DigitalOcean and its partners have been embracing open-source, and introducing it to more and more developers!

We wrote a blog last year that explains everything about Hacktoberfest in detail. If you are still curious, make sure you give it a read.

Hacktoberfest x ReactPlay

As an open-source community, we LOVE Hacktoberfest. We met so many amazing contributors through Hacktoberfest, that we could reach new heights and achieve great milestones because. Last year, we conducted our first edition of Hack-R-Play in Hacktoberfest.

We are (of course!) participating in Hacktoberfest 2023 as well. And this year, to make its 10th anniversary special, we have super-duper plans. In Hacktoberfest 2023, ReactPlay will also accept low-code and no-code participation as valid Hacktoberfest participation.

Our last year's blog dives deep into ReactPlay's Hacktoberfest participation and the different types of contributions we support.

In this blog, we want to cover every possible domain in which you can contribute to the ReactPlay community at Hacktoberfest.

How developers can participate in Hacktoberfest?

There are multiple ways to contribute to ReactPlay if you are a developer. We have a whole bunch of issues ready for you in two of our GitHub repositories. Here are four ways you can do so:

• Create a new play: The easiest way to contribute is to create a new play. This guide will help you create your first play on ReactPlay.

• Resolve a bug: You can check the opened issues in both repositories and search for bugs you can resolve. Alternatively, if you find any unnoticed bug, feel free to resolve it too.

• Add a feature: Similar to the last one, if you come across any feature request in opened issues, or have a new feature that you want to implement by yourself, you can do that as well.

• Enhance the existing codebase: Also, you can improve the existing project by working on existing modules that need an update.

Open issues in react-play

Open issues in docs

How writes can participate in Hacktoberfest?

If you are a writer you can contribute in two ways: blogs or documentation. ReactPlay blog is an initiative to encourage developers to get better at technical writing. You can write a blog about the web, open-source, technology, your experiences, and anything you want to share with the world. If you are not a skilled technical writer and still want to give it a shot, we can help you to get better by proofreading and editing your blog.

For the period of Hacktoberfest 2023, the blog you contribute with must be original, and should not have been published anywhere, including your personal blog.

The second way is documentation. You can write documentation on various areas related to ReactPlay. Feel free to check out opened issues or join the dedicated docs channel to get a better understanding of this.

How public speakers can participate in Hacktoberfest?

Public speaking is not everyone's cup of tea! It's amazing that you are into public speaking, or at least want to get into it. Don't worry, we have something for you...

Host an event

If you are a college student part of a college community, a BootCamp or course attendee, or active in any online or in-person communities, you can host an event. The event can be either in-person or online, that's totally up to you. The event can educate others about open-source and web dev through ReactPlay.

Organize a workshop/seminar

If you want to go one step further and get your (and attendees') hands dirty, you can organize a workshop as well. Just like the event, the workshop can be either online or in-person. The workshop can dive deep into open-source, web dev technologies and provide hands-on practical learnings to attendees. You can use ReactPlay as a tool to teach others how things work.

Nominate yourself for Open Mic

Open Mic is our initiative that brings out the inner public speaker of you. We host Open Mic on Fridays where you can talk about technical things you are good at. It's okay if you haven't given a talk or are afraid to do so. All you need is a good topic that you are interested in talking about, and a little courage to speak to the camera. Everything else will come on its own!

We have successfully hosted four Open Mic sessions until now. If you want to give a talk, you can nominate yourself in the following form:

Give a talk

Last but not least, if you are into public speaking, you can give a talk. The talk can be at a conference, seminar, workshop, event, online event, community meetup, or even Twitter (X) spaces as well. The talk can be about anything regarding open-source, web dev, and mention ReactPlay to some extent.

Publish a podcast

If you host a podcast or know someone who hosts podcasts and is interested in participating in Hacktoberfest, you can collaborate to record a podcast session. You can invite someone from the ReactPlay community as well. We would love to be a part of that.

A few things to remember

There are plenty of opportunities for you to participate in Hacktobefest whether or not you are a developer. However, there are some things that you must remember before contributing to any open-source project like ReactPlay during Hacktoberfest.

• It's okay if you are a beginner, have little experience, or have no experience at all. Hacktoberfest is about embracing open-source and not about proving your skills.

• Follow the rules, regulations, and guidelines of the community you are contributing to. In most cases, you can easily find them in community servers or landing pages. Don't hesitate to ping community managers if you don't find them.

• Open-source is not just limited to Hacktoberfest. You can contribute to open-source projects, use them in day-to-day life, support maintainers, and do many more things to celebrate open-source in the other 11 months as well.

Last and the most important,

Hacktoberfest is about embracing open-source, not about rewards you get.

What next?

We hope you have an idea of several ways you can contribute to the ReactPlay. If you still have any doubts, need any clarification, or want any help, leave a DM on Twitter (X) or ask in our community.

Stay connected with the community by...

Joining our community

Following on Twitter (X)

Subscribing to the newsletter

We also know you are as excited as we are, so let's get straight to the point...

Announcing Hack-R-Play 2.0 🚀

Hack-R-Play 2.0 is an online, open-source, React.js hackathon organized by the ReactPlay community between the 28th of July and the 11th of August.

Whether you are a seasoned hacker or just getting started, we welcome you both. It doesn't matter how many projects you have built or how many hackathons you have participated in. You can join if you want to become part of something exciting and showcase your ideas.

You can either be a lone wolf and participate alone or partner up with someone. We allow a maximum of two participants in the team. If you don't have a partner but want someone on your team, please check our community to see if anybody is interested.

Register now at hustles.reactplay.io

Registrations are open now! Here's how you can register your idea:

1. Go to https://hustles.reactplay.io/

2. Authenticate with your GitHub account

3. Enter your idea and explain it in brief

4. If you are partnering up with someone, mention their name or GitHub username. If you are participating alone, keep this blank.

5. Submit your idea by clicking Register now.

Hackathon timeline ⌚

Here are the important dates you should not miss:

• Registration and Ideation: 21st to 27th July

• Hacking: 28th July to 11th August

• Demo Day: 13th August

• Results: 15th August

If the schedule changes for any reason, we will inform you on Twitter and Discord. So make sure you are part of both!

What to build 👩‍💻

We are not limiting your imagination and creativity in this hackathon. You can build anything that you want, literally anything!

Whether you are someone who works with the web or develops apps for mobiles, or someone who is creating CLI tools or building CLI applications. It doesn't matter. You can build anything. There is no restriction on what library, framework, or programming language you are using. The project should be yours.

The project should be open-source. Meaning you need to make its codebase public so anyone can read it. You need to share a GitHub or GitLab link while submitting your project.

Side activities ✨

Hackathon is not just about building projects; it's also about meeting new folks, learning new things, and having fun. We will have several activities along with hackathons.

1. Sessions by experts and mentors: You can learn from industry-leading working professionals and grow further in your career. We will also conduct mentoring sessions where you can clear doubts or clarify further directions regarding the hackathon.

2. Quizzes and challenges: We will also conduct various quizzes and challenges throughout the hackathon. This will not only create a friendly competitive environment within the community but also give you a chance to test your skill set.

3. Giveaways: Who doesn't love goodies and swags? We will have giveaways multiple times during the hackathon.

4. Checkpoints: We know it's difficult to manage your college, work, home, and hackathons altogether. Hence we will have regular check-ins to keep you motivated and on track.

Sound exciting enough? Join our community now to participate in these activities. We will have more activities in the future that you don't want to miss.

Judging criteria 🥋

The hackathon is open to everyone with any experience. Hence we are focusing less on the actual product and more on the implementation and demo. Whether you have built a to-do app or your next Facebook, you will be judged like others. Similarly, even if your final product is not built, you can still submit a demo and pitch your project.

Here are the four judging criteria we will consider while selecting projects:

1. Idea: Building an innovative or creative project is a big plus. We don't expect a unique idea, but you must add unique flavor to your project.

2. UI/UX: The project should be user-friendly. It must have a visually appealing design and work on devices of different screen sizes.

3. Using Bugfender SDK/Library: If the platform you are building on is supported by Bigfender, you must use it in your project. Check available platforms.

4. Demo: How you pitch your project on Demo day also plays an important role. Make sure your presentation, demo URLs, and project are working fine.

5. Content: Finally, the content you will create based on your project will also be considered while judging your project.

Prizes and rewards 🏆

We will select three projects that stand out from the rest. The winners will get exciting cash prizes 💰

1. 🥇 First winner: $500 USD

2. 🥈 Second winner: $300 USD

3. 🥉 Third winner: $200 USD

Also, two noteworthy projects who could not make it into the top three yet are mentionable will be rewarded with $100 USD each!

Everyone else who participated but could not get shortlisted will receive badges and certificates for participation.

Please note that if you participated as a group, the prize money will be divided equally. Similarly, badges and certificates will be given to individual members.

Sponsors 🤗

We are thankful to our sponsor Bugfender for sponsoring this hackathon.

Bugfender is a log storage service for developers. It collects everything happening in the application, even if it doesn't crash, in order to reproduce and resolve bugs more effectively and provide better customer support. It is built of native Android and iOS, hybrid mobile platforms, as well as for the web.

You can get started with Bugfender from here

Become a sponsor

If you want to sponsor Hack-R-Play 2.0 or any ReactPlay activity we conduct in the future, we are always open to collaborations!

If you want to sponsor ReactPlay events, please fill out this form

Reach out to us at contact@reactplay.io or send a DM on Twitter if you have any queries

Fast Answer and Questions 🔍

Here are answers to the most common questions participants have:

I am just getting started, can I participate?

Absolutely yes! We encourage you to participate in this hackathon, especially if you are just getting started with software development. You will surely learn a lot about developing, deploying, and showcasing your project ideas in a competitive way.

I don't have a project idea, can I participate?

We appreciate your efforts! However, we don't expect a unique project idea or complex problem statement for the hackathon. Pick anything that you are interested in, which lies in your domain, and start building it. Feel free to take help from the internet, ChatGPT, and GitHub to find new ideas.

Don't steal code, though.

Is using bugfender necessary?

Yes. If the platform you are working on (web, Android, iOS, etc) is supported by bugfender, you must use it in your project. Bugfender has provided a list of all platforms it currently supports.

Platforms supported by bugfender

Closing notes 🌈

Are you ready to unleash your coding skills and compete for amazing prizes?

ReactPlay is back with its most anticipated event of the year: Hack-R-Play 2.0. Whether you're a seasoned hacker or new to hackathons, this is the perfect opportunity to showcase your talent and learn something new.

Register now at hustles.reactplay.io

Don't miss out on this incredible opportunity to be a part of the Hack-R-Play 2.0 hackathon! Expand your network, learn from experts, and compete for amazing prizes. Register now and get ready to code your way to success.

We will explore how to implement these powerful techniques in Next.js, a popular framework for building React applications. Get ready to uncover the secrets of lazy loading and code splitting as we delve into their concepts, understand their benefits, and learn how to apply them in our Next.js projects.

Let's get started 🚀

What is Lazy Loading?

Lazy loading is a technique that defers the loading of non-critical or less frequently used components or assets until they are needed. By lazy loading these resources, we can reduce the initial bundle size and improve the initial load time of our application.

What is Code Splitting?

Code splitting is the process of breaking down our application's JavaScript bundle into smaller, more manageable chunks. Instead of loading the entire JavaScript bundle, code splitting allows us to load only the necessary parts of our application when required, reducing the initial load time.

Implementing Lazy Loading and Code Splitting in Next.js

Next.js provides built-in support for lazy loading and code splitting, making it easy to optimize our applications. Let's explore the steps involved:

Installing Dependencies

First, make sure you have Next.js installed in your project. If not, you can install it by running the following command:

npm install next

Lazy Loading Components

Lazy loading components in Next.js is a powerful technique that allows us to load components only when needed. To achieve this, we can use the dynamic import syntax provided by Next.js. Let's break it down with a more relatable example:

import dynamic from 'next/dynamic';

// Lazy load the ImageGallery component
const ImageGallery = dynamic(() => import('../components/ImageGallery'));

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <ImageGallery />
    </div>
  );
}

export default HomePage;

In the above code snippet, we import the dynamic function from Next.js. This function enables us to lazily load the ImageGallery component, which is stored in the ../components/ImageGallery file. The dynamic import statement ensures that the component is loaded only w rendered on the page.

Advanced Usage: Loading Indicator

When implementing lazy loading, it's a best practice to provide a loading indicator or fallback content to enhance the user experience. Next.js simplifies this process by offering a loading property. Let's take a look at an example:

const ImageGallery = dynamic(() => import('../components/ImageGallery'), {
  loading: () => <p>Loading...</p>,
});

Here we pass a loading function to the dynamic import statement. This function will be executed while the ImageGallery component is being loaded. Within the loading function, we can render a loading indicator or any other content we want to display during the loading process. In this case, we render a simple paragraph that says "Loading..." until the component is fully loaded.

By incorporating lazy loading with a loading indicator, we can ensure a smoother user experience by letting users know that content is being loaded in the background. This prevents them from encountering long loading times without any visual feedback.

Lazy loading components and adding loading indicators are valuable techniques that can significantly improve the performance and user experience of our Next.js applications. By loading components only when necessary and providing visual feedback during the loading process, we can create snappy and responsive websites that keep users engaged.

Code Splitting Routes

Next.js empowers us to split our routes, allowing more control over our application's bundle size. We can achieve this by leveraging the next/dynamic import syntax in conjunction with the Link component from Next.js. Let's explore a simplified example:

import dynamic from 'next/dynamic';
import Link from 'next/link';

// Lazy load the About page component
const About = dynamic(() => import('../pages/about'));

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>

      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

export default HomePage;

In the above code snippet, we use the dynamic function to load the page component lazily. By wrapping the import('../pages/about') statement inside the dynamic function, we ensure that the component is loaded only when the user navigates to the About page.

Advanced Usage: Preloading

To further optimize the user experience, Next.js preload the code for a specific route. This reduces the loading time when the user navigates to that page. Let's take a look at an example:

<Link href="/about" prefetch>
  <a>About</a>
</Link>

In this example, we add the prefetch attribute to the Link component. By doing so, Next.js will preload the code for the linked page in the background. This means that when the user eventually clicks on the "About" link, the code for the About page will already be loaded, resulting in reduced waiting time and a faster transition to the target page.

By leveraging code splitting and preloading, we can significantly enhance the performance and user experience of our Next.js applications. The ability to lazily load components and routes, combined with the option to prefetch code for specific routes, ensures that our application loads only the necessary code when needed, resulting in faster page transitions and improved overall performance.

With Next.js, implementing code splitting and preloading becomes an effortless task, allowing us to optimize our bundle size and initial load time without compromising functionality. Embrace these powerful techniques and witness the transformative impact they can have on your Next.js projects.

Benefits of using lazy loading and code splitting

1. Improved Initial Load Time

   • Reduces the time it takes for the application to load initially.

   • Enhances the user experience by displaying content faster.

2. Faster Page Transitions

   • Loads only the necessary code for each page or route.

   • Enables faster transitions between pages, improving user navigation.

3. Reduced Bundle Size

   • Breaks down the application's JavaScript bundle into smaller chunks.

   • Loads only the required code, reducing the overall bundle size.

4. Improved Performance

   • Enhances application performance by optimizing load times.

   • Provides quicker interactions and smoother navigation.

5. Enhanced Scalability

   • Enables selective loading of code as the application grows.

   • Maintains performance and responsiveness as complexity increases.

6. Better Resource Management

   • Efficiently utilizes system resources by loading components and assets when needed.

   • Avoids unnecessary loading of unused resources.

7. Improved SEO

It benefits search engine optimization by allowing critical content to be crawled and indexed quickly.

Conclusion

Lazy loading and code splitting are powerful techniques for optimizing bundle size and improving the initial load time of our Next.js applications. By deferring the loading of non-critical components, displaying loading indicators, and manually code-splitting routes, we can significantly enhance the performance of our applications.

Next.js makes it simple to implement lazy loading and code splitting, allowing us to accomplish these optimizations. By using the dynamic import syntax for inert loading components and the Link component for code splitting routes, we can leverage Next.js's built-in capabilities for optimizing bundle size and initial load time.

So go ahead, implement lazy loading and code splitting in your Next.js projects, and witness the significant improvements in bundle size and initial load time. Your users will thank you for it!

Follow ReactPlay Blogs for more content, and join me on my socials.

For more information and advanced usage of lazy loading and code splitting in Next.js, refer to the official documentation here.

Note: The code examples provided are simplified for explanatory purposes. An actual implementation may require additional configurations depending on your specific project setup.

Web Development is the process of creating and maintaining websites. Web Development is an ever-evolving field that is continuously pushing the boundaries of what is possible on the Internet. In this blog, we will dive into the world of web development, technologies, and other related topics.

Any website has two layers, the frontend (User Interface) and the backend (Data management). Hence, you can become a Frontend Web-Developer that deals with the presentation of data on browsers or you can become a Backend developer that deals with the data behind the scenes or you can become a Full-Stack Web developer that works on both ends.

Let's understand each of these roles and what technologies you need in your arsenal to assume any of these roles.

Frontend Developer.

Frontend Developer is the one that deals with the User Interface (UI) of the website. User Interface is the part of the website that users deal with. It is the responsibility of the front-end developer to make this interface as user-friendly as possible.

"Good frontend development is not just about writing code; it's about understanding users, designing intuitive interfaces, and creating memorable experiences." - Unknown

The Three Pillars of Frontend Development.

To become a front-end developer, a developer needs to know three fundamentals, HTML, CSS, and Javascript. These are the three pillars for creating an attractive, responsive, and user-friendly interface. We as users, interact with a website via browsers. Now let us understand what each of these three is used for. We will take the example of a building to understand it.

• HTML(Hyper Text Markup Language) is used to create the structure of the website and add elements like Images, buttons, text, etc. Like a building has doors, windows similarly HTML creates the structure of the web page.

• CSS (Cascading Style Sheet) is used to make the website attractive. Just like in a building you add paint, lights etc to make a building attractive, CSS adds color, font sizes and many other useful styling properties to make your website eye-pleasing.

• Javascript is used to give functionality to various elements in your website. Just like a building has switches, electricity, and plumbing to interact with various building functionalities, Javascript adds life to your website. Apart from adding life to the front end, Javascript is also responsible to connect your frontend with the backend.

Having a strong understanding of these 3 fundamentals is important because, at the root level, Browser only understands HTML, CSS, and Javascript.

Once you have a strong understanding of the fundamentals, it is time to learn some high level frameworks and libraries that make your development experience smooth and easy. Here are some of the famous frameworks and libraries you can learn that provide a great development, are widely used in industry and are in high demand.

Javascript

• React

• Angular

• VueJS

• NextJS

CSS

• SASS

• TailwindCSS

• Bootstrap

Once you are confident with developing websites there few things you should learn to deliver higher quality.

• SEO (Search Engine Optimization)

• Responsive Design Websites

• User Experience (UX)

• Website Optimisation.

With these skills in your arsenal, you can become a high-quality frontend developer and deliver user-friendly websites.

Backend Developer.

A Backend Developer works behind the scenes. They are responsible for handling server-side logic and interacting with Databases or external services. It is the duty of the backend developer to handle data processing and send it to the frontend so that it can be presented beautifully. Unlike frontend, backend can be developed using a wide variety of languages as per the developer wish. Here are few frameworks that can help you develop a scalable backend.

• Flask and Django, for Python.

• NodeJS and ExpressJS, for Javascript

• Springboot, for Java

Apart from implementing a backend, that deals for user request, backend developer also works with Database to store and manipulate the data. Hence it is also important to learn database to be able to deal with real time information.

• MySQL

• MongoDB

• PostgreSQL

Once, you can create useful backend services, it is time to optimise it for your growing users. It is worth learning about few things:

• Different architectures

• Containerization

• Security

• Caching

It is duty of frontend developer to make the website attractive, but backend developer behind the scenes, works to make the website smooth and as fast as possible.

Full Stack Developer

A Full-stack developer is part of entire web site development life cycle process, right from design to the deployment of the website, a full stack developer can be involved in the part of the lifecycle. As full stack developer can work anywhere, they must know technologies used in different phases:

• Technologies for Frontend Development

• Technologies for Backend Development

• Brainstorm for UI design face to provide optimal UX

• Able to design System Architecture

• Also become a bridge between frontend and backend team.

Version Control Tools

It is also important for developers to be familiar with version control tools like Git, Github, Gitlab, Bitbucket. These tools help you to collaborate with other developers, maintain your code history and also merge codes.

Conclusion:

Everything mentioned above are just starting points into web development. The best way to keep improving your skills is keeping building, building projects, taking part in community activities, contributing to open source, helping others fix bugs and so on.

• The more responsive designs you build, the more you will understand what design works on which device.

• The more APIs you create the more insight you will get on how to segregate different endpoints.

• The more data you handle, the better you get at processing data.

If you find this article useful to begin your web development journey, leave a like and comment below.

Also you can connect and follow me on.

• Twitter

• Linkedin

Thankyou!

Finally, I decided to create a project on my own. And to my surprise, I was miserably stuck. It felt like I have learned nothing until now. Hence I completed another course and built some projects following YouTube videos. But when I went back to building something independently, I was back to square one.

I was stuck in tutorial hell. I was merely copying one tutorial after another rather than applying what I had learned. I was blindly following instructions and copying code when I should have understood what I was doing.

In this blog, let's talk about tutorial hell and how to escape it.

What is tutorial hell?

Consider someone who wishes to learn to cook. They watch a lot of cooking videos and are familiar with how to cook a specific meal. They read books about how to cook better and make food taste better. They even buy all of the cooking ingredients and utensils. However, they never start cooking.

This is exactly what tutorial hell is. Tutorial hell is a state of being stuck in a cycle of following tutorials without being able to build anything on your own. Tutorial hells are part of a developer's life when they are getting started. Many newbie developers fall into tutorial hell and realize it too late.

This is what a cycle of tutorial hell looks like:

1. You follow a tutorial. It could be a crash course, BootCamp, YouTube video series, or blog.

2. When you are done, you start building something on your own.

3. While doing so, you get stuck quite a lot of time and feel like you know nothing.

4. You go to step one!

How does one fall into tutorial hell?

Tutorial hell is not a path newbie developers take willingly. It's a pit they fall accidentally into because they are not focused on the correct path. We will talk about the correct path soon.

Here are some of the reasons why you are likely to fall into tutorial hell while starting software development.

Tutorials are already perfect

When we follow a tutorial, the creator has already made several attempts and failed several times before finishing it. However, when presented, it is perfect, with no bugs, errors, or anything whatsoever. Therefore we tend to think that if we follow the tutorial, we will also be able to code without any mistakes.

Blindly following tutorials become a comfort zone. It looks perfect, gives a feeling of achievement, and a delusion that we are becoming a better developer. But in reality, we are just reiterating something that's already built.

But learning something without making mistakes is not learning at all. You succeed when you make mistakes, learn from them, and try again. This brings me to my second point, you are afraid of making mistakes.

You are afraid of making mistakes

When we are on our own, we make more mistakes. Mistakes make us feel dumb, and our anxieties pile up. Hence we tend to choose to follow someone else and build something. We are often terrified of making mistakes because we think if we are making mistakes, we don't know anything.

We learn something only when we make mistakes

It's quite the opposite. When we make mistakes and analyze what went wrong, we get an opportunity to fix them. And while fixing those mistakes, we learn something new. And the next time, we won't make the same mistake again.

You are delusional about your skills

This was my case. We think we would understand the concept just by watching a video or reading a blog. We assume we will grasp everything by consuming the content on the go. But it is not the case.

Practise makes the man perfect.

The only thing to get better at something is doing it repetitively, not looking at others doing it.

How to get out of tutorial hell?

The sooner you escape the tutorial hell, the sooner will your true journey start. Escaping tutorial hell is no rocket science. Let's discuss methods to get out of tutorial hell in this section.

Learn the fundamentals

You should not entirely stop following tutorials. But you should know when to stop. When you are just getting started, familiarizing yourself with a language, library, or framework, tutorials are a good headstart.

When you get started, make yourself comfortable with fundamental concepts. Focus on understanding the concept first and then practically implement it later.

When you are just getting started, there are several resources that you can follow:

• Official documentation

• Crash course

• YouTube playlist

• Blog series

When you find the resource you are comfortable with, follow it and learn the nuances of it. One thing to note here is that tutorials must cover all the important aspects of the concept.

Build guided projects

When you are comfortable with fundamentals, start building projects.

At first, follow a tutorial just like you used to. But this time, rather than blindly following it, use the following method:

1. Split the tutorial into multiple sections based on its working, scope, or your understanding.

2. Then watch individual sections separately. Rewatch it until you understand it completely.

3. Take a pen and paper and write what you understood. You can write about the procedure, pseudo code, algorithms, steps, etc. You can also make diagrams, flow charts, and illustrations to better understand it. If you fail at this step, go to step 2 again and do it again.

4. Now it's time to code. Don't watch the tutorial. Only refer to the document you wrote in the previous step. Build a project just by your written understanding of your project.

5. If you get stuck, follow the last three steps again. At any cost, don't watch the tutorial and directly jump to coding.

6. When you are done with the section, review it. If it's satisfactory, then move to the next section. Otherwise, go to step 2.

This method takes longer than regular tutorials, but it definitely helps. You build the project by yourself and learn a lot in the process.

Don't build too many guided projects, though. Otherwise, you will fall into another type of tutorial hell. When you have built a couple of guided projects, start building your own projects.

Build more projects

If you have a project idea, then start building it. Otherwise, research beginner to intermediate project ideas on the internet. Make sure that project covers essential aspects of the language, library, or tool you are learning.

Don't limit yourself at this stage. Explore your skillset, play around with new technologies and concepts, and learn along the way. You will get stuck sometimes, but try solving those problems by yourself or ask for help on the Internet. Having like-minded folks, peers and mentors help in this case.

There is no limit to how many projects you must make. But make sure you build meaningful projects to add to your portfolio or resume.

Contribute to open-source projects

Contributing to opensource is a multivitamin tablet that significantly improves your overall health.

Join an open-source community dedicated to your domain and contribute to its projects. It would be difficult initially, but eventually, you will grasp everything. The community is always there to help you. Open-source contributions help you upskill by letting you solve real-world problems.

If you are into web development, feel free to join ReactPlay!

Create content on your learnings

You fully understand something when you teach it to someone else.

Taking your learnings one step further, if you really want to challenge yourself, creating content based on your learnings is the best way is the best way to know if you have understood something or not.

I started my blog with a similar intention. I wanted to keep a record of everything I learned. You can do this too. There are several ways you can create content on the internet:

• Write blogs

• Create videos or short-form content

• Write threads on Twitter

• Give talks, presentations

When you do this, you can be assured that you are truly learning something and growing in your career. And, of course, you must never stop learning. Whatever we discussed today will be helpful for a very long time.

Closing notes

Don't feel demotivated if you are currently in a tutorial hell. You are not the first one falling into it and definitely won't be the last.

Awareness is the first step toward change!

Now that you are aware of your current state, start taking action. Don't rush things and take one step at a time. Here is a call to action so you won't feel overwhelmed:

1. Make a note of what tools, technologies, programming languages, libraries, or frameworks you are learning. Pick a maximum of three co-related concepts together. For example: React.js, Tailwind CSS, and TypeScript.

2. Read its documentation and projects if they are mentioned in the tutorial. Otherwise, take notes of what you are learning.

3. Follow a YouTube or a blog series around the most important topic and build a few projects while you do so. Remember the method we discussed to build guided projects.

4. At the same time, join an open-source community around your domain. Meet like-minded peers and experienced developers in the community.

5. Contribute to open-source projects. There is plenty of material available on how to do so.

6. Start building your own projects as well. Try to solve problems on your own. Ask for help in communities and online forums if you are unable to solve it.

7. If you are comfortable, create and share content based on your learning. What you create is totally based on your comfort zone, experience, and interests.

And always remember, never stop learning!

Let's connect!

Did you fall into a tutorial hell as well? Are you currently into one? Or were you able to escape it? I would love to know your story. Let's connect so we can have a further discussion about this.

• Twitter

• Showwcase

• Peerlist

I write about web development, open-source, technical writing, and my general experiences with communities and software development. Make sure you read my other blogs as well!

• Blog

• Subscribe to my blog

I would love to hear back from you.

Until next time, keep learning! 🐱‍🏍

Do you often get lost in a maze of folders, trying to find the right file to import? Well, worry no more because I have a solution that will completely change your development experience: aliases! 🚀✨

In JavaScript development, imports are essential for bringing different modules, components, and utilities together. However, as your project becomes more complex, the length and complexity of your import statements can become overwhelming. All those ../../../ paths can turn your codebase into a tangled mess, making it harder for you to be productive and enjoy coding.

But fear not! Aliases are here to rescue you from this import chaos! 🦸‍♂️✨ With aliases, you can say goodbye to those long import paths and embrace a simpler and more elegant solution. They act as shortcuts, giving you shorter and more convenient names for your files and folders, turning your import statements into beautiful ones.

In this blog post, we will embark on a quest to explore the wonders of shortening your JS imports with aliases. Together, we will uncover the secrets behind this powerful technique and learn how to use it to our advantage.

Imagine a world where your import statements are clear, concise, and expressive. A world where navigating through your codebase is effortless and collaborating with other developers is seamless. This is the world that aliases unlock for you.

So, join me on this exciting journey as we discover the magic of aliases, empowering you to take your JavaScript development to the next level and embrace a new era of simplicity and efficiency.

Are you ready to transform your import statements from chaos to clarity? Let's dive in! 💻🚀

✨ The Power of Aliases: A New Path to Simplicity

Imagine you're working on a project with multiple nested folders and repeatedly importing modules with those dreaded lengthy paths.

It's like navigating through a labyrinth! But worry not; aliases are here to rescue you from this chaos. It provides a simpler and more elegant solution for importing modules, making your code cleaner, more readable, and easier to maintain. Let's delve into the magic of aliases and see how they can transform your development workflow!

🔗 What are Aliases, and How Do They Work?

🎩 In JavaScript development, aliases allow us to give shorter and easier names to files and folders when importing them. By using aliases, we can make the import process simpler, improve how our code looks, and have a better overall experience. Let's take a closer look at how this works! 🔧

Aliases act as shortcuts or alternative names for specific file or folder paths in our project. Instead of using long and complex paths, we can assign aliases to these paths and use them when importing.

For example, imagine we have a React project structured like this:

📂 Project Structure:

📁 src
  📁 components
    📁 navbar
      📄 Navbar.js
  📁 utils
    📄 helpers.js

🔍 Without aliases, importing a module would look like this:

import Navbar from'../../../components/navbar/Navbar';
import{ someHelperFunction }from'../../../utils/helpers';

As your project grows, the number of directories and nested levels increase, making the imports more difficult to read and maintain.

But with aliases, we can achieve cleaner and more concise imports like this:

import Navbar from'@components/navbar/Navbar';
import{ someHelperFunction }from'@utils/helpers';

With the @components and @utils aliases, we don't have to use long and confusing relative paths in our import statements. This means that we import become easier to read and understand.

🎨 Think of your project structure as a big city, with directories as different neighbourhoods and files as buildings within those neighbourhoods.

Aliases act like clear signs or landmarks that show you the direct way to specific locations. Instead of getting lost in a maze of streets, you can take a shortcut by following these recognizable signs. This saves time and effort and also reduces the chances of getting lost in the city.

Setting Up Aliases in React JS:

🛠️ Modern JavaScript frameworks, like React, make it easy to use aliases. Let's see how we can set up aliases in a React project.

React projects often use Create React App (CRA) to start quickly. CRA provides a simple way to configure aliases.

Step 1: Open your project's jsconfig.json file. If you don't have one, create it in the main directory.

Step 2: In jsconfig.json, find the compilerOptions section and add the following code:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

Here's what this configuration does:

• baseUrl: It sets the base directory for aliases. In our case, it's set to "src", so aliases will be relative to the src directory.

• paths: This section defines our aliases and their corresponding paths. In this example, we have @components and @utils aliases that point to their respective directories.

By setting aliases, we tell React how to resolve our alias imports during compilation. This allows us to use aliases throughout our project and enjoy their benefits.

🔧 For projects using custom Webpack configurations, you can achieve the same result by adding alias configurations to your webpack.config.js file. Here's an example:

const path = require('path');

module.exports = {
  // Other webpack configuration options...
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  }
};

In this example, we use the resolve property in the Webpack configuration to define our aliases. The alias object maps our aliases, such as @components and @utils, to their respective absolute paths.

By using either the CRA jsconfig.json or custom Webpack configurations, you can effortlessly set up aliases in your React project and enjoy cleaner, more readable import statements.

Visualizing the Benefits:

⚡️ Let's take a closer look at the benefits of using aliases in React JS development:

Enhanced Readability: Imagine working on a big React project with lots of files and folders. Without aliases, your import statements would be long and confusing, filled with complex paths. It becomes hard to understand which files depend on each other. But with aliases, things get much simpler. You can use shorter and more intuitive names to import modules, making it easier for you and your teammates.

Improved Maintainability: As your React project evolves, you might need to move components or utilities to different folders. Without aliases, you'd have to manually update import statements throughout your codebase, which can be time-consuming and error-prone. However, when you use it, it's a breeze. All your imports will automatically point to the new locations if you change the alias-to-path mapping in your configuration file. This saves you time and reduces the chances of introducing mistakes during refactoring.

Team Collaboration: Collaboration is key to successful software development. Aliases play a significant role in making collaboration smoother. They provide a common language for import statements, making it easier for team members to navigate the codebase, regardless of their familiarity with specific folder structures. When everyone on the team adopts aliases, it creates a shared understanding and reduces confusion, enabling faster collaboration and development.

Aliases improve the clarity, simplicity, and efficiency of your applications. These advantages will improve your coding experience, boost cooperation, and speed up the process. So why not embrace aliases and take your React projects to the next level? Let's unlock its potential together! 💻🚀

Conclusion

🌟 Congratulations on discovering the power of aliases in your React JS development! With aliases, you can make importing code easier, improve how readable your code is, and boost your productivity. No more struggling with complicated paths that can lead to errors! Embrace aliases and enjoy a smoother development experience.

🚀 So, don't hesitate to use aliases in your React or JavaScript projects. Aliases will improve your development process whether you're working on a tiny application or a large corporate system. Happy coding, and may your React projects thrive with newfound efficiency and clarity! 💻🎉

I'm always excited to hear your thoughts, experiences, and any questions you may have. Feel free to share them in the comments below. Let's continue this conversation and inspire each other to create amazing JavScript applications. Until next time, keep exploring the endless possibilities of technology! 🔥

Follow ReactPlay Blogs for more exciting content, and join me on my social media channels. Thank you for reading!

We are excited to announce the Open Mic initiative from ReactPlay. Public Speaking is exciting. Unfortunately, most developers stay back from it for fear of being judged. ReactPlay's Open Mic is one of the rarest platforms for you to start your Public Speaking Journey. Get on board, developers!

🔵 What is "Open Mic"? 🎙

"Open Mic" is an initiative to inspire and motivate developers to Public Speaking. At the same time, open up a channel to share lots about tech, open source, and software development. It will be a bi-weekly virtual meet-up for developers to attend, learn, and share for free!

🔵 When Are We Starting? 🗓

Our first "Open Mic" will take place on 12th May Friday, between 8 pm - 9 pm (IST). We have three exciting talks in these areas:

• Clean Code

• What's new in Next.js

• UX Stay tuned to { ReactPlay } for the update and link to join.

🔵 I am Interested in speaking; how? 🤔

You are welcome! It doesn't matter if you are a beginner or a PRO. Just fill out this form, and we'll reach out to you. Public Speaking is fantastic, and we encourage you to try it. No one will be Judged, promise!

Link: https://lnkd.in/gyP97hF5

I hope you support us in this initiative. The ReactPlay Open Source community is beyond just ReactJS. Join us to contribute, collaborate, and connect.

🔵 The First Episode

🔵 JOIN US

Join the ReactPlay Discord Server! ReactPlay is an Open Source Community that helps you improve with Web Dev, JavaScript, React, Next.js, and Full Stack!

This powerful tool can help you keep your commit history clean and organized and make conflict resolution a breeze. In this article, we'll dive into the magic of Git Rebasing and show you how to revamp your workflow for a smoother, more efficient programming experience.

Introduction

Git is a distributed version control system that allows developers to track changes to their code over time. Git is widely used in the software development industry and has become an essential tool for programmers.

Git rebasing is a powerful feature that allows developers to streamline their workflow by modifying the commit history of a branch. Rebasing is an alternative to merging, which can clutter the commit history and make it difficult to track changes over time.

What is Git Rebasing?

Git rebasing is a process that allows you to reapply changes from one branch to another. It works by taking the changes made in one branch and applying them to another branch as if they were always there.

Let's visualize this example scenario with a diagram. In the diagram below, we have a simplified representation of the commit history for our project:

             o --- o --- o --- o --- o (master)
            /
o --- o --- o --- o --- o --- o --- o (feature-A)

We can see that the master branch has five commits, while the feature-A branch has seven commits. Now, let's say that another team member has made changes to the "master" branch and we need to incorporate those changes into our feature-A branch.

One way to do this is to use Git merging:

             o --- o --- o --- o --- o --- o (feature-A)
            /                             /
o --- o --- o --- o --- o --- o --- o --- o (master)

As we can see, Git creates a new commit that combines the changes from both branches. However, this creates a non-linear commit history, which can make it difficult to understand the evolution of our codebase.

Alternatively, we can use Git rebasing to integrate the changes directly into the feature-A branch:

             o --- o --- o --- o --- o --- o --- 'o' --- 'o' --- 'o' (feature-A)
            /
o --- o --- o --- o --- o --- o --- o --- o (master)

In this case, Git applies the changes from the master branch directly onto the feature-A branch, creating a cleaner and more linear commit history. We can see that the feature-A branch now has three new commits (o', o', and o') that incorporate the changes from the master branch.

This example shows how Git rebasing can help us to maintain a cleaner and more understandable commit history.

When to Use Git Rebasing?

Git rebasing is beneficial in a variety of situations, including working with long-lived branches and working with a team. When working on large projects with multiple contributors, rebasing can help keep the commit history clean and easy to understand.

One of the benefits of using Git rebasing is that it makes it easier to resolve conflicts. When you rebase a branch, Git tries to apply the changes from the rebased branch to the target branch in a linear fashion. If there are conflicts, Git will pause the rebasing process and allow you to resolve the conflicts manually.

This can be more straightforward than merging, which can create merge conflicts that are difficult to resolve.

• To better understand the benefits of Git rebasing, let's take an example.

Suppose you and your team are working on a project and have been working on separate branches. You have been working on a feature branch for a while, and during this time, the main branch has been updated several times. Now, you want to merge your changes from the feature branch to the main branch.

Here's where Git rebasing can come in handy. Instead of merging your changes, you can rebase your feature branch onto the main branch. This will create a linear commit history, which is easier to understand and follow.

The following diagram illustrates the difference between merging and rebasing:

Merging: 

                A---B---C---D---E  main
               /                 \
    F---G---H---I---J---K---L---M  feature

Rebasing:

                A---B---C---D---E---I'---J'---K'---L'---M'  main
                                             /
                              F---G---H---------                 feature

As you can see, the rebased commit history is much cleaner and easier to follow. It also eliminates any unnecessary merge commits, making it easier to track down bugs or issues.

Moreover, it can be beneficial when working on a long-lived branch, such as a release branch. When you rebase your feature branch onto the release branch, you can ensure that your changes are up-to-date with the latest changes in the release branch. This can help prevent any conflicts or issues down the road.

In addition, it is worth noting that Git rebasing should be used with caution, especially if you are working on a public repository or with other collaborators. Rewriting the commit history can create confusion and make it difficult for others to understand what changes were made and why. As a best practice, always communicate with your team before rebasing and ensure that everyone is on the same page.

How to Use Git Rebasing?

Let's dive into the process of performing Git rebasing step-by-step.

Step 1: Update the Local Repository

Make sure your local repository is up to date with the remote repository by running the following command:

git fetch
git pull

This will ensure that you have the latest changes from the remote repository.

Step 2: Checkout Target Branch

Checkout the branch that you want to rebase onto by running the following command:

git checkout target_branch

This will switch your working branch to target_branch, which will be the new base for your changes.

Step 3: Initiate Git Rebase

Now, run the following command to initiate the Git rebase process, where source_branch is the branch that contains the changes that you want to apply to the target_branch:

git rebase source_branch

This command will apply the changes made in the source_branch onto the target_branch.

For example, let's say that you have the following commit history:

      Original                        Updated
         |                                |
         A                                A
        /                                / \
       B    <- Branch A                B   C
      /                                /
     C    <- Branch B                D

Here, Branch A is the target_branch and Branch B is the source_branch. The git rebase source_branch command will apply the changes made in Branch B (commit C) onto Branch A, resulting in a new commit D. The commit history will now look like this:

         A'                               A'
        /                                / \
       B                                B   C
      /                                /
     C                                D

Step 4: Resolve Conflicts

During the rebasing process, conflicts may arise, which can be resolved manually. You can identify the conflicts by running:

git status

This will show the conflicting files. Resolve any conflicts that arise during the rebasing process by opening the conflicting file in your code editor and editing the file to resolve the conflicts. After resolving the conflicts, mark them as resolved by running:

git add conflicting_file

// conflicting_file is a filename

Step 5: Continue Rebase

Once the conflicts are resolved, continue the rebasing process by running the following command:

git rebase --continue

This will apply the remaining changes and create a new commit for each change.

Step 6: Push Changes

Finally, push your changes to the remote repository by running:

git push

This will update the remote repository with the new commit history.

By following these steps, you can successfully rebase a branch, apply changes from one branch to another, and maintain your commit history clean and clear.

Common Mistakes and How to Avoid Them

Mistakes are common when it comes to Git rebasing, but they can be easily avoided with a bit of caution and communication. Here are some common mistakes to watch out for:

🚫👥🙅‍♂️ Not understanding the potential consequences of the process: Rewriting the commit history can make it difficult to understand how the project evolved. To prevent misunderstanding, utilize rebasing only in suitable instances and communicate your actions to your team.

Example: Let's say you are working on a project with a team and decide to rebase your branch onto the master branch without communicating with your team.

However, unbeknownst to you, one of your team members had made changes to the master branch while you were working on your branch. When you rebase, their changes will be overwritten, potentially causing conflicts and errors down the line. To avoid this, communicate with your team before rebasing to ensure that everyone is on the same page.

🤝🔎👀 Not resolving conflicts properly: Carefully reviewing and resolving conflicts is crucial to ensure the integrity of the codebase. If conflicts are not resolved correctly, it can lead to errors in the code and potentially cause bigger issues down the line.

Diagram: When rebasing, it's possible to encounter conflicts where changes made in one branch conflict with changes made in another branch. In these cases, it's important to carefully review the conflicting changes and resolve them properly.

       Original                        Updated
         |                                |
         A                                A
        /                                / \
       B    <- Branch A                B   C
      /                                /
     C    <- Branch B                D

In the example above, both Branch A and Branch B have changes to the same file. When Branch A is rebased onto Branch B, there is a conflict as both branches have changes to the same file. It's important to carefully review the changes and resolve the conflict properly to ensure that the final result is correct.

🤝💬👥 Not communicating with your team: Beginners may not realize that rebasing can potentially overwrite changes made by other team members. To avoid overwriting important changes, it's a good idea to only rebase branches that are under your control or communicate with the relevant team members before rebasing.

Diagram: When multiple team members are working on the same project, it's important to communicate before rebasing to avoid overwriting each other's changes.

          Master Branch
                  |
                  A    <- Team member 1's branch
                 / \
         B     C   D  <- Team member 2's branch
        /       \
  E   F         G    <- Your branch
   \ /           |
    H            H'   <- Result after rebasing your branch onto the master branch

In the example above, multiple team members are working on different branches. When you rebase your branch onto the master branch, you may overwrite changes made by other team members if you're not careful. To avoid this, communicate with your team members before rebasing to ensure that everyone is aware of the changes being made.

To avoid these mistakes and ensure the success of Git rebasing, remember to:

🚫👥🙅‍♂️ avoid confusion

🤝🔎👀 review and resolve conflicts properly

🤝💬👥 communicate with your team

Using Git rebasing can be a powerful tool to streamline your workflow, but it's necessary to use it properly and communicate with your team to avoid potential issues.

Conclusion

In conclusion, Git rebasing can be a powerful tool for keeping your commit history clean and making collaboration on projects smoother. However, it's necessary to use it wisely and communicate with your team to avoid common mistakes like overwriting changes or creating confusion in the commit history.

I hope this blog has given you a better understanding of Git rebasing and how to use it effectively. If you enjoyed reading this, be sure to follow ReactPlay blogs for more informative content. Don't forget to give it a thumbs up and share it with your friends. You can also follow me on my socials for more updates. Happy coding!

Benefits of Article Writing: Opportunities and Advantages

Article writing provides a multitude of opportunities and advantages for content creators. By consistently publishing high-quality articles, you can establish yourself as an expert in your field and build a strong professional network. You may also gain exposure to potential clients and employers, expanding your reach and increasing your chances of receiving referrals. Additionally, article writing can lead to remote job opportunities or even the chance to launch your own book based on your published work. It's important to remember that in today's digital age, either you can be well known, or knowing well can make you famous. By regularly producing valuable content, you can establish yourself as a thought leader in your industry and open doors to new opportunities.

How to Choose Topics: Tips for Selecting Engaging and Relevant Content

Choosing the right topic is crucial to creating engaging and relevant content that resonates with your audience. There are several strategies for selecting topics that can help you streamline the process and ensure that you're creating content that your readers will find valuable.

One approach is to write about what you're learning. As you learn new skills and techniques, you can document your progress and share your insights with others. This not only helps you solidify your own understanding, but it also provides a valuable resource for others who are just starting out.

Another approach is to write about topics that aren't widely available on the internet, or that have less quality content. By doing this, you can establish yourself as an expert in a particular niche and attract readers who are hungry for more information.

If you don't have the time to do research, don't worry. Just write about what you've learned so far or share your experiences from hackathons or other events. You'd be surprised at how many people are interested in hearing about your journey and what you've learned along the way.

Lastly, it's important to know your audience and choose topics accordingly. If you're writing for a technical audience, for example, you'll want to choose topics that are relevant to their interests and level of expertise. On the other hand, if you're writing for a more general audience, you'll want to choose topics that are more accessible and easier to understand. By knowing your audience, you can create content that resonates with them and keeps them coming back for more.

For those who are engaged in full-time work, there is very little time to research something and write, so write on those topics on which you are working, and keep it close to what you are learning and doing at your work. So, it will become a part of your journey.

Consistency and Quality: Importance of Maintaining Standards

Consistency and quality are two important aspects of content creation that should not be overlooked. Consistency in writing helps build a loyal audience and establish your brand. It is important to choose a schedule that works for you and stick to it. Whether it's once a week or twice a month, make sure you are consistent. However, it is equally important to maintain quality while being consistent. Your content should be well-researched, well-written, and informative. Don't compromise on quality just to meet deadlines.

As the saying goes, "If you tell a lie big enough and keep repeating it, people will eventually come to believe it." Consistency is powerful, but it should not come at the cost of truthfulness. Your content should be accurate, and you should avoid spreading misinformation.

Quality should always be a top priority. Make sure you know your subject well before you start writing. Spend time researching and verifying your facts. Be mindful of your tone, and write in a beginner to advanced friendly manner so that everyone can understand it. Your readers are investing their time in reading your content, so make sure you provide them with value.

Remember, there is a lot of content out there, but people will only choose yours if it has quality. Quality is what sets you apart from the rest. If you're not satisfied with your content, then it's not of good quality. Don't be afraid to rewrite or make revisions until you're happy with it.

Additionally, content creation doesn't just have to be limited to writing articles or creating videos. You can also share your daily learnings and experiences through Twitter threads or LinkedIn posts. This is a great way to maintain consistency and keep your audience engaged. Just remember to keep the same standards of quality and accuracy in all forms of content creation.

What to Avoid: Bad Practices to Steer Clear Of

• Avoid clickbait titles that mislead readers and don't match the content of your article. This can create a bad impression and result in readers leaving your page.

• Don't get discouraged if your article doesn't receive a lot of views or likes immediately. Building an audience and establishing yourself as a writer takes time and consistent effort.

• Avoid writing about topics that are irrelevant or don't make sense. Your content should provide value to your readers and be informative.

• Don't compromise on quality by rushing to meet deadlines or sacrificing accuracy for the sake of consistency. Your content should be well-researched, well-written, and informative.

• Avoid copying content from other sources or using images without permission. This is not only unethical but can also result in legal consequences.

• Don't neglect proofreading and editing. Spelling and grammar errors can create a bad impression and distract readers from your message.

Lastly, remember to stay true to yourself and your writing style. Don't try to imitate others or change your style to fit trends. Your unique voice and perspective are what make your content stand out.

Resources to learn Blogging

There is a resource shared by ReactPlay in the Twitter space that can aid in learning to blog. I have personally visited this resource and found it to be well-explained, covering all the fundamental tips and tricks for blogging, which can help you kickstart your own blog.

The link to this resource is showwcase.com/series/4755/all-about-technic...

Advice for Newbies: Expert Tips for Creating Engaging and Effective Content

• Understand your purpose in creating content and be selfless in your approach. Use your content for yourself first before sharing it with others.

• Don't let imposter syndrome take over you. Believe in yourself and play your own game in this field.

• Choose content that interests you and write in your specific style while following the basic rules of content creation.

• Remember, it takes time to become famous in this field. Even the experts in the Twitter space took more than a year to gain popularity.

Write about what you're learning, and don't just follow trends. Play the game according to your own rules and create content that you're passionate about.

Questions from Listeners and Answers from Experts: Insights from the ReactPlay Twitter Space Discussion

I have noted and selected some of the questions that were asked during the ReactPlay Twitter Space discussion by listeners. The experts provided insightful answers to these questions, which can be valuable for aspiring bloggers. Here are some of the questions and their answers from the discussion:

1. Is it necessary to be an expert on the topic you are writing about?

   No, It's not necessary to be an expert on a particular topic to start writing about it. You can share your knowledge, but ensure that the information you share is correct and factual. Prioritize quality content over quantity, and conduct thorough research before publishing any information to prevent sharing incorrect information. Sharing high-quality, accurate content will also help to improve your knowledge of the topic.

2. It is still worthwhile to write blogs even in the era of ChatGPT?

   The answer is yes because AI uses the web to extract data and create content, it doesn't generate answers out of thin air. Writing blogs allows you to share your unique perspective and insights on a topic, which can be valuable to your audience.

3. How to manage time for writing with your full-time work?

   You learn time management with time. As time passes, you gain experience and become more adept at writing articles. To save time, use tools like Grammarly and ChatGPT to correct grammatical errors and other mistakes. When you work consistently on something you get better automatically. Additionally, make plans to write on weekends.

4. I don't have enough knowledge about my subject to write the article because currently I am in the learning phase.

   It's common to feel like you don't have enough knowledge to write about a subject when you're still in the learning phase. However, don't stop learning to create content. If creating content is taking time, don't worry, focus on learning and gaining knowledge about that topic first.

5. What are the different ways to monetize your content?

   First of all, don't hesitate to monetize your content. You are giving your valuable time, so you deserve a return on investment. There are several ways to monetize your content. For example, you can sell your own products or services, add affiliate promotions, offer sponsored content or product reviews, or display ads on your website or social media channels. You can also consider creating premium content or offering exclusive access to your audience for a fee. Whatever method you choose, ensure it aligns with your brand and provides value to your audience.

Conclusion

In conclusion, content creation provides numerous opportunities and advantages for content creators. By producing high-quality articles, creators can establish themselves as experts in their field, build a strong professional network, gain exposure to potential clients and employers, and even open doors to new opportunities. Choosing the right topics is crucial to creating engaging and relevant content that resonates with the audience. Writing about what you're learning, exploring less-available topics, and sharing your experiences can help streamline the process. Consistency and quality are two important aspects that creators must maintain while creating content. Consistency helps to build a loyal audience, and quality is what sets you apart from the rest. Finally, content creators should avoid clickbait titles, and irrelevant or controversial topics, and not get discouraged if their articles don't receive much attention immediately. By following these guidelines, content creators can create effective and engaging content that resonates with their audience and helps them stand out in the crowded market.

Here is the link to the Twitter Space recording: https://twitter.com/i/spaces/1DXxyvXAONVKM

Thanks for reading! I hope you find this blog post useful. If yes, don't forget to like it. You can connect with me on Twitter and Linkedin

Setting Up TypeScript

Before we can start writing TypeScript code, we need to set up our development environment. Here are the steps to set up TypeScript:

1. Install TypeScript

The first step is to install TypeScript globally using npm. Open your terminal or command prompt and run the following command:

npm install -g typescript

This will install the latest version of TypeScript on your system. The -g option installs TypeScript globally, so you can use it from any directory.

2. Create a new TypeScript file

Next, create a new file with an .ts extension. This will be our TypeScript source file. You can name the file anything you like, but for this example, we will call it index.ts.

Open your text editor and create a new file called index.ts. Add the following line of code:

console.log('Hello, TypeScript!');

This is a simple TypeScript program that prints a message to the console.

3. Compile the TypeScript file

Now that we have our TypeScript source file, we need to compile it to JavaScript. To do this, we will use the TypeScript compiler tsc.

Open your terminal or command prompt and navigate to the directory where your index.ts file is located. Then, run the following command:

tsc index.ts

This will compile the TypeScript file to JavaScript. The output will be a new file called index.js in the same directory as your TypeScript file.

4. Run the JavaScript file

Now that we have our JavaScript file, we can run it (if we want) using Node.js. Open your terminal or command prompt and run the following command:

node index.js

This will run the JavaScript file. You should see the message "Hello, TypeScript!" printed on the console.

Congratulations! You have set up TypeScript and compiled your first TypeScript program into JavaScript. You can start writing more complex programs using TypeScript's advanced features such as type annotations, classes, and interfaces.

Basic TypeScript Concepts

TypeScript is a statically typed language, which means we can define types for variables, functions, and other constructs. Let's start by discussing variables and data types.

Variables and Data Types

In TypeScript, we can declare variables using the let or const keyword. We can also specify the type of a variable using the :Type syntax. For example, we can declare a variable count of type number like this:

// Variable with a specific type
let count: number = 5;

If you don't specify a type, TypeScript will infer it based on the value assigned to the variable:

// Variable with inferred type
let message = 'Hello, TypeScript!';

TypeScript supports the following data types:

• number for numeric values

• string for text values

• boolean for true/false values

• any for the value that can be of any type

Functions and Interfaces

Functions in TypeScript can have types for their parameters and return values. For example, we can define a function addNumbers that takes two number parameters and returns a number:

function addNumbers(a: number, b: number): number {  //here `number` is the type of `a` and `b`. It means, we can also assign numbers to them, if we will try to give any other values like string or boolean, then it will going to give us error. 
  return a + b;
}

Interfaces in TypeScript define the shape of an object. For example, we can define an interface Person that has a name property of type string and an age property of type number:

interface Person {
  name: string;
  age: number;
}

We can then create an object of the type Person like this:

let person: Person = {
  name: 'John',
  age: 30
};

Classes and Objects

TypeScript also supports classes and objects. We can define a class Greeter that has a greeting property and a greet method:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {  //this is greet method/function
    console.log(`Hello, ${this.greeting}!`);
  }
}

We can then create an object of the type Greeter and call its greet method:

let greeter = new Greeter('TypeScript');
greeter.greet(); // Hello, TypeScript!

Modules and Namespaces

TypeScript has built-in support for modules and namespaces. Modules allow you to organize your code into reusable, shareable units. For example, we can define a Greeter class in a separate file greeter.ts and then import it into our main file app.ts like this:

// greeter.ts <- FileName
export class Greeter {
  // ...
}

// app.ts <- FileName
import { Greeter } from './greeter';

let greeter = new Greeter('TypeScript');
greeter.greet();

Namespaces allow you to group related code. For example, we can define a namespace MyNamespace that has a message property.

namespace MyNamespace {
  export const message = 'Hello, TypeScript!';
}

console.log(MyNamespace.message);

Advanced TypeScript Concepts

Generics and Type Inference

Generics are a valuable TypeScript feature that allows you to write reusable code that works with a variety of types. In TypeScript, you can define a function or a class with a generic type parameter, which can be used to represent any type.

For example, consider the following identity function that returns its argument:

function identity<T>(arg: T): T {
  return arg;
}

let result = identity<string>('Hello, TypeScript!');

Here, T is a type parameter that represents any type. The function identity takes an argument of type T and returns a value of the same type. In the example above, we're using the function identity with the type parameter string to return the string "Hello, TypeScript!".

Type inference in TypeScript allows the compiler to infer types depending on the context. For example, if we don't specify the type parameter of the identity function, TypeScript will infer it based on the type of the argument:

let result = identity('Hello, TypeScript!'); //if we'll use booleans here, then, TS will think the result is a boolean value.

Here, TypeScript infers that the type parameter T is string based on the argument "Hello, TypeScript!".

Decorators and Mixins

• Decorators

In simple terms, a decorator is a way to add extra functionality to a class, function, property, or method in TypeScript. They are a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators are similar to annotations in other programming languages and are used to modify the behavior of a class or its members at runtime.

Let's consider an example. Imagine you have a class called Logger that logs information about a class's method calls. With decorators, you can attach this Logger class to any method in your codebase. Here's how it works:

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key} with`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Result:`, result);
    return result;
  };

  return descriptor;
}

class MyClass {
  @log
  myMethod(value: number): number {
    return value * 2;
  }
}

const myClass = new MyClass();
myClass.myMethod(5);

In this example, we create a Logger class that has a log method that logs a message to the console. We then define a logMethodCall decorator function that takes in three arguments: target, propertyKey, and descriptor. The decorator function then modifies the descriptor object of the foo the method by replacing its value with a new function that logs information about the method call before calling the original function and returning its result.

Now, when we call example.foo(), the decorator function logMethodCall is executed, and it logs information about the method call before calling the original foo function.

Real-world examples of decorators include things like logging, authentication, and validation. For instance, you could create a @authenticated decorator that checks if a user is logged in before allowing them to access a specific method.

• Mixins

A mixin is a way to combine the functionality of multiple classes into a single one. In other words, mixins allow you to create a new class that has all the features of multiple existing classes.

Here's an example:

class Animal {
  public move(distanceInMeters: number) {
    console.log(`Animal moved ${distanceInMeters}m.`);
  }
}

class CanSwim {
  public swim(distanceInMeters: number) {
    console.log(`Swimming ${distanceInMeters}m.`);
  }
}

class CanFly {
  public fly(distanceInMeters: number) {
    console.log(`Flying ${distanceInMeters}m.`);
  }
}

class Duck implements CanSwim, CanFly {
  swim: (distanceInMeters: number) => void;
  fly: (distanceInMeters: number) => void;

  constructor() {
    this.swim = CanSwim.prototype.swim.bind(this);
    this.fly = CanFly.prototype.fly.bind(this);
  }
}

applyMixins(Duck, [CanSwim, CanFly]);

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name)
      );
    });
  });
}

const duck = new Duck();
duck.swim(10);
duck.fly(20);

In this example, we have three classes: Animal, CanSwim, and CanFly. Animal has a move the method that logs information about an animal's movement. CanSwim has a swim the method that logs information about swimming, and CanFly has a fly the method that logs information about flying.

We then define a new class Duck that implements CanSwim and CanFly. We manually bind the swim and fly methods of CanSwim and CanFly to the Duck class's instance.

We then define a applyMixins function that takes a derived constructor and an array of base constructors. This function iterates over the base constructors and copies their properties and methods to the prototype of the derived constructor. This is how we add the functionality of CanSwim and CanFly to the Duck class.

Finally, we create a new Duck instance and call its swim and fly methods to test the implementation of the CanSwim and CanFly mixins.

Overall, Decorators and Mixins are powerful features of TypeScript that allow you to add additional functionality to your classes, methods, and properties, and create new classes by combining existing ones.

Async and Await

Async and Await in TypeScript allow you to write asynchronous code that looks like synchronous code:

function wait(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function myAsyncFunction() {  // this function is decleared with async keyword.
  console.log('Start');
  await wait(2000);
  console.log('Middle');
  await wait(2000);
  console.log('End');
}

myAsyncFunction();  //here we are calling a function

In this example, the wait function returns a Promise that resolves after the specified number of milliseconds. The myAsyncFunction function is declared with the async keyword, which means that it returns a Promise. Inside the function, we use the await keyword to wait for the Promises returned by the wait function.

When we call myAsyncFunction, it

• logs "Start," waits for 2 seconds,

• logs "Middle," waits for another 2 seconds, and

• logs "End".

  The output of this function looks like synchronous code even though it's asynchronous under the hood.

Using TypeScript with Frameworks and Libraries

TypeScript can be used with a variety of frameworks and libraries. Here are some examples:

Angular

Angular is a popular web framework that is built with TypeScript:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

React

React is a popular UI library that can be used with TypeScript:

interface Props {
  name: string;
}

function MyComponent(props: Props) {
  return <div>Hello, {props.name}!</div>;
}

Node.js

Node.js is a popular runtime environment that can be used with TypeScript:

import * as http from 'http';

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, TypeScript!');
}).listen(8080);

Best Practices for Writing TypeScript Code

Here are some best practices for writing TypeScript code:

• Consistent code formatting and naming conventions

Use consistent code formatting and naming convention to make your code easier to read and understand. Tools like Prettier and ESLint can help enforce these conventions.

• Proper use of TypeScript types

Use TypeScript types to help catch errors before runtime and provide better editor support for your code. Use interfaces to define the shape of your objects.

• Using third-party libraries with TypeScript

Always use TypeScript definitions for third-party libraries, guaranteeing smooth integration with your TypeScript code. You can install type definitions for popular libraries using npm, or use a tool like DefinitelyTyped to find and install them.

• Type narrowing and guards

Type narrowing and guards are powerful features in TypeScript that allow you to write more precise and safer code.

interface Cat {
  meow(): void;
}

interface Dog {
  bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return 'meow' in animal;
}

function makeSound(animal: Cat | Dog) {
  if (isCat(animal)) {
    animal.meow();
  } else {
    animal.bark();
  }
}

In TypeScript, a variable can have multiple possible types, such as the animal parameter in the example code that can be either a Cat or a Dog. When dealing with variables that can have multiple types, writing code that is specific to a particular type can be a challenging task.

This is where type narrowing and guards come into play. Type narrowing allows you to narrow down the type of a variable based on certain conditions so that TypeScript knows more precisely what type the variable is at a given point in your code. This can help catch errors and provide better editor support for your code.

In the example code, the isCat function is a type guard that takes an animal parameter that could be either a Cat or a Dog. It returns a boolean that indicates whether or not the animal parameter is a Cat. By using the animal is Cat syntax in the function signature, we're telling TypeScript that this function is a type guard that narrows down the animal parameter to the Cat type.

The makeSound function takes an animal parameter that could be either a Cat or a Dog. Inside the function, we use the isCat function as a guard to check if the animal parameter is a Cat. If it is, we call the meow method on the animal. Otherwise, we call the bark method on the animal.

Using type guards and narrowing allows us to write more precise and safer code, catching errors at compile time rather than runtime. By telling TypeScript more about the types of our variables, we can leverage the full power of TypeScript's type system to make our code more robust and easier to maintain.

• Using TypeScript with testing frameworks

Testing frameworks like Jest and Cypress can be used with TypeScript to write more robust and type-safe tests:

import { sum } from './my-module';

describe('sum', () => {
  it('should add two numbers together', () => {
    expect(sum(1, 2)).toEqual(3);
  });
});

Conclusion

TypeScript is a powerful tool that can help you write more robust, maintainable, and scalable JavaScript code. It provides several useful features like type checking, interfaces, decorators, and async/awaits that can help catch errors early, improve code readability, and increase productivity. By embracing best practices and using TypeScript with well-known frameworks and libraries, you'll boost your web development skills to impressive levels. So, get started with TypeScript today and take your coding skills to the next level!

If you found this article helpful, don't forget to give it a thumbs up, follow ReactPlay Blogs, and share it with your friends and colleagues. If you have any questions or feedback, feel free to leave a comment below. You can also connect with me on Twitter, LinkedIn, and ShowwCase for more updates and helpful resources on web development. Thank you for reading!

Some useful tips becoming a good content creator :-

Define Your Audience: It is important to define your target audience before creating content. Understanding your audience's needs and preferences will help you create content that appeals to them.

Create useful content: Your content should be useful to your target audience. This can be knowledge, insight or entertainment. By creating relevant content, you engage your audience and gain their trust.

Promote Your Content: Promoting your content is crucial to growing your audience. This may include sharing your content via social media, email marketing or paid advertising.

Conclusion :- Content creation is the key to successful online marketing. By creating quality content that benefits your audience, you can attract and retain customers, build brand awareness, and position yourself as an industry leader in your business process. By following the best practices outlined in this blog, you can create content that resonates with your audience and achieves your marketing goals.

#react-play-anniversary-23

#react-play-anniversary-23

ReactPlay presents an exciting event #2PlaysAMonth for ReactJS/Web Developers to learn, build, and share. Oh yeah! Also to win some exciting prizes, too.

The event starts Feb 1st 2023 and ends on Feb 28th 2023. You will be building 2 projects in these 28 days on any ideas of your choice! You need to follow a few rules that you can find here:

#2PlaysAMonth Event from ReactPlay

How to Participate?

• You must complete two plays(React Projects) on ReactPlay between February 1st to February 28th 2023.

• You must follow the Create a Play steps to create the play. Please create an issue on the ReactPlay repository for each pull request.

• Your play must have #2PlaysAMonth tag added to it while creating.

• You can build any project of your choice. If you are looking for ideas, here are some you can get inspired by.

• You must register on stackstream.

• Create a demo on stackstream explaining your work and add the recording link to your play by editing it.

  That's it, and you are all set to go.

About ReactPlay

ReactPlay is an Open Source platform that helps anyone learn ReactJS faster with a hands-on practice model. It is a collection of ReactJS projects you can use to learn ReactJS.

Is that all? Nope. You can also create your projects and share them with the world. The best part is that ReactJS experts will review your project code before it gets part of the ReactPlay platform. Isn't that a pure WIN-WIN?

Important Links

• ReactPlay Website

• ReactPlay Org on GitHub

• ReactPlay on Twitter

• ReactPlay Community on Discord

• ReactPlay Blog

This blog post will dive deep into the various ways to share your knowledge and expertise in the tech industry. From writing technical articles and giving presentations, to teaching and mentoring, to collaborating on open-source projects and participating in online communities, we will explore the different methods of sharing knowledge and how they can benefit your personal and professional growth.

Finally, we will understand the importance of staying updated and actively sharing knowledge and insights in the tech industry, and how it can contribute to the field's advancement. So, get ready to unlock the full potential of your knowledge and take the first step toward becoming a thought leader in the tech industry!

Writing

Writing technical articles is a great way to share your knowledge of technology. By creating well-written, informative articles on technical topics, you can help others to gain a deeper understanding of the subject and learn from your experience and expertise. You can publish these articles on your blog or website, on platforms such as Hashnode, or even contribute to platforms like ReactPlay where you can share your knowledge and collaborate with others in the community.

There are several benefits to writing technical articles:

• Writing helps to clarify your thoughts and understanding of a topic. As well as to organize your ideas logically.

• It helps to establish you as an authority on the topic and positions you as a thought leader in the industry.

• Technical articles are a great way to reach an audience, as they can be easily shared and accessed online.

• It is an effective technique to demonstrate your knowledge, skills, and expertise in a particular subject or technology to potential employers or clients.

Presenting

Presenting is one of the most effective ways to share your knowledge of technology. Giving presentations on technical topics allows you to communicate complex information clearly and concisely, making it easily accessible to others. Presentations can happen in several settings, including conferences, meetups, and internal company events.

When giving a presentation, make sure your audience and tailor your content to their level of understanding. Start with an overview of the topic and build up to more details. Use visuals, such as slides or diagrams, to help explain the information and keep the audience engaged. Practice your delivery and timing to ensure that your presentation flows smoothly and that you stay within the allotted time.

Sharing your knowledge through presentations also allows you to establish yourself as a thought leader in the industry. It can help you gain visibility and credibility, which can open up new opportunities for career advancement.

Teaching

The 3rd way is teaching. When you teach someone, you are not only sharing your knowledge but also helping them understand and internalize the information. Teaching is not only beneficial for the person being taught but also for the person doing the teaching. It allows you to deepen your understanding of a subject and helps to reinforce your knowledge and skills. Additionally, teaching positions typically require constant learning, so it can be a great way to stay updated with the latest trends and technologies.

Social Media

Social media is a powerful tool for sharing knowledge in technology. Platforms like Twitter, LinkedIn, and ShowwCase allow professionals in the tech industry to connect, share information, and engage in discussions about the latest advancements and trends in their field. Some ways to use social media for sharing knowledge in tech include:

• Sharing updates and insights about your work and projects on LinkedIn, Twitter, and ShowwCase can help others learn about new technologies and techniques.

• Participating in Twitter chats and discussion groups related to your field can provide a platform for sharing knowledge and engaging in conversations with other professionals.

• Writing a blog and sharing it on platforms like Hashnode with the communities like ReactPlay and Fueler.

• Building a personal brand on social media platforms and sharing knowledge through this medium.

Online Communities

Online communities are a great way to share knowledge and collaborate with others in tech. These communities can be found on various platforms such as forums, social media groups, and messaging apps, and they frequently concentrate on specific technologies or topics. Participating in online communities can provide a wealth of benefits, including:

1. Access to experts: Online communities often attract experts in various fields, and by participating in these communities, you can learn from the best and ask questions to further your knowledge.

2. Networking opportunities: Online communities such as ReactPlay, WeMakeDevs, and EddieHub can provide opportunities to connect with other professionals in our field, which can be beneficial for building relationships and finding job opportunities.

3. Collaboration and problem-solving: Participating in online communities can also provide opportunities to collaborate on projects, troubleshoot problems, and share solutions with others.

4. Keeping up with the latest trends: Online communities can also be a great way to stay up-to-date with the latest developments and trends.

5. Giving back: Participating in online communities can also be a way to give back and help others. Whether you are answering questions, providing feedback, or mentoring, you can make a genuine difference in the community.

Open-source contribution

Open-source contribution is a way of sharing knowledge in tech by contributing to open-source projects. Open-source projects are software projects that are publicly available and can be modified and distributed by anyone. By contributing to open-source projects like ReactPlay, and LinkFree, individuals can share their knowledge and skills with a wider community while learning from others.

There are many ways to contribute to open-source projects, depending on the project and the individual's skills and interests. Some examples include

1. Writing Code

2. Writing Documentation

3. Proving Translations

4. Testing

5. Participating in community

6. And much more.

Consulting

Consulting is a way to share your knowledge of technology by providing expert advice and guidance to organizations and businesses. As a consultant, you will use your technical expertise and industry experience to help clients solve problems, improve processes, and achieve their goals.

Consulting can take many forms, from working as an independent consultant to being part of a consulting firm. As a beginner, I never tried consulting. So, I can't give much on this topic.

Conclusion

In conclusion, there are many ways to share knowledge in tech and make a positive impact on the industry. We've discussed the benefits of writing technical articles, giving presentations, teaching and mentoring, collaborating on open-source projects, participating in online communities, and consulting. I hope you found this blog informative and encouraged you to start sharing your knowledge in tech. Thank you for reading!

You can join me on socials where we can learn and grow together :)

• ShowwCase

• LinkedIn

• Twitter

• GitHub

First, we wish you a happy new year from our ReactPlay community! We hope this year brings all the positive changes you deserve.

The previous year has been absolutely fantastic for us. We want to share everything with you through this blog. Consider it a retrospective of the year 2022.

Hello, World!

We wanted to build a community for Web developers, especially beginners focusing on the front end to learn, develop and grow their skillset. Hence, we created ReactPlay, an open-source project to learn project-based programming with a hands-on model.

We truly kicked off in April 2022. And soon enough, gain a lot of traction, and developers from around the globe joined us.

The First Play

'Plays' are the foundation of the ReactPlay platform. As you know by now, we are a project-based learning platform. Everything revolves around projects that contributors develop.

Each project submission is called a Play in ReactPlay. Contributors can submit their plays and get reviewed by experienced developers.

Our first project was created on 3rd April 2022. It was a play called Why React contributed by Tapas Adhikary, demonstrating why one should choose React.js.

Throughout the year, many contributors joined us. By the year's end, we had more than 60 projects on our platform.

Explore new plays here.

The Community

Initially, we started a Twitter group with contributors. But as more developers started contributing, we needed something better. As a result, we created a discord server to interact with other community members. We were already active on Twitter by then. And soon enough, we launched our LinkedIn page as well.

Discord is the place where all the fun begins. The community calls, discussions, chats, memes, announcements, and everything is majorly conducted through our Discord server. As of today, we have more than 400 active members on Discord.

We primarily host spaces on Twitter. We talk about [THINGS WE TALK ABOUT]. Additionally, we share insightful and informative content on both Twitter and LinkedIn. We share quizzes, quotes, trips and tricks, and much more. We have more than 2,000 friends on the blue bird app and about 500 followers on LinkedIn.

The Blog

We decided to expand our horizons and step into different areas of software development. Blogging, though not directly connected with development, has an integral role in the developer's journey. Therefore we decided to start a blog.

We started the ReactPlay blog on 23rd June 2023. We encouraged everyone to write about their experiences and learnings. People began writing about creating plays, building personal projects, difficulties faced open source, and many other topics.

We got a positive response from everyone. Today, we have about 50 blogs published on a variety of topics, including but not limited to React, JavaScript, Open source, Git and GitHub.

Hack-R-Play

Another milestone we achieved is our first-ever hackathon!

We hosted Hack-R-Play in October 2022. NHost happily sponsored it. Participants had to create an open-source project using NHost and any React-based technology. Later they had to write a blog and submit it along with the original project.

The hackathon received 82 submissions in total. Seventeen of those projects were completed. Finally, we selected three grand prize winners.

Read more about Hack-R-Play in our separate blog, and check this out to see who won the hackathon.

No Mess November

The codebase became cluttered as more contributors started contributing to the project. We have made a plethora of changes in the codebase since day one.

To make things easier to develop, build and maintain; we made some significant changes in our codebase.

To begin, we divided the platform's functionality into separate repositories. Next, we introduced authentication, made the play-creation process easier, and added play interaction and modification capabilities.

In November 2022, we followed No Mess November. We cleaned up the entire codebase and configured ESLint and Prettier to have opinioned rules for everyone.

It was a hectic task since we had to clean up the existing codebase and create a system for new contributions. But our fellow contributors collaborated and cleaned up the entire codebase.

Code cleanup witnessed the community's most extensive collaboration, where everybody helped fix some part of the codebase.

ReactPlay Live

The third and most recent achievement of our community is ReactPlay Live. We encouraged developers to write, build and showcase. But what after that?

On ReactPlay Live, we call a community member over YouTube live to share their journey and experiences in the domain. This helps both beginner and intermediate members to upskill themselves. At the same time, the guest gets an opportunity to share their story, talk in front of the audience and build public speaking confidence.

We have covered topics such as Jobs, interview preparations, and full-stack development.

The FOSS India Participation

FOSS is a celebration of Open Source. We had a representation of ReactPlay in the Foss India 2.0 help in Bangalore, India. We spoke about the project's vision, community, and the approach we are taking to make learning easy.

It was very well received, with a lot of positive feedback.

The Present

We are so proud of what we have achieved in such a short time. Today, we have about 600 starts, more than 300 forks, and more than 75 contributors to our GitHub Repository.

This must have only been possible with all of our community members. We thank everyone for connecting with us, engaging in the community, and participating in various activities.

We recently crossed 600 stars in our repository. If you haven't starred it yet, this is the perfect time to do it!

The Future

In 2023, we have grand plans to take the project to the next level with a community-first approach.

Here is a short brief on what we have been brainstorming for this year:

• User Interface revamp

• User profile page

• Leaderboard

• Follow creators

As per community engagement goes, we have exciting plans for this year.

• In-person meetup (Stay tuned for this!) You would surely love those:

• More engagement on RaectPlay Live to provide a platform for every beginner who wants to share their journey.

• Web Development Workshops

• Project-based Cohort

This is just the icing on the cake! There are many other things that we are planning for this year. Please ensure you are part of our community and follow us on the blue bird app for the latest updates.

Wrapping Up

That's it for today! We hope you had a fantastic year and are still sticking with your new year's resolutions. All the best for the upcoming year.

If you want to connect with us, here we are:

• GitHub

• Discord

• Twitter

• HashNode

Until then, keep contributing!

It's a hassle to login into applications such as social media, youtube, and GitHub which are visited by users regularly, mostly multiple times in a single day. No one wants to keep entering the same credentials every time they wish to use an application.

Persistent login takes care of this hassle as it stores these credentials in a secure form in the user's device only(in browsers in the case of web apps) and uses them to substitute entering the credentials to log in and use the application.

These secured credentials can be stored in the user's device in Local Storage and as Cookies.

Note: Session Storage is not recommended to store these credentials as the storage clears itself as soon as the session ends.

Here, we will be using cookies to store the credentials and implement our persistent login feature inside our React Application. We will be using React for Frontend and NodeJS(Express framework) for the back end.

Before we jump into creating our persistent login feature, if you are not familiar with cookies, you can read about cookies here.

Implementation

Now let us begin with the implementation. For the demo purpose, we will create a small application without databases. The idea is simple. The user will add the credentials and these credentials will be sent to the server from where we will receive our cookie. There is no sign-up required. As long as the cookie is valid/present, the user won't have to log in again.

Backend Implementation

First, let us begin with creating our server.

Create a folder named Persistent-Login. In this folder, you will have your separate backend and frontend folders. Create a folder inside Persistent-login named Backend. Now open this Backend folder in your favorite editor(I will use VSCode). Open a terminal inside VSCode and follow the below steps.

Installing packages Execute the following commands in the terminal:

npm init -y  

npm i nodemon express jsonwebtoken cors

npm i

Add the below lines of code to your package.json

"scripts": {
    "start": "nodemon index.js"
 },

After this, your package.json should look like the below image:

Now create a file name index.js in the root of your backend and add the below lines of code inside it.

// index.js
const express = require("express");
const jsonwebtoken = require("jsonwebtoken");
const cors = require("cors");
const app = express();

app.use(express.json()); //allowing json data to be received from client

// here we are setting up cors so that we can make requests from cross-origin resources
app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
    allowedHeaders: [
      "set-cookie",
      "Content-Type",
      "Access-Control-Allow-Origin",
      "Access-Control-Allow-Credentials",
    ],
  })
);

// this is the default path. Go to `localhost:5000` on your browser to check if your server is running
app.get("/", (req, res) => {
  res.json({ Message: "Server is up and running" });
});

// this is the login path
app.post("/login", (req, res) => {
  const id = req.body?.id;
  const password = req.body?.password;
  const authToken = jsonwebtoken.sign({ id, password }, "DUMMYKEY");

  // now we will be setting cookies from server side only.
  // below cookie is httpOnly, its maxAge is 1 day
  // This cookie is valid to all the path in the domain
  res.cookie("authToken", authToken, {
    path: "/",
    maxAge: 24 * 60 * 60 * 1000,
    httpOnly: true,
  });

  res.sendStatus(200);
});

// this path will be used to check if the cookie is valid to auto login inside the application;
app.get("/autoLogin", (req, res) => {
  const cookie = req.headers.cookie;

  // if we received no cookies then user needs to login.
  if (!cookie || cookie === null) {
    return res.sendStatus(401);
  }

  return res.sendStatus(200);
});

// this path will be used to check if the cookie is valid to auto login inside the application;
app.get("/logout", (req, res) => {
  res.clear("authToken");
  return res.sendStatus(200);
});

app.listen(5000, () => console.log("Backend Running on Port 5000"));

Now, open your terminal, go to your backend folder, run the following command and go to http://localhost:5000

npm run start

Note: In the above code for the /AutoLogin path, I have not implemented any authentication checks for the validity of the authToken and the internal details of the decrypted token. When you implement Auto Login in your application, please add the necessary checks as per your requirements.

Frontend Implementation

Now, let us begin with frontend implementation.

In your Persistent-Login folder, run the following command, and open frontend folder in your editor:

npx create-react-app frontend

Inside /src folder of the root frontend folder, clear the file index.css & inside App.js, clear the code inside div with class App.

In this project, we will add only 2 basic components, one will be used to enter user credentials to login and receive cookies and the second will show that the user is logged in and can logout to delete the cookie.

Inside /src folder, create a folder components, and inside components, create folders Login and Homepage. Inside /Login folder, create Login.js. Inside /Homepage folder, create Homepage.js.

Login.js

Open Login.js and add the below code inside it. Here we have a basic layout consisting of 2 input fields for email id and password, and one submit button. Once you login with credentials, you are redirected to homepage. We have used an useEffect hook below to implemented auto-login i.e. persistent login. When the Login page is loaded, the useEffect hook makes call to autoLogin endpoint on backend. In this request the cookie is also transfered and if server returns a proper response, the user is directly redirected to homepage without adding credentials.

// Login.js

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const [userInfo, setuserInfo] = useState({ id: "", password: "" });
  const handleOnChange = (e) => {
    setuserInfo({ ...userInfo, [e.target.name]: e.target.value });
  };
  const navigate = useNavigate();

  useEffect(() => {
    async function autoLogin() {
      const response = await fetch("http://localhost:5000/autoLogin", {
        method: "GET",
        credentials: "include",
      });
      if (response.status === 200) {
        navigate("/homepage");
      } else {
        navigate("/");
      }
    }
    autoLogin();
  }, []);

  const submit = async (e) => {
    e.preventDefault();

    if (userInfo.id.trim().length > 0 && userInfo.password.trim().length > 0) {
      const response = await fetch("http://localhost:5000/login", {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          id: userInfo.id,
          passsord: userInfo.password,
        }),
      });
      if (response.status === 200) {
        navigate("/homepage");
      }
    }
  };

  return (
    <div className="container">
      <input
        className="input"
        name="id"
        type="text"
        placeholder="Enter ID"
        onChange={(e) => handleOnChange(e)}
      />
      <input
        className="input"
        name="password"
        type="password"
        placeholder="Enter password"
        onChange={(e) => handleOnChange(e)}
      />
      <button className="btn" type="button" onClick={(e) => submit(e)}>
        Login
      </button>
    </div>
  );
}

export default Login;

Homepage.js

Now, open Homepage.js file and add the below code. Here we have a logout button, once we click it, we are redirected to Login page and the cookie is also destroyed from the browser. Now if user goes to Login page, they need to login again, to go Homepage.

import React from "react";
import { useNavigate } from "react-router-dom";

function Homepage() {
  const navigate = useNavigate();
  async function logout() {
    const response = await fetch("http://localhost:5000/logout", {
      method: "GET",
      credentials: "include",
    });

    if (response.status === 200) {
      navigate("/");
    }
  }

  return (
    <div className="container">
      <p>This is Homepage, Welcome!</p>
      <button className="btn" onClick={logout}>
        Logout
      </button>
    </div>
  );
}

export default Homepage;

If you want to check your cookies, you can open your Developers tools and go to Application Tab -> Cookies. You can find your cookie inside http://localhost:3000 domain.

Wrapping Up

This above implementation is just a dummy demo. There are still many things you should implement to use this Persistent login feature in your applications.

1. Implement a cookie parser to work with multiple cookies.

2. Once you get authtoken, you can decrypt it and check your database for user credentials.

... so on

You can also find the entire code base on these given repositories, Frontend && Backend

The frontend repository also contains some CSS code like Login.styled.css and Homepage.styled.css. However, these files are optional in this implementation as the main motive here is to understand persistent login using cookies.

Thank you!

When we create a rendered component, React creates a virtual DOM for its element tree in the component. Now, whenever the state of the component changes, React recreates the virtual DOM tree and compares the result with the previous render.

It then only updates the changed element in the actual DOM. This process is called diffing.

React uses the concept of a virtual DOM to minimize the performance cost of re-rendering a webpage because the actual DOM is expensive to manipulate.

The issue comes when the child components are not affected by the state change. In other words, they do not receive any prop from the parent component.

React nonetheless re-renders these child components. So, as long as the parent component re-renders, all of its child components re-render regardless of whether a prop passes to them or not; this is the default behavior of React.

Profiling the React app to understand where bottlenecks are

React allows us to measure the performance of our apps using the Profiler in the React DevTools. There, we can gather performance information every time our application renders.

The profiler records how long it takes a component to render, why a component is rendering, and more. From there, we can investigate the affected component and provide the necessary optimization.

1. Keeping component state local where necessary

import { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <h3>Input text: {input}</h3>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  console.log("child component is rendering");
  return <div>This is child component.</div>;
};

Whenever the state of the App component updates, the ChildComponent re-renders even when it is not directly affected by the state change.

To ensure re-rendering a component only happens when necessary, we can extract the part of the code that cares about the component state, making it local to that part of the code.

import { useState } from "react";

export default function App() {
  return (
    <div>
      <FormInput />
      <ChildComponent />
    </div>
  );
}

This ensures that only the component that cares about the state renders. In our code, only the input field cares about the state. So, we extracted that state and the input to a FormInput component, making it a sibling to the ChildComponent.

This means, that when the state changes, only the FormInput component re-renders, and the ChildComponent no longer re-renders on every keystroke.

2. React. Lazy for Lazy Loading Components

To implement code-splitting, we transform a normal React import like this:

import Home from "./components/Home";
import About from "./components/About";

And then into something like this:

const Home = React.lazy(() => import("./components/Home"));
const About = React.lazy(() => import("./components/About"));

This syntax tells React to load each component dynamically. So, when a user follows a link to the home page, for instance, React only downloads the file for the requested page instead of loading a large bundle file for the entire application.

After the import, we must render the lazy components inside a Suspense component like so:

<Suspense fallback={<p>Loading page...</p>}>
  <Route path="/" exact>
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
</Suspense>

The Suspense allows us to display a loading text or indicator as a fallback while React waits to render the lazy component in the UI.

3. React.memo

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

In essence, if a child component receives a prop, a memoized component shallowly compares the prop by default and skips re-rendering the child component if the prop hasn’t changed:

import { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");
  const [count, setCount] = useState(0);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>Increment counter</button>
      <h3>Input text: {input}</h3>
      <h3>Count: {count}</h3>
      <hr />
      <ChildComponent count={count} />
    </div>
  );
}

function ChildComponent({ count }) {
  console.log("child component is rendering");
  return (
    <div>
      <h2>This is a child component.</h2>
      <h4>Count: {count}</h4>
    </div>
  );
}

By updating the input field, both the App component and ChildComponent re-render.

Instead, the ChildComponent should only re-render when clicking the count button because it must update the UI. Here, we can memoize the ChildComponent to optimize our app’s performance.

React.memo is a higher-order component used to wrap a purely functional component to prevent re-rendering if the props received in that component never changes:

import React, { useState } from "react";

const ChildComponent = React.memo(function ChildComponent({ count }) {
  console.log("child component is rendering");
  return (
    <div>
      <h2>This is a child component.</h2>
      <h4>Count: {count}</h4>
    </div>
  );
});

If the count prop never changes, React will skip rendering the ChildComponent and reuse the previous rendered result. Hence improving React’s performance.

React.memo() works pretty well when we pass down primitive values, such as a number in our example. And, if you are familiar with referential equality, primitive values are always referentially equal and return true if values never change.

On the other hand, non-primitive values like object, which include arrays and functions, always return false between re-renders because they point to different spaces in memory.

When we pass down an object, array, or function as a prop, the memoized component always re-renders. Here, we are passing down a function to the child component:

import React, { useState } from "react";

export default function App() {
  // ...

  const incrementCount = () => setCount(count + 1);

  return (
    <div>
      {/* ... */}
      <ChildComponent count={count} onClick={incrementCount} />
    </div>
  );
}

const ChildComponent = React.memo(function ChildComponent({ count, onClick }) {
  console.log("child component is rendering");
  return (
    <div>
      {/* ... */}
      <button onClick={onClick}>Increment</button>
      {/* ... */}
    </div>
  );
});

This code focuses on the incrementCount function passing to the ChildComponent. When the App component re-renders, even when the count button is not clicked, the function redefines, making the ChildComponent also re-render.

To prevent the function from always redefining, we will use a useCallback Hook that returns a memoized version of the callback between renders.

Using the useCallback Hook

With the useCallback Hook, the incrementCount function only redefines when the count dependency array changes:

const incrementCount = React.useCallback(() => setCount(count + 1), [count]);

Using the useMemo Hook

When the prop we pass down to a child component is an array or object, we can use a useMemo Hook to memoize the value between renders. As we’ve learned above, these values point to different spaces in memory and are entirely new values.

You can also use the useMemo Hook to avoid re-computing the same expensive value in a component. It allows us to memoize these values and only re-compute them if the dependencies change.

Similar to useCallback, the useMemo Hook also expects a function and an array of dependencies:

const memoizedValue = React.useMemo(() => {
  // return expensive computation
}, []);

Let’s see how to apply the useMemo Hook to improve a React app’s performance. Take a look at the following code that we’ve intentionally delayed to be very slow.

import React, { useState } from "react";

const expensiveFunction = (count) => {
  // artificial delay (expensive computation)
  for (let i = 0; i < 1000000000; i++) {}
  return count * 3;
};

export default function App() {
  // ...
  const myCount = expensiveFunction(count);
  return (
    <div>
      {/* ... */}
      <h3>Count x 3: {myCount}</h3>
      <hr />
      <ChildComponent count={count} onClick={incrementCount} />
    </div>
  );
}

const ChildComponent = React.memo(function ChildComponent({ count, onClick }) {
  // ...
});

Every time the App component renders, it invokes the expensiveFunction and slows down the app.

The expensiveFunction should only be called when the count button is clicked, not when we type in the input field. We can memoize the returned value of the expensiveFunction using the useMemo Hook so that it only re-computes the function only when needed, i.e., when the count button is clicked.

For that, we will have something like this:

const myCount = React.useMemo(() => {
  return expensiveFunction(count);
}, [count]);

Optimization techniques come with a cost if not used properly and wrapping everything in memo or useCallback won't magically make your apps fast, but using them properly and profiling along the way could be a lifesaver.

4. Windowing or list virtualization in React applications

When you want to render an enormous table or list of data, it can significantly slow down your app’s performance. Virtualization can help in a scenario like this with the help of a library like react-window. react-window helps solve this problem by rendering only the items in the list that are currently visible, which allows for efficiently rendering lists of any size.

5. Lazy loading images in React

To optimize an application that consists of several images, we can avoid rendering all of the images at once to improve the page load time. With lazy loading, we can wait until each of the images is about to appear in the viewport before we render them in the DOM.

Conclusion:

To optimize our React application, we must first find a performance problem in our application to rectify. In this guide, we’ve explained how to measure the performance of a React application and how to optimize the performance for a better user experience.

If you find these techniques helpful do share them with others and also I would love to know of any other techniques, so do comment down below

GitHub provides many functionalities that make your life easier as a developer.

In this blog, we are going to learn about GitHub Actions by using a simple example. This blog will help you to understand and get the basic idea of GitHub Actions. So, without wasting a bit. Let's start.

What are GitHub Actions?

In simple words, GitHub Actions help us to do things automatically when any event occurs.

Definition

GitHub Actions is a platform for automating software development, testing, and deployment. It allows us to run arbitrary code on our repository when a specific event happens.

So, with the help of GitHub Actions, you can write some code that will run whenever a particular event occurs. Events can be a PR, any issue, any push commit, and so on.

• GitHub Actions contains several components that help us to understand GitHub Actions more simply.

GitHub Actions Components

1️⃣ Event

An event is anything that can happen on a GitHub repository. It goes from pushing a code, creating a branch, opening a pull request, and even commenting on an issue. The list of triggers is much longer: you can check it out here.

2️⃣ Workflows

A workflow is a configurable automated process that runs one or more jobs.

Workflows are defined in YAML files and kept in the repository root directory in the .github/workflows directory. A repository can also have multiple workflows.

3️⃣ Jobs

A job is a collection of tasks executed in a workflow when triggered by an event. Each step is either a script or a Github action. A workflow can have multiple jobs that run in parallel.

4️⃣ Runners

Runners are processed on a server and run the workflow when triggered. Each runner is responsible for executing a given job. Runners are hosted in the cloud but can also be self-hosted in custom cloud environments.

5️⃣ Actions

Actions are individual tasks: they are called inside a job. Actions used to perform complex tasks that you may call multiple times and import into your workflows. You can build your actions or reuse some open-source actions from the GitHub marketplace and add them to your workflow directly when they meet your needs.

In this image, you can see the working of GitHub actions. You'll understand more once you see it with an example.

GitHub Actions Example

Now we will see a quick example of GitHub actions. This example will be short but will help you in grasping GitHub actions.

Go to your GitHub and create a new repository. Click on this new button to create a new repo.

Enter the name of your repository. I named github-actions-example.👇

Now choose the visibility 👆 of your repo. I will pick private because it's just an example. You can pick as per your choice.

Click on the button👇. Your repo is created.

Note - I'm doing everything in the same place (in the browser) to help you understand it better. You can follow the same process with any code editor if you want.

Click on create a new file. 👇

Enter your file name. I am using a JS file. You can make it as per your choice.

Start writing content in this file. I am writing this, 👇 you can write any program.

Now scroll down a bit and click on the the commit button. You can also write your commit message here.

File created. 👇

Adding GH Actions

Now we will add the github actions to our repo.

Note- Github Actions should be in a specific folder.

Click on the Add File button and create a new file.

Please enter the folder name(be sure to use the same name). I named .github (press the forward slash to enter into this folder) and create a new folder workflows. Into this folder, enter the name of your file(you can write any name here). This file should be a yaml. I named it build.yml 👇

In this file, we will be writing out github actions.

So, we will start with the name. This is the name of your github action.

name: build

Now we will add trigger. The triggers can be a push, a pull, etc.

name: Build
on: [push]

Here we are using push. As a result, whenever someone pushes code to this repo, the github action is triggered.

The next part is to define Jobs(we have learned about jobs above).

name: Build
on: [push]

jobs: 
  build:    //this is the name of the job. You can give any name
    runs-on: windows-latest  // enter your machine name. If you're using Ubuntu, write ubuntu-latest. I am using windows.

In this job, we will have steps, and you can define multiple steps inside this job. Each step is either a script or a Github action.

• So, the first thing we want to do is check out the code so we can use it in a built-in GitHub action where we say, check out, and we're going to use version three(you can also use v2). 👇

Next, we'll determine whether the code being pushed contains the node environment or not. So, for this, we will set up a node like this 👇

...

jobs: 
  build: 
    runs-on: windows-latest
    steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3

There are many versions of node, and everyone uses different versions. So, how will we specify which node version will correct for this repo? So, for this, we can use Variables inside steps.

To use variables, you can write like this 👇

...

steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: 
         node-version: '16'

Here 👆 you can see that I used node version: 16. It means that whenever someone pushes a code to this repo, it should contain a node with version 16. If the code does not include version 16, The run fails, or if it is, the job succeeds.

You can choose any version 16, 15, 14, etc.

Your code should now look like this.👇

The next step is to execute the command to execute the code in our index.js file. The run command can be an npm ci or npm install step, but in this case, we'll use 'node' to call our 'index.js' file. The next step is to execute the command that will execute our code. 👇

...

steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: 
         node-version: '16'
      - run: node index.js

Here 👆 you can see that I use the run then, with the help of the node command, I'll call our index.js file.

Now our whole code will look like this. 👇

And that's it. You can see that you may repeat the processes within the job or have another job. So, once this job is complete, run the following one.

• For now, we will commit this file. You can enter your commit message and click on the commit button.👇

After you've committed your file, go to the 'code' tab and look for the orange circle . It means your github actions are working. 👇

Whenever you or someone pushes any code, the github action will run.

You can also check this by clicking on this Action tab. Here you can see your success and failure runs of actions. By clicking on this successful one,👇

and then, this 👇 build file,

You can see all your different steps.👇

You can also explore them by clicking on each stage. If you click on this 'run node,' you can view the contents of our 'index.js' file.👇

Wrapping Up

That's all for now; hopefully, you now understand the fundamentals of Github Actions. I hope this article clarifies things.

If you learn something from it, share it with your friends and like this blog.

Reference

You can join my learnings

• GitHub

• Twitter

• LinkedIn

• ShowwCase