Forem: Moreshwar Pidadi

Server, Web Server & HTML

Moreshwar Pidadi — Sun, 06 Nov 2022 04:30:00 +0000

What is a Server?

Program that provides the service to the other computers.
In this case the other computers can be also called as clients. And the term servers is being referred to where the request is being received for web file and being sent back to client.

As they are constantly providing the service they can't be shut down else there would be service interruption.
Below are some the examples for servers

1. Application server
2. Blade server
3. Cloud server
4. Database server
5. Dedicated server
6. Domain name service
7. File server
8. Mail server
9. Print server
10. Proxy server
11. Standalone server
12. Web server

Web Server

The term web server refers to both hardware or software or both working together.

There are 2 type of web servers

Static web server (Server the static sites) and 2. Dynamic webserver (Server the dynamic sites).

All the communication takes place with the help of protocols which are nothing but the set of instructions.

HTML Tags

There are total 6 levels of heading from H1 to H6.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

However because of accessibility concern we should not skip the sequencing of these tags.

Not Recommended

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

The Anchor element

Syntax:

<a href="destination_url">label</a>

This element or tag creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
This element has a attributes, download, href, hreflang, ping, referrerpolicy, rel, target, type.

To link the phone number

<a href="tel:+91 125466555">Call Us</a>"

o/p: Call Us

To link email

<a href="mailto:test@gmail.com">Email</a>

o/p: Email

We can also enclosed the <a> tag withing other tags/elements like <p>, <strong> etc. and some tags within it as well.

And we use target attribute to open the links in new tab.

Ex:

<a target="_blank" href="https://www.test.com">Test</a>

This will open the link in the new tab.

SETs and MAPs in JS.

Moreshwar Pidadi — Sun, 13 Mar 2022 03:07:40 +0000

SETs

In JavaScript untile now we have used or quite familer with the ARRAYs and OBJECTs but in addition to it we have 2 more data structure in JS i.e SETs and amd MAPs.

1. SETS

Sets stores the unique values i.e it may be premitive values and object references.
When we say Unique Value that means there is no duplication of values get's added in collections.

Sets looks similar to array, also there are no key & value pair, so basically it the bunche of value clubed togeather.
Just like arrays sets are also itterables.
As the values stored in sets are unique the sets are different from arrays.
Here are a few properties and methods which are used to explore this data structure in detail which are as follows
SIZE
To find out the size/length of the sets collections.

const test = new Set("Moreshwar");
console.log(test.size);
// 8 as the 'r' is duplicated and hence its been excluded

has()
To check if set has certain "value" in it collections, whoever the o/p is true or false boolean.
add()
To add the value in set collection.
delete()
In order to delete the value from the set.

**Note**: Once we use _add()_ and _delete()_ methods the size of every sets i.e collections gests updated.

Sets are itterables and hence they can be loop over and we can use for of loop for the same.
As the ARRAY and SETs both are itterables conversion from array to set is quite comfortable (...) spread operator will work on all itterables.

Howerver, sets are not intended to replace an Arrays, Incase if you have to store the value which will consist of duplicate we will go for array.

MAPs

Just like an Object, data is stored in KEY & VALUE pair in the MAPs.
However the only difference is the KEYs in Map's can have different type's(i.e nubmber, string, Array, Other Maps etc ).
In Objects teh key is always a string and in Maps there can be any type of key.
Following are some methods to handle Map Data Structure.
Set() => To add the data into the Maps collections.
We can also set the chain scope for adding data into Map's collections.
By giving a call to the SET() methods gives us and updated maps and hence we can call SET() again on the same hence we can do chain scoping.
get() => To get the value from the maps with the help of KEYS.
has() => To check if the Map Collection has a certain keys or not.
delete() => To delete the value form the Maps collections with the help of KEY.
size() => To calculate the size/length of the Maps.
clear() => To remove all the elements form the map also can delete the value based on KEY.

