Forem: Ravi kumar

CSS selector

Ravi kumar — Fri, 10 Jun 2022 15:51:37 +0000

What are selectors

A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

Types of Selectors
There are various types of selectors in CSS. Some are:

Universal Selector
Type Selector
Class Selector
Id Selector
Child Selector
Descendant Selector
Adjacent Sibling Selector

Let's read about in details:

Universal Selector

The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div>, <body>, <p> or any of the others tag.

A common use is in the universal reset, like this:

* {
  margin: 0;
  padding: 0;
}

Example:

Type Selector

A type selector selects all HTML elements that have a given node name. For example, “a” would select all <a> elements and apply the CSS property values to them. “Input” would select all <input> elements, “span” all <span> elements and so on.

You can also use a defined namespace to restrict the type selector to elements only within that namespace.

Syntax:

elementname{ 
/* CSS property */
}

Example:

Class Selector

The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute. The class name is mostly used to set the CSS property to a given class.

Syntax:

.class {
    /*CSS property*/
}

Example:

Id Selector

CSS id selectors select any element in an HTML page, if it has an attribute called id, whose value matches the name of the id selector.
In a stylesheet document, the name of the id selector is preceded by a "#". If an id selector is combined with another or more selectors, id selectors must be preceded with a #. IDs should be unique in an HTML page i.e., same Id can't be given to multiple elements on a single HTML page.

Syntax:

#id {
   /* CSS property */
}

Example

Child Selector

CSS child selectors select an element which is a child of another element.

If, x, y and z are three HTML elements and z resides within start and end tag of y, and y resides within start and end tag of x; then y is called as a child of x; and z is called as a child of y.

 <x>
   <y>
     <z></z>
   </y>
 </x>

While writing child selectors, selectors must be separated with ">" combinator.

syntax:

parent > child{
    /* CSS property*/
}

Example:

Descendant Selector

The Descendant combinator is represented using a single space. It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector. Descendant selectors use the descendant combinators.

Syntax

selector1 selector2 {  
  /*  CSS property */  
}

Example:

Adjacent Sibling Selector

Match an element that is immediately after another element, but not a child of it.

For example, if we wanted all paragraphs that immediately followed an h4 to have green text, but not other paragraphs, we would use the following CSS rule:

Syntax

selector1 +  selector2 { 
  /* property declarations */  
}

Example:

Types of Loop in JavaScript

Ravi kumar — Fri, 10 Jun 2022 15:50:26 +0000

So What are loops?

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false. A loop will continue running until the defined condition returns false.
So question is that how many types of loop is available in JS,
let's discuss

for statement

A for loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop.

The for loop has the following syntax:

for (initialExpression; conditionExpression; incrementExpression){
   // code block to be executed
 }

here,

initialExpression — it is used to initialize the counter variables, and evaluated once unconditionally before the first execution of the body of the loop.
conditionExpression — it is evaluated at the beginning of each iteration. If it evaluates to true, the loop statements execute. If it evaluates to false, the execution of the loop ends.
incrementExpression — it updates the loop counter with a new value each time the loop runs.

Example

 for(let i=1; i<=5; i++) {
    console.log("The number for loop" + i );
 }

 // output:
 // "The number for loop 1" 
 // "The number for loop 2" 
 // "The number for loop 3" 
 // "The number for loop 4"
 // "The number for loop 5"

do...while

The do...while statement creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

A do...while statement looks as follows:

do
  statement
while (condition);

here,
The body of the loop is executed at first. Then the condition is evaluated. If the condition evaluates to true, the body of the loop inside the do statement is executed again. The condition is evaluated once again.
If the condition evaluates to true, the body of the loop inside the do statement is executed again. This process continues until the condition evaluates to false. Then the loop stops.

Example

var result = '';
var i = 0;

do {
  i += 1;
  result += i + ' ';
}
while (i > 0 && i < 5);
console.log(result);

 // output

   //  '1 2 3 4 5 '

while statement

The most basic loop in JavaScript is the while loop which would be discussed in this chapter. The purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates.

while statement looks as follows:

while (condition)
  statement

Here,
A while loop evaluates the condition inside the parenthesis ().
If the condition evaluates to true, the code inside the while loop is executed. The condition is evaluated again.
This process continues until the condition is false. When the condition evaluates to false, the loop stops.

example

let i = 1, n = 5;

while (i <= n) {
    console.log(i);
    i += 1;
}

 // output
 // 1
 // 2
 // 3
 // 4
 // 5

