DEV Community: Kunal Bagaria

I made a tool in Rust to play mechanical keyboard sounds on every key press

Kunal Bagaria — Sat, 02 Oct 2021 16:39:26 +0000

Rustyvibes

A Rust CLI that makes mechanical keyboard sound effects on every key press. It was a collaborative effort that took months to make, is now finally releasing.

macOS:

brew install kb24x7/rustyvibes/rustyvibes

Windows / Linux:

cargo install rustyvibes

Usage

rustyvibes <soundpack_path>

Download Soundpacks: Here

Mechvibes vs. Rustyvibes

How does Rustyvibes compare to its competitors like Mechvibes? Mechvibes uses Electron and Chromium which is very resource intensive. Rustyvibes on the other hand is made with Rust and can be upto 10x-100x more resource efficient.

Mechvibes Soundpacks: Here

Privacy

Rustyvibes is a fully open-sourced project and never uses any network activity at all.

If you like what I'm doing, you can join my Discord server here

I made a CLI tool in Rust to play mechanical keyboard sound effects globally

Kunal Bagaria — Wed, 29 Sep 2021 13:58:54 +0000

Rustyvibes

A Rust CLI that makes mechanical keyboard sound effects on every key press. It was a collaborative effort that took months to make, is now finally releasing.

macOS:

brew install kb24x7/rustyvibes/rustyvibes

Windows / Linux:

cargo install rustyvibes

Usage

rustyvibes <soundpack_path>

Download Soundpacks: Here

Mechvibes vs. Rustyvibes

Mechvibes Soundpacks: Here

Privacy

Rustyvibes is a fully open-sourced project and never uses any network activity at all.

How to make a slash commands bot with Discord.js V13

Kunal Bagaria — Sat, 04 Sep 2021 14:14:17 +0000

So Discord has implemented a pretty big change in their API starting from early 2022 which will make message content a privileged intent and verified bots will have to request that intent additionally.

So I'm here to share how you can migrate your bot to slash commands entirely so that it doesn't stop working.

Before we get started, if you'd like to hang out with the community, you can join our Discord server here: DevHQ

If you are here just for the resulting code, you can find out the repository here: Repository

Let's get started.

You have to invite your bot with an updated scope of application.commands which is required to register slash commands.

First things first, its always recommended to use yarn since its much better than npm, so you can install that using:

npm -g install yarn

Let's make a new directory for our bot, cd it, and initialize it using:

yarn init --yes

Let's install Discord.js and some other dependencies,

yarn add discord.js @discordjs/rest discord-api-types/v9 @discordjs/builders

Time to create an index.js file, and import the following stuff:

const fs = require('fs');
const {
    REST
} = require('@discordjs/rest');
const {
    Routes
} = require('discord-api-types/v9');
// Require the necessary discord.js classes
const {
    Client,
    Intents,
    Collection
} = require('discord.js');

// Create a new client instance
const client = new Client({
    intents: [Intents.FLAGS.GUILDS]
});

Now we have created a client instance which only uses the Guild intent required to respond for slash commands, it is much less memory intensive than processing every single message throughout Discord.

Now, we will create a dynamic command structure for our bot, so lets create a directory called commands and add this to the index.js file:

// Loading commands from the commands folder
const commandFiles = fs.readdirSync('./commands').filter(file => file.endsWith('.js'));

Now it's time for tokens, pushing tokens into GitHub is very not recommended so we have to use env files to store our tokens safely.

yarn add dotenv

Create a .env file and add your token and your test guild / server id here, we'll talk about the test server later.

TOKEN=YOUR_TOKEN_HERE
TEST_GUILD_ID=YOUR_GUILD_ID_HERE

You can copy the Guild ID like this

Create a .gitignore file and add this to the file:

.env

Time to configure it in our index file:

// Loading the token from .env file
const dotenv = require('dotenv');
dotenv.config();
const TOKEN = process.env['TOKEN'];

Now that we have finally gotten our token, it's time to talk about the Test Guild ID, so slash commands in Discord requires us to register it first, and we can't register it globally every time in development or we are gonna get rate-limited and potentially banned from accessing their API for some time.

We only need this in development, we don't need to do this when we are deploying our bot in production. So please don't add the Test Guild ID when you want your commands globally available. Now let's add the Guild ID to the index file:

const TEST_GUILD_ID = process.env['TEST_GUILD_ID'];

It's time to register our commands now, we will make a condition that will automatically switch between global and development registration depending upon whether the Test Guild ID is available.

const commands = [];

// Creating a collection for commands in client
client.commands = new Collection();

for (const file of commandFiles) {
    const command = require(`./commands/${file}`);
    commands.push(command.data.toJSON());
    client.commands.set(command.data.name, command);
}

// When the client is ready, this only runs once
client.once('ready', () => {
    console.log('Ready!');
    // Registering the commands in the client
    const CLIENT_ID = client.user.id;
    const rest = new REST({
        version: '9'
    }).setToken(TOKEN);
    (async () => {
        try {
            if (!TEST_GUILD_ID) {
                await rest.put(
                    Routes.applicationCommands(CLIENT_ID), {
                        body: commands
                    },
                );
                console.log('Successfully registered application commands globally');
            } else {
                await rest.put(
                    Routes.applicationGuildCommands(CLIENT_ID, TEST_GUILD_ID), {
                        body: commands
                    },
                );
                console.log('Successfully registered application commands for development guild');
            }
        } catch (error) {
            if (error) console.error(error);
        }
    })();
});

Now that we have registered our commands in Discord, it's time to listen and respond to them

client.on('interactionCreate', async interaction => {
    if (!interaction.isCommand()) return;
    const command = client.commands.get(interaction.commandName);
    if (!command) return;
    try {
        await command.execute(interaction);
    } catch (error) {
        if (error) console.error(error);
        await interaction.reply({ content: 'There was an error while executing this command!', ephemeral: true });
    }
});

Finally for our index file, we need to log in to our bot

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

We can now move into the commands sub-directory, and let's make a ping.js file with the following code:

const { SlashCommandBuilder } = require('@discordjs/builders');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('ping')
        .setDescription('Replies with pong'),
    async execute(interaction) {
        interaction.reply({ content: 'Pong' })
    }
};

We have now successfully created a working ping pong bot in Discord.js V13. Now you can create as many commands as you want for your bot by following the same format as the ping command. The code for embeds are same, and there are a lot of new features like buttons and select menus which we haven't talked about here. If you want to send an embed, you just need to do:

interaction.reply({ embeds: [embed] })

Hope you like this short tutorial and you can follow me on Twitter here

Free Deployment Platforms:

Hope to see you on the next one :)

What is a Frontend and a Backend? Basics of web development to clear your doubts

Kunal Bagaria — Sat, 21 Aug 2021 15:54:01 +0000

So you wanna be a full stack web developer but are confused with simple topics like a Frontend or a Backend. Stick around this article, and I'll guide you on how you can start with web development.

Before we start, you may wanna join my Discord if you have any doubts or just want to hang out: Invite Link

Let's start with Frontend. The Frontend is basically the visual content that is rendered when you open a website. The browser renders that using HTML, CSS and JavaScript.

You can make a Frontend either in fully Vanilla JavaScript, or you can use a JavaScript framework like React.js or Vue.js. Larger web applications typically use frameworks like these to make workflows easier.

You might be asking, wait a minute, how is the content dynamic in websites? Those topics are better covered in web networking, but in a nutshell, the Frontend uses network requests from your server (which is the Backend) to display dynamic data onto the website.

And this is a nice segue to the Backend, the backbone of web applications. The Backend handles everything from user authentication to handling user data.

You can make a Backend with a Backend framework like Django, Ruby on Rails, Laravel, Express.js, etc.

A Backend is deployed on a server, you can use cloud services like AWS, GCloud, DigitalOcean, Azure, etc for this.

So how does the Backend store data? A Backend interacts with a database that stores all the data. You can use databases like Postgresql, MongoDB, etc.

So, onto the final question, where do I start?

For the Frontend, you MUST learn HTML, CSS and JavaScript to build dynamic websites. And then comes the option of frameworks, you may choose any one of them, React.js and Vue.js are the most widely used ones in this industry.

For the Backend, if you have already learnt JavaScript and don't want to learn another language, I recommend you use Express.js. Otherwise if you're familiar with multiple languages or just want to learn Backend development, you may learn Django or Ruby on Rails. Those are the best options for beginners.

Hit the like and follow button if you liked this article, I'll see you in the next one.

