DEV Community: Kamalesh AR

My journey exploring to presentation about RAG - Retrieval Augmented Generation

Kamalesh AR — Tue, 21 Jul 2026 15:41:28 +0000

Recently, I had the opportunity to deliver a presentation on Retrieval-Augmented Generation (RAG) at my institute. Preparing for this session helped me understand not only what RAG is, but also why it has become one of the most important techniques in modern AI applications.

In this blog, I'd like to share what I learned and explain RAG in a simple way.

What is RAG:

Retrieval-Augmented Generation (RAG) is the process of optimizing the output of a large language model, so it references an authoritative knowledge base outside of its training data sources before generating a response.

Retrieval: Search for relevant information from documents, databases, or websites.
Augmentation: Add the retrieved information to the user's question as additional context.
Generation: The LLM uses both the question and the retrieved information to generate an accurate answer.

Large Language Models (LLMs) are trained on vast volumes of data and use billions of parameters to generate original output for tasks like answering questions, translating languages, and completing sentences.

RAG extends the already powerful capabilities of LLMs to specific domains or an organization's internal knowledge base, all without the need to retrain the model. It is a cost-effective approach to improving LLM output so it remains relevant, accurate, and useful in various contexts.

Example

"What is my college's attendance policy?"

Without RAG

The AI only uses its training knowledge and might answer:

"Most colleges require around 75% attendance."

This is a generic answer and may not be correct for your college.

With RAG

The AI first searches your college handbook, retrieves the attendance policy, and then answers:

"According to your college handbook, students must maintain at least 80% attendance."

Why RAG:

LLMs are a key artificial intelligence (AI) technology powering intelligent chatbots and other natural language processing (NLP) applications.

The goal is to create bots that can answer user questions in various contexts by cross-referencing authoritative knowledge sources.

Unfortunately, the nature of LLM technology introduces unpredictability in LLM responses. Additionally, LLM training data is static and introduces a cut-off date on the knowledge it has.

Known challenges included:

Presenting false information when it does not have the answer.
Presenting out-of-date or generic information when the user expects a specific, current response.
Creating a response from non-authoritative sources.
Creating inaccurate responses due to terminology confusion, wherein different training sources use the same terminology to talk about different things.

Working:

Query Processing: The input query is first pre-processed and prepared for further steps, ensuring it is in a suitable form for embedding.
Embedding Model: The query is passed through an embedding model that converts it into a vector capturing its semantic meaning.
Vector Database Retrieval: This vector is used to search a vector database to find documents that are most similar to the query.
Retrieved Contexts: The system retrieves the documents that are closest to the query. These documents are then forwarded to the generative model to help it craft a response.
LLM Response Generation: The LLM combines the original query with the retrieved context to generate a coherent and accurate response.
Response: The final response integrates both the model’s internal knowledge and the retrieved information, making it more relevant and up-to-date.

Three pillars of RAG:

Popular RAG Tools:

LLM's:

Chatgpt
Claude
Gemini
Llama

Vector Databases:

FAISS
Pinecone
ChromaDB
Milvus

Frameworks:

LangChain
LlamaIndex
Haystack

Embedding Models:

OpenAI Embeddings
BGE
E5
Sentence Transformers

Purpose:

The purpose of a Retrieval-Augmented Generation (RAG) model is to improve the accuracy and relevance of AI responses by pulling facts from external knowledge bases rather than relying solely on its static training data.

1. Grounding in Factuality

The primary purpose of RAG is to anchor Large Language Models in verified, authoritative source material. By feeding the exact context along with the query, RAG dramatically reduces hallucinations and equips the system to cite sources transparently.

2. Dynamic Data Integration

Instead of relying on a static knowledge window frozen during pre-training, RAG dynamically pulls live enterprise data, inventory lists, internal wikis, or real-time APIs. This ensures answers are always current without requiring costly, slow model retraining cycles.

Usestate in React

Kamalesh AR — Fri, 17 Jul 2026 14:11:24 +0000

Usestate

The React useState Hook allows us to track state in a function component.
useState is a React Hook that allows functional components to store and update data (state). Whenever the state changes, React automatically re-renders the component to display the updated UI.

Syntax

const [state, setState] = useState(initialValue);

state - The current value.
setState - Function used to update the state.
initialValue - The initial value of the state.

Import useState

To use the useState Hook, we first need to import it into our component.

import { useState } from "react";

Notice that we are destructuring useState from react as it is a named export.

Initialize usestate

We initialize our state by calling useState in our function component.

useState accepts an initial state and returns two values:

The current state.
A function that updates the state.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("red");
}

Notice that again, we are destructuring the returned values from useState.

The first value, color, is our current state.

The second value, setColor, is the function that is used to update our state.

Lastly, we set the initial state to "red": useState("red")

Read State

We can now include our state anywhere in our component

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Update State

To update our state, we use our state updater function.

<button
  type="button"
  onClick={() => setColor("blue")}
>Blue</button>

EXample

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Reference

https://www.w3schools.com/react/react_usestate.asp

REACT - Vite,Components and npm

Kamalesh AR — Wed, 15 Jul 2026 15:03:24 +0000

Vite:

Vite (pronounced "veet", French for "quick") is a modern frontend build tool that helps developers create web applications faster.

It provides:

A development server
Fast hot reloading
A build system for production
Project scaffolding for frameworks like React, Vue, Svelte, and others

