Forem: Boomika N

Data types in Java Script

Boomika N — Sun, 12 Apr 2026 15:04:51 +0000

What are Data Types?
Data types in JavaScript define the kind of value a variable can hold. They tell the JavaScript engine how to store and handle data.

Types of Data Types in JavaScript

JavaScript has 2 main categories:

Primitive Data Types (Basic Types)

These store single values and are immutable.

✔ List of Primitive Types:

Number
let x = 10;
let y = 3.14;
String
let name = "John";
let city = 'Chennai';
Template literals:
let msg = Hello ${name};
Strings are immutable
Boolean
Logical values:
let isActive = true;
let isDone = false;
Used in:
Conditions
Comparisons
Undefined
A variable declared but not assigned:
let x;
console.log(x); // undefined
Null
Represents intentional absence of value:
let data = null;
Difference:
undefined → no value assigned
null → empty on purpose
BigInt
For very large numbers:
let big = 123456789012345678901234567890n;
Used when numbers exceed safe limit (Number.MAX_SAFE_INTEGER)
Symbol
Creates unique identifiers:
let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 === id2); // false
Always unique

What is Mutable and Immutable?

Mutable
A mutable object can be changed after it is created.
You can modify:
Its values
Its properties
Immutable
An immutable value cannot be changed after creation.
If you try to change it, you actually create a new value, not modify the original.

*Mutable in JavaScript (Detailed)
In JavaScript, non-primitive types are mutable:
Objects
Arrays
Functions
Example: Object (Mutable)
`let person = {
name: "John"
};

person.name = "Alex"; // modifying existing object

console.log(person.name); // Alex

✔ The original object is changed`
Mutable = same memory location is modified.

*Immutable in JavaScript (Detailed)
Primitive types are immutable:
Number
String
Boolean
Null
Undefined
BigInt
Symbol
Example: String (Immutable)
`let str = "hello";

str[0] = "H"; // trying to change

console.log(str); // "hello"

No change happens`

Variables In Java Script

Boomika N — Thu, 09 Apr 2026 13:18:58 +0000

What is a Variable?
In JavaScript, a variable is a container used to store data values so you can use and manipulate them in your program.
A variable is like a labeled box where you keep information. You give it a name and assign it a value.

Yes, in JavaScript we mainly have 3 types of variables:

var
Features:
Function-scoped (works inside a function)
Can be redeclared
Can be updated
Hoisted (moves to top, but value = undefined)
Example: var x = 10; var x = 20; // ✅ allowed
Problem: Can create bugs because it ignores block {} scope
let
Features:
Block-scoped (works inside { })
Can be updated
Cannot be redeclared in same scope
`Example:
let y = 10;
y = 20; // allowed

let y = 30; // error`
Safer than var

3.const
Features:
Block-scoped
Cannot be updated
Cannot be redeclared
Must assign value when declaring
Example: const z = 10; z = 20; // ❌ error

Biggest Difference → SCOPE
What is scope?
Scope means where you can use the variable
*var (ignores block {}) if (true) { var x = 10; } console.log(x); // Works
Even though it's inside {}, you can still use it outside
That’s why var is unsafe.

*let (respects block {})
f (true) { let y = 20; } console.log(y); // Error
Only works inside {}
Safer and better

*const (same as let)
if (true) {
const z = 30;
}
console.log(z); // Error

What is Variable Declaration? Declaration means creating a variable (just naming it) You are telling JavaScript: “I will use this variable” let x; Here: Variable name = x No value assigned yet So: Declaration = create variable, no value

*What is Variable Initialization?
Initialization means giving a value to the variable
x = 10;
Now:
x has value 10
So:
Initialization = assigning value

*Declaration + Initialization Together?
Most of the time we do both in one line:
let x = 10;
This means:
Declared variable x
Initialized with value 10.

Java script Introduction

Boomika N — Wed, 08 Apr 2026 12:48:53 +0000

What is JavaScript? JavaScript is a high-level programming language mainly used to make websites interactive and dynamic. Alongside HTML (structure) and CSS (style), it is one of the core technologies of the web. It allows you to: *Update content on a webpage without reloading *Handle user actions (clicks, typing, scrolling) *Create animations, games, and interactive UI *Communicate with servers (APIs)

