DEV Community: Posandu

hello world

Posandu — Fri, 15 Nov 2024 06:22:24 +0000

Discovering Svelte: Things I Learned While Using Svelte

Posandu — Mon, 31 Jul 2023 16:49:08 +0000

So, I've been playing around with Svelte, this unique JavaScript compiler, for a while now, and let me tell you, it's awesome! As someone who's experienced with React, using Svelte feels like a refreshing change of pace. I'm not here to pit React against Svelte - plenty of articles already do that. Instead, I want to share some cool stuff I've learned while using Svelte.

Svelte Spring

Svelte comes with a built-in spring animation library that's super easy to use and lightning-fast! You just specify the spring parameters and boom! The animation takes care of itself. Check out this example:

<script>
    import { spring } from "svelte/motion";

    let x = spring(0, {
        stiffness: 0.1,
        damping: 0.1,
    });
</script>

<svelte:body on:mousemove={({ clientX }) => (x = clientX)} />

<div style="transform: translateX({$x}px)"></div>

And voila! You get a nice springy animation! It's that simple.

Learn more: Svelte Tutorial - Tweened, Svelte Tutorial - Spring

Svelte Transitions

But wait, there's more! Svelte not only has spring animations, but it also comes with a transition library. Adding a transition is a piece of cake - just slap the transition attribute on an element.

<script>
    import { slide } from "svelte/transition";
    let show = true;
</script>

<label>
    <input type="checkbox" bind:checked="{show}" />
    slide
</label>

