Forem: Prashanth K.S

What is the difference between React and React Native

Prashanth K.S — Tue, 15 Apr 2025 03:24:32 +0000

Great question! Here's a clear and simple breakdown of the difference between React and React Native:

🟦 React (aka ReactJS)

What it is: A JavaScript library for building user interfaces, mainly for web applications.
Platform: Browsers (Chrome, Firefox, Safari, etc.)
Use Case: Building interactive websites and web apps.
Rendering: Outputs HTML, CSS, and JavaScript in the browser.
Example: Websites like Facebook, Instagram (web version), Airbnb.

📱 React Native

What it is: A framework for building mobile apps using React principles.
Platform: Mobile (iOS and Android)
Use Case: Building cross-platform mobile apps from a single codebase.
Rendering: Uses native mobile components (not HTML), like <View>, <Text>, <Button>.
Example: Apps like Facebook, Instagram, and Shopify mobile apps.

🧠 Summary:

Feature	React (ReactJS)	React Native
Platform	Web browsers	iOS & Android mobile devices
Output	HTML & CSS	Native mobile components
Styling	CSS	`StyleSheet.create` (JS-based)
Navigation	React Router	React Navigation
Goal	Build websites	Build mobile apps

✅ Common Ground:

Both use JavaScript.
Both use components, props, state, and hooks.
If you know React, you can learn React Native faster!

Let me know if you’d like a visual comparison or beginner roadmap for either! 🚀

Git & GitHub Beginner Tutorial

Prashanth K.S — Mon, 07 Apr 2025 11:39:05 +0000

Git is a version control system — it helps you save, track, and manage changes in your code.

GitHub is a cloud service where you can upload your Git projects and collaborate with others.

Let's learn the basics!

📦 Step 1: Install Git

Download Git: git-scm.com
Install it with default settings.

🗂️ Step 2: Basic Git Commands

Command	What it does	Example
`git init`	Start a new Git project in your folder.	`git init`
`git clone`	Copy a project from GitHub to your computer.	`git clone https://github.com/user/repo.git`
`git add`	Stage (save) files to be committed.	`git add .` (add all files)
`git commit`	Save a snapshot of your staged files.	`git commit -m "Your message"`
`git status`	Check the status of your project.	`git status`
`git push`	Send your code to GitHub.	`git push origin main`
`git pull`	Get the latest changes from GitHub.	`git pull origin main`
`git remote`	Manage connections to GitHub repositories.	`git remote add origin URL`
`git branch`	List or create branches.	`git branch` / `git branch new-branch`
`git checkout`	Switch between branches.	`git checkout branch-name`
`git diff`	See the changes you made compared to the last commit.	`git diff`
`git merge`	Merge changes from one branch into another.	`git merge branch-name`
`cd ..`	Move up one folder in your terminal.	`cd ..`

🚀 Step 3: Common Git Workflow

Here’s a typical workflow you might follow:

Clone the project (if it already exists):

   git clone https://github.com/username/project.git
   cd project

Create a new project (if starting fresh):

   mkdir project
   cd project
   git init

Make some changes (edit files, create code).
See what changed:

   git status

Stage the changes:

   git add .

Commit the changes:

   git commit -m "Initial commit"

Push the code to GitHub:

First, connect your GitHub repository:

 git remote add origin https://github.com/username/project.git

Then push:
```
 git push origin main
```

Working with branches:
- Create a new branch:
```
 git branch new-feature
```

Switch to it:
```
 git checkout new-feature
```

Merge it later:

 git checkout main
 git merge new-feature

Pull latest changes from GitHub:

   git pull origin main

See differences:
```
git diff
```

🎯 Important Notes

git init is for new projects.
git clone is for existing projects.
Always use git add and git commit to save changes locally.
Use git push to upload your commits to GitHub.
Use git pull to download new changes from GitHub.
Branches help you work on new features without messing up your main project.

✨ Bonus Tip

🔒 Always commit meaningful messages like:

git commit -m "Add login form UI"

instead of:

git commit -m "stuff"

Would you also like me to create a cheat sheet image 📄 you can save for quick reference?

Let me know! 🚀

List of Essential Terminal Commands for Windows Users (Command Prompt & PowerShell)

Prashanth K.S — Thu, 03 Apr 2025 06:16:16 +0000

Windows users can execute commands using Command Prompt (cmd) or PowerShell. Below is a list of commonly used commands:

1. File & Directory Management

Command	Description	Example
`mkdir`	Create a new directory	`mkdir NewFolder`
`rmdir /s`	Delete a directory and its contents	`rmdir /s OldFolder`
`del`	Delete a file	`del file.txt`
`copy`	Copy a file	`copy source.txt destination.txt`
`move`	Move or rename a file	`move file.txt C:\NewLocation`
`dir`	List files in a directory	`dir C:\Users`
`cd`	Change directory	`cd Documents`
`cd ..`	Move up one directory	`cd ..`
`cls`	Clear terminal screen	`cls`
`tree`	Display directory structure	`tree`
`new-item`	Create a new file	new-item injex.js

2. System Information & Control

Command	Description	Example
`systeminfo`	Display system details	`systeminfo`
`hostname`	Show computer name	`hostname`
`echo %USERNAME%`	Display current user	`echo %USERNAME%`
`tasklist`	List running processes	`tasklist`
`taskkill /IM`	Kill a process by name	`taskkill /IM notepad.exe /F`
`shutdown /s /t 0`	Shut down the system	`shutdown /s /t 0`
`shutdown /r /t 0`	Restart the system	`shutdown /r /t 0`

3. Network & Internet Commands

Command	Description	Example
`ipconfig`	Show network configuration	`ipconfig`
`ipconfig /all`	Detailed network info	`ipconfig /all`
`ipconfig /release`	Release IP address	`ipconfig /release`
`ipconfig /renew`	Renew IP address	`ipconfig /renew`
`ping`	Check network connection	`ping google.com`
`tracert`	Trace route to a server	`tracert google.com`
`netstat -an`	View network connections	`netstat -an`
`nslookup`	Get domain IP info	`nslookup google.com`

4. Disk & Storage Commands

Command	Description	Example
`chkdsk`	Check disk for errors	`chkdsk C:`
`diskpart`	Open disk partition manager	`diskpart`
`format`	Format a drive	`format D:`
`wmic logicaldisk get name`	List all drives	`wmic logicaldisk get name`

5. User & Permission Management

Command	Description	Example
`whoami`	Show current user	`whoami`
`net user`	List users	`net user`
`net user username password`	Change user password	`net user John newpassword`
`net localgroup`	Show user groups	`net localgroup`

6. PowerShell-Specific Commands

For advanced users, PowerShell provides more functionality than cmd. Some useful PowerShell commands:

PowerShell Command	Description	Example
`Get-Help`	Get help for a command	`Get-Help Get-Process`
`Get-Process`	List running processes	`Get-Process`
`Stop-Process -Name`	Kill a process	`Stop-Process -Name Notepad`
`Get-Service`	List services	`Get-Service`
`Restart-Computer`	Restart the system	`Restart-Computer`
`Get-EventLog -LogName System`	View system logs	`Get-EventLog -LogName System`

Conclusion

These commands help Windows users navigate the terminal efficiently. Whether you're managing files, checking system info, or troubleshooting networks, Command Prompt and PowerShell make it easy to control your system. 🚀

Synchronous vs Asynchronous in JavaScript Functions

Prashanth K.S — Wed, 02 Apr 2025 07:42:31 +0000

JavaScript is single-threaded, meaning it executes one task at a time. However, it supports asynchronous programming to handle tasks efficiently. Let’s break it down:

1. Synchronous Functions (Blocking)

In synchronous execution, JavaScript runs code line by line, waiting for each operation to complete before moving to the next one.

Example of Synchronous Code

console.log("Start");

function syncFunction() {
    console.log("Processing...");
}

syncFunction();

console.log("End");

Output

Start
Processing...
End

✔️ Each statement executes sequentially.

❌ If one operation takes time (like reading a file), it blocks further execution.

Problem with Synchronous Code

If a function takes too long (e.g., fetching data from a server), the entire program pauses until it’s done, making the app unresponsive.

2. Asynchronous Functions (Non-Blocking)

Asynchronous execution allows JavaScript to continue running other tasks without waiting for long-running operations to finish.

How Does It Work?

JavaScript delegates long tasks (like fetching data, reading files) to the Web APIs or Node.js APIs.
Once the task is complete, JavaScript resumes execution using callbacks, promises, or async/await.

Example of Asynchronous Code

console.log("Start");

setTimeout(() => {
    console.log("Processing...");
}, 2000); // Executes after 2 seconds

