DEV Community: Karthick (k)

React Router

Karthick (k) — Wed, 12 Aug 2026 06:33:39 +0000

React Router is a library used in React to manage client-side routing by mapping URL paths to components without reloading the page.

Client-Side Routing: Enables navigation without full page reloads.

URL Mapping: Connects URL paths to specific components.
Dynamic Navigation: Allows seamless switching between views.
Improved Performance: Updates only required components instead of the whole page.

Let us install the React Router package:

npm install react-router

Components
Here are the main components used in React Router:

BrowserRouter and HashRouter

BrowserRouter: Uses the HTML5 history API to keep your UI in sync with the URL.

HashRouter: Uses the hash portion of the URL (i.e., window.location.hash) to keep your UI in sync with the URL.

<BrowserRouter>
    {/* Your routes go here */}
</BrowserRouter>

2. Routes and Route

Routes: A container for all your route definitions.
Route: Defines a single route with a path and the component to render.

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
</Routes>

3. Link and NavLink

Link: Creates navigational links in your application.
NavLink: Similar to Link but provides additional styling attributes when the link is active.

<NavLink 
  to="/" 
  className={({ isActive }) => (isActive ? "active" : "")}
>
  Home
</NavLink>

Python Operators

Karthick (k) — Tue, 11 Aug 2026 14:40:30 +0000

In Python programming, Operators in general, are used to perform operations on values and variables.

Operators: Special symbols like -, + , * , /, etc.
Operands: Values on which the operator is applied.

Types of Operators in Python

Python operators
Arithmetic Operators:

Arithmetic operators are used to perform basic mathematical operations like addition, subtraction, multiplication and division.

