DEV Community: Sahil Jain

Open Sourcing My Biggest Freelancing Project That Made Me $5000 In Just 2 months of work

Sahil Jain — Mon, 14 Nov 2022 15:29:41 +0000

I am open-sourcing my biggest freelancing project which is a full fledged Business Management System that i created for a Canadian painting company. Today, all his company’s day-to-day operations which includes Payrolls, Expenses, Invoices generation, Estimates generation, Time Tracking, Production Calendar, client emailing etc… are managed on this system.

I am open sourcing this project to help new devs who are struggling to get their first freelancing client or first dev job.

I want to help new #developers by providing a ready-to-use project which they can use to show their skills to their clients or future employers and get their first client or first dev job.

I have written a whole article that contains all the info of the project with GitHub and the Project Demo Link. Pls, checkout that and lmk what u think abt it.

Article Link

Also before clicking on the link, It would really help this tweet to help more new devs if u give a like and share to the first tweet of this thread.

Thanks for reading!!❤️

React Hooks Explained: useEffect( ) (By Building An API Driven App)

Sahil Jain — Sun, 27 Jun 2021 20:46:29 +0000

Original Interactive Post Link => https://webbrainsmedia.com/blogs/react-hooks-explained-useEffect-hook

In the previous article, I talked about the useState react hook. In this article, We will talk about the useEffect hook. which gives us the combined ability of these three famous React class lifecycle methods => componentDidMount, componentDidUpdate and componentWillUnmount. So, Lets start exploring this powerful hook by building a Coronavirus Tracker Application.

The Coronavirus Tracker App

Let's start by first defining the basic React functional component.

import React from 'react';

export const CoronaApp = () => {
  const renderButtons = () => {
    return (
      <div>
        <button style={{ margin: '5px' }}>Worldwide</button>
        <button style={{ margin: '5px' }}>USA</button>
        <button style={{ margin: '5px' }}>India</button>
        <button style={{ margin: '5px' }}>China</button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
    </div>
  );
};

Now, let's define two states =>

data: To store the tracking data that is fetched from the API
region: To store the current region

import React, { useState } from 'react';

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
    </div>
  );
};

Now, We will use axios to fetch the data from the API inside our useEffect hook. But before that, Let's first look at the basic usage of useEffect.

The most basic way to use the useEffect hook is by passing a single function as its argument like this =>

useEffect(() => {
  console.log('I will run on every render');
});

By defining useEffect like this, Makes this hook behave like componentDidUpdate lifecycle method meaning it will run on every single render of our functional component.

To make the useEffect to behave like componentDidMount i.e. Make it to run only on the first render of our functional component. We need to pass an empty array as the second argument in the useEffect hook like this =>

useEffect(() => {
  console.log('I will run only on first render');
}, []);

We can also pass a value in the array. By doing this, We are depending the running of useEffect hook on the state of the value passed. Like if we take an example of our corona tracker app, We want our useEffect to only run when the value of the region changes. So, We will define our useEffect hook like this =>

useEffect(() => {
  // Data fetching from the API
}, [region]);

Okay! So now let's get back to our tracker app and use the useEffect hook to fetch the data from the API.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');

  useEffect(() => {
    axios
      .get(
        region === 'all'
          ? `https://corona.lmao.ninja/v2/${region}`
          : `https://corona.lmao.ninja/v2/countries/${region}`
      )
      .then((res) => {
        setData(res.data);
      });
  }, [region]);

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
      <ul>
        {Object.keys(data).map((key, i) => {
          return (
            <li key={i}>
              {key} : {typeof data[key] !== 'object' ? data[key] : ''}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

Lets Quickly also add a collapse info button.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');
  const [inDetail, setInDetail] = useState(false);

  const dataLen = Object.keys(data).length;

  useEffect(() => {
    axios
      .get(
        region === 'all'
          ? `https://corona.lmao.ninja/v2/${region}`
          : `https://corona.lmao.ninja/v2/countries/${region}`
      )
      .then((res) => {
        setData(res.data);
      });
  }, [region]);

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setInDetail(!inDetail);
          }}
        >
          {inDetail ? 'Show Less' : 'Show More'}
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
      <ul>
        {Object.keys(data).map((key, i) => {
          return (
            <span key={i}>
              {i < (!inDetail ? 10 : dataLen) ? (
                <li key={i}>
                  {key} : {typeof data[key] !== 'object' ? data[key] : ''}
                </li>
              ) : (
                ''
              )}
            </span>
          );
        })}
      </ul>
    </div>
  );
};

Now, If you open the developer console and go to the network tab, you will notice that when you click on the 'Show Less/Show More' button, the useEffect will not run. It will only run when you change the value of the region by clicking on any country button. That is happening because we passed the value of region in the array as the second argument of our useEffect hook. If we remove the region from the array it will run only the first time and if we remove the array then, it will run everytime on every state change event.

`useEffect` Clean Up

If you have used React then, you must be familiar with this warning that comes up in the console

Can't perform a React state update on an unmounted component. This is a no-op,
but it indicates a memory leak in your application. To fix, cancel all
subscriptions and asynchronous tasks in a useEffect cleanup function.

This message is simply saying to us that please don't try to change the state of a component which has already been unmounted and its unavailable.

This error is very common when we subscribe to a service but forgot to unsubscribe or a component gets unmounted before finishing our async operation. To prevent this we can run a cleanup inside our useEffect hook.

To do a cleanup, Simply return a function within the method in the useEffect hook like this =>

useEffect(() => {
  console.log('Doing some task like subscribing to a service');

  return () => {
    console.log('Cleaning up like unsubscribing to a service');
  };
});

If you observe the console you will see the running pattern like this =>

Output:

You can see that the cleanup will run before the task in useEffect skipping the first run of the useEffect hook. The cleanup will also run when the component will get unmounted.

Thats it, that is all you need to know about the useEffect hook. If you like my articles please consider liking, commenting and sharing them.

Cheers 🍻!!

Original Interactive Post Link => https://webbrainsmedia.com/blogs/react-hooks-explained-useEffect-hook

React Hooks Explained: useState( )