Instead of configuring everything manually (Webpack, Babel, etc.), Vite gives you a ready-to-use development environment.

Have you seen or heard about Vite? Vite is the 12th-ranked bundling tool used by 2023 Stack Overflow selection developers. Here’s what Wikipedia defines as Vite.

Vite (French: [vit], like “veet”) is a local development server written by Evan You,[1] the creator of Vue.js, and used by default by Vue and for React project templates. It has support for TypeScript and JSX. It uses Rollup and esbuild internally for bundling.

It’s a pretty clear explanation, but today’s story is a longer and easier way to understand Vite. First, there’s a background you need to know to understand Vite.

Why do we use Vite?

Before Vite, tools like Create React App (CRA) and Webpack were commonly used.

The problem was:

Slow startup time
Slow rebuilds as the project grew
Longer development cycles

Vite solves these problems by making development much faster.

With vite:

Write Code
     ↓
Vite serves files directly
     ↓
Only changed module reloads
     ↓
Browser updates instantly

Without vite:

Write Code
     ↓
Webpack bundles entire project
     ↓
Browser loads application

Typical vite project structure:

my-app/
│
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
│
├── package.json
├── vite.config.js
└── node_modules/

Components:

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used.

It is now suggested to use Function components along with Hooks, instead of Class components.

Class components are still supported, check the Class components section for more information.

A component is a reusable piece of UI (User Interface).

Instead of writing the same HTML multiple times, you create a component once and use it wherever needed.

Think of a website like a set of LEGO blocks:

Navbar
Button
Card
Footer

Each block is a component

With components:

function ProductCard() {
  return (
    <div className="card">
      <h2>iPhone 16</h2>
      <p>₹80,000</p>
    </div>
  );
}

Without components:

<div class="card">
  <h2>iPhone 16</h2>
  <p>₹80,000</p>
</div>

<div class="card">
  <h2>Samsung S25</h2>
  <p>₹75,000</p>
</div>

<div class="card">
  <h2>Pixel 10</h2>
  <p>₹70,000</p>
</div>

Node package manager(NPM):

npm stands for Node Package Manager.

npm is the world's largest Software Registry.

The registry contains over 800,000 code packages.

Open-source developers use npm to share software.

Many organizations also use npm to manage private development.

It is the default package manager for Node.js. npm helps you install, manage, update, and remove packages (libraries) that your project depends on.

Think of npm as an app store for JavaScript libraries.

For example, if you need:

React
Express
Axios
Lodash

You can install them using npm.

Background

Before the activation of JavaScript libraries and npm, developers used to deploy their projects by uploading HTML, CSS, and JavaScript files to the server. (In fact, in the big picture, there doesn’t seem to be much difference from current development practices.) Over time, as JavaScript libraries became more prevalent, developers started actively utilizing npm to make installing libraries easier. npm, in simple terms, is a platform for gathering JavaScript libraries. When you install an npm library, a folder named node_modules is created within your project directory. This folder contains the source code of the library and its dependencies. This allows developers to easily import modules, but it has two major drawbacks.

The large size of the node_modules folder
the fact that the import/require syntax was not browser-friendly at that time

Why we use npm?

Instead of writing every feature from scratch, developers use packages created by others.

For example:

Want to make HTTP requests? → Install axios
Want routing in React? → Install react-router-dom
Want icons? → Install react-icons

npm downloads these packages and manages their versions.

How npm works

Developer
    │
    │ npm install react
    ▼
npm Registry (online repository)
    │
    ▼
Downloads React
    │
    ▼
node_modules/

Reference:

https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://medium.com/@gmmicky1026/easy-explanation-about-vite-8a6493731fc4

CODE on JVM - Meetup

Kamalesh AR — Mon, 13 Jul 2026 08:05:24 +0000

Yesterday, I attended the Code on JVM meetup, where industry experts and experienced professionals delivered three insightful technical sessions. The event covered the following topics:

DSA in Production – A Case Study
Uncovering Ideas Worth Building in the AI Era
Streaming Large File Downloads in Java

Each session provided practical insights, real-world experiences, and valuable knowledge on applying these concepts in the software industry. In this blog, I'll share the key takeaways and lessons I learned from each session.

1. DSA in Production – A Case Study

Taken by - Hareesh Rajendran (Founder & CEO, Hayan Tech)

This session demonstrated how data structures and algorithms are applied in large-scale production systems rather than just coding interviews.

Key Takeaways

Bloom Filters

A probabilistic data structure used to quickly check whether an element may exist.
Extremely memory-efficient.
Used in databases and caching systems to avoid unnecessary lookups.

HyperLogLog

Used for estimating the number of unique elements in massive datasets.
Requires very little memory.
Based on probability and mathematical concepts.

Common use cases include:

Counting unique Reddit users
Google Analytics
Analytics dashboards

LSM Trees (Log-Structured Merge Trees)

Optimized for high write performance.
Widely used in databases handling large volumes of data.

Consistent Hashing

Helps distribute data across multiple servers.
Reduces data movement when servers are added or removed.
Commonly used in distributed systems and load balancing.

HNSW Graph (Hierarchical Navigable Small World)

HNSW is a graph-based data structure that enables extremely fast similarity searches among millions of vectors. It is widely used in AI applications such as semantic search, recommendation systems, vector databases, and Retrieval-Augmented Generation (RAG).

Skip List

