Forem: Max Programming

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

Max Programming — Sat, 17 Dec 2022 18:20:11 +0000

Hey all 👋👋

Webhooks are a powerful tool that allow applications to communicate with each other in real-time. They are often used to send notifications or updates from one system to another without requiring manual intervention.

If you know the basics of sending a request to a REST API, you can easily use Webhooks to make your lives easier.

Today, I will show you how you can use Discord Webhooks to send personal notifications to your Discord server. This will be an easy and quick demo of how Discord Webhook works.

Discord Webhooks can be used for:

Notifying a server about updates to a website or social media account (YouTube, Twitch, Twitter, etc)
Automating messages for a welcome or goodbye message to new server members
Sending notifications about events or reminders to a server
Sharing information from other sources, such as weather reports or game updates

If you are comfortable with videos rather than articles, you can check out the video on my YouTube channel 👇

🎯 The Goal

By the end of this article, you will understand how Discord Webhooks work, and how you can use them to notify you when a user clicks on a button on your website.

🌱 Creating a Webhook

On Discord, you can easily create a webhook by following the steps below

You can't create or control a Webhook on Discord mobile. Either use the web version or the desktop version to do that.

The first step is to go into your Server Settings.

Then on the settings page, click on Integrations, and then Create Webhook.

Choose a name and avatar for your Webhook Bot, and hit Save Changes.

Make sure to copy the Webhook URL by clicking on the Copy Webhook URL button. We will need that later to interact with the Webhook.

🧪 Testing the Webhook

To test and see how our Webhook works, we will use the API Tester mobile app. You can download it from the App Store link and the Play Store link.

The rapid changes in the world have made it possible for individuals to increase their productivity and gain greater mobility by working directly from their smartphones from any location.

API Tester allows users to test APIs from anywhere, at any time, using a device that they already have with them. This can be especially useful for testing APIs while on the go or when a desktop or laptop computer is not available.

There are a few reasons I really like API Tester:

Beautiful and easy-to-use UI
Great UX
Importing data from Postman and other platforms
Environment variables
Much more...

Disclaimer: This blog post is sponsored by API Tester. However, I want to emphasize that I genuinely enjoy using their app and find it valuable. My opinions are based on my authentic experience

Creating a request

You can create a new request on API Tester, click on the Plus Button on the top-right, then select POST as your request type.

Then, paste the Webhook URL you copied earlier after creating the Webhook.

You must hide the Webhook URL because anyone with the Webhook URL can use it to send messages on your server.

Next, go to the Body section, select Raw, and open Post Data.

Inside the Post Data, add this JSON

{
  "content": "This is a test message"
}

Finally, close the Post Data popup, and hit the Send button in the top right corner.

You will immediately receive a message on your Discord server from the webhook you created.

You can learn more about API Tester from their official site:

https://apitester.org

💬 Adding the feature

To add this feature to your website, simply send a POST request to the Discord Webhook URL.