Maps too are itterables hence we can use the loop for the same.
Maps can be converted to ARRAYs by using (...)spread operators.

Strings in JS

Moreshwar Pidadi — Sat, 05 Mar 2022 20:42:17 +0000

The string object is used to represent and manipulate the character.

Note: that JavaScript distinguishes between String objects and primitive String values.

String literals (denoted by double ("Moreshwar") or single ('Moreshwar') quotes).
Strings returned from String calls in a non-constructor context (that is, called without using the new keyword) are primitive strings.
JavaScript automatically converts primitives to String objects, so that it's possible to use String object methods for primitive strings.
In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.property lookup.

Some of the useful methods for strings are as follow.

1. string.length()

const firstName = "Moreshwar";

console.log(firstName.length); // o/p: 9

console.log("Moreshwar".length); // o/p: 9

Behind the sceen the method is been call'ed (i.e PREMITIVE Strings).
JS will automatically convert existing String to String Object with same content.
Hence, above example would be like new String("Moreshwar").

2. string.slice(BeginParamater,EndParameter)

console.log(airline.slice(2, 5));

Creates substring, if we do not specify the ENDSTRING everything will be extracted.

console.log(firstName.slice(2, 5)); // o/p: res

console.log("123456789".slice(-4)); // o/p: 6789

3. string.split("parameter")

The split()method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.

For Ex.

console.log("Moreshwar".split());
console.log("CODE + DAILY".split("+")); // ['CODE','DAILY']

4. string.join("parameter")

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.

For Ex.

let name = ["Mr.".toUpperCase(), "Moreshwar" ,"Pidadi"];
console.log(name.join()); // MR. Moreshwar Pidadi

5. string.padStart(targetLength, padString)

The padStart()method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.
The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.

const message = "Hello every one this is string 
method padStart() and padEnd()";
console.log(message.padStart(0, "*"));
console.log(message.padStart(50, "*").padEnd(35, "#"));

o/p:

****Hello every one this is string method padStart() and padEnd()
***Hello every one this is string method padStart() and padEnd()######

6. string.repeat(number)

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

console.log("Moreshwar".repeat(5));

o/p: 
     Moreshwar
     Moreshwar
     Moreshwar
     Moreshwar
     Moreshwar

this keyword in JS

Moreshwar Pidadi — Fri, 04 Feb 2022 22:35:07 +0000

As we know Execution Context (EC) consist of

Varaiable Enviornment
Scope Chain
this keyword

So lets explore this keyword more.

"this" keyword/variable in JS.

this is special variable that is created for every Execution Context (EC) i.e for every function.
this takes value of (or points to) the owner of the function in whcih the "this" keyword is used.
Remember "this" is not static it depends on how the function is called, and it's value is only assigned when the function is actually called.

As we know the function can be called in 4 different ways

a. method => this = <object that is calling the method>

Call to the function moreshwar.calcAge();

Note: The value of _*this *_should / is moreshwar

As we can say now that this is object giving call to method.
So, using this we can now access the properties of an object. Accessing the properties using (this) is a way better solution.

b. Simple function call: where this = undefined

Note: its is valid only for strict mode

Ex.

If not strict mode this will point to Global object / Windows object. Which can then be more problamatic.
This is reason we should always be useing strict mode.

c. Function call using Arrow function

i.e ArrowFunctionName => = <this of sorounding function (lexical this)>
In Arrow function it does not get the "this keyword".

d.
EventListner => this = <DOM elements that handler is attachedto>

Hence, this will never points to the function, where we are using it, it would point to the object (parent object).
Also "this" keyword will never point to the variable enviornment of the function.
"this" keyword in Global Scope is always Windows Object, which make this keyword dynamic not static.

Execution of JS Code 🧑‍💻👨‍💻

Moreshwar Pidadi — Sat, 15 Jan 2022 09:09:45 +0000

Let's assume our code has just been complied, post compliation the Global Execution Context(GEC) is created. There can be only one GEC irrespective the size of JS project.

