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

## Data
In the last lesson, we opened up developer tools, recorded an animation, and got some data. What we ended up seeing is something like this. We’ll break this down into digestible chunks and explain everything step-by-step in this lesson.



We’ll start from the top chart and work our way to the last one.


The x-axis for all of these represents time. Notice the very first bar that appears at the top in the screenshot above. It shows the time in milliseconds of your recording. All the panels capture data about a certain point in time, including screenshots of the app/website at that time. This is sort of like a CCTV video of your app, and you’re like a detective trying to find clues!


## FPS / CPU / NET




### Frames per second
Look at the FPS chart. Whenever you see a red bar above FPS, it means that the framerate dropped so low that it's probably harming the user experience. In general, the higher the green bar, the higher the FPS.

### CPU

Below the FPS chart, you see the CPU chart. The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.


We’ll ignore the NET panel because it looks at network requests, which are irrelevant to this lesson.


### Hovering
You’ll notice that hovering over these panels shows a screenshot of the app at a specific point in time.


### Clicking / scrubbing
You can click on any part of these panels. You’ll notice the other panels update to reflect what exactly was going on at the point in time that you clicked them. You can click and drag to expand the window. You can then use the ‘w, a, s, d’ keys to drag the window around. This is called scrubbing, and it’s useful for manually analyzing the progression of animations. Experiment with this.



# Data
In the last lesson, we opened up developer tools, recorded an animation, and got some data. What we ended up seeing is something like this. We’ll break this down into digestible chunks and explain everything step-by-step in this lesson.



We’ll start from the top chart and work our way to the last one.


The x-axis for all of these represents time. Notice the very first bar that appears at the top in the screenshot above. It shows the time in milliseconds of your recording. All the panels capture data about a certain point in time, including screenshots of the app/website at that time. This is sort of like a CCTV video of your app, and you’re like a detective trying to find clues!


# FPS / CPU / NET




## Frames per second
Look at the FPS chart. Whenever you see a red bar above FPS, it means that the framerate dropped so low that it's probably harming the user experience. In general, the higher the green bar, the higher the FPS.

## CPU

Below the FPS chart, you see the CPU chart. The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.


We’ll ignore the NET panel because it looks at network requests, which are irrelevant to this lesson.


## Hovering
You’ll notice that hovering over these panels shows a screenshot of the app at a specific point in time.


## Clicking / scrubbing
You can click on any part of these panels. You’ll notice the other panels update to reflect what exactly was going on at the point in time that you clicked them. You can click and drag to expand the window. You can then use the ‘w, a, s, d’ keys to drag the window around. This is called scrubbing, and it’s useful for manually analyzing the progression of animations. Experiment with this.



The performance tab in the developer tools kit can be daunting. Let's demystify 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

Analyzing Render Performance with Developer Tools

Data

FPS / CPU / NET

Frames per second

CPU