{#if show}
    <h1 transition:slide>Hey🫡👀</h1>
{/if}

You've got a sliding effect like magic!

Svelte also has something called Deferred Transitions, which only run when an element is added or removed from the DOM. Check out this icon morphing to a div example:

The best part? It's less than 90 lines of code!

<script>
    import { quintInOut } from "svelte/easing";
    import { crossfade } from "svelte/transition";

    let openApp = "";
    let apps = ["🐦","🐱","🐶","🐭","🐹","🐰","🦊","🐻","🐼","🐨","🐯","🦁","🐮","🐷","🐸","🐵","🐔","🐧","🐤",];

    const [send, receive] = crossfade({
        duration: 500,
        easing: quintInOut,
    });
</script>

{#each apps as app}
    {#if openApp !== app}
        <button
            class="icon"
            on:click={() => (openApp = app)}
            in:receive|global={{ key: app }}
            out:send|global={{ key: app }}
        >
            {app}
        </button>
    {:else}
        <div
            class="app"
            in:receive|global={{ key: app }}
            out:send|global={{ key: app }}
        >
            <h1>App {app}</h1>
            <button on:click={() => (openApp = "")}>Close</button>
        </div>
    {/if}
{/each}

Learn more: Svelte Tutorial - Transition, Svelte Deferred Transitions

Keyed Each Blocks

When it comes to lists in Svelte, you use the each block. Svelte handles the key for you by default, but if you want more control, you can specify a key yourself.

<script>
    let items = [
        { id: 1, name: "Joe" },
        { id: 2, name: "John" },
        { id: 3, name: "Jane" },
        // ...
    ];
</script>

{#each items as item (item.id)}
    <div>
        <h1>{item.name}</h1>
    </div>
{/each}

Just add (item.id) after the each block to specify the key.

Awaited Blocks

Here's a nifty feature: using awaited blocks when you want to wait for a promise to resolve before rendering something.

Take this example using the fetch API to get a random number from a server:

<script>
    let promise = getRandomNumber();

    async function getRandomNumber() {
        const res = await fetch(`/tutorial/random-number`);
        const text = await res.text();

        if (res.ok) {
            return text;
        } else {
            throw new Error(text);
        }
    }

    function handleClick() {
        promise = getRandomNumber();
    }
</script>

<button on:click={handleClick}>Generate Random Number</button>

{#await promise}
    <p>...waiting</p>
{:then number}
    <p>The number is {number}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Sending Messages Between Components

Picture this: you've got a component rendering a list of items, and each item has a button that deletes it. You want
to update the list when an item is deleted, but how do you do that?

With Svelte's createEventDispatcher function, you can send a message from the child component to the parent component.

In the child component, create a dispatcher and dispatch a message when the button is clicked:

<script>
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function sendMsg() {
        dispatch("refresh");
    }

    export let item = "";
</script>

<button on:click={sendMsg}>
    Send Message
    {item}
</button>

In the parent component, listen for the message and update the list:

<script>
    import { onMount } from "svelte";
    import Inner from "./Inner.svelte";

    let items = [];

    function handleRefresh() {
        items = [...items, Math.random().

toString(36).split("").slice(2, 15)];
    }

    onMount(() => {
        handleRefresh();
    });
</script>

{#each items as item}
   <Inner on:refresh={handleRefresh} {item} />
   <br>
{/each}

Named Slots

In Svelte, when you're working with slots, you have the option to name them, which comes in handy when you want to pass multiple slots to a component.

Let's say we have a card component like this:

<div>
    <h1>
        <slot name="title" />
    </h1>

    <div>
        <slot name="content" />
    </div>

    <slot name="footer">
        <p>I'm the default footer. I'll be used if no other footer is provided.</p>
    </slot>

    <div>
        <button>Interesting</button>
    </div>
</div>

We can use our card component like this:

<Card>
    <h1 slot="title">Default title</h1>
    <p slot="content">Default content</p>
</Card>

By adding a slot attribute to the element we want to pass to the slot and setting the value to the name of the slot, we can achieve this. It allows us to customize different parts of the card easily.

Named Exports

By default, Svelte exports a component as the default export. However, if you need additional exports, you can use named exports.

In your component file:

<script context="module">
    export const name = "Svelte";
</script>

<script>
    let test = "test";
</script>

By adding the context="module" attribute to the first script tag, Svelte recognizes it as a module script.

You can then import the named export like this:

<script>
    import { name } from "./Component.svelte";
</script>

This allows you to have multiple exports from a single component.

`@const` and `@html` Tags

While less known, the @const and @html tags can be useful in certain situations.

`@const`

Inside an {#if} or {#each} block, you can use the @const tag to create a constant variable within the block.

{#each items as item}
    {@const index = item.index}

    <!-- Some code -->

    <p>{index}</p>

    <!-- Some code -->

    <pre>I'm index {index}</pre>
{/each}

This saves time by avoiding repetitive code and duplications.

`@html`

The @html tag allows you to render HTML inside a component. Unlike React's dangerouslySetInnerHTML, Svelte's @html is straightforward to use. However, be cautious when using it, as it can lead to XSS attacks.

<script>
    let html = "<h1>HTML</h1>";
</script>

{@html html}

It provides a way to insert dynamic HTML content into your component, but be sure to sanitize any user-generated content before using it to prevent security issues.

Conclusion

In conclusion, Svelte has proven to be a fantastic JavaScript compiler with its intuitive features like spring animations, transitions, named slots, and more. It offers a refreshing alternative to other frameworks. So, give it a try and start building amazing web applications with Svelte today!

For more tech insights and updates, don't forget to follow me on Twitter and GitHub! Find me @posandu. Happy coding! 🚀

Svelte, JavaScript compiler, React, Svelte Spring, Svelte Transitions, Deferred Transitions, Keyed Each Blocks, Awaited Blocks, Sending Messages Between Components, Named Slots, Named Exports, @const, @html, web development, front-end development, web frameworks, animation library, web applications, JavaScript frameworks, programming, coding, developer, tech insights, GitHub, Twitter, coding tips, Svelte tutorial, Svelte examples, Svelte features, Svelte components.

Here's some stuff I learned after working with Svelte 👇https://t.co/gGPnMOVJaP
— Posandu - posandu.sol (@posandu) July 22, 2023

How to add Nprogress to SvelteKit

Posandu — Tue, 21 Mar 2023 21:16:00 +0000

You may be wondering how to add Nprogress to SvelteKit. This is a simple guide to help you get started.

We first need to install nprogress to SvelteKit. To do this, we can run the following command:

npm install nprogress # or pnpm install nprogress or yarn add nprogress

Step 2: Modify the layout

We need to modify the layout to add the nprogress bar. Create or modify the layout file in src/routes/+layout.svelte to add the following code:

<script>
    import "nprogress/nprogress.css";
    import NProgress from "nprogress";
      import { navigating } from "$app/stores";


    NProgress.configure({
        // Full list: https://github.com/rstacruz/nprogress#configuration
        minimum: 0.16,
    });

    $: {
        if ($navigating) {
            NProgress.start();
        } else NProgress.done();
    }
</script>

Here we are importing the nprogress css and the nprogress library. We are also importing the navigating store from the app store. We are then configuring the nprogress bar. We are then using a $: block to check if the user is navigating. If they are, we start the nprogress bar. If they are not, we stop the nprogress bar.

Typescript

Here is the typescript version of the above code:

<script lang="ts">
    import "nprogress/nprogress.css";
    import NProgress from "nprogress";
    import { navigating } from "$app/stores";

    NProgress.configure({
        // Full list:
        minimum: 0.16,
    });

    $: {
        if ($navigating) {
            NProgress.start();
        } else NProgress.done();
    }
</script>

Make sure to add the lang="ts" attribute to the script tag. And also install the typescript types for nprogress:

npm install @types/nprogress # or pnpm install @types/nprogress or yarn add @types/nprogress

Conclusion

That's it! You now have nprogress added to your SvelteKit app. You can now navigate around your app and see the nprogress bar.

Creating a rewards system with JavaScript

Posandu — Wed, 18 Jan 2023 16:47:11 +0000

Losing users is a common problem for many apps. One way to keep users engaged is to reward them for their daily activities. A lot of apps do this by giving users a daily login bonus such as XP, coins, or a free award/badge. Some sites like coinmarketcap.com even give users a daily badge for visiting their site.

This is a great way to keep users engaged and coming back to your app every day. In this tutorial, we will be creating a daily badge rewards system for your users with JavaScript. The result will look like this:

Prerequisites

Before we get started, you will need to have some prior knowledge of the following.

Next.js
Prisma

Getting Started

Before, we start. We need to plan out the rewards system. I made a simple logic to determine the rewards. The logic is as follows:

Every day, when the user logs in, they will see a button to claim their daily reward.
The reward will be a badge of the day.
The badge will be different every day.
A user can only claim their reward once a day but they can have many badges of the same type.
The user can claim their reward anytime during the day.

We will be using Next.js and Prisma to build this app. And for the badges, I made some png images using Stable Diffusion. Those images are saved inside a folder called badges and contain the files.

📦badges
 ┣ 📜0.png <--- 0.png is the first badge (Monday)
 ┣ 📜1.png
 ┣ 📜2.png
 ┣ 📜3.png
 ┣ 📜4.png
 ┣ 📜5.png
 ┗ 📜6.png <--- 6.png is the last badge (Sunday)

Setting up the project

First, we need to start a new Next.js project with Prisma. Previously, I wrote a tutorial on how to set up a Next.js project with Prisma. You can check it out here. We will clone the git repo and install the dependencies.

git clone https://github.com/Posandu/prisma-nextjs-tutorial.git badge && cd badge && pnpm i

You can use npm or yarn instead of pnpm if you want.

Now we need to make our database schema. Open the schema.prisma located in the prisma folder and add the following code.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model CollectedBadges {
  badgeId     Int
  userId      Int
  collectedAt DateTime @default(now())
  id          Int      @id @default(autoincrement())
}

model Users {
  id          Int    @id @default(autoincrement())
  name        String
  lastBadgeId Int?
}

We have two models in our schema. The CollectedBadges model will store the badges that the user has collected. The Users model will store the user's name and the last badge that they collected. The lastBadgeId field will be used to determine the next badge that the user will collect.

For example, if the user collected the badge for Monday, the lastBadgeId will be the ID of the last collected badge ID received from the CollectedBadges model.

Oh, and we also need to add the DATABASE_URL environment variable to our .env file. Use the below format in your .env file.

DATABASE_URL='mysql://username:password@host:port/database'

Now we can migrate our database schema.

pnpm prisma db push

This will create all the required tables and columns in our database.

Creating the frontend

Start the development server.

pnpm dev

Now, we need to create the pages. We will create two pages. Delete all the folders and files inside the pages folder except the _app.tsx,_document.tsx, and index.tsx files.

Copy the badges folder into the public folder. This will make the badges available to the public.

Edit the index.tsx file and add the following code.

import {
    Box,
    Button,
    Container,
    Flex,
    Grid,
    Heading,
    Text,
    useColorModeValue,
    useToast,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Image from "next/image";
import { useEffect, useState } from "react";

import ColormodeToggle from "@/colormodeToggle";

type Data = {
    collected: {
        m: number;
        t: number;
        w: number;
        th: number;
        f: number;
        s: number;
        su: number;
    };
};

const Home: NextPage = () => {
    const [collectedData, setCollectedData] = useState<Data>();
    const [update, setUpdate] = useState(0);
    const toast = useToast();

    const days = ["m", "t", "w", "th", "f", "s", "su"];

    useEffect(() => {
        fetch("/api/getCollectedBadges")
            .then((r) => r.json())
            .then((res) => {
                setCollectedData(res as Data);
                console.log(res);
            })
            .catch(() => {
                toast({
                    title: "Error",
                    description: "There was an error getting the badges",
                    status: "error",
                    duration: 5000,
                    isClosable: true,
                });
            });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [update]);

    const boxBorder = useColorModeValue("gray.300", "gray.700");
    const textColor = useColorModeValue("gray.600", "gray.400");

    return (
        <Container maxW="6xl" p={4}>
            <Grid templateColumns="repeat(3, 1fr)" gap={4} mb={4}>
                <Heading>Welcome user!</Heading>

                <Flex justifyContent="flex-end">
                    <ColormodeToggle />
                </Flex>
            </Grid>

            <Heading my={8} size="md">
                Here are the available badges
            </Heading>

            <Grid templateColumns="repeat(7, 1fr)" gap={4}>
                {[...Array(7)].map((_, i) => (
                    <Box
                        key={i}
                        borderRadius="md"
                        shadow="md"
                        border="1px"
                        borderColor={boxBorder}
                        p={4}
                        _hover={{
                            shadow: "lg",
                        }}
                    >
                        <Image
                            src={`/badges/${i}.png`}
                            alt="badge"
                            width={200}
                            height={200}
                        />

                        <Text align="center" my={4}>
                            {"Mon|Tues|Wenes|Thurs|Fri|Satur|Sun".split("|")[
                                i
                            ] + "day"}
                        </Text>

                        <Text align="center" color={textColor}>
                            {
                                //@ts-ignore
                                collectedData?.collected[days[i]]
                            }{" "}
                            collected
                        </Text>
                    </Box>
                ))}
            </Grid>

            <Button
                mt={4}
                colorScheme="blue"
                onClick={() => {
                    fetch("/api/collect")
                        .then((r) => r.json())
                        .then((res) => {
                            if (res.collected) {
                                toast({
                                    title: "Success",
                                    description: "You have collected a badge",
                                    status: "success",
                                    duration: 5000,
                                    isClosable: true,
                                });

                                setUpdate((prev) => prev + 1);
                            } else {
                                toast({
                                    title: "Error",
                                    description:
                                        "You have already collected today's badge",
                                    status: "error",
                                    duration: 5000,
                                    isClosable: true,
                                });
                            }
                        });
                }}
            >
                Collect badge
            </Button>
        </Container>
    );
};

export default Home;

Here we are fetching the badges from the API and displaying them. We are also adding a button to collect the badge which will call the API to collect the badge.

You will notice some error messages because we haven't created the API yet 😂. Let's do that now.

Creating the API

The first thing we need to do is create a new folder in the pages folder called api. This is where we will store all of our API routes. The first API is collect.ts which will be used to collect the badge.

We first import the types and the database library.

import prisma from "db";
import type { NextApiRequest, NextApiResponse } from "next";

/**
 * Type for the response
 */
type Data = {
    collected: boolean;
    date?: any;
};

Then we create the handler function which will be called when the API is called. We make it async because we use the await keyword.

const handler = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
    // ...
};

We define a constant named USER_ID which will be used to identify the user. We use a static value for now because we haven't implemented authentication yet. Before we continue, you need to manually create a user in the database. You can do this by running the following command in the terminal.

npx prisma studio

This will open the Prisma Studio. You can then create a user by clicking on the add button.

After you have created the user, you can get the ID of the user by clicking on the user and copying the ID. In my case, the ID is 1.

const USER_ID = 1;

Then we define some functions.

// Get server date
const serverDate = new Date();

// Get the number of the day name starting from monday
const dayNumber = serverDate.getDay() === 0 ? 7 : serverDate.getDay(); // 1-7

The dayNumber contains the number of the day starting from Monday. We do this because the database stores the days starting from Monday. If the day is Sunday, we set it to 7.

We then get the last collected badge ID of that user.

// Get user's last collected item
const lastCollected = await prisma.users.findUnique({
    where: { id: USER_ID },
});

Then the below code is self-explanatory.

let lastCollectedDate = new Date();

if (lastCollected?.lastBadgeId) {
    const data = await prisma.collectedBadges.findUnique({
        where: { id: lastCollected.lastBadgeId },
    });

    if (data) {
        lastCollectedDate = new Date(data.collectedAt);
    }
} else {
    // New user
    const data = await prisma.collectedBadges.create({
        data: {
            userId: USER_ID,
            badgeId: dayNumber,
        },
    });

    await prisma.users.update({
        where: { id: USER_ID },
        data: {
            lastBadgeId: data.id,
        },
    });

    return res.status(200).json({
        collected: true,
    });
}

// If the last collected item is from today, return false
if (
    lastCollectedDate.getDate() === serverDate.getDate() && // Same day
    lastCollectedDate.getMonth() === serverDate.getMonth() && // Same month
    lastCollectedDate.getFullYear() === serverDate.getFullYear() // Same year
) {
    return res.status(200).json({
        collected: false,
        date: {
            lastCollectedDate,
            serverDate,
        },
    });
} else {
    // Create new collected badge
    const data = await prisma.collectedBadges.create({
        data: {
            userId: USER_ID,
            badgeId: dayNumber,
        },
    });

    // Update user's last collected badge id
    await prisma.users.update({
        where: { id: USER_ID },
        data: {
            lastBadgeId: data.id,
        },
    });

    return res.status(200).json({
        collected: true,
    });
}

After we have defined the handler function, we export it.

export default handler;

That's it for the collect.ts API. Now save the file and try clicking on the collect badge button. You should see a success message. Now if you explore the database, you will see that a new badge has been added to the collectedBadges table.

Nice! Now let's create the next API which will be used to get the badges.

Create a new file called getCollectedBadges.ts in the pages/api folder. Then add the following code.

import prisma from "db";
import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
    collected: {
        m: number;
        t: number;
        w: number;
        th: number;
        f: number;
        s: number;
        su: number;
    };
};

const handler = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
    const USER_ID = 1; // TODO: get user id from session

    const badges = await prisma.collectedBadges.findMany({
        where: {
            userId: USER_ID,
        },
        select: {
            badgeId: true,
            collectedAt: false,
            id: false,
            userId: false,
        },
    });

    const dateC = (d: number) =>
        badges.filter((badge) => badge.badgeId === d).length;

    const collected = {
        m: dateC(1),
        t: dateC(2),
        w: dateC(3),
        th: dateC(4),
        f: dateC(5),
        s: dateC(6),
        su: dateC(7),
    };

    return res.status(200).json({
        collected,
    });
};

export default handler;

The code is self-explanatory. We get the badges from the database and then return them. Now save the file and try refreshing the page. You should see the badges with the count.

That's it for the API.

Conclusion

So, that's a wrap for this tutorial. I hope you enjoyed it. If you have any questions, feel free to ask them in the comments. The code for this tutorial is available on GitHub.

Connect with me on Twitter and GitHub

Cheers!

How to add Prisma to a Next.js project

Posandu — Sun, 11 Dec 2022 12:24:09 +0000

In this article, you will learn how to add Prisma to a Next.js project. You will learn how to set up Prisma and connect it to a MySQL database. Let's get started!

What is Prisma?

Prisma is an open-source database toolkit that makes it easy to query data from a database inside a TypeScript application. For example, you can use Prisma to query data from a MySQL database inside a Next.js application. Instead of writing plain SQL like this:

SELECT * FROM User WHERE id = 1

You can write the same query using Prisma's query builder like this:

const user = await prisma.user.findUnique({
    where: {
        id: 1,
    },
});

And did I mention that Prisma is TypeScript-first? That means that you get full type-safety and auto-completion in your editor when writing queries. It's cool!

Prerequisites

This tutorial assumes that you have the following tools installed:

And a MySQL database. If you don't have a MySQL database, you can use PlanetScale to get a free database.

Step 1: Create a Next.js project

First, let's create a Next.js project. I will use the Next.js Starter for this tutorial. You can use any Next.js project.

git clone https://github.com/Posandu/nextjs-starter.git nextjs-prisma && cd nextjs-prisma

You now have a Next.js project with TypeScript and ESLint set up. Let's add Prisma to this project.

Step 2: Add Prisma to the project

Next, let's add Prisma to the project. First, install the Prisma CLI:

pnpm install prisma --save-dev

We need to initialize Prisma in the project. Run the following command:

pnpx prisma init

This will create a prisma directory in the project. The prisma directory contains a schema.prisma file. This file contains the database schema. You can edit this file to change the database schema.

Also, it will create a .env file in the root of the project. This file contains the database connection URL. You can edit this file to change the database connection URL. In PlanetScale, you can find the database connection URL after creating a database.

Click connect in the dashboard to get the connection URL.

In the modal, select the Prisma option and copy the connection URL.

Now, open the .env file and paste the connection URL in the .env file.

DATABASE_URL='mysql://************:**********************@us-east.connect.psdb.cloud/mini-shop?sslaccept=strict'

Now, you can connect to the database using Prisma.

Step 3: Create a database schema

The schema.prisma file contains the database schema. You can edit this file to change the database schema. For our mini shop, we need a Product model. Let's add a Product model to the schema.prisma file.

model Product {
  id        Int      @id @default(autoincrement())
  name      String
  price     Int
  img       String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

The SQL equivalent of this schema is:

CREATE TABLE "Product" (
  "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  "name" TEXT NOT NULL,
  "price" INTEGER NOT NULL,
  "img" TEXT NOT NULL,
  "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" DATETIME NOT NULL
);

Now you won't regret using Prisma 😅.

And oh, you need to change

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

Because we are using MySQL.

Step 4: Push the database schema

Now that we have a database schema, let's push it to the database. Run the following command:

pnpx prisma db push

It will push the database schema.

Step 5: Install Prisma Client

Now that we have a database schema, let's install Prisma Client. We need Prisma Client to query the database. Run the following command:

pnpm install @prisma/client

And generate the types for Prisma Client:

pnpx prisma generate

Step 6: Add Prisma to the Next.js project

Create a folder called lib and create a file called prisma.ts in the lib folder. This file will contain the Prisma Client instance. Add the following code to the prisma.ts file:

import { PrismaClient } from "@prisma/client";

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
    prisma = new PrismaClient();
} else {
    if (!global.prisma) {
        global.prisma = new PrismaClient();
    }
    prisma = global.prisma;
}
export default prisma;

This code will create a Prisma Client instance and export it.

For including the prisma client in the project easily, we will add a typescript path alias. Add the following code to the tsconfig.json file:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["components/*"],
            "$/*": ["utils/*"],
            "db": ["lib/prisma"]
        }
    }
}

Now, we can import the Prisma Client instance using import prisma from "db".

Query the database

Run the following command to start the development server:

pnpm dev

We will create the API routes for creating a product and getting all the products. Add the following codes to the pages/api folder:

`pages/api/createProduct.ts`

This API route will create a product in the database.

import prisma from "db";
import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
    success: boolean;
    info?: any;
};

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    let { name, img, price } = req.body;

    if (!name || !img || !price) {
        res.status(200).json({ success: false });
    }

    price = parseInt(price);

    await prisma.product.create({
        data: {
            name,
            img,
            price,
        },
    });

    res.status(200).json({ success: true });
}

`pages/api/getProducts.ts`

import prisma from "db";
import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
    success: boolean;
    data?: any;
};

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    try {
        const products = await prisma.product.findMany();
        res.status(200).json({ success: true, data: products });
    } catch (error) {
        res.status(200).json({ success: false });
    }
}