A Skip List is a probabilistic data structure that provides fast search, insertion, and deletion operations by using multiple linked levels. It offers performance similar to balanced trees while being simpler to implement and is commonly used in Redis and database storage engines.

Hexagonal Grid (H3)

H3 is a geospatial indexing system that divides the Earth's surface into hexagonal cells for efficient location-based processing. It is widely used by mapping, ride-sharing, and food delivery platforms to optimize routing, nearby searches, and geographic analysis.

Takeways:
Totally about the data structure how it works, why it works by knowing this easyily understand the concept and above are DSA algorithm used in many use cases and case study.

2. Uncovering Ideas Worth Building in the AI Era

Taken by - Agnel John D (Founder & CEO of Error makes clever)

This session focused on validating ideas before investing time in building products.

Lessons Learned

Building a product is easier than finding people who truly need it.
Validate your idea by talking to potential users first.
Identify customers who are willing to pay.
Your first paying customers are the strongest proof that your idea solves a real problem.
Once validation is complete, commit fully and execute with focus.

Takeways
How to use AI efficiently
By using AI to build model
How it works for working professions
Then how prioritize the product to the market using AI

Session 3: Streaming Large File Downloads in Java

Taken by - Kalaivani Mohan (Software Engineer, IBM)

The final session explained how streaming large file downloads improves application performance. Instead of loading an entire file into memory, Java streams the file in smaller chunks, reducing memory usage and enabling faster, more scalable downloads. This technique is widely used for serving videos, PDFs, reports, cloud storage files, and other enterprise applications, making backend systems more efficient and reliable.

Takeways

This session is fully about the large file downloads for users. By split as chunk to n number of users with the help of Java.

Final Thoughts

This meetup was an excellent learning experience. It highlighted how computer science concepts like Bloom Filters, HyperLogLog, LSM Trees, and Consistent Hashing power modern applications, while also emphasizing that successful AI products start with solving real customer problems—not just writing code.

A big thanks to the speakers and organizers for sharing their practical experiences. Looking forward to attending more such sessions!

#CodeOnJVM #Java #DSA #SystemDesign #AI #Software engineer

REACT

Kamalesh AR — Mon, 13 Jul 2026 07:34:34 +0000

About react:

React is a JavaScript library for building user interfaces.
React is used to build single-page applications.
React allows us to create reusable UI components.

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library that aims to make building user interfaces based on components more "seamless". It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. According to the 2025 Stack Overflow Developer Survey, React is one of the most commonly used web technologies.

React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js and React Router. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality. A key advantage of React is that it only re-renders those parts of the page that have changed, avoiding unnecessary re-rendering of unchanged DOM elements. React is used by an estimated 6% of all websites.

React is a JavaScript library used to build interactive UI (User Interfaces), mainly for web apps.

It was developed by Facebook (Meta) and is widely used in companies like Instagram, Netflix, etc.

Why React is used?

Fast
Reusable
Easy to manage

3 Core Concepts That Make React Work

1. Components (The Lego Bricks)

React splits the UI into independent, reusable pieces called Components. For example, on a page like UI, a navigation bar, a sidebar, and a video player are all separate components.

You write a component once (like a Button) and reuse it across your entire app.

Components are typically written using JSX (JavaScript XML), a syntax extension that lets you write HTML-like code directly inside your JavaScript.

2. State and Props (The Data Flow)

Data in React moves in two ways:

Props (Properties): Think of these as configuration settings passed down from a parent component to a child component (like telling a button component what text to display). Props are read-only.

State: This is a component's private, internal memory. If a user clicks a "Like" button, the count increases. That count is stored in the component's state. When state changes, the component automatically updates.

3. The Virtual DOM (The Speed Demon)

Traditionally, when data changes on a website, the browser has to recalculate and redraw the entire webpage. This is slow and performance-heavy.

React solves this by creating a Virtual DOM—a lightweight, digital copy of the actual webpage kept in the computer's memory.

When state changes, React updates the Virtual DOM first.
It then compares the new Virtual DOM with a snapshot of the old one (a process called "diffing algorithm").
React figures out exactly which tiny part changed and updates only that specific piece on the real screen, leaving the rest untouched.

Why Developers Choose React

Declarative UI: You simply describe what the UI should look like based on the current data state, and React handles all the complex steps to update the screen.

Massive Ecosystem: Because of its popularity, React has thousands of pre-built packages for routing, styling, and state management, plus React Native for building mobile apps.

High Performance: The Virtual DOM ensures applications stay snappy even when handling complex, real-time data streams.

References:

https://www.w3schools.com/React/Default.ASP
https://en.wikipedia.org/wiki/React_(software)
https://react.dev/blog

Concept of closure in javascript

Kamalesh AR — Wed, 08 Jul 2026 16:17:45 +0000

Closures:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation time.

JavaScript variables can belong to:

The local scope
The global scope

Global variables can be made local (private) with closures.

Closures make it possible for a function to have "private" variables.

A closure is created when a function remembers the variables from its outer scope, even after the outer function has finished executing.

Retains access to outer function variables.
Preserves the lexical scope.
Allows data encapsulation and privacy.
Commonly used in callbacks and asynchronous code.

Lexical Scoping:

Closures rely on lexical scoping, which means a function’s scope is determined by where it is defined, not where it is executed.

A function retains access to the scope where it was defined.
Inner functions can access outer function variables.
Enables closures to “remember” their environment.