console.log("End");

Output

Start
End
Processing... (after 2 seconds)

✔️ The setTimeout() function executes after 2 seconds, while the rest of the code continues running.

✔️ JavaScript doesn’t block execution, improving efficiency.

3. Differences Between Synchronous & Asynchronous Execution

Feature	Synchronous (Blocking)	Asynchronous (Non-Blocking)
Execution	Line by line	Moves to the next task while waiting
Performance	Slower (blocks execution)	Faster (non-blocking)
Use Case	Simple operations	Fetching data, API calls, file handling
Example	Normal functions	Callbacks, Promises, async/await

4. Asynchronous Handling Methods

4.1 Callbacks (Old Approach)

A function is passed as an argument and executes after a task is completed.

console.log("Start");

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data Fetched");
        callback();
    }, 2000);
}

fetchData(() => {
    console.log("Process Completed");
});

console.log("End");

Output:

Start
End
Data Fetched (after 2s)
Process Completed

❌ Callback Hell: Nesting too many callbacks makes the code hard to read and maintain.

4.2 Promises (Better Approach)

A Promise represents a future value that can be fulfilled or rejected.

console.log("Start");

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data Fetched");
        }, 2000);
    });
}

fetchData().then((data) => {
    console.log(data);
});

console.log("End");

✔️ More readable than callbacks.

✔️ Supports .then() and .catch() for error handling.

4.3 Async/Await (Best Approach)

The async/await syntax makes asynchronous code look synchronous and more readable.

console.log("Start");

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data Fetched");
        }, 2000);
    });
}

async function processData() {
    console.log("Processing...");
    let data = await fetchData(); // Waits here until the promise resolves
    console.log(data);
    console.log("Process Completed");
}

processData();

console.log("End");

✔️ Easy to read and maintain

✔️ Avoids callback hell

5. When to Use Synchronous vs Asynchronous?

✅ Use Synchronous for:

Simple tasks like calculations or updating UI.
Small scripts where blocking is not an issue.

✅ Use Asynchronous for:

API calls (fetching data from a server).
Database operations (saving/loading data).
File reading/writing (to prevent UI freezing).
Real-time applications (like chat apps, stock trading apps).

Conclusion

🔹 Synchronous code runs sequentially and blocks execution.

🔹 Asynchronous code allows JavaScript to handle multiple tasks without waiting, improving efficiency.

🔹 Use Promises or async/await for better readability and performance.

🚀 Modern JavaScript applications mostly rely on asynchronous execution for better speed and responsiveness.

What is Node.js ? Explained in simple terms

Prashanth K.S — Wed, 02 Apr 2025 06:00:41 +0000

1. Introduction to Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside the browser. Built on Chrome’s V8 JavaScript engine, it is widely used for building server-side applications, APIs, real-time applications, and microservices.

Key Features:

✅ Asynchronous and event-driven

✅ Non-blocking I/O model

✅ High scalability and performance

✅ Uses JavaScript for both frontend & backend development

2. Why Use Node.js?

Node.js is a powerful platform that brings high performance and efficiency to web applications. Here’s why developers prefer it:

2.1 High Performance

Uses the V8 JavaScript engine, which compiles JavaScript to machine code for faster execution.
Asynchronous, non-blocking execution means better resource utilization.

2.2 Single Programming Language

Allows JavaScript for both frontend & backend, reducing complexity.
Developers don’t need to learn multiple languages for full-stack development.

2.3 Non-Blocking I/O Model

Uses event-driven architecture for handling multiple requests simultaneously.
Unlike traditional web servers (like PHP or ASP.NET), it doesn’t block the execution thread.

2.4 Scalable and Lightweight

Perfect for real-time applications like chat apps, streaming services, and IoT applications.
Works well for microservices architecture due to its lightweight nature.

2.5 Rich Ecosystem (NPM)

Node.js has NPM (Node Package Manager), with over 2 million open-source packages for rapid development.

3. How Node.js Works? (Architecture)

Node.js follows an event-driven, non-blocking I/O model powered by the libuv library.

3.1 Event-Driven Architecture

Node.js runs a single-threaded event loop that listens for events and delegates tasks to worker threads when needed.

3.2 Non-Blocking I/O

When an I/O request (like database calls, file reading, or API requests) is made, Node.js doesn’t wait for the response.
Instead, it moves on to the next task and processes the response asynchronously when it’s ready.

