DEV Community: Shreyas Pahune

All about design systems

Shreyas Pahune — Wed, 23 Oct 2024 20:50:09 +0000

What is a good design

Good design makes complex product / technology accessible and usable for a huge set of users. It helps to reduce the cognitive load of finding new features or using existing features in a product, hence making the user more productive.

An essential KPI for a product has to be it’s retention and the ability of it to streamline the tasks for the user and make the user feel more organized, which essentially is a objective of a good design.

Design is all about problem solving. Identification of the pain point of the user, researching, and iterative testing is what makes a product highly usable.

Why design systems exists

So as the name suggests design system is a comprehensive set of principles, guidelines and framework , to create a consistent and cohesive design.

A design system standardizes the UI components and visual style across teams to eliminate the inconsistency between the design, and eventually the final product.

Design system aids collaboration across various teams, such as design, development, marketing and product by creating a unified framework which is understandable to everyone.

It fosters the alignment between the design and development team, by offering a well documented framework and structure ensuring that what gets built is matching with the designer’s idea.

Establishing core design principles

Though sounds very superficial, but establishing the core design principles in the design system is utmost necessary, eventually the core will give you the ‘why’ behind the design. It clarifies the brand identity and the product’s vision.

Whether creating new components or adding functionality to the existing ones, teams can fall back upon the core to make sure that the product remains on the right track and adheres to the correct vision.

Creating a unified visual language

After laying down the core principles, designers have a deliberate choice to make, which is going to shape how a new user experiences and interprets the brand.

Choosing typography, colors and other important design elements is the essence of the product. Some of the key design elements are

Typography
- Fonts are chosen based on how easy and appealing are they going to look on almost all sizes of screen.
- From a development point of view, web friendly fonts are chosen to ensure the performance and the load times are minimal.
Colors
- Aesthetics and identity of the brand are the factors of colors decisions.
- The primary, secondary and neutral colors are chosen and then used in elements like buttons, toggles, headers etc..
Spacing
- Another aspect which is overlooked is spacing as it plays the crucial role of defining the gap between components hence maintinng a cohesive structure.

Conclusion

The design system has to be organized and accessible. It should include the basics from ‘why’ which is the core principle to the very detailed component design which is the unified visual language. It should also be scalable and collaborative in nature.

Though the design is usually prepared on Figma or other tools like it, products like storybook and GitBook provide an amazing arsenal of tools to document the whole structure.

All about Jamstack

Shreyas Pahune — Tue, 06 Sep 2022 09:36:49 +0000

Hey everyone, in this blog we’ll be learning about

What is Jamstack?
Benefits of Jamstack.
Approach towards a Jamstack project.
Jamstack site generators.

So let's get started ✨.

What is Jamstack?

Jamstack is a system to build fast, lightweight web apps with minimal efforts.

Jamstack is powered by

JavaScript
APIs
Markdown

It is a method to deliver static websites to the user with ease of development. Instead of serving dynamic content using a huge backend, dynamic parts of the websites are powered by APIs. This makes the website snappy and fast as the JavaScript shipped to the user is reduced.

The website's static part is stored in a CDN so the website will be loaded swiftly. Using this technique we can divide our project into small islands in which we can add JavaScript to some of the island thus resulting in lighter websites. This technique is called island architecture.

How does Jamstack handle backend functionality?

Backend is a piece of code that runs on a server without exposing itself to the user. So to handle the backend functionality, Jamstack uses APIs through which we can fetch and send data to the server, which will further send us the computed data.

We can make our custom APIs for niche tasks using any backend framework like ExpressJS and use them in our web apps.

Why should we use Jamstack?

Swiftness
- The website can be blazingly fast as the majority of the content will be statically served with minimal JavaScript shipped to the user.
Scalablity
- Since the backend/API is developed independently, scaling the website wouldn't be a tedious task, and due to the fast speed, heavy traffic can be managed smoothly.
Developer Experience
- People always give importance to the user experience (UX), but very few folks pay attention to the developer experience (DX). Using Jamstack web apps can be easily developed with a straight-forward approach.

Approach towards a Jamstack project.

There is a very straight-forward approach to be followed while developing a project using Jamstack.

Divide the project into islands.
Use HTML/CSS for static parts/islands.
Hydrate the dynamic islands with JavaScript.
Use APIs to build dynamic components.

Jamstack Generators

There are a ton of generators for Jamstack. Here are some static site generators for Jamstack sites.

Thank you for reading the blog, hope it was helpful.
Until next time 🙌🏻.

An extensive guide to build your NPM package and publish it.

Shreyas Pahune — Thu, 23 Jun 2022 21:31:15 +0000

Hey folks, I hope you all are doing great. I've been building APIs and backends using NodeJS and ExpressJS for a while now and the one thing that I find most tedious is setting up the project.

It includes:

Making directories like:
- Middlewares
- Routes
- Database
- Models
Setting up the boilerplate code in the index.js or the server.js file.
Making .env files and storing the secrets.
Installing usually used packages like:
- CORS
- ExpressJS
- JWT
- BcryptJS
- DOTENV

