MERN Stack Interview Questions & Answer Series Part 3

Posted on July 1, 2023 By

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack. MERN Stack Interview Part 3.

Q21. What does enctype=’multipart/form-data’ mean?

The enctype attribute specifies how the form-data should be encoded when submitting it to the server.

1. application/x-www-form-urlencoded: Default. All characters are encoded before sent (spaces are converted to “+” symbols and special characters are converted to ASCII HEX values)
2. multipart/form-data : No characters are encoded. This value is required when you are using forms that have a file upload control
3. text/plain : Only spaces are converted to “+” symbols, but no special characters are encoded

Q22. What is difference between Select and Datalist?

For the select element, the user is required to select one of the options you’ve given.
For the datalist element, it is suggested that the user select one of the options you’ve given, but he can actually enter anything he wants in the input.

Q23. How does the browser rendering engine work?

In order to render content the browser has to go through a series of steps:
Document Object Model(DOM)
CSS object model (CSSOM)
Render Tree
Layout
Paint

Q24. What is the difference between standards mode and quirks mode?

In Quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5.
In Standards mode, the behavior is described by the HTML and CSS specifications.
For HTML documents, browsers use a <!DOCTYPE html> in the beginning of the document to decide whether to handle it in quirks mode or standards mode.

Q25. What is Critical Rendering Path?

1. Constructing the DOM Tree
2. Constructing the CSSOM Tree
3. Running JavaScript – parser blocking resource
4. Creating the Render Tree
5. Generating the Layout
6. Painting

Q26. What are the Benefits of Server Side Rendering (SSR) Over Client Side Rendering (CSR)?

1. Performance benefit for our customers
2. Consistent SEO performance
3. For SSR, the user can start viewing the page while all of that is happening and for the CSR, you need to wait for all of the above to happen and then have the virtual dom moved to the browser dom for the page to be viewable.

Q27. What does the lang attribute in html do?

1. The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.
2. Helps in styling pages by using them in css :lang() pseudo class Spelling and grammar checkers Language detection by search engine.

Q28. What is desktop first and mobile first design approach?

Desktop first: General selectors and styles designed to make the site look good on DESKTOP screens defined globally. But they affect all devices, and must be overridden by max-width media queries targeting minimum screen size.
Mobile First: General selectors and styles designed to make the site look good on small MOBILE screens go here. But they affect all devices, and must be overridden by min-width media queries targeting maximum scrren size.
In desktop first approach the media queries will be written with respect to max-width whereas in mobile first approach media queries will be written with respect to min-width.

MERN Stack Interview Part 3.

Q29. How to make page responsive?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
1. Setting the viewport
2. Use Responsive Images
3. Show different Images depending on Browser Width
4. Responsive Text Size
5. Media Queries

Q30. How geolocation api works in html5?

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

if ("geolocation" in navigator) {
/* geolocation is available */
} else {
/* geolocation IS NOT available */
}

Leave a Reply

Your email address will not be published. Required fields are marked *