Sahil Jain — Sun, 27 Jun 2021 20:34:36 +0000

Original Interactive Post Link => https://webbrainsmedia.com/blogs/react-hooks-explained-useState

Nowadays, managing state is the most crucial part in any application's architecture. Most applications behaviour depends on the values of states defined in them, So understanding how to manage it efficiently becomes very important. Before hooks introduction in React version 16.8, the only way to use state in your application is through class component. But now with the help of useState hook we can manage state in our functional components too. So, in this article we will be learning everything that we need to know about useState to get started with stateful functional components.

Comparing State Management in classes and functions

Lets start by understanding the use of useState hook by looking at an example of a simple counter application written using React's functional component.

import React, { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Use the below button to increase the count');

  return (
    <div>
      <p>Counter: {count}</p>
      <p>{msg}</p>
      <button onClick={() => setCount(count + 1)}>Count</button>
    </div>
  );
}

For comparison, lets also rewrite it into a class component.

import React, { Component } from 'react';
export class CounterClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      msg: 'Use the below button to increase the count',
    };
  }

  render() {
    return (
      <div>
        <p>CounterClass: {this.state.count}</p>
        <p>{this.state.msg}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Count
        </button>
      </div>
    );
  }
}

Okay now lets compare each aspect one by one.

Defining initial state

In a class component, initial state is defined as an object inside the constructor containing all the state for the component.

constructor(props) {
  super(props);
  this.state = {
    count: 0,
    msg: 'Use the below button to increase the count',
  };
}

But in a functional component, we define the initial state by passing it as an argument in the useState hook.

useState(initialState);

The return value of useState hook is an array containing the current state and a function to update the value of current state.

const [state, setState] = useState(initialState);

Now, like in a class component we can define all state for a component in a single useState hook.

const [state, setState] = useState({
  count: 0,
  msg: 'Use the below button to increase the count',
});

But it is a recommended practice to use individual useState hook for managing each state. As it is cleaner and easier to maintain.

const [count, setCount] = useState(0);
const [msg, setMsg] = useState('Use the below button to increase the count');

Now, there can be situations where the initial state you are defining may require time to get resolve. Passing this as initial state in useState hook can slow down the whole application. As you know, in functional components the initial state is declared in the render function and its value updates at every render. This is not a problem in class component as the initial state is defined in the constructor which is called only once at the start.

But there is a solution, useState also take function as the argument. the useState will run this function only once when the component is rendered first time. We can pass the function in useState like this

useState(() => {
  // Some heavy computation task
});

Updating the State

In class component, we can update the count by calling this.setState.

this.setState({ count: this.state.count + 1 });

Or by returning the updated value of count from a function in this.setState.

this.setState((prevState) => {
  return { count: prevState.count + 1 };
});

In functional components, as we are using individual useState for each state. We can easily update the value of count by calling the setCount function like this

setCount(count + 1);

But if you are depending on the previous state for updating to new state. It is recommended to use the function in setState like this

setCount((prevCount) => prevCount + 1);

The reason behind this is say you want to update the state two times in a function and you try to do it like this

export function Counter() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Use the below button to increase the count');

  return (
    <div>
      <p>Counter: {count}</p>
      <p>{msg}</p>
      <button
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
        }}
      >
        Count
      </button>
    </div>
  );
}

But you will see that the count value is still updating by one. This is because the count value in the setCount is the same when we render our functional component and count value doesn't change inside of the function from where it is called. So, in the above code the count value is same in both setCount, overriding eachothers value resulting in value of count increased by just one.

Now, if we use the function in setCount. We can get the desired result as the updated count value gets stored in the prevCount and we can use the prevcount to correctly update the value of count inside the function.

export function Counter() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Use the below button to increase the count');

  return (
    <div>
      <p>Counter: {count}</p>
      <p>{msg}</p>
      <button
        onClick={() => {
          setCount((prevCount) => prevCount + 1);
          setCount((prevCount) => prevCount + 1);
        }}
      >
        Count
      </button>
    </div>
  );
}

Lastly, if you are using the single useState hook to manage all states like this

const [state, setState] = useState({
  count: 0,
  msg: 'Use the below button to increase the count',
});

You need to remember that when updating only the value of count. Unlike this.setState, setState will overwrite the whole state object to the new object having only value of count. You can see in the output of the code below that after clicking the count button the message will get dissappear.

export function Counter() {
  const [state, setState] = useState({
    count: 0,
    msg: 'Use the below button to increase the count',
  });

  return (
    <div>
      <p>Counter: {state.count}</p>
      <p>{state.msg}</p>
      <button onClick={() => setState({ count: 1 })}>Count</button>
    </div>
  );
}

In order to avoid this you will need to pass the old state with the new state in setState.

export function Counter() {
  const [state, setState] = useState({
    count: 0,
    msg: 'Use the below button to increase the count',
  });

  return (
    <div>
      <p>Counter: {state.count}</p>
      <p>{state.msg}</p>
      <button
        onClick={() =>
          setState((prevState) => {
            // Expanding prevState object using spread operator
            return { ...prevState, count: 1 };
          })
        }
      >
        Count
      </button>
    </div>
  );
}

Conclusion

useState provides a cleaner and a maintainable way to manage states in an application. After reading this article you are ready to start using useState in your react projects like a pro.

Original Interactive Post Link => https://webbrainsmedia.com/blogs/react-hooks-explained-useState

Step By Step Guide To Create A Twitter Bot Using Nodejs Hosted On DigitalOcean For Free

Sahil Jain — Sun, 27 Jun 2021 20:25:54 +0000

Original Post Link => https://webbrainsmedia.com/blogs/twitter-bot-using-nodejs-hosted-on-digitalocean

Recently, I posted the tweet shown below. The special thing about this tweet is that when the like or retweet counter gets updated my profile name will also get updated to show the current likes and retweet value. This is done by the Nodejs script running behind the scene on a DigitalOcean Droplet.

To see this in action you need to like and retweet the below tweet (It will take a minute to reflect the changes in the profile name)