This API route will get all the products from the database.

Now let's create a page to create a product and get all the products. Add the following code to the pages folder:

`pages/index.tsx`

import {
    Box,
    Button,
    Container,
    Flex,
    Grid,
    Heading,
    Text,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Link from "next/link";
import { useEffect, useState } from "react";

import ColormodeToggle from "@/colormodeToggle";

const Home: NextPage = () => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch("/api/getProducts")
            .then((res) => res.json())
            .then(({ data }) => setItems(data));
    }, []);

    return (
        <Container maxW="4xl" p={4}>
            <Grid templateColumns="repeat(3, 1fr)" gap={4} mb={4}>
                <Heading>Home</Heading>

                <Link href="/add">
                    <Button colorScheme="teal" variant="outline">
                        Add product
                    </Button>
                </Link>

                <Flex justifyContent="flex-end">
                    <ColormodeToggle />
                </Flex>
            </Grid>

            <Grid templateColumns="repeat(3, 1fr)" gap={4}>
                {items &&
                    items.map((item: any) => (
                        <Box key={item.id} p={4} shadow="md" borderWidth="1px">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img src={item.img} alt={item.name} />
                            <Text fontSize="xl">{item.name}</Text>
                            <Text fontSize="lg">{item.price}</Text>
                            <Button colorScheme="teal" variant="outline">
                                Add to cart
                            </Button>
                        </Box>
                    ))}

                {!items.length && (
                    <Box p={4} shadow="md" borderWidth="1px">
                        <Text fontSize="xl">No items found</Text>
                    </Box>
                )}
            </Grid>
        </Container>
    );
};

export default Home;

This page will show all the products in the database. We will also add a button to create a product.

`pages/add.tsx`

import {
    Box,
    Button,
    Container,
    Flex,
    Grid,
    Heading,
    Input,
    Text,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Link from "next/link";
import { useState } from "react";

import ColormodeToggle from "@/colormodeToggle";

const Home: NextPage = () => {
    const [data, setData] = useState({
        name: "",
        price: "",
        img: "",
    });

    const add = () => {
        fetch("/api/createProduct", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
        })
            .then((res) => res.json())
            .then(({ data }) => console.log(data));
    };

    return (
        <Container maxW="4xl" p={4}>
            <Grid templateColumns="repeat(3, 1fr)" gap={4} mb={4}>
                <Heading>Add product</Heading>

                <Link href="/">
                    <Button colorScheme="teal" variant="outline">
                        Return to home
                    </Button>
                </Link>

                <Flex justifyContent="flex-end">
                    <ColormodeToggle />
                </Flex>
            </Grid>

            {["name", "price", "img"].map((item) => (
                <Box key={item}>
                    <Text fontSize="xl">
                        {item.replace(/^\w/, (c) => c.toUpperCase())}
                    </Text>

                    <Input
                        placeholder={item}
                        value={
                            // @ts-ignore
                            data[item]
                        }
                        onChange={(e) => setData({ ...data, [item]: e.target.value })}
                        mb={4}
                    />
                </Box>
            ))}

            <Button colorScheme="teal" onClick={add}>
                Add
            </Button>
        </Container>
    );
};

export default Home;

This page will allow us to create a product. We will add a button to return to the home page.

Now, add some products to the database from the /add page.

After adding some products, you should see something like this:

It works! Now, you can improve some stuff like adding a cart page, adding a delete button, etc.

Conclusion

You can find the complete code on GitHub. And if you have any questions, feel free to ask them in the comments or on Twitter.

If you liked this tutorial, please consider supporting me on Buy Me a Coffee.

Thanks for reading!

Adding your discord status to a website

Posandu — Mon, 21 Nov 2022 16:12:01 +0000

Using a status message is a great way to show info about you. Discord, the most popular chat app for devs has some advanced status features. They include:

Normal text messages
Song playing on Spotify
Game playing
Streaming on Twitch
And more!

My portfolio posandu.me has a status message that shows what I'm currently listening to on Spotify.

PS: It updates automatically when the song is changed.

In this post, I will show you how to add your discord status to your website. We won't be using Discord's API, but instead, we will be using a service called Lanyard. Lanyard is a service that allows you to get your discord status in JSON format. It is very easy to use and has a lot of features. Let's get started!

Step 1: Join the Lanyard Discord server

The first step is to join the Lanyard Discord server. We need to do it because there is a bot that watches your status and updates the JSON file. You can join the server here. (You can mute the server if you want)

Step 2: Get your Discord ID

Head to your Discord settings and go to the "Advanced" tab. And enable "Developer Mode". This will allow you to get your Discord user ID.

Now navigate to a server and locate your profile and right-click it.

Click on "Copy ID" and paste it somewhere. We will need it later.

Step 3: Test the API

Now get your ID and replace *** with it in the URL below.

https://api.lanyard.rest/v1/users/***

If everything worked fine, you should get the following JSON response.

