DEV Community: Sathish Kumar

Today Learning Python!

Sathish Kumar — Sat, 31 Oct 2026 08:40:55 +0000

Today, I explored one of the core concepts in Python:

What is a Function?

A function is a reusable block of organized code used to perform a single, related action. (Just like a verb that does a specific task!)

Why use Functions? (Benefits):

Code Reusability: Write once and use multiple times.

Easy Maintenance: Simple to update and manage.

Improved Readability: Clean and well-organized code.

Modularity: Breaking down a big program into smaller chunks.

Easy Testing & Debugging: Finding and fixing errors becomes much easier.

Parameters vs Arguments:

Parameters: Variables defined inside the function header (e.g., def add(no1, no2):).

Arguments: The actual values you pass into the function when you call it (e.g., add(100, 200)).

React.js Learning Journey!

Sathish Kumar — Thu, 29 Oct 2026 15:21:32 +0000

Today, I revised some of the core fundamentals of React JS. Sharing my simple notes here for anyone starting out with React:

1. SPA (Single Page Application):
React apps load a single HTML page and dynamically update the content, making the app super fast and smooth!

2. JSX (JavaScript XML):
It lets us write HTML and XML-like syntax directly inside JavaScript.

3. Running the App:
Use the simple command npm run dev to start your development server.

4. useState Hook:
Used to manage state (data) in functional components.
Syntax: const [variable, function] = useState(initialValue);
Example: const [count, setCount] = useState(0);

5. rfce Shortcut:
A handy shortcut in VS Code to quickly generate a React Functional Component Skeleton!

Bank() Function:

Sathish Kumar — Wed, 21 Oct 2026 07:36:57 +0000

function bank() {

let balance = 500; // Private variable
function deposit(amt) {
    balance = balance + amt; // Accessing outer scope variable
    return balance;
}
return deposit;

}
const depositFn = bank();

What happens here?

The bank() function holds an internal variable balance.

The inner function deposit() updates and returns the balance.

Even after bank() finishes executing, depositFn remembers the balance variable!

JavaScript:

Sathish Kumar — Mon, 12 Oct 2026 14:26:27 +0000

1.Listen for the Click Event:
First, we attach an event listener to the button element to trigger an action when a user clicks it:

Example:

buttonTag.addEventListener('click', addToCart);

2.Add Item & Update DOM:
Inside the addToCart function:

We push the selected product to our cart array.

We update the UI count dynamically using innerText.

Example:

function addToCart(product) {
cart.push(product);
document.getElementById('cart-count').innerText = cart.length;
}

3.Save Data in LocalStorage:
To make sure data stays saved in the browser, we use localStorage.setItem:

Example:

localStorage.setItem("cart-item", JSON.stringify(cart));

How to call an API in JavaScript:

Sathish Kumar — Sat, 10 Oct 2026 16:42:21 +0000

If you are learning JavaScript, calling an API is one of the most exciting things you will learn. It allows your website to talk to other servers and get data (like weather, user profiles, or products).

Here is the easiest way to do it using fetch() and async/await:

Example:

async function getUserData() {
try {
// 1. Fetch data from the API URL
const response = await fetch('https://api.github.com/users/octocat');

// 2. Convert the response into JSON format
const data = await response.json();

// 3. Print the data in the console
console.log(data);

} catch (error) {
// Handle any errors here
console.error('Error fetching data:', error);
}
}

getUserData();

Simple & Direct (Best for quick engagement):

Sathish Kumar — Thu, 08 Oct 2026 15:04:34 +0000

Understanding the DOM & Basic Manipulation!

Today, I revised key Web Development concepts—focusing on DOM Manipulation and Equality Operators in JavaScript.

Here is a quick summary of what I learned:

1.What is DOM?

DOM stands for Document Object Model.

It represents the HTML web page as objects, allowing us to dynamically change content using JavaScript.

2.Selecting & Changing Elements:

document.getElementById('idName'): Selects an HTML element using its unique ID.

.innerText: Used to update or modify the text content inside an element.

appendChild(): Used to add/append a new node or element to the end of a parent container.

** Loose vs. Strict Equality in JavaScript:**

10 == "10" ➔ true (Checks value only, performs type coercion).

10 === "10" ➔ false (Checks both value and data type).

JavaScript Notes:

Sathish Kumar — Wed, 07 Oct 2026 17:16:16 +0000

1.Spread Operator (...):

Used to expand elements of an array or add new elements easily.

Example:

let arr2 = [4, 5, 6];

arr2 = [...arr2, 7]; // Adding 7 to the existing array

console.log(arr2);

// Output: [4, 5, 6, 7]

2. Array Destructuring & Rest Operator (...):

Extracting specific elements from an array into variables, and packing the remaining elements using the Rest operator.

Example:

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

// 'a' gets 1st value, 'b' gets 2nd value, '...c' collects the rest!