In Python, the division operator (/) returns a floating-point result, while floor division (//) returns an integer result.

a = 15
b = 4

print("Addition:", a + b)  

print("Subtraction:", a - b) 

print("Multiplication:", a * b)  

print("Division:", a / b) 

print("Floor Division:", a // b)  

print("Modulus:", a % b) 

print("Exponentiation:", a ** b)

Comparison Operators

Comparison(or Relational) operators compare values. It either returns True or False according to the condition.

a = 13
b = 33

print(a > b)
print(a < b)
print(a == b)
print(a != b)
print(a >= b)
print(a <= b)

Logical Operators

Logical operators perform Logical AND, Logical OR and Logical NOT operations. It is used to combine conditional statements.

The precedence of Logical Operators in Python is as follows:

Logical not
logical and
logical or

a = True
b = False
print(a and b)
print(a or b)
print(not a)

Bitwise Operators

Bitwise operators act on bits and perform bit-by-bit operations. These are used to operate on binary numbers.

Bitwise Operators in Python are as follows:

Bitwise NOT
Bitwise Shift
Bitwise AND
Bitwise XOR
Bitwise OR


a = 10
b = 4

print(a & b)
print(a | b)
print(~a)
print(a ^ b)
print(a >> 2)
print(a << 2)

Assignment Operators

Assignment operators are used to assign values to the variables. This operator is used to assign the value of the right side of the expression to the left side operand. Example:

a = 10
b = a
print(b)
b += a
print(b)
b -= a
print(b)
b *= a
print(b)
b <<= a
print(b)

Identity Operators

"is" and **"is not" **are the identity operators and both are used to check if two values are located on the same part of the memory. Two variables that are equal do not imply that they are identical.

a = 10
b = 20
c = a

print(a is not b)
print(a is c)

An Evening with ILUGC — Indian Linux Users Group Chennai in August

Karthick (k) — Sun, 09 Aug 2026 06:05:47 +0000

Today I attended an ILUGC (Indian Linux Users Group Chennai) meetup, and honestly, it was fantastic. The kind of session where you walk in just curious and walk out with pages of notes and a dozen new things to explore. Here's my recap!

The meetup ran from 3:00 PM to 6:00 PM, hosted around the IIT Madras campus — and yes, that campus is basically a forest with classrooms in it. More on that later. 😄

Getting Started

We kicked off with a round of self-introductions — always a nice way to see who's in the room, from students to long-time Linux folks. After that, we moved straight into the first topic at 3:30 PM.

Session 1: Operating Systems Evolution

The first talk was led by Dr. K. Venkatasalam sir. It was a deep dive into the evolution of operating systems — tracing the family tree all the way from early systems like IOCS and IBSYS in the '50s, through CTSS, Multics, and UNIX, branching out into everything from VMS and MVS to the modern Linux, Solaris, and Windows lineages.

What really stood out, though, was when he shifted from OS history into his own real-world experience — talking about the Automatic Boom Project by ISRO. He explained that this primarily refers to the development and deployment of the 6-meter-long Magnetometer Boom onboard the Aditya-L1 solar spacecraft, as well as upcoming deployable mechanisms for missions like NISAR. It's a self-deploying mechanical arm that extends sensors safely away from the satellite body, so they can measure low-intensity space magnetic fields without any interference from the satellite itself.

Hearing that connection between low-level OS/embedded systems knowledge and actual space missions was genuinely inspiring — it's not every day you get engineering history and ISRO stories in the same sitting.

Session 2: A Tour Through Linux Distros

The second session shifted gears into a tour of different Linux distributions — Debian, Fedora, Arch Linux, Endless OS, and one that really caught my attention: Sugar OS.

Sugar OS is specifically designed for children's use — built around a completely different, simplified interface meant for young learners rather than general users. It was interesting to see how a distro can be shaped entirely around its audience instead of trying to be "one size fits all."

Wrapping Up with Tea and Conversation

We closed the session with a relaxed group conversation over tea — the kind of informal chat where half the good insights of the day actually happen. Talked a bit more about IIT Madras itself, the community, and what's coming up next.

And as a bonus — walking around the IIT Madras campus after the session, I ran into this spotted deer casually crossing the road like it owned the place. The campus is genuinely known for its resident deer population, and it never stops being a nice surprise.

ReactJS useContext Hook

Karthick (k) — Sat, 08 Aug 2026 08:37:42 +0000

The useContext hook in React allows components to consume values from the React context. React’s context API is primarily designed to pass data down the component tree without manually passing props at every level. useContext is a part of React's hooks system that enables functional components to access context values.

Simplifies accessing shared state across components.
Avoids prop drilling by eliminating the need to pass props down multiple levels.
Works seamlessly with React's Context API to provide global state

Syntax

const contextValue = useContext(MyContext);

MyContext: The context object is created using React.createContext().
contextValue: The current context value that we can use in our component.
```
     **Implementing the useContext Hook**
```

Implementing the useContext Hook involves creating a context, providing its value through a provider component, and consuming that shared value directly within functional components.

1.Passing Data Between Sibling Components Using Context

Sometimes, two sibling components need to share data. useContext helps avoid lifting state unnecessarily.

App.jsx


import React, { useContext, useState } from "react";
import MessageContext from "./MessageContext";
import "./App.css";

function Parent() {
  const [message, setMessage] = useState("Hello from Child A");

  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      <div className="container">
        <Header />

        <div className="children-container">
          <ChildA />
          <ChildB />
        </div>
      </div>
    </MessageContext.Provider>
  );
}

function Header() {
  return (
    <div className="header">
      <h2>GeeksforGeeks</h2>
      <p>Passing Data Between Siblings using React Context API</p>
    </div>
  );
}

function ChildA() {
  const { setMessage } = useContext(MessageContext);

  return (
    <div className="card">
      <h3>Child A</h3>

      <input
        type="text"
        placeholder="Update message"
        onChange={(e) => setMessage(e.target.value)}
        className="input"
      />
    </div>
  );
}

function ChildB() {
  const { message } = useContext(MessageContext);

  return (
    <div className="card">
      <h3>Child B</h3>

      <p className="message">
        <strong>Message from A:</strong> {message}
      </p>
    </div>
  );
}

export default function App() {
  return <Parent />;
}

MessageContext.jsx

import { createContext } from "react";

const MessageContext = createContext();

export default MessageContext;

OUTPUT:

Introduction to PostgreSQL

Karthick (k) — Thu, 06 Aug 2026 14:05:41 +0000

What is PostgreSQL?

PostgreSQL, also called Postgres, is a free, open-source relational database management system. It stores data in tables with rows and columns. It uses the SQL language to run queries, and it also supports JSON for non-relational data.

The primary difference between a DBMS and an RDBMS

DBMS

DBMS stores data as files.
Data elements need to be accessed individually.
No relationship between data.
Normalisation is not present.

RDBMS

Data is stored in the form of tables which are related to each other.
RDBMS stores data in tabular form.
Multiple data elements can be accessed at the same time.
Normalisation is present.

Why PostgreSQL ?

It is a free, open-source relational database that balances strict ACID compliance and data safety with extreme flexibility, powerful JSON support, and a vast ecosystem of extensions

Data Integrity

Concurrency, Performance

Reliability, Disaster Recovery

Security

Extensibility

Internationalisation, Text Search

Python 3.14.6 documentation

Karthick (k) — Tue, 04 Aug 2026 04:01:29 +0000

** What is a module in Python? **

In Python, a module is simply a file containing Python code with a .py extension. It allows you to logically group and organise your functions, classes, and variables into separate, manageable files so your code can be easily reused across different programs.

What is a user-defined module in Python

user-defined module in Python is simply a custom .py file that you create yourself to store reusable code, such as functions, classes, or variables. Unlike built-in modules like math or random that come pre-packaged with Python, user-defined modules allow you to break down large programs into smaller, highly manageable pieces.

** What is a predefined module in Python **

A *predefined module *(more commonly known as a built-in module) in Python is a pre-written code file containing functions, classes, and variables that comes pre-installed with the Python software.

*What is the import keyword in Python? *

In Python, the import keyword is used to load and access external modules or packages into your current script. It essentially allows you to reuse code written by others—or code you wrote in another file—without rewriting it from scratch.

ReactJS useRef Hook

Karthick (k) — Tue, 04 Aug 2026 03:46:28 +0000

The useRef Hook lets you store a mutable value that persists across component renders. It is commonly used to access DOM elements or keep values without causing re-renders.

Returns an object with a .current property to hold any value
Updating .current does not trigger a re-render
Useful for DOM access, timers, and storing previous values

Syntax

const refContainer = useRef(initialValue);

Implementing the useRef hook

The useRef hook is used to access DOM elements and persist values across renders without triggering re-renders.

Accessing the DOM using the useRef hook

A ref created with useRef is attached to the textarea, allowing the click handler to access the DOM element and programmatically set focus.

import React, { Fragment, useRef } from 'react';

function App() {
    const focusPoint = useRef(null);
    const onClickHandler = () => {
        focusPoint.current.value =
            "The quick brown fox jumps over the lazy dog";
        focusPoint.current.focus();
    };
    return (
        <Fragment>
            <div>
                <button onClick={onClickHandler}>
                    ACTION
                </button>
            </div>
            <label>
                Click on the action button to
                focus and populate the text.
            </label><br />
            <textarea ref={focusPoint} />
        </Fragment>
    );
};
export default App;

useRef creates a reference to focusPoint, which allows direct manipulation of the DOM element.
Clicking the "ACTION" button triggers onClickHandler, which sets text in the textarea and focuses it.
(<>...</>) is used to group multiple elements without adding extra wrappers in the DOM.

My Python Class — The Golden Rules of Programming

Karthick (k) — Sun, 02 Aug 2026 11:06:06 +0000

1. Never Say "I Don't Know" — Say "Let Me Try"

The first rule, and maybe the most important mindset shift. When you look at a program and feel lost, the instinct is to freeze and say "I don't know this." Instead, the habit to build is saying "let me try" — even a small attempt moves you forward, while "I don't know" keeps you stuck.

2. Known to Unknown

Start solving a problem from what you already know, and work your way toward what you don't. Don't try to jump straight to the unfamiliar part — build up to it step by step from familiar ground.

3. Don't Think About the Entire Output

Don't get overwhelmed trying to picture the whole final result all at once. Break the problem down and focus on getting the next small piece working.

4. Think About the Entire Output

At the same time, keep the big picture in mind — know what the end goal actually looks like, so your small steps are still heading in the right direction. (Sir made it sound like these two — don't fixate on it, but don't lose sight of it either — work together, not against each other.)

5. Introduce a Variable Only If It Simplifies the Solution

Don't add variables just because you can. Every variable should earn its place — if it doesn't make the logic clearer or simpler, you probably don't need it.

6. Micro to Macro

Similar to "known to unknown" — start small. Get the tiniest piece of logic working first, then build outward into the bigger, complete solution.

7. Dry Run Before You Run

Before actually executing the code, trace through it by hand (a "dry run") — walk through the logic step by step on paper or in your head. It catches a surprising number of mistakes before you even hit run.

8. Every Program Has Three Parts: Input, Process, Output

No matter how complex a program looks, it always breaks down into these three stages — something comes in, something happens to it, and something comes out. Keeping this structure in mind makes any problem easier to approach.

9. Logic First, Syntax Next

Figure out what the program needs to do and how it should do it before worrying about the exact syntax. Syntax is something you look up; logic is something you build.

My Python Class — What Even Is Python?

Karthick (k) — Sun, 02 Aug 2026 10:55:59 +0000

What Is Python?

Sir started with the basics — what Python actually is. In simple terms, Python is a high-level, general-purpose programming language. "High-level" basically means it's designed to be easy for humans to read and write, instead of being close to machine code. That's a big part of why Python looks so much simpler than languages like C or Java.

Python vs Python 3

One thing that confused me a bit at first was hearing "Python" and "Python 3" used almost interchangeably. Turns out, Python has had major versions over the years — Python 2 and Python 3 — and they're not fully compatible with each other. Python 3 fixed many design issues in Python 2 and is now the standard. Python 2 is officially retired at this point, so basically everyone learning Python today is learning Python 3, even if people just call it "Python."

Python Versions

Along with that, sir talked about how Python keeps getting new versions (3.9, 3.10, 3.11, and so on), each adding new features, performance improvements, and sometimes small syntax changes. Good habit apparently: always check which version a tutorial or project is using, since it can occasionally matter.

Why Python for AI and Machine Learning?

This part got me interested. Python is huge in AI and machine learning, and a few reasons why came up:

Simple syntax — lets you focus on the logic/math instead of fighting the language itself
Huge ecosystem of libraries — things like NumPy, pandas, TensorFlow, PyTorch, scikit-learn, etc., which handle a lot of the heavy lifting
Strong community support — tons of tutorials, forums, and pre-built tools since so many researchers and companies use it

The way it was explained: machine learning is basically about finding patterns in data and building models that can predict or classify based on those patterns. Python doesn't do the "learning" itself — the algorithms and libraries do — but Python is the language that ties everything together: loading data, preprocessing it, feeding it into a model, training it, and testing the results.

Why Python Is Open Source

Sir also touched on Python being open source — meaning its source code is publicly available, and anyone can inspect it, contribute to it, or build on top of it. This is a big reason Python has grown so fast: instead of one company controlling everything, a huge global community keeps improving it, writing libraries, and fixing bugs. It's also completely free to use, which lowers the barrier for beginners like me.

Why Python Feels "Friendly"

The last point was about why Python has such a reputation for being beginner-friendly:

Clean, readable syntax (close to plain English)
Fewer symbols/brackets compared to other languages
Large community means help is always just a search away
Works across so many domains — web dev, automation, data science, AI, scripting — so the skills transfer
Why I Want to Learn Python

Honestly, this is the part I related to the most. I want to learn Python because it feels like a language that opens doors — whether that's AI/ML, automation, or just general programming skills. It's also clearly in huge demand right now, and after today's class, it feels a lot less intimidating than I expected.

BrowserRouter in React

Karthick (k) — Fri, 31 Jul 2026 08:20:06 +0000

What is BrowserRouter?

BrowserRouter is a component from the library
React Router.

It helps us create navigation in a React application without refreshing the page.

It uses the browser’s history API to keep the UI in sync with the URL.

How to Use BrowserRouter (Step-by-Step)

Step 1: Install React Router

npm install react-router-dom

Step 2: Import BrowserRouter

import { BrowserRouter } from "react-router-dom";

Step 3 Wrap Your App

import { BrowserRouter } from "react-router-dom";
import App from "./App";

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

Now your entire app supports routing.

Creating Routes

We use Routes and Route.

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

Navigation Using Link

Instead of anchor tag, we use Link.

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </>
  );
}