We are going to make this whole process happen with just one command.

What are we going to build?

We are going to build a backend builder which lets us create the necessary folders, files and initialise the server with a basic get route. It will also install all the packages required for the server to work. So let's get started.

Step-1 : Making NPM Account

Make an account on NPM and login to the account.

Step-2 : Setting up the project

Make an empty directory/folder.
Create a js file named as bin.js in the folder.
Run npm init in that empty folder and set the entry point as bin.js.
This will create a package.json file.
Modify that file according to the below image.

Step-3 : Coding

Inside the bin.js file import these three packages.

#!/usr/bin/env node

const process = require("process");
const fs = require("fs");
const child_process = require("child_process");

We do not have to download these packages as they are inbuilt in NodeJS.
We use shebang code (#!/usr/bin/env node) to tell the kernel which interpreter should be used to run the file. You can simply ignore it.
When a user uses the package, they should get an intimation that some process is happening. So to do that add these two console.log() into the file.

// for user intimation
console.log("Building folders and initialising your server...⛳️");

console.log(
  "This might take few seconds...⏳"
);

Now we have to create three folders:
- db
- routes
- models
In order to do so we will use fs.mkdirSync(). mkdir means make directory and sync means it will make directory synchronously.
Add the below code to create folders.

// make folders
fs.mkdirSync(`${process.cwd()}/db`);
fs.mkdirSync(`${process.cwd()}/model`);
fs.mkdirSync(`${process.cwd()}/routes`);

You might see that I have used process.cwd(). This means the folders would be created in the current working directory (cwd) in which our package or npx executable command would be used.
Now we have to install some packages so that our server could run.
We will install:
- express
- cors
- jwt
- dotenv
- bcryptjs
- nodemon (dev dependency)
If we want to run commands using a package we would have to use child_process.execSync().
child_process enables us to spawn subprocesses inside the main / parent process.
execSync lets us execute shell/terminal commands using nodejs.
Use the code given below for reference.


//  install packages
child_process.execSync("npm init -y", { stdio: [] });
child_process.execSync("npm install express", { stdio: [] });
child_process.execSync("npm install cors", { stdio: [] });
child_process.execSync("npm i jsonwebtoken", { stdio: [] });
child_process.execSync("npm i dotenv", { stdio: [] });
child_process.execSync("npm i bcryptjs", { stdio: [] });
child_process.execSync("npm i -D nodemon", { stdio: [] });

Now we have to create a .env file to store secrets in it.
To make a file use a method fs.appendFileSync(). It adds the given data to the file and by any chance if the file is not present then it creates the file and writes the data in it.

fs.appendFileSync(`${process.cwd()}/.env`, `PORT=8080`);

Now we have to make the server.js file and write some boilerplate code in it.
We will use the same function as above.

fs.appendFileSync(
  `${process.cwd()}/server.js`,
  `
const express = require('express');
const app = express();
require('dotenv').config();
const cors = require('cors');

// middlewares
app.use(cors());
app.use(express.json());

// defining port
const PORT = process.env.PORT || 3001;

// setting up an empty GET Route
app.get('/', (req, res)=>{res.json({message: "You've come to the right place... it's a GET request!!"})});

// Starting Server on PORT
app.listen(PORT, () => console.log('Server started on PORT Number: ' + PORT))
`
);

The first argument in fs.appendFileSync() is the path to the file and the second argument is the data to be written in the file.
If we are going to push the data to a repository we will need a .gitignore file. So we will create that as well.

fs.appendFileSync(`${process.cwd()}/.gitignore`, 
`
node_modules 
.env
`);

Now we will add a final intimation saying that everything is completed and you may use the project now.

console.log(
  "Folders are created and server.js is initialized with boilerplate code...\n RUN: nodemon server.js \nHappy Coding ✨"
);

Step-4 : Publishing your NPM package

Navigate to the root directory of your project and run the following command.

npm publish --access=public

To use the package, run npx @your_username/projectname@latest

Drum Roll 🥁!!

You have made your NPM package which handles the boring and tedious task of setting up a backend and you have published it as well. Thank you for reading the blog ✨.

View full Code:

Basics of Typescript

Shreyas Pahune — Tue, 28 Dec 2021 10:28:13 +0000

Hey developers in today's blog we are going to learn about the basics of typescript.

This is going a be a series of blogs in which I'm gonna help you learn TypeScript in an easy way!

We are going to cover

What is TypeScript?
Why should we use it instead of JavaScript?
Pros and Cons of TypeScript.

What is TypeScript?

TypeScript is the superset of JavaScript.
TypeScript can be used to built enterprise level applications.
TypeScript provides:
- Static Typing
- Classes
- Interfaces
- Unions
and a ton of amazing things...

Why should you use TS instead of JS?

TS will save you from more exceptions and project failures.
- If we have a function which will add two numbers

  function addNums(a, b){
      return a+b;
  }


  console.log(addNums(10 + '10'))
  // here the output would be 1010

As shown in the above example... this code is valid and it will run perfectly but it does not give the expected output.

These sort of silly failures are prevented by typescript.

The code in TS would be

  function addNums(a:number, b:number){
      return a+b
  }

  console.log(addNums(10 + 10)) // output: 20
  console.log(addNums(10 + '10')) // output: this would give an error (argument of type string isn't assignable to string)

If there is a large code-base and there are lots and lots of variables... so it is natural to not remember many of them. TS has a great integration with the IDE and together they make our coding experience a lot more smooth. There are many benefits like :
- Hover Support

Code auto completion
- With static typed languages the auto complete is better and faster.
Type checking in real time
- In JS we can access the property of an object which does not exists and it will just return undefined but in TS it will show an error that the property you are trying to access is not present.
Easier Code Factoring

Advantages/Pros of TypeScript

Steep learning curve
- You don't have to learn a whole new language as all those features which you are used to in JS are primarily used in TS also.
Spotting bugs is relatively easy
- According to a research 15% of bugs are found at the compile stage
Readability
- The code becomes more self expressive due to the types.
- The code speaks for itself which helps a lot when working with big teams.
Follows OOP paradigm
- The concepts of OOPs like classes, inheritance and interfaces can be used in TS.
Huge Community
- As per reports TS was the second most loved language of 2020.
- There are lots of developers and a great community out there which works on TS and it is also maintained by Microsoft.

Disadvantage/Cons of TypeScript

TS has to be compiled as the browsers don't understand it.
Long TS codes might take some time to compile.

This was just the basics of typescript and in the next blog I'm gonna explain how to code in typescript (Basic data types, Arrays, Tuples, Union, Interfaces, Types and many more fun stuff!!)

Thank you so much for reading the whole blog and please share your feedback in the comment section.

Make your own API under 30 lines of code

Shreyas Pahune — Fri, 24 Sep 2021 10:31:03 +0000

Hey readers 👋🏻, in this blog we are going to discuss about making our own API in just 30 lines of code.

Topics Covered :

What is an API.
Tech used to make one.
How to code it.
How to deploy it (FOR FREE).

Those who all know what APIs are and don't want to know anything else then 'How to code it', you can skip to that part directly.

What is an API :

API stands for Application Programming Interface, which is a way for computer to talk to each other. APIs are just like website, except the UI part, it sends a request to a server and in return the server send a response .

Most APIs which we use are RESTFUL APIs, which means they follow a set of protocols/rules .

You all already know what URLs are, but APIs use URIs which stands for Uniform Resource Identifiers and they help to differentiate between data on a server.

There can me many more end points, like here in the above image the end point is /names.

There are many requests we can make to the server but most common ones are :

GET: Reading the data.
POST: Creating new data.
PATCH: Updating new data.
DELETE: Delete new data.

We have talked a lot about requesting, let's talk about responses.

There is a thing called status code, which tells you about the response you got from the server. The responses can be divided into 3 levels.

2** Level (200-300) : Everything was fine, the response is fetched.
4** Level (400-500): There was something with our request, and the data is not fetched.
5** Level (500+): Server has failed to send the data.

Tech used to make an API:

I have used :

JavaScript
Node.JS
- Express JS
Replit (for deployment)

How to code an API:

This is going to be the most important part of the blog.

In this blog, I am going to make an API which returns the details of devices available at an electronic shop.

const products = [
    {
      name: 'iPhone 13',
      color: 'White',
      company: 'Apple'
    },
    {
      name: 'OnePlus 9',
      color: 'Blue',
      company: 'Oneplus'
    },
    {
      name: 'iPhone 12',
      color: 'Purple',
      company: 'Apple'
    }
]

Above is an object which we want the API to return.

By this point I am assuming that you all have initialized npm and installed express

npm init -y (Initializes NPM)

npm i express (Install Express)

Steps :

Step 1: We have to import express in our project.
- const express = require('express');
Step 2 : Initialize a variable to call the main express() method.
- const app = express();
Step 3: Setup a port.
- const PORT = 8080;
Step 4: Use a middleware to parse the data into json.
- app.use(express.json());
Step 5: Add the Product Object to the file.

Till now the code looks like :

const express = require('express');
const app = express();
const PORT = 8080;
app.use(express.json());

const products = [
    {
      name: 'iPhone 13',
      color: 'White',
      company: 'Apple'
    },
    {
      name: 'OnePlus 9',
      color: 'Blue',
      company: 'Oneplus'
    },
    {
      name: 'iPhone 12',
      color: 'Purple',
      company: 'Apple'
    }
]

Step 6: Make the server listen to our port / Start the server.
- app.listen(PORT, () => console.log('server is 🟢'))
- .listen() is a function, which starts the server and listens at the port assigned.

The code is 👇🏻

const express = require('express');
const app = express();
const PORT = 8080;
app.use(express.json());

const products = [
    {
      name: 'iPhone 13',
      color: 'White',
      company: 'Apple'
    },
    {
      name: 'OnePlus 9',
      color: 'Blue',
      company: 'Oneplus'
    },
    {
      name: 'iPhone 12',
      color: 'Purple',
      company: 'Apple'
    }
]

app.listen(PORT, () => console.log(`API 🟢`))

Step 7: Make a function which handles GET Requests.
- For this we have an in-built function called as .get(resource-link, callBack-Function)

    app.get('/products', (req, res) =>{
      res.status(200).send(products)
    })

Here we are setting the resource-link as /products which means the user can get the data when he heads to www.xyz.com/products.
- In the callback function, we have 2 parameters one is for request and another is for response.
- Now as a server, when a user sends get request we have to respond to that and send data.
- In agreement to the above point, we are sending the data using res (response parameter).
- To send the data we use .send() method, and additionally we are also sending the status code using .status().

That's It!! Your API is ready 🎉 and right now you can start your localhost server and head on to http://localhost:3000/products and you will be able to see the data.

How to deploy your API for FREE :

If we do not deploy our API, then what is the use of it?

Deployment in simple terms is making your API go live for 24 x 7, you can use it whenever you like.

By this point I am assuming that you all have a Replit Account

The steps are really simple :

Step 1: Make a new project in replit account under the section of Node.JS
Copy Paste the code you just wrote in your text editor / IDE.
On the right hand side, you'll see a package section.
- Go inside it and download express.
Run the code.
You'll see a URI on the right hand side of the screen like this 👇🏻

Now head on to the link and write /products or the any endpoint which you created and you'll be able to see the data in json format.

Thank you so much for reading the whole blog 👏🏻, I really appreciate it.

Till then...good bye !

JavaScript Objects

Shreyas Pahune — Sat, 18 Sep 2021 10:25:32 +0000

Hey developers 👋🏻, in this blog we will be discussing about JavaScript Objects.

Topics Covered :

What are JavaScript Objects.
Why to use them?
Three ways to create them.
How to access properties from Objects.

What are JavaScript Objects ?

JavaScript Objects are just as real world objects, for example:

A car is an object which has some property :

One Engine
4 Tiers
4 Doors
Company's Name
Color

and many more. We just have to express this in a syntactical way :

let car = {
    company: "Tesla",
    color: "Matte-Black",
    tiers: 4,
    doors: 4,
    engine: 1
}

Here as we can see there are 4 properties company, color, tiers and doors, where all of these properties are defined in a key : value pair and the key is the indicator of the value.

So if I console.log(car) I would get :

further in this blog, I will explain how to make an object in detail but before understanding that let's understand the need of objects.

Why to use Objects ?

Objects are non-primitive data types which means they are not meant to store a single data, rather it is meant to store more complex entities. We can store multiple data-types inside an object, even functions are accepted in them.

In a very layman's terms, objects is a mini version of class, which can be used to store multiple entities and can be used in multiple places though it would be wrong to compare objects and classes.

Three Ways to Create Objects :

Three ways to create objects are :

1. Object Literals :

      const person = {
          name: "Shreyas Pahune",
          age: 18,
          isMale: true,
          favLangs: [
              "JavaScript",
              "TypeScript",
              "Java",
              "Dart/Flutter"
          ]
      }

ii. Here in the above way, we just have to insert the key : value pair inside a pair of curly brackets.

2. New Keyword :

      const person = new Object()
      person.name = "Shreyas Pahune"
      person.age = 18
      person.isMale = true
      person.favLangs :  ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]