for...in statement

for...in is an important loop for JavaScript since it loops through all enumerable properties of a JavaScript object. In other words, if we have an object we can read all the values the object has using the for...in loop.
for...in is very helpful if we have an object we know nothing about, and this enables us to shift through properties and make decisions. This happens a lot with server calls. Also, this makes using prototypes easier since we can make a loop not knowing all the properties.

for...in statement looks as follows:

for (key in object) {
    // body of for...in
}

Here,
A for in loop evaluate in object. Property is key of object

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

for...of

ES6 introduces a new for-of loop that allows us to iterate over arrays or other iterable objects (e.g. strings) very easily. Also, the code inside the loop is executed for each element of the iterable object. The for...of loop doesn't work with objects because they are not iterable. If you want to iterate over the properties of an object you can use the for-in loop.

for...of statement looks as follows:

for (element of iterable) {
    // body of for...of
}

Here,
iterable - an iterable object (array, set, strings, etc).
element - items in the iterable

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

To summarize, a loop is a sequence of instructions that is repeated until a condition is met. The key difference between the two major types of loops is that a For loop will run a set number of times whereas a While loop will run a variable number of times. Two major uses of loops are to produce output and to search for information.

How to Copy object?

Ravi kumar — Fri, 10 Jun 2022 15:44:41 +0000

Hey guys, so this topic is about how to copy an object without changing the original one because sometimes we copied an object without knowing that accidentally we changed the original object too.

So Let's start

Understanding Deep and Shallow Copy

In a reassignment operation involving primitive data types such as strings, numbers, and booleans, the original variable is copied by JavaScript.

For example,

y = x //  x is copied into y

y++ // y is incremented

console.log(y) // now 4
console.log(x) // still 3

In this case, the value 3 is copied into y, and then x is disconnected from y. So mutating y does not affect x.

Conversely, with non-primitive data types like arrays and objects, only a reference to the values is passed. So when the copy is mutated, the original also gets mutated. This is also known as shallow copying.

let aalu = {name: "aalu"};

let bhalu = aalu;
bhalu.name = "bhalu";

console.log(aalu.name);  // outputs "bhalu"
console.log(bhalu.name); // outputs "bhalu"

If we instead want to copy an object so that we can modify it without affecting the original object, we need to make a deep copy.

So let's talk about copying Obj

1. JSON.stringify() and JSON.parse()

So first talk about what is JSON.stringify() and JSON.parse()?

JSON.stringify() : This method converts a JavaScript object or value to a JSON string.

JSON.parse(): This method parses a JSON string, constructing the JavaScript value or object described by the string.

We can combine both of these methods to create a copy of an object like this:

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
}

let clone = JSON.parse(JSON.stringify(user))

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
*/

When the copy object is mutated, the original object stays the same:

clone.age = 32

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
{
  age: 32,
  job: "standard file format and data interchange format",
  name: "JSON"
}

However, this will also create a problem when we are working with a function that was inside a function.

Suppose we have a method in our object user called incrementAge:

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
    incrementAge: function() {
         this.age++
    }
}

The function will not be available in the copied object. Thus, this method achieves deep copy only if there is no function within the object.

Object.assign()

Among the object constructor methods, Object.assign() is used to copy the values and properties from one or more source objects to a target object. It returns the target object, which has properties and values copied from the source object.

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
    incrementAge: function() {
         this.age++
    }
}

let clone = Object.assign({}, user) // Copies user into clone

clone.age = 32

console.log(user)
console.log(clone)

/*
{
     age: 21,
     incrementAge: function() {
       this.age++
     },
     job: "standard file format and data interchange format",
     name: "JSON"
}
{
     age: 32,
     incrementAge: function() {
       this.age++
     },
     job: "standard file format and data interchange format",
     name: "JSON"
}
*/

However, one thing to remember about Object.assign() is that the method only performs a partial deep copy on objects.

To understand what that means, let's consider the following:

const user = {
    name: "JSON",
    age: 21,
    job: "standard file format and data interchange format",
    location: {
      city: "Lagos",
    }
}

const clone = Object.assign({}, user)

clone.age = 32
clone.location.city = "New York"

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

{
  age: 32,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}
*/

Whenever we mutate a property within the nested object (in clone), it will also mutate the same property in the original object (user). While the age property in the original object remained untouched, the city property was mutated by the reassignment operation. Hence, the Object.assign() method should be used to deep copy objects that have no nested objects.

The Spread Operator(`...`)

