DEV Community: Raja B

FOSS

Raja B — Tue, 28 Jul 2026 08:13:45 +0000

TOSS Conf 2026

I attended TOSSConf'26 for three days — 23rd, 24th, and 25th.

* Day 1: Hackathon
* Day 2: Workshops
* Day 3: Open Source Communities

Overall, it was a really great experience for me. 

I met many new people and had the opportunity 
to listen to their experiences. 

I could not understand everything that was discussed, 

but I understood some of the concepts and learned many new things.

I also spoke with many new people. 

Everyone responded to me very kindly and positively. 

The members of the open-source communities were also 
very friendly and supportive.

Many of the people who attended 
the event shared their experiences, 
especially as beginners and as experienced contributors. 

I went there to learn, listen, and gain knowledge, 
and I came back with a lot of new experiences 
and inspiration.

It was a great learning experience, 

and I am happy that I attended TOSSConf'26.

Basic Knowledge

23 ஜூலை 2026

NEET / தேர்வு வினாத்தாள் கசிவு தொடர்பான பிரச்சினை மற்றும் மாணவர் போராட்டங்கள் முக்கிய செய்தியாக இருந்தன

24 July 2026

$1 ≈ ₹96.70 → ரூபாய் மதிப்பு டாலருக்கு எதிராக சரிந்தது

React

Raja B — Sun, 26 Jul 2026 15:18:23 +0000

API

Raja B — Sun, 26 Jul 2026 15:06:30 +0000

API (Application Programming Interface) and how a React frontend communicates with a Java/Spring Boot backend and a database.

Example: Student Management App

Suppose your React page has a student list

1. GET → Get student data

React displays:

ID   Name    Course
1    Raja    Java
2    Arun    Python

2. POST → Add new student

{
  "name": "Raja",
  "course": "Java"
}

3. PUT → Update student

4. DELETE → Delete student

API is like a bridge between React and Spring Boot

Promise

Raja B — Sun, 26 Jul 2026 14:51:57 +0000

A Promise in JavaScript is an object that represents the future result of an asynchronous operation, like fetching data, waiting for a timer, or reading a file.

It can be in one of three states: pending, fulfilled, or rejected.

new Promise(...) creates a new promise
res means resolve, rej means reject
rej() makes the promise fail
.then() runs only when the promise is fulfilled
.catch() runs when the promise is rejected

Analysis() represents an analysis operation that takes 3 seconds. After the analysis finishes, res() tells JavaScript: "The work is completed successfully."
This waits for 3000 milliseconds = 3 seconds.

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises...

Math JS

Raja B — Sun, 26 Jul 2026 13:08:38 +0000

In JavaScript, Math is a built-in object that gives you common math constants

And functions like rounding, square root, power, and random numbers.

It is not a normal object you create with new;

you use it directly like Math.PI or Math.sqrt(25)

Simple idea

Math.PI gives the value of pi
Math.round(4.6) gives 5
Math.floor(4.9) gives 4
Math.ceil(4.1) gives 5
Math.sqrt(25) gives 5
Math.pow(2, 3) gives 8
Math.random() gives a random decimal between 0 and 1

Example

Reference:

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

SDLC

Raja B — Tue, 21 Jul 2026 08:08:27 +0000

SDLC means Software Development Life Cycle. It is a step-by-step process used to plan, build, test, deploy, and maintain software so the final product is reliable and meets user needs

Main phases

Planning / Requirement analysis: understand what the software should do and what users need
Design: decide the structure, architecture, database, and UI flow
Development: write the actual code
Testing: find and fix bugs before release
Deployment: release the software to users
Maintenance: fix issues, improve features, and update the software over time

Simple meaning

You can think of SDLC like building a house: first you plan, then you draw the design, then you build, inspect, hand it over, and keep repairing or improving it later

Explanation

SDLC na software-a step by step-a develop panna use pannura process. Requirements collect pannitu, design panni, code ezhuthi, test panni, deploy panni, apram maintain pannuvanga

Why it matters

SDLC helps teams work in an organized way, reduce mistakes, and deliver software on time with better quality