So, In this article i will explain all the steps that i took to create this twitter bot from scratch and also explain how you can host it on the DigitalOcean Droplet for free.

Steps:

Firstly, If you are new to DigitalOcean. Then, you need to create a new digitalocean account using this Link.

Complete the simple signup process and visit the DigitalOcean dashboard by clicking on the DigitalOcean Logo. After that click on the 'New Project' option to create a new project.

After creation, You will see your project been added on the left sidebar. Now, click on the 'Get Started with a Droplet' Button to create your new Droplet (DigitalOcean Droplets are simple Linux-based virtual machines (VMs) that run on top of virtualized hardware)

After this, You will be asked to configure your droplet. For image selection we will start with a fresh 'Ubuntu 20.04(LTS)x64' image.

Now, Select the Basic $5 Plan for our Droplet.

Now, Scroll down directly to 'Authentication' Section and select SSH Keys as the Authentication Method. Click on 'New SSH Key' Button to add a new SSH Key. After clicking, A modal will open asking for your public SSH key.

To create a new SSH Key pair just type the below command in your terminal.

ssh-keygen -o -t rsa -C "your@email.com"

(Remember to replace the comment with your own email)

After That, you will be asked for the path to save the keys. hit enter to accept the default location.

Generating public/private rsa key pair.
Enter file in which to save the key (/home/sj/.ssh/id_rsa):

Next, you will get an option to provide the passphrase to make your keys more secure. This is optional and you can skip it by pressing enter two times.

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Finally, After your keys are generated. You will see the below message.

Your identification has been saved in /home/sj/.ssh/id_rsa
Your public key has been saved in /home/sj/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:40XYRaLv66J9UVk1wrMVgMFQh0/BaV5OhJG2ZsOsbEU your@email.com
The key's randomart image is:
+---[RSA 3072]----+
|         .=+O*O=o|
|         + *.Eo+.|
|        o o XoO  |
|         o  o% . |
|        S +.= .  |
|       . +.+     |
|        . o.     |
|       .. ..     |
|      ...+o      |
+----[SHA256]-----+

So, we have generated our SSH key pairs. Now, we can access content of our public key by using cat command.

cat ~/.ssh/id_rsa.pub

Output:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDOXmwRpIsoXEQsKgw1Y43+yJ8JaU2iY1uc45pg7VcD9Pim748LcUzoa8YHF14yE6LeD9YVZcdu1PHC2xOJP5/eVzweBEFHq4onzNZZ5mO04+2WZQB72d6drJKJce+JXtHv8S3PWZQFYXA6cueBZwpiSeMI1Bu5Sz+idafsw4QY01E9JBDWOtx8d468u2uLeMl8rlFj+0uiN/K9tDlMuiH3U8B3XcH3bYBky0C2bQxeSZ4l3o/X76rt0tythOxxd/Xasw461wFQYYNYqLRZKHxryg/5uTBzOMIVXBykTzH1ffBx/BoZioBVsWeH/uPC5i6zle800MZEBylWDpHh8VBp7NBrEQEwJqPrHEtchIyiFkBSMUKoAUku2EzyT7aFxM+O0hAJMZ9wqHX0qdF0zJb0U4rMysyuAs+MVK54e6dMXqV0ai03jOde9/TibDMdeKYZ8SygxhbKH8ibNIwwoF/YtyJoqsBRiOj8R2YN/GCnijNlB8sMq6J4XRcfl7JKyp0= your@email.comcat ~/.ssh/id_rsa.pub

Copy your public SSH key and paste it in the 'SSH key content' Box and also give a name to your key. I am going to give 'Droplet SSH' Name to my key for this tutorial. After that click on 'Add SSH Key' Button.

Select your new key.

Next, Under 'Choose a hostname' Section give your droplet a name that you want. I am going to call it 'twitter-bot' for this tutorial.

Now, You are all set to go. Just click on the 'Create Droplet' Button and wait for DigitalOcean to create your droplet.

Okay, Now to access your droplet via SSH, copy your ipv4 address. In my case it is 206.189.183.112 and in your terminal type the below command with your ipv4 address.

ssh root@206.189.183.112

After that, You will be asked if you trust the host. Just enter 'yes' and click enter. If you see the prompt then, you have successfully logged in to your droplet.

Okay, Now will create our new user in ubuntu. We can do that by typing the below command.

adduser wbm

You will be prompted for a new password. Give a new password, retype it and click enter.

Next, you will be asked some user information. You can fill it if you want otherwise, Just click enter. Finalise the information by typing 'y' and clicking enter.

After this, You will get back to your root prompt again. To verify your new user just type the below command.

id wbm

Output:

uid=1000(wbm) gid=1000(wbm) groups=1000(wbm)

Now, You will notice that our user is not in the sudo group. We want to put our user in sudo to run things as administrator. So, to do thar type the below command with your username.

usermod -aG sudo wbm

Now, If you run id wbm Command. You will see your user in sudo group.

uid=1000(wbm) gid=1000(wbm) groups=1000(wbm),27(sudo)

Okay, Now to login with the user just type the below command.

sudo su - wbm

Afer this, You will see the prompt being changed to wbm@twitter-bot. You can also double check by typing the below command.

whoami

Output:

wbm

Now, Logging into our user like this is a very cumbersome process. To directly login into our user via SSH we need to authorize our SSH Key with our new user. For that we need to first make a directory by running the below command.

mkdir ~/.ssh

Next, Change the permission to 700 by typing the below command.

chmod 700 ~/.ssh

Now, We will create a new file named 'authorized_keys'.

nano ~/.ssh/authorized_keys

'authorized_keys' file will open up in the nano editor. Now we just need to paste our SSH Key into it that we previously saved while configuring our droplet with name 'Droplet SSH' (Make sure that whole key comes in single line without spaces).

After pasting, Press ctrl + x and y to save and exit.

Now, Change the permission of the file to 600 by typing the below command.

chmod 600 ~/.ssh/authorized_keys

Now, Restart the SSH Service to apply the changes.

sudo service ssh restart

Okay, Now we are all done. To test it out, Close your terminal and start a new one. Then, type the below command to login to the user via SSH.