Private Variables

Closures allow a function to keep variables private and accessible only within that function, which is commonly used in modules to protect data from being accessed or modified by other parts of the program.

Helps achieve data encapsulation
Creates private variables
Prevents accidental data modification

Example 1:

function makeAdder(x){
    return function(y){
        return x+y
    }
}
let add5 = makeAdder(5)
console.log(add5(10))

Output:

Example 2:

function myCounter() {
  let counter = 0;//variable in outer function
 function inner() {
    counter++;//inner function uses other variable
    console.log(counter);
   }
return inner;
}
const add = myCounter();
add();//1
add();//2
add();//3
const adding = myCounter();
adding();//1
adding();//2
add();//4

Eventhough, the outer function has finished, the inner function remembers the count. This is called closure.

References:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
https://www.w3schools.com/js/js_function_closures.asp
https://www.geeksforgeeks.org/javascript/closure-in-javascript/

Callback hell and Promise

Kamalesh AR — Wed, 08 Jul 2026 15:46:59 +0000

Callback Hell:

Callback Hell is a situation in JavaScript where multiple nested callback functions make your code look like it’s been through a blender on the highest setting.

This typically occurs when dealing with asynchronous operations, such as making API requests or handling file I/O, where one operation depends on the result of another or previous One.

A callback is simply a function passed as an argument to another function. It gets executed after the first function finishes its work.

Callback Hell (Pyramid of Doom):

login(function () {

    selectFood(function () {

        makePayment(function () {

            placeOrder(function () {

                deliverFood(function () {

                    console.log("Enjoy your meal!");

                });

            });

        });

    });

});

login()
   |
   selectFood()
      |
      makePayment()
         |
         placeOrder()
            |
            deliverFood()
               |
           Enjoy Meal

Solution to Callback Hell
Promises.

Promise:

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

The eventual state of a pending promise can either be fulfilled with a value or rejected with a reason (error). When either of these options occur, the associated handlers queued up by a promise's then method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.

Solution for callback hell using promise

login()
    .then(selectFood)
    .then(makePayment)
    .then(placeOrder)
    .then(deliverFood)
    .then(() => {
        console.log("Enjoy your meal!");
    })
    .catch((error) => {
        console.log(error);
    });

Example 1:

function tossCoin(){
    return new Promise((resolve,reject) => {
        const rand = Math.floor(Math.random() * 2)
        if(rand==0)
            resolve()
        else
            reject()

    })
}
  tossCoin()
        .then(()=>console.log("Congrats!,Its head,You won"))
        .catch(()=>console.log("Sorry,You lost,Its tail"))

Output:

If it is 0 means that is heads.

Congrats!,Its head,You won

Example 2:

function tossCoin(){
    return new Promise((resolve,reject) => {
        const rand = Math.floor(Math.random() * 2)
        if(rand==1)
            resolve()
        else
            reject()

    })
}
  tossCoin()
        .then(()=>console.log("Congrats!,Its head,You won"))
        .catch(()=>console.log("Sorry,You lost,Its tail"))

Output:
If it is 1 means that is tail

Sorry,You lost,Its tail

Promise concurrency

The Promise class offers four static methods to facilitate async task concurrency:

Promise.all()

Fulfills when all of the promises fulfill; rejects when any of the promises rejects.

Promise.allSettled()

Fulfills when all promises settle.

Promise.any()

Fulfills when any of the promises fulfills; rejects when all of the promises reject.

Promise.race()

Settles when any of the promises settles. In other words, fulfills when any of the promises fulfills; rejects when any of the promises rejects.

References:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://www.geeksforgeeks.org/javascript/what-to-understand-callback-and-callback-hell-in-javascript/
https://medium.com/@raihan_tazdid/callback-hell-in-javascript-all-you-need-to-know-296f7f5d3c1

Math functions and Searching elements

Kamalesh AR — Thu, 02 Jul 2026 18:05:12 +0000

The Math Object

The JavaScript Math object allows you to perform mathematical tasks.

The Math object is static.

All methods and properties can be used without creating a Math object first.

Math Properties (Constants)

The syntax for any Math property is : Math.property.

JavaScript provides 8 mathematical constants that can be accessed as Math properties:

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Math Methods

Math.round()
Math.round(x) returns the nearest integer

Math.round(4.6);

Math.ceil()
Math.ceil(x) returns the value of x rounded up to its nearest integer

Math.ceil(4.9);
Math.ceil(4.7);
Math.ceil(4.4);
Math.ceil(4.2);
Math.ceil(-4.2);

Math.floor()
Math.floor(x) returns the value of x rounded down to its nearest integer

Math.floor(4.9);
Math.floor(4.7);
Math.floor(4.4);
Math.floor(4.2);
Math.floor(-4.2);

Math.trunc()
Math.trunc(x) returns the integer part of x

Math.trunc(4.9);
Math.trunc(4.7);
Math.trunc(4.4);
Math.trunc(4.2);
Math.trunc(-4.2);

Math.sign()
Math.sign(x) returns if x is negative, null or positive.

If x is positive it returns 1
If x is negative it returns -1
If x is zero, it returns 0

Math.sign(-4);
Math.sign(0);
Math.sign(4);

Math.pow()
Math.pow(x, y) returns the value of x to the power of y

Math.pow(8, 2);

Math.sqrt()
Math.sqrt(x) returns the square root of x