ii. When using this way, the code gets unnecessarily long, while you can achieve the same result by using the Object Literal method (1st method).

3. Using Object.create() :

      const person = {
          name: "full-name",
          age: 0,
          isMale: true,
          favLangs: [
              "Lang1",
              "Lang2",
              "Lang3",
              "Lang4"
          ]
      }

      const shreyas = Object.create(person)
      shreyas.name = Shreyas Pahune"
      shreyas.age = 18
      shreyas.isMale = true
      shreyas.favLangs :  ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]

ii. Object.create() always makes an new object whilst keeping the original object as an template to follow.

How to Retrieve Data from Objects ?

There are two ways of retrieving data from an object :

Dot Notation
Bracket Notation

Dot Notation is :

let person = {
    name: "Shreyas Pahune"
}

console.log(person.name) // expected output : Shreyas Pahune

Bracket Notation is :

let person = {
    name: "Shreyas Pahune"
}

console.log(person['name']) // expected output : Shreyas Pahune

Bonus 🎈 :

There is a thing called object constructor where we use a special type of function to create an object.

The special function is known as constructor function and it is somewhat like Object.create() but better.

Here in this function, we have to pass parameters and it is suggested to use this or the object literal type to create small-medium sized objects.

Here is the syntax for it 👇🏻

function Person(name, age, isMale, favLang) {
  this.name = name;
  this.age = age;
  this.isMale = isMale;
  this.favLang = favLang;

  this.displayInfo = () => {
    console.log(
      `My name is ${this.name}, I am ${this.age} years old and I like to code in 
      ${this.favLang}!`
    );
  };
}

