DEV Community: SauhardoSengupta

Annoucement: Suggest What You Want!🎉🎉

SauhardoSengupta — Wed, 27 Apr 2022 15:37:07 +0000

I have been recently doing blogs about different frameworks and tutorials on various things but today I need your help.

I Need Your Help
I want you to suggest me a topic (eg-frameworks, tutorials) and I will make a blog on it and also credit you for suggesting the ideas

Feel free to suggest me anything!

P.S - send suggestions in comments!

What's Svelte?

SauhardoSengupta — Sun, 24 Apr 2022 15:27:42 +0000

it's like wherever I look nowadays everyone's using svelt and telling that's one of the best frameworks they used, so is it true? is svelte truly the best framwork?

let's take a look at this in todays blog and see which is truly better

Introduction
The first thing that we need to understand is that svelte is not a framework nor a library but it's a compiler.

In svelte you write svelte code which compiles and converts into vanilla JavaScript code

this code is then executed in the browsers,so no library like react or react-dom is not needed

Advantages Of Svelt

Svelt has many advantages but one of the best is small bundle size since you don't have a bunch of libraries to slow down your application

Svelts learning curve is really really small as it uses html and javascript with a few added features

Svelt does not use the virtual dom as it feels like its not worh it if you want to read about this

Check Out This Article by svelt https://svelte.dev/blog/virtual-dom-is-pure-overhead

Svelt is truly reactive you dont need something like recoil or redux

Svelt echosysystem
The svelte ecosystem is fairly new but has a great community and lots of libraries and code we can use

lots of developers such as myself love svelt for its simplicity and its syntax

Ok lets talk about the bad
alright lets talk about somethings you may or may not like

svelts syntax can be a bit confusing if you are a beginner
thought its unlikely that you will find their syntax odd some developers do complain its a little hard for them to adjust but personally if would say svelts sytax is not hard but its different than something like react or svelt

svelt is not popular?

unfortunately frameworks are kind of a popularity contest and thats why people love frameworks like react and vue and i personally svelt is going under the rader for a lot of people
this might cause some people to to use svelt at all as somepeople are really worried about the frameworks they use and learn

Conclusion
In conclusion svelt is great but is it the best framework? well no really... every framework has its ups and down but the way svelt is doing is amazing. Its has become one of my favourite things to talk about

Want more? content
hey there do you want more of this good content?well you can visit my YouTube channel and subscribe there if you want to support me

MyChannel - https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA

Creating A Moderator Bot using Node.js

SauhardoSengupta — Sat, 23 Apr 2022 10:53:38 +0000

Whether it's creating a discord gaming server or a community server you need some type of moderator to maintain and keep control of the chaos. This might be in the form of blocking inappropriate text or images which can be a big problem if the server is for children.

so, the question is how do we do it? there are two ways to do this

1) hire a moderator and pay them
2) create a bot that can do all of the same things if the better and the cost is $0

let's do option 2 it's much more effective and cost-efficient

Introduction

so we are going to use node.js with the discord.js library to interact with discord API

so let's first initialize a package.json

npm init

running this command will ask a bunch of questions for the project, so enter the correct details for the project and let's get into the next step

create a javascript file called index.js and in the package.json add the following to the scripts

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

now, let's install the necessary libraries

npm i discord.js --save

this is going to be for development so install it as a dev dependency.

npm i nodemon --save-dev

now let's add another development script to the scripts in package.json

"scripts": {
    dev: 'nodemon index.js'
 },

Let's Get Started

in the index.js file import the discord library to use it in our codebase

const discord = require('discord.js');

then let's create a constant called client which will contain the discord client object which represents the bot.

const client = new discord.Client({
  intents: [
    Intents.FLAGS.GUILDS, 
    Intents.FLAGS.GUILD_MESSAGES
  ]
})

whenever someone sends a message or when the bot joins it's called an event.

user1 ==> sends message ==> event sent
each event has a name that represents its function like onMesssage and ready which only runs when a user send's a message or when the bot joins!.

We can also give a callback function that runs when the event is sent.

We can look if someone has posted something by using the onMessage event which will run when someone sends a message with all the details of the message sent

//logging when ready
client.on('ready', () => {
  console.log('🤖🤖 Bot is ready to login');
  console.log(`Logged in as ${client.user.tag}!`);
});

