DEV Community: boopalan

objects in JavaScript part-2

boopalan — Fri, 19 Jun 2026 11:03:25 +0000

how we do not use the keys
if you keys have more the own words then you can add the double quotes around it

example:

const obj3 = {
    “is admin” : false,
    // here the key have two words so we are using the double quotes
}
//obj3.is admin

// If you try to access like this way javascript consider it self obj3 having a is property and leave it the remaining

In this case we can use like this way, now it will retrieve the values of the properly

console.log(obj3[“is admin”]);
//false

can can also add some of the properties in this similar ways
examples

obj3[“is user”] = true;
console.log(obj3[“is user”]); // true

same as it allows us to modify values in the properties

obj3[“is admin”] = true;
console.log(obj3[“is admin”]); // true

now it was changed from the false to true values

how to remove any of the keys in the object, whenever we remove any of the keys its respective values will also remove from the objects

delete obj3[“is admin”] = true;
console.log(obj3)

you cannot see the “is admin” key in this object because the delete key word helps us to remove keys.

some of the way to handle the objects dynamically

let we consider we have this kind of object

const user = {
    name : “boopalan”
}
const role = “Java fullstack developer”;

if we try to add the role as key to user object how we will do it

user.role = role
user[“role”] = role

however we can add the role key to the the user object in any way, the we will usually access the role key in this this way

console.log( user[“role”] );
console.log( user.role );

Here actually we took two steps to add and access the key and values, how it would be easy if we do it in a single line or one step, ya JavaScript provides a dynamic way to add and access the key in one single step.

Console.log(user[role]);

here the role is dynamically added in the object and then it in this usual way we are accessing the behaviours

if we want to use this dynamic method we must have to declare the variables before use it.
Here we actually predefined what is the key want to be in the object

how can we set the key names dynamically is it possible we can be able to use the key dynamically without hard coded
Yes, we are able to do it let us see how to do it?

Const key = prompt(“ what key you want to add : ”)
cost dynamicObject = {
    [key] : “values for the key”,
    // here whatever give to the key that will automatically converted into the key
}

console.log(dynamicObject )

constructor function
we know about how to create and use the functions in javascript, we can use the functions to create object

function LLM(name, parameters){
    this.name = name,
    this.parameters = parameters
}

if we plan to use the constructor function to create object we must need ti use the new keyword


function Person(name, age) {
this.name = name;
this.age = age;
}
// Creating a new object using the constructor function
const johnDoe = new Person('John Doe', 30);
if we create without new keyword
const Gorge = Person(‘Gorge’, 30);
console.log(Gorge) //undefined

what will happen if we do not use the new keyword

strict mode TBD

non-strict mode, this points to the global window object. In strict mode, this is undefined
this will lead to polluted window object
to ensure what was happening without the new keyword let we see

console.log(window.name) // Gorge
console.log(window.age) // 30

do you notice that this time if we use the constructor function to create objects it will say out object was function type, up to no or if we use the object literals it would not say any types for the object, this is where constructor function helps to create use defined function instead of default object types

to check the instances

console.log( johnDoe instanceof Person ); //
this will helps to check the which object we are handling

Also javascript provides it’s one object type, so we do not need to create an extra function manually to create objects

const person = new Object();
person.name = “matz”
console.log(person)

this does not show any new types for this object

using function in the objects

const profile = {
    name : “matz”,
    getName: function () {
        console.log(` username is ${this.name}`)
    }
}
console.log(profile.getName())
// you must use the braces to call the function

how to handle the not existing properties in the object
If we try to call the not existing properties javascript will say does not undefined

console.log(person.salary) // undefined

one way to check is in operator
console.log(‘salary’ in person) // false
because the salary property is not in the person object

console.log(person.hasOwnProperty('age')); true

this hasOwnProperty() will say that an object does it has an property or not by passing the an argument to this function

If you are a situation of out want handle the nested objects in will help very much


const profile = {
    name : “matz”,
    countries : {
        asia : [“Japan”, “China”]
        europe : [“German”, “France”]
    }
}
for (let key in profile) {
    console.log( key )
    // this time we get all the keys from the person object
    console.log( profile[key} )
    // similarly key help to get the values
}

how to get all the keys form an particular objects
Objects.keys(person)

this will return all the keys in a array data type

NOTE
objects is always stored in and shared by the references

object references


const favFruit = { name = “mango” };
const seasonalFruit = {name = “mango”};