{
    "success": true,
    "data": {
        "spotify": {
            "track_id": "0ct6r3EGTcMLPtrXHDvVjc",
            "timestamps": { "start": 1669035382600, "end": 1669035559258 },
            "song": "The Nights",
            "artist": "Avicii",
            "album_art_url": "https://i.scdn.co/image/ab67616d0000b2730ae4f4d42e4a09f3a29f64ad",
            "album": "The Days / Nights"
        },
        "listening_to_spotify": true,
        "kv": {},
        "discord_user": {
            "username": "Posandu",
            "public_flags": 4194560,
            "id": "961161387101536296",
            "discriminator": "4040",
            "bot": false,
            "avatar": "623cfa0d63b37ed91202fccac745aba1"
        },
        "discord_status": "dnd",
        "activities": [
            {
                "type": 2,
                "timestamps": { "start": 1669035382600, "end": 1669035559258 },
                "sync_id": "0ct6r3EGTcMLPtrXHDvVjc",
                "state": "Avicii",
                "session_id": "e4227bf5701601b286974ff07f3aeee6",
                "party": { "id": "spotify:961161387101536296" },
                "name": "Spotify",
                "id": "spotify:1",
                "flags": 48,
                "details": "The Nights",
                "created_at": 1669035385904,
                "assets": {
                    "large_text": "The Days / Nights",
                    "large_image": "spotify:ab67616d0000b2730ae4f4d42e4a09f3a29f64ad"
                }
            }
        ],
        "active_on_discord_web": true,
        "active_on_discord_mobile": false,
        "active_on_discord_desktop": false
    }
}

🤯 wow! That's a lot of data. Let's break it down.

spotify - This is the song you are currently listening to on Spotify. If you are not listening to anything, it will be null.
listening_to_spotify - This is a boolean value that tells you if you are listening to Spotify or not.
discord_user - This is your Discord user info.
discord_status - This is your Discord status. It can be online, idle, dnd, or offline.
activities - This is an array of activities you are doing. It can be a game, a stream, or a custom status.
active_on_discord_(web/mobile/desktop) - These are booleans that tell you if you are active on Discord on a specific platform.

Step 4: Create a mockup

Now that we have the API working, we can add it to our website. I will be using Next.js and Chakra UI for this tutorial. You can use any framework you want. But, I will be using this one because I'm familiar with it.

First, clone the Next.js template.

git clone https://github.com/Posandu/nextjs-starter.git

Install the dependencies and run the development server.

cd nextjs-starter && npm install && npm run dev

Edit the pages/index.tsx file and add the following code.

import {
    Avatar,
    AvatarBadge,
    Container,
    Flex,
    Grid,
    GridItem,
    Heading,
    Text,
} from "@chakra-ui/react";
import type { NextPage } from "next";

import ColormodeToggle from "@/colormodeToggle";

const Home: NextPage = () => {
    return (
        <Container maxW="4xl" p={4}>
            <Flex alignItems="center" justifyContent="space-between" my={6}>
                <Heading>My Discord status</Heading>
                <ColormodeToggle />
            </Flex>

            <Grid templateColumns="repeat(10, 1fr)" gap={6}>
                <GridItem>
                    <Avatar src="https://discord.c99.nl/widget/theme-1/1234567890.png">
                        <AvatarBadge boxSize="1.25em" bg="green.500" />
                    </Avatar>
                </GridItem>
                <GridItem>
                    <Text fontSize="2xl">
                        Username
                        <Text as="span" color="gray.400">
                            #6942
                        </Text>
                    </Text>

                    <Text color="gray.400">Playing Minecraft</Text>
                </GridItem>
            </Grid>
        </Container>
    );
};

export default Home;

Which will give us this.

Now we need to add the data which we will do in the next step.

Step 5: Adding the things

We get the data from the server and update the state. We will use the useEffect and useState hooks for this.

interface Resp {
    discord_status: "online" | "dnd" | "idle";
    username: string;
    discriminator: string;
    discord_user: {
        username: string;
        discriminator: string;
        avatar: string;
        id: string;
    };
    spotify: {
        track_id: string;
        song: string;
        artist: string;
        album_art: string;
    };
}

const [data, setData] = useState<Resp>();
const [loading, setLoading] = useState(true);

useEffect(() => {
    const ID = "961161387101536296";

    fetch(`https://api.lanyard.rest/v1/users/${ID}`)
        .then((res) => res.json())
        .then((res) => {
            setData(res.data);
            setLoading(false);
        });
}, []);

And edit the JSX to use the data.

{
    !loading && data && (
        <Grid templateColumns="repeat(10, 1fr)" gap={6}>
            <GridItem>
                <Avatar
                    src={`https://cdn.discordapp.com/avatars/${data.discord_user.id}/${data.discord_user.avatar}.png`}
                >
                    <AvatarBadge
                        boxSize="1.25em"
                        bg={
                            data.discord_status === "online"
                                ? "green.500"
                                : data.discord_status === "dnd"
                                ? "red.500"
                                : data.discord_status === "idle"
                                ? "yellow.500"
                                : "gray.500"
                        }
                    />
                </Avatar>
            </GridItem>
            <GridItem>
                <Text fontSize="2xl">
                    {data.discord_user.username}
                    <Text as="span" color="gray.400">
                        #{data.discord_user.discriminator}
                    </Text>
                </Text>
                <Text color="gray.400">
                    {data.spotify
                        ? `${data.spotify.song} by ${data.spotify.artist} on ${data.spotify.album}`
                        : "..."}
                </Text>
            </GridItem>
        </Grid>
    );
}

Now open Discord and listen to some music on Spotify. You should see the following.

Make sure you have Spotify connected to your Discord account and that you have enabled the "Show currently playing game as a status message" option in your Discord settings.

So, that's it! You can use this to show your Discord status on your website. You can also use this to show the status of your friends. Just replace the ID with the ID of your friend(make sure they are in the Lanyard server).

Conclusion

Thanks for reading this tutorial. I hope you learned something new. If you have any questions, feel free to ask them in the comments.

Connect with me on Twitter and Github.

Buy me a coffee if you liked this tutorial.

Cheers!

Creating a Discord bot with JavaScript and hosting it

Posandu — Sun, 23 Oct 2022 05:33:00 +0000

Discord bots are a great way to automate tasks and make your server more fun. This guide will show you how to make a discord bot with JavaScript and host it for free. You will need some basic knowledge of JavaScript and Node.js to follow along with this guide.

Getting Started

First, we need to get the discord bot token. Go to the Discord Developer Portal. And create an application.

Now, once you have created the application, the page will get redirected to the application page. You can edit the bot details here.

Now go to the bot section and click on add bot. You will get a confirmation message. Click on yes, do it!

Now click on the Reset Token button. This will reset the bot token. You will get a confirmation message. Accept it and you will get the bot token. Copy the token and create a .env file in the project directory and add the following contents.

TOKEN=YOUR_TOKEN_HERE

Make sure to replace YOUR_TOKEN_HERE with your bot token.

Also, scroll bottom and toggle all the permissions to true.

Lastly, we should add the bot to a Discord server, to do this, we go to the Developer portal again and go to the Oauth2->Url Generator. Then, check on the bot checkbox and check Administrator on the bottom checkboxes list.

Now scroll to the bottom of the page and copy the URL.

After that, open it in a new tab and select the server you want to add the bot to. Click on authorize and you are done.

Yaay! You have added the bot to your server.

But, the bot is offline. We need to make it online. To do that, we need to code the bot. Let's get started.

Creating the bot

Now that we have the bot token, we can create the bot. We will be using the discord.js library to create the bot. Install the library using the following command.

npm install discord.js # or pnpm install discord.js / yarn add discord.js

And for getting the token from the .env file, we will be using the dotenv package. Install it using the following command.

npm install dotenv

After that, open the package.json file and add the following scripts.

{
    "scripts": {
        "start": "node index.js"
    }
}

Also, make sure to add the type field to the package.json file.

{
    "type": "module"
}

Now, create a file named index.js and add the following contents.

// Require the necessary discord.js classes
import { Client, Events, GatewayIntentBits } from "discord.js";
import { config } from "dotenv";

// Load environment variables from .env file
config();

const { TOKEN } = process.env;

// Create a new instance
const client = new Client({
    intents: [
        GatewayIntentBits.Guilds,
        GatewayIntentBits.GuildMessages,
        GatewayIntentBits.MessageContent,
    ],
});

// When the client is ready, run this code (only once)
client.once(Events.ClientReady, (c) => {
    console.log(`Ready! Logged in as ${c.user.tag}`);
});

// Log in to Discord with your client's token
client.login(TOKEN);

This will create a new instance of the client and log in to the discord bot. Now, run the following command to start the bot.

npm start

The bot should be online now! 🥳

Adding commands

We'll add a simple ping command to the bot. Add the following code to the index.js file.

// Command handler
const prefix = "!"; // Prefix for commands

client.on(Events.MessageCreate, (message) => {
    const content = message.content.trim();
    if (!content.startsWith(prefix)) return; // Ignore messages that don't start with the prefix

    const args = content.slice(prefix.length).trim().split(/ +/); // Split the message into arguments
    const command = args.shift().toLowerCase(); // Get the command name

    const commands = {
        ping: () => {
            message.reply(
                `Pong! Latency is ${Date.now() - message.createdTimestamp}ms.`
            );
        },
    };

    if (command in commands) {
        commands[command]();
    }
});

Restart the bot and try the command by typing !ping in the server.

Nice! We have created a simple ping command. Now, if you want to add more commands, you can add them to the commands object. Let's add a simple help command.

const commands = {
    // ...
    help: () => {
        message.reply(`Available commands: ${Object.keys(commands).join(", ")}`);
    },
};

It also works!

So, if you want to add more commands, you can add them to the commands object.

Hosting the bot