we, need to install the bad-words package which will detect bad words in the messages

npm i bad-words

const Filter = require('bad-words')

client.on('messageCreate', async (message) => {
  const filter = new Filter();

  if (filter.isProfane(message.content)) {
    message.delete();
    message.channel.send(
      `${message.author.username} you are not allowed to use that 
       word.`
    );
  }
})

now we have the get the discord token and use this line of code to initialize our bot

client.login(process.env.DISCORD_TOKEN);

to add nudity detection in images we can use this API.

Content Moderation and Image Analysis

Powerful APIs to assess, filter and moderate photos, videos and texts. Instantly detect nudity, violence, offensive content with our easy-to-use API, at a fraction of the cost of human moderation

sightengine.com

click on login if you have an account or get started if you don't have an account enter your email and password

go to the API key's section and copy the API use token and the API secret

also, install Axios to send and fetch data for the NSFW verification
npm i axios

after that's done let's do a request...
now here we need to pass in a URL to send it for review

axios.get(
    'https://api.sightengine.com/1.0/check.json',
    {
      params: {
        url,
        models: 'nudity,wad,gore',
        api_user: API_USER,
        api_secret: API_SECRET,
      },
    }
  );

to get the user's attachment file let's see if the user has one
and then extract the URL parameter from the message which contains the image sent by the user

client.on('messageCreate', async (message) => {
  //checking if the user has a attachmnet
  if (message.attachments.size > 0) {
     //send the picture url for review using the api
    //message.attachments.first().url --> url of the image sent by the user

    const { data } = await axios.get(
    'https://api.sightengine.com/1.0/check.json',
    {
      params: {
        message.attachments.first().url,
        models: 'nudity,wad,gore',
        api_user: API_USER,
        api_secret: API_SECRET,
      },
    }
  );
  }
})

insert this code inside the if condition to delete the message and send an alert message

  if (
        data.weapon > 0.01 ||
        data.alcohol > 0.1 ||
        data.gore.prob > 0.1 ||
        data.nudity.safe < 0.9
      ) {
        message.channel.send(
          `${message.author} Please do not post nudity or gore content.`
        );

        message.delete()
       }

finally its ready! run npm run dev to see the results and all the messages that are inappropriate video messages etc.

signing off...

PROMOTION
want to support me in making these blogs?

subscribe to my channel
https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA

follow me on GitHub
https://github.com/sauhardo2020

Problem With CSS

SauhardoSengupta — Tue, 19 Apr 2022 15:52:22 +0000

CSS is one of those technologies that we learn to use when starting with web development. But after we find better solutions we don't really think about it. Don't get me wrong CSS is great it helps us build modern and rich ui for websites. But when I'm creating a web application for my client CSS might not be the best choice.

The Problem With Frameworks

the only problem I have with using framework such as bootstrap or tailwind is that they are a completely different way of writing CSS and a average beginner might find it difficult to use these technology right away in their project. So the problem arises how do we make css less boring and also make it easier for developers to write it?

Solution To The Problem

Let's introduce Sass also known as Syntactically Awesome Style Sheets.

Sass is a css framework that builds on top of normal css,its like typescript but for css.

But Why do i like sass so much?

to know the answer of this lets answer three questions

Why should I use sass?

Sass is literally css!.Yeah sass is literally css but with some extra feature. This makes developer experience amazing!
Sass is smart!. When you write sass you are also writing legacy support for older browsers
Sass is mature! sass is stable and has a large community!

So the next time someone tells you they need to use a CSS framework point them to this blog!

Now for the final part I am going to give you some resources that you can use to your advantage

sass Documentation: https://sass-lang.com/

SASS SCSS SYNTAX AND SASS

sass can be written in two ways using the scss or the sass way
create a file with .scss syntax to use the scss syntax
and use .sass to use the sass bracket syntax

What't the difference

SCSS does not contain any brackets and relies on indentation
SASS uses to contain a style

TIP: CHECK THE SASS DOCS TO SEE MORE ABOUT SASS VS SCSS

//scss code
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

//sass code
 .button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

PROMOTION
If you like this content be sure to subscribe to my youtube channel as a thank you helps me a lot! :)

CHANNEL--👉https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA

signing off....