JavaScript is often described as a single-threaded language, which means it can execute one task at a time on its main thread.
2.What does “Single-Threaded” mean?
A thread is like a path of execution in a program.
In JavaScript:
There is only one main thread
It executes code line by line, one task at a time
`Example:
console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output:

Task 1
Task 2
Task 3

Each task waits for the previous one to finish.`

3.What is an Interpreted Language?
An interpreted language is a programming language where the code is executed line by line at runtime, instead of being converted into a separate machine code file beforehand.
How it works:
You write code
The interpreter reads and executes it line by line
No separate compilation step needed

4.What is Dynamic Typing?
A language is dynamically typed when:
You don’t need to declare the data type of a variable
The type is decided automatically at runtime.

5.What is a Java Script Engine?
A JavaScript engine is the program that reads, understands, and executes JavaScript code. Without a JS engine, your JavaScript code cannot run.
A JavaScript engine is a software component inside browsers (and runtimes) that:
Takes your JavaScript code
Converts it into machine-understandable instructions
Executes it
Examples of JS Engines:
V8 → used in Chrome and Node.js
SpiderMonkey → used in Firefox
JavaScriptCore → used in Safari

6.What is JIT Compiler?
A JIT (Just-In-Time) compiler is a technique used by modern JavaScript engines (like V8) to make code run faster by compiling it during execution.
JIT compiler = “compile while running”

Instead of:
Compiling the whole program before execution (like C/C++)
Or interpreting line by line (slow)

JIT does:
Converts JavaScript into machine code at runtime
Optimizes it while the program is running

7.Why JIT is Needed
JavaScript was originally:
Interpreted (slow)
Problem:
Repeated code runs slowly
No optimization

Solution:
JIT compiler improves speed by optimizing code dynamically

8.How JIT Compiler Works (Step-by-Step)
Let’s understand the full flow:
Step 1: Parsing (Code Understanding)
`Example:

function add(a, b) {
return a + b;
}`
Engine:
Checks syntax
Converts code into AST (Abstract Syntax Tree)
Now engine understands structure.

Step 2: Interpretation (Initial Execution)
Code runs using an interpreter first.
Why?
Faster startup
No waiting for compilation
But:
Not optimized → slower execution

Step 3: Profiling (Monitoring Code)

Engine tracks:
Which functions run often
Which loops repeat many times
This frequently used code is called:“Hot Code”
`Example:

for (let i = 0; i < 10000; i++) {
add(i, i);
}

add() becomes hot code.`

Step 4: JIT Compiles It
Now JIT converts this function into:
➡ Machine code (optimized)

Step 5: Optimization Techniques
JIT uses smart tricks to speed things up:

Inline Caching
Stores repeated operations
Example: obj.name; obj.name;
Engine remembers property location → faster access
Function Inlining
Replaces function call with actual code
Instead of:
add(2, 3);
Engine may convert to:
2 + 3;
Removes function call overhead
Type Optimization
JavaScript is dynamic, but JIT assumes types:
Example:add(2, 3); // numbers
Engine assumes:
a and b are numbers → uses fast numeric operations
Engine assumes:
a and b are numbers → uses fast numeric operations

Step 6: Execution of Optimized Code
Now:
Optimized machine code runs
Performance improves significantly

Step 7: De-optimization (Important)
If assumptions fail:
Example: add(2, 3); // numbers add("a", "b"); // strings
Problem:
JIT assumed numbers
Now types changed

Engine:
❌ Discards optimized code
✔ Falls back to interpreter

This is called:
De-optimization

CSS Transitions

Boomika N — Thu, 02 Apr 2026 07:41:21 +0000

1.What is a CSS Transition?
CSS Transitions let you smoothly change property values over a specified duration instead of having them change instantly. They’re commonly used for hover effects, animations on state changes, and improving user experience.
A transition defines how a CSS property changes from one value to another over time.
Example:
button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: red;
}
When you hover, the color gradually changes from blue to red in 0.5 seconds instead of switching instantly.

2.Key Properties of CSS Transition