const personOne = new Person("Shreyas", 18, true, [
  "Typescript",
  "JavaScript",
  "Java",
  "Dart/Flutter"
]);

personOne.displayInfo();

Here in the above example, we have made a function called person

NOTE: The first letter of a constructor function is to be kept capital. Nothing compulsory but just a convention!

The function takes 4 parameters/arguments, and the this keyword refers to the object it indicates, so here if I make another person named as personTwo and give them a name as Anushka then the object will use the new name instead of the old name passed in.

Here we have made a function which is defined as a property and after making an instance(personOne) of the Person Object we can call the function as usual.

Expected output of the function would be :

My name is Shreyas, I am 18 years old and I like to code in Typescript,JavaScript,Java,Dart/Flutter!

Thank you so much for reading the whole blog 👏🏻, I really appreciate it.

PS : I am publishing a new blog after a very long time so I'll try to be more regular xD! Till then... bye bye 👋🏻.

Regex 101

Shreyas Pahune — Wed, 21 Jul 2021 18:01:56 +0000

Hey readers 👋🏻, in this blog we are going to talk about Regular Expressions or we can also call it REGEX .

REGEX is sequence of characters which are in a certain patter, and these patterns help us find or find and replace or validate things like email, passwords and usernames.

Let's start learning 🐱‍🏍:

Basics :

The most easy way to explain regex with an example is if:

we want to search the word JavaScript in a string.

Now this example is very basic but believe me REGEX has lots and lots of use-cases.

Multiple Possible Characters :

Let's see an example where you want to see if the string contains many possibilities for example if you want to search for dog or cat .

We can do this by using | the OR sign.

Here if the petString would contain Shreyas loves JavaScript then the output would have been false.

To be clear, the REGEX patterns are case sensitive, so if a string would contain shreyas and I search for ShreyaS then the output would be false.

Case Sensitiveness :

What should we do when we are not sure about the case... No worries! We can make our REGEX Pattern ignore the case.

As you can see we have used i in regex1, and there are many such flags which gives us a lot of control over the pattern.

i stands for irrespective of the case.

Here we are using .test() method, which is an inbuilt method in JavaScript, which returns true or false according to the pattern entered.

The Syntax is pattern.test(String-which-has-to-be-tested) .

Global Searching :

.test() has a draw back, which is that it only returns true or false, and if true it does not tell us how many times the pattern was matched, so to back this drawback, JS has another inbuilt method called as .match() which let's us know how many times the pattern is matched in the string.

.match() return an array of results which have successfully matched the pattern, and the array's length is the time the pattern was recognized.

Let me show an example 👇🏻:

Here you can see the syntax of .match() is a little bit different when compared to .test()

.match() 's syntax is : string.match(regex-pattern);

Also you can see that I have used another flag, which is g and it stands for global, which helps us find the perfect match globally in the string.

Find Group of Letters :

We can group many letters together to find them inside a string. REGEX gives us flexibility with Character Classes, these allow us to define a group of characters and they have to be enclosed in [ ] (Square Brackets) .

It will be more clear when you see an example.

We have to find every vowel inside a string. 👇🏻

The pattern has 2 flags, which are non case sensitive and to check globally in the string.

Here [aeiou] vowels are grouped together and are individually searched in the string.

Match anything using Wildcard period / dot :

Some times we just have to search for words which end with some certain letters or which start from some certain letters. To do so, we have wildcard period which is basically a . period/dot.

If we have to match words which end with the letters un . For example fun or run or sun .

For that we have 👇🏻

This pattern will check for any word ending with un and it will do it irrespective of the case(i flag) and would search in the whole string (g flag).

Range of Characters :

We can also provide a range of characters to check from.

For Example: If you are sure that there are possibilities that the word may start with any character but the ending will be with the letters at , then we can give a range of characters which will check the string and if matched then return an array.

Note: If no value is found, NULL would be returned!

Match Numbers :

What if, you wanna match numbers?? Don't worry REGEX has got you covered!

Just like characters we can write /[0-9]/g, that's it, all the numbers are covered.

But as we all know, us developers...we are lazy 💤! So why to write /[0-9]/ when you can also write /[\d]/g and this d stands for digits!

Match Number and Characters :

To match number and characters, we can write 👇🏻

But isn't this REGEX Pattern too long?? We have a shorthand for this, which is /\w/g and instead of the whole REGEX pattern you can just write the shorthand.

Check for Minimum and Maximum Characters :

We can set a min and a max amount of characters.

This REGEX pattern allows only those strings which have equal or greater length then 5 and are under or equal to 10.

The syntax for that is /[regex here]{min-number, max-number}/g.

Challenge 🎯:

I wanna give a quick challenge to all the readers, why don't you make a REGEX which verifies usernames, and the conditions are:

Username should have numbers.
Username can have an underscore.
Username should not have any special characters.
Username should have minimum 5 characters and maximum 15 characters.

