DEV Community: Raja B

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

CODE on JVM

Raja B — Sat, 27 Jun 2026 17:36:20 +0000

My Experience Java Community Event – Java June

Today, I attended the Java June Community Event 2026 at Contentstack, Velachery, Chennai. It was a wonderful learning experience, and I really enjoyed being part of the Java community

Around 60 people attended the event, including both students and working professionals. It was a great opportunity to meet new people, interact with developers, and learn from experienced speakers

One of the speakers was Mahati ChandraMohan, a Senior Software Engineer at PayPal with 14 years of experience. She shared valuable insights about software development, career growth, and the mindset every programmer should have. Her session was inspiring and practical

Another speaker, Jasmine (Senior Developer), explained how Java and Artificial Intelligence (AI) work together in modern software development. The session helped me understand how Java is being used in AI-related applications.

One of the most enjoyable parts of the event was the Java Puzzle Quiz. The organizers asked Java-related questions, and participants answered them. It was fun, interactive, and helped improve our Java knowledge

We also had a group discussion where each team had 3 to 5 members. We discussed programming questions, shared ideas, and learned from each other's experiences. It was a great way to improve communication and problem-solving skills

The organizers also gave small gifts to participants who answered questions correctly. More importantly, they motivated everyone to keep learning and growing in their programming journey

Overall, this event gave me:

New Java knowledge
Better understanding of Java and AI
Networking opportunities with students and professionals
Confidence to participate in technical discussions
Motivation to continue learning

Interview Question

Raja B — Thu, 25 Jun 2026 16:54:45 +0000

In JavaScript, var, let, and const are all used to declare variables, but they differ in scope, reassignment, redeclaration, and hoisting behavior:

1. Scope

var: Function-scoped — accessible anywhere inside the function it's declared (or globally if outside).
let & const: Block-scoped — only accessible inside the { } block (like inside an if, for, or function).

function test() {
  if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
  console.log(a); //  1 (works)
  console.log(b); //  Error: b is not defined
  console.log(c); //  Error: c is not defined
}
test();

2. Reassignment

let: You can change the value later
const: You cannot change the value after first assignment (must be initialized immediately)

let x = 5;
x = 10; //  OK

const y = 5;
y = 10; //  Error: Assignment to constant variable