ssh wbm@206.189.183.112

So, Now you must be logged into your droplet with your user. Next step is to install Nodejs on our server. To do that run the below commands.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

After this, Nodejs is successfully installed on our server. We can run node -v to see the node version and confirm the installation.

Okay, Now lets proceed to create our bot application. For that first create a directory in which we will store our code.

mkdir ~/twitter-bot

Now, cd into the directory.

cd twitter-bot/

Initialize Npm. This will create a package.json file.

npm init -y

Now, create a new file named 'server.js'

touch server.js

Open server.js using nano editor.

sudo nano server.js

Paste the bot script in the editor. You can also get the application files from the Github Repo .

const Twitter = require('twitter-lite')
let cron = require('node-cron');

const client = new Twitter({
    consumer_key: "paste_your_key",
    consumer_secret: "paste_your_key",
    access_token_key: "paste_your_key",
    access_token_secret: "paste_your_key"
});

const getTweetLikesAndUpdateProfile = async () => {
    const tweetData = await client.get("statuses/show", {
        id: "1315114170933628929"
    }).catch(err => {
        console.log(err)
    })

    if ("favorite_count" in tweetData && "retweet_count" in tweetData) {
        const name = `SJ - this tweet has ${tweetData.favorite_count} likes and ${tweetData.retweet_count} retweets`
        await client.post("account/update_profile", {
            name
        }).catch(err => {
            console.log(err)
        })
    }

}

cron.schedule('*/1 * * * *', () => {
    console.log('running a task every 1 minutes');
    getTweetLikesAndUpdateProfile()
});

console.log('started')

After this, you just need to replace the given id with the id of the tweet that you want to track (You can easily get the id of the tweet by visiting the tweet on twitter and copying the id from the URL).

As for the Keys part, You have to first visit this Link and apply for a developer account. Once you are granted access, Create a new project and app by visiting the Twitter Developer Portal.

After this, visit the 'Keys and tokens' section and generate + copy your keys.

So, now paste your API Key And Secret in consumer_key and consumer_secret and Access Token & Secret in access_token_key and access_token_secret Respectively.

Save the changes and exit the server.js file by pressing ctrl + x and y. After this, Open the package.json file in nano editor by running the below command.

sudo nano package.json

Delete the test script and add the start script like this.

"scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node server.js"
  },

Also, Add the node dependencies that we have in our server.js file.

"author": "",
"license": "ISC",
+ "dependencies": {
+     "node-cron": "^2.0.3",
+     "twitter-lite": "^0.14.0"
+ }

Save the changes and exit the package.json file by pressing ctrl + x and y. Next, we also need to install the node dependencies. To do that run the below command.

npm install

Now, our script is ready and we can start the script by running the below command. After successfull startup you will see the log started in the console.

npm start

You can exit by pressing ctrl + c. It is recommended to use a service known as pm2 to run our application as a process. To install pm2 Run the below command.

sudo npm install pm2 -g

Now, We can start the server by running the command.

pm2 start server.js

After this, You can see our server is online and the terminal is also freed. You can now exit the server by typing exit command.

Anytime, you want to see your pm2 processess use pm2 ls command or if you want to stop a process use pm2 stop {id}.

Congrats, You have successfully deployed your first nodejs application to the cloud. If you have any problem, Comment it down and i will try to resolve it ASAP.

Cheers 🍻!!

Original Post Link => https://webbrainsmedia.com/blogs/twitter-bot-using-nodejs-hosted-on-digitalocean

How To Create A Floating Action Button Using Material UI In React

Sahil Jain — Sun, 27 Jun 2021 20:10:17 +0000

Original Post Link => https://webbrainsmedia.com/blogs/how-to-create-a-floating-action-button-using-material-ui-in-react

Recently, I added the FAB Button present at the bottom left position, providing links to my social accounts and i am very happy with the final result. I used Material UI for this and damn it is so easy and awesome. In this article i am going to describe all the steps that i took to create this beautiful FAB button.

Steps:

1) Install Dependencies

Run the below command to install all the dependencies.

yarn add @material-ui/core @material-ui/icons @material-ui/lab

2) Create A New Functional Component

-----------------------------------------
||src/components/social-tray/social.tsx||
-----------------------------------------

import React from 'react';

export default function SpeedDialTooltipOpen() {
  return (
    <div>hello</div>
  )
}

3) Create Material UI Styles For The FAB Button

-----------------------------------------
||src/components/social-tray/social.tsx||
-----------------------------------------

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backdrop: {
      zIndex: 1,
      color: '#fff',
    },
    root: {
      height: 0,
      flexGrow: 1,
    },
    speedDial: {
      position: 'fixed',
      bottom: theme.spacing(2),
      left: theme.spacing(2),
    },
  })
);

export default function SpeedDialTooltipOpen() {
  const classes = useStyles();
  return (
    <div>hello</div>
  )
}

4) Add `SpeedDial` Material UI Component

-----------------------------------------
||src/components/social-tray/social.tsx||
-----------------------------------------

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backdrop: {
      zIndex: 1,
      color: '#fff',
    },
    root: {
      height: 0,
      flexGrow: 1,
    },
    speedDial: {
      position: 'fixed',
      bottom: theme.spacing(2),
      left: theme.spacing(2),
    },
  })
);

export default function SpeedDialTooltipOpen() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [icon, setIcon] = React.useState(<FavoriteBorderIcon />);

  const handleOpen = () => {
    setOpen(true);
    setIcon(<FavoriteIcon style={{ fill: '#d24769' }} />);
  };


  const handleClose = () => {
    setOpen(false);
    setIcon(<FavoriteBorderIcon />);
  };

  return (
    <div className={classes.root}>
      <SpeedDial
        ariaLabel="SpeedDial tooltip example"
        className={classes.speedDial}
        icon={icon}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
        FabProps={{
          color: 'default',
          size: 'small',
        }}
      />
    </div>
  )
}

5) Add `SpeedDialAction` Material UI Component