async function sendDiscordMessage(name) {
  const response = await fetch("DISCORD_WEBHOOK_URL", {
    method: "POST",
    body: JSON.stringify({ 
      content: `${name} button was clicked.`,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });
}

✨ How do I do it with Next.js?

My personal site is built using Next.js and React. I created a serverless function using the API Routes in Next.js so that my discord webhook URL is protected.

Otherwise, directly sending the request from the front end might cause your Webhook URL to be exposed.

This is my code for the backend 👇.

And this is the code for my front end 👇.

You can always find the code for my website on GitHub.

max-programming / usmans.me

🌐 my online home

Usman's Portfolio

This is a personal portfolio website created by Usman using Astro, React, Tailwind CSS & TypeScript.

Usman's Portfolio

Installation

To install this website on your local machine, you will need to follow these steps:

Clone the repository using the following command:

git clone https://github.com/max-programming/usmans.me.git

Open the project folder in your preferred code editor.
Install dependencies

pnpm install

Start the dev server

pnpm dev

Contributing

If you would like to contribute to this project, you can do so by submitting a pull request.

View on GitHub

Conclusion

I hope this article helped you understand how Webhooks work and how you can use Discord Webhooks for various tasks. Comment below how you utilized Discord Webhooks or any other type of Webhooks.

I would love to hear your thoughts on this topic. Please share your ideas and experiences in the comments section below!

🛑 Why You Should Avoid the onclick Attribute in Your Code

Max Programming — Sun, 11 Dec 2022 16:46:52 +0000

Hey everyone! It's been a while since I wrote my last article. But here I am with another topic that might be informational to you 🙂.

This time I am writing about why you should avoid the onclick attribute in your HTML and JavaScript code.

This article is not particularly about click events but rather all events in HTML and JS. The click event is a good and easy example to explain.

First, I will try to explain the various ways to handle click events or rather any events in JavaScript.

Different Ways to Handle Click Events

There are three ways I know to handle click events in HTML and JavaScript (comment below if you know more).

1. Using the `onclick` attribute

The first way I learned was by using the onclick attribute in HTML and calling a function that was written in JavaScript.

It is maybe the easiest way to handle click events. As there is nothing complicated. Everything makes sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button onclick="whenButtonClicked()">Click me</button>
    <script>
      function whenButtonClicked() {
        alert('button clicked');
      }
    </script>
  </body>
</html>

In the code above, we create a function inside our JavaScript that we then call when the button is clicked.

It will result in something like this 👇

2. Using the `addEventListener` function

The second way I learned was by using the addEventListener function inside JavaScript. I saw it for the first time in this tutorial.

At first, I felt this was unnecessary as the onclick felt easier. But with time and building large projects, I understood why this makes more sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.addEventListener('click', whenButtonClicked);
      // 2. or use anonymous function
      btn.addEventListener('click', () => {
        alert('button clicked');
      });
    </script>
  </body>
</html>

What happens here is you first select the button inside your JavaScript code with id or class etc. And then register/add an event listener called click. Then either pass the function in or use an anonymous function.

This is better because when you are going to build something large the first way, your JavaScript code will get mixed with HTML. Then maintaining your code will be very hard.

You can also remove an event listener using the removeEventListener method. By just passing in the function that was used previously.

function whenButtonClicked() {
  alert('button clicked');
}

// add event listener
btn.addEventListener('click', whenButtonClicked);
// remove event listener
btn.removeEventListener('click', whenButtonClicked);

3. Using the `onclick` property

This is by far my favourite way to handle events.

It's as straightforward as the first one.
Separated from HTML as the second one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.onclick = whenButtonClicked;
      // 2. or use anonymous function
      btn.onclick = () => {
        alert('button clicked');
      };
    </script>
  </body>
</html>

What we do in this piece of code is that we assign the onclick attribute to a function (same as the second way).

The downside of using this method is that you cannot assign multiple event listeners. If you use addEventListener. With that, you can add multiple functions to one element. And not to mention you also cannot use something like removeEventListener

So What's Wrong with `onclick`?

Now let's come to the main section of the article.

The onclick attribute is not recommended in HTML because it is considered to be a bad practice to use inline JavaScript in your HTML code.

Instead, it is better to separate your JavaScript code from your HTML code and use event listeners to handle events in your web page. This makes your code easier to read, maintain, and reuse.

In general, it is better to avoid using the onclick attribute in HTML and to use event listeners instead, as this allows you to keep your JavaScript code separate from your HTML code and makes it easier to manage and maintain.

Additionally, using inline JavaScript in your HTML can make your code more difficult to maintain and update. If you need to change the behaviour of your web page, you will have to go through your HTML code and update all of the onclick attributes, which can be time-consuming and error-prone.

Conclusion

I hope this article helped you out and made you better!

I would love to hear your thoughts on this topic. Please share your ideas and experiences in the comments section below.

🗃️ How to use Mongoose with Next.js for MongoDB?

Max Programming — Sun, 17 Apr 2022 09:08:47 +0000

Hey all 👋!

Next.js is an amazing full-stack framework and MongoDB is a great NoSQL database. Using them together will make an app super fast and awesome! In this post, we'll go ahead and set up the Mongoose ODM inside our Next.js app to make use of MongoDB!

So let's see how you can set up Mongoose in a Next.js app to connect and interact with your MongoDB database!

Setting up mongoose and the connection string

In your Next.js project, to set up mongoose you simply have to install it as a dependency just as you do with Node.js.

npm i mongoose

After installing mongoose, we'll create a folder called utils in our root and create a new file named connectMongo.js file.

In this file, we will export a function that connects us to MongoDB.

import mongoose from 'mongoose';

const connectMongo = async () => mongoose.connect(process.env.MONGO_URI);

export default connectMongo;

Also create a file named .env.local in the root of your project to store the connection URI in your environment variable and hide it from the main code.

# I am using MongoDB locally but you can use MongoDB Atlas also if you want
MONGO_URI="mongodb://localhost:27017/mongoose_nextjs_demo"

Create a basic mongoose model

Now that mongoose is set up successfully in our Next.js project, the rest of the work is quite similar to a Node.js app. I personally like to create a folder called models in the root of my project and create my model files there, just like a normal node.js app.

So now we'll create a file named testModel.js in our models folder where we'll create our mongoose model.

import { Schema, model, models } from 'mongoose';

const testSchema = new Schema({
  name: String,
  email: {
    type: String,
    required: true,
    unique: true,
  },
});

const Test = models.Test || model('Test', testSchema);

export default Test;

IMPORTANT: Notice how we use models.Test and then the logical OR operator and then use the model function by mongoose. We do that because we don't want to create a new model every single time we hit an API route in Next.js. If you don't do that and just go with model('Test', testSchema), you might face an error that would prevent creating/updating etc.

Using mongoose in API routes

Now that we have our model created, we can use it to see it in action!

Next.js is a full-stack framework, and so it also provides a node environment where we can run Node.js back-end code easily and integrate that with the frontend.

In the pages/api folder, we can create a file or folder that will ultimately create an API route and we can write back-end code in that file and call it as a REST API.

For this demo, I created a folder test and a file add.js inside of it which gives the path /api/test/add.

import connectMongo from '../../../utils/connectMongo';
import Test from '../../../models/testModel';

/**
 * @param {import('next').NextApiRequest} req
 * @param {import('next').NextApiResponse} res
 */
export default async function addTest(req, res) {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('CREATING DOCUMENT');
    const test = await Test.create(req.body);
    console.log('CREATED DOCUMENT');

    res.json({ test });
  } catch (error) {
    console.log(error);
    res.json({ error });
  }
}

Here, we import the connectMongo function and our Test model that we created from the respective files. And the big comment I have at the top is JSDoc which can be used to provide autocomplete and typing in the IDE. You can omit it if you want.

Finally, the code is simple and straightforward, you can use the normal mongoose style code to create a new document. By getting the data from req.body.

You can test it from the Thunder Client extension in VS Code, Postman or Insomnia. Whatever you wish! I like to use Thunder Client.

Create new document from front-end

Now that we have our back-end API created and we have verified that it's working, we can quickly write some front-end code to make it usable in our app.

On the homepage inside the index.js file, I changed the file so that when we click the button, a new document will get added to the database.

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  const createTest = async () => {
    const randomNum = Math.floor(Math.random() * 1000);
    const res = await fetch('/api/test/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: `Test ${randomNum}`,
        email: `test${randomNum}@test.com`,
      }),
    });
    const data = await res.json();
    console.log(data);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}>
        <button onClick={createTest}>Create Test</button>
        <h1 className={styles.title}>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}></div>
      </main>

      <footer className={styles.footer}>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Fetch and display documents