Math.sqrt(64);

Math.abs()
Math.abs(x) returns the absolute (positive) value of x

Math.abs(-4.7);

Math.min() and Math.max()
Math.min() and Math.max() can be used to find the lowest or highest value in a list of arguments

Math.min(0, 150, 30, 20, -8, -200);

Math.max(0, 150, 30, 20, -8, -200);

Math.random()
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive)

Math.random();

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this:

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with id="intro"

const element = document.getElementById("intro");

If the element is found, the method will return the element as an object (in element).

If the element is not found, element will contain null.

Finding HTML Elements by Tag Name

This example finds all

elements

const element = document.getElementsByTagName("p");

This example finds the element with id="main", and then finds all

elements inside "main"

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use getElementsByClassName().

This example returns a list of all elements with class="intro".

const x = document.getElementsByClassName("intro");

Finding HTML Elements by CSS Selectors

The querySelector() Method

The Document method querySelector() returns the first Element within the document that matches the specified CSS selector, or group of CSS selectors. If no matches are found, null is returned.

The matching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of child nodes.

If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

Parameters

selectors

A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown.

Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a class or id attribute value is not a valid CSS identifier, then you must escape it before using it in a selector, either by calling CSS.escape() on the value, or using one of the techniques described in Escaping characters. See Escaping attribute values for an example.

<html>
<body>

<p class="demo"></p>

<script>
// Access a paragraph Element
const myPara = document.querySelector(".demo");

// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>

</body>
</html>

The querySelectorAll() Method

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

Parameters

selectors

A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown.

<html>
<body>

<p class="demo">One</p>
<p class="demo">Two</p>

<script>
// Access a paragraph Element
const myItems = document.querySelectorAll(".demo");

// Change the content of the Element
myItems[0].innerHTML = "First";
</script>

</body>
</html>

If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.

This example returns a list of all

elements with class="intro".

Common Mistakes

Using # in getElementById():
Wrong: "#demo"
Forgetting that querySelector() returns only the first match

References:

https://www.w3schools.com/Js/js_htmldom_elements.asp
https://www.w3schools.com/jS/js_math.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Software Development Life Cycle

Kamalesh AR — Tue, 30 Jun 2026 17:22:22 +0000

Today, I attended a training session on Software Development Life Cycle (SDLC). In this I learned about the SDLC, Phases of SDLC how it works in the projects and Companies with an example. Then experienced persons who are in the session they also shares their knowledge about this SDLC. That was a new thing for myself to gathering these type knowledge and information from them. In this session happens like interactive, differents opinions about the SDLC and informative things and discuss about the BRS(Business Requirements Specification),FRS(Functional Requirements Specification),SRS(Software Requirements Specification).This fully concentrate from requirements from client to develop final project based on their requirements complete the projects.

SDLC:

The software development lifecycle (SDLC) is the cost-effective and time-efficient process that development teams use to design and build high-quality software. The goal of SDLC is to minimize project risks through forward planning so that software meets customer expectations during production and beyond. This methodology outlines a series of steps that divide the software development process into tasks you can assign, complete, and measure.

Importance of SDLC:

Software development can be challenging to manage due to changing requirements, technology upgrades, and cross-functional collaboration. The software development lifecycle (SDLC) methodology provides a systematic management framework with specific deliverables at every stage of the software development process. As a result, all stakeholders agree on software development goals and requirements upfront and also have a plan to achieve those goals.

Here are some benefits of SDLC:

Increased visibility of the development process for all stakeholders involved
Efficient estimation, planning, and scheduling
Improved risk management and cost estimation
Systematic software delivery and better customer satisfaction

SDLC works:

The software development lifecycle (SDLC) outlines several tasks required to build a software application. The development process goes through several stages as developers add new features and fix bugs in the software.

The details of the SDLC process vary for different teams. However, we outline some common SDLC phases below.

Phases of SDLC

Planning
Design
Development
Testing
Deployment
Maintenance

Planning

The planning phase typically includes tasks like cost-benefit analysis, scheduling, resource estimation, and allocation. The development team collects requirements from several stakeholders such as customers, internal and external experts, and managers to create a software requirement specification document.

The document sets expectations and defines common goals that aid in project planning. The team estimates costs, creates a schedule, and has a detailed plan to achieve their goals.

Design

In the design phase, software engineers analyze requirements and identify the best solutions to create the software. For example, they may consider integrating pre-existing modules, make technology choices, and identify development tools. They will look at how to best integrate the new software into any existing IT infrastructure the organization may have.

Development

In the implementation phase, the development team codes the product. They analyze the requirements to identify smaller coding tasks they can do daily to achieve the final result.

Test

The development team combines automation and manual testing to check the software for bugs. Quality analysis includes testing the software for errors and checking if it meets customer requirements. Because many teams immediately test the code they write, the testing phase often runs parallel to the development phase.

Deploy

When teams develop software, they code and test on a different copy of the software than the one that the users have access to. The software that customers use is called production, while other copies are said to be in the build environment, or testing environment.

Having separate build and production environments ensures that customers can continue to use the software even while it is being changed or upgraded. The deployment phase includes several tasks to move the latest build copy to the production environment, such as packaging, environment configuration, and installation.

Maintain

In the maintenance phase, among other tasks, the team fixes bugs, resolves customer issues, and manages software changes. In addition, the team monitors overall system performance, security, and user experience to identify new ways to improve the existing software.