transition-property
Specifies which CSS property the transition applies to.
transition-property: background-color;
You can specify one or multiple properties:
transition-property: background-color, transform;
Use all to apply to all animatable properties:
transition-property: all
transition-duration
Defines how long the transition takes.
transition-duration: 0.5s;
Values:
s → seconds (e.g., 1s)
ms → milliseconds (e.g., 500ms)
Without duration, no transition will happen (default is 0s).
transition-timing-function
Controls the speed curve of the transition (how it accelerates/decelerates).
transition-timing-function: ease;
Common values:
ease → slow start, fast middle, slow end (default)
linear → constant speed
ease-in → slow start
ease-out → slow end
ease-in-out → slow start & end
Custom curve:
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay
Specifies when the transition should start.
transition-delay: 0.2s;
The animation will wait 0.2 seconds before starting.

3.What is transition-timing-function?
The transition-timing-function in CSS defines how the speed of a transition changes over time.
In simple terms:
It controls the motion style of the animation — whether it starts slow, speeds up, or slows down at the end.

4.Why it matters
Even if two transitions have the same duration (e.g., 1 second), they can feel very different depending on the timing function.

Common Timing Functions Explained

ease (default)
transition-timing-function: ease;
Behavior:Starts slow
Speeds up in the middle
Ends slow
linear
Meaning: Constant speed from start to finish.
No acceleration or deceleration
ease-in
Meaning: Starts slow, then speeds up.
No slowing down at the end.
Speed behavior:Slow → Fast
ease-out
Meaning: Starts fast, then slows down at the end.
Speed behavior:Fast → Slow
ease-in-out
Meaning: Starts slow → speeds up → slows down again.
Speed behavior:Slow → Fast → Slow (more balanced than ease)

These are CSS animation properties used to control how an animation behaves. Let’s break each one down clearly with examples and real understanding

animation-name
What it does:Specifies which animation (keyframes) to apply.
How it works:You define an animation using @keyframes, and this property links to it.
Example:@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
div {
animation-name: slide;
}``
1. animation-duration What it does:Defines how long the animation takes to complete one cycle. Values: s → seconds (e.g., 2s) ms → milliseconds (e.g., 500ms) `Example: div { animation-duration: 2s; } Meaning:The animation will finish in 2 seconds.

animation-timing-function
What it does:Controls the speed curve (how animation accelerates/decelerates).
Common values:
linear
ease (default)
ease-in
ease-out
ease-in-out
Example:
div {
animation-timing-function: ease-in-out;
}
Meaning:Animation starts slow → speeds up → slows down.
animation-delay
What it does:Specifies how long to wait before starting the animation.
Specifies how long to wait before starting the animation.
Example:
div {
animation-delay: 1s;
}
Meaning:Animation starts after 1 second delay.
animation-iteration-count
What it does:Defines how many times the animation repeats.
Values:
Number → 1, 2, 3, etc.
infinite → loops forever
Example:
div {
animation-iteration-count: infinite;
}
Meaning:Animation runs forever 🔄
animation-direction
What it does:Controls direction of animation playback.
Values:
Value Meaning
normal Forward (default)
reverse Backward
alternate Forward → Backward
alternate-reverse Backward → Forward
`Example:
div {
animation-direction: alternate;
}

Meaning:First forward → then backward → repeat
Full Example (All Together)
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}

div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
`
Shortcut Property (Shorthand)
You can write everything in one line:
div {
animation: move 2s ease-in-out 1s infinite alternate;
}

Pseudo-Classes

Boomika N — Wed, 01 Apr 2026 16:02:49 +0000

1.What is a pseudo-class?
CSS pseudo-classes are special keywords added to selectors that let you style elements based on their state, position, or user interaction, without needing extra classes in your HTML.
`Basic syntax:
selector:pseudo-class {
property: value;
}

Example:

a:hover {
color: red;
}`

This changes the link color only when the user hovers over it.

2.Why use pseudo-classes?
They allow you to:

Style elements dynamically (hover, click, focus)
Target elements based on position (first, last, nth)
Avoid adding extra classes in HTML
Improve UI/UX interactions.

3.🔹 1. :hover (Hover Style)
👉 What it means:

Applies styles when the user moves the mouse over an element.

Example: button:hover { background-color: blue; color: white; }
Use cases:
Buttons changing color
Highlighting cards or menu items
Showing dropdown menus
Key idea:

It only works when a pointing device (mouse) is used.

4.🔹 2. :active (Active Style)
👉 What it means:

Applies styles when the element is being clicked (pressed).

Example:
button:active {
background-color: red;
}
Behavior:
Works only while clicking
Very short duration
Example
Hover → :hover
Click → :active

5.🔹 3. :link (Unvisited Link)
👉 What it means:

Targets links (<a>) that have not been visited yet.

Example: a:link { color: blue; }

6.🔹 4. :visited (Visited Link)
👉 What it means:

Applies to links the user has already visited.

Example: a:visited { color: purple; }
🔹 Link States Order (VERY IMPORTANT)

Always follow this order:

a:link
a:visited
a:hover
a:active

7.🔹 5. :first-child
👉 What it means:

Selects the first child element of a parent.

Example: li:first-child { color: red; } HTML: <ul> <li>Item 1</li>  <li>Item 2</li> </ul>
Key idea:
Must be the first element inside the parent
Not just the first of its type

8.🔹 6. :last-child
👉 What it means:

Selects the last child of a parent.

Example: li:last-child { color: green; } HTML: <ul> <li>Item 1</li> <li>Item 2</li>  </ul>

9.🔹 7. :nth-child(n)
👉 What it means:

Selects elements based on their position (index).

Example: li:nth-child(2) { color: blue; }

👉 Selects the 2nd child

🔹 Summary Table
Pseudo-class What it does
:hover When mouse is over element
:active When element is being clicked
:link Unvisited link
:visited Visited link
:first-child First child of parent
:last-child Last child of parent
:nth-child(n) Select based on position

10.🔹 1. :checked (Checked Selector)
👉 What it means:

Targets elements that are checked/selected.

Works with: Checkbox (<input type="checkbox">) Radio buttons (<input type="radio">) Example: <input type="checkbox" id="agree"> <label for="agree">I agree</label> input:checked { accent-color: green; }

11.🔹 2. :disabled (Disabled Selector)
👉 What it means:

Targets elements that are disabled (cannot be used).

Example: <input type="text" disabled> input:disabled { background-color: lightgray; cursor: not-allowed; }
Use cases:
Show inactive buttons
Style unavailable inputs

12.🔹 3. :enabled (Enabled Selector)
👉 What it means:

Targets elements that are enabled (usable).

Example: input:enabled { border: 2px solid green; }

13.🔹 4. :required (Required Selector)
👉 What it means:

Targets form fields that have the required attribute.

Example: <input type="text" required> input:required { border: 2px solid red; }

14.🔹 What is a pseudo-element?

A pseudo-element is a keyword added to a selector using :: (double colon) to style a part of an element.

Syntax: selector::pseudo-element { property: value; }

15.🔹 Why use pseudo-elements?

They help you:

Style specific parts (like first letter, first line)
Add content using CSS
Avoid extra HTML elements
Create UI effects (icons, overlays, decorations)
🔹 Common pseudo-elements

::before 👉 What it does:

Inserts content before an element.

Example: p::before { content: " "; }
Output:

This text appears before the paragraph

::after 👉 What it does:

Inserts content after an element.

`Example:
p::after {
content: " ✔";
}
Important:

content property is required for ::before and ::after`

::first-letter 👉 What it does:

Styles the first letter of a block element.

Example: p::first-letter { font-size: 30px; color: red; }

::first-line 👉 What it does:

Styles the first line of text.

Example: p::first-line { font-weight: bold; }

::selection 👉 What it does:

Styles text when the user selects (highlights) it.

Example: ::selection { background: yellow; color: black; }

::placeholder 👉 What it does:

Styles placeholder text inside inputs.

Example: input::placeholder { color: gray; font-style: italic; }

::marker 👉 What it does:

Styles list item markers (bullets/numbers).

`Example:
li::marker {
color: red;
font-size: 20px;
}
🔹 Example (Combined)
HTML:

Hello world

CSS:
p::before {
content: " ";
}

