Web Developer Interview Questions and Answers

In HTML, the <form> tag can be used to create a form for taking user input. <form> tags have various attributes.  

The action attribute is used to specify where to send the data entered in the form after the form is submitted by clicking the Submit button. Usually, the data is sent to the server.  

The method attribute specifies the HTTP method that should be used when sending the data in the form to the location specified in the action attribute. The default HTTP method used to submit the form data is GET. The form data can be sent either by GET or POST. If GET is specified, the data will be sent as URL variables. If POST is specified, the data will be sent in the request body.

Pseudo-classes in CSS are used to define special states of HTML elements. They can be used along with the existing CSS selectors in order to add styles to elements based on their current state. The general syntax of using a pseudo-class with a regular selector is

selector:pseudo-class {
          // styles here
}

The pseudo-classes are divided into different types such as:

1. Links: These classes are used to track the state of elements that contain a link. :active and :visited are two of the commonly used link-based pseudo-classes. The :active pseudo-class selects elements containing the link that is currently active. The :visited pseudo-class targets elements that have links already visited by the user.  
2. Dynamic: These classes can be applied to any elements to track their state that is defined by the cursor actions. For example, when a user hovers over an element, it can be tracked using the :hover pseudo-class. Similarly, the :focus pseudo-class can track the element that is currently focused on by the user.  
3. Structural: These classes allow selecting elements according to their exact numerical position with respect to their parent element. Commonly used structural pseudo-classes are :only-child, :only-of-type, :first-child, :last-child, :first-of-type, :last-of-type, :nth-child, etc.

The value of the margin CSS property can be negative. This makes it possible to move the element closer to its top or left neighbor, or move its right or bottom neighbor closer to the border. Depending on the value of the position property of the element, the behavior of the negative margin for that element will vary. However, a negative padding value is not considered valid.

The differences between HTTP and HTTPS are:

Both window.onload and onDocumentReady are used to perform operations when the web page has been loaded. However, there are differences in these in terms of execution.

window.onload is triggered when the DOM and all external resources like images and videos are loaded. Due to the loading of external resources, there is a delay in the execution of the actual script when the page is displayed. window.onload is not cross-browser compatible while using jQuery.  

On the other hand, the onDocumentReady method is triggered when the DOM has loaded, i.e it waits for the HTML elements to be loaded but not for multimedia content like images and videos. The DOM tree has been built when the onDocumentReady event is triggered. Thus, any delays in the execution of the script are reduced. Moreover, it is compatible with all browsers.

<canvas> and <svg> are two new graphical containers, used to create and store graphic elements in the HTML document. They have a few differences between them that are:

ECMAScript is the language standard for JavaScript, the commercial name/trademark of the language. Under ECMA, JavaScript is evolved and nurtured by the TC-39 committee.  

JavaScript is a scripting language that conforms to, or in other words, implements the ECMAScript specification.

Long polling is a technique for maintaining a persistent connection between the client and the server. It is used to push data from the server to the client. The connection is maintained after a request for new information has been made by the client to the server, until the data becomes available on the server and it is ready to send it to the client. The connection is closed when the server has sent the data to the client or a connection timeout occurs. The flow of long polling is:

1. The client sends a request for information to the server.
2. The server holds the client’s connection until new data is available.
3. The server responds to the client as new information becomes available.

Single Page Applications (SPAs) are those web applications that load only a single web document and then update that document when different content or layout is to be displayed. Single Page Applications do not require page reloading during use. This prevents the loading of whole new pages from the server, resulting in better performance with some disadvantages including SEO, state maintenance, etc. SPA is faster as compared to traditional multi-page applications as most resources like HTML, CSS, and scripts are loaded only once during the application lifecycle, and only the data is transferred multiple times from the server.

A staple in web dev interview questions, be prepared to answer this one.

Progressive rendering is a technique that is used to render content for display as quickly as possible. Here, small parts of a website are updated sequentially on the server and streamed to the client in parts instead of waiting for the whole page to be rendered. Once the critical content is rendered on the server, it is streamed to the client without waiting for non-critical content, which is streamed later. The browser progressively renders the HTML on the web page as soon as it receives a chunk of the critical content. As and when the non-critical chunks are received from the server, they are rendered on the web page.