4. Installing Node.js

To use Node.js, follow these steps:

4.1 Download & Install

Go to the official Node.js website.
Download the LTS (Long-Term Support) version.
Install it by following the instructions for your OS (Windows, Mac, Linux).

4.2 Verify Installation

Open a terminal and run:

node -v

If Node.js is installed, it will display the version number.

To check NPM (Node Package Manager) version:

npm -v

5. Creating Your First Node.js Application

5.1 Hello World in Node.js

Create a file app.js and add the following code:

// Importing the HTTP module
const http = require('http');

// Creating a server
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello, World! Welcome to Node.js!');
});

// Running the server on port 3000
server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

Run the file in terminal using:

node app.js

Now, open a browser and go to http://localhost:3000/. You will see "Hello, World! Welcome to Node.js!"

6. Node.js Core Modules

Node.js comes with several built-in modules to perform different tasks.

Module	Description
`http`	Create web servers
`fs`	File system operations (read/write files)
`path`	Work with file paths
`os`	Get OS-related information
`events`	Handle events in an application
`crypto`	Perform encryption and hashing

Example: Reading a file using the fs module

const fs = require('fs');

fs.readFile('test.txt', 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data);
});

7. Node.js with Express.js

Express.js is the most popular framework for Node.js, used to build web applications and RESTful APIs.

Installing Express.js

npm install express

Basic Express.js Server

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

// Define a simple route
app.get('/', (req, res) => {
    res.send('Hello, Express.js!');
});

// Start the server
app.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

8. Real-World Applications of Node.js

Node.js is used in various industries for different applications.

Application Type	Examples
Real-time Chat Apps	WhatsApp Web, Discord, Slack
Streaming Services	Netflix, YouTube, Twitch
E-commerce Platforms	eBay, Walmart, AliExpress
Social Media	LinkedIn, Twitter
IoT Applications	Smart Home Automation

9. Advantages & Disadvantages of Node.js

Advantages

✔️ Fast Performance – Uses V8 engine & asynchronous execution.

✔️ Scalability – Perfect for handling high traffic applications.

✔️ Full-Stack JavaScript – One language for frontend & backend.

✔️ Large Ecosystem – Rich library support via NPM.

✔️ Community Support – Huge open-source community.

Disadvantages

❌ Single-Threaded Limitation – Not ideal for CPU-intensive tasks.

❌ Callback Hell – Too many nested callbacks can make code hard to read.

❌ Security Concerns – Poorly managed third-party packages can pose security risks.

10. When to Use Node.js?

✅ Best for:

Real-time applications (Chats, gaming, streaming)
Microservices architecture
APIs and RESTful services
Single-page applications (SPAs)

🚫 Not recommended for:

CPU-intensive applications (e.g., AI, Machine Learning)
Heavy calculations (Node.js is single-threaded)

Conclusion

Node.js is a powerful and efficient runtime for building scalable, high-performance web applications. With its non-blocking architecture, huge ecosystem, and full-stack JavaScript capabilities, it has become a top choice for modern web development.

If you're looking to build real-time applications, APIs, or microservices, Node.js is an excellent choice! 🚀

Difference between Javascript Framework Vs Library

Prashanth K.S — Mon, 31 Mar 2025 06:14:52 +0000

JavaScript Framework vs Library: Key Differences

A JavaScript Framework is a complete structure that provides guidelines and predefined code for building applications, dictating how your code should be organized. A JavaScript Library, on the other hand, is a collection of reusable functions and utilities that you can call as needed, giving you more flexibility in structuring your application.

Comparison Table: JavaScript Framework vs Library

Feature	JavaScript Framework	JavaScript Library
Definition	A full-fledged structure that dictates architecture and provides built-in solutions.	A collection of pre-written code snippets that help with specific tasks.
Control Flow	The framework controls the flow; developers follow its structure.	The developer controls the flow; the library is used when needed.
Flexibility	Less flexible, as you must adhere to its rules and patterns.	More flexible, as it can be used anywhere within the project.
Learning Curve	Steeper learning curve due to rigid structure.	Easier to learn since it provides independent functions.
Examples	Angular, React (when used with full architecture), Vue.js, Next.js, Svelte, Ember.js.	jQuery, Lodash, D3.js, Axios, Chart.js, Moment.js.
Use Case	Best for building large-scale applications with a defined structure.	Best for adding functionalities like AJAX calls, animations, or data manipulation.
Dependency	Often includes built-in solutions for routing, state management, and API handling.	Requires additional tools for routing, state management, and API handling.
Size & Performance	Generally larger in size and can be heavier.	Usually lightweight and focuses on specific tasks.