p::first-letter {
font-size: 40px;
color: blue;
}

p::after {
content: " ";
}`

Introduction to HTML Basics

Boomika N — Tue, 24 Feb 2026 08:30:13 +0000

1.What is HTML?
HTML stands for Hyper Text Markup Language. It is used to create web pages and structure content on the internet.
Every website we see is built using HTML.

2.What is <DOCTYPE html> and why do we use it?
<DOCTYPE html>is written at the top of every HTML document.

*why do we use it:
It tells the browser that this document is written in HTML5
It helps the browser display the page correctly
It avoids compatibility issues
It is not a tag it is a declaration
Example:
HTML
<DOCTYPE html> <html> </html>

What is <head> tag?

The <head>tag contains information about the webpage.
It includes:
title
Meta data
Links to CSS
Scripts
The content inside

is not directly visible on the webpage.
Example:

HTML
<head>
<title>My First page</title>
</head>

3.What is <title>Tag?
The <title> tag is written inside the

tag.
Purpose:
It shows the page name in the browser tab
Example:
HTML

<title>HTML Basics</title>
It will appear on the browser tab as: HTML Basics

4.What <body>Tag?
The <body> tag contains the main content of the webpage.
Everything inside

is visible to users.
Example:
HTML

<body>
<h1>Welcome</h1>
<p>This is my first htmlpage.</p>
<body>

5.What is Block Elements?
Block elements start on a new line, it takes full width of the page
Example:

<div>
<p>
<h1>to<h6>

6.What is <div> Tag?
<div> means division
It is used to group elements together
Think of it like a container or box that holds other elements.
Example:
HTML

<div>
<h1>Welcome</h1>
<p>This is inside a div.</p>
</div>

7.What is <p> Tag?
<p> means Paragraph
It is used to write text in paragraph form
Example:
HTML

<p>this is a Paragraph</p>

It automatically starts on a new line
It is also a block element.

My First Step in Learning Git and GitLab

Boomika N — Sun, 22 Feb 2026 14:59:00 +0000

What is Git?
Git is a distributed version control system.
It helps developers:

Track Changes in code
Save different versions of projects
Go back to previous versions if something goes wrong.

Git has Two Main Types

Centralized Version Control System (CVCS)
There is one Central server
All developers connect to that one server
If the server crashes work can be lost
In this system everyone depends on one main system.
Distributed Version Control System (DVCS)
Every developer has a full copy of the repository
You can work offline
If one system fails others still have full copy
Git is a Distribution version control system
This makes Git faster and safer.

Why Git is important to Learn?
Git is important to learn because it is widely used in the software industry. it helps developers track changes,collaborate in teams, and manage project versions efficiently knowing Git is essential for becoming a professional developer.

How I Installed Git in Linux
I installed Git on Linux using the terminal .First , i updated the package list using[sudo apt update],then installed Git with [sudo apt install git].Finally i verified the installation using [git--version].

What is GitLab?
GitLab is a web-based platform that helps developers store,manage and collaborate on Git repositories. it allows teams to work together and keep their code safe online.

How to create an account in GitLab
I created my account in Gitlab by visiting the offical website and clicking on the register button. I signed up using my email address and created a username and password. After completing the registration form,i verified my email address through the confirmation link sent to my inbox. once the verification was completed ,i finished setting up my profile, after that my Gitlab account was ready to use.

How to create a project in Gitlab
After creating my account in gitlab I logged in and clicked on the "New Project"button on the dashboard. Then i selected the option "create blank project". I entered a project name, chose the visibility level (public or private)and clicked on "create project".from the gitlab website and copied the repository URL,then in my local project folder,i initialized Git using[git init], added the remote repository using[git remote add origin and pulled existing changes using [git pull origin main]. After that,i staged my files with[git add .], committed them using [git commit -m "inital commit"],and finally pushed the project to Gitlab using [git push -u origin main].

How to clone a project in GitLab
To clone a project from GitLab ,i first navigated to the desired folder using the cd command . Then i used [git clone ] to download the repository to my local system . This command automatically initialized git and connected the project to the remote repository ,after cloning , I entered the project directory using[cd projectname].