-----------------------------------------
||src/components/social-tray/social.tsx||
-----------------------------------------

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FacebookIcon from '@material-ui/icons/Facebook';
import TwitterIcon from '@material-ui/icons/Twitter';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backdrop: {
      zIndex: 1,
      color: '#fff',
    },
    root: {
      height: 0,
      flexGrow: 1,
    },
    speedDial: {
      position: 'fixed',
      bottom: theme.spacing(2),
      left: theme.spacing(2),
    },
  })
);

export default function SpeedDialTooltipOpen() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [icon, setIcon] = React.useState(<FavoriteBorderIcon />);

  const SocialLinks: any = {
    Facebook: 'https://www.facebook.com/webbrainsmedia',
    Instagram: 'https://www.instagram.com/webbrainsmedia/',
    Twitter: 'https://twitter.com/jainsanmati846',
    LinkedIn: 'https://www.linkedin.com/in/sjcodebook/',
  };

  const actions = [
    {
      icon: (
        <FacebookIcon
          style={{ fill: '#3b5998' }}
          onClick={() => handleClick('Facebook')}
        />
      ),
      name: 'Facebook',
    },
    {
      icon: (
        <TwitterIcon
          style={{ fill: '#00acee' }}
          onClick={() => handleClick('Twitter')}
        />
      ),
      name: 'Twitter',
    },
    {
      icon: (
        <InstagramIcon
          style={{ fill: '#3f729b' }}
          onClick={() => handleClick('Instagram')}
        />
      ),
      name: 'Instagram',
    },
    {
      icon: (
        <LinkedInIcon
          style={{ fill: '#0e76a8' }}
          onClick={() => handleClick('LinkedIn')}
        />
      ),
      name: 'LinkedIn',
    },
  ];

  const handleClick = (network: string) => {
    handleClose();
    window.open(SocialLinks[network], '_blank');
  };

  const handleOpen = () => {
    setOpen(true);
    setIcon(<FavoriteIcon style={{ fill: '#d24769' }} />);
  };


  const handleClose = () => {
    setOpen(false);
    setIcon(<FavoriteBorderIcon />);
  };

  return (
    <div className={classes.root}>
      <SpeedDial
        ariaLabel="SpeedDial tooltip example"
        className={classes.speedDial}
        icon={icon}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
        FabProps={{
          color: 'default',
          size: 'small',
        }}
      >
        {actions.map((action) => (
          <SpeedDialAction
            id={action.name}
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipPlacement="right"
          />
        ))}
      </SpeedDial>
    </div>
  )
}

6) Finally, Add `Backdrop` Material UI Component

-----------------------------------------
||src/components/social-tray/social.tsx||
-----------------------------------------

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FacebookIcon from '@material-ui/icons/Facebook';
import TwitterIcon from '@material-ui/icons/Twitter';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backdrop: {
      zIndex: 1,
      color: '#fff',
    },
    root: {
      height: 0,
      flexGrow: 1,
    },
    speedDial: {
      position: 'fixed',
      bottom: theme.spacing(2),
      left: theme.spacing(2),
    },
  })
);

export default function SpeedDialTooltipOpen() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [icon, setIcon] = React.useState(<FavoriteBorderIcon />);

  const SocialLinks: any = {
    Facebook: 'https://www.facebook.com/webbrainsmedia',
    Instagram: 'https://www.instagram.com/webbrainsmedia/',
    Twitter: 'https://twitter.com/jainsanmati846',
    LinkedIn: 'https://www.linkedin.com/in/sjcodebook/',
  };

  const actions = [
    {
      icon: (
        <FacebookIcon
          style={{ fill: '#3b5998' }}
          onClick={() => handleClick('Facebook')}
        />
      ),
      name: 'Facebook',
    },
    {
      icon: (
        <TwitterIcon
          style={{ fill: '#00acee' }}
          onClick={() => handleClick('Twitter')}
        />
      ),
      name: 'Twitter',
    },
    {
      icon: (
        <InstagramIcon
          style={{ fill: '#3f729b' }}
          onClick={() => handleClick('Instagram')}
        />
      ),
      name: 'Instagram',
    },
    {
      icon: (
        <LinkedInIcon
          style={{ fill: '#0e76a8' }}
          onClick={() => handleClick('LinkedIn')}
        />
      ),
      name: 'LinkedIn',
    },
  ];

  const handleClick = (network: string) => {
    handleClose();
    window.open(SocialLinks[network], '_blank');
  };

  const handleOpen = () => {
    setOpen(true);
    setIcon(<FavoriteIcon style={{ fill: '#d24769' }} />);
  };


  const handleClose = () => {
    setOpen(false);
    setIcon(<FavoriteBorderIcon />);
  };

  return (
    <div className={classes.root}>
      <Backdrop open={open} className={classes.backdrop} />
      <SpeedDial
        ariaLabel="SpeedDial tooltip example"
        className={classes.speedDial}
        icon={icon}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
        FabProps={{
          color: 'default',
          size: 'small',
        }}
      >
        {actions.map((action) => (
          <SpeedDialAction
            id={action.name}
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipPlacement="right"
          />
        ))}
      </SpeedDial>
    </div>
  )
}

Your FAB component is now completed. To use it, import the component and place it in your main layout component like this =>

-----------------------------
||src/components/layout.tsx||
-----------------------------

import SpeedDialTooltipOpen from '../components/social-tray/social';

type LayoutProps = {
  children: React.ReactNode;
};

const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <>
        <ResetCss />
        <Sticky top={0} innerZ={9999} activeClass="nav-sticky">
          <Navbar />
        </Sticky>

        {children}

        <Newsletter />
        <Footer>
          <Link to={'/privacy-policy'} activeClassName="active-link">
            {'Privacy Policy'}
          </Link>
          ||
          <Link to={'/disclaimer'} activeClassName="active-link">
            {'Disclaimer'}
          </Link>
          ||
          <Link to={'/terms'} activeClassName="active-link">
            {'Terms Of Use'}
          </Link>
          <br />
          Copyright &copy; {new Date().getFullYear()}
          <a href="https://webbrainsmedia.com"> WebBrainsMedia</a>
        </Footer>
        <ScrollToTop
          showUnder={300}
          duration={700}
          easing="easeInOutCubic"
          style={{ bottom: 30, right: 20 }}
        >
          <ScrollUpButton />
        </ScrollToTop>
        <SpeedDialTooltipOpen />
      </>
    </ThemeProvider>
  );
};