List of Apps Built with JavaScript Frameworks & Libraries

Apps Built Using JavaScript Frameworks:

Angular → Gmail, Forbes, Upwork
React (as a framework) → Facebook, Instagram, WhatsApp Web
Vue.js → Alibaba, Xiaomi, GitLab
Next.js → TikTok, Hulu, Twitch
Ember.js → LinkedIn, Discourse

Apps Built Using JavaScript Libraries:

jQuery → Twitter, WordPress, LinkedIn
Lodash → Various utility functions in web apps
D3.js → New York Times, Data visualization dashboards
Axios → Used in almost all modern web apps for API calls
Chart.js → Google Analytics dashboards

Conclusion

If you need a structured, opinionated way to build applications, use a framework. If you just need specific functionalities like DOM manipulation, animations, or API requests, use a library. 🚀

What is Body-parser?

Prashanth K.S — Fri, 28 Mar 2025 07:26:13 +0000

What is Body-Parser?

Body-parser is a middleware in Node.js that helps handle incoming request bodies in Express applications. It parses incoming JSON, URL-encoded, and raw data from the client, making it accessible via req.body.

Why Do We Need Body-Parser?

By default, Express does not parse request bodies. If a client sends data in a POST or PUT request, it arrives as a stream, which is hard to handle manually. Body-parser makes it easy to extract and use this data.

How to Use Body-Parser in Express?

1. Install Body-Parser

Run the following command:

npm install body-parser

2. Import and Use Body-Parser in Express

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// Middleware to parse JSON data
app.use(bodyParser.json());

// Middleware to parse URL-encoded data (for form submissions)
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/data', (req, res) => {
    console.log(req.body); // Access parsed data
    res.send('Data received!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

Types of Body-Parser Middleware

bodyParser.json() → Parses incoming JSON data.
bodyParser.urlencoded({ extended: true }) → Parses form data (application/x-www-form-urlencoded).
bodyParser.raw() → Parses raw body buffer (e.g., application/octet-stream).
bodyParser.text() → Parses incoming text (text/plain).

Is Body-Parser Still Needed?

Since Express 4.16.0, express.json() and express.urlencoded() are built-in, so you don’t need to install body-parser separately. Instead, just use:

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

Conclusion

Body-parser is an essential middleware for handling incoming request data in Express. While it's still widely used, modern Express versions include its functionality by default. 🚀

How to install Express.js in VS code in 2025

Prashanth K.S — Fri, 28 Mar 2025 06:27:08 +0000

To install the Express framework on Visual Studio Code (VS Code), follow these steps:

1. Install Node.js

Express is a Node.js framework, so you need Node.js installed.

Download and install Node.js from nodejs.org (LTS version recommended).
Verify the installation:

  node -v   # Check Node.js version  
  npm -v    # Check npm version

2. Open VS Code and Set Up a Project

Open Visual Studio Code.
Create a new folder for your project (e.g., express-app).
Open the folder in VS Code:

  cd path/to/express-app
  code .

3. Initialize a Node.js Project

Inside VS Code’s terminal, run:

npm init -y

This creates a package.json file.

4. Install Express

Run the following command:

npm install express

This will install Express and save it in node_modules.

5. Create a Basic Express Server

In your project folder, create a new file: index.js.
Add this code to set up a simple Express server:

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

  app.get('/', (req, res) => {
      res.send('Hello, Express!');
  });

  app.listen(3000, () => {
      console.log('Server is running on http://localhost:3000');
  });

6. Run the Express Server

In the terminal, start the server:

node index.js

Now, open http://localhost:3000/ in your browser, and you should see "Hello, Express!".

Optional: Use Nodemon for Auto-Restart

To avoid restarting manually after code changes, install nodemon:

npm install -g nodemon

Then, run your server with:

nodemon index.js

Now, you have Express installed and running on VS Code! 🚀

Hello Guys! I'm new here, Wish me Luck.

Prashanth K.S — Thu, 27 Mar 2025 10:27:06 +0000

Hello world, I am Prashanth and UXUI designer and I am currently learning to code.