console.log( favFruit == seasonalFruit ); // false
console.log( favFruit === seasonalFruit ); // false

whether comparison operators (==) and strict equality operator (===) both will give a false result because it will check only the references of the both objects, not the item by item inside.

const seasonalFruit = {name = “mango”};
let favFruit = seasonalFruit
console.log( favFruit == seasonalFruit ); // true
console.log( favFruit === seasonalFruit ); // true

this time we get false because both variables have the same references, so the both comparison operators (==) and strict equality operator (===) check it’s references and return true because both have the same references

static methods

const target = { p:1, q:2};
const source = { a:3 , b:5};
const returnObject = Object.assign(target, source);
consle.log( returnObject);
here we will get an object that having the both objects properties, here in the above example we do not have repeated properties so it compliments both objects properties and return them

suppose any one them have an repeated property then what will happen
let we see them
const target = { p:1, a:2};
const source = { a:3 , b:5};
const returnObject = Object.assign(target, source);
consle.log( returnObject);
here the repeated property was overwritten by the last value having the same property names

const target = { p:1, a:2};
const returnObject = Object.assign({}, source);
consle.log( returnObject);

here the second objects the source was copied and we get its properties at the final output

NOTE we was getting the new references each time not the same references of the copied objects
to verify that it was an object new references

console.log( returnObject == target ); // false
console.log( returnObject === target ); // false

shallow copy vs deep copy

let we check does the assign object

const source = { a:3 , b:5, c:{ x:0}};
const returnObject = Object.assign({}, source);

first we check that is both object have the same properties after cloning

console.log( source );
// { a:3 , b:5, c:{ x:0}}
console.log( returnObject);
// { a:3 , b:5, c:{ x:0}};

it seems like both have the same number of objects
what will happen if we change the values of the properties

returnObject.a = “100”;
consle.log( source.a ); // 3
consle.log( returnObject.a ); 100

it copies the primary key of the objects
let we try to change the values of the child objects

returnObject.c.x = “100”;
consle.log( source.c.x ); // 100
consle.log( returnObject.c.x ); 100

here if we change the values of the child objects it properties it affects the both simultaneously

What are objects in JavaScript?

boopalan — Thu, 18 Jun 2026 03:01:14 +0000

What are objects in JavaScript?
Suppose if you are in a situation of using same and repeated variables again and again, to reduce this kind of again and again declaration of same kind of variable objects will reduce this problem in programming, it a kind of key and value pairs, it does not allow repeated duplicated keys and you can store primitive and not primitive data types as values to the objects keys.

How to create objects

JavaScript allows us to create objects in several ways, for example object literals, object constructors and many more ways.

Creating object using the object literals

const obj1 = {
    name:”yukihiro matsumoto”,
    language: “Japanese”
}

here each key should be separated by the commas, it allows to identify each key and values respectively.

To access the values in the object we have to use the object variable along with dot and the you can specify which key why want to call

console.log(“obj1.name”)
//  yukihiro matsumoto

console.log(“obj1.language ”)
//  Japanese

Why are we using const for objects?

Why do you notice that we are using const for the object variables, then you may ask why you are using const? By using const, are we able to change the values of any of them?

Let us see one by them, why const?
Const will key the object reference same and we are only changing the values inside the same references, but if we use any other variable keyword it will allow to change the variable’s references
In any way we are able to modify and object key values.

Creating objects form existing variables

let say you already have some of the variables

const a = “Apple”;
const b = “Ball”;
const c  = “cat”;

if you want to use this variable’s values in your new object you can use its values

const abc = {
    a : a,
    b:b,
    c:c
}

instead also we can able to use the short hand notation for creating objects using this variable in for the object creation

const abc = {
    a , b, c
};

let we see how to change the values of the keys

const obj1 = {
    name:”yukihiro matsumoto”,
    language: “Japanese”
}

obj1.name = “Brendan Eich”;
obj1.language = “English”;

console.log(obj1)

// { name : “Brendan Eich” , language : “English” }

let we see the how to create the Object using the object constructor

const obj2 = new Object();

obj2.name = “Rasmus Lerdorf”;
obj2.language = “English”;

// { name : “Rasmus Lerdorf” , language : “English” }

Why we need TypeScript rather then JavaScript?

boopalan — Mon, 15 Jun 2026 15:41:26 +0000