const [a, b, ...c] = arr1;

console.log(a);

// Output: 1

console.log(b); // Output: 2

console.log(c); // Output: [3, 4, 5, 6, 7, 8]

3. Fetch API & Promises:

Used to request data from a server asynchronously.

Example:

const promise = fetch('https://api.example.com/data');

promise

.then((res) => res.json()) // Convert response to JSON

.then((data) => {

// Accessing specific nested data

console.log(data.product[0].image[0]);

})

.catch((err) => {

// Handle errors if the request fails

console.log("Error:", err);

});

Key Takeaway:

Spread Operator (...): Expands elements.

Rest Operator (...): Combines multiple elements into an array.

Fetch API: Handles asynchronous HTTP requests using Promises.

JavaScript Basics:

Sathish Kumar — Tue, 06 Oct 2026 15:31:48 +0000

Arrays, Functions & Callbacks:

Here is a quick recap of some fundamental JavaScript concepts I revised today:

1.Array Length (.length):

mark.length gives the total size (number of elements) in an array.

2.Mixed Data Types in Arrays:

JavaScript arrays can store different types of data together:

const ar = [10, 20, 30, "abc", true];

3.The .filter() Method:

numbers.filter(display)

numbers ➔ Array name

display ➔ Function passed inside .filter()

4.Callback Functions:

A callback function is a function passed as an argument to another function.

Example: filterdemo(display)

5.Arrow Functions (=>):

A concise way to write functions in JavaScript.

JavaScript for Loop (Increment vs. Decrement)

Sathish Kumar — Fri, 02 Oct 2026 15:51:59 +0000

Mastering Loops in JavaScript: For Loops Explained Simply!
Understanding how loops work is a fundamental skill for every web developer. Today, I broke down the for loop flow logic into two simple scenarios:

1. Incrementing Loop (Counting Up):
Initial Value: Starts at i = 0

Condition: Runs as long as i <= 5

Step: Increases by 1 (i++)

Output: 0, 1, 2, 3, 4, 5
Example:
for (let i = 0; i <= 5; i++) {
console.log(i);
}

2.Decrementing Loop (Counting Down):
Initial Value: Starts at i = 5

Condition: Runs as long as i > 0

Step: Decreases by 1 (i--)

Output: 5, 4, 3, 2, 1
Example:
for (let i = 5; i > 0; i--) {
console.log(i);
}

JavaScript:

Sathish Kumar — Wed, 30 Sep 2026 15:26:58 +0000

Today, I spent time revising two essential core concepts in JavaScript:
JavaScript Objects and Arrow Functions. Here is a quick breakdown of what I covered:

1. JavaScript Objects (Key-Value Pairs & Methods):****

Objects allow us to group related data and functionality together.

Example 1: Mobile Object:

const mobile = {

brand: "Vivo",

price: 15000,

network: "5G",

browse: function () {

console.log("Browsing...");

}

Example 2: Bike Objects (TVS & Bajaj):

const TVS = {

model: "XL-100",

price: 99000,

cc: 100,

drive: function () {

console.log("Speed - 70 km/h");

}

const bajaj = {

model: "Pulsar",

price: 150000,

cc: 150,

drive: function () {

console.log("Speed - 120 km/h");

}

2.Arrow Functions :

Arrow functions provide a cleaner and shorter syntax for writing function expressions in JavaScript.

Syntax:

(param1, param2) => expression;

Example:

const add = (i, j) => i + j;

Constructor Function:

Sathish Kumar — Tue, 29 Sep 2026 13:06:23 +0000

What is a Constructor Function?

It is a special function used to initialize objects with specific values.

It is called automatically when a new object is created using the new keyword.

2. Naming Convention Rule:

Regular functions start with a lowercase letter (e.g., function laptop()).

Constructor functions start with an uppercase letter (e.g., function Laptop()).

Key Concept:

The this keyword refers to the current object being created.

Example Code:

function Laptop(brand, model, price, rom, ram) {
this.brand = brand;
this.model = model;
this.price = price;
this.rom = rom;
this.ram = ram;
}

const laptop1 = new Laptop("Lenovo", "l15", 45000, 512, 8);
const laptop2 = new Laptop("HP", "h15", 35000, 256, 4);

console.log(laptop1);
console.log(laptop2);

Thrilled to share my latest front-end project:

Sathish Kumar — Mon, 28 Sep 2026 14:54:32 +0000

I recently built a clean and responsive website for JJ College using only HTML & CSS.

Key Highlights:

🔹 Built purely with semantic HTML5 and CSS3

🔹 Clean and user-friendly design

🔹 Fully responsive layout across desktop and mobile

🔹 Easy navigation for college updates and course details

Check out the live website here:

🔗 https://shop-ed6a1b.gitlab.io/jjcollege.html

Would love to hear your thoughts and feedback in the comments!