I made a script in Rust that will change your mac app's icon from a png

Kunal Bagaria — Thu, 05 Aug 2021 17:43:37 +0000

Thumbnail credit: Eric Hoffman

Cool, how do I use it?

Install the tool using brew

If you don't have brew, you can install it here

Now in you terminal, run:

brew tap kb24x7/redock && brew install redock

It should be properly installed and ready to use.

Run the tool by using:

redock

It'll prompt you to drag your PNG file. (The file should have a large resolution and should be square.)

After adding the PNG file, it'll prompt you to drag the application you want to replace the icon of.

After you do that, you can sit back and relax while the script does its thing.

(This is the first time I've ever coded in Rust, so you might see some ugly scripting if you want to check the source)

If you liked this content, hit this post a like and follow me on Twitter

Will see you the next time I create something :)

How to stop child elements from inheriting parent element's onClick in React

Kunal Bagaria — Mon, 02 Aug 2021 10:51:52 +0000

So you created a div with an onClick that redirects to a link or does any normal function. But that div also contains child elements that would do different functions or nothing at all, and are still doing the parent element's function. There is a very simple solution to fix this.

Suppose this react code:

import React from 'react'

const NormalReactElement = () => {
   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element">
            <p>I am a child element</p>
         </div>
      </div>
   )
}

So how do you fix this? Here's how you can fix this:

const NormalReactElement = () => {

   const handleChildElementClick = (e) => {
      e.stopPropagation()
      // Do other stuff here
   }

   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element" onClick={(e) => handleChildElementClick(e)}>
            <p>I am a child element</p>
         </div>
      </div>
   )
}

Hope you like the quick solution to this, I'll see you in the next article.

The best free cloud platform to deploy your bots and projects? Railway.app review

Kunal Bagaria — Sun, 01 Aug 2021 11:52:56 +0000

I've tried most popular cloud platforms. AWS, Heroku, DigitalOcean, GCloud, etc. None of them have impressed me with their ease of use or pricing.

You have probably always wanted to deploy your own application to the cloud but didn't, after seeing the horrifying dashboards of AWS and other platforms.

I mean look at this mess

Railway offers an easy one click dockerized deployment for your applications. You can link your Github repo for automatic deployments on new commits and also a CLI tool to deploy directly.

It currently offers the following plugins:

MongoDB
PostgreSQL
Redis
MySQL

They have usage based plans to better suit the developers

How to create a popup menu in React that closes on clicking outside (module)

Kunal Bagaria — Sat, 31 Jul 2021 11:17:06 +0000

So here you are, you want to make your popup in your website but you can't find a good tutorial on how to do that. Fear not, your friendly neighborhood react developer is here to save the day.

First things first, we are gonna use an external npm module to make things easier.

yarn add react-click-away-listener

npm i react-click-away-listener

Now, on to the syntax:

You can find additional docs here: Link

import { useState ) from 'react';
import ClickAwayListener from 'react-click-away-listener';

const App = () => {
    const [popup, setPopup] = useState(false)
    return (
        {/* The option to open the popup */}
        <button onClick={() => setPopup(true)}>Click Me</button>
        {/* The popup itself */}
        {popup && (
            <ClickAwayListener onClickAway={() => setPopup(false)}>
                    <div className={'popup'}>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                    </div>
            </ClickAwayListener>
        )}
    )
};

There you have it, that's basically how you can make a click away listening popup in react. I have excluded the styling portion for this article, but I'll be sure to write up on it soon.

I made a website that makes articles appear like a Twitter thread

Kunal Bagaria — Thu, 29 Jul 2021 07:55:06 +0000

Link: threadRoll

So long ago, I came across a product called Thread Reader App, that unrolls Twitter threads into a article format. So this, is exactly the opposite of that.

But why?

I have been asking myself the same question for weeks while I was making this. Basically, people read really long threads in Twitter. So they are habitual to reading them like that, and may find it nostalgic to read everything that way.

This was made completely from scratch using this tech stack:

React.js [Next.js], Node.js [Express.js], Auth0 [Authentication]
Deployed on: Vercel [Frontend] and Railway [Backend]

Features:

Custom Article Links
Save Articles
Curated Article Recommendations
Share them with others
Theme switching

Hope you like it. Any feedback is appreciated in the comments!