What is typescript?
We can say it is simply superset of the javascript that means we can write all the javascript code inside the typescript. Why will this question rise, then why should we use Typescript instead of Javascript. Basically some of the additional features were supported or provided by the Typescript that are not available in the Javascript.

They are Strong Typing, Object Oriented Features, Compile Time Errors 

Typescript was finally converted into Javascript because not all the browsers have the same version of JavaScript. So companies need to support all the browsers not all users use the save Browsers and as well as same platform. To resolve these kinds of issues the Typescript compiler compiles the Typescript code to common code that will run in all the browsers.

How to install typescript

first we need the JavaScript runtime environment in our platform

to check the installation

node -v

to check the node package manager

npm -v

to install typescript in our computer we have to install the typescript package using the node

npm install -g typescript

download and install the typescript globally in our system. So in this way we can typescript anywhere in our computer using the tsc command

tsc -v

// file.js
var teststring  = “this is a string”;
teststring = 1;
teststring = function (a , b) {return a+b};
console.log(teststring );

This javascript code says that we are unable to use any fixed value for this teststring variable. For this small code this is ok but if I face this kind of problem in the production means literally it can take a long debugging time. So to avoid those kinds of issues we can use the typescript, it will say all the errors in the compile time, it helps to resolve immediately before the production it reduces the debugging time.

To avoid all these conflicts, if we define type for each variable what it should want to be, by this way we do not need to worry about getting any other types. Typescript ensure what type want to be in each variable.

file.ts
var teststring: string  = “this is a string”;
teststring = 1;
// now it would not all to define any other type rather than the string
teststring = function (a , b) {return a+b};
// same as now it would not all to initialise the function for this variable
console.log(teststring );

let we try to compile this typescript code

tsc file.ts

we can able to see the compile this Typescript code compiler error but it would not stop the compilation, it ensures the same types

how many types in the JavaScript

var mystr:string = “test”;
var mynum: number = 100;
var mybool : boolean  =true; 

mystr = 100;
mynum = true;
mybool = “true”;

If we use a typescript extension installed with texteditor, we can be able to see the error in the editor to resolve them.

Even if we compiled it, the type script compiler will show the errors however the code will be compiled into javascript.
We can test it in the node or any other javascript runtime environments.

conditional operator

boopalan — Thu, 04 Jun 2026 16:59:48 +0000

Assignment operators in javascript
assignment operator is used to assign values to the variables, if we assign a different value for again and again the operator will assign the values what we finally assign to it.
Example

> a = 10
10
> a = "hello"
'hello'
> a = []
[]
> a = {}
{}

combination of assignment operator with the arithmetic operations

addition assignment operator ( += )
subtraction assignment operator ( -= )
multiplication assignment operator ( *= )
division assignment operator ( /= )

Comparison Operators
it checks the left and right hand sides values is whether it is equal or it is not equal, wherever want to compare two values in our programs logic. Based on the scenario we not only need use the equality some time we may need not equal less the, greater than and so on, let we see one by one some of the javascript comparison operations

loose equality ( == )
strict equality ( === )
loose inequality ( != )
strict inequality ( !== )
greater than ( > )
less than ( < )
greater than or equal ( >= )
less than or equal ( <= )

Logical Operators

it is used to determine the logical flow of program, we may need some time our program want to follow more than one condition on those scenarios we have to check all the condition in this case we can use AND logical operator, some time we have to any one of the condition, other then this we can do NOT operator it will help to check was it is opposite to our specified term.

AND operator ( && )
OR operator ( || )
NOT operator ( ! )

conditional operator

In our program flow whenever we want to do some specific tasks we can do those things in the conditional operator. If we want to run a block of code for specific conditions we can be able to do it, in addition we can add as many conditions as possible.

It looks block by block, we can specify if we want to check all the conditions, any one of the conditions. Whenever the conditions pass it executes the block of code.

Examples

here we are going to check does out values is passes or if not passes

zero = 0;
if ( zero == 0) {
    console.log(“here our condition is passes”)
}

here our condition is passes, hence because of our condition passes so it run the block inside the if block

example for opposite case if our condition was not pass


zero = 1;
if ( zero == 0) {
    console.log(“here our condition is passes”)
}

using else block

instead of skipping if our if condition fails, suppose if we want to execute any other block whenever our if condition fails in those cases we can use the else block

odd = 1;
even = 2;
if (odd == even){
console.log("they equal")
}
else{
console.log("not equal")
}

NOTE: we cannot use directly without else condition block without if condition block.