Cross-site scripting (XSS) is a client-side code injection attack. It enables an attacker to introduce malicious code into a web page which is executed in the browser of the victim. When the victim visits the web page, the script reaches the user’s browser and is executed. XSS attacks are common in JavaScript.

Webpack is a static module bundler tool that is designed to bundle JavaScript files, to be used in a browser. Modules are reusable code chunks built from JavaScript, external libraries in node_modules, CSS styles, images, and other assets. They are packaged and can be easily added to a website. Webpack generates a single or a few files that can run your application from a large number of original files.

Webpack puts all files, assets, code, images, fonts, etc. in a dependency graph. Based on this graph, a new package is created that contains only the bare minimum files required that can be easily embedded into the HTML file and used in the application.

Progressive Web Applications (PWAs), as the name suggests, are web applications but they deliver an app-like user experience. They have capabilities like push notifications and can even work offline. PWAs provide the best of both worlds - the web and native applications. They are cheaper to develop as compared to native apps because you need not have separate code bases for developing applications for different platforms. You can have a single codebase for building one web application that can run on almost all platforms. Once you have developed your website, it requires a few configuration-based changes to be converted to a PWA. Thus, many companies have now started to resort to PWAs.

A common question in web developer job interview questions, don't miss this one.

The different APIs provided in HTML5 are:

1. History API: This API gives access to the browser’s history.
2. User Timing API: This API provides developers with high-precision timestamps to measure JavaScript code performance.  
3. High-Resolution Time API: This API gives the current time in a sub-millisecond resolution independent of system clock skew or adjustments.
4. Battery Status API: This offers information about the device's current battery status like power source, battery charge level, expected time to charge or discharge, etc.
5. Navigation Timing API: This API lets developers obtain accurate timing information related to navigation such as time required for domain lookup, redirection, time to construct the DOM, etc.  
6. Vibration API: This API provides access to the vibration mechanism of devices using which developers can simulate the vibration of devices in order to trigger certain events.
7. Page Visibility API: This API enables us to determine the current visibility status of the page such as currently focused, minimized, etc.  
8. Network Information API: This API enables applications to access information about the network connection in use by the device, using which we can identify the connection type and status of the entire bandwidth log.
9. Geolocation API: This API helps in tracking the location of the device using the Global Positioning System (GPS). Using this API, we can retrieve the latitude and the longitude of the current location.

The ‘use script’ expression is used to enable strict mode in JavaScript, which makes it easier to write good JavaScript code. We can then run a restricted variant of JavaScript. The strict mode was introduced in ECMAScript version 5. Using strict mode eliminates some silent errors in JavaScript by changing them to throw errors. JavaScript code in strict mode can sometimes run faster than the same code without the strict mode. Strict mode also ensures the security of JavaScript code and improves compiler efficiency.

A promise in JavaScript represents the eventual completion or failure of an asynchronous operation and its resulting value. It is a proxy for a value that might not necessarily be known when the promise object is created. Promises are used in Asynchronous methods, where instead of immediately returning a value, the method returns a promise to provide a value at some point in the future. To put it simply, promises are a way to return synchronous values from an asynchronous method. The value for which the promise acts as a proxy, can either be a resolved value, or a reason that it was rejected.

A promise can be in either of the three states:

1. Pending: This is the initial state of a promise, i.e. it has neither been fulfilled nor been rejected.  
2. Fulfilled: This state means that the operation was completed successfully.
3. Rejected: This state means that the operation could not be completed successfully.

A promise is considered to be settled if it is either in the fulfilled state or in the rejected state.

Async/Await is a special syntax that allows developers to work with JavaScript promises in an easier and more comfortable manner.

Async is a keyword that is written before a function definition, which indicates that the function always returns a promise.

Await is a keyword that is used inside a function marked async. You cannot use await in a not async function. The await keyword makes JavaScript wait until a promise is settled and the result is returned.

Example,

async function fetchData() {
          let promise = new Promise((resolve, reject) => {
                    setTimeout(() => { resolve(‘Promise is successful’);}, 2000);
          });
          let result = await promise;  
          console.log(result);
}

Running the above function will log ‘Promise is successful’ after 2 seconds in the console.

The function call fetchData() will return a promise which is later resolved to the value ‘Promise is successful’.

On the line

let result = await promise;

JavaScript waits for the promise variable to be resolved before the value is returned to the result variable.