Now that we have created the bot, we need to host it. You can use Railway to host the bot. Create an account and open the dashboard. Click on the New Project.

Then select the Create from GitHub option. After that, select the repository with the bot code and click on Create Project.

Then select edit variables and add the TOKEN variable. Paste the bot token in the value field.

Now after some time, the bot should be online.

And if you test the bot, it should work pretty fast.

Conclusion

You have successfully created a discord bot and hosted it. You can add more commands to the bot and make it more useful.

The code for this tutorial is available here

Connect with me

Twitter
GitHub
Discord: Posandu#4040

Create a poll app using NextJS

Posandu — Sun, 09 Oct 2022 10:38:22 +0000

Intro

In this tutorial, we'll make a poll app using NextJS, Prisma and MySQL. You can find the final code in the end of this article.

Prerequisites

You need some basic understanding of NextJS and TypeScript.

Getting Started

First, we clone our starter code

git clone https://github.com/Posandu/nextjs-starter.git .

Then, we install the dependencies

npm install

After some time, we can run the development server

npm run dev

You can now view the app at (http://localhost:3000)[http://localhost:3000] and you should see the following:

Database

We will be using a SQL database for this project. For running queries, we will be using Prisma. Prisma is an ORM that allows us to run queries simply. I will be using MySQL for this project, but you can use any SQL database you want.

So first, we need to install the Prisma CLI

npm install prisma --save-dev

Then, we need to initialize the Prisma CLI

npx prisma init

This will create a prisma folder in the root directory. Inside this folder, we will find a schema.prisma file. This file contains the schema of our database. We will be using the following schema for this project:

model Poll {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
  choices   String
}

model Vote {
  id        Int      @id @default(autoincrement())
  pollId    Int
  choice    String
}

That is, we have a Poll model and a Vote model. The Poll model contains the title of the poll and the choices. The Vote model contains the poll id, the choice, and the id of the vote.

Now set your data credentials in the .env file.

DATABASE_URL="myqsl://USER:PASSWORD@HOST:PORT/DATABASE?schema=public"

After that, we need to migrate our database. This will create the tables in our database.

npx prisma migrate dev

Now the tables are created, we need to install the Prisma client

npm install @prisma/client

Now create a file utils/prisma.ts and add the following code:

import { PrismaClient } from "@prisma/client";

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  // @ts-ignore
  if (!global.prisma) {
    // @ts-ignore
    global.prisma = new PrismaClient();
  }
  // @ts-ignore
  prisma = global.prisma;
}
export default prisma;

This will create a singleton instance of the Prisma client. This will prevent us from creating multiple instances of the Prisma client. Now if you go to index.tsx and import the client, you should see autocompletion for the Prisma client.

UI

Let's create a header that we will use on all the pages. Create a file components/header/index.tsx and add the following code:

import ColormodeToggle from "@/colormodeToggle";
import { Box, Button, Flex } from "@chakra-ui/react";
import Link from "next/link";

const Header = () => {
  return (
    <Flex mt={6}>
      <Box>
        <Link href="/">
          <Button variant="ghost">Polls</Button>
        </Link>
      </Box>

      <Box ml="auto">
        <Link href="/createPoll">
          <Button mr={4}>Create Poll</Button>
        </Link>

        <ColormodeToggle />
      </Box>
    </Flex>
  );
};

export default Header;

The header will look like this:

Now let's create a page for creating a poll. Create a file pages/createPoll.tsx and add the following code:

import {
  Alert,
  Button,
  Container,
  Flex,
  Heading,
  Input,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Header from "@/header";
import { useState } from "react";
import { AddIcon, DeleteIcon } from "@chakra-ui/icons";

const Home: NextPage = () => {
  const [title, setTitle] = useState("Do you like this poll?");
  const [options, setOptions] = useState(["Yes", "No"]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = () => {
    setError("");

    // Validate title
    if (title.length < 5 || title.length > 60) {
      setError("Title must be between 5 and 100 characters");
      return;
    }

    // Validate options
    if (options.some((option) => option.length < 1 || option.length > 60)) {
      setError("Options must be between 1 and 30 characters");
      return;
    }

    // ... TODO: Send to API
  };

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        <Heading mb={4}>Create Poll</Heading>

        <Heading my={4} size="md">
          Title (Max 60)
        </Heading>

        <Input
          placeholder="Poll Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />

        <Heading my={4} size="md">
          Options (Minimum 2, Maximum 10)
        </Heading>
        <Stack spacing={4}>
          {options.map((option, index) => (
            <StackItem key={index}>
              <Flex>
                <Input
                  placeholder="Option"
                  value={option}
                  onChange={(e) => {
                    const newOptions = [...options];
                    newOptions[index] = e.target.value;
                    setOptions(newOptions);
                  }}
                />

                <Stack direction="row" ml={2}>
                  <Button
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions.splice(index, 1);
                      setOptions(newOptions);
                    }}
                    disabled={options.length <= 2}
                    colorScheme="red"
                    variant="ghost"
                  >
                    <DeleteIcon />
                  </Button>

                  <Button
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions.push("");
                      setOptions(newOptions);
                    }}
                    disabled={
                      options.length >= 10 || index !== options.length - 1
                    }
                    colorScheme="green"
                  >
                    <AddIcon />
                  </Button>
                </Stack>
              </Flex>
            </StackItem>
          ))}
        </Stack>

        {error && (
          <Alert mt={4} status="error">
            {error}
          </Alert>
        )}

        <Button
          mt={4}
          colorScheme="blue"
          onClick={submit}
          isLoading={loading}
          disabled={loading}
        >
          Create Poll
        </Button>
      </Container>
    </Container>
  );
};

export default Home;

The page will look like this:

This page also has validation for the title and options. The validation is pretty simple, but it's good enough for now.

Now let's create a page for viewing a poll. Create a file pages/poll/[id].tsx and add the following code:

import Header from "@/header";
import {
  Button,
  Container,
  Heading,
  Progress,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { useState } from "react";

const Home: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  const [pollData, setPollData] = useState({
    title: "Sample Poll",
    options: [
      {
        name: "Sample Option",
        votes: 40,
      },
      {
        name: "Sample Option 2",
        votes: 60,
      },
    ],
  });

  const [voted, setVoted] = useState(false);
  const [loading, setLoading] = useState(false);

  const totalVotes = pollData.options.reduce(
    (acc, option) => acc + option.votes,
    0
  );

  const maxIndex = pollData.options.reduce((acc, option, index) => {
    if (option.votes > pollData.options[acc].votes) {
      return index;
    }
    return acc;
  }, 0);

  const castVote = (index: number) => {
    setLoading(true);

    // TODO
    setTimeout(() => {
      setLoading(false);
      setVoted(true);
    }, 4000);
  };

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        <Heading my={4}>{pollData.title}</Heading>
        {voted ? (
          <Stack spacing={4} mb={4}>
            {pollData.options.map((option, index) => (
              <StackItem key={index} pos="relative">
                <Progress
                  colorScheme={index === maxIndex ? "green" : "blue"}
                  value={option.votes}
                  height="8"
                  max={totalVotes}
                />
                <Heading size="sm" pos="absolute" top="0" mt="1" ml="2">
                  {option.name}
                </Heading>
              </StackItem>
            ))}
          </Stack>
        ) : (
          <Stack spacing={2} mb={4}>
            {pollData.options.map((option, index) => (
              <Button
                key={index}
                onClick={() => castVote(index)}
                isLoading={loading}
                loadingText="Casting Vote"
                disabled={loading}
              >
                {option.name}
              </Button>
            ))}
          </Stack>
        )}
      </Container>
    </Container>
  );
};

export default Home;

The page will look like this:

Now, we've done the frontend. Let's move on to the backend.

Backend

We will create 3 API endpoints for our backend. The first one will be for creating a poll. The second one will be for getting a poll. The third one will be for voting in a poll.

The first is for creating a poll. Create a file pages/api/createPoll.ts and add the following code:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import prisma from "$/prisma";

type Data = {
  message: string;
  error: boolean;
  data?: any;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // Check if the request is a POST request
  if (req.method !== "POST") {
    res.status(200).json({ message: "Method not allowed", error: true });
    return;
  }

  // Check if the parameters `title` and `options` are present
  if (!req.body.title || !req.body.options) {
    res.status(200).json({ message: "Missing parameters", error: true });
    return;
  }

  const { title, options } = req.body;

  // Check if the title is not empty
  if (title.length < 5 || title.length > 60) {
    res.status(200).json({
      message: "Title must be between 5 and 60 characters",
      error: true,
    });
    return;
  }

  // Check if the options are not empty
  if (options.length < 2 || options.length > 10) {
    res.status(200).json({
      message: "You must provide between 2 and 10 options",
      error: true,
    });
    return;
  }

  // Check if the options are not empty
  if (
    options.some((option: string) => option.length < 1 || option.length > 60)
  ) {
    res.status(200).json({
      message: "Options must be between 1 and 60 characters",
      error: true,
    });
    return;
  }

  // Create the poll
  const data = await prisma.poll.create({
    data: {
      title,
      choices: options.join(","),
    },
  });

  res.status(200).json({ message: "Poll created", error: false, data });
}

This endpoint will create a poll in the database. It will also return the poll ID. We will use this ID to get the poll data and to vote in the poll.

Now, quickly go to the createPoll.tsx and replace the submit function with the following code:

const submit = () => {
  setError("");

  // Validate title
  if (title.length < 5 || title.length > 60) {
    setError("Title must be between 5 and 100 characters");
    return;
  }

  // Validate options
  if (options.some((option) => option.length < 1 || option.length > 60)) {
    setError("Options must be between 1 and 30 characters");
    return;
  }

  type Data = {
    message: string;
    error: boolean;
    data?: any;
  };

  // API
  fetch("/api/createPoll", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      options,
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      const resp: Data = res as any as Data;

      if (resp.error) {
        setError(resp.message);
      } else {
        window.location.href = `/poll/${resp.data.id}`;
      }
    });
};