Note: For objects with const, you can modify their properties (since the reference doesn't change), but you can't reassign the whole object.

3. Redeclaration

var: You can declare the same variable multiple times
let & const: Redeclaration causes an error

var a = 1;
var a = 2; //  OK

let b = 1;
let b = 2; //  Error: Identifier 'b' has already been declared

4. Hoisting

All three are "hoisted" (moved to top), but:

var: Initialized as undefined → you can access before declaration (gets undefined)
let & const: Not initialized → accessing before declaration throws a ReferenceError (they're in a "temporal dead zone")

console.log(a); // undefined
var a = 5;

console.log(b); //  ReferenceError
let b = 5;

Primitive types

In JavaScript, primitive data types are the simplest kinds of values. They are not objects, and they are immutable, meaning their value cannot be changed directly

JavaScript has 7 primitive data types: string, number, boolean, null, undefined, bigint, and symbol

String: text
Number: numbers
Boolean: true/false
Null: nothing on purpose(intentional empty value)
Undefined: not yet given a value(value not assigned yet)
BigInt: very big number
Symbol: unique id

let name = "Raja";
let age = 27;
let isStudent = true;
let result = null;
let score;
let big = 12345678901234567890n;
let id = Symbol("id");

One important point: primitive values are copied by value, so if you assign one primitive variable to another, the new variable gets its own copy

== and === are different in JavaScript

== checks value only after converting types if needed
=== checks both value and type without converting types

5 == "5"    // true
5 === "5"   // false

0 == false  // true
0 === false  // false

null == undefined   // true
null === undefined  // false

JavaScript Object

Raja B — Thu, 25 Jun 2026 16:54:14 +0000

What is an Object?

A JavaScript object is a collection of properties (key-value pairs) that stores related data and functions

Simple: Like a real object (e.g., a car)
has properties (color, model, speed)
and
actions (drive, stop)

Basic Structure:

const person = {
    name: "Raja",      
    age: 27,           
    city: "Madurai"    
};

Syntax breakdown:


- {} = curly braces (object literal)

- key: value = property (key-value pair)

- : = separates key and value

- , = separates properties

Key Concepts

1. Properties (Key-Value Pairs)

Term	Meaning
Key	Property name (e.g., name, age)
Value	Property data (e.g., "Raja", 27)
Property	Full key-value pair together

Example:

const student = {
    name: "Bala",    // name = key, "Bala" = value
    roll: 101,       // roll = key, 101 = value
    passed: true     // passed = key, true = value
};

Values can be ANY data type:

const data = {
    string: "hello",      // string
    number: 42,           // number
    boolean: true,        // boolean
    null: null,           // null
    array: [1, 2, 3],     // array
    object: { x: 10 },    // another object
    function: function() { console.log("hi"); }  // function
};

2. Methods (Functions as Properties)

When a property value is a function, it's called a method

Example:

Creating Objects (6 Ways)

1. Object Literal (Best/Most Common)

const person = {
    name: "Raja",
    age: 20
};

Best for: Readability, simplicity, speed

2. Using new Object()

const person = new Object();
person.name = "Raja";
person.age = 20;

3. Object Constructor

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const p1 = new Person("Raja", 20);

4. Using Object.create()

const personTemplate = {
    greet() { console.log("Hello!"); }
};

const person = Object.create(personTemplate);
person.name = "Raja";

5. Using Object.assign()

const person = Object.assign(
    {}, 
    { name: "Raja" }, 
    { age: 20 }
);

6. Using Object.fromEntries()

const person = Object.fromEntries([
    ["name", "Raja"],
    ["age", 20]
]);

Reference:

The History Of Programming

Raja B — Thu, 25 Jun 2026 16:52:32 +0000

1. Before Computers

Humans wanted machines to perform calculations automatically

1642 – Blaise Pascal built a mechanical calculator called the Pascaline
1673 – Gottfried Wilhelm Leibniz improved mechanical calculation machines

2. Programmable Machine Idea

1804 – Joseph Marie Jacquard created the Jacquard Loom
It used punched cards to control weaving patterns
This introduced the idea that a machine could follow instructions

3. Early Computer Concept

1830s – Charles Babbage designed the Analytical Engine
It was a general-purpose mechanical computer concept
It had memory, processing, and input/output ideas similar to modern computers

4. First Programmer

1843 – Ada Lovelace wrote detailed instructions (algorithms) for the Analytical Engine
She realized a machine could do more than arithmetic
Because of her notes, she is often called the first programmer

5. Foundations of Computer Science

1936 – Alan Turing proposed the Turing Machine
He showed how a machine could follow instructions to solve problems
This became a foundation of modern computing

6. First Modern Programming Languages

1957 – John Backus created FORTRAN
One of the first successful high-level programming languages

7. Popular Languages

1972 – Dennis Ritchie created C
1985 – Bjarne Stroustrup created C++
1991 – Guido van Rossum created Python
1995 – James Gosling created Java
1995 – Brendan Eich created JavaScript

Simple Chain

Mathematics & Logic
⬇️
Jacquard Loom (Punch Cards)
⬇️
Charles Babbage (Computer Concept)
⬇️
Ada Lovelace (First Algorithm for a Computer)
⬇️
Alan Turing (Theory of Computation)
⬇️
FORTRAN, C, C++, Java, Python, JavaScript
⬇️
Modern Software and Apps

My opinion

ChatGPT gives answers when questions are asked. But sometimes the origin of an answer may not be known.

We can think of three possibilities:

Nobody knows who originally created or discovered it
Someone may have intentionally created it and wanted others to know about it
Someone may have wanted to hide or conceal its true origin

"கேள்வி கேட்க பழகு" → "Get used to asking questions."

"வரலாறு முக்கியம் அமைச்சரே!" "History matters, Minister!"

JavaScript Synchronous and Asynchronous

Raja B — Tue, 16 Jun 2026 15:31:06 +0000

Definition:

Type	Simple Meaning
Synchronous	Code runs one after another - each task waits for previous to finish
Asynchronous	Code runs independently - tasks don't block other code while waiting

Synchronous: "Wait for me to finish before you start" [blocking]

Asynchronous: "You start while I wait - call me back when done" [non-blocking]

1. Synchronous JavaScript (Normal/Default)

How it works:

Code executes line by line in order
Each statement waits for previous one to complete
Blocks execution until task finishes

Example:

Characteristics:

Feature	Description
Execution	Fixed sequence
Blocking	Yes - blocks other code
Complexity	Simple, easy to understand
Speed	Slower for time-consuming tasks
Best for	Simple, sequential tasks

2. Asynchronous JavaScript (Modern)

How it works:

Task starts in background
Code continues without waiting
Gets callback when task completes

Example (Non-blocking):

Characteristics:

Feature	Description
Execution	Tasks run independently
Blocking	No - non-blocking
Complexity	More complex (callbacks, promises)
Speed	Faster for slow operations
Best for	API calls, timers, file operations

Asynchronous Patterns in JavaScript

1. Callbacks (Old way)

Callback: Function that runs later - "calls you back" when done

2. Promises (Modern way)

Promise: Object representing async operation completion

States: pending → fulfilled or rejected

3. async/await (Best way - clean)

async: Function returns Promise
await: Waits for Promise (but doesn't block!)

Important Points

JavaScript is Synchronous by Default

2.JavaScript is Single-Threaded

Only 1 Call Stack

Executes one thing at a time

3.But Async Makes It Concurrent

Event Loop + Web APIs enable multiple tasks

4.Common Async Operations

Operation	Async Method
Timer	setTimeout()
API Call	fetch()
File Read	readFile()
Events	addEventListener()

Summary

Question	Answer
What is sync?	Code runs one after another
What is async?	Code runs independently, non-blocking
Which blocks?	Sync blocks, async doesn't
Default in JS?	Synchronous
How async works?	Event Loop + Web APIs + Callback Queue
Best async pattern?	async/await (clean code)

Reference:

JavaScript Scope: Block Scope, Global Scope & Function Scope

Raja B — Tue, 16 Jun 2026 14:32:06 +0000

Scope = where a variable is accessible (where you can use it)

1.Global Scope

Definition:

Variables declared outside any function or block have global scope

Example:

Problem: Global variables can be changed from anywhere → bugs!

2.Function Scope (Local Scope)

Definition:

Variables declared inside a function have function scope. They are only accessible inside that function

Example:

3.Block Scope(ES6 - Modern JavaScript)

Definition:

Variables declared with let or const inside a block {} have block scope. They are only accessible inside that block

What is a Block?

Any code inside curly braces {}:

if statements
for loops
while loops
Standalone blocks {}

Example:

Key Takeaways:

Global = accessible everywhere (declare outside functions)
Function = only inside function (declare inside function() {})
Block = only inside {} (declare with let/const inside blocks)
var = function scope (NOT block scope)

5.let/const = block scope (modern, preferred)

Process: A running program that has its own memory and resources — like the WhatsApp application

Thread: A smaller part inside a process that shares the same memory — like WhatsApp downloading messages, playing videos, and sending photos at the same time

Thread = Lightweight process

Uses shared memory
Faster to create and manage than a process
Helps perform multiple tasks concurrently

Simple Example:

Process: WhatsApp

Threads inside WhatsApp:

Message receiving thread
Photo sending thread
Video playing thread
Notification thread

One process can contain multiple threads

Reference:

ILUGC meetup (IIT Madras)

Raja B — Sun, 14 Jun 2026 10:20:04 +0000

ILUGC Meetup:

(ILUGC = Indian Linux Users Group Chennai)

I visted IIT Madras for the first time,and i was very excited. The environment there was amazing
The main reason i went there was because of the ILUGC meetup.A mentor suggested that i should try attending once,so i decided to participate
The founder spoke at the event.Since it was my first time attending,I could not fully understand everything that was discussed.However,the founder mentioned that things would become clearer if i continued attending regularly
Everyone introduced themselves,which helped me meet many people.They shared their opinion and experiences about linux and windows.Most of the discussions focused on linux and its benefits.
Some participants came with their families,which was nice to see.One person said that they started lerning linux when they were in 11th standard
Another participants explained web design, creative writing,and the benefits know of technology.There was also a discussion about creating more AI tool and resources in Tamil
One parent mentioned that children should also be introduced to linux so that they can improve their knowledge from a young age
Everyone was given an opportunity to speak,which was one of the best parts of the meetup.Peope shared their own knowledge and experiences,and question from participants were answered openly
Overall,attending the ILLUGU meetup was a valuable experience for me.Even though i did not understand everything,i learned a little more about linus and open source software.I hope to attend future meetups and continue leatning

Microsoft's current CEO, Satya Nadella, 
officially announced that 
'Microsoft Loves Linux'

Microsoft has provided a feature called 
WSL (Windows Subsystem for Linux) to run the Linux OS 
directly inside Windows 10 and 11. 
Furthermore, Microsoft has turned into one of the 
top financial contributors 
to the development of Linux

In 2026, Microsoft is not just a Windows company. 
Driven by the necessities of Cloud and AI technologies, 
it has emerged today as one of the most important developers 
and partners of Linux!

DEV Community: Raja B

React

CODE on JVM

My Experience at Code on JVM Chennai

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

Flow of the program

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

Closures JS

CODE on JVM

My Experience Java Community Event – Java June

Interview Question

**Primitive types**

== and === are different in JavaScript

JavaScript Object

Reference:

The History Of Programming

JavaScript Synchronous and Asynchronous

Asynchronous Patterns in JavaScript

Reference:

JavaScript Scope: Block Scope, Global Scope & Function Scope

Reference:

ILUGC meetup (IIT Madras)

ILUGC Meetup:

Primitive types