export default Layout;

Thats it, that is all you need to do to create an awesome FAB button. You can also check this Link for reference.

Enjoy 🍻!!

Original Post Link => https://webbrainsmedia.com/blogs/how-to-create-a-floating-action-button-using-material-ui-in-react

The Console Object In Javascript

Sahil Jain — Sun, 27 Jun 2021 20:02:25 +0000

Original Post Link => https://webbrainsmedia.com/blogs/the-console-object-in-javascript

Javascript provides a global object called console which gives us the ability to access the browser's debugging console. If you have ever worked with javascript you must have used it with its log property. But it is not limited to that, try running the below command

console.log(console);

You will see the capabilities that this console object comes with.

Let's take a look at some useful ones:

1) console.log()

This is the most commonly used property. It is used to print out anything to the web console that we put inside of log().

Usage:

console.log('foo');
console.log(10);
console.log(null);
console.log(undefined);
console.log(['foo', 'bar']);
console.log({ foo: 'hello', bar: 'hi' });

Output:

2) console.table()

This property allows us to visualize data as tables inside our web console. The input data must be an array or an object.

Usage:

console.table(['foo', 'bar']);

Output:

console.table({ foo: 'hello', bar: 'hi' });

Output:

3) console.error()

This property is used to log error message to the web console. By default, the error message will appear in red color. Mainly used at the time of code testing.

Usage:

console.error('You Have Got An Error');

Output:

4) console.warn()

This property is used to log warning message to the web console. By default, the warning message will appear in yellow color.

Usage:

console.warn('You Have Got A Warning');

Output:

5) console.assert()

This property gives an error message to the web console only if the first argument is false. If assertion is true, it prints out nothing.

Usage:

let obj = { name: 'Sam', age: '20' };
console.assert(obj['birth'], `obj doesn't contain birth key`);

Output:

6) console.count()

This property logs the number of times the same instance of count() is called.

Usage:

console.count('foo');
console.count('foo');
console.count('bar');
console.count('bar');
console.count('bar');

Output:

7) console.group()

This property is used to group the output in level indented blocks in our web console. To define the group start, use console.group() and to define the end, use console.groupEnd().

Usage:

console.log('Outer Log');
console.group('Outer Group');
console.log('Level 1');
console.group('Inner Group');
console.log('Level 2');
console.error('Level 2');
console.groupEnd();
console.log('Level 1');
console.groupEnd();

Output:

8) console.time()

This property is used to keep track of the time that is passed between two console logs. To start the timer, use console.time('label') and to stop the timer, use console.timeEnd('label'). Remember to use the same label in both time() and timeEnd().

Usage:

console.time('time');
let i = 0;
while (i < 100000) {
  i++;
}
console.timeEnd('time');

Output:

9) console.trace()

This property logs the stack trace in the web console. Very useful feature when working with nested functions.

Usage:

const func1 = () => {
  const func2 = () => {
    console.trace();
  };
  func2();
};

func1();

Output:

10) Styling In Console

We can also style our logs using CSS in our web console. We just need to pass our styles as a parameter and they will get applied to the logs.

Usage:

console.log(
  '%cWebBrainsMedia',
  'background-color: black; color: orange; font-style:  italic;  font-size: 2em; padding: 10px;'
);

Output:

Original Post Link => https://webbrainsmedia.com/blogs/the-console-object-in-javascript

Connect To GitHub Using SSH

Sahil Jain — Sun, 27 Jun 2021 19:50:59 +0000

Original Post Link => https://webbrainsmedia.com/blogs/connect-to-github-using-ssh

Github provides two network protocols, HTTPS & SSH to clone, pull and push changes to your repositories from your machine. Both have their own pros and cons. Personally i use SSH for all of my Git activities. Because compared to HTTPS, using SSH keys is more secure and saves me more time by doesn't requiring me to enter my username and password every time i perform a push or pull operation. Let me elaborate on why i find SSH more secure and convienient than HTTPS.

SSH Vs HTTPS

If you are using HTTPS, you are using the same username and password of your github account to access remote repositories from your machine. So, if those details gets compromised. Then, the attacker can access everything in your account. They can even change the master password and can lock you out of your own account.

With SSH, Even if, your computer gets stolen and an attacker gets access to your private key. They will not be able to gain full control of your github account and you can quickly remove the compromised key by logging in your github account with the master password.

Setting up SSH keys for the first time requires a little setup, but in the long run, it pays by providing you the extra control and security of your account. Also, by using SSH you will never again required to type your username and password for accessing your Github account.

Steps To Generate And Add SSH Keys To Your GitHub:

1) Genrate your SSH keys

First step is to generate your own SSH key pairs. You can do that by running the below command.

ssh-keygen -o -t rsa -C "your@email.com"

(Remember to replace the comment with your own email)

After That, you will be asked for the path to save the keys. hit enter to accept the default location.

Generating public/private rsa key pair.
Enter file in which to save the key (/home/sj/.ssh/id_rsa):

Next, you will get an option to provide the passphrase to make your keys more secure. This is optional and you can skip it by pressing enter two times.

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Finally, After your keys are generated. You will see the below message.

Your identification has been saved in /home/sj/.ssh/id_rsa
Your public key has been saved in /home/sj/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:40XYRaLv66J9UVk1wrMVgMFQh0/BaV5OhJG2ZsOsbEU your@email.com
The key's randomart image is:
+---[RSA 3072]----+
|         .=+O*O=o|
|         + *.Eo+.|
|        o o XoO  |
|         o  o% . |
|        S +.= .  |
|       . +.+     |
|        . o.     |
|       .. ..     |
|      ...+o      |
+----[SHA256]-----+

2) Adding your public key to GitHub

So, we have generated our SSH key pairs. Now, we need to register our public key on github for that we can access content of our public key by using cat command.

cat ~/.ssh/id_rsa.pub