we cannot use it directly
else{
console.log("not equal")
}
``



Else if block



    up to now we only seen if and else block, if we want to check one then one conditions we can use many if’s along with the else so that instead of skipping that block it check condition and if passes the block will executes

marks = 100

if (mark >= 90){
console.log(“Grade A”)
} else if(mark >= 80){
console.log(“Grade B”)
} else if (mark >= 60){
console.log(“Grade C”)
} else {
console.log(“Grade D”)
}

RCB = 20
CSK = 23

if (RCB > CSK) {
console.log(“RCB wins”)
}
else if(CSK > RCB){
console.log(“RCB wins”)
}
else{
console.log(“DRAW”)
}

marks = 80
attendance = 4

if ( mark => 60 && attendance >= 2 ){
console.log(“PASS”);
}
else{
console.log(“FAIL”);
}

implicit and explicit type conversion and Arithmetic operations.

boopalan — Wed, 03 Jun 2026 15:27:19 +0000

implicit type conversion

for doing operation in between the type need same types. But in real world programming we cannot always expect that we will be performed in between the same types. In those cases we have to handle different types, JavaScript has some in-built behaviours to handle different types, that is called implicit type conversion.

It will automatically convert the other type to a suitable type for doing operation whenever needed.

For example if we do an addition operation in between the string and the number.

“hi” + 4

it was converted that another type to string

is it similar if we do

“hi” + 4

in another case suppose if we do subtraction in between the two type what will happen

“10” - 30

this time we will get different answer because instead of converting one type to another type it convert the string into to Number type(we cannot be perform subtraction between the string types, so it convert the string to Number and we finally get the -20)

explicit type conversion:

What is the difference between Implicit and Explicit Type Conversion?

implicit: Done automatically by the compiler. It safely promotes smaller types to larger types (e.g., short to int or int to double) to avoid data loss.

Explicit (Casting): Manually enforced by the developer using a cast operator (e.g., (int)myDouble). It is used to convert larger types to smaller types, carrying a risk of truncation or data loss. [1, 2, 3, 4, 5]

TBD

what will happen If we need to convert the Non-Premitive types to non primitive type case
can we be able to do operations between the non-primitive types.

subtraction operator

just like the name it is used to perform the operation between the Number types of element

examples (trying this in the browsers console or any other JavaScript runtime environments in the machine )

10 -5 // 5
50-50 //0

**
multiplication operator**

if we perform operation between the Number it will multiplay, But if we perform the operation between the String and the number it will return NaN(not a number)

10 * 10 // 100
“10” * 10 // NaN

division operator
As well as division is one fundamental operation in the maths and it will helps for us in several area

10/1 // 10
5/5 // 1

In this example it gives us Number type, suppose if we perform an operation that gives us irrational numbers, then how it will be handled by the JavaScript.

Example

it is runned inside the nodejs

> a = 10
10
> b = 7
7
> c = 10/7
1.4285714285714286
> typeof(c)
'number'
>

when you notice the type of the c, it value is irrational but if we see the type it is actually a number,

In many other programming languages the float or irrational number is considered as the different data type but in JavaScript it is considered as the Number.

modules operator
to check the remainder between two number will help many scenarios, For example to find the odd or even


> 11%2
1
> 11%3
2
> 11%11
0
> 11%1
0
> 23%3
2

exponential operator
it is used to find the square of a math number.

> 2**3
8
> 2**1
2
> 2**0
1
> 5**10
9765625
>2**3
8

increment operator
most case we will use the increment operation in the for loop and while loop, here we will see that how it was working

let I = 1;
I = I + 1
console.log(I) // 2

let I = 1;
I ++
console.log(I) // 2

decrement operator
Just like the increment we will use the decrement operator, it also works like the increment but instead of increasing count it reduces the count.

let I = 1;
I = I - 1
console.log(I) // 0

let I = 1;
I --
console.log(I) // 0

post increment and decrement operator

It see the increase operation deeply it was actually first use the values in stored in the variable and later it is increase the value that’s why it is called post increment

post increment operator


let I = 1;
console.log(I++) // 1
console.loglet


I = 1;
I ++;
console.log(I++) // 2(I) // 2

post decrement operator

let I = 1;
console.log(I--) // 1
console.log(I) // 2


let I = 1;
I --;
console.log(I--) // 2

**
pre increment and pre decrement operator**

suppose if do now want to use the values first and then increase the value in the variable, you want to first increment or decrement the value first and then you want to use the values in the program you also do that with the help of the pre increment and pre decrement operators