Inside the Gclobal Execution Context(GEC), the top level code is been executed (i.e Code which is out side the function is executed).
This includes variable decleration, functions which are decleared etc.
But remember the code inside the function is NOT been executed, it shall be executed only when the function is been call.

Here 1st we should find out What is Gobal Execution context/ Execution Context and how is it important.

Enviornment where the piece of code JS Code is executed such as loal variables, arguments passed in etc.
In short the JS Code always run inside the Execution Context.
As there can be always one GEC , there is an default context where the code is executed.
For every function call there is new execution context is created. Which contains all the necessary information required to excute the funcion.
Once the Top level code is finished the top level code is executed.

What is Inside the Execution Context?

Variable Enviorement
- let, const, var, Decleration.
- Functions
- Aurgments Object (All function arguments that current execution context belong to).
The Function get's its execution context as soon as its been call.
- So all the variables decleared inside the function shall be executed, and these can also be accessed outside the function.
- This is possible because of the Scope Chain.
- Scope Chain are the references to the variable loated outside the function.
- And to keep track of each function it is been stored in Execution Context.
Each Execution Context gets this keyword.
- So inside the execution context
  1. Variable Enviornment
  2. Scope Chain
  3. this keyword

(Note: Arrow function do not get this keyword and argument object insted they can if required use it from the closest parent function.)

Here call Stack comes into picture, Call stack is the place where execution context gets stacked on the top of each other to keep the tarck of where we are in the execution.

Once this is completed it would be removed from stack and control should be passed on to Previous Execution Context return statment from the function will indicate current execution context shall be poped out of the call stack.
And thus return statement plays and important role in givinig call to the previous execution context.
In the end Global execution shall be executed.
The Program will remian in state as is until its finished (i.e Browser window is closed.)

Thanks,
Moreshwar P

Modern JS Engine Workflow

Moreshwar Pidadi — Sat, 08 Jan 2022 21:22:16 +0000

JS Engine is a program that executes the JS code, every browser has its own JS Engine following are some of the examples.

Chrome - V8
Edge - Chakra
Safari - Nitro
Firefox - Spider Monkey

How does the code get compiled to machine code?

But before that, we need to know the difference between compilation and Interpretation.

Compilation

The entire Source code is converted into machine code at once and written to a binary file 0's and 1's which can be executed later processor.

The Source Code gets Complied and covert the portable file (machine code) and then its portable files get executed and we are now able to run the program.
It's a 2 step process 1. compilation and 2. Execution.
Always remember the execution would take place after compilation only.
For Ex. whatever files or programs you are now executing are already complied with are ready to be executed as you are just hitting the trigger to execute them.

Interpretation

The interpreter Runs through the source code and executes it line-by-line.

JS initially used to be interpreted language, and the problem with interpreted language is they are much slower.
Whereas in modern JS, low/slow performance is not at all acceptable, However, modern JS Engine, now uses a mix of both i.e Compilation and interpretation this is called Just-in-time compilation.

Just in time compilation

The entire Source code is converted into machine code, at once then executed immediately.

And here no portable file is created, hence code is executed immediately, which is a lot faster than executing the code line-by-line.
Where Source code is parsed and then converted into Abstract Syntax Tree (AST), this is very different from the DOM tree.
Now, here is the splitting of each line of code meaningful language. Ex: const, let, function, etc. Keywords
This piece of code is then saved into the tree in a structured way.
It also checks if there is only a syntax error. This tree then shall be used to machine code.

Following is a flow-chart for the Just-in-time compilation:

However modern JS Engine uses very clever optimization, strategies.
Like they create a very unoptimized version of machine code, in the beginning, just so that they can start executing the code as fast as possible.
In the Background, this code is optimized and re-complied in already/ongoing running execution, this can be done multiple times without ever stopping the execution.
This process makes modern JS fast, all this parsing, compilation, execution, Optimization happens in some thread inside JS Engine, which can be accessed from our source code.

By: Moreshwar P