Now it's time to use Next.js's biggest feature! Server-Side Rendering. We can use SSR in Next.js to easily run back-end Node.js code as we want and the data can be easily accessible through the props to the page.

In the index.js file itself, we'll import the connectMongo and Test again and use them inside the getServerSideProps function that we have to export like this 👇

import connectMongo from '../utils/connectMongo';
import Test from '../models/testModel';

export const getServerSideProps = async () => {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('FETCHING DOCUMENTS');
    const tests = await Test.find();
    console.log('FETCHED DOCUMENTS');

    return {
      props: {
        tests: JSON.parse(JSON.stringify(tests)),
      },
    };
  } catch (error) {
    console.log(error);
    return {
      notFound: true,
    };
  }
};

In this function, we can easily fetch any data we want and it will be done on the server and then we have to return it as props. That will be accessible to the page. You can read about getServerSideProps on the Next.js docs

IMPORTANT: Make sure to sanitize the tests variable with JSON.parse(JSON.stringify(tests)) because it contains ObjectID from MongoDB instead of a normal string. This trick converts it into a string that can be passed in the return object.

That's it! After we're done fetching the data we can easily display it by accessing it through the props on our page and we can use it however we want. In this case we'll map over that data to output every document like so

export default function Home({ tests }) {
  // ...
  return (
    //   ...
    <div className={styles.grid}>
      {tests.map((test) => (
        <a
          href="https://nextjs.org/docs"
          key={test._id}
          className={styles.card}
        >
          <h2>{test.name} &rarr;</h2>
          <p>{test.email}</p>
        </a>
      ))}
    </div>
    // ...
  );
}

Finally, this is what our page looks like:

I have explained everything deeply in the YouTube tutorial below 👇👇

I hope this post helped you successfully set up Mongoose in your Next.js app. If it did, please leave a like!

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Thanks for reading ✌

🎉 Introducing Only Formats | The quickest way to format code!

Max Programming — Tue, 01 Mar 2022 07:47:57 +0000

Hey everybody!

I saw the Netlify x Hashnode Hackathon and I was very very excited to participate this time. It was quite hard to think about an idea but I finally got one!

Story

This time building an app was a weird and funny experience at the same time.

In the beginning, I, @Sunrit Jana, and @faheem_khan_dev were about to work on a different idea together, but then because of lack of time management we couldn't do so. And then I came up with this idea and finished it.

I thank them for supporting me with this project too 🙂.

Only Formats - What is it?

Only Formats is a web application that helps you quickly format code and copy it easily!!!

It makes things very easy with a very quick and simple user interface with no complications 💫.

The supported languages that Only Formats can format are:

JavaScript
TypeScript
CSS
HTML
PHP
JSON
Markdown
SQL

Motivation

The real reason and motivation behind building this app were that I saw a lot of people having doubts and when they send the code, it's mostly unformatted, thus making it unreadable.

To understand it, I had to open up VS Code or any other website that takes a lot of my time.

I built this app with a very simple set of tools to format and copy and paste code with syntax highlighting that makes things a lot better!

App tour

The first main page is very self-explanatory, you can select the language you want to format code in or search by clicking on the search icon on the top right.

I removed Java temporarily because it throws an unknown error. ISSUE

Once you've selected that, you will be redirected to that page with the tools. There might or might not be settings for a formatter an indentation. You can set that value and it will reflect changes instantly!

Paste the code or simply type it out on the code editor and once you type in the code, it will format it in one go!

It's also a PWA (Progressive Web App) so you can install it and work with it offline too

Also an API to format code is coming soon 😉!

Tech Stack

This is one of my favourite parts of the app! I enjoyed using the following Tech Stack!

Next.js with TypeScript
Chakra UI
Prettier to format code
Monaco editor for code editing
PrismJS for syntax highlight
Simple Icons (for language icons)
Netlify for deployment

Conclusion

I really enjoyed building this project and I encourage all of you to contribute to this project! It will be very nice of you to create issues and/or make pull requests to make it better and better every day 😊.

GitHub Repo

Live Website

Thanks to the folks over at Hashnode and Netlify for this amazing Hackathon! This time I learned a lot of things and most importantly about working with a deadline.

Goodbye everyone

🗨️ Build a WhatsApp API using Node & Express

Max Programming — Tue, 11 Jan 2022 12:30:43 +0000

Today, you will be able to build a WhatsApp REST API using Node.js and Express using Puppeteer and web scraping.

Although we won't be doing any web scraping, we will use a library that does everything for you already and makes it very easy to work with WhatsApp programmatically.

Setup

Express server setup

To set up the express server, we are not going to do it from scratch, we'll use a generator called express-draft by YoursTruly. Firstly, install express-draft globally and use the following command to generate an express app.

npm i -g express-draft
exp .

Install Whatsapp Web library

Caution: Installing this package will also download Chromium because of Puppeteer. To disable Chromium download, follow the steps on this post

So there's an awesome open-source Whatsapp client that connects through the Whatsapp Web browser app made by Pedro S. Lopez.

pedroslopez / whatsapp-web.js