pre increment operator

let I = 1;
console.log(++I) // 1
console.log(I) //

I = 1;
++I;
console.log(I++) // 2(I) // 2

pre decrement operator

let I = 1;
console.log(--I) // 1
console.log(I) // 2


let I = 1;
--I;
console.log(I) // 2

Question of the question based on our learnings

let I =5;
let j = 7;
result = i++ - --j + ++j i++;
log(i,j,result)

Variable in javascript

boopalan — Wed, 03 Jun 2026 03:42:42 +0000

javascript is a dynamically typed programming language, so we do not need to use the type while using the variable values.

Variable declaration?

First we want to define the variable name, only defining a variable is a declaration. Later you can give the values to those variables

example

variableDecleration;

*declaration and initialisation *

suppose if you define and give the values in the same line then it is said as both the declaration and initialization.

example

username = “ajith”;

Later we can use this variable wherever we want to use the values in the variable.

Keywords in variable declaration.

Simply we can declare a variable without any keyword like the above one. But it is not a preferred way to create variables in javascript. There are some preferred ways to declare variables in javascript. Let We see them one by one

*using var keyword *

It is the initial keyword used in javascript to define variables. To define variables but it caused many issues in the later part of the code. Let we see them how it case problem in later part of the code
it allows the variables to be defined several times, it reduces the code quality of the code.

Example

    var zero = 0;
    //  code 
    // if use define the code once again it again create the variable again 
    // defining the same variable again and again is not good code, it reduces the code quality.
    var zero = “hello”

to reduce the issues and drawbacks in the var keyword they created the let keyword.

Let stops the develops to define the variable again

Example

let zero = 0;
    //  code 
    // if use define the code once again it again create the variable again 
    // defining the same variable again and again is not good code, it reduces the code quality.
    let zero = “hello”
    // this time javascript would not allow the developers to define once again 

but it allows the developers to change the values of the variable

example
    let username = “user1”
    username = “adminuser” // it allows to change the values

Sometimes we do not need to change the values again. For those cases they introduce another keyword.

Const keyword
it does not allow the developers to again and again, also it does not allows to change the values of the variables those using the const keyword

example

const isAdmin = true;
    const isAdmin = false; // it does not allow to change the values again
    isAdmin = 0; it does not allow the define again ;

arithmetic operation in javascript

addition

10 + 4 = 14
30 + 10 = 40

exmple

let a = 20;
let b = 30;
let c = a + b;
console.log(c) // 50

in other types of datas

“10” + 1 = 101

subtraction

15 -5 => 10
5 -15 => -10

let a = 20;
let b = 30;
let c = a - b;
console.log(c) // -10

suppose if we have other then number casues this kind of issues
‘15’ -5
10 + “5”
10 + true

here it will try to convert the types two different types into same time, for that it will convert the sting to number, here we are given the number as a sting and we got the result

suppose if we define the a string as a number what will happen
‘abc’ -5

it will try to convert the non numbers to number, here the ‘abc’ are not number so it say ‘NaN’

and NaN + number is NaN

why javascript

boopalan — Mon, 01 Jun 2026 18:13:57 +0000

Why javascript?
HTML and CSS make the web awesome. But to add some additional functionality to increase interactivity in web pages. JavaScript was created by Brendan Eich in 1995 while he was working at Netscape Communications Corporation. Initially it was named as mocha but later it was renamed as livescript but to increase marketing purpose they renamed it as JavaScript. Later it was adapted by all browser

What is javascript?
It is a scripting language. It is a dynamically typed programming language. It interprets the code in the browser and gives the output in the Browsers console. Is there any other place we can be able to run the javascript.

how we can add javascript to the web pages.
We can add it just like the style sheet but with different tag. This time we are using a script tag to add javascript’s interactive script along with html. Another one, an American software engineer has an induction on how to run javascript in computers. He takes the chrome browsers javascript V8 engine and adds the environment in the computer actually it word and without relaying the browsers those who all are interested running JavaScript in native nodejs will help them. But it will work without the browsers interactions.

Type safety
javascript is dynamically typed and it causes many issues in the larger codes, so Microsoft invented the Typescript, it compiles the statically typed typescript program into save javascript program.