Output:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDOXmwRpIsoXEQsKgw1Y43+yJ8JaU2iY1uc45pg7VcD9Pim748LcUzoa8YHF14yE6LeD9YVZcdu1PHC2xOJP5/eVzweBEFHq4onzNZZ5mO04+2WZQB72d6drJKJce+JXtHv8S3PWZQFYXA6cueBZwpiSeMI1Bu5Sz+idafsw4QY01E9JBDWOtx8d468u2uLeMl8rlFj+0uiN/K9tDlMuiH3U8B3XcH3bYBky0C2bQxeSZ4l3o/X76rt0tythOxxd/Xasw461wFQYYNYqLRZKHxryg/5uTBzOMIVXBykTzH1ffBx/BoZioBVsWeH/uPC5i6zle800MZEBylWDpHh8VBp7NBrEQEwJqPrHEtchIyiFkBSMUKoAUku2EzyT7aFxM+O0hAJMZ9wqHX0qdF0zJb0U4rMysyuAs+MVK54e6dMXqV0ai03jOde9/TibDMdeKYZ8SygxhbKH8ibNIwwoF/YtyJoqsBRiOj8R2YN/GCnijNlB8sMq6J4XRcfl7JKyp0= your@email.comcat ~/.ssh/id_rsa.pub

Copy the above public SSH key to your clipboard

Visit github.com, Login to your account, Go to your account settings and select SSH and GPG keys option from side the menu. Click on New SSH key button.

Give your new key a relevant title and paste the public key that you have previously saved in your clipboard into the Key text box.

Finally, click Add SSH Key and enter your github password to save the key.

Now, You can use SSH to clone your repositories to your local machine.

git clone git@github.com:sjcodebook/WBM.git

Enjoy the secure freedom 🍻!!

Original Post Link => https://webbrainsmedia.com/blogs/connect-to-github-using-ssh

Replace Graphiql With Graphql Playground Using These Simple Steps

Sahil Jain — Sun, 27 Jun 2021 19:43:34 +0000

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground

Graphiql is the default IDE for working with Graphql API in Gatsby. But Gatsby also support, newer and more featured IDE known as Graphql Playground. Graphql Playground provides us with additional features like a nice fully customizable UI interface, multiple tab options, detailed docs drawer, copy CURL option etc. These features makes building queries easy and fun.
So, lets see how we can swap Graphiql for Graphql Playground.

Steps To Replace Graphiql To Graphql Playground:

1) Install dotenv dependency

For replacing the IDE we need to declare an environment variable and for that environment variable to load in process.env we need to use an dotenv package. You can install it by running this command.

npm install dotenv

2) Define the environment variable

For gatsby to know that we want to use Graphql Playground we need to define an environment variable GATSBY_GRAPHQL_IDE=playground. We can define this variable in an .env file. Its a best practice to seperate environment variables for development and production. So, we can define the env files in our root folder like this .env.development and .env.production.

├── node_modules
├── public
├── src
├── static
├── .env.development
├── .env.production

Now, In the .env.development file define this key value pair.

--------------------
||.env.development||
--------------------
GATSBY_GRAPHQL_IDE=playground

3) Update gatsby-config.js

Inside your gatsby-config.js file at the very top require the dotenv plugin and provide the path to the appropriate .env file.

--------------------
||gatsby-config.js||
--------------------
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {

Now when you run gatby develop. it will set the NODE_ENV to development, and the dotenv package will load the environment variables defined in .env.development file.

Finally, go to http://localhost:8000/___graphql and use the newer and nicer Graphql Playground IDE.

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground

Migrate From Remark To MDX In Gatsby Using These Simple Steps

Sahil Jain — Sun, 27 Jun 2021 19:37:10 +0000

Original Post Link => https://webbrainsmedia.com/blogs/remark-to-mdx-in-gatsby

MDX VS Remark

Mdx and remark are both markdown compilers i.e. they convert markdown to HTML. So, that it can be rendered on the browser. We can also write HTML in our .md file, as the final result is HTML the compiler will process it as HTML.

Coming to Remark, It gives us the advantage of extending its functionalities using plugins. Mdx is also very similar to remark and icing on the cake is it supports all remark plugins. But what makes it so popular is the ability to process JSX in .md files. Basically, it converts the markdown files into React components making it eligible for importing and rendering other components.

This MDX’s ability becomes very useful for things like data-visualization in your blog. MDX makes blogging super fun and easy. Now lets see how we can convert an existing gatsby blog to use MDX in place of Remark.

Steps To Migrate From Remark To MDX:

1) Installing MDX plugin

We first need to install the gatsby-plugin-mdx plugin with its dependencies (@mdx-js/mdx and @mdx-js/react) .

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Also remove the gatsby-transformer-remark plugin.

npm remove gatsby-transformer-remark

2) Replacing Remark Plugin With MDX

Go to your gatsby-config.js file, Replace plugin gatsby-transformer-remark with gatsby-plugin-mdx.

