Front End Interview Series- Part 4

Q31: List at least five tags that were introduced in HTML5.

1. <figure>: Mostly used to define images, pictures, drawing or illustrations. By definition, represents a piece of self-contained flow content.

2. <header>: Helps in writing semantic HTML. Represents the header of a section.

3. <nav>: Represents the navigation part of the document. Used to group navigation links.

4. <section>: As the name suggests, represents a section of the document which contains related information.

5. <audio>: Represents an audio stream. Can be used to play and inject audio into the document.

Q32: What are pseudo-classes in CSS?

Pseudo-classes are used in CSS to handle the styling of an element in a certain state. For example, : hover is a pseudo-class that can be used to handle the styling of an element when we hover the mouse over it.

.btn
background-color: blue
}
/*This will change the background of btn to red when hovered*/
.btn:hover{
background-color:red
}

Q33: How do you parse a JWT token in JavaScript without using a library?

JWT stands for JSON web token. It is a mechanism to safely transfer data between client and server. In order to ensure the authenticity of data, JWTs are signed using cryptographic alogorithm so that they cannot be changed once issued.

A JWT looks something like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

To parse it using plain JS we can make use of an inbuilt JS method called atob(). This is used to decode a base64 encoded string.

JWT token mainly has 3 parts: Header, Payload and Signature.

We have to decode the payload to get the encoded info.

const token ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
const tokenPayload = token.split('.')[1]
const decoded = JSON.parse(atob(tokenPayload));
console.log(decoded) 
/*
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}
*/

Q34: What does a meta tag do in HTML?

<meta> tag defines metadata about HTML documents. What that means is basic information about your HTML document. It always goes inside the head of the document. This can be used to describe the information like what the site is about, and who is the author. It can be used by browsers to optimize the search results on search engines.

Q35: What is CORS?

Cross-origin resource sharing is an HTTP-header-based mechanism that allows a server to indicate the origins from which the browser is allowed to load resources. Origin means the domain a website is on and for security concerns, it is not allowed browsers to access cross-origin resources. CORS headers make it possible. We can set the headers in our request to allow the site a.com to access resources from b.com.

Q36:What is the difference between async and defer?

Async and defer attributes in HTML are used to tell the browser to load the Javascript in the background whenever a <script> tag with either of these attributes set is encountered.

The major differences between these two are:

1. Scripts with async are independent of other scripts. That means they won't wait for other scripts or other scripts won't wait for them. They are executed as soon as they are downloaded.

2. Defer scripts on the other hand tells the browser to download the script in the background but only execute it after DOM is rendered.

3. Async scripts can interrupt the initial loading of the page because they will be executed right after they are downloaded so for that period HTML rendering will be interrupted.

Q37: What are enums and interfaces in Typescript?

Enums in typescript are used to define a set of named constants. They are mainly of two types:

1. Numeric Enums: These can be used to define constants with numeric values.

    /*Numeric enums*/
    enum BatteryLevel{
    FullyCharged = 100,
    HalfCharged = 50,
    NotCharged = 0
    }
   
    if(BatteryLevel.NotCharged){
    console.log("Please plug in the charger");
    }
   

2. String enums: These are used to hold a set of constants having string values.

    enum MaritialStatus{
    Single = 'Unmarried',
    Married = 'Married'
    }
   

Q38: What is webpack?

Webpack is a static module bundler for Javascript. It helps us bundle all of our Javascript and provide single or multiple entry points and internally builds a dependency graph and then combines all the modules that the app needs into one or more bundles.

Q39: What is the critical rendering path?

Critical rendering path is nothing but the number of steps the browser has to go through to convert HTML, CSS and JS into pixels on the screen.

It mainly has 4 parts to it:

1. DOM- Document object Modal: This is a tree-structured representation of the HTML document. The browser starts creating it as soon as it starts parsing the HTML. Although, the parsing might be interrupted by other resources such as Javascript. DOM represents HTML elements as nodes. This happens incrementally which means line by line, and whenever a <script> tag is encountered, the browser starts downloading the JS which can hinder the parsing, but it can be handled using various methods.

2. CSSOM- This is a DOM-like representation of CSS. It provides styles for our DOM elements. But this is not incremental, rather CSS is render-blocking, the reason being the styles of the content can be changed throughout parsing. So CSS styles are only applied after CSSOM and DOM both are parsed.

3. Render Tree: This combines our CSSOM and DOM. The browser checks every node and decides which styles apply to the nodes.

4. Layout: This decides the size and position of the elements on the screen. All the properties related to size and position will affect the layout, for example, width and relative position properties.

5. Paint: This is the final step after the render tree and layout are finished, the browser will start painting them on the screen.

Q40: What will be the output of the code below and why?

const a = {name: "John"}
const b = {}
b[a] = "Doe"
console.log(b)

This will result in :

{ [object Object]: 1 }

The reason is, "a" is used as a key here, which is an object, but in JS keys are strings, so JS will try to use it as a string. And if we try to use b["[object Object]"] it will give us the value 1.