A WhatsApp client library for NodeJS that connects through the WhatsApp Web browser app

About

A WhatsApp API client that connects through the WhatsApp Web browser app

The library works by launching the WhatsApp Web browser application and managing it using Puppeteer to create an instance of WhatsApp Web, thereby mitigating the risk of being blocked. The WhatsApp API client connects through the WhatsApp Web browser app, accessing its internal functions. This grants you access to nearly all the features available on WhatsApp Web, enabling dynamic handling similar to any other Node.js application.

Important

It is not guaranteed you will not be blocked by using this method. WhatsApp does not allow bots or unofficial clients on their platform, so this shouldn't be considered totally safe.

Installation

The module is now available on npm! npm i whatsapp-web.js

Note

Node v18+ is required.

QUICK STEPS TO UPGRADE NODE

Windows

…

View on GitHub

First, we'll install it through NPM or yarn.

npm i whatsapp-web.js

After we're done with that, we can set it up in our app.js file by following the given example.

We can alter the file as follows,

const express = require('express');
const createError = require('http-errors');
const morgan = require('morgan');
const { Client } = require('whatsapp-web.js');
require('dotenv').config();

const SESSION_FILE_PATH = './session.json';
let sessionCfg;
if (fs.existsSync(SESSION_FILE_PATH)) {
  sessionCfg = require(SESSION_FILE_PATH);
}

const client = new Client({
  puppeteer: { headless: false }, // Make headless true or remove to run browser in background
  session: sessionCfg,
});

client.initialize();

While using this library, whenever a user logs in, their information will be stored in a session.json file, which is then used to authenticate the user the next time when the server starts.

Important: Create a nodemon.json file in the root folder and add these contents to ignore the session.json file whenever it changes.

// "$schema" can be omitted it's used for IntelliSense. REMOVE THIS COMMENT
{
  "$schema": "https://json.schemastore.org/nodemon.json",
  "ignore": ["session.json"]
}

Creating routes and user login

Using events

whatsapp-web.js has a lot of events to work with, and we'll now use some of them to get the QR code, check the authentication, etc.

// Add this after express code but before starting the server

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

client.on('authenticated', session => {
  console.log('AUTHENTICATED', session);
  sessionCfg = session;
  fs.writeFile(SESSION_FILE_PATH, JSON.stringify(session), function (err) {
    if (err) {
      console.error(err);
    }
  });
});

client.on('auth_failure', msg => {
  // Fired if session restore was unsuccessfull
  console.error('AUTHENTICATION FAILURE', msg);
});

client.on('ready', () => {
  console.log('READY');
});

// Listening for the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`🚀 @ http://localhost:${PORT}`));

The above code uses events provided by the library to tackle different situations. They are pretty self-explanatory so I am not gonna explain each of them.

In the "qr" method, we create a route that sends the QR code as the response. The QR code is in raw format, meaning it needs to be generated so for the purpose of this tutorial, we'll use a library called qrcode-terminal to show the QR Code in the terminal.

// Run `npm i qrcode-terminal` before this

const qrcode = require('qrcode-terminal')

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  qrcode.generate(qr, { small: true }); // Add this line
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

The `sendmessage` endpoint

Now that we have everything set up, let's do the most exciting part that is to send a message using our own API.

For that, we create a route in the app.js file itself.

Let's create the POST endpoint for sendmessage and it will be an async function with a try-catch block.

app.post('/sendmessage', async (req, res, next) => {
  try {
    // Magic happens here
  } catch (error) {
    next(error)
  }
})

In the body of the request, the user has to enter two pieces of data.

Mobile number
Message

We'll identify those as number and message respectively. Hence, we get them from the request body, and use them to very easily send the message from the client to the given number.

To send a message, we use the client.sendMessage method and these are the arguments we need to pass in

app.post('/sendmessage', async (req, res, next) => {
  try {
    const { number, message } = req.body; // Get the body
    const msg = await client.sendMessage(`${number}@c.us`, message); // Send the message
    res.send({ msg }); // Send the response
  } catch (error) {
    next(error);
  }
});

Now here, in the sendMessage method, we pass in the mobile number and the message itself. With the mobile number, we have to attach @c.us at the very end, so we do that with template literals in JavaScript.

Testing the API

In order to test our API, we first run it using npm run dev. That will open up a browser (if you've set headless to false)

Running the server will give us the QR Code to authenticate because it's the first time. So, you have to scan it through WhatsApp.

Once authenticated, you will notice that a session.json file has been created with the following contents.

Now in VS Code itself, we'll use an extension called Thunder Client, which works like Postman for API testing. Here's the link

Create a New Request in Thunder Client, and then add the following details. In the number field, add the mobile number followed by the country code of the number.

Look at the image carefully

And then hit Send.

If the message is sent successfully, the number you entered will receive it and you will get back the msg as the response. If not, then an error.

Conclusion

You can read more about the library here

https://wwebjs.dev/

I hope you enjoyed building out the WhatsApp API using Node.js, Express, and whatsapp-web.js.

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️.

😎 How to convert a normal React form to use react-hook-form?

Max Programming — Mon, 08 Nov 2021 09:11:34 +0000

Hey everyone!

Nice to see you all around again! Today you'll find out how easy it is to use the react-hook-form library for forms instead of the normal method of forms in React.

So, the first thing is first, normally, in React we use state, and whenever the value of an input changes, we change the state. This method's good but there is a lot of code. Here's how the code looks like in this case.

import { useState } from 'react';

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (e) => {
    e.preventDefault()
    // Submit logic
  }

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type='email'
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <input
          type='password'
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </form>
    </div>
  );
}