--------------------
||gatsby-config.js||
--------------------
- resolve: `gatsby-transformer-remark`
+ resolve: `gatsby-plugin-mdx`
options: {

Most of the sub-plugins of Remark works perfectly with MDX. We just need to change the plugins option to gatsbyRemarkPlugins to let MDX know that these are Remark plugins.

--------------------
||gatsby-config.js||
--------------------
resolve: `gatsby-plugin-mdx`
options: {
- plugins: [
+ gatsbyRemarkPlugins: [

Note: You need to add gatsby-remark-images plugin as both a sub-plugin of gatsby-plugin-mdx and a string entry in the plugins array.

--------------------
||gatsby-config.js||
--------------------
module.exports = {
  plugins: [
    `gatsby-remark-images`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              linkImagesToOriginal: true,
            },
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-smartypants`,
          },
          {
            resolve: `gatsby-plugin-feed`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
    },

3) Change File Extensions

Change your markdown files extension from .md to .mdx. This will allow MDX to recognize and process them with specified configurations.

If you don't want to change the files extention might be because of large number of files in your project. In this case you can configure MDX plugin to accept both .md and .mdx files by adding the extensions option in gatsby-plugin-mdx like this.

--------------------
||gatsby-config.js||
--------------------
{
    resolve:  `gatsby-plugin-mdx`,
    options:  {
        extensions:  [`.md`,  `.mdx`],
    },
},

Tip: If you use Vs-code as your code editor. Use this MDX extention for syntax highlighting and bracket matching in MDX files.

4) Changes In gatsby-node.js

In the createPages API, Replace allMarkdownRemark with allMdx.

------------------
||gatsby-node.js||
------------------
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;

  const blogPost = path.resolve(`./src/templates/blog-post.tsx`);
  const blogList = path.resolve(`./src/templates/blog-list.tsx`);
  const tagTemplate = path.resolve(`./src/templates/tags.tsx`);

  return graphql(
    `
      {
-       allMarkdownRemark(
+       allMdx(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {

Also, In the onCreateNode API. Where it compares the node type to create slugs, there replace MarkdownRemark to Mdx.

------------------
||gatsby-node.js||
------------------
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

-  if (node.internal.type === `MarkdownRemark`) {
+  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode });
    if (typeof node.frontmatter.slug !== 'undefined') {
      createNodeField({
        node,
        name: 'slug',
        value: node.frontmatter.slug,
      });
    } else {

5) Other Replacements

In your GraphQL queries, wherever you use allMarkdownRemark change it to allMdx and markdownRemark to mdx. Also in the mdx feild in query, change html to body.

-------------------------------
||src/templates/blog-post.tsx||
-------------------------------
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!, $tag: [String!]) {
    site {
      siteMetadata {
        siteUrl
      }
    }
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+    mdx(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
-      html
+      body
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "DD MMM, YYYY")
        description
        hasJs
        tags
        cover {
          publicURL
          childImageSharp {
            fluid(maxWidth: 1170, quality: 100) {
              ...GatsbyImageSharpFluid_noBase64
            }
          }
        }
      }
    }
-    allMarkdownRemark(
+    allMdx(
      limit: 3
      sort: { fields: [frontmatter___date], order: DESC }
      filter: {
        frontmatter: { tags: { in: $tag } }
        fields: { slug: { ne: $slug } }
      }
    ) {
      edges {

Note: There is a chance that you receive an error at build time by a plugin which is quering for allMarkdownRemark. I received this error from gatsby-plugin-feed plugin to resolve this i moved this inside gatsbyRemarkPlugins option in gatsby-plugin-mdx from the main plugins array.

Now, In your post-template file import MDXRenderer component from gatsby-plugin-mdx.

------------------------------------------------
||src/components/post-details/post-details.tsx||
------------------------------------------------
import _ from 'lodash';
import { MDXRenderer } from 'gatsby-plugin-mdx';
import { Link } from 'gatsby';

Finally, Replace dangerouslySetInnerHTML to a MDXRenderer component:

------------------------------------------------
||src/components/post-details/post-details.tsx||
------------------------------------------------
  <PostDescriptionWrapper className="post_des_wrapper">
-   <PostDescription
-     dangerouslySetInnerHTML={{ __html: description }}
-     className="post_des"
-   />
+   <PostDescription className="post_des">
+     <MDXRenderer>{description}</MDXRenderer>
+   </PostDescription>
    {tags == null ? null : (
      <PostTags>
        {tags.map((tag, index) => (
          <Link key={index} to={`/tags/${_.kebabCase(tag)}/`}>
            {`#${tag}`}
          </Link>
        ))}
      </PostTags>
    )}
  </PostDescriptionWrapper>

Conclusion

Now you can use custom React components or third-party UI elements in your markdown files. Remember that MDX uses JSX in place of HTML. So, make sure that HTML in you markdown file is valid JSX. for example, if you have used class attribute in HTML component, change it to className. So, that it doesn't create a conflict when processed by MDX.

Original Post Link => https://webbrainsmedia.com/blogs/remark-to-mdx-in-gatsby

DEV Community: Sahil Jain

Open Sourcing My Biggest Freelancing Project That Made Me $5000 In Just 2 months of work

React Hooks Explained: useEffect( ) (By Building An API Driven App)

The Coronavirus Tracker App

useEffect Clean Up

Output:

React Hooks Explained: useState( )

Comparing State Management in classes and functions

Defining initial state

Updating the State

Conclusion

Step By Step Guide To Create A Twitter Bot Using Nodejs Hosted On DigitalOcean For Free

Steps:

How To Create A Floating Action Button Using Material UI In React

Steps:

1) Install Dependencies

2) Create A New Functional Component

3) Create Material UI Styles For The FAB Button

4) Add SpeedDial Material UI Component

5) Add SpeedDialAction Material UI Component

6) Finally, Add Backdrop Material UI Component

The Console Object In Javascript

1) console.log()

Usage:

Output:

2) console.table()

Usage:

Output:

Output:

3) console.error()

Usage:

Output:

4) console.warn()

Usage:

Output:

5) console.assert()

Usage:

Output:

6) console.count()

Usage:

Output:

7) console.group()

Usage:

Output:

8) console.time()

Usage:

Output:

9) console.trace()

Usage:

Output:

10) Styling In Console

Usage:

Output:

Connect To GitHub Using SSH

SSH Vs HTTPS

Steps To Generate And Add SSH Keys To Your GitHub:

1) Genrate your SSH keys

2) Adding your public key to GitHub

Replace Graphiql With Graphql Playground Using These Simple Steps

Steps To Replace Graphiql To Graphql Playground:

1) Install dotenv dependency

2) Define the environment variable

3) Update gatsby-config.js

Migrate From Remark To MDX In Gatsby Using These Simple Steps

MDX VS Remark

Steps To Migrate From Remark To MDX:

1) Installing MDX plugin

2) Replacing Remark Plugin With MDX

3) Change File Extensions

4) Changes In gatsby-node.js

5) Other Replacements

Conclusion

`useEffect` Clean Up

4) Add `SpeedDial` Material UI Component

5) Add `SpeedDialAction` Material UI Component

6) Finally, Add `Backdrop` Material UI Component