DOM

Raja B — Tue, 21 Jul 2026 07:54:40 +0000

The DOM in JavaScript means the Document Object Model. It is the browser’s tree-like representation of an HTML page, and JavaScript uses it to read, change, add, or remove elements on the page

Simple idea

Think of HTML as the page structure, and the DOM as the live version of that page inside the browser. JavaScript talks to the DOM to make websites interactive, such as changing text, styles, or reacting to clicks

<p id="demo">Hello</p>
<button onclick="changeText()">Click</button>

<script>
function changeText() {
  document.getElementById("demo").innerHTML = "Hi Raja!";
}
</script>

Here, document.getElementById("demo") finds the paragraph, and innerHTML changes its content

What you can do with DOM

Select elements
Change text or HTML
Update CSS styles
Add or remove elements
Handle events like click, input, or submit

Reference:

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

React

Raja B — Tue, 14 Jul 2026 07:44:20 +0000

What is React?

React is a JavaScript library used to build user interfaces (UI) for websites and web applications.

It helps developers create fast, interactive, and reusable web pages.

Created by: Meta (Facebook)

Example websites that use React:

Facebook
Instagram
Netflix
WhatsApp Web

Why do we use React?

Without React:

We write lots of JavaScript
Updating the page is difficult
Code becomes large

With React:

Code is shorter
Easy to manage
Faster updates
Reuse the same code many times

What is a Component?

A Component is a small piece of a webpage

Think of a webpage like a house

House → Webpage
Room → Component

Example:

Web Page

├── Header
├── Menu
├── Profile
├── Products
├── Footer

Each part is a component

Why Components?

Instead of writing the same code again and again, we create it once and reuse it

Example:

<Button />

<Button />

<Button />

One Button component can be used many times

CODE on JVM

Raja B — Sun, 12 Jul 2026 07:50:49 +0000

My Experience at Code on JVM Chennai

Recently, I attended the Code on JVM Chennai meetup. It was a new experience for me, and I learned many valuable things from the speakers and the community.

The event featured three inspiring speakers:

Hareesh Rajendran – Founder & CEO of Hayan Tech
Agnel John – Founder & CEO of Error Makes Clever
Kalaivani Mohan – Software Engineer at IBM

Hareesh Rajendran – DSA in Production Speak
Agnel John – Uncovering Ideas Worth Building in the AI Era Speak
Kalaivani Mohan – Streaming Large File Downloads in Java

Networking and Learning:

One of the best parts of the meetup was the opportunity to interact with other developers
I met people from different backgrounds, listened to their experiences, and had meaningful conversations
This helped me improve my confidence and understand the importance of networking

I Learned

his meetup helped me realize that technical knowledge alone is not enough
Communication, networking, and continuous learning are equally important
I still have a lot to learn, but every meetup teaches me something new
```
      **Thank you, Code on JVM Chennai!!!**
```

learn JavaScript DOM events, CSS hover effects, and random value generation Next part

Raja B — Thu, 09 Jul 2026 07:58:58 +0000

const btn = document.querySelector("#emoji");

const emojis = [
  "😆",
  "😅",
  "🤣",
  "😂",
  "😀",
  "🤑",
  "🤨",
  "🙂",
  "😊",
  "😗",
  "😛",
  "😏",
  "🤥",
  "😴",
  "🥺",
  "😧",
  "😇",
  "😳",
  "🙃",
  "🥴",
  "🧐",
  "🤨",
  "😒",
  "🤔",
  "🤭",
  "🥰",
  "🤐",
  "😄",
  "🤔",
  "🤪",
  "🥲",
  "😃",
  "😁",
  "😬",
];

btn.addEventListener("mouseover", () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});

JavaScript

const btn = document.querySelector("#emoji");

document = the webpage
querySelector() = finds an element

It finds

<div id="emoji">

and stores it in btn

Think of it like:

Web Page

      ↓

Find

<div id="emoji">

↓

btn

const emojis = [
 "😆",
 "😅",
 "🤣",
 ...
];

This is an array

It stores many emojis

Index

0 😆

1 😅

2 🤣