Thank you so much for reading the whole blog 🎉, if you liked it do share it with your friends and implement REGEX in your upcoming projects! It has saved me from writing lots of line of code and a lot of time too, I am sure it will be very effective for you too!

Till the next blog... Goodbye 👋🏻 !!

Free hosting using Heroku

Shreyas Pahune — Wed, 14 Jul 2021 19:21:00 +0000

Hey readers 👋🏻,
I hope you all are doing fine, in this blog we are going to discuss about hosting and how to host our own discord bot, which we made in my previous blog .

We are going to use Heroku to host our bot.

What do I mean when I say 'HOST' a discord bot?

So basically you cant run the program which you made for 24x7 and 365 days, so we need a server to do that.

The hosting platform has a lot of servers which will serve our discord bot for 24x7 and 365 days, so you and your friends can anytime use it anytime!!

Let's host it now 🤖 :

Sign-up or Log-in to Heroku :
Create a new app :
2. Click on the new button on the top-right corner.
3. Click on Create New App
Name your project and select a region:
2. Click on Create App
Now you have to push the source code on GitHub repo.
1. Make sure source code does not contain your discord bot TOKEN or any other API key.
Now you will have this screen:
2. Click on the Connect to GitHub button.
3. Then select the repository which you created.
4. Once the repo is connected, just press on Enable Automatic Deploys, which will help us to deploy the new version of our bot automatically whenever the repo is updated.
5. Refer to this image 👇🏻
Then go the settings tab:
1. Click on Reveal Config Vars
2. 👇🏻
3. Inside the config vars enter your key and value pair of your API KEY and Discord Bot's Token. 👇🏻
Add a BuildPack:
1. BuildPack are scripts that are run when your bot will be deployed. They are used to install dependencies for your bot and configure your environment.
2. Click on add BuildPack 👇🏻
3. Then click on Node.JS 👇🏻 as our bot is made using JS and Node Modules.
After these steps, go to the home directory of your project and make a new File with the name of Procfile
1. The Procfile should contain worker node <Source-folder-Name>/<file-which-has-bot's-code> in this case, it will be worker node src/bot.js .
2. Procfile will help the Heroku's server to run our bot.
Now push the new change to the repository.
Go to the deploy tab:
1. Now click on the Deploy Branch button.
2. You will see a green check mark which will ensure you that there are no errors while deploying 👇🏻.
Go to the resource tab:
1. Refresh the page once.
2. You can see 2 Dynos 👇🏻
3. Click on the pen icon and switch off the Web and Switch on the Worker.
Click on more and then click on view logs.
That's it you have successfully hosted your discord bot, and now you and your friends can use the bot anytime you want 🎉!!

Thank you so much for reading the whole blog and if you liked it, do share it with your developer friends 💻!!

In case you want to learn how to make a discord bot(my previous bog's topic)and how to host it on Heroku, do check out my talk 🎉!

Make a Discord Bot using Discord.js and host it online on Heroku

Make a Discord bot in just 30 lines of code.

Shreyas Pahune — Sun, 11 Jul 2021 18:02:51 +0000

Hey everyone 👋🏻, today we are going to make a discord bot 🤖 which will send gifs according to the user in just 30 lines of code!

The way this bot will work is, if you write .gif happy then the bot will send a random happy gif.

What are we going to use to build this mini-project:

JavaScript
NPM Packages:
- Discord.js
- DOTENV
- node-fetch

Okay so let's get started 🎉!!

Steps :

We have to go to the discord developer portal and create a new application.

Then you have to create a new application ☝🏻. (the blue button on top-right corner) .
Give a name to your application.
Then on the left hand side, click on bot👇🏻 .
After clicking on bot, now click on Add Bot on the right hand side, and after this step you will have a screen like this 👇🏻.
Now the Token is something which you have to keep a secret and not reveal anywhere or to anyone.
If you reveal it by mistake, no worries just regenerate it, but make sure you don't or else someone can take over your bot.
Now we have to decide what permissions does our bot need, and after deciding this, just head to OAuth2 section on the right hand side of your screen.
You will have a screen when many check boxes, and you have to click on the checkbox which says bot 👇🏻.
Then click on the permission you have to give to the bot.
After that click on the link and copy it, after that paste it into a new tab and authorize it to add it to a new server.

Now we just have to code it!

Before explaining the code, let me explain you the folder structure 👇🏻.

There is a folder called src in which we have a main file called bot.js in which we are going to code our bot.
Okay so you can see that there are two files and a folder, named as package-lock.json, package.json and node_modules respectively, they are basically of node packages and their information.
There is also a .env file but we will discuss about it later in this blog.
Okay so we have to use 3 packages to make a discord bot, they are as follows:
1. discord.js (npm i discord.js)
2. dotenv (npm i dotenv)
3. node-fetch (npm i node-fetch)
Now using this image as my reference, I am going to explain the code.

As you can see ☝🏻, there are only 30 lines of code! How amazing it that?

Your own discord bot 🤖 in just 30 lines of code!

Okay so the first and the third line of code are the import statements which can also be written as :

import discord from 'discord.js;'

The second line of code is basically us initializing the client/user, which in this case will be our bot and the users themselves .

and the fourth line is importing the env package and configuring it, so basically .env files stores all your secrets, like your discord bot's token or your API Key, these things will not be uploaded on GitHub using the git ignore file.

Okay so in JavaScript there is this thing called addEventListner which helps us to react to certain events, like if a user clicks on something or double-tap on something a particular function should run.

In the same way here in discord.js addEventListner is more or less replaced by .on function.

All of the .on functions are called in regards to the client so we have to write client.on('event', callBackFunction).

On line number 6 you can see that I have written a function which is

This basically means that, whenever the user is ready and logged in the console should log <Name of the Bot> is up and ready! and name of the bot is fetched by this inbuilt property known as .user.tag , which is to be called in regards to the client .

Now we have to make our bot login to the server. And for that we have another inbuilt method/function called .login .

So we can write : client.login(process.env.TOKEN)

Now you might wonder what is this process.env.TOKEN, this is the way we call variables from our .env file.
So let me show what is stored inside .env file.

Here in this file, we have to put our bot token inside a pair of single or double quotes and our tenor API key (you can generate it from here)

For example if you want to call the tenor api key inside your bot.js file, you just have to write process.env.TENOR.

And you can make a try-catch block around the client.login() function, so if any error occurs, we can catch it and show it on the console.

So as of now, we have our boiler plate code ready with us, which is 👇🏻:

Let's code the main functionality of the bot now.

Now all the code discussed below will be in the reference to 👇🏻 this image.

Now let's understand the above code step-by-step:

Creating an add event listener to react when the user sends message:
2. Here the parameter msg will contain the message which user has sent.
Let's add a prefix to our bot, so it will only react if we write .gif.
1. Just to be a little safe, I am going to write the main functionality inside a try-catch block.
3. msg.content helps us to fetch the content inside the msg. In leman's term, it is like .innerText in JavaScript.
4. Here when the user will write .gif the code inside the if statement will be executed.
Now let's get user's queries.
1. Now if a user writes .gif batman then this will be considered as a string and a problem arises here, which is how do we separate the bot command and the user's query.
2. We do that by an inbuilt function called .split(), which will help us to separate the whole string into two different values stored in an array, for example: if I write .gif batman then .split() will make an array : ['.gif', 'batman'].
3. Let's see it's code.
5. We are going to compare the first index of query which will be .gif to the string .gif.
Let's discuss about the API and Fetching it.
1. I am using node-fetch to fetch the API.
2. The base of the API is
  1. https://g.tenor.com/v1/search?q=USERQUERY&key=API-KEY
3. And in order to take query from the user and give the key as your API Key we have to make this URL dynamic.
4. We can do that by using template literals.
  1. https://g.tenor.com/v1/search?q=${query[1]}&key=${process.env.TENOR}
  2. And now the code looks like this.
  4. And the query has to be the second value (First Index) in the array.
5. Let's fetch the API now.
  1. We just have to put async in front of the callback function as you can see in the above image on line number 10.
  2. async will make your function, asynchronous and then we will use await to wait for the response from the API.
  4. Now here we will have a problem, which is we will only receive one GIF every time.
  5. Now the API will return 20 GIFs and we have to pick a random one (on line 17).
  6. So to do this, we will make a random variable which will choose one GIF.
  7. Now the final code looks like 👇🏻
Let's run this.
1. Just open the terminal, change the directory to the home directory and inside src folder, then write node bot.js.

Thank you for reading the whole blog 🎉!! If you liked it do share it with your developer friends and feel free to comment and give suggestions.

How to make neumorphism boxes using CSS

Shreyas Pahune — Sun, 04 Jul 2021 18:51:00 +0000

Hey folks 👋🏻, today we are going to build some squares which are neumorphic in design.

Now you may ask.. What? why are we building squares? believe me, this technique of design can be used anywhere and it will make your website aesthetically pleasing.

Okay, so before we get started let's understand what is neumorphism, it is a design trend which looks very minimal and gives a soft feel to the UI.

This is how it looks:

👆🏻 This may not look nice in the preview, so please open the results in a new tab.

In this design theme, we just have to play around box-shadow and make a light-source and a dark shadow, now you might not understand this by now but you will, when you see how easy the steps are.

NOTE: Before reading the steps, I have given the reference from the codepen's CSS section. So if you don't understand any property do refer to the CSS or comment down below!

Steps:

Give the body a background-color in this case I have given rgb(194, 194, 194);.
Make four divs with different class names.
Apply the same background-color to the div tags as the body, which is rgb(194, 194, 194);.
The first box (from the left), is looking like it is lifted of the screen.
1. This is achieved by providing a light source from the top-left and making a dark shadow on the bottom-right
2. The light source has to be a little lighter than the background color, usually a color close to white.
3. The box-shadow is box-shadow: 20px 20px 60px #8d8d8d71, -20px -20px 60px #e0e0e0;, here the negative values indicate the light-source coming from top-left and the positive values represent the dark-shadow formed at the bottom-right.
The second box's (from left) corners are lifted and are emerging out of the screen.
1. This effect is somewhat the same as the first one, but the only difference is here we are giving a linear-gradient to the box which is opposite to the box-shadow.
2. In simpler terms the top-left corner has a light-source i.e. a light shadow an inside is a dark background-color and vice-versa on the opposite corner.
The third box (from-left) looks like it is about to emerge from the screen.
1. This is the exact opposite to the previous one. The only difference is the colors of linear-gradient are sw apped.
2. The lighter-shadow side (top-left) has a light color and the darker-shadow side (bottom-right) has a dark color.
The fourth box (right-most) is looking like it is pressed inside the screen and is hollow.
1. This is done by just box-shadow but on the inner side.
2. We can give box-shadow on the inner side by using a value called inset which will help us give the shadow inside.

That is how easy it was to make these boxes using neumorphism!!

In my upcoming blogs we are going to see the implementation of glassmorphism and neumorphism!! We are going to build a credit-card using these design themes!!

Thank you for reading the whole blog 🎉! If you liked it, do share it with your friends and implement this design in your projects!

Make a glass-morph card in less than 5 minutes!

Shreyas Pahune — Thu, 01 Jul 2021 09:14:26 +0000

Hey everyone 👋🏻, today we are going to make a glass morphism card using only HTML and CSS!

Now what is glass morphism, it is a UI trend which was trending in recent times and is very very easy to make, so without wasting any time let's get started 👩🏻‍💻.

Steps to make a glass-morph card :

Make a div with a linear gradient(not necessary) or make any shape, this shape will go behind the card to make it look translucent.
Make the div with a class of card, give it some width and height, center it on the screen using position: absolute; or display: flex whichever method you like.
Now there are 2 main properties to be applied on the card, which will make it look like translucent object, the properties are :

background: linear-gradient(
    101.96deg,
    rgba(249, 249, 249, 0.261) -0.52%,
    rgba(249, 249, 249, 0.0775668) 88.4%,
    rgba(249, 249, 249, 0.058) 100.25%
  );

  backdrop-filter: blur(20px); /* some browsers don't support this property but if you still wanna try it out then use chrome */

That's it you have made a glass-morph card on your own 🥳!! Wasn't that easy?!!

Thank you for reading the whole blog 🎉, and if you found it helpful then do implement this in your projects!!

// connect:
My Socials

Arrow Functions

Shreyas Pahune — Wed, 23 Jun 2021 20:39:49 +0000

Hey everyone 👋🏻, in this blog we are going to discuss about :

Arrow Functions V/S Regular Functions
Advantages and Disadvantages of using Arrow Functions

Like I said in my previous blog, the arrow function is not a new concept, it is just a syntax revamp of the regular function in JS. The new syntax is very very easy, it is just a sugar coating around the old function syntax so without wasting anymore time let's start learning about arrow functions!

1. Arrow Functions V/S Regular Functions

We are going to discuss 4 different types of functions and we'll transform them from the old rusty ES5 syntax to ES6 syntax.

4 different types are going to be:

1. A named function with no parameters.
2. A named function with one parameter.
3. A named function with two parameters.
4. An unnamed function.

1. Named function with no parameters :

As you can see in the above photo, we have to give the name of the function as a variable name and after an equal symbol = an opening and closing parenthesis ( ) which will denote the function, leading with an arrow => which is nothing but an equal sign and angular bracket.

There is another way of making an one liner arrow function, you just have to give the function name as a variable name and = sign leading with => arrow and the statement you want to return.

2. Named function with one parameter :

There is no change except in the parenthesis ( ) in which we will pass our parameters.

3. Named function with two parameters :

4. Unnamed function :

Isn't this cool??

2. Advantages and Disadvantages of using Arrow Functions

Arrow functions make our code more concise and increases the readability of the code, the new syntax is really easy to adopt and takes no time to understand things.

Apart from writing less and doing more Arrow Function can help us with this keyword and scoping of variables, let me show you how.

Here in this above image I have made a class with 2 member functions, arrow and regular which consists of setTimeout to make a block of code so that we can see the scope of this keyword using arrow functions v/s regular function.

Here we will receive the name(Shreyas) and age(18) in the arrow function, as inside this function this keyword will use the scope where it was created ( i.e. inside the class ) but on the other hand the regular function will use the scope where it is invoked or called i.e. which is outside the class and since there is no name and age defined outside the class, we will receive undefined.

One disadvantage I feel is, we can not use arrow function to define constructor.

A constructor is a special function which is to be made inside every class, which basically sets default values and initializes them.

In the above example you can see I have made a constructor function, but with normal function's syntax.

Thank you so much for reading the whole blog 🎉! I hope you learnt something and if you did, do implement it, it would make your code more concise and readable.