ECMAScript
It was created in 1995 by the Netscape, because of its impression and interactivity competitors like Microsoft and others developed their version of the Javascript, it forces the developer to write their own version of code to service the business all the browsers. To resolve the issue Netscape submitted the language to Ecma International in 1997 to create a universal standard. They named the standard ECMAScript due to trademark issues with the word "JavaScript".

Example:

<script src=”main.js” ><script>

src is the attribute used to locate the source file of the JavaScript code.

Otherwise
we can add the javascript directly to the html file using script tag
example:

<script>
// what ever we write here it will start executing javascript code
</script>

hello world

printing “Hello world!” is the convention of learning a new programming language. How to do it in JavaScript.

<script>
console.log(“Hello world!”)
</script>

or otherwise we can include it by scriptfile

//helloworld.js
console.log(“Hello world!”)

//index.html
<script src="helloworld.js” ><script>

it will give the output in the Browser console log
shell we run the javscript the nativelly, we will run it by

$ node helloworld.js
//helloworld.js
console.log(“Hello world!”)

running the typescript file

$tsc helloworld.js

//helloworld.js
console.log(“Hello world!”)

Other than this run time environment there are some other types. For example Deno, bun. Deno is written entirely in rust to the node's complexities and Bun is written completely in new programming language zig. Zig out performs all this runtimes

Data Types
According to the ECMAScript standards JavaScript has eight built- in datatypes. This eight data type is divided into two types. There types are divided into two main categories : primitive data type and another one is non-primitive data type.

To run Deno

$deno filename.js

To run Bun

$bun filename.js

The primitive data type has seven types and the non-primitive data type has one type.

Primitive data type

String
Number
BigInt
Boolean
Undefined
Null
Symbol

And the non-primitive type

Object

meets may- 30

boopalan — Sat, 30 May 2026 17:32:28 +0000

Great time in https://meet.jit.si/tholkappiyar_ruleset_discussion weekly meet
Here the discussions are about https://github.com/tshrinivasan/iyal-tamil-spellchecker work flow, how to integrate both of them.

Other than this, I got clarification about docker's digests and its needs. Idea of why are using commit ids to maintain the relation between builds and source.

Animations and Transforms

boopalan — Fri, 29 May 2026 17:40:04 +0000

Css animations

CSS provides keyframes to create animated effects in the webpages. Inside the keyframe we can define the rules to the flow of the animation to the elements.

The keyframes syntax will look like

@keyframe Name_of_the_Animations {
    here you can define the animations
}

inside the keyframes we have to define each step, here each step means from the beginning to ending of the animation competition. We are able to add several stages, for example how the initial stage the element wants to animate and how it looks in the middle of the animation, how it wants to appear, and finally how it wants to end. Not only with these steps we can add more and more steps in between the starting and ending and also we can be able to do as many as possible steps to attract animation.

Here you can say the animation first we use the percentages.

We want to define the steps of what our element wants to do at the exact moment of the whole animation duration.

Definitely the 0% and 100% will the starting and the ending of the
animations. Suppose if you want to add any particular change at the middle of the animation it wants definite at the 50%.

lets we try the pulsing animation


.btn {
background-color: green;
height: 50px;
width: 50px;
border-radius: 50%;
animation: MovingRightToLeft 7s;
animation-iteration-count: infinite;
}

@keyframes MovingRightToLeft {
0% {transform: scale(1);}
20% {transform: scale(1.2);}
50% {transform: scale(1.4);}
60% {transform: scale(1.5);}
75% {transform: scale(1.1);}
50% {transform: scale(1);}
}


<div class="btn">
</div>

Animation properties

animation-name : keyframe name
the keyframe name must be defined if you give a random keyframe name it does not work.

we can be able to define more the one animation

animation-duration : how long you want to animate it, mostly here developers use seconds to define the duration time, eg: 2s is equivalent to 2 seconds.

Animation-delay : when it want to start to progressing the animation,

animation-iteration-count : how many time you want do that animation for you object, you can define here n countable time, and even infinite

animation-timing-function: how the animation progresses through the duration of each cycle; there are some of the types in the animation-timing-function and they are linear, ease-in-out, ease-out, ease-in

animation-direction: helps to define the animation direction does the animation want to play only in the forward direction or reverse direction otherwise play in an alternate(both reverse and the forward)

animation-fill-mode: it helps to define what styles are applied to an element before the animation starts (during a delay) and after the animation finishes.

this is the one the animation given in the MND documentation

<h1 class="grow">
welcome
</h1>


.grow {
font-size: 20px;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: grow-animation 3s infinite;
}