And I personally feel that this is indeed a lot of code that could be made better. That's why you should use react-hook-form.

So to convert this normal one to use react-hook-form, we install it via NPM or Yarn.

npm i react-hook-form
# yarn add react-hook-form

And then, the first thing we have to do is get rid of the state we created, the onSubmit function and the value and onChange props too.

After we remove that bit of code, we import useForm from react-hook-form, and this is how we use it.

import { useForm } from 'react-hook-form';

export default function LoginForm() {
  const { register, handleSubmit } = useForm();

  return (
    <div>
      <form>
        <input type='email' />
        <input type='password' />
      </form>
    </div>
  );
}

Then, we use the register function as a prop in the inputs to register each input with a name to get the value of it, like this.

return (
  <div>
    <form>
      <input type='email' {...register('email')} />
      <input type='password' {...register('password')} />
    </form>
  </div>
);

Then, for the form submission, we use the handleSubmit provided by the useForm hook with our own submit function which provides us the values of the inputs directly. We can also destructure the values from it.

import { useForm } from 'react-hook-form';

export default function LoginForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => { // OR DESTRUCTURING ({ email, password })
    console.log(data.email, data.password)
    // Submit logic
  }

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}> {/* handleSubmit is invoked and onSubmit is passed into it */}
        <input type='email' {...register('email')} />
        <input type='password' {...register('password')} />
      </form>
    </div>
  );
}

This way, it automatically prevents the page from refreshing on submit.

💪 Using it with TypeScript

Using RHF with TypeScript is super easy because firstly, you don't need to install separate type definitions as they come along with RHF.

You've to define an interface for the fields you're using, and then pass it in useForm as generic.

interface LoginFields {
  email: string;
  password: string;
}

// In component
const { register, handleSubmit } = useForm<LoginFields>();

And while calling the submit function, you've to set the type of the onSubmit function to the type SubmitHandler provided directly by RHF.

import { useForm, SubmitHandler } from 'react-hook-form';

// In component
const onSubmit: SubmitHandler<LoginFields> = ({ email, password }) => { 
    console.log(email, password)
    // Submit logic
  }

This way you also get good IntelliSense in your IDE or code editor

Conclusion

You can read a lot more functionalities provided by react-hook-form on their website.

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

⚡ How to skip Chromium download in Puppeteer?

Max Programming — Sat, 21 Aug 2021 09:47:15 +0000

Hello again 👋!

If you're a Node.js developer and you've used Puppeteer for web scraping, you might have seen that it downloads Chromium whenever you install puppeteer.

Many of you people don't like to download an external web browser for this. You might have Chrome, Edge, Brave, or any other Chromium-based browser on your system so why not use that?

Step 1 - Set the environment variables

Whenever you install Puppeteer, it will first check for the environment variables listed below:

Read more on DevDocs: https://devdocs.io/puppeteer/index#environment-variables

We are interested in PUPPETEER_SKIP_CHROMIUM_DOWNLOAD and PUPPETEER_EXECUTABLE_PATH.

In your operating system, you have to set these two environment variables to these values 👇

Key	Value
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD	true
PUPPETEER_EXECUTABLE_PATH	{PATH_TO_CHROME_OR_CHROMIUM}

On Windows

Search this term Edit the system environment variables in Start Menu and open it

Click this button on the bottom right:

Click on the New button under System variables:

Enter the variable name and value as given below:

Key	Value
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD	true
PUPPETEER_EXECUTABLE_PATH	{ PATH_TO_CHROME_OR_CHROMIUM }

Find browser's path

The simplest way to find the path to your browser's executable (on Windows) is to right-click the shortcut on the desktop, and click on Open file location.

In my case, I used Microsoft Edge so this was the path: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

It'll take you to the file location and you can copy the path, and paste it into the environment variables.

Thanks for reading!

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️!

😱 Make a Random Meme API With Node.js and Puppeteer

Max Programming — Wed, 18 Aug 2021 11:27:51 +0000

👋 Hello there

Today's article is all about how you can make a Random Meme API using Node.js and web scraping. We'll be using Fastify for our API and we'll be using Puppeteer to scrape the web and get the random meme.

This random meme API was inspired by the same kind of API here. But I wanted to build it using Node.js and Puppeteer.

We'll be scraping Memedroid using the Puppeteer NPM package.

Initializing the project

First of all, we'll need to create a folder with the name we want and we'll need to initialize our Node.js app in that folder. We do it using this command:

npm init -y

Then we need two dependencies to install, simply install puppeteer and fastify.

npm i puppeteer fastify

Using Fastify for API

After we have our project set up and our dependencies installed, we're good to go with writing the code! Create an index.js file and import fastify with this code to create the server.

const fastify = require('fastify')({ logger: true });

const start = async () => {
  try {
    await fastify.listen(5555);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Once this thing is done, when we run the app using node index, our app will be running on port 5555. But let's create the base route (/ )for it.

fastify.get('/', async (request, reply) => {
  reply.send({ hello: 'world' });
});

Getting the random meme using Puppeteer

Here comes the fun part now! We'll open the web browser and get all the images from memedroid, and we'll do all of it through code.

With the puppeteer package, Chromium also comes installed to scrape the web. That's why it might have taken time for you to get installed

To skip Chromium download, you can use puppeteer-core package and add the path to your Chrome file following the docs.

We'll create a function to get all memes and then we'll pick a random one in the route.

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true }); // launch browser
  const page = await browser.newPage(); // open a page

  await page.goto(URL); // go to the page
}

