mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

contents: update status of pages

This commit is contained in:
Yangshun 2024-06-27 17:45:21 +08:00
parent a5dfd526ce
commit 0d59986564
27 changed files with 212 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -1,6 +1,6 @@
<div align="center">
<h1>Front End Interview Handbook</h1>
<p>By <a href="https://www.greatfrontend.com/?fpr=yangshun">GreatFrontEnd</a></p>
<p>By <a href="https://www.greatfrontend.com/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a></p>
</div>
<div align="center">
@ -12,7 +12,7 @@
<a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
</h3>
<p>
Join/follow us on <a href="https://discord.gg/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://twitter.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
Join/follow us on <a href="https://linkedin.com/company/greatfrontend" target="_blank">LinkedIn</a> | <a href="https://discord.gg/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://x.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
</p>
</div>
@ -24,7 +24,7 @@
<p dir="auto"></p>
<a href="https://www.greatfrontend.com/prepare/?fpr=yangshun" target="_blank">
<a href="https://www.greatfrontend.com/prepare/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook" target="_blank">
<img src="assets/start-practicing-button.jpg" alt="Start Practicing Front End Questions on GreatFrontEnd" />
</a>
@ -41,22 +41,22 @@ Unlike typical software engineer job interviews, front end job interviews have l
## Where to get hands on practice?
<div align="center">
<a href="https://www.greatfrontend.com?fpr=yangshun">
<a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">
<img src="assets/mark-brand-light.png" alt="GreatFrontEnd" width="400"/>
</a>
</div>
After getting a good understanding about front end interview preparation, try out [GreatFrontEnd](https://www.greatfrontend.com?fpr=yangshun), a platform built by me! Not only that there are 200+ practice questions, each with multiple solutions from senior front end engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:
After getting a good understanding about front end interview preparation, try out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook), a platform built by me! Not only are there 200+ practice questions, each with multiple solutions from Senior Front End Engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:
- [Study plans](https://www.greatfrontend.com/study-plans?fpr=yangshun) help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
- [Focus areas](https://www.greatfrontend.com/focus-areas?fpr=yangshun) allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
- [Preparation by stage](https://www.greatfrontend.com/prepare?fpr=yangshun) prepares you for each phase of your interview process, from quiz to coding interviews.
- [Individual framework questions](https://www.greatfrontend.com/questions?fpr=yangshun) offer training based on specific frameworks that may be tested during your technical interviews.
- [Study plans](https://www.greatfrontend.com/study-plans?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
- [Focus areas](https://www.greatfrontend.com/focus-areas?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
- [Preparation by stage](https://www.greatfrontend.com/prepare?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) prepares you for each phase of your interview process, from quiz to coding interviews.
- [Individual framework questions](https://www.greatfrontend.com/questions?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) offer training based on specific frameworks that may be tested during your technical interviews.
---
<div align="center">
<h3>Need to practice front end interview questions? <a href="https://www.greatfrontend.com?fpr=yangshun">GreatFrontEnd</a> is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀</h3>
<h3>Need to practice front end interview questions? <a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a> is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀</h3>
</div>
---

8
contents/algorithms.md
View File

@ -1,12 +1,12 @@
---
title: Coding algorithms in front end interviews
title: Algorithms Interview Questions (Machine Coding) in Front End Interviews
slug: coding/algorithms
sidebar_label: Algorithms coding
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -22,7 +22,7 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
### GreatFrontEnd
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) provides **free** questions for you to practice implementing [Data Structures and Algorithms](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) in JavaScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/javascript/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)). [**Check it out →**](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) provides **free** questions for you to practice implementing [Data Structures and Algorithms](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) in JavaScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/javascript/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)). [**Check it out →**](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
## Algorithm courses

9
contents/behavioral.md
View File

@ -1,10 +1,11 @@
---
title: Behavorial interview
title: Behavorial Interviews
sidebar_label: Behavorial interviews
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -22,7 +23,7 @@ Behavioral interview rounds focus on a candidate's soft skills - how they work w
_Source: [Preparing for your Onsite Interview at Facebook](https://www.facebook.com/careers/swe-prep-onsite)_
Do check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) for its free [Behavioral Interview Guidebook](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) to learn how to approach behavioral interviews as a front end engineer. Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
Do check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) for its free [Behavioral Interview Guidebook](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) to learn how to approach behavioral interviews as a front end engineer. Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
## Courses

30
contents/build-front-end-user-interfaces.md
View File

@ -1,12 +1,12 @@
---
title: Coding user interfaces in front end interviews
title: User Interface Interview Questions (Machine Coding) in Front End Interviews
slug: coding/build-front-end-user-interfaces
sidebar_label: User interface coding
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -14,35 +14,35 @@ Many Front End Engineers spend a lot of time building UI, and building a UI comp
Companies that ask such questions usually ask candidates to code in one of these three ways:
- Online editor with preview: You get to write HTML, CSS, JavaScript within the browser and see an instant preview of the page. Common platforms used include [CodePen](https://codepen.io) and [CodeSandbox](https://codesandbox.io/dashboard).
- Online editor without preview: Similar to the above, but you don't get to see any visual output of the page. A common platform for this is [CoderPad](https://coderpad.io/). In the past, Google used Google Docs 😱.
- BYOE (Bring Your Own Environment): Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like CodePen or CodeSandbox. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
- Whiteboard: Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to make candidates write on a whiteboard during front end interviews.
- **Online editor with preview**: You get to write HTML, CSS, JavaScript within the browser and see an instant preview of the page. Common platforms used include [CodePen](https://codepen.io) and [CodeSandbox](https://codesandbox.io/dashboard).
- **Online editor without preview**: Similar to the above, but you don't get to see any visual output of the page. A common platform for this is [CoderPad](https://coderpad.io/). In the past, Google used Google Docs 😱.
- **BYOE (Bring Your Own Environment)**: Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like CodePen or CodeSandbox. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
- **Whiteboard**: Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to make candidates write code on a physical whiteboard during onsite front end interviews.
## Examples
- Components
- Tabs — [Practice](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Accordion — [Practice](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Tabs — [Practice](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Accordion — [Practice](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Photo Gallery
- Other possible components - [Refer to Bootstrap's list](https://getbootstrap.com/docs/5.3/components/)
- Apps
- Todo list — [Practice](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- Todo list — [Practice](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Sortable Data Table (with extensions for filtering)
- Kanban Board
- Games
- Tic-tac-toe — [Practice](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Whack-a-mole — [Practice](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Wordle — [Practice](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Tic-tac-toe — [Practice](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Whack-a-mole — [Practice](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Wordle — [Practice](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Tetris (advanced)
- Snake (advanced)
## Where to practice
- Each of these questions and over 200+ more can be found on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
- Each of these questions and over 200+ more can be found on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
- Each question comes with official solutions in popular frameworks such as React, Angular, Svelte and Vue.
- With live previews, you can practice online directly, simulating a real interview environment with no set-up required.
- [Start practicing immediately](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
- [Start practicing immediately](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
## Considerations

10
contents/companies/airbnb-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Airbnb front end interview questions
title: Airbnb Front End Interview Questions
sidebar_label: Airbnb interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/airbnb/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -17,9 +17,9 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
## User interface coding
- Given an input and an endpoint which returns a JSON list, as a result, extend it to autocomplete on change, handle key navigation through the results.
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Given a star widget embedded in a form write the code to select the stars and submit the correct value through a normal form action. Make reusable for multiple star widgets.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
_Source: [Glassdoor Airbnb Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)_

26
contents/companies/amazon-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Amazon front end interview questions
title: Amazon Front End Interview Questions
sidebar_label: Amazon interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/amazon/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -19,35 +19,35 @@ Refer to Amazon's official interview preparation guides for:
## Trivia
- What is the CSS box model?
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is a JavaScript closure?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What happens when you type URL into a browser and hit enter?
## JavaScript
- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
- [Practice questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
- [Practice questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Given an object and a filter function, write a function that recursively filters the object, returning only values which return `true` when called with the filter function (like `Array.prototype.filter` but for objects).
- Implement a function `getElementsByStyle(property, value)` that returns all elements in the DOM that match that style.
- E.g. `getElementsByStyle("color", "#fff")` will return all elements in the DOM with white text.
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Promisify a function.
## User interface coding
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting.
- [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
- Implement a Like button. [Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
- Implement a search bar using HTML, CSS and JavaScript.
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Implement a star rating widget.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Implement tic-tac-toe.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Recreate an adaptive layout with flexbox. Ensure accessibility.
- Implement a chess board with movable pieces.
- How do you render text on a banner image?
@ -57,7 +57,7 @@ Refer to Amazon's official interview preparation guides for:
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
- Design an accordion component.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Algorithm

8
contents/companies/apple-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Apple front end interview questions
title: Apple Front End Interview Questions
sidebar_label: Apple interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/apple/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -14,7 +14,7 @@ Not much is known about Apple's front end interview process.
## JavaScript
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
- [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
- [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- How can you execute an array of promise in sequence?
## User interface coding

14
contents/companies/bytedance-tiktok-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: ByteDance/TikTok front end interview questions
title: ByteDance/TikTok Front End Interview Questions
sidebar_label: ByteDance/TikTok interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/bytedance/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -14,19 +14,19 @@ ByteDance/TikTok's front end interview is quite balanced in terms of interview f
## JavaScript
- Implement `Promise.all`.
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Implement a function which extends `Array.prototype`.
- [Practice questions](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
- [Practice questions](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
## User interface coding
- Implement a dropdown component.
- [Read answer](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Read answer](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Trivia
- Difference between `localStorage` and cookies.
- [Read answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
## Algorithm

10
contents/companies/dropbox-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Dropbox front end interview questions
title: Dropbox Front End Interview Questions
sidebar_label: Dropbox interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/dropbox/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -18,13 +18,13 @@ Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/
## JavaScript
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- OOP-based class management system.
## User interface coding
- Build an image gallery using JavaScript, HTML, CSS.
- [Read answer](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Forming words from mobile keypad.
- Build a UI that fetches data from a weather API that is matching a design spec.
- Build a UI that matches a design spec of one of the pages on the Dropbox homepage.

26
contents/companies/google-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Google front end interview questions
title: Google Front End Interview Questions
sidebar_label: Google interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/google/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -22,26 +22,26 @@ Refer to Google's official interview preparation guides for:
## JavaScript
- How do you make a function that takes a callback function `fn` and returns a function that calls `fn` on a timeout?
- [Practice question](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Implement the outline view for a Google doc.
- [Practice question](https://www.greatfrontend.com/questions/javascript/table-of-contents?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/table-of-contents?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- DFS on HTML nodes.
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Implement `throttle`.
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- How do you make a function that only calls input function f every 50 milliseconds?
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Given a timeline write the JavaScript to select all nodes within selection of timeline.
## User interface coding
- Design a slider component.
- Design a Tic-Tac-Toe game/design an algorithm for Tic-Tac-Toe game.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Implement nested checkboxes (when the parent is checked, children are checked and vice versa. Use `<input type="checkbox">`). Similar to [Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/).
- Design a webpage which can auto load new posts when you reach the bottom of the page by using JavaScript. You may use AJAX and JavaScript event listeners.
- Write a UI using HTML, CSS, JavaScript that allows uses to enter the number of rows and columns in text input fields within a form and renders a table.
- [Practice question](https://www.greatfrontend.com/questions/javascript/generate-table?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/generate-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
| 1 | 8 | 9 | 16 | 17 |
@ -53,16 +53,16 @@ Refer to Google's official interview preparation guides for:
## Trivia
- Explain the CSS Box Model.
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What happens when you type a URL into the browser and hits enter?
- Given some text on a web page, how many ways can you make the text disappear?
- How do you send data from a web page to a server without a page refresh?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
## System design
- Design emoji autocomplete.
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Design JS Bin.
- How would you create a Google Analytics SDK used by webpages?

14
contents/companies/linkedin-front-end-interview-questions.md
View File

@ -1,18 +1,18 @@
---
title: LinkedIn front end interview questions
title: LinkedIn Front End Interview Questions
sidebar_label: LinkedIn interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/linkedin/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## JavaScript
- Write a `getElementsByClassName` function.
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## User interface coding
@ -22,14 +22,14 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
## Trivia
- Difference between CSS `padding` and `margin`.
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Difference between promise and callback?
- Difference between event bubbling and capturing?
- Difference between callback and closure in JavaScript?
- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is event delegation?
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
## Algorithm

10
contents/companies/lyft-front-end-interview-questions.md
View File

@ -1,23 +1,23 @@
---
title: Lyft front end interview questions
title: Lyft Front End Interview Questions
sidebar_label: Lyft interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/lyft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## JavaScript
- Implement `Promise.all`.
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Write the logic for minesweeper using vanilla JS.
## User interface coding
- Implement an autocomplete.
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
_Source: [Glassdoor Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_

16
contents/companies/microsoft-front-end-interview-questions.md
View File

@ -1,18 +1,18 @@
---
title: Microsoft front end interview questions
title: Microsoft Front End Interview Questions
sidebar_label: Microsoft interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/microsoft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## JavaScript
- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Create a chat interface like Microsoft teams.
- Use OOP to implement a Chess game.
@ -24,16 +24,16 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
## Trivia
- What is a prototype?
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is a closure?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is the difference between `let`, `const`, and `var`?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is DOM?
## System Design
- Design an email client like Microsoft Outlook.
- [Read answer](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Read answer](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
_Source: [Glassdoor Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_

14
contents/companies/salesforce-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Salesforce front end interview questions
title: Salesforce Front End Interview Questions
sidebar_label: Salesforce interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Practice Front End Interview Questions on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -14,15 +14,15 @@ Not much is known about Salesforce's front end interview process.
## Coding
- Flatten a nested array.
- [Practice question](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Practice question](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
## Trivia
- What is the event loop?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- What is a closure?
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Positioning in CSS.
- [Read answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
_Source: [Glassdoor Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_

10
contents/companies/twitter-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Twitter front end interview questions
title: Twitter Front End Interview Questions
sidebar_label: Twitter interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/twitter/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -13,11 +13,11 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
- Add features to a tic-tac-toe game.
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Trivia
- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
- [Read answer](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Read answer](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
_Source: [Glassdoor Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_

8
contents/companies/uber-front-end-interview-questions.md
View File

@ -1,11 +1,11 @@
---
title: Uber front end interview questions
title: Uber Front End Interview Questions
sidebar_label: Uber interview questions
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/uber/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -18,5 +18,5 @@ Not much is known about Uber's front end interview process.
## User interface coding
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)

4
contents/css-questions.md
View File

@ -1,11 +1,11 @@
---
title: CSS trivia questions in front end interviews
title: CSS Interview Questions (Quiz) for Front End Interviews
sidebar_label: CSS questions
---
:::info We are now part of GreatFrontEnd!
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

24
contents/front-end-system-design-applications.md
View File

@ -1,25 +1,25 @@
---
title: Front end system design interview - applications
title: Front End System Design Interview - Applications
slug: front-end-system-design/applications
sidebar_label: Applications
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## Examples
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Video watching website (e.g. Netflix): [Read example solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Email client (e.g. Microsoft Outlook): [Read example solution](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Video watching website (e.g. Netflix): [Read example solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Email client (e.g. Microsoft Outlook): [Read example solution](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Framework
@ -84,4 +84,4 @@ Many companies blog about their technical challenges in the front end domain and
- [A React And Preact Progressive Web App Performance Case Study: Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
- [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies. You can also do hands-on practice through their [huge question bank](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), each with solutions written by ex-FAANG senior engineers to learn more about system design.
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. You can also do hands-on practice through their [huge question bank](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), each with solutions written by ex-FAANG senior engineers to learn more about system design.

40
contents/front-end-system-design-ui-components.md
View File

@ -1,25 +1,25 @@
---
title: Front end system design interview - UI components
title: Front End System Design Interview - UI Components
slug: front-end-system-design/ui-components
sidebar_label: UI components
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## Examples
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Poll widget: [Read example solution](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Poll widget: [Read example solution](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Selector which loads options over the network
To find out more, check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), which shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies. There are also [blogs](https://www.greatfrontend.com/blog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) that will cover some of the following topics in more detail.
To find out more, check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. There are also [blogs](https://www.greatfrontend.com/blog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that will cover some of the following topics in more detail.
## Framework
@ -53,9 +53,9 @@ For components, list down the various subcomponents that will exist within it an
Let's take an image carousel example. Subcomponents within an image carousel would be:
- Main image - An image that displays the photo in focus
- Thumbnail - Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
- Image store - A client side cache of the list of photos to display
- **Main image**: An image that displays the photo in focus
- **Thumbnail**: Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
- **Image store**: A client side cache of the list of photos to display
If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.
@ -110,17 +110,17 @@ UX might not fall squarely under engineering but good front end engineers have g
In front end, performance typically refers to a few things - loading speed, how fast the UI responds to user interactions, memory space (heap) required by the component.
- Loading speed - The less JavaScript the component contains, the less JavaScript the browser has to download to load the component and the lower the network request time. It's also important to modularize components and allow users to download only the necessary JavaScript modules needed for their use case.
- Responsiveness to user interactions
- **Loading speed**: The less JavaScript the component contains, the less JavaScript the browser has to download to load the component and the lower the network request time. It's also important to modularize components and allow users to download only the necessary JavaScript modules needed for their use case.
- **Responsiveness to user interactions**
- If a user interaction results in displaying of data that has to be loaded over the network, there will be a delay between the user interaction and updating of the UI. Minimizing that delay or removing it entirely is the key to improving responsiveness.
- JavaScript in a browser is single-threaded. The browser can only do execute one line of code at any one time. The less work (JavaScript executed, DOM updates) the component has to do when a user does something on the page, the faster the component can update the UI to respond to the changes.
- Memory space - The more memory your component takes up on the page, the slower the browser performs and the experience will feel sluggish/janky. If your component has to render hundreds/thousands of items (e.g. number of images in a carousel, number of items in a selector), memory space might become significant.
- **Memory space**: The more memory your component takes up on the page, the slower the browser performs and the experience will feel sluggish/janky. If your component has to render hundreds/thousands of items (e.g. number of images in a carousel, number of items in a selector), memory space might become significant.
**Optimization tips**
- Render only what is displayed on the screen - For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/).
- Lazy loading/load only necessary data - For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
- Preloading/prefetching data ahead of time - For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/).
- **Lazy loading/load only necessary data**: For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
- **Preloading/prefetching data ahead of time**: For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
#### Accessibility (a11y)
@ -145,8 +145,8 @@ a11y is one of the most commonly neglected areas as most of the time they're inv
Internationalization (i18n) is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. Typically components shouldn't have to worry about i18n unless under few specific circumstances:
- Component uses strings - Strings used in the component shouldn't be hardcoded to a specific language (e.g. "Prev"/"Next" in the controls of a photo gallery component). The strings can be specified as a prop with the English version as default
- Order of content matters - Does your component support RTL (right to left) languages like Arabic and Hebrew?
- **Component uses strings**: Strings used in the component shouldn't be hardcoded to a specific language (e.g. "Prev"/"Next" in the controls of a photo gallery component). The strings can be specified as a prop with the English version as default
- **Order of content matters**: Does your component support RTL (right to left) languages like Arabic and Hebrew?
#### Multi-device support

44
contents/front-end-system-design.md
View File

@ -1,11 +1,11 @@
---
title: Front end system design interview overview
title: Front End System Design Interview Overview
sidebar_label: Overview
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -22,32 +22,36 @@ The two main kinds of front end system design interviews are UI components and a
## Front end system design examples
- User interface components
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Applications
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Video watching website
If you are interested to find out more, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies.
If you are interested to find out more, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies.
## RADIO Framework
System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great! Otherwise, here's a framework you can use to give an outline to the interviewer as to what you are going to cover, which is also helpful when working on new front end projects at work.
System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great!
This framework is called **RADIO** and it is made up of the first character of each step. You can write this structure down on the whiteboard/online editor so that you don't forget.
We have invented a simple-to-remember framework – the **RADIO framework**, that you can use to give an outline to the interviewer as to what you are going to cover.
This framework is called **RADIO** because it is made up of the first character of each area. You can write this structure down on the whiteboard/online editor so that you don't forget.
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
1. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
1. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
2. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
3. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
4. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
5. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
The RADIO framework is also helpful when working on new front end projects at work, especially when writing design documentation. It's a good framework to learn.
How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.

4
contents/html-questions.md
View File

@ -1,11 +1,11 @@
---
title: HTML trivia questions in front end interviews
title: HTML Interview Questions (Quiz) for Front End Interviews
sidebar_label: HTML questions
---
:::info We are now part of GreatFrontEnd!
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

28
contents/introduction.md
View File

@ -2,9 +2,9 @@
title: Introduction
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -16,7 +16,7 @@ Many front end interviews are highly-focused on domain knowledge and applying th
While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a general software engineer interview. Among the existing resources, the most helpful question bank would probably be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, there aren't many complete and satisfactory answers to these questions readily available online. This handbook answers these trivia-style questions along with information and guidance for other front end interview formats.
To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
## General tips for front end interviews
@ -24,11 +24,11 @@ Regardless of which type of format you are given, one thing stays true - you nee
Be _extremely_ familiar with the following concepts:
- CSS: Specificity, Box model, Layout, Positioning
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
- JavaScript design patterns: Observer pattern, Module pattern
- HTML: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
- **CSS**: Specificity, Box model, Layout, Positioning
- **JavaScript**: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
- **JavaScript design patterns**: Observer pattern, Module pattern
- **HTML**: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
- **DOM manipulation**: DOM manipulation in Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
Look out for interview questions by companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions.
@ -50,7 +50,7 @@ Short questions which test your knowledge and have clear non-subjective answers.
[**Read more about front end trivia questions →**](./trivia.md)
[**Practice front end trivia questions**](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[**Practice front end trivia questions**](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### JavaScript coding
@ -63,7 +63,7 @@ This is the front end version of LeetCode-style algorithm questions. Implement a
[**Read more about JavaScript coding questions →**](./javascript-questions.md)
[**Practice JavaScript coding questions**](https://www.greatfrontend.com/questions/js?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[**Practice JavaScript coding questions**](https://www.greatfrontend.com/questions/js?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### User interface coding
@ -81,7 +81,7 @@ Build user interfaces (can be a UI component, an app, or a game) using HTML, CSS
[**Read more about user interface coding questions →**](./build-front-end-user-interfaces.md)
[**Practice user interface coding questions**](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[**Practice user interface coding questions**](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### Algorithmic coding
@ -89,7 +89,7 @@ LeetCode-style algorithmic coding questions which evaluate your core data struct
[**Read more about algorithm coding questions →**](./algorithms.md)
[**Practice algorithm questions**](https://www.greatfrontend.com/focus-areas/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[**Practice algorithm questions**](https://www.greatfrontend.com/focus-areas/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### System design
@ -100,9 +100,9 @@ Describe and discuss how you would build a UI component/app/game and its archite
[**Read more about front end system design →**](./front-end-system-design.md)
[**Practice front end system design questions**](https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
[**Practice front end system design questions**](https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
You can also try out the above mentioned question types at [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). It has [over 200+ practice questions](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
You can also try out the above mentioned question types at [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). It has [over 200+ practice questions](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
## Company interview formats

4
contents/javascript-questions.md
View File

@ -1,11 +1,11 @@
---
title: JavaScript trivia questions in front end interviews
title: JavaScript Interview Questions (Quiz) for Front End Interviews
sidebar_label: JavaScript questions
---
:::info We are now part of GreatFrontEnd!
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

18
contents/javascript-utility-function.md
View File

@ -1,12 +1,12 @@
---
title: Coding JavaScript utility functions in front end interviews
title: JavaScript Interview Questions (Machine Coding) for Front End Interviews
slug: coding/javascript-utility-function
sidebar_label: JavaScript coding
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -46,13 +46,13 @@ Advanced questions are usually given to more senior candidates and expect around
</video>
</div>
- These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) that you can access by frameworks, each question also comes with a solution authored by ex-FAANG engineers and automated test cases.
- These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can access by frameworks, each question also comes with a solution authored by ex-FAANG engineers and automated test cases.
- Here are some questions you can start with:
- [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Promise.all()](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
- [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
- [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Promise.all()](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Tips

4
contents/resume.md
View File

@ -2,9 +2,9 @@
title: Resume preparation
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

6
contents/trivia.md
View File

@ -3,9 +3,9 @@ title: Trivia questions in front end interviews
sidebar_label: Overview
---
:::info We are now part of GreatFrontEnd!
:::info Page migrated to GreatFrontEnd
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -35,7 +35,7 @@ The best and correct way to prepare for such questions is to really understand t
## Where to practice
If you're looking for free questions to practice, try [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), which has a [huge bank of free questions](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). Each question also comes with a solution authored by me.
If you're looking for free questions to practice, try [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which has a [huge bank of free questions](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Each question also comes with a solution authored by me.
## Common questions

10
website/docusaurus.config.js
View File

@ -14,7 +14,7 @@ module.exports = {
themeConfig: {
announcementBar: {
id: 'gfe', // Increment on change
content: `⭐️ We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-FAANG Senior Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">Get 20% off today</a>! ⭐️`,
content: `⭐️ We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-FAANG Senior Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">Get 20% off today</a>! ⭐️`,
isCloseable: false,
},
prism: {
@ -36,15 +36,15 @@ module.exports = {
items: [
{
label: 'Coding Questions',
href: 'https://www.greatfrontend.com/prepare/coding?fpr=yangshun',
href: 'https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
},
{
label: 'System Design',
href: 'https://www.greatfrontend.com/prepare/system-design?fpr=yangshun',
href: 'https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
},
{
label: 'Quiz Questions',
href: 'https://www.greatfrontend.com/prepare/quiz?fpr=yangshun',
href: 'https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
},
],
},
@ -154,7 +154,7 @@ module.exports = {
items: [
{
label: 'GreatFrontEnd',
href: 'https://www.greatfrontend.com?fpr=yangshun',
href: 'https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
},
{
label: 'GitHub',