@keyframes grow-animation {
0% {
font-size: 20px;
}
100% {
font-size: 70px;
}
}

Transform property

This property helps to allow you to visually alter the elements by rotating, scaling, skewing and moving them in 2D or 3D spaces.

This transform provides some core functions to implement the visual altars.

translate(x-axis, y-axis) : using this property we can be able to translate the object to give a and y axis coordinates, it starts from the current position of the object to make move the element appear in the give coordinates

or otherwise you can do it only any one of the direction

translate(x,y)
translateX() only one the x-axis
translateY() only one the y-axis

rotate(angle) it will tilt the object to the defined angle in this function.

Scale(x,y) it helps to make to grow the element or shrink the elements

similarly like translate you can do it only any one of the direction

scale(x,y)
scaleX() only one the x-axis
scaleY() only one the y-axis

CSS part-2

boopalan — Wed, 27 May 2026 16:10:52 +0000

Padding properties

Similarly padding acts like margins but rather than giving the space outside the elements it provides spaces inside the elements.

padding: 10px;

it act all the four sites of the elements

In case if you need to add any one side you can do it by specifying which one side you want to add, it will provide the padding to respective sides you specified

padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;

In specific scenario if you need to specify all the four sides with distincts padding it will help

padding: 5px 10px 15px 20px;

If you want to add same padding on the vertically and same padding on the horizontal side this will help to do it

padding: 5px 20px;

With the same horizontal padding you want to adjust the right and left with it

padding 10px 5px 20px;

Border properties

By border property we can adjust the width, color and styles by specifying with your requirements. We have to give the width of the border and style the border with a specific colour.

border: 1px solid green;

There are several styles we can add to the borders that are

Double
Solid
Group
Inside
Outside
dotted

It also provides to do to this three specific properties either any one of these sites we can specify here

border-right-width:2px;
border-right-color:red;
border-right-style:dotted;

In this way we can apply for all the four side with each one side distinct styles

Adding comments to the style sheet

In many cases the code grows much larger. In those scenarios we may sometimes forget why we define them instead of making confusition, comments that will help us identify immediately.

/*
comment
*/

Display property

For responsiveness in media queries we will use display property highly, by changing the display properties we were able to decide which division wanted to display in the screens throughout this property.

! important
This property breaks all the previous class behaviours and implement what we finally defined here

Pseudo class

How to access the first child and Last child

<li>apple</li>
<li>pear</li>
<li>mango</li>
<li>banana</li>

First child
It will select the first child in the list of same elements

li:first-child{
color : red;
}

To select the last child of the

li:last-child {
color: green;
}

Colours

_Hexadecimal _
It contains # at the beginning and followed by six digits of numbers in the base-16.
Syntax look like

#RRGGBB

It ranges from the 00 to FF
If you want to specify the green by using the end of the range in the green palace and make the remaining positions by 00

color: #00ff00;

RGB
Here we will specify the color inside the rgb between the range of 0 to 255,

color: rgb(255,0,0);

Rgba
It is same as the rgb but additionally we will pass the transparency to it

color : rgba (0,0,255, 0.5)

Box shadow
It will help to specify the shadows around the elements

Syntax

box-shadow : horizontal offset vertical offset, blear radius, density spread color;

Mostly not all the bowsers support this box-shadow to support the mozilla and shafari
We have to use this

–webkit-box-shadow: horizontal offset vertical offset, blear radius, density spread color;
–moz-box-shadow: horizontal offset vertical offset, blear radius, density spread color;

CSS

boopalan — Tue, 26 May 2026 16:57:14 +0000

Units
it helps to define the properties metrics

px: it is the default, eg10px
vw: it take the whole view width of the screen, eg 100vm
vh: it take the whole view height of the screen, eg 100vh
%: it occupies the defined ration in the screen, or in the parent’s. Eg 50%

Typography:
line-heigth: In a paragraph, it helps to define the hight between the first and second line to the whole paragraph
letter-spacing: helps to spaced add between the two letters,
word-spacing: similarly like the letter-spacing, but it add spaces between the words
text-intent: in news letter, articles we can be able to see the initial intents to the paragraph, that same thing can be done with the help this property in the web page.

*Selectors *

universal selector
it will reset all the default css properties to all the elements in the html tags

* {
    padding : 0px;
    margin: 0px;
}

element selector

we can be able to select the html tags directly in the css, and defining all the properties to it will reflected in the pages
eg