We simply launch the browser and open the page for memedroid in this code 👆.

Now let's get all the <img> tags which are in the <div> with the class of item-aux-container. That's where all the memes live in.

As in the above image, inside of each <article> tag, the div with that class exists, so we simply get it using the $$eval method on the page.

This method takes two arguments:

Selector
Callback function with the element(s)

const allImages = await page.$$eval('div.item-aux-container img[src]', (imgs) => {});

We will map over the images in the callback function, and we'll return only the URL of the image from getting the src attribute. And this is how we do it.

We check if the src attribute starts with http and ends with jpeg and we return that if it does.

const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
  imgs.map(img => {
    if (
      img.getAttribute('src').startsWith('http') &&
      img.getAttribute('src').endsWith('jpeg')
    )
      return img.getAttribute('src');
  })
);

Unfortunately, that also returns to us null if that's not the case, so we filter out the nulls using the .filter() method.

const imgs = allImages.filter(img => img !== null);

Once all that work is done, we close the browser and return the array of images, this is how the whole function looks like:

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto(URL);

  const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
    imgs.map(img => {
      if (
        img.getAttribute('src').startsWith('http') &&
        img.getAttribute('src').endsWith('jpeg')
      )
        return img.getAttribute('src');
    })
  );

  const imgs = allImages.filter(img => img !== null);

  // NEW LINES
  await browser.close();
  return imgs;
}

Using Fastify to send the random meme

Finally, we will pick a random meme and send it to the user using this code

fastify.get('/', async (request, reply) => {
  const memes = await getAllMemes();
  const randomNumber = Math.round(Math.random() * memes.length);
  reply.send({ memeUrl: memes[randomNumber] });
});

Now, whenever the user visits localhost:5555, they get this:

We have our app done! Thanks for reading! You can find all the code here.

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

✨ How to make a Next.js app a PWA with offline support

Max Programming — Tue, 17 Aug 2021 17:03:41 +0000

Hello everyone 👋

In today's article, we will see how we can make a PWA out of a Next.js app! And it is going to be very exciting as the biggest feature will be offline support with a very little configuration!

📃 INDEX

Project code
next-pwa package
Getting assets
Web manifest file
PWA Configuration
Offline fallback page

Before we move on, I would like to recommend checking my video on YouTube about this if you are comfortable following along with a video. Make sure to leave a comment about any suggestions, or doubts you have 🙂.

1. Project code

For this demo, I already have a simple project setup that we can use to start or test.

You can download the source or clone the repo: GitHub Link

This repository has 2 branches, the main one contains the starter code and the pwa branch contains the complete code.

2.`next-pwa` package

The next step is to install the NPM package we need for this. It's a great package that does everything for you automatically.

npm i next-pwa
# or yarn add next-pwa

3. Getting assets

If you are familiar with making a PWA, you already know that we need different sizes of logos for our app to function properly on different devices. I found a very good website to generate these images in different sizes.

You can simply go to Icongen and select the types you want. For the sake of this tutorial, I am generating these images. And upload vercel.svg or your existing logo.

After getting all the images, add them to a new folder named icons in the project's public folder.

Rename all the file names with icon-{size}x{size}.png. For eg, icon-192x192.png

Additionally, add a maskable.png which you can either generate online or for the sake of this tutorial, I used the same 192x192 sized icon for the maskable icon.

4. Web manifest file

Now we need to create a file for the metadata about the app. Create a file named manifest.json in the public folder and copy the contents of the file from here.

You can fill up the contents as per your project, for this project, this is the data we are using

{
  "short_name": "Next PWA",
  "name": "Next PWA Tutorial",
  "description": "...",
  "icons": [
    {
      "src": "/icons/icon-36x36.png",
      "type": "image/png",
      "sizes": "36x36"
    },
    {
      "src": "/icons/icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icons/maskable.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}

Now you need to link the manifest.json file in your Next.js <Head> component in all the pages.

<Head>
  <link rel='manifest' href='/manifest.json' />
</Head>

5. PWA Configuration

In the first step, we installed the next-pwa NPM package which we will be using now. In your project's root, create a next.config.js or edit if it already exists.

We import the withPWA function from the package and wrap the export in that function, here we can add a pwa object which we will configure like so 👇

The dest property is the destination folder and we added a disable property which disables creating the service workers while we are in development.

const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
  reactStrictMode: true,
});

6. Offline fallback page

Additionally, we can also add a page to show if the user is offline, this enhances the user experience and makes it work like an actual app.

Just add a page named _offline.js in your pages folder, and next-pwa will automatically show that page if the user is offline. But the condition is that the user has to visit the website so that the offline page is cached whenever the user first visits the website.

Here are some examples of offline pages:

👆 Easy Pastes

👆 YouTube

👆 Google Meet

A final touch would be to add these files to your .gitignore file to not commit these service worker files created by next-pwa

# PWA files
**/public/precache.*.*.js
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/precache.*.*.js.map
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js

And we successfully completed the process, and now your Next.js app can be used offline, is installable as an app, and is also a PWA.

I hope it helped you make your app a PWA, let me know your experience in the comments and share it with people so that they can do it easily too.

💫 How to add routing loader using nprogress in Next.js?

Max Programming — Thu, 01 Jul 2021 12:23:14 +0000

Hey everyone 👋!

So Next.js has been very popular nowadays and I am completely switching from the good old React to the Next.js because it's of course better.

With the awesome routing system in Next.js, there are a ton of advantages like events and all that which are very useful when you dig into them.

Today, using the router in Next.js, I'll show you how you can create a page loader that shows a progress bar while we are navigating to a different page. It'll enhance the user experience on your site.

And the process is absolutely simple. Just a few lines of code as always. We'll use an NPM package called nprogress

✨ Result

1. Create a Next.js app

npx create-next-app nprogress-demo

2. Install `nprogress`

You can use npm, yarn or pnpm to do this, just install nprogress

npm i nprogress

# If you're using TypeScript, install this too
npm i -D @types/nprogress

3. Get the `nprogress.css` file

The nprogress package ships with a CSS file which it needs but you have to import it in the _app.js file, so you can create a nprogress.css file in your styles folder and copy and paste styles from this CDN

After saving the file, you can edit anything you want in that one, I made some changes which fit my needs are as follows:

I changed every background colour from #29d to #0070f3 and you can change it to any other colour you want

/* I made these changes in nprogress.css */
#nprogress .bar {
  height: 3px;
}
#nprogress .spinner-icon {
  width: 25px;
  height: 25px;
  border: solid 3px transparent;
}

