DEV Community: Vinoth Kumar

TOSSCONF'26

Vinoth Kumar — Thu, 23 Jul 2026 16:45:39 +0000

FINNLENS

GOOGLE TAKEOUT:

Google Takeout,is also known as Download Your Data,it's a project by the Google Data Liberation Front,that allows users of Google products, such as YouTube and Gmail, to export their data to a downloadable archive file.

CLOUD FLAIR:

A company specializing in internet infrastructure services designed to improve the performance, security, and reliability of websites and web applications.
At its core, Cloudflare operates as a content delivery network (CDN), distributing web content across a global network of servers.

STRUCTURED LEDGER:

A principal book of accounts in which all transactions recorded in the Journal or Subsidiary Books are posted to their respective accounts.
It contains separate accounts for assets, liabilities, capital, income, and expenses, and helps in preparing the Trial Balance and final accounts.
A ledger is formed after the journal and is the secondary step of bookkeeping.

Dauth:

It's is used to remove the need for emails & passwords for each site you use. Quickly and easily use one or multiple wallets for authentication, using your desktop or your mobile with Metamask.

DOCUMENT OBJECT MODEL

Vinoth Kumar — Wed, 22 Jul 2026 17:09:46 +0000

DOM IN JS:

A structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript. It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.

TYPES OF DOCUMENT OBJECT MODEL:

Core DOM.
XML DOM.
HTML DOM.

CORE DOCUMENT OBJECT MODEL: All DOM implementations must support the interfaces listed as fundamental in the code specifications.

XML DOCUMENT OBJECT MODEL: As the name suggests, all XML elements can be accessed through the XML DOM .

HTML DOCUMENT OBJECT MODEL: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

WORKING OF DOCUMENT OBJECT MODEL:

The DOM connects your webpage to JavaScript, allowing you to:

Access elements like finding an <h1> tag.
Modify content (like changing the text of a
tag).
React to events (like a button click).
Create or remove elements dynamically.

PROPERTIES OF DOCUMENT OBJECT MODEL:

Node-Based: Everything in the DOM is represented as a node. E.g., element nodes, text nodes, attribute nodes.
Hierarchical: The DOM has a parent-child relationship, forming a tree structure.
Live: Changes made to the DOM using JavaScript are immediately reflected on the web page.
Platform-Independent: It works across different platforms, browsers, and programming languages.

NON-NUMERIC DATA TYPES

Vinoth Kumar — Tue, 21 Jul 2026 18:05:47 +0000

TYPES OF NUMERIC DATA TYPES IN JS:

NULL.
UNDEFINED.

NULL:

Does not belong to any of the default data types. It forms a separate type of its own which contains only the null value.

EXAMPLE:

let age = null;
console.log(age)

UNDEFINED:
A variable that has been declared but not initialized with a value is automatically assigned the undefined value. It means the variable exists, but it has no value assigned to it.

EXAMPLE:

let x; 
console.log(x); // Output: undefined

function doSomething() {

}
console.log(doSomething()); 

let obj = {};
console.log(obj.property);

POSITIONING IN CSS

Vinoth Kumar — Mon, 20 Jul 2026 17:04:25 +0000

ABSOULTE POSITIONING:
Removes the element from the document flow and places it relative to the nearest ancestor with a positioning context,eg: relative, absolute, or fixed.

EXAMPLE:

<html>
<head>
    <style>
        .fixed {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: lightgreen;
            padding: 20px;
            border: 2px solid black;
        }
        .content {
            height: 1200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Fixed Positioning Example</h2>
    <div class="fixed">Fixed Box</div>
    <div class="content">
        <p>Scroll down to see that the fixed box stays in place.</p>
        <p>This content simulates a long page.</p>
    </div>
</body>
</html>

FIXED POSITIONING:
Removes the element from the flow and positions it relative to the viewport. It remains in place even when the page scrolls.

EXAMPLE:

<html>
<head>
    <style>
        .fixed {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: lightgreen;
            padding: 20px;
            border: 2px solid black;
        }
        .content {
            height: 1200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Fixed Positioning Example</h2>
    <div class="fixed">Fixed Box</div>
    <div class="content">
        <p>Scroll down to see that the fixed box stays in place.</p>
        <p>This content simulates a long page.</p>
    </div>
</body>
</html>

STICKY POSITIONING:
Switches between relative and fixed based on the scroll position.

EXAMPLE:

<html>
<head>
    <style>
        .sticky {
            position: sticky;
            top: 0;
            background-color: yellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="sticky">I am sticky</div>
    <p>Scroll down to see the effect.</p>
    <div style="height: 1000px;"></div>
</body>
</html>

POSITIONING

Vinoth Kumar — Sun, 19 Jul 2026 15:29:14 +0000

POSITIONING IN CSS:
To control the placement of elements on a web page. It allows elements to be positioned relative to the normal document flow, the browser window, or other elements.

The position property defines how an element is positioned.
Common position values include static, relative, absolute, fixed, and sticky.
Positioning works with properties like top, right, bottom, and left.
It helps create flexible layouts, overlays, and responsive designs.

TYPES OF POSITIONING:

Static Positioning.
Relative Positioning.
Absolute Positioning.
Fixed Positioning.
Sticky Positioning.

STATIC:
The default position of an element. It does not accept properties like top, left, right, or bottom.

EXAMPLE:

<html>
<head>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
</body>
</html>

RELATIVE:
An element relative to its normal position. You can move it using top, left, right, or bottom.

EXAMPLE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
    <style>

        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }

        .relative {
            position: relative;
            top: 20px;
            left: 30px;
        }
    </style>
<head>
  <meta charset="UTF-8">
  <h1> WORK</h1>
  <title>Link CSS Example</title>
  <link rel="stylesheet" href="style.css">
  <div>Box 1</div>
  <div class="relative">Box 2</div>
</body>
</html>

VARIABLE

Vinoth Kumar — Sat, 18 Jul 2026 17:23:40 +0000

VARIABLE IN JS

A named storage location to store the data or values. Using variables, we can store the data in our program and access it afterward. In this article, we will learn about variables in programming, their types, declarations, initialization, naming conventions, etc.

DECLARATION OF VARIABLE: The declaration of variables involves specifying the type and name of a variable before it is used in the program. The syntax can vary slightly between programming languages, but the fundamental concept remains consistent.

SYNTAX:

var/let/const variable_name;

EXAMPLE:

var age;
let price;
const grade = 'A';

TYPES OF VARIABLES:

Global variables.
Local variables.

GLOBAL VARIABLE:

Declared outside any function or block in a program and accessible throughout the entire codebase. In simpler words, Global variables can be accessed in any part of the program, including functions, blocks, or modules.

EXAMPLE:

        class GFG  {
            static globalVariable = 5;

            static gfgFnc() {
                console.log(GFG.globalVariable);
            }

            static main() {
                console.log(GFG.globalVariable);

                GFG.gfgFnc();
            }
        }
        GFG.main();

LOCAL VARIABLE:

Declared within a specific function, block, or scope and are only accessible within that limited context. In simpler words, Local variables are confined to the block or function where they are declared and cannot be directly accessed outside that scope.

EXAMPLE:

function gfgFnc() {
    var localVariable2 = 10;
    console.log(localVariable2);
}

function main() {
    var localVariable1 = 5;
    console.log(localVariable1);

    gfgFnc();

    if (true) {
        var localVariable3 = 15;
        console.log(localVariable3);
    }
}


main();

CALLBACK FUNCTION

Vinoth Kumar — Fri, 17 Jul 2026 16:37:29 +0000

CALLBACK FUNCTION IN JS:

A function that is passed as an argument to another function and executed later.

A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

EXAMPLE:

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function sayBye() {
    console.log("Goodbye!");
}

greet("VINOTH", sayBye);

WORKING OF CALLBACK:
JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.

console.log("Start");

setTimeout(function () {
    console.log("Inside setTimeout");
}, 2000);

console.log("End");

USES OF CALLBACK:

Handling Asynchronous Operations.
Callbacks in Functions Handling Operations.
Callbacks in Event Listeners.(TBD)
Callbacks in API Calls.

HANDLING ASYNCHRONOUS OPERATION:

API requests (fetching data)
Reading files (Node.js file system)
Event listeners (clicks, keyboard inputs)
Database queries (retrieving data)

CALLBACK FUNCTION IN HANDLIING OPERATIONS:
A function needs to execute different behaviors based on input, callbacks make the function flexible.

EXAMPLE:

function calc(a, b, callback) {
    return callback(a, b);
}

function add(x, y) {
    return x + y;
}

function mul(x, y) {
    return x * y;
}

console.log(calc(5, 3, add));    
console.log(calc(5, 3, mul));

CALLBACK IN APICALLS:

Callbacks are useful when retrieving data from APIs.
fetchData() gets data from an API and passes it to handleData() for processing.

BASIC ARRAY METHODS

Vinoth Kumar — Thu, 16 Jul 2026 16:25:28 +0000

BASIC ARRAY METHODS IN JS

To perform common tasks efficiently, JavaScript provides a wide variety of array methods. These methods allow you to add, remove, find, and transform array elements with ease.

METHODS IN ARRAY:

Array length
Array toString()
Array at()
Array join()
Array pop()
Array push()
Array shift()
Array unshift()

Array length: An array returns the number of elements in the array. It automatically updates as elements are added or removed.

EXAMPLE:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
console.log(size);

Array toString(): This method returns the elements of an array as a comma separated string.

EXAMPLE:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString();
console.log(myList);

Array at():

This at() method returns an indexed element from an array.
This at() method returns the same as [].

EXAMPLE:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
console.log(sruit);

Array join(): It creates and returns a new string by concatenating all elements of an array. It uses a specified separator between each element in the resulting string.

EXAMPLE:

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.join('|'));

Array pop(): It is used to remove elements from the end of an array.

EXAMPLE:

let a = [20, 30, 40, 50];
a.pop();
console.log(a);

Array push(): It is used to add an element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array.

EXAMPLE:

let a = [10, 20, 30, 40, 50];
a.push(60);
a.push(70, 80, 90);
console.log(a);

Array shift(): It is used to remove elements from the beginning of an array.

EXAMPLE:

let a = [20, 30, 40, 50];
a.shift();
console.log(a);

Array unshift(): is used to add elements to the front of an Array.

EXAMPLE:

let a = [20, 30, 40];
a.unshift(10, 20);
console.log(a);

ARRAY IN PROGRAMMING

Vinoth Kumar — Wed, 15 Jul 2026 15:37:28 +0000

ARRAY IN JS: An array is an ordered list of values. Each value, known as an element, is assigned a numeric position in the array called its index.

The indexing starts at 0, so the first element is at position 0, the second at position 1, and so on.
Arrays can hold any type of data-such as numbers, strings, objects, or even other arrays-making them a flexible and essential part of JavaScript programming.

CREATE ARRAY USING LITERAL: An array using array literal involves using square brackets [] to define and initialize the array.

EXAMPLE:

const marks = [70,75,90,99,33,];
console.log(marks);

CREATE USING NEW KEYWORD(CONSTRUCTOR): The "Array Constructor" refers to a method of creating arrays by invoking the Array constructor function.

EXAMPLE:

const subjects = new array[70,90,99,30,75];
console.log(subjects);

OPERATIONS ON JS ARRAY:

Accessing Elements of an Array.
Accessing the First Element of an Array.
Accessing the Last Element of an Array.
Modifying the Array Elements.

ACCESSING ELEMENTS OF AN ARRAY: Any element in the array can be accessed using the index number. The index in the arrays starts with [0].

EXAMPLE:

const marks = [50,60,70,80,90];
console.log(marks[1]);

ACCESSING THE FIRST ELEMENT OF AN ARRAY: The array indexing starts from 0, so we can access first element of array using the index number.

EXAMPLE:

const marks = [50,60,70,80,90];
for(let i = 0; i < 5; i++){
    console.log(marks[i]);
}```



**ACCESSING THE LAST ELEMENT OF AN ARRAY:** Access the last array element using [array.length - 1] index number.

**EXAMPLE:**

let frontend = ["HTML", "CSS", "JS"];
let access = frontend[frontend.length - 1];
console.log("Last Item: ", access);


plaintext

**MODIFYING THE ARRAY ELEMENTS:** An array can be modified by assigning a new value to their corresponding index.

**EXAMPLE:**

const marks = [50,60,70,80,90];
marks[3] = 75;
console.log(marks);

OPERATIONS IN OBJECTS

Vinoth Kumar — Tue, 14 Jul 2026 16:20:32 +0000

OPERATIONS IN JS OBJECTS:

CHECHKING IF A PROPERTY EXISTS: You can check if an object has a property using the in operator or has OwnProperty() method.

EXAMPLE:

let obj = { model: "Tesla" };
console.log("color" in obj);
console.log(obj.hasOwnProperty("model"));

ITERATING THROUGH OBJECT PROPERTIES: Use for.in loop to iterate through the properties of an object.

EXAMPLE:

let obj = { name: "Vinoth", age: 23 };
for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

MERGING OBJECTS: Objects can be merged using Object.assign() or the spread syntax { ...obj1, ...obj2 }.

EXAMPLE:

let obj1 = { name: "Vinoth" };
let obj2 = { age: 23};

let obj3 = { ...obj1, ...obj2 };
console.log(obj3);

OBJECT LENGTH: Find the number of properties in an object using Object.keys().

EXAMPLE:

let obj = { name: "Vinoth" };
console.log(typeof obj === "object" && obj !== null);

OPERATIONS IN JAVASCRIPT OBJECTS

Vinoth Kumar — Tue, 14 Jul 2026 16:19:34 +0000

OPERATIONS IN JS OBJECTS:

ACCESSING OBJECTS: Access an object’s properties using either dot notation or bracket notation.

EXAMPLE:

let Data = { 
 name: "vinoth",
 age: 23
 }
console.log(Data.name);
console.log(Data.age);

MODIFYING OBJECTS: Properties in an object can be modified by reassigning their values.

EXAMPLE:

let Data = { 
name: "vinoth", 
age: 22 
}
console.log(Data);

data.age = 23;
console.log(Data);

ADDING PROPERTIES ON OBJECT: Dynamically add new properties to an object using dot or bracket notation.

EXAMPLE:

let car = { 
model: "Audi" };
car.color = "White";

console.log(car);

REMOVING PROPERTIES FROM AN OBJECT: The delete operator removes properties from an object.

EXAMPLE:

let car = { 
model: "Tesla", 
color: "Red"
 }
delete car.color;

console.log(car);

OBJECT

Vinoth Kumar — Mon, 13 Jul 2026 17:06:17 +0000

OBJECT IN JS: A dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.

The values of properties can be primitives, objects, or functions.
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

PRIMARY WAYS TO CREATE AN OBJECT:

Creation Using Object Literal.
Creation Using new Object() Constructor.

CREATION USING OBJECT LITERAL: object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

EXAMPLE:

const mobile1 = {
    name: "iphone",
    price: 50000,
    storage: "512TB"
};
console.log(mobile1.price);

CREATION USING OBJECT() CONSTRUCTOR: A static method creates a new object, using an existing object as the prototype of the newly created object.

EXAMPLE:

function Mobile(){}
let mobile = new Mobile();
mobile.name = "Sourav";
mobile.age = 23;
mobile.job = "Developer";

console.log(mobile);

OPERATIONS ON OBJECT:

Accessing Object Properties.
Modifying Object Properties.
Adding Properties to an Object.
Removing Properties from an Object.
Checking if a Property Exists.
Iterating Through Object Properties.
Merging Objects.
Object Length.