If you go to the /createPoll page, you will see that the poll is created and you are redirected to the poll page.

So I make sure it was created by opening prisma studio.

npx prisma studio

It works 😄

Now, let's create the second endpoint. This endpoint will be for getting a poll. Create a file pages/api/getPoll.ts and add the following code:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import prisma from "$/prisma";

type Data = {
  message: string;
  error: boolean;
  data?: any;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // Check if the request is a POST request
  if (req.method !== "POST") {
    res.status(200).json({ message: "Method not allowed", error: true });
    return;
  }

  // Check if the parameter `id` is present
  if (!req.body.id) {
    res.status(200).json({ message: "Missing parameters", error: true });
    return;
  }

  const { id } = req.body;

  // Get the poll
  const data = await prisma.poll.findUnique({
    where: {
      id: parseInt(id),
    },
  });

  // Check if the poll exists
  if (!data) {
    res.status(200).json({ message: "Poll not found", error: true });
    return;
  }

  res.status(200).json({ message: "Poll found", error: false, data });
}

After creating this endpoint, edit the poll/[id].tsx file and add the following code inside the function

// ... imports
import { useEffect, useState } from "react";

useEffect(() => {
  fetch(`/api/getPoll/`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      id,
    }),
  })
    .then((res) => res.json())
    .then((_data) => {
      type Data = {
        message: string;
        error: boolean;
        data?: any;
      };

      const data: Data = _data;

      if (!data.error) {
        const options = data.data.choices.split(",").map((choice: any) => {
          return {
            name: choice,
            votes: 0,
          };
        });

        setPollData({
          ...data.data,
          options,
        });

        setLoading(false);
      }
    });
}, [id]);

This code will fetch the poll data from the database and set it to the pollData state. If no poll is found, it will just keep the loading state as true. (Trolling the user 😂)

Now, the last step is to update the poll/[id].tsx file to show the poll data. You can replace the whole file with the following code:

import Header from "@/header";
import {
  Button,
  Container,
  Heading,
  Progress,
  Spinner,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const Home: NextPage = () => {
  const router = useRouter();
  const id = router.query.id;

  type Vote = {
    choice: string;
    votes: number;
  };

  type Poll = {
    title: string;
    choices: string[];
    id: string;
  };

  const [poll, setPoll] = useState<Poll>({} as Poll);
  const [votes, setVotes] = useState<Vote[]>([]);
  const [loading, setLoading] = useState(true);
  const [voted, setVoted] = useState(false);
  const [totalVotes, setTotalVotes] = useState(0);

  useEffect(() => {
    if (document.cookie.includes("voted_" + id)) {
      setVoted(true);
    }

    if (id) {
      fetch(`/api/getPoll`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ id }),
      })
        .then((res) => res.json())
        .then(({ data }) => {
          data.choices = data.choices.split(",");
          setPoll(data);
          setLoading(false);

          const votes: Vote[] = [];

          data.choices.forEach((choice: any) => {
            const obj = {
              choice,
              votes: [...data.votes].filter((vote) => vote.choice === choice)
                .length,
            };

            votes.push(obj);
          });

          setVotes(votes);
          setTotalVotes(data.votes.length);
        });
    }
  }, [id]);

  function castVote(option: string) {
    fetch(`/api/castVote`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ option, id: poll.id }),
    })
      .then((res) => res.json())
      .then(({ data }) => {
        const votes: Vote[] = [];

        poll.choices.forEach((choice) => {
          const obj = {
            choice,
            votes: [...data].filter((vote) => vote.choice === choice).length,
          };

          votes.push(obj);
        });

        setVotes(votes);
        setVoted(true);
        setTotalVotes(data.length);

        document.cookie = "voted_" + id + "=true";
      });
  }

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        {loading && <Spinner size="xl" />}

        {!loading && (
          <>
            <Heading my={4}>{poll.title}</Heading>
            {voted ? (
              <Stack spacing={4} mb={4}>
                {poll.choices.map((option, index) => (
                  <StackItem key={index} pos="relative">
                    <Progress
                      colorScheme={"blue"}
                      value={
                        votes.find((vote) => vote.choice === option)?.votes
                      }
                      height="8"
                      max={totalVotes}
                    />
                    <Heading size="sm" pos="absolute" top="0" mt="1" ml="2">
                      {option} (
                      {votes.find((vote) => vote.choice === option)?.votes})
                    </Heading>
                  </StackItem>
                ))}
              </Stack>
            ) : (
              <Stack spacing={2} mb={4}>
                {poll.choices.map((option) => (
                  <Button
                    key={option}
                    onClick={() => castVote(option)}
                    isLoading={loading}
                    loadingText="Casting Vote"
                    disabled={loading}
                  >
                    {option}
                  </Button>
                ))}
              </Stack>
            )}
          </>
        )}
      </Container>
    </Container>
  );
};

export default Home;

Now save it and you're done!

Conclusion

In this tutorial, we learned how to create a full-stack poll app using Next.js, TypeScript, and MySQL. We learned how to create a Next.js app and how to connect the Next.js app to the database. You can also add more features to this app like user authentication, IP address tracking, and more. I hope you enjoyed this tutorial. If you have any questions, feel free to ask them in the comments section below. Thanks for reading!

You can also support me by following me on Twitter and GitHub.

Also code is available on GitHub.

React Cheat Sheet - Learn the basics of React 🔥

Posandu — Thu, 22 Sep 2022 12:21:48 +0000

React is a JavaScript library for building interactive user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. So, in this article, you can find a React cheat sheet that will help you to learn React quickly.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
Basic knowledge of ES6 features.
Basic knowledge of Node.js and npm.

Initializing a React Project

You can use this npm command to create a new React project with Vite:

npm create vite

Just select the React template and you are ready to go.

Now, go to the project directory and run the following command to start the development server:

npm i && npm run dev

Now you should be able to see the React app running on http://localhost:5173. If you open the app in the browser, you will see the following screen:

for more information about Vite, you can check out this guide.

React Components

React components are like lego blocks. You use them to build your UI. React components are reusable and can be used to build complex UIs. You can create a React component using the following syntax:

function App() {
    return <h1>Hello World</h1>;
}

You can also use ES6 classes to create React components:

Not recommended because functional components are easier to read and test.

class App extends React.Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

You can also use arrow functions to create React components:

const App = () => {
    return <h1>Hello World</h1>;
};

So basically a React component is a JavaScript function that returns a React element. They can be used like this:

<App />

And also components must start with a capital letter or else React will treat them as DOM tags.

Also, you can embed inline JavaScript expressions in JSX using curly braces:

const name = "John";
const App = () => {
    return <h1>Hello {name}, you have {Math.floor(Math.random() * 10)} unread messages.</h1>;
};

React props

Imagine if you have a component that renders a profile card. You can either hardcode the data or you can pass it as props. Props are like function arguments in React. You can pass data to a component using props. You can access the props in a component using the props object. For example, if you have a component called ProfileCard and you want to pass the name of the user as a prop, you can do it like this:

<ProfileCard name="John Doe" />

And then you can access the name prop in the ProfileCard component like this:

function ProfileCard(props) {
    return <h1>{props.name}</h1>;
}

If you like destructuring, you can do it like this:

function ProfileCard({ name }) {
    return <h1>{name}</h1>;
}

But, what if you want to pass other props? (For example, the class attribute, aria-label, etc.) You can do it like this using the spread operator:

function ProfileCard({ name, ...rest }) {
    return <h1 {...rest}>{name}</h1>;
}

And then you can pass the other props like this:

<ProfileCard name="John Doe" style={{ color: "red" }} />

If you want to use default prop values, you can do it like this:

function ProfileCard({ name = "John Doe" }) {
    return <h1>{name}</h1>;
}

Now if you don't pass the name prop, it will use the default value.

React events

If you want to add an event listener to a React element, you can do it like this:

function App() {
    return <button onClick={() => alert("Hello World")}>Click me</button>;
}

The thing the above code does is that it passes an anonymous function to the onClick prop. You can also pass a named function:

function handleClick() {
    alert("Hello World");
}

function App() {
    return <button onClick={handleClick}>Click me</button>;
}

React state

The state is a major part of React. It is used to store data that changes over time. You can use the useState hook to create a state variable. For example, if you want to create a counter, you can do it like this:

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
}

Now, if you click the increment button, the count will increase by 1 and if you click the decrement button, the count will decrease by 1.

React useEffect

By default, React runs the effects after every render. But, if you want to run the effects only when a certain value changes, you can pass an array as a second argument to the useEffect hook. For example, if you want to run the effect only when the count changes, you can do it like this:

import { useState, useEffect } from "react";

function Counter() {
    // ...

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    // ...
}

Now every time the count changes, the document title will change.

Also, this can be very useful for running an effect only once when the component mounts. For example, if you want to fetch data from an API when the component mounts, you can do it like this:

import { useState, useEffect } from "react";

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
            .then((response) => response.json())
            .then((json) => setData(json));
    }, []);

    // ...
}

React hooks

Hooks are basically functions that let you interact with React features. You can use hooks to create state variables, fetch data, etc. You already used hooks such as useState and useEffect. You can also create your own hooks.

Normally, hooks must be inside a React function component and they must start with the word use.

React loops

If you have an array of data like this:

[
    {
        "id": 1,
        "title": "Hello World"
    },
    {
        "id": 2,
        "title": "Hello World 2"
    }
]

You can combine it with the map method (JavaScript array method) to render a list of React elements. For example, if you want to render a list of todos, you can do it like this:

import { useState } from "react";