3 😂

4 😀

5 🥰

...

btn.addEventListener("mouseover", () => {

This waits for an event

mouseover means:

"When the mouse enters this element"

Mouse

↓

😂

↓

Run JavaScript

Math.random()

Generates a random decimal number between 0 (inclusive) and 1 (exclusive)

Example:

It changes every time

Math.random() * emojis.length

Suppose there are 35 emojis

Then:

0.45 × 35

=

15.75

0.92 × 35

=

32.2

Math.floor()

Removes the decimal part

Example:

So you get a valid array index

emojis[Math.floor(Math.random() * emojis.length)]

This picks a random emoji from the array

Example:

Random number

↓

12

↓

emojis[12]

↓

🤥

Next time:

Random

↓

25

↓

🥰

btn.innerText =

Changes the text inside the <div>

Initially:

😂

After hover:

🥰

Again:

😄

Flow of the program

Page Opens
      │
      ▼
Show 😂
      │
      ▼
Mouse moves over emoji
      │
      ▼
mouseover event fires
      │
      ▼
Generate random number
      │
      ▼
Pick random emoji
      │
      ▼
Replace current emoji
      │
      ▼
CSS hover effect
      │
      ├── scale(1.3)
      └── grayscale(0)

Output:

https://raja000999-project-6ae1d0.gitlab.io/emoji.html

                   கேள்வி கேளுங்கள்???

Do you have any questions??? or Feel free to ask questions???

learn JavaScript DOM events, CSS hover effects, and random value generation

Raja B — Wed, 08 Jul 2026 17:03:12 +0000

What does this project do?

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
content="width=device-width, 
initial-scale=1.0" />
    <title>Random Emojy</title>
    <link rel="stylesheet" href="styleEmoji.css" />
</head>

<body>
    <div id="emoji">😂</div>

    <script src="appEmoji.js"></script>

</body>

</html>

<div id="emoji">😂</div>

This creates one emoji on the webpage.

Page

     😂

The id="emoji" is used so JavaScript and CSS can find this element

CSS

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
}

#emoji {
  font-size: 10rem;
  filter: grayscale(1);
  cursor: pointer;
  transition-property: transform, filter;
  transition-duration: 200ms;
}

#emoji:hover {
  transform: scale(1.3);
  filter: grayscale(0);
}

body 
{
  height: 100vh;
}

means:

100 = Full height
vh = View Height

So the body occupies the whole browser window

display: flex;

Makes the body a Flexbox container

Without Flexbox

😂

With Flexbox

        😂

justify-content: center;

Centers the content vertically

align-items: center;

Centers horizontally

Result:

-------------------------
|                       |
|                       |
|          😂           |
|                       |
|                       |
-------------------------

font-size: 10rem;

Makes the emoji very large

😂

↓

😂😂😂 (Large size)

filter: grayscale(1);

Makes the emoji appear without color (grayscale)

😀

↓

⚪ Gray-looking emoji

cursor: pointer;

Changes the mouse cursor

Without:

Arrow

With:

☝

It tells the user the element is interactive

transition-duration: 200ms;

Instead of changing instantly,

Small

↓

Large

it changes smoothly

Hover CSS

#emoji:hover
 {
    transform: scale(1.3);
}

When the mouse is over the emoji,

😂

↓

😆

it becomes 30% larger

scale(1.3) means:

Original = 100%

↓

130%

filter: grayscale(0);

Removes the grayscale effect

Before:

Gray Emoji

After


😀 Full Color

                Continue in the next part...

Closures JS

Raja B — Wed, 08 Jul 2026 05:51:51 +0000

A closure is a feature in JavaScript where an inner function remembers and can access the variables of its outer function even after the outer function has finished executing

Why do we need Closures?

Closures help you:

Keep data private
Store values between function calls
Avoid using global variables
Create reusable functions

What happens?

const greet = outer();

outer() runs
message = "Hello"is created
inner() is returned

Normally, when outer() finishes, its variables should disappear

But they don't!

Because inner() still needs message

So JavaScript keeps message in memory

Then:
greet();

prints:

Hello

This is called a closure