Real-time example:

"For example, if a client wants to build a food delivery application, the team first gathers all the requirements, such as user registration, restaurant search, cart, payment, and order tracking. Next, the project manager plans the budget, timeline, and team. Then, designers create the UI and database design. Developers write the frontend and backend code based on the design. After development, testers verify all features and report any bugs, which developers fix. Once the application passes testing, it is deployed by devops team to the production server so users can access it. Finally, during the maintenance phase, developers fix issues, improve performance, and add new features based on user feedback."

SDLC models: (TBD)

Waterfall

The waterfall model arranges all the phases sequentially so that each new phase depends on the outcome of the previous phase. Conceptually, the design flows from one phase down to the next, like that of a waterfall.

Pros and cons:

The waterfall model provides discipline to project management and gives a tangible output at the end of each phase. However, there is little room for change once a phase is considered complete, as changes can affect the software's delivery time, cost, and quality. Therefore, the model is most suitable for small software development projects, where tasks are easy to arrange and manage and requirements can be pre-defined accurately.

Iterative:

The iterative process suggests that teams begin software development with a small subset of requirements. Then, they iteratively enhance versions over time until the complete software is ready for production. The team produces a new software version at the end of each iteration.

Pros and cons

It’s easy to identify and manage risks, as requirements can change between iterations. However, repeated cycles could lead to scope change and underestimation of resources.

Spiral:

The spiral model combines the iterative model's small repeated cycles with the waterfall model's linear sequential flow to prioritize risk analysis. You can use the spiral model to ensure software's gradual release and improvement by building prototypes at each phase.

Pros and cons

The spiral model is suitable for large and complex projects that require frequent changes. However, it can be expensive for smaller projects with a limited scope.

Agile:

The agile model arranges the SDLC phases into several development cycles. The team iterates through the phases rapidly, delivering only small, incremental software changes in each cycle. They continuously evaluate requirements, plans, and results so that they can respond quickly to change. The agile model is both iterative and incremental, making it more efficient than other process models.

Pros and cons

Rapid development cycles help teams identify and address issues in complex projects early on and before they become significant problems. They can also engage customers and stakeholders to obtain feedback throughout the project lifecycle. However, overreliance on customer feedback could lead to excessive scope changes or end the project midway.

RAD Model:

The RAD (Rapid Application Development) Model is a software development methodology that focuses on fast development and frequent releases of working software. It emphasizes iterative development, quick user feedback, and flexibility, allowing changes to be easily incorporated during the development process. Unlike traditional models such as the Waterfall Model, RAD adapts quickly to changing requirements and user needs.

Pros and cons

The RAD model enables faster development, early customer feedback, better quality, easy progress tracking, and flexibility to accommodate changing requirements. It requires skilled developers, reusable components, continuous customer involvement, and strong team coordination. It is also not suitable for every project and can be expensive for small applications.

DevOps and the SDLC:

DevOps is a software development methodology that combines and automates the work of both software development and IT operations teams. The DevOps lifecycle has its own steps, which are similar to the steps of the SDLC. But DevOps reconfigures the steps of the SDLC to create a continuous cycle for software development and improvement.

The core principles of a DevOps approach are collaboration, automation and continuous integration and continuous delivery (CI/CD). Because DevOps addresses the full software development process, it might be considered a software development lifecycle in its own right.

But DevOps is also larger than this, encompassing a cultural and organizational shift toward shared responsibility and collaboration. Crucially, DevOps is not a single model, but a combination of practices, tools and cultural philosophies.

DevOps addresses the rigidity of the SDLC by making each phase of the software development process continuous throughout the project. Instead of being limited to discrete steps, planning, coding, testing, deploying, maintaining and monitoring all continue throughout a product’s lifecycle. The result is a continuous delivery pipeline in which software is improved through frequent updates.

DevSecOps and the SDLC:

DevSecOps, sometimes called “secure DevOps,” integrates automated security testing and security practices into the DevOps model. Where traditional software development treats security testing as its own phase, DevSecOps incorporates security considerations into every phase of the SDLC.

By threading security tests such as code reviews and penetration testing throughout the development lifecycle, teams can avoid some delays arising from factors such as vulnerabilities that are identified late in the process. They can address risk management issues earlier, create more secure programs, accelerate vulnerability remediation and deliver more cost-effective software.

Bug Bounty:

A bug bounty program is a security program where companies reward ethical hackers for finding and reporting security vulnerabilities before attackers can exploit them. This helps organizations improve application security and protect user data.

Bug bounty programs reward ethical hackers who identify and responsibly disclose vulnerabilities to the application’s developer, before attackers can exploit them. By engaging a diverse, global community of experts, organizations continuously monitor and test their attack surface, uncover hard-to-find vulnerabilities, reduce risk, and build customer trust. Bug bounty programs allow companies to leverage the hacker community to improve their systems’ security posture over time.

Conclusion:

The above defined topics are i learned from my session and now i study above the SDLC and how its works. This session is helped me understand that successful software development is not just about writing code—it requires proper planning, collaboration, documentation, testing, and continuous improvement.Overall these are my today learning about the SDLC to experience the learning is strengthened my knowledge of software development processes.

The images above are my handwritten notes taken during the live SDLC training session. I referred to these notes while writing this blog to summarize what I learned and to document my understanding of the concepts discussed during the session.

References:

https://aws.amazon.com/what-is/sdlc/
https://www.geeksforgeeks.org/software-engineering/software-development-life-cycle-sdlc/
https://www.geeksforgeeks.org/software-engineering/software-engineering-rapid-application-development-model-rad/
https://www.hackerone.com/bug-bounty-programs

Javascript DOM mini projects

Kamalesh AR — Mon, 29 Jun 2026 16:54:42 +0000

My JavaScript Practice Journey: 5 Beginner-Friendly DOM Projects

Introduction

As part of my JavaScript learning journey, I completed five beginner-friendly projects that helped me understand the fundamentals of DOM manipulation, event handling, functions, and user interaction. These projects allowed me to apply JavaScript concepts in practical scenarios and build confidence in creating interactive web applications.

Technologies Used

HTML5
CSS3
JavaScript (ES6)

1. Change Text by Clicking a Button

Overview

This project changes the text of a heading or paragraph whenever the user clicks a button.

Concepts Practiced

DOM Manipulation
getElementById()
Functions
onclick Event
innerText

What I Learned

Selecting HTML elements using JavaScript.
Updating text dynamically.
Handling button click events.

CODE:

<body>
    <h1 id="name">Kamalesh😎</h1>
    <p>Click the button to change text</p>
    <button onclick="changename()">Change Text</button>
    <script>
        document.getElementById('name');
        function changename(){
            if(document.getElementById('name').innerText== "Kamalesh😎"){
                document.getElementById('name').innerText= "Vignesh🐒";
            }
            else{
                document.getElementById('name').innerText= "Kamalesh😎";
            }
        }

    </script>
</body>

Output:

Text before change:

Text after change:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/textchange.html

2. Light On/Off Toggle

Overview

In this project, I created a light bulb switch. Clicking the buttons changes the bulb image between ON and OFF states.

Concepts Practiced

DOM Manipulation
Image Manipulation
Functions
src Attribute
Button Events

What I Learned

How to change image sources dynamically.
Creating interactive visual effects.
Understanding how JavaScript controls HTML elements.

CODE:

<body>
    <img id="bulb" src="bulb light.jpg" alt="img is not here">
    <button onclick="on()" id="btn">ON</button>

    <script>
        let bulb = document.getElementById("bulb");
        let btn = document.getElementById("btn")

        function on(){
            if(btn.innerText=="ON")
            {
                bulb.src = "bulb2.jpg"
                btn.innerText="OFF"
                btn.style.backgroundColor="firebrick";
                btn.style.border="2px solid rgb(98, 18, 18)";
            }
            else{
                bulb.src = "bulb light.jpg"
                btn.innerText="ON"
                 btn.style.backgroundColor="rgb(94, 178, 34)";
                btn.style.border="2px solid rgb(31, 98, 18)";
            }
        }
    </script>
</body>

Output:

Before light ON

After light ON

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/light.html

3. Counter App

Overview

The Counter App increases, decreases, or resets a number using different buttons.

Concepts Practiced

Variables
Functions
Arithmetic Operators
DOM Manipulation
Button Click Events

What I Learned

Updating values dynamically.
Using variables to store data.
Performing mathematical operations with JavaScript.

CODE:

<body>
    <div id="container">
        <h1>Counter App</h1>
        <div id="core">
            <button id="sub" onclick="sub()">-</button>
            <span id="counter">0</span>
            <button id="add" onclick="add()">+</button>
        </div>
        <button id="reset" onclick="reset()">Reset</button>
    </div>
    <script>
        let counts = document.getElementById("counter");
        let count = counts.innerText;
        function add(){
            count++;
            counts.innerText=count;
        }
        function sub(){
            if(count>0){
                count--;
                counts.innerText=count;
            }
        }
        function reset(){
            count=0;
            counts.innerText=count;
        }
    </script>
</body>

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/counterapp.html

4. Live Character Counter

Overview

The Live Character Counter displays the number of characters entered into a textarea in real time. Every time the user types, deletes, or pastes text, the count updates automatically.

Concepts Practiced

DOM Manipulation
getElementById()
oninput Event
value
length
innerText

What I Learned

Responding to user input instantly.
Counting characters using the length property.
Updating webpage content dynamically.

CODE:

<body>
    <div class="container">
        <h2>Live Character Count</h2>
        <textarea name="" id="text" placeholder="Enter your text here" oninput="countCharacters()"></textarea>

        <p>Count characters:<span id="count">0</span></p>

    </div>

    <script>

        const textarea = document.getElementById("text");
        const counts = document.getElementById("count");

        function countCharacters() {
            count.innerText = textarea.value.replace(/\s/g, "").length;
        }


    </script>

</body>

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/charactercount.html

5. Show/Hide Password

Overview

This project allows users to show or hide the password entered in an input field. Clicking the button toggles the password visibility.

Concepts Practiced

DOM Manipulation
Functions
Conditional Statements (if...else)
Input type Property
innerText
Button Events

What I Learned

Changing element properties dynamically.
Using conditional statements effectively.
Improving user experience with interactive features.

CODE:

<body>
    <div class="container">
        <h2>Show and Hide Password</h2>

        <input type="password" id="password" placeholder="Enter Password">

        <!-- <br><br> -->
        <button onclick="Password()">Show</button>


    </div>

    <script>
        let password = document.getElementById("password");
        function Password() {
            if (password.type === "password") {
                password.type = "text";
            } else {
                password.type = "password";
            }
        }
    </script>