function App() {
    const [todos, setTodos] = useState([
        {
            "id": 1,
            "title": "Hello World"
        },
        {
            "id": 2,
            "title": "Hello World 2"
        }
    ]);

    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>{todo.title}</li>
            ))}
        </ul>
    );
}

Will render:

Also, use the key prop when rendering a list of React elements inside a loop to prevent React from rendering the same element twice.

React conditional rendering

If you want to render a React element only if a certain condition is true, you can do it like this:

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            {isLoggedIn && <h1>Hello World</h1>}
        </div>
    );
}

This is just using the logical AND operator. If the isLoggedIn variable is true, it will render the <h1>Hello World</h1> element. If it is false, it will render nothing.

You can also use this to display a message if the isLoggedIn variable is false:

{isLoggedIn ? (
    <h1>Hello World</h1>
) : (
    <h1>You are not logged in</h1>
)}

Or you can conditionally return from a function:

function App() {
    if (isLoggedIn) {
        return <h1>Hello World</h1>;
    } else {
        return <h1>You are not logged in</h1>;
    }
}

Conclusion

Now you know the basics of React. You can use these to create your own React apps. If you want to learn more, you can check out the React documentation. Good luck!

Creating a todo CLI with Rust 🔥

Posandu — Tue, 13 Sep 2022 11:01:55 +0000

Hey! in this article, we'll build a to-do CLI application with Rust. Local JSON files are used to store the data. Here's a preview of the app:

Let's get started!

Getting started

First, we create a new project with Cargo:

cargo new todo

Then, we add the following dependencies to the Cargo.toml file:

chrono = "0.4.22"
colorize = "0.1.0"
rand = "0.8.5"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0.85"

Here's what each dependency does:

chrono is used to get the current date and time.
colorize is used to color the output.
rand is used to generate random IDs.
serde and serde_json are used to get the data from the JSON file.

Creating the folder structure

Our src folder will look like this:

src
 ┣ app
 ┃ ┗ mod.rs # The app module
 ┣ structs
 ┃ ┗ mod.rs # The structs
 ┣ todo
 ┃ ┗ mod.rs # Todo related functions
 ┣ utils
 ┃ ┗ mod.rs # Utility functions
 ┗ main.rs # The main file

Now, in the main.rs file, I'll import all modules:

mod utils;
mod structs;
mod todo;
mod app;

fn main() {
    // ...
}

Creating the structs

Before we start, let's create the structs that we'll use to store the data. In the structs/mod.rs file, we'll create the following structs:

use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct Todo {
    pub created_at: String,
    pub title: String,
    pub done: bool,
    pub id: u32,
    pub updated_at: String,
}

#[derive(Serialize, Deserialize, Debug)]
pub struct ConfigFile {
    pub data: Vec<Todo>,
}

Creating the utility functions

In the utils/mod.rs file, we'll import the dependencies and create the utility functions:

use crate::structs;
use chrono;
use colorize::*;
use rand::prelude::*;
use serde_json::from_str;
use serde_json::Result;
use std::{fs, io::Write};

The first function is to create the global data file if it doesn't exist:

pub fn init() {
    // Check if folder exists
    if !fs::metadata("C:\\.todobook").is_ok() {
        fs::create_dir("C:\\.todobook").unwrap(); // Create folder

        // Create file
        let mut file = fs::File::create(DATA_FILE).unwrap();

        // Write to file
        file.write_all(b"{\"data\":[]}").unwrap();

        println!("{} {}", "Created folder and file".green(), DATA_FILE);
    }

    // Check if file exists
    else if !fs::metadata(DATA_FILE).is_ok() {
        // Create file
        let mut file = fs::File::create(DATA_FILE).unwrap();

        // Write to file
        file.write_all(b"{\"data\":[]}").unwrap();

        println!("{} {}", "Created file".green(), DATA_FILE);
    }
}

The next function is to read the arguments from the command line. Before creating a function, we define a struct called Command in the structs module:

pub struct Command {
    pub command: String,
    pub arguments: String,
}

Now, we can create the get_args function.

pub fn get_args() -> structs::Command {
    let args = std::env::args().collect::<Vec<String>>(); // Get arguments and collect them into a vector

    let command = args.get(1).unwrap_or(&"".to_string()).to_string(); // Get command or set it to an empty string
    let arguments = args.get(2).unwrap_or(&"".to_string()).to_string(); // "" arguments or ""

    structs::Command { command, arguments } // Return the command and arguments
}

The next function returns a timestamp.

pub fn get_timestamp() -> String {
    let now = chrono::Local::now();
    let timestamp = now.format("%m-%d %H:%M").to_string();

    timestamp
}

After that, we create a function to generate a random ID:

pub fn get_id() -> u32 {
    // Genrate number between 1 and 1000
    let mut rng = rand::thread_rng();
    let id: u32 = rng.gen_range(1..1000);

    id + rng.gen_range(1..1000)
}

The next function is to read the data from the JSON file:

pub fn get_todos() -> Result<Vec<structs::Todo>> {
    let data = fs::read_to_string(DATA_FILE).unwrap();
    let todos: structs::ConfigFile = from_str(&data)?;

    Ok(todos.data)
}

The last function is to write the data to the JSON file:

pub fn save_todos(todos: Vec<structs::Todo>) {
    let config_file = structs::ConfigFile { data: todos };
    let json = serde_json::to_string(&config_file).unwrap();

    let mut file = fs::File::create(DATA_FILE).unwrap();
    file.write_all(json.as_bytes()).unwrap();
}

And, that's it for the utility functions.

Creating the todo functions

Now, we create the functions that will be used to add, remove, and list todos. In the todo/mod.rs file, import the dependencies.

use crate::structs::Todo;
use crate::utils;
use colorize::*;

The first function is to add a todo:

pub fn add(title: String) {
    if title.len() < 1 { // Check if title is empty
        println!("{}", "No title provided".red());

        return;
    }

    let mut todos = utils::get_todos().unwrap(); // Get todos

    let todo = Todo {
        created_at: utils::get_timestamp(),
        title,
        done: false,
        id: utils::get_id(),
        updated_at: utils::get_timestamp(),
    };

    todos.push(todo); // Push todo to todos

    utils::save_todos(todos); // Save todos

    println!("{}", "Added todo".green());
}

The next function is to list todos:

pub fn list() {
    let todos = utils::get_todos().unwrap();

    if todos.len() == 0 {
        println!("{}", "No todos".red());
        return;
    }

    println!(
        "{0: <5} | {1: <20} | {2: <20} | {3: <20} | {4: <20}",
        "ID", "Title", "Created at", "Updated at", "Done"
    );

    println!();

    for todo in todos {
        println!(
            "{0: <5} | {1: <20} | {2: <20} | {3: <20} | {4: <20}",
            todo.id,
            todo.title,
            todo.created_at,
            todo.updated_at,
            if todo.done { "Completed 😸".green() } else { "No 😿".red() }
        );
    }
}

We then create a function to mark a todo as done:

pub fn done(id: String) {
    let mut todos = utils::get_todos().unwrap();
    let id = id.parse::<u32>().unwrap_or(0);

    let exists = todos.iter().any(|todo| todo.id == id);

    if !exists {
        println!("{}", "Todo not found".red());
        return;
    }

    for todo in &mut todos {
        if todo.id == id {
            todo.done = true;
            todo.updated_at = utils::get_timestamp();
        }
    }

    utils::save_todos(todos);

    println!("{}", "Marked todo as done".green());
}

The next function is to remove a todo:

pub fn remove(id: String) {
    let mut todos = utils::get_todos().unwrap();
    let id = id.parse::<u32>().unwrap_or(0);

    let exists = todos.iter().any(|todo| todo.id == id);

    if !exists {
        println!("{}", "Todo not found".red());
        return;
    }

    todos.retain(|todo| todo.id != id);

    utils::save_todos(todos);

    println!("{}", "Removed todo".green());
}

Now, we have all the functions we need to create a todo app. We should integrate and make it work.

Integrating the functions

In the app/mod.rs file, import the dependencies.

use crate::todo::*;
use crate::utils;
use colorize::*;

We export a start function that will be called in the main.rs file.

pub fn start() {
    // ...
}

We first check and create the data file if it doesn't exist:

utils::init();

We then get the command and arguments:

let args = utils::get_args();

We then match the command and call the appropriate function:

match args.command.as_str() {
    "a" => add(args.arguments),
    "l" => list(),
    "d" => done(args.arguments),
    "r" => remove(args.arguments),
    "q" => std::process::exit(0),
    _ => {
        /// SHOW HELP
    }
}

As for the help, we do this.

println!("{}", "            No command found - Showing help".black());

let help = format!(
                "
            {} {}
            {}
            -----

            Help:

            Command   | Arguments | Description
            {}           text        Add a new todo
            {}                       List all todos
            {}           id          Mark a todo as done
            {}           id          Delete a todo
        ",
        "Welcome to".grey(),
        "TodoBook".cyan(),
        "Simple todo app written in Rust".black(),
        "a".cyan(),
        "l".blue(),
        "d".green(),
        "r".red()
);

println!("{help}");

Now, in the main.rs file, add this function call:

fn main() {
    app::start();
}

Now, we can run the app using cargo run. You should see something like this:

Conclusion

Thanks for reading. I hope you enjoyed this tutorial. If you have any questions, feel free to ask in the comments. You can also check out the source code here.

16+ JavaScript snippets to save your time

Posandu — Tue, 30 Aug 2022 17:03:13 +0000

I made some JavaScript snippets to save you some time. See them below and let me know your thoughts!

Detect if dark mode

This snippet detects if the user is in dark mode. And if so, it returns true.

const isDarkMode = () =>
    globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Usage
isDarkMode();

Copy to clipboard

This snippet copies the given text to the clipboard.

const copyToClipboard = (text) =>
    navigator?.clipboard?.writeText(text) ?? false;

// Usage
copyToClipboard("Hello World!");

Make items in an array unique