Introduced with ES2015, this operator is just great because it is so short and simple. It ‘spreads’ out all of the values into a new object. You can use it as follows:

const obj = {
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

const copyObj = {...obj}

copyObj.job = "nothing"

console.log(obj, copyObj)

/*

{
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

{
  age: 21,
  job: "nothing",
  location: {
       city: "New York",
  },
  name: "JSON",
}

However, much like with Object.assign(), the spread operator only makes a partial copy. So any object with a nested object will not be deeply copied.

Lodash cloneDeep()

Lodash is a modern JavaScript utility library delivering modularity, performance & extras. Lodash also provides a utility method _.cloneDeep() for deep cloning of objects in JavaScript.

const deepClonedObject = _.clonedeep(originalObject);

You can learn more about this and its methods from
https://lodash.com/docs

Conclusion

As you've seen, there are many ways to copy a variable in JavaScript. None of them is perfect for every occasion, so you'll have to be careful to choose the best method for each situation.

The CSS position property

Ravi kumar — Sat, 04 Sep 2021 11:33:37 +0000

The position property specifies the type of positioning method used for an element and by position property we can manipulate the location of an element.
These are type of position value :

static
relative
absolute
fixed
sticky

And also global values like inherit , initial, revert, unset can also be applied to position property

Let's talk about each position values one by one :)

`static`

position: static;
static in the default position and it's position according to the normal flow of the page. In static top/bottom/left/right/z-index property has no effect.

`relative`

position : relative;
It behaves like a static but when we apply on of these property top/bottom/left/right/z-index then element will flow according to these CSS properties.

`absolute`

position : absolute;
The element is removed from the normal document flow and is relatively positioned to its first non-static ancestor. Its final position is confirm by the values of top/bottom/left/right.

`fixed`

position : fixed;
The element is removed from the normal document flow like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the viewport, not any particular parent, and are unaffected by scrolling.

`sticky`

position : sticky;
The element is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

CSS Box-Model

Ravi kumar — Sat, 04 Sep 2021 10:58:31 +0000

CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. The web browser renders every element as a rectangular box according to the CSS box model.

Box-Model has multiple properties in CSS. Some of them are given below:

content
padding
border
margin

Content area

The innermost rectangle, known as the content area, may contain text or other visual elements. It is bounded by the content edge and its dimensions are given by content box width and height. If the element is a block element, then the content edge can also be set with the min-width, max-width, min-height, max-height properties.

If the box-sizing property is set to content-box, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties

Padding area

Padding is the space between the border and content of an element. Padding is an important element in web design because it helps make content more visible and readable.

There are four padding properties,
padding-top
padding-right
padding-bottom
padding-left

All the padding properties can be changed independently or a short hand padding property can be used to change all the values at once.
Short hand properties syntax:
padding: padding-top padding-right padding-bottom padding-left;

Border area

It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.
The borders are calculated by the border-width and shorthand border properties.

Short hand border properties syntax :
border: border-width border-style border-color

If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties

Margin area

The space around the elements can be set using the CSS margin properties.

There are four margin properties,
margin-top
margin-bottom
margin-left
margin-right

In addition to the above four properties, we also have a short hand property called margin.
margin : margin-top margin-right margin-bottom margin-left;

Margin clears the area around an element the difference is that it takes care of the area outside the border.The margins are transparent and cannot have any background colors.

Calculating Overall dimensions

How to calculate the total width of the box,

The total width of the element would follow the following formula,
Total element width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

How to calculate the total height of the box,

The total height of the element would follow the following formula
Total element height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

After spending some time and getting familiar with the basics of the CSS Box Model, it can be helpful in designing the layouts efficiently.

Forem: Ravi kumar

CSS selector

Universal Selector

Type Selector

Class Selector

Id Selector

Child Selector

Descendant Selector

Adjacent Sibling Selector

Types of Loop in JavaScript

for statement

Example

do...while

Example

while statement

example

for...in statement

for...of

How to Copy object?

Understanding Deep and Shallow Copy

So let's talk about copying Obj

1. JSON.stringify() and JSON.parse()

Object.assign()

The Spread Operator(...)

Lodash cloneDeep()

Conclusion

The CSS position property

static

relative

absolute

fixed

sticky

CSS Box-Model

Content area

Padding area

Border area

Margin area

Calculating Overall dimensions

How to calculate the total width of the box,

How to calculate the total height of the box,

The Spread Operator(`...`)

`static`

`relative`

`absolute`

`fixed`

`sticky`