DEV Community: subash

Python Basics for Begginer

subash — Mon, 25 May 2026 14:50:39 +0000

Python is one of the most easiest language, why because,It allows humans to think naturally and write code almost like English. That is the real reason Python became powerful also it removes unnecessary complexity.

Today, Python is used in:

Artificial Intelligence
Cybersecurity
NASA projects
Automation
Data Science
Web Development
Robotics

Condition statement;

Conditional statements help Python decide which code should execute and which code should not execute.

#1. conditional statements:

Programs cannot make decisions

Every line of code would execute in the same order

Applications would not become interactive or smart

2.Conditional statements make programs:

Intelligent

Dynamic

Interactive

Flexible

Loop Statement

Looping statements are used in Python to execute a block of code repeatedly without writing the same code again and again.
Without loops, programmers would need to write repetitive code manually, which makes programs lengthy.

program:

EXAMPLE 1;

count = 1
while count<=5:
    print(count*2, end=' ')      
    count=count+1
print(count)
print(count*2)

end is parameter

In default python put \n in end parameter ,

\n - this means print next line.
Here remove that default \n that's why output is like sequences but 8 have \n so 10 was added that sequences but 10 in default end='\n' that why 12 was gone to next line.

OUTPUT;
2 4 6 8 10 6
12

EXAMPLE -2

count = 1
while count<=5:
    print(count*2 )       #print(1, end='\n')
    count=count+1
print(count)
print(count*2)

I already told you in default end = '\n"

OUTPUT:
2
4
6
8
10
6
12

sep(separate parameter):

print(1, 2, 3, sep='-')

OUTPUT;
1-2-3

Refferal link;

https://dev.to/hariharan_sj_2003/the-backbone-of-python-conditions-and-loops-182j

what is useSate and useEffect

subash — Mon, 25 May 2026 11:24:16 +0000

useState;

const [count, setCount] = useState(0);

count - is the variable
[count, setCount] - Array Destructuring
useState(0)- function call with arugument 0
this 0 will store in count variable , we can not able to change the variable directly so we should call the setCount function to change the variable value through the arugument.

what is the purpose of useState is , if we put normal variable like
let count = 0 ; then if there is any need to make variable dynamic through the loop, then it will not work because , here we write code in components right, we should call the function name what inside the components , first time only appear the variable value in UI , because we call only one time to render that function, so if we use useState then the component will automatically rerender when the changes will happen.

useEffect

What is a Side Effect?

import { useEffect, useState } from "react";

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count Updated");
  }, [count]);

  return (
    <>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </>
  );
}

export default App;

A side effect means:

Fetching data from API
Updating DOM
Setting timers
Using local storage
Running code after rendering

Easy Real-Life Example

Imagine:

Your main job = Cooking food

While cooking:

answering phone
setting timer
opening fridge

These are not the main cooking task.

They are “side tasks”.

Similarly in React:

Rendering UI = Main work
API calls / timers = Side effects

concept

useEffect(() => { console.log("Count Updated"); }, [count]);

React watches count
Whenever count changes, useEffect runs

2.useEffect(() => {
console.log("Count Updated");
}, []);
It will NOT run again

3.useEffect(() => {
console.log("Count Updated");
});

every rerender it will work

Code	Runs When
`[count]`	When `count` changes
`[]`	Only once
No array	Every render

StrictMode

It helps developers:
find errors
detect unsafe code
identify deprecated features
improve React applications

CONTROL FLOW STATEMENT

subash — Fri, 22 May 2026 16:08:26 +0000

Programming Rules:
1) Don't say I don't know
2) Let me Try
3) Known To Unknown
4) Don't Think about entire output
5) Think about very next step
6) Introduce variable if you feel it is necessary
7) Micro To Macro

BOX is memory to store,

a=10

a is references variable

now we change

a = a+5

now a value is 15 but , that box is not changed , the value will modify in the same box or memory.

count = 1
while count<=5:
print(1, end=' hi ')
count=count+1

indefault /n in end , that means print next line

PYTHON FOR SYNTAX

subash — Fri, 22 May 2026 14:50:17 +0000

website;

Usestate project

subash — Thu, 21 May 2026 08:36:15 +0000

Project-7

import { useState } from "react";