This snippet makes items in an array unique.

const uniqueArray = (array) => [...new Set(array)];

// Usage
uniqueArray([1, 2, 3, 4, 5, 1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]

Get random number

const getRandomNumber = (min, max) => ~~(Math.random() * (max - min + 1)) + min;

// Usage
getRandomNumber(1, 10); // Random number between 1 and 10

Get random hex color

This snippet returns a random hex color. It first generates a random number between 0 and 255, then converts it to hex.

const getRandomHexColor = () =>
    "#" + ((Math.random() * 0xffffff) << 0).toString(16);

// Usage
getRandomHexColor(); // Random hex color

Shuffle array

This snippet shuffles an array.

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);

// Usage
shuffleArray([1, 2, 3, 4, 5]); // Randomly shuffled array

Loop a function x times

This snippet loops a function x times. Useful if you have many loops.

const loop = (x, fn) => [...Array(x)].forEach(fn);

// Usage
loop(10, () => console.log("Hello World!"));

Get random element from array

This snippet returns a random element from an array.

const getRandomElement = (array) => array[~~(Math.random() * array.length)];

// Usage
getRandomElement([1, 2, 3, 4, 5]); // Random element from array

Get random string

This snippet returns a random string.

const getRandomString = (length) =>
    [...Array(length)]
        .map(() => String.fromCharCode(~~(Math.random() * 26) + 97))
        .join("");

// Usage
getRandomString(10); // Random string with 10 characters

Get random boolean

This snippet returns a random boolean.

const getRandomBoolean = () => Math.random() >= 0.5;

// Usage
getRandomBoolean(); // Random boolean

Get random number between two numbers

This snippet returns a random number between two numbers.

const getRandomNumberBetween = (min, max) =>
    ~~(Math.random() * (max - min + 1)) + min;

// Usage
getRandomNumberBetween(1, 10); // Random number between 1 and 10

Get cookie

This snippet returns the value of a cookie.

const getCookie = (name) =>
    ("; " + document.cookie).split(`; ${name}=`).pop().split(";")[0];

// Usage
getCookie("name"); // Value of cookie "name"

Clear all cookies

const clearCookies = () =>
    document.cookie
        .split(";")
        .forEach(
            (c) =>
                (document.cookie = c
                    .replace(/^ +/, "")
                    .replace(/=.*/, "=;expires=Thu, 01 Jan 1970 00:00:00 UTC"))
        );

// Usage
clearCookies(); // Clear all cookies

Scroll to top of element

const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth" });

// Usage
scrollToTop(document.querySelector("#element"));

Get average of numbers

const avg = (...numbers) => numbers.reduce((a, b) => a + b, 0) / numbers.length;

// Usage
avg(1, 2, 3, 4, 5); // 3

Validate email

This snippet validates an email using a regex.

const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

// Usage
validateEmail("obama@gmail.com"); // true

Validate object

This snippet validates an object using a rules object.

const validateObject = (object, rules) =>
    Object.keys(rules).every((key) => rules[key](object[key]));

// Usage
const rules = {
    name: (name) => name.length > 0,
    email: (email) => validateEmail(email),
    password: (password) => password.length > 0,
};

validateObject({ name: "", email: "", password: "" }, rules); // false

Chunk array

Chunks the array into x length chunks.

const chunkArray = (array, chunkSize) =>
    [...Array(Math.ceil(array.length / chunkSize))].map((_, index) =>
        array.slice(index * chunkSize, (index + 1) * chunkSize)
    );

// Usage
chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

RGB to HEX

const rgbToHex = (r, g, b) =>
    "#" + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");

// Usage
rgbToHex(255, 0, 0); // #ff0000

Raw String to normal string

This is useful if you're having a situation like this:

formatFn("string") + formatFn("string");

Instead of doing that, you can use the power of ES6's raw string syntax:

const f = (...args) => String.raw(...args); // This returns a normal string

formatFn(f`string` + f`string`);

Compare two objects

const compareObjects = (obj1, obj2) => {
    const c = Object.keys(obj1),
        n = Object.keys(obj2);
    return c.length === n.length && c.every((c) => obj1[c] === obj2[c]);
};

// Usage
compareObjects({ a: 1, b: 2 }, { a: 1, b: 2 }); // true

Get selected text

const getSelectedText = () => window.getSelection().toString();

// Usage
getSelectedText(); // Selected text

Get object of query params in the url

const getQueryParams = (url) => new URLSearchParams(url.split("?")[1]);

// Usage
getQueryParams("https://example.com?a=1&b=2"); // { a: "1", b: "2" }

Convert number to word

Converts large numbers like 1000000 to "1M".

const numToWord = (number) =>
    number.toLocaleString("en-US", { notation: "compact" });

// Usage
numToWord(1000000); // "1M"

Count number of duplicates in array

Returns an object with the number of duplicates in the array.

const countDuplicates = (c) => {
    const t = {};
    return c.forEach((c) => (t[c] = (t[c] || 0) + 1)), t;
};

// Usage
countDuplicates([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1 }

Generate tree from depth

If you need some testing JSON, you can use this snippet to generate a tree of depth depth.

const generateTree = (depth) =>
    [...Array(depth)].map(() => ({ tree: generateTree(depth - 1) }));

// Usage
generateTree(3); // [{ tree: [{ tree: [{ tree: [] }, { tree: [] }] }, { tree: [{ tree: [] }, { tree: [] }] }] }, { tree: [{ tree: [] }, { tree: [] }] }]

Conclusion

That's all folks! I hope you find this useful.

Find me on GitHub and Twitter.

console.log alternatives you didn't know 😮

Posandu — Wed, 03 Aug 2022 12:12:56 +0000

Now, think that you are writing some JS code and it doesn't work correctly. What's the first thing you do? You are console.logging it! So I'm going to tell you some alternatives for console.log.

Use destructuring

By using the destruction power of javascript objects, you can do this:

const { log } = console;

log("hi");
log("testing");

You can change the log function to any other name you want like this:

const { log: myLog } = console;

myLog("hi");
myLog("testing");

`console.group`

Ever wanted to group your logs? This method is perfect for you!

console.group("groupName");
console.log("hi");
console.log("testing");
console.groupEnd();

console.group("groupName2");
console.log("hi");
console.log("testing");
console.groupEnd();

Nice isn't it?

`console.table`

Useful for printing an array.

const arr = [1, 2, 3, 4, 5];
console.table(arr);

`console.time`

This method is used to measure time. For example, checking how many seconds it went to complete the x task?

console.time("test");
setTimeout(() => {
    console.timeEnd("test");
}, 1000);

This will give us the following result:

test: 1.000s

`console.assert`

This method is used to check if a condition is true. If it's not, it will throw an error.

console.assert(/** Condition **/, /** Error message **/);


console.assert(1 === 1, "1 is equal to 1"); // No error
console.assert(0 === [], "0 is equal to []"); // Error in the console

`console.count`

Count the number of times a certain thing happens.

console.count("counter 1");

for (let i = 0; i < 10; i++) {
    i % 2 == 0 ? console.count("counter 1") : console.count("counter 2");
}

This gives us the following result:

`console.trace`

This method traces where it was called. I have an HTML file like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <script>
            "test";

            console.trace();

            i = 0;
        </script>
    </body>
</html>

Now you can see where console.trace was called.

`debugger` keyword

You may not hear about the debugger keyword. It's a keyword that is used to stop the execution of the code.

const buggyCode = () => {
    debugger;
    console.log("hi");
};

// ...

buggyCode();

console.log("World");

And this pauses the execution of the code and you can see something like this:

And it tells you where the debugger was called.

Thanks for reading!

Thanks for reading this tutorial. Hopefully, you've learned something new and you're ready to start using it.

Connect:

Twitter: https://twitter.com/posandu
GitHub: https://github.com/posandu

DEV Community: Posandu

hello world

Discovering Svelte: Things I Learned While Using Svelte

Svelte Spring

Svelte Transitions

Keyed Each Blocks

Awaited Blocks

Sending Messages Between Components

Named Slots

Named Exports

@const and @html Tags

@const

@html

Conclusion

How to add Nprogress to SvelteKit

Step 2: Modify the layout

Typescript

Conclusion

Creating a rewards system with JavaScript

Prerequisites

Getting Started

Setting up the project

Creating the frontend

Creating the API

Conclusion

How to add Prisma to a Next.js project

What is Prisma?

Prerequisites

Step 1: Create a Next.js project

Step 2: Add Prisma to the project

Step 3: Create a database schema

Step 4: Push the database schema

Step 5: Install Prisma Client

Step 6: Add Prisma to the Next.js project

Query the database

pages/api/createProduct.ts

pages/api/getProducts.ts

pages/index.tsx

pages/add.tsx

Conclusion

Adding your discord status to a website

Step 1: Join the Lanyard Discord server

Step 2: Get your Discord ID

Step 3: Test the API

Step 4: Create a mockup

Step 5: Adding the things

Conclusion

Creating a Discord bot with JavaScript and hosting it

Getting Started

Creating the bot

Adding commands

Hosting the bot

Conclusion

Connect with me

Create a poll app using NextJS

Intro

Prerequisites

Getting Started

Database

UI

Backend

Conclusion

React Cheat Sheet - Learn the basics of React 🔥

Prerequisites

Initializing a React Project

React Components

React props

React events

React state

React useEffect

React hooks

React loops

React conditional rendering

Conclusion

Creating a todo CLI with Rust 🔥

Getting started

Creating the folder structure

Creating the structs

Creating the utility functions

Creating the todo functions

`@const` and `@html` Tags

`@const`

`@html`

`pages/api/createProduct.ts`

`pages/api/getProducts.ts`

`pages/index.tsx`

`pages/add.tsx`

`console.group`

`console.table`

`console.time`

`console.assert`

`console.count`

`console.trace`

`debugger` keyword