YourAppURL

Replace the value you are getting underneath the app above.

The ultimate guide to web development interviews. Developed by FAANG engineers, practice with real-world interview questions covering network security, system design, SEO, APIs, and more.

oct6.tar.gz

server

JavaScript

Grunt

webpack

webpack-loaders

Grunt-eslint

ProgressiveRendering

webpack-code-splitting

This course compiles a comprehensive range of questions that are most likely to be asked during the frontend interview. Where many interview prep courses focus on data structures and algorithms, this course focuses on a variety of topics from network security to system design.

In this course, you will solve interview questions that cover general aspects of web development. You’ll start by going over network security and optimization techniques for load balancing and browser rendering. After that, you’ll move on to interview questions around SEO, APIs, and system design.

Overall, these are questions that are often overlooked, but they can really make you stand out from your peers. By the end of this course, you will have the confidence and ability to go in and ace that interview.

Web Development Interview Handbook

# Introduction
AJAX stands for Asynchronous JavaScript and XML. It is a combination of web development techniques used to send and retrieve data in the background without refreshing a webpage.

There are many practical examples of this. One of them is how Twitter and Tumblr show new posts. The number of new tweets or posts is on top of the home page for both, and these home pages get updated automatically without any reloading. Let’s look at Tumblr as an example.


# Example: Tumblr

Tumblr has a home icon on the top right that shows the number of new posts. These posts aren't loaded until the home button is clicked on. This number updates every 10 seconds or so as new posts get posted to your feed that you can choose to see.

Have a look at the image below. We have the network tab open on Safari. The home icon says ‘2,’ which means that there are 2 new unseen posts. We know that the image is a bit small, so please click on it to zoom in if need be.


A few seconds later, a new network request has fired off and the number of notifications has increased to 5. The page has not refreshed, but the number has updated asynchronously. This is the whole point of AJAX.

The request results in a JSON file, as shown below.

# Explanation of the response
Tumblr uses the JSON response above to update the number of new posts on the home icon. In particular, it uses the ‘unread’ field on **line 8**, which now has a value of 5. This data is then used to update the HTML.

# AJAX polling
This mechanism of the browser making XHR(XMLHttpRequest)/Ajax requests to a server at a regular interval (every 10 seconds as in the Tumblr example) to check for new data is called **AJAX polling**.

Polling, however, can waste resources. Each request requires a new TCP connection to be established and closed, which takes a few round trips, and therefore generates overhead. A new response is delivered over the network and is parsed, which also consumes resources. Quite often, no new information arrives. On Tumblr, for example, if no new posts come for 5 minutes, then that’s 30 requests for nothing.


> Disclaimer: Tumblr doesn't actually use AJAX. It actually uses `fetch`. This was just for our demonstration, since they work the same way.


Anyway, let's get back to learning how AJAX works. AJAX allows us to:
- Update a web page without reloading it.
- Request, send, and receive data from the server after page loading and rendering.

Here’s an example. Try running it, and you’ll see a button that when clicked updates the page with some text without reloading it at all. AJAX magic!


# Example

Check out the following code example. A simple HTML page is rendered that gets updated with some content after 3 seconds using AJAX techniques. 

AJAX is not a framework or a programming language. It's actually far simpler. Let's learn about it in this lesson.


Introduction

Network

Security

Optimizing Loading Performance

Optimizing Browser Rendering Performance

Search Engine Optimization

System Design

APIs

Testing

Version Control

Task Runners & Bundlers

Conclusion

AJAX