And finally, you can import the CSS file in the _app.js file

// _app.js
import "../styles/nprogress.css";

4. Add a new page (for the demo)

I simply created a second.js file in the pages folder with these contents. It uses getServerSideProps where we fetch some data on request of the page, so that we get a slight delay while navigating

// second.js
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function SecondPage({ data }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Second page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Second page</h1>
        <p className={styles.description}>
          This is the second page. Go to{" "}
          <Link href="/">
            <a>Home</a>
          </Link>
        </p>

        <div className={styles.grid}>
          {data.map(user => (
            <div className={styles.card} key={user.id}>
              <h2>{user.name} &rarr;</h2>
              <p>Works in {user.company.name}</p>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
  return {
    props: {
      data: data.slice(0, 4),
    },
  };
};

5. Use `Router` events to show the progress bar

To show the progress bar, we use the Next.js Router's events. You can do all the logic inside the _app.js file.

// _app.js
import Router from "next/router";
import nProgress from "nprogress";
import "../styles/globals.css";
import "../styles/nprogress.css";

Router.events.on("routeChangeStart", nProgress.start);
Router.events.on("routeChangeError", nProgress.done);
Router.events.on("routeChangeComplete", nProgress.done);

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

When the routeChangeStart event fires, we start the progress bar by using nProgress.start function.

Don't invoke the function like nProgress.start(), pass it without the parenthesis because there should be a callback function in the events.

And when the other two events routeChangeError, routeChangeComplete occur, we simply pass in nProgress.done which completes the progress bar.

And that's it 🥳 !

In these 5 simple steps, we managed to add a progress bar while navigating to different pages in Next.js. Let me know all your questions in the comments and share this knowledge to others to help them.

Finally, you can check me out on YouTube, Twitter, etc. Thanks for reading!

🐛 How to quickly spot errors in your JavaScript code in VS Code

Max Programming — Wed, 14 Apr 2021 13:06:12 +0000

Hello again 👋

This is a very amazing way to use the powers of Visual Studio Code in your JavaScript files to quickly spot errors.

You might know about TypeScript . It's a wonderful superset of JavaScript which gives JS the power of types and helps in debugging right inside your IDE (especially VS Code). This simple trick will even help you if you are not a fan of types and TypeScript.

Most of the times, there are very small and silly bugs in our JavaScript code which we can't catch in the development process and can cause high impact in production. A simple example is this 👇

In this example above, we are using Vanilla JavaScript where we cannot spot the error which is on line 7. We could've used TypeScript here, but if you want to use JavaScript, you can easily spot errors by adding only a comment on the top.

As you can see the warning we got by hovering over the parameter in the function is telling us that this parameter is of any type which is not good at all. So how can you expect only a string into the function without TypeScript?

The easiest way to do it is to add the string argument in the function call and then do this 👇.

Arrow function

Normal function

The 2nd way looks neater to me.

Besides, you can also spot silly bugs which are very bad. Some are listed below:

Without // @ts-check

With // @ts-check

TIP: To enable // @ts-check for every .js file, you can simply enable this setting in VS Code.

And to ignore checking in any file, just use // @ts-nocheck on the top of the file.

For more information about those types for parameters, you can refer to the JSDoc Documentation.

🎨 How to create Twitter Profile Hover Card using HTML and CSS

Max Programming — Fri, 29 Jan 2021 15:29:47 +0000

Welcome back developers! 👋

In this post, we'll see how you can recreate the hover card by Twitter using HTML and CSS, so let's get started.

This hover card will appear when you hover over any profile. But in our case, we will just make the over card.

I also have a video on YouTube on this which you might want to check out too.

This is how it will look like in the end.

🧱 HTML

The HTML is very self explanatory and very easy. We create wrappers around and then we create three <div> tags which will contain the content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twitter Hovercard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="profile">
          <div class="main-profile"></div>
          <div class="user-bio"></div>
          <div class="user-follows"></div>
        </div>
      </div>
    </div>
  </body>
</html>

1. `main-profile` div

The main-profile div will basically contain the Profile Picture, Name, Handle and the Follow button. Which will be in the first row. We will then use flexbox to style it.

<div class="main-profile">
  <div class="user-info">
    <img src="./profile.jpg" alt="Profile Pic" />
    <h3>Max Programming</h3>
    <p>@MaxProgramming1</p>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</div>

2. `user-bio` div

This div will contain the bio of the user, in this case my bio. You can separate it into different lines using the <br /> tag.

<div class="user-bio">
  <p>
    👨‍💻 Programmer, Learner, YTuber, Blogger, and Cricket lover!
    <br />
    😊 15 years old
    <br />
    My name is Usman
    <br />
    ☪ Muslim
    <br />
    Blog: <a href="http://blog.usman-s.me">blog.usman-s.me</a>
    <br />
    YT:
    <a href="http://youtube.com/MaxProgramming">youtube.com/MaxProgramming</a>
  </p>
</div>

3. `user-follows` div

This is the simplest one of all. You just create two <div> tags inside it with Following and Followers and their numbers.

We use the <b> tags to bolden out the numbers.

<div class="user-follows">
  <div><b>613</b> Following</div>
  <div><b>471</b> Followers</div>
</div>

This is what we get after this table is done. Let's now style it out with the magic of CSS.

🎨 CSS

1. Resets

At the start, we set the margin and padding to 0, and set the box-sizing to border-box.
And then we set the font for every element to be sans-serif according to the system.

We style the container to center everything on the page

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

2. The Card

Now to style the card div, we and add shadow, border radius and padding to it.

.card {
  box-shadow: 1px 1px 10px 1px #a1a1a1;
  border-radius: 10px;
  padding: 20px;
}

3. Main Profile

Now as the main-profile contains the main details, we'll position it better using Flexbox.

.main-profile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

And then we will add some stylings to make the profile picture smaller, increase the size for the name, and change the color of the handle.

.user-info img {
  width: 100px;
  border-radius: 50%;
}

.user-info h3 {
  font-size: 1.3rem;
}

.user-info p {
  color: #5b7083;
}

This is the progress so far

Let's style the Follow button now.

Here, we set the border and the text to the twitter blue color, the background is set to the same color but transparent. We make the text bold, and add a hover effect with a transition.

.follow-btn button {
  font-size: 1.5rem;
  border: 3px solid #1da1f2;
  border-radius: 25px;
  background-color: rgba(29, 161, 242, 0);
  padding: 8px 20px;
  margin: 5px;
  font-weight: bold;
  color: #1da1f2;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.follow-btn button:hover {
  background-color: rgba(29, 161, 242, 0.2);
}

Now we got the perfect button with the hover effect as well. Which change the background color's opacity.

4. User bio

The bio is fairly easy. We just change the color of the text, add some margin and change the color of the <a> tags like the styles of Twitter.

.user-bio {
  color: #0f1419;
  margin-bottom: 10px;
}

.user-bio a {
  color: #1da1f2;
  text-decoration: none;
}

.user-bio a:hover {
  text-decoration: underline;
}

5. User Follows

This is the easiest part. We use flexbox, we add some margins to the <div>. And we change the color of the text.

.user-follows {
  display: flex;
  color: #5b7083;
}

.user-follows div {
  margin-right: 10px;
}

.user-follows b {
  color: black;
}

And that is how you recreate Twitter's hover card using HTML and CSS. I hope you like this blog post. If you do, please leave a like comment down below about your experience.

Here's the source code.

max-programming / twitter-hovercard

Twitter Hovercard using HTML and CSS

Code for the YouTube video

View on GitHub

Thanks for reading!

Forem: Max Programming

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

🎯 The Goal

🌱 Creating a Webhook

🧪 Testing the Webhook

Creating a request

💬 Adding the feature

✨ How do I do it with Next.js?

max-programming / usmans.me

🌐 my online home

Usman's Portfolio

Table of Contents

Installation

Contributing

Conclusion

🛑 Why You Should Avoid the onclick Attribute in Your Code

Different Ways to Handle Click Events

1. Using the onclick attribute

2. Using the addEventListener function

3. Using the onclick property

So What's Wrong with onclick?

Conclusion

🗃️ How to use Mongoose with Next.js for MongoDB?

Hey all 👋!

Setting up mongoose and the connection string

Create a basic mongoose model

Using mongoose in API routes

Create new document from front-end

Fetch and display documents

🎉 Introducing Only Formats | The quickest way to format code!

Story

Only Formats - What is it?

Motivation

App tour

Tech Stack

Conclusion

🗨️ Build a WhatsApp API using Node & Express

Setup

Express server setup

Install Whatsapp Web library

pedroslopez / whatsapp-web.js

A WhatsApp client library for NodeJS that connects through the WhatsApp Web browser app

About

Links

Installation

QUICK STEPS TO UPGRADE NODE

Windows

Creating routes and user login

Using events

The sendmessage endpoint

Testing the API

Conclusion

😎 How to convert a normal React form to use react-hook-form?

Hey everyone!

💪 Using it with TypeScript

Conclusion

⚡ How to skip Chromium download in Puppeteer?

Hello again 👋!

Step 1 - Set the environment variables

On Windows

Find browser's path

😱 Make a Random Meme API With Node.js and Puppeteer

👋 Hello there

Initializing the project

Using Fastify for API

Getting the random meme using Puppeteer

Using Fastify to send the random meme

✨ How to make a Next.js app a PWA with offline support

Hello everyone 👋

📃 INDEX

1. Project code

2.next-pwa package

3. Getting assets

4. Web manifest file

5. PWA Configuration

6. Offline fallback page

💫 How to add routing loader using nprogress in Next.js?

Hey everyone 👋!

✨ Result

1. Create a Next.js app

1. Using the `onclick` attribute

2. Using the `addEventListener` function

3. Using the `onclick` property

So What's Wrong with `onclick`?

The `sendmessage` endpoint

2.`next-pwa` package

2. Install `nprogress`

3. Get the `nprogress.css` file

5. Use `Router` events to show the progress bar

1. `main-profile` div

2. `user-bio` div

3. `user-follows` div