</body>

Output:

Hide Password:

Show Password:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/hidePassword.html

JavaScript Concepts I Practiced

These projects helped me strengthen my understanding of:

Variables (let, const)
Functions
DOM Manipulation
Event Handling
Conditional Statements
getElementById()
innerText
value
length
Input type Property
Image src Property
Arithmetic Operators

Skills Improved

By completing these projects, I improved my ability to:

Build interactive web pages.
Connect HTML, CSS, and JavaScript.
Write clean and reusable JavaScript functions.
Understand how user actions trigger JavaScript events.
Solve simple programming problems using DOM manipulation.

Conclusion

These five beginner projects have given me a strong foundation in JavaScript and front-end development. Each project introduced a new concept while reinforcing previous topics, making the learning process understandable and practicable.

I will continue building more JavaScript projects to improve my problem-solving skills, deepen my understanding of the DOM, and prepare myself for real-world web development and technical interviews.

Projects Completed:

Change Text by Clicking a Button
Light On/Off Toggle
Counter App
Live Character Counter
Show/Hide Password

Every project is another step toward becoming a better JavaScript developer. More projects coming soon!

References:

https://www.w3schools.com/tools/tool_char_counter.php

DOM

Kamalesh AR — Sun, 28 Jun 2026 10:26:32 +0000

Definition of DOM:

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Concepts and usage:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM stands for Document Object Model. It is an interface that allows JavaScript to access and manipulate HTML elements dynamically.

Example : Change Text

HTML

<h1 id="title">Hello</h1>

<button onclick="changeText()">
Change
</button>

JavaScript

function changeText() {
    document.getElementById("title").innerHTML = "Welcome!";
}

Before clicking

Hello

After clicking

Welcome!

getElementById()

getElementById() is a DOM method used to find and access an HTML element by its id.
getElementById() is a DOM method that returns the HTML element whose id matches the given value.

Syntax

document.getElementById("idName");

document → Represents the entire HTML page.
getElementById() → Searches for an element by its id.
"idName" → The value of the id attribute in the HTML.

getElementById() is a DOM method that selects a single HTML element using its unique id. It returns the element object, allowing JavaScript to read or modify its content, style, or attributes.

Remember: getElementById() only finds the element. What you do after finding it (such as changing innerHTML, style, or value) determines the action performed on that element.

innerText

innerText is a DOM property used to get or set the visible text inside an HTML element.
innerText is a property that returns or changes the visible text content of an HTML element.

Syntax

element.innerText = "New Text";

Example 1: Get Text
HTML

<h1 id="title">Hello World</h1>

JavaScript

let text = document.getElementById("title").innerText;

console.log(text);

Output

Hello World

Here document.getElementById("title") → Finds the

element.
.innerText → Reads the visible text inside it.
Example 2: Change Text
HTML

<h1 id="title">Hello</h1>

JavaScript

document.getElementById("title").innerText = "Welcome";

Before

Hello

After

Welcome

innerText → Reads or changes the visible text inside that element.

References

https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/html/javascript-html-dom/

Array Search Methods in JavaScript

Kamalesh AR — Thu, 25 Jun 2026 17:28:25 +0000

Array Search Methods are built-in JavaScript methods used to search for elements in an array. They help us check whether an element exists, find its position (index), or retrieve elements that satisfy a condition.

1. indexOf()

Returns the first index of the specified element. If the element is not found, it returns -1.

Syntax:

array.indexOf(element)

Example:

const fruits = ["Apple", "Banana", "Mango", "Banana"];

console.log(fruits.indexOf("Banana"));

Output:

2. lastIndexOf()

Returns the last index of the specified element. If not found, it returns -1.

Example:

const fruits = ["Apple", "Banana", "Mango", "Banana"];

console.log(fruits.lastIndexOf("Banana"));

Output:

3. includes()

Checks whether an element exists in an array. It returns true or false.

Example:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.includes("Mango"));
console.log(fruits.includes("Orange"));

Output:

true
false

4. find()

Returns the first element that satisfies the given condition. If no element matches, it returns undefined.

Example:

const numbers = [5, 12, 8, 20];

const result = numbers.find(num => num > 10);

console.log(result);

Output:

Explanation

5 > 10 (Wrong)
12 > 10 → Stops and returns 12 (correct)

5. findIndex()

Returns the index of the first element that satisfies the condition. If none match, it returns -1.

Example:

const numbers = [5, 12, 8, 20];

const index = numbers.findIndex(num => num > 10);

console.log(index);

Output:

6. findLast()

Returns the last element that satisfies the given condition.

Example:

const numbers = [5, 12, 8, 20];

const result = numbers.findLast(num => num > 10);

console.log(result);

Output:

Explanation

Search starts from the end:

20 > 10 → Returns 20

7. findLastIndex()

Returns the index of the last element that satisfies the condition.

Example:

const numbers = [5, 12, 8, 20];

const index = numbers.findLastIndex(num => num > 10);

console.log(index);

Output:

Easy Way to Remember

indexOf() → First index of a value.
lastIndexOf() → Last index of a value.
includes() → Checks if a value exists.
find() → First element matching a condition.
findIndex() → Index of the first matching element.
findLast() → Last element matching a condition.
findLastIndex() → Index of the last matching element.

Reference:

https://www.w3schools.com/js/js_array_search.asp