DEV Community: Vamsi Krishna

What is name == 'main' in python 🤯

Vamsi Krishna — Fri, 02 Sep 2022 13:35:01 +0000

if __name__ == '__main__':
    pass

Many people on YouTube and also in the in-built modules in python there is this statement which confuses the most of the beginners who are trying to learn python. In this post I will try to clarify about what is __name__ and why it is used in python?

What is `name`?

Before running any python script or file, python itself sets some special variables and this __name__ is one of the variables. The beauty of this variable is that it sets the value of variable based on how we run the file. For example, if we run the file directly then it gets __main__ as the value but if we run this file by importing it into other file and running that file it gets a the file name as the value and that other file will get __main__ as the value.

Let us see in deep :

Let us create two files named first.py and second.py
Add following code to first.py file 👇

def main():
    print('first.py file __name__ :', __name__)

if __name__ == '__main__':
    main()

Above code is very simple that if __name__ is equal to __main__ only then we will run our main() method which actually means is that when the file is ran directly then the __name__ variable will be equal to __main__ only then our main() method will be executed.

try to run the first.py file alone, we will get the following output

first.py file __name__ : __main__

Now Add the following code to second.py file 👇

import first

print('second.py file __name__ :', __name__)

if we run the second.py file we will get the following output

second.py file __name__ : __main__

If we look carefully we are importing our first.py module into second.py but we are not getting any output from first main() method. this is because the first file is not ran directly so the __name__ will not be equal to __main__ it is actually equal to first.

then how can we get the first.py __name__ variable?

to get that just change second.py code as below..

import first

first.main()
print('second.py file __name__ :', __name__)

then we will get the following output 👇

first python file __name__ : first
second.py file __name__ : __main__

I hope you have got some basic idea about __name__ variable..
Thank You for reading 💗

Python Projects for Beginners🔥 { must try }

Vamsi Krishna — Sun, 24 Jul 2022 13:37:56 +0000

These are some Python Projects you must try if you are a beginner.

Number Guessing Game
Rock Paper Scissors
Hangman Game
Binary Search
Check Leap Year
Desktop Notifier

These projects give you idea of the basic python programming like variables, loops, functions and some packages.

Access Code for the Projects here 👉 github.com

Concepts you can learn with each project :

Number Guessing - random module/package and loops

Rock Paper Scissors - conditional statements in Python and also the random module.

Hangman - getting a random word, sets, adding and removing into sets

Binary Search - Very important Searching Algorithm

Leap Year - Logic behind leap year

Desktop Notifier - plyer module, how to get notification with python.

How to fetch API in Python 🔥

Vamsi Krishna — Sat, 23 Jul 2022 12:07:39 +0000

We can create Awesome Projects If we know how to fetch an API in python.

We all know python is the most easiest and widely used programming language even though it is slow.

so in this blog we will learn how to fetch an API in python.
we will use an API which will give us a list of words.

API -- Click Here

import requests
import json

# fetching API 
response_API = requests.get('https://www.randomlists.com/data/words.json')
data = response_API.text # gives in a text format

# converting it into json object
json_data = json.loads(data)

# getting list of words
words = json_data["data"]
print(words)

Random Password generator - Easiest way { Python }

Vamsi Krishna — Thu, 21 Jul 2022 06:52:28 +0000

In this post I will help you build a random password generator in the most easiest and efficient way.

How can we build this 🤔?

First thing we will do is to ask the user what is the length of the string
We will get random values from a list containing all the alphabets(both uppercase and lowercase), numbers and special characters like #,@,#...

⚠️⚠️⚠️ Mistake we need to avoid ⚠️⚠️⚠️

Most of the people generally makes this mistake while doing this project. they will create a list and they will start writing all the characters, numbers manually... like below code 👇👇

characters = ['a','b','c','d',......,'A','B','C'....]

This will definitely not make you a good programmer.

Instead do this ✅✅

There is a module named string in python which will give you all the alphabets and special characters.

Create a list which contain all the alphabets, numbers and special characters as shown below.

import string

# getting all the alphabets
characters = list(string.ascii_letters)

# adding numbers from 0 to 9
characters.extend(list(x for x in range(0,10)))

# adding all the special characters
characters.extend(list(string.punctuation))

characters list will look as shown below.

['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', ',', '-', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', '\\', ']', '^', '_', '`', '{', '|', '}', '~']

🚀 Complete Code for creating random password generator using Python.

import string
import random

num = int(input('Enter the length of password : '))

# getting all the alphabets
characters = list(string.ascii_letters)

# adding numbers from 0 to 9
characters.extend(list(x for x in range(0,10)))

# adding all the special characters
characters.extend(list(string.punctuation))

password = ''

for i in range(num):
    password = password + str(random.choice(characters));

print(password)

Thanks for Reading 💖💖
Like and Follow.

What are Hooks in React JS

Vamsi Krishna — Wed, 20 Jul 2022 07:14:34 +0000

What are hooks in React JS 🪝?

Hooks are the new addition in React 16.8. They let you use state and other react features without writing a class.
Using hooks in react class components are no longer needed.

How to use Hook in react ?

To use any react hook you must import it from react library.

There are Three Main Hooks in React JS:

useState 🌟
useEffect 🌟
useContext

useState Hook

The React useState Hook allows us to track the state in a functional component
State generally refers to data or properties that need to be tracked in an application.

import { useState } from 'react';

we initialize useState by passing the default value into the function. useState accepts an initial state and returns two values

The current state
Function to change the state.

import { useState } from 'react'

function Fun() {
    const [name, setName] = useState("state hook");
}

useState Example :

useEffect Hook

useEffect hook allows you to perform side effects in your functional components.

What does side effects mean? like fetching data from an API, updating DOM, timers etc....

useEffect two parameters in which second one is optional.
useEffect(<function>,<dependency>);

If you do not pass second parameter useEffect will run on every render.
If you pass an empty array [] useEffect will run only on first render.
If you pass any prop or state as dependency then useEffect will run on first render and every time when dependency changes.

useEffect Example

Important Topics for Frontend Development Interview

Vamsi Krishna — Tue, 19 Jul 2022 05:50:25 +0000

Topics to master

There are some topics in JavaScript to master if you want to crack any frontend interview.

Scoping
Hoisting
Closures
Callbacks
Promises
Async and Await

What is Scoping ?

Scoping in JavaScript determines the accessibility of variables, objects and functions.
There are three types of scopes in JavaScript
a. Block Scope
b. Function Scope
c. Global Scope

variables declared with let and const have block scope but variables declared with var doesn't have any block scope.

Function scope is when you determine a variable inside a function then you cannot access.

What is Hoisting ?

Hoisting in javascript is a behavior in which a function or variable can be used before declaration.

In terms of variables, var is hoisted and let and const does not allow hoisting.
the following code will give you error.

What is Closure ?

Closure means that an inner function always has the access to outer function even after the outer function has returned.

const hello = () => {
    let greet = "hello & welcome";
    const welcome = () => console.log(greet);
    return welcome;
}

const fun = hello();
fun();

// hello & welcome

What is a callback ?

A callback is a function which is passed as a parameter into another function which is going to be executed after completion of a task.

setTimeout(() => {
    console.log("hello, inside boy");
}, 2000);

console.log("hello outside boy");

// hello outside boy
// hello, inside boy

What are promises ?

A JS promise is similar to real life promise will make it happen or we don’t

JS promise has three states :

Pending
Resolved
Rejected

What is async and await

Stop and wait until something is resolved. We use the async keyword with a function to represent that the function is an asynchronous function.

async function returns a promise.

const fetchAPI = async () => {
    const res = await fetch('https://api.quotable.io/random');
    console.log(res);
}

fetchAPI();

How to Host your React App for Free. (Part 2)

Vamsi Krishna — Fri, 15 Jul 2022 04:22:08 +0000

I had already wrote a blog about hosting your react app using github pages. Link : https://bit.ly/3aLFnG9

In this blog, we will see how to host your project using netlify.
There are two ways to host using netlify

By drag and drop
By authorizing github

Lets get started.

Drag and Drop

Step 1:
Head over to netlify.com and create a free account.

Step 2:
After successfully creating your account, the following page will appear.

Step 3:
In your project folder, open git bash or terminal and run the following command
npm run build

This will create a folder named 'build' in your project directory

Simply drag and drop build folder into the above appeared screen.

and Done Netlify will host your project 💥💥

Imagine Let say You had build a project and later you tried to update the project UI then the changes are not gonna reflect in your netlify app.

To make above query to happen, we use method 2

Importing from github

Step 1:
push your code onto github after committing all the changes.

Step 2:
In the following image you can see there is an option to import and existing project. Select it and authorize your github account.

Step 3:
Then you will see all your github repos, select your project repo
and done netlify will take care of hosting it and it will also observe the future changes to that repo.

Project I created Recently

I started learning about material UI and created a small app which generates random quote using an API.
Link : https://fancy-starlight-16b468.netlify.app/
Code available on github : https://github.com/vamsi-tupakula/quote-generator-react

Thank You for reading 🌹🌹

How to Host your React App for Free. (Part 1)

Vamsi Krishna — Thu, 14 Jul 2022 14:26:29 +0000

In this Blog, we will see how to host a react JS app for free. There are so many ways to host your app online for free but in this blog we will see how to host on github pages.

Hosting a normal html, css and js files to github is very easy, but when it comes to react js it is a bit tricky.

Let's get started.

Step 1:

First step we need to do is to add Homepage to package.json

"homepage": "https://myusername.github.io/my-app",

it you want to host to github user page

"homepage": "https://myusername.github.io/",

Step 2:

The next step you need to do is to install gh-pages. to install run the following command in the terminal

npm install --save gh-pages

then add the following lines of code in your package.json scripts

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Step 3:

The very next step is to run the following command

npm run deploy

Now you are done 💥💥

you have successfully hosted your react app on github 🚀

Thank You for reading 🌹🌹

Also Read :
MongoDB beginner tutorial
Express JS getting started

MongoDB Beginner tutorial

Vamsi Krishna — Thu, 14 Jul 2022 05:23:39 +0000

What is MongoDB

According to the official website of mongoDB, MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.

MongoDB is an open-source document database that is designed to store a large scale of data and it allows you to work with data very efficiently. It used NoSQL (Not only SQL) database because it does not use table form to store the data like SQL.

MongoDB also provides official driver support for all the popular programming languages like C, C++, Python, Java, Node JS, Go.. etc..

There are so many companies which uses MongoDB to store data Facebook, Nokia, Adobe, Google, etc..

what happens behind the scenes

MongoDB is a database server and the data is stored in these databases. MongoDB gives you a server that allows you to start and create multiple databases on it using MongoDB.

MongoDB uses NoSQL database, which means data is stored in the collections and document. Hence the database, collection and documents are related each other as shown below.

image credits : sqlserverguides.com

MongoDB collections are Similar to MySQL tables. You can create any number of databases and collections.

Installing MongoDB

installing is very easy you just need to visit mongodb website. Just leave the default settings while installing.
Now you we need to bin folder path in our environment variables if you are on windows.
most of the cases it will be in this path :
C:\Program Files\MongoDB\Server\5.0\bin
check and add it to path variables.

Some Important Commands

show dbs; -> to view all existing databases
use newDatabase -> to use existing database or to created and use database
db -> used to show on which database we are on
db.dropDatabase() -> used to drop/delete a database
db.createCollection('name') -> used to create a collection inside a database
db.showCollections() -> used to view collections inside a database
db.CollectionName.drop() -> used to drop a collection in a database
Lets say we have a collection called Content, now we will see how to insert rows into it.
db.Content.insert({'name': 'vamsi','age': 20}) -> used to insert a row into collection
db.Content.insert([objects]) -> used to insert more than one row

This is the Basics of MongoDB.
Thank You 🌹

Also Read :
Getting Started with Express JS

Getting Started with Express JS

Vamsi Krishna — Wed, 13 Jul 2022 07:23:27 +0000

What is Express JS?

Express is a fast and minimalist web framework for Node.js that provides a robust features for web and mobile applications.

Express is a server-side framework. It can be used with client-side frameworks like React, Angular or Vue to build full stack applications 🚀.

Most of the times we build API's with express so that it takes request from frontend and serves back the data mostly in JSON format.

What is the Use of Express?

It makes building web apps with node js much easier
It is used because its light, fast and free
Most popular Node framework
Easy to use with Frontend frameworks

prerequisites

JavaScript Fundamentals
Basics of Node and npm

Installing Express

run npm install express command to install express js

Basic code for creating Server in express

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

app.listen(3000, () => {
  console.log(`server is listening on port 3000`)
})

As we can see that we are listening on port 3000, so if we go to localhost:3000, we can see the following page running

But Why Express JS

why express js when node js exists?
You might have this doubt, When I started learning express I got this doubt. Comparing Node js and express JS is not very perfect because Node is a runtime environment which allows us to run JavaScript outside the browser where as Express is a Framework. No.1 reason for using express is that we can create a server with less lines of code than using http in node js.

To understand in depth, lets create a server that shows 'Home Page...' when user is on localhost:3000 url and shows 'About Page...' when user is on localhost:3000/about

👉👉 Performing above query using Node http module :

const http = require('http');

const server = http.createServer((req,res) => {
    res.statusCode = 200,
    res.setHeader('Content-Type','text/html')
    if(req.url === '/') {
        res.end('<h1>Home Page....</h1>')
    } else if(req.url === '/about') {
        res.end('<h1>About page....</h1>')
    }
})

server.listen(3000, () => {
    console.log(`server is listening on port 3000`);
})

👉👉 Performing same query using Express JS:

const app = require('express')()

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

app.get('/about', (req, res) => {
  res.send('<h1>About page.....</h1>')
})

app.listen(3000, () => {
  console.log(`server is listening on port 3000`)
})

we can clearly notice the difference and how simple and easy express js is. The good thing about express js is it sets the status code and content type automatically.

sending json in express

app.get('/', (req, res) => {
  res.json({
    name: 'hello',
    age: 22
  })
})

output :

Middleware Functions

middleware functions are functions that have access to the request and response object. express has built in middleware but middleware also comes from 3rd party packages and we can also create custom middleware.

middleware can make changes to the request and response object.

sending static folder

create a public folder and add index.html, about.html, and contact.html, so when user goes to '/index.html' then that file will be served. '/about.html' servers about.html file

app.use(express.static(path.join(__dirname,'public')));

thanks for reading
Follow Me on Socials
Instagram Twitter GitHub Linkedin