Conclusion

BrowserRouter is the heart of routing in React applications.

If you are building a portfolio, e-commerce app, or dashboard,
learning BrowserRouter is very important.

ReactJS useContext Hook

Karthick (k) — Wed, 29 Jul 2026 02:28:51 +0000

The **useContext **hook in React allows components to consume values from the React context. React’s context API is primarily designed to pass data down the component tree without manually passing props at every level. **useContext **is a part of React's hooks system that enables functional components to access context values.

Simplifies accessing shared state across components.
Avoids prop drilling by eliminating the need to pass props down multiple levels.
Works seamlessly with React's Context API to provide global state.
Ideal for managing themes, authentication, or user preferences across the app.

const contextValue = useContext(MyContext);

MyContext: The context object is created using React.createContext().
contextValue: The current context value that we can use in our component.

Creating a Context

Before using useContext, we need to create a context using React.createContext(). This context will provide a value that can be accessed by any child component wrapped in a Context. Provider.

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function App() {
    const [value, setValue] = useState('Hello, World!');

    return (
        <MyContext.Provider value={value}>
            <ChildComponent />
        </MyContext.Provider>
    );
}

function ChildComponent() {
    const contextValue = useContext(MyContext);
    return <h1>{contextValue}</h1>;
}

createContext() creates a context object (MyContext) that holds a default value.
MyContext.Provider passes down the context value to its child components.
useContext(MyContext) allows components like ChildComponent to access the context value.

ReactJS useEffect Hook

Karthick (k) — Wed, 29 Jul 2026 02:19:40 +0000

The *useEffect * hook is one of the most commonly used hooks in ReactJS, used to handle side effects in functional components. Before hooks, these kinds of tasks were only possible in class components through lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Fetching data from an API.
Setting up event listeners or subscriptions.
Manipulating the DOM directly (although React generally handles DOM manipulation for you).
Cleaning up resources when a component unmounts.

Syntax

useEffect(() => { // Code to run on each render return () => { // Cleanup function (optional) }; }, [dependencies]);

Working of useEffect

//HookCounterOne.js

// useEffect is defined here

import { useState, useEffect } from "react";

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

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    return (
        <div>
            <button onClick={() => setCount((prevCount) => prevCount + 1)}>
                Click {count} times
            </button>
        </div>
    );
}
export default HookCounterOne;

//App.js

//App.js 

// Importing and using HookCounterOne

import React from "react";
import "./App.css";
import HookCounterOne from "./components/HookCounterOne";

function App() {
    return (
        <div className="App">
            <HookCounterOne />
        </div>
    );
}
export default App;