body {
    margin : 10px;
    padding : 5px:
}

class selector

we will add the class attribute to the html tags and then we select the class in CSS using class selector and define the properties to them

example

select the .para class and add the properties in css

.para {
    word-spacing : 20px;
}

id selector

it do same as the class selector but instead in a different attribute called id

select the .para class and add the properties in css

#para {
    word-spacing : 20px;
}

note class selector want to select in the . Prefix and the id selector want to select in the # prefix

Font properties

font-family : here we can be able to select the font family
font-style: the we can be able to change the style like, italic, bold,
font-size: here we can define the font style in the px or in other units
color: just like the the name of the property it for color, similarly like the units color also have some different units.

Opacity property
it make the opacity property having tags to transparency. We give the value in the 0:1 ratio.
Example

div {
    opacity : 0.5 // half transparency
}

Text properties

text-decoration: we can be able to add the decoration for the text like the underscore, overline, line through the text.
Text-transfrom: using the text transform property, we can can the lowers to upper, upper to lowers and more.
Vertical-align: some time there will have some need to add the subscript and super script for the letter, on that scenarios we can use it

List properties

list-style: it helps to specify the list look like to a circle, disc, square, and more
list-style-image: instead using the build in styles we can be able to set an custom image to act as an list style.
List-style-type: some time we have some need to use the different list style, instead of defaults on those scenario it helps to use the roman, alpha, greek, latin, this property supports for the both upper and the lowers cases fort this list style types.

Margin property

margin: 10 px; it adds 10 px margin all the sides

instead if you want to define any one side, you can be able to specify which one particular side only want to add margin

margin-top
margin-left
margin-right
margin-bottom

if you in the situation of adding both the right and left where same width, and the top and bottom where same width, you can be able to use it
margin : vertical px horizontal px

otherwise both the top and bottom(horizontally) same size and the left and right are in the different size we can use this

margin top px, horizontal px right px

HTML

boopalan — Fri, 22 May 2026 16:49:08 +0000

What is HTML?
HTML stands for Hyper Text Markup Language.

What is meant by Markup Language?
It does not mean by a programming language, rather than programming it actually defines and gives structures for the contents in the web pages, by using them we define how each and every contents want to appear in the browser whenever we open any web pages.
How to identify it was a html and it has the annotations for the web content. By defining .html at the end of the filename any one can identify a html
How does it work?
In html everything is tags, it only knows tags, if we say anything to do it, we want to define that in the specific html tags.

How will tags look?

<tagname> content </tagname>

Whenever we define anything in html we want to use the tags, there are several tags available in the html, each one was created for specific use cases, mostly every tag have starting and ending tags, some could not have ending tags. The ending tag looks exactly like the starting tag but it begins with slash(“/”) to ensure it was an ending tag.
Suppose if we want to define something in the web page means we want to use the correct tag for what we are going to define in the html page. For example to define paragraph we would have to use

tag, here we want to define first stating tag

what was we want to put it inside the paragraph and after the content must we have to use the ending tag

, it looks like exactly like this

this is the blog for the html page

.
creating the first html file.
for that first open a folder where you want to create the html file, the create file with .html extension and open it in a text editor,
every html file begin with the tag
inside the tag use the tag, if we define anything inside body tag that will be displayed in the html page, for instance we will define a paragraph inside the body tag

<html>
<body>
   <p>This is a paragraph.</p>
</body>
</html>

if we save it and open it the file in the browser we will see the paragraph inside what we have written in the

tag

there are several tags are use for define many things make appear in html

some of them are h1, p, button, table and more

h1 tag is used to ensure it was the heading of the page and it appears larger and bolder then the p tag.

<h1>this is the heading of the page</h1>

button is used to define button in the page,

<button>click me</button>

table helps to create table in the page

<table>
   <tr>
     <td>Emil</td>
     <td>Tobias</td>
     <td>Linus</td>
   </tr>
 </table>

best practice for writing html

Use semantic tags:
using appropriate tags such as header, footer, section, nav, will improve the structure and the accessibility of the our web page, Also it helps other use to understand other developer to understand we the tags are use

Include alt text for images:
Always using the alt attribute for the image helps accessibility.

Minimize the inline styles and scripts:
To keep our html cleaner and accessible using separate external css and javascript files instead of using inline style and script tags.

Ref :
https://en.wikipedia.org/wiki/Markup_language
https://www.w3schools.com/html/html_intro.asp