function Dropdown() {
  const [country, setCountry] = useState("");
  const [stateName, setStateName] = useState("");
  const [cityName, setCityName] = useState("");


const state = {
  india : ["tamilnadu","kerala"],
  usa : ["usaState1","usaState2"],
}
const cities = {
  tamilnadu : ["perambalur","ariyalur"],
  kerala : ["keralaState1","kerala"],
  usaState1 : ["usaState1city1","usaState2city2"],
  usaState2 : ["usaState2city1","usaState2city2"],
};


function handleCountry(e){
setCountry(e.target.value);
setStateName("");
setCityName("");

}
function handleState(e){
  setStateName(e.target.value)
  setCityName("")
}

return (
  <>
  <select value={country} onChange={handleCountry} >
    <option value="">select country</option>
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select>
  <select value={stateName} onChange={handleState} >
    <option value="">select stateName</option>

    {country && 
    state[country].map((item,index) => (
      <option key={index} value={item}>{item}</option>
    ))}

    index
  </select>

  <select value={cityName} onChange={(e) => {setCityName(e.target.value)}}>
    <option value="">select city</option>
    {stateName && 
    cities[stateName].map((item,index) => (
      <option key={index} value={item}>{item}</option>
    ))}
  </select>

  <br />

   <h2>Country : {country}</h2>

    <h2>State : {stateName}</h2>

     <h2>City : {cityName}</h2>




  </>
)

}
 export default Dropdown;

OUTPUT;

Project-6


import { useState } from "react";

function CheckboxHandling(){

const [courses, setCourses] = useState([]);

function getUserInput(e) {
    const {value, checked} = e.target;

    checked ? setCourses([...courses, value]) : setCourses(courses.filter((course => course !== value)))

};

return (
    <>
    <label htmlFor="react">React</label>
    <input type="checkbox" id="react" value="react" onChange={getUserInput}/>

    <label htmlFor="HTML">HTML</label>
    <input type="checkbox" id="HTML" value="HTML" onChange={getUserInput}/>

    <label htmlFor="JAVASCRIPT">JAVASCRIPT</label>
    <input type="checkbox" id="JAVASCRIPT" value="JAVASCRIPT" onChange={getUserInput}/>

    <ul>
        {courses.map((course) => (
            <li>{course}</li>
        ))}
    </ul>
    </>
)


}

export default CheckboxHandling;

OUTPUT;

What is browser, DOM, Real DOM, Virtual DOM

subash — Tue, 19 May 2026 07:02:59 +0000

1.WHAT IS BROWSER?

A browser is software used to access and display websites on the internet.

2.What is DOM?

DOM - Document Object Model
The browser converts HTML into a tree-like structure called the DOM.

Example HTML:

<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>

DOM Structure

Body
 ├── h1
 │    └── Hello
 └── p
      └── Welcome

What is Real DOM?

The Real DOM is the actual DOM created inside the browser.

It directly represents the webpage shown to the user.

DOM is created by browser, not by the browser javascript.

1.When the browser reads HTML:

<h1>Hello</h1>

the browser automatically converts it into a DOM structure internally.

Document

   └── h1
        └── "Hello"

JavaScript does not create the DOM from scratch.
JavaScript only:

*accesses the DOM
*modifies the DOM
*updates the DOM

Problems with Real DOM

Updating the Real DOM is slow because:

*The browser must recalculate layout
*Repaint the UI
*Re-render elements
If many updates happen frequently, performance becomes slower.

Especially in:

*Large applications
*Dynamic websites
*Real-time updates

virtual DOM;

The Virtual DOM is a lightweight copy of the Real DOM.
Libraries like React use Virtual DOM to improve performance.

Instead of updating the Real DOM directly:
1.React creates a Virtual DOM copy
2.Changes are made in the Virtual DOM first
3.React compares old and new Virtual DOM
4.Only changed parts are updated in the Real DOM.

This process is called Diffing.

and updating only necessary parts is called Reconciliation

Virtual DOM Working Flow;

User Action
↓
State Changes
↓
New Virtual DOM Created
↓
Compare with Old Virtual DOM
↓
Find Differences
↓
Update Only Changed Elements in Real DOM.

What is New Virtual DOM?

When data changes in React:

1.React creates another updated Virtual DOM
2.This updated version is called the New Virtual DOM

Then React compares:

Old Virtual DOM

    VS

New Virtual DOM

Why React Uses Virtual DOM

 1. Faster rendering

 2.Better performance

 3.Efficient updates

 4.Smooth user experience

 5.Easier UI management

Real DOM vs Virtual DOM

Feature	Real DOM	Virtual DOM
Speed	Slower	Faster
Updates	Updates entire structure	Updates only changed parts
Performance	Less efficient	More efficient
Memory Usage	Higher	Lightweight
User Experience	Can become slow	Smooth UI updates

The browser creates the Real DOM from HTML.
Directly updating the Real DOM can be slow.

To solve this problem, React introduced the Virtual DOM, which acts as a lightweight copy of the Real DOM.

Whenever data changes:

A New Virtual DOM is created
React compares old and new Virtual DOMs
Only necessary changes update the Real DOM

GIT Cammand

subash — Sat, 16 May 2026 04:41:07 +0000

1.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ du -sh .
309M

It is used to find size of current cd

2.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ du -sh .git
307M .git

It is used to find size of separate file

3.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ rm -rf .git

This is to delete file .

4.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ find . -type f -size +50M
./.git/objects/8b/cf66c67b966c02f2089224c867de310617ceb3

This c

So this command:
find ~/ -type f -size +90M

means:

“Search all files inside my home folder bigger than 90MB”

Step 2 — Check file details

Run:

ls -lh filename

Example:

ls -lh movie.mp4

1.VERY IMPORTANT

If the 100MB file is inside:

node_modules

Then you should NOT upload it to GitHub.

Add this to .gitignore:

node_modules/

Then remove it from Git tracking:

git rm -r --cached node_modules

Then:

git commit -m "Removed node_modules"
git push

***Step 1 — Rename local branch

Change master → main

Run:

git branch -M main

Now your local branch becomes:

***If error comes like:
rejected

remote contains work that you do not have

Then run:

git pull origin main --allow-unrelated-histories

Then again:

git push -u origin main

Types of Software Testing

subash — Sat, 16 May 2026 04:34:37 +0000

what is react

subash — Fri, 15 May 2026 08:53:39 +0000

React

React is used to make single and responsive html web pages,
it's kind of replacement of dom framework.

JSX(Java Script Xml)

It is used to write html code in javascirpt

this is for to change old version node and curl install

subash — Wed, 13 May 2026 10:20:20 +0000

The problem is curl is not installed, so the NVM installation never happened.
That is why:
nvm: command not found
appears.

Fix Step-by-Step
Step 1 — Install curl
Run:
sudo apt update
Then:
sudo apt install curl
Type your password if asked.

Step 2 — Install NVM Again
Now run:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Step 3 — Reload Bash
Run:
source ~/.bashrc

Step 4 — Check NVM
Run:
nvm --version
If installed correctly, it shows something like:
0.39.7

Step 5 — Install Latest Node.js
Run:
nvm install node

Step 6 — Verify
node -v
You should see:
v20.x.x
or newer.

Step 7 — Create Vite App
Now finally:
npm create vite@latest
This should work correctly now.

#PROMISE

subash — Fri, 08 May 2026 06:18:37 +0000

  const promise = new Promise((res,rej) =>{
            rej()
        });

        promise
          .then(()=>{
            console.log("done")
          })
          .catch(()=>{

            console.log("error")
          })

In this case we have promise in promise variable, new is key word, default promise have two aruguments which is resolve and reject. this case we call res() so then it will go to then , if we call rej() then it will go catch.



        function Analysis(){
            const analysisPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("analysis completed")
                    res()
                },4000)
            })
            return analysisPromise;
        }
        function Design(){
            const designPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("design completed")
                     res()
                },9000)
            })
            return designPromise;
        }
        function Development(){
            const developmentPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Development completed")
                     res()
                },4000)
            })
            return developmentPromise;
        }
        function Testing(){
            const testingPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Testing completed")
                     res()
                },4000)
            })
            return testingPromise;
        }
        function Deployment(){
            const deploymentPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Deployment completed")
                     rej()
                },4000)
            })
            return deploymentPromise;
        }



        Analysis()

             .then(() => Design())
             .then(() => Development())
             .then(() => Testing())
             .then(() => Deployment())
             .catch(() => console.log("error"))

First we created function, inside that function have promise, inside that promise have setTimout, inside that setTimeout we gave console.log and res(). this function is return that promise.
we have diff function with diff names.each settimout have 4sec gap..

after we callback first functions first one is Analysis() , this function return analysisPromise; setTimout have 4second waiting time and also print analysis completed the gave res(). we use res() then it will going to "then" after that work what inside that then , so we should create then catch syntax.in analysis res() will go to first then that have Design callback , that will return designpromise , it will go like this series upto deployment. if anything rej in between them , after that catch will work.

What is closure

subash — Thu, 07 May 2026 05:32:52 +0000

Closure is used to preserve data and create private memory for functions.
“Variables-ஐ பாதுகாப்பாக வைத்துக்கொண்டு, function முடிந்த பிறகும் அவற்றை நினைவில் வைத்திருப்பது.”

example

function bank(){
            let min_bal = 500;


          return   (amt) => {
             min_bal += amt;
               console.log(`current bal is ${min_bal}`)
            }

        }

        const account = bank();
        const sdf = bank();



        sdf(200);
         sdf(200);
        account(300)

OUTPUT:

In this case bank() is outer function and inner function is in return, which is inside the outer function and min_bal variable also inside the outer function , so outer function return the arrow function , then we put bank() function in account variable then,
we should call account as a function , like account(300) also we can able to pass aruguments.

Here i put bank() function in two diff variable, also we can create so many variable , each variable have separated.
min_bal is 500 in sdf add 200 and then again 200 now total amount is 900
min_bal is 500 in account add now total amount is 900 .

two variable keep separate value but function is same .