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

[feih] misc improvements

This commit is contained in:
Yangshun 2025-06-17 20:26:12 +08:00
parent 040dc3ff32
commit db0a21595f
40 changed files with 487 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.wip/topics/accessibility.md
View File

@ -198,6 +198,6 @@ Fixing accessibility issues is like fixing bugs; it is best looked at through th
- How badly does this accessibility issue affect your users?
- How expensive is it going to cost to fix?
###### References
#### References
- https://www.udacity.com/course/web-accessibility--ud891

2
.wip/topics/browser.md
View File

@ -40,7 +40,7 @@ High level flow of how browsers render a webpage:
- Finally, this gets actually displayed in a browser window, a process called "painting".
###### References
#### References
- http://taligarsiel.com/Projects/howbrowserswork1.htm
- https://medium.freecodecamp.org/its-not-dark-magic-pulling-back-the-curtains-from-your-stylesheets-c8d677fa21b2

2
.wip/topics/css.md
View File

@ -28,6 +28,6 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
TODO
###### References
#### References
- https://philipwalton.com/articles/side-effects-in-css/

2
.wip/topics/performance.md
View File

@ -37,7 +37,7 @@ WIP.
- Use web workers for long running operations to move into a web worker thread.
- Use `requestAnimationFrame`
###### References
#### References
- https://bitsofco.de/understanding-the-critical-rendering-path/

4
.wip/topics/security.md
View File

@ -49,7 +49,7 @@ XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
- Require user interaction
- Require a re-authentication, using a one-time token, or requiring users to complete a captcha.
###### References
#### References
- [OWASP CSRF](<https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)>)
@ -77,7 +77,7 @@ HTTPS is HTTP over SSL/TLS. Servers and clients still speak exactly the same HTT
- TLS handshake computational and latency overhead.
- Encryption and decryption requires more computation power and bandwidth.
###### References
#### References
- https://blog.hartleybrody.com/https-certificates/
- https://github.com/alex/what-happens-when#tls-handshake

4
.wip/topics/widgets.md
View File

@ -20,7 +20,7 @@ Also known as typeahead box.
- Use windowing/virtual lists when the search results is too long.
- Debounce user input and only search when user stops typing for some time (usually 300ms).
###### References
#### References
- https://baymard.com/blog/autocomplete-design
@ -45,7 +45,7 @@ Also known as typeahead box.
- Modals can usually be dismissed by clicking on the backdrop. If the user interacts with the modal content by clicking on it, the backdrop might also receive the click event and be dismissed as a result.
###### References
#### References
- https://css-tricks.com/dangers-stopping-event-propagation/

28
contents/algorithms.md
View File

@ -4,15 +4,17 @@ slug: coding/algorithms
sidebar_label: Algorithms coding
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
Front End Engineers are also Software Engineers after all, and it's an expectation that Front End Engineers have basic competency in algorithms and data structures. It is possible and reasonable that you will be asked to solve algorithmic questions during your front end interviews and most likely you will be expected to use JavaScript.
Front End Engineers are also Software Engineers after all, and it's expected that Front End Engineers have basic competency in algorithms and data structures. It is reasonable and possible that you will be asked to solve algorithmic questions during your front end interviews.
Trees are a commonly-encountered data structure in Front End development because the DOM is a tree, so if you have to prioritize, definitely focus on being good at tree data structures and common algorithms for trees, such as Breadth-first Search and Depth-first Search.
That said, companies tend to go easy on Front End Engineer candidates when it comes to algorithms questions; you most likely won't get very tough or obscure algorithm problems.
Other than the common data structures like arrays, sets, and maps, trees are a commonly-encountered data structure in front end development because the DOM is a tree, so if you have to prioritize, definitely focus on being good at tree data structures and common traversal algorithms for trees, such as breadth-first search, depth-first search, and level-first traversal.
The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/) goes into great detail about preparing for Algorithms questions.
@ -22,9 +24,9 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
### GreatFrontEnd
[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/javascript-dsa-interview-questions?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/algo/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/algo/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/algo/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/algo/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=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/formats/algo-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) in JavaScript/TypeScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/algo/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/algo/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/algo/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/algo/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)).
[**Check it out**](https://www.greatfrontend.com/questions/javascript-dsa-interview-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
[**Check out GreatFrontEnd**](https://www.greatfrontend.com/questions/javascript-dsa-interview-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
## Algorithm courses
@ -32,20 +34,20 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
AlgoMonster aims to help you ace the technical interview **in the shortest time possible**. By Google engineers, AlgoMonster uses a data-driven approach to teach you the most useful key question patterns and has contents to help you quickly revise basic data structures and algorithms. Best of all, AlgoMonster is not subscription-based - pay a one-time fee and get **lifetime access**.
[**Check it out**](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
[**Check out AlgoMonster**](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
### [Grokking the Coding Interview: Patterns for Coding Questions](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
This course by Design Gurus expands upon the questions on the recommended practice questions but approaches the practicing from a questions pattern perspective, which is an approach I also agree with for learning and have personally used to get better at coding interviews. The course allows you to practice selected questions in Java, Python, C++, JavaScript and also provides sample solutions in those languages. **Learn and understand patterns, not memorize answers!**
[**Check it out**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
[**Check out Grokking the Coding Interview**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
## JavaScript courses
If you want more structured algorithms practice which are targeted at JavaScript, check out the following courses.
| Course | Reviews | Duration | Price | Contents |
| :-- | --- | --- | --- | --- |
| [Master the Coding Interview: Data Structures + Algorithms](https://fxo.co/DQpY) | 4.6/5 | 19.5h | $$ | Basic data structures and algorithms, job application, behavioral interview, negotiation |
| [JavaScript Data Structures and Algorithms Masterclass](https://fxo.co/DQpZ) | 4.5/5 | 45h | $ | Basic and advanced data structures and algorithms |
| [Ace the JavaScript Coding Interview](https://www.educative.io/path/ace-javascript-coding-interview?aff=x23W) | - | 87h | $ | Basic data structures and algorithms, system design, object-oriented design |
| Course | Platform | Reviews | Duration | Price | Contents |
| :-- | --- | --- | --- | --- | --- |
| [Ace the JavaScript Coding Interview](https://www.educative.io/path/ace-javascript-coding-interview?aff=x23W) | Educative | - | 87h | $ | Basic data structures and algorithms, system design, object-oriented design |
| [Master the Coding Interview: Data Structures + Algorithms](https://www.udemy.com/course/master-the-coding-interview-data-structures-algorithms) | Udemy | 4.6/5 | 19.5h | $$ | Basic data structures and algorithms, job application, behavioral interview, negotiation |
| [JavaScript Data Structures and Algorithms Masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass) | Udemy | 4.5/5 | 45h | $ | Basic and advanced data structures and algorithms |

16
contents/behavioral.md
View File

@ -3,17 +3,21 @@ title: Behavorial Interviews
sidebar_label: Behavorial interviews
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Behavioral Interview Playbook for Front End Engineers](https://www.greatfrontend.com/behavioral-interview-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
Behavioral interview rounds focus on a candidate's soft skills - how they work with others, how they handled situations in the past. For comprehensive behavioral interview content, [Tech Interview Handbook](https://www.techinterviewhandbook.org/behavioral-interview/) covers that along with common behavioral interview questions from the top companies.
Behavioral interview rounds focus on a candidate's soft skills - how they work with others, how they handled situations in the past where they have demonstrated collaboration, communication, conflict resolution, and mentoring skills.
Behavioral interviews are often overlooked and underestimated but I've seen candidates get rejected for failing the behavioral round even though they did very well on the coding and system design interviews. Clearing the behavioral interviews is especially important for candidates targeting senior level and above.
For comprehensive behavioral interview content, [Tech Interview Handbook](https://www.techinterviewhandbook.org/behavioral-interview/) covers that along with common behavioral interview questions from the top companies.
<a className="button button--primary" href="https://www.techinterviewhandbook.org/behavioral-interview/">Go to Tech Interview Handbook &nbsp;→</a>
## What Facebook looks for in behavioral interviews
## What Meta looks for in behavioral interviews
- Discuss anything that's on your resume, including current projects and details
- Provide specific examples about what you did and the resulting impact
@ -23,8 +27,8 @@ 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&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.
Check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) for its free [Behavioral Interview Playbook](https://www.greatfrontend.com/behavioral-interview-playbook?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
I really don't think one needs to attend a course on behavioral interviews, but your mileage may vary. I've seen candidates get rejected for failing the behavioral round even though they did super well on the coding and system design interviews. If you want to take a course on behavioral interviews, you can check out Educative's [Grokking the Behavioral Interview](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W) course.
I really don't think one needs to attend a course on behavioral interviews, but your mileage may vary. If you want to take a course on behavioral interviews, you can check out Educative's [Grokking the Behavioral Interview](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W) course.

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

@ -4,9 +4,9 @@ slug: coding/build-front-end-user-interfaces
sidebar_label: User interface coding
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -19,34 +19,50 @@ Companies that ask such questions usually ask candidates to code in one of these
- **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
## Where to practice
<div class="video-container">
<video class='gfe-webm' autoPlay muted loop>
<source src="/gfe-features.webm" type="video/webm" />
</video>
</div>
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?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can filter by frameworks, languages, and topics, each question also comes with detailed test cases and an official solution authored by ex-FAANG senior engineers.
Here are some questions you can start with:
- Components
- Modal Dialog — [Practice](https://www.greatfrontend.com/questions/user-interface/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Tabs — [Practice](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Image Carousel - [Practice](https://www.greatfrontend.com/questions/user-interface/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Accordion — [Practice](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Other possible components - [Refer to Bootstrap's list](https://getbootstrap.com/docs/5.3/components/)
- [Tabs](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Modal Dialog](https://www.greatfrontend.com/questions/user-interface/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Image Carousel](https://www.greatfrontend.com/questions/user-interface/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Accordion](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Star Rating](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Progress Bars](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Refer to [Bootstrap's list](https://getbootstrap.com/docs/5.3/components/) for other possible components
- Widgets
- Traffic Light - [Practice](https://www.greatfrontend.com/questions/user-interface/traffic-light?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Traffic Light](https://www.greatfrontend.com/questions/user-interface/traffic-light?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Stopwatch](https://www.greatfrontend.com/questions/user-interface/stopwatch?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Transfer List](https://www.greatfrontend.com/questions/user-interface/transfer-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Apps
- Todo list — [Practice](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Data Table (with extensions for sorting and filtering) — [Practice](https://www.greatfrontend.com/questions/user-interface/data-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- File Explorer — [Practice](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- [Todo list](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Data Table (with extensions for sorting and filtering)](https://www.greatfrontend.com/questions/user-interface/data-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [File Explorer](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Kanban Board
- Games
- Tic-tac-toe — [Practice](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Whack-a-mole — [Practice](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- Wordle — [Practice](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- [Tic-tac-toe](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- [Whack-a-mole](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- [Wordle](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
- 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&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&gnrs=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&gnrs=frontendinterviewhandbook)
## Considerations
@ -97,6 +113,6 @@ Does your component scale (latency, performance, UI, UX, etc)?
- XSS vulnerability. Interviewers are especially looking out for this whenever you need to render user input. You almost never need to use `.innerHTML` or jQuery's `$.html()`. There's `.textContent` and `$.text()`. If you do have to render raw HTML, make sure you escape the contents first.
- User input that is being displayed in the URL has to be encoded first as well, or else there's also a potential for mischief where users can add additional query parameters.
### Future
### Closing
Lastly, mention how you would do things differently if you had more time and were writing production code that you need to maintain. Perhaps use Sass instead of CSS, use React instead of jQuery for better maintainability, use Babel to compile your code for older browsers, make the component mobile-friendly and test on different screen widths, add keyboard shortcuts, etc.

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

@ -3,9 +3,9 @@ title: Airbnb Front End Interview Questions
sidebar_label: Airbnb interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Airbnb Front End Interview Guide](https://www.greatfrontend.com/interviews/company/airbnb/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Amazon Front End Interview Questions
sidebar_label: Amazon interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Amazon Front End Interview Guide](https://www.greatfrontend.com/interviews/company/amazon/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Apple Front End Interview Questions
sidebar_label: Apple interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Apple Front End Interview Guide](https://www.greatfrontend.com/interviews/company/apple/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: ByteDance/TikTok Front End Interview Questions
sidebar_label: ByteDance/TikTok interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's ByteDance Front End Interview Guide](https://www.greatfrontend.com/interviews/company/bytedance/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Dropbox Front End Interview Questions
sidebar_label: Dropbox interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Dropbox Front End Interview Guide](https://www.greatfrontend.com/interviews/company/dropbox/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Google Front End Interview Questions
sidebar_label: Google interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Google Front End Interview Guide](https://www.greatfrontend.com/interviews/company/google/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: LinkedIn Front End Interview Questions
sidebar_label: LinkedIn interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's LinkedIn Front End Interview Guide](https://www.greatfrontend.com/interviews/company/linkedin/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Lyft Front End Interview Questions
sidebar_label: Lyft interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Lyft Front End Interview Guide](https://www.greatfrontend.com/interviews/company/lyft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,9 +3,9 @@ title: Microsoft Front End Interview Questions
sidebar_label: Microsoft interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Microsoft Front End Interview Guide](https://www.greatfrontend.com/interviews/company/microsoft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

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

@ -3,7 +3,7 @@ title: Salesforce Front End Interview Questions
sidebar_label: Salesforce interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).

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

@ -3,7 +3,7 @@ title: Twitter Front End Interview Questions
sidebar_label: Twitter interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).

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

@ -3,9 +3,9 @@ title: Uber Front End Interview Questions
sidebar_label: Uber interview questions
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
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).
Find the latest version of this page on [GreatFrontEnd's Uber Front End Interview Guide](https://www.greatfrontend.com/interviews/company/uber/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

44
contents/css-questions.md
View File

@ -1,11 +1,11 @@
---
title: CSS Interview Questions (Quiz) for Front End Interviews
sidebar_label: CSS questions
sidebar_label: CSS quiz
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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/questions/css-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's CSS Quiz Interview Questions](https://www.greatfrontend.com/questions/css-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -30,7 +30,7 @@ In the cases of equal specificity: the latest rule is the one that counts. If yo
I would write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS UI component library code, it is important that they have low specificities so that users of the library can override them without using too complicated CSS rules just for the sake of increasing specificity or resorting to `!important`.
###### References
#### References
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
@ -42,7 +42,7 @@ I would write CSS rules with low specificity so that they can be easily overridd
I would choose resetting when I have a very customized or unconventional site design such that I need to do a lot of my own styling and do not need any default styling to be preserved.
###### References
#### References
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
@ -68,7 +68,7 @@ The `.clearfix` hack uses a clever CSS [pseudo selector](#describe-pseudo-elemen
Alternatively, give `overflow: auto` or `overflow: hidden` property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
###### References
#### References
- https://css-tricks.com/all-about-floats/
@ -84,7 +84,7 @@ Each stacking context is self-contained - after the element's contents are stack
_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
###### References
#### References
- https://css-tricks.com/almanac/properties/z/z-index/
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
@ -107,7 +107,7 @@ In a BFC, each box's left outer edge touches the left edge of the containing blo
Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/).
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
@ -133,7 +133,7 @@ CSS sprites combine multiple images into one single larger image. It is a common
- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
###### References
#### References
- https://css-tricks.com/css-sprites/
@ -166,7 +166,7 @@ These techniques are related to accessibility (a11y).
Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioning approach, as it has the least caveats, works for most elements and it's an easy technique.
###### References
#### References
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
@ -203,7 +203,7 @@ Basic coloring can be done by setting two attributes on the node: `fill` and `st
The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overriden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. So, if you did something like `svg { fill: blue; }` it would override the purple fill we've defined.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
@ -226,7 +226,7 @@ Here is an example of `print` media type's usage:
}
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
@ -238,7 +238,7 @@ Firstly, understand that browsers match selectors from rightmost (key selector)
Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
###### References
#### References
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
@ -281,7 +281,7 @@ This part is related to the above about [writing efficient CSS](#what-are-some-o
For example with this selector `p span`, browsers firstly find all the `<span>` elements and traverse up its parent all the way up to the root to find the `<p>` element. For a particular `<span>`, as soon as it finds a `<p>`, it knows that the `<span>` matches and can stop its matching.
###### References
#### References
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
@ -293,7 +293,7 @@ A CSS pseudo-element is a keyword added to a selector that lets you style a spec
- Used in the `.clearfix` hack as shown above to add a zero-space element with `clear: both`.
- Triangular arrows in tooltips use `:before` and `:after`. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.
###### References
#### References
- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
@ -316,7 +316,7 @@ The box model has the following rules:
- The `width` of an element is calculated by the content's `width`.
- By default, `padding`s and `border`s are not part of the `width` and `height` of an element.
###### References
#### References
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
@ -328,7 +328,7 @@ The box model has the following rules:
- The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
- Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
###### References
#### References
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
@ -370,7 +370,7 @@ A positioned element is an element whose computed `position` property is either
- `fixed` - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
- `sticky` - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed` positioned.
###### References
#### References
- https://developer.mozilla.org/en/docs/Web/CSS/position
@ -388,7 +388,7 @@ Flexbox solves many common problems in CSS, such as vertical centering of elemen
Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
###### References
#### References
- https://philipwalton.github.io/solved-by-flexbox/
@ -444,7 +444,7 @@ Both have these methods have some issues that need to be weighed:
- Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
- Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
- http://mediumwell.com/responsive-adaptive-mobile/
@ -480,7 +480,7 @@ It is important to note that browsers which don't support HTML5's `srcset` (i.e.
For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
###### References
#### References
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- http://scottjehl.github.io/picturefill/
@ -492,7 +492,7 @@ For icons, I would also opt to use SVGs and icon fonts where possible, as they r
When using `translate()`, the element still occupies its original space (sort of like `position: relative`), unlike in changing the absolute positioning.
###### References
#### References
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

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

@ -4,31 +4,33 @@ slug: front-end-system-design/applications
sidebar_label: Applications
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End System Design Questions](https://www.greatfrontend.com/front-end-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## Examples
- News feed (e.g. Facebook): [Read 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 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 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 solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Pinterest: [Read solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Google docs: [Read solution](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Video streaming (e.g. Netflix): [Read 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 solution](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [News feed (e.g. Facebook)](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)](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Chat application (e.g. Messenger)](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)](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Pinterest](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Collaborative editor (e.g. Google docs)](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Travel booking website (e.g. Airbnb)](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Video streaming (e.g. Netflix)](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)](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
## Framework
1. Requirements exploration
1. Architecture
1. Data model
1. Interface definition (API)
1. Optimizations and deep dive
In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover (not necessarily in that order). The framework is called **RADIO** and it is made up of the first character of each aspect.
- Requirements exploration
- Architecture
- Data model
- Interface definition (API)
- Optimizations and deep dive
- User experience (UX)
- Performance
- Accessibility (a11y)

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

@ -1,36 +1,38 @@
---
title: Front End System Design Interview - UI Components
title: Front End System Design Interview - User Interface Components
slug: front-end-system-design/ui-components
sidebar_label: UI components
sidebar_label: User interface components
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End System Design Questions](https://www.greatfrontend.com/front-end-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
## Examples
- Autocomplete: [Read solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Image carousel: [Read solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Rich text editor: [Read solution](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Poll widget: [Read 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
- [Autocomplete](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Image carousel](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Dropdown menu](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Modal dialog](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Rich text editor](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Poll widget](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Tooltip
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 Playbook](https://www.greatfrontend.com/front-end-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. There are also [blog posts](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
In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover. 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.
In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover (not necessarily in that order). The framework is called **RADIO** and it is made up of the first character of each aspect.
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.
- **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
- **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
- **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
- **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
- **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
You can write this structure down on the whiteboard/online editor so that you don't forget.
### Requirements exploration

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

@ -3,39 +3,39 @@ title: Front End System Design Interview Overview
sidebar_label: Overview
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End System Design Playbook](https://www.greatfrontend.com/front-end-system-design-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
There are shockingly few front end system design resources out there, probably because there's a lower demand and supply for front end engineer candidates.
Front end system design resources are harder to come by and we are one of the pioneers of this topic.
"System" here typically refers to front end systems, which are quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in ["Build user interfaces" format](./build-front-end-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.
"System" here typically refers to front end systems, which is quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in ["Build user interfaces" format](./build-front-end-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.
The difference between this section and the ["Build user interfaces" format](./build-front-end-user-interfaces.md) is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, about API design between the client and server, and API between the components.
The difference between this section and the ["Build user interfaces" format](./build-front-end-user-interfaces.md) is that the problems are usually of a larger scope. If the interview session does not exceed an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, focusing on API design between the client and server, the various front end components and their APIs/props.
Many of the topics mentioned in the ["Build user interfaces" format](./build-front-end-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security, etc. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from junior candidates.
The two main kinds of front end system design interviews are UI components and applications.
The two main kinds of front end system design interviews are **UI components** and **applications**.
## Front end system design examples
- User interface components
- Autocomplete: [Read solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- Image carousel: [Read solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Dropdown menu: [Read solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Modal dialog: [Read solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Rich text editor: [Read solution](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Autocomplete](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
- [Image carousel](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Dropdown menu](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Modal dialog](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Rich text editor](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Applications
- News feed (e.g. Facebook): [Read 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 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 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 solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Pinterest: [Read solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Google Docs: [Read solution](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Travel booking website (e.g. Airbnb): [Read solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- Video streaming (e.g. Netflix): [Read solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [News feed (e.g. Facebook)](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)](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Chat application (e.g. Messenger)](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)](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Pinterest](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Collaborative editors (e.g. Google Docs)](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Travel booking website (e.g. Airbnb)](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
- [Video streaming (e.g. Netflix)](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
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 Playbook](https://www.greatfrontend.com/front-end-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies.
@ -45,15 +45,15 @@ System design interview questions tend to be open ended and vague, leaving you w
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.
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 to remind yourself to cover each aspect (not necessarily in that order):
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
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.
- **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions
- **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other
- **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to
- **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses
- **<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.
The RADIO framework is also helpful when working on new front end projects at work, especially when writing technical design documents. It's not limited to front end; the framework can also be applied to back end systems.
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.
@ -62,8 +62,8 @@ How to approach system design questions for applications and UI components can d
Because front end system design interviews focus on front end, you probably do not have to:
- Design a database schema
- Know about which kind of database to use (SQL vs NoSQL)
- Scaling your servers and database (sharding, vertical/horizontal scaling)
- Talk about availability, fault tolerance, latency, etc
- Discuss which kind of database to use (SQL vs NoSQL)
- Discuss about scaling your servers and database (sharding, vertical/horizontal scaling)
- Discuss about availability, fault tolerance, latency, etc
Read more about the differences between [Front End vs Back End System Design interviews](/blog/front-end-vs-back-end-system-design-interviews/#differences).

26
contents/html-questions.md
View File

@ -1,11 +1,11 @@
---
title: HTML Interview Questions (Quiz) for Front End Interviews
sidebar_label: HTML questions
sidebar_label: HTML quiz
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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/questions/html-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's HTML Quiz Interview Questions](https://www.greatfrontend.com/questions/html-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -25,7 +25,7 @@ For webpages, the DOCTYPE declaration is required. It is used to tell user agent
The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
###### References
#### References
- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
- https://html.spec.whatwg.org/multipage/xhtml.html
@ -41,7 +41,7 @@ Of course this is useless for letting a search engine know that the same content
In the back end, the HTML markup will contain `i18n` placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
###### References
#### References
- https://www.w3.org/International/getting-started/language
- https://support.google.com/webmasters/answer/189077
@ -58,7 +58,7 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
- Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
- Useful-to-have - include the locale in the path (e.g en_US, zh_CN, etc).
###### References
#### References
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
@ -70,7 +70,7 @@ These days, using `data-` attributes is generally not encouraged. One reason is
However, one perfectly valid use of data attributes, is to add a hook for _end to end_ testing frameworks such as Selenium and Capybara without having to create a meaningless classes or ID attributes. The element needs a way to be found by a particular Selenium spec and something like `data-selector='the-thing'` is a valid way to do so without convoluting the semantic markup otherwise.
###### References
#### References
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
@ -86,7 +86,7 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
- Device access - Allowing for the usage of various input and output devices.
- Styling - Letting authors write more sophisticated themes.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
@ -105,7 +105,7 @@ All the above-mentioned technologies are key-value storage mechanisms on the cli
_Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any `cookie`, `localStorage`, or `sessionStorage` stored. It's important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions)._
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
@ -118,7 +118,7 @@ _Note: If the user decides to clear browsing data via whatever mechanism provide
Note: The `async` and `defer` attributes are ignored for scripts that have no `src` attribute.
###### References
#### References
- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
@ -142,7 +142,7 @@ Keep in mind that putting scripts just before the closing `</body>` tag will cre
As per the HTML5 specification, certain HTML tags like `<head>` and `<body>` are optional. Google's style guide even recommends removing them to save bytes. However, this practice is still not widely adopted and the performance gain is likely to be minimal and for most sites it's not likely going to matter.
###### References
#### References
- https://developer.yahoo.com/performance/rules.html#css_top
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
@ -160,7 +160,7 @@ Examples of such techniques:
- Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
- Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
###### References
#### References
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
@ -179,7 +179,7 @@ If the resolution is retina (2x), the browser will use the closest resolution ab
`srcset`s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

59
contents/introduction.md
View File

@ -2,9 +2,9 @@
title: Introduction
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -34,23 +34,9 @@ Look out for interview questions by companies on Glassdoor. Front end questions
## Front end interview formats
Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. We have made the effort to search the Internet for front end interview questions asked by the popular companies and there are some questions which appear very often. In general, you should be familiar with the following questions and formats:
Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. We painstakingly searched the Internet for front end interview questions asked by popular tech companies and collated the questions which appear very often.
### Trivia questions
Short questions which test your knowledge and have clear non-subjective answers. These are usually asked by recruiters because the accuracy of the answers can be verified even by non-technical people. Here are some examples:
- JavaScript
- What is a closure?
- What is the difference between a promise and a callback?
- Explain the `this` keyword in JavaScript.
- CSS
- What is the CSS box model?
- Various CSS `position` properties and its differences.
[**Read more about front end trivia questions →**](./trivia.md)
[**Practice front end trivia questions**](https://www.greatfrontend.com/questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
In general, you should be familiar with the following questions and formats:
### JavaScript coding
@ -63,7 +49,7 @@ This is the front end version of LeetCode-style algorithm questions. Implement a
[**Read more about JavaScript coding questions →**](./javascript-utility-function.md)
[**Practice JavaScript coding questions**](https://www.greatfrontend.com/questions/javascript-interview-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
[**Practice JavaScript coding questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/javascript-functions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### User interface coding
@ -81,7 +67,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/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
[**Practice user interface coding questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/ui-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### Algorithmic coding
@ -89,7 +75,23 @@ 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&gnrs=frontendinterviewhandbook)
[**Practice algorithm questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/algo-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### Quiz/trivia questions
Short questions which test your knowledge and have clear non-subjective answers. These are usually asked within coding / system design rounds and even by recruiters because the accuracy of the answers can be somewhat verified by non-technical people. Here are some examples:
- JavaScript
- What is a closure?
- What is the difference between a promise and a callback?
- Explain the `this` keyword in JavaScript.
- CSS
- What is the CSS box model?
- Various CSS `position` properties and its differences.
[**Read more about front end quiz questions →**](./trivia.md)
[**Practice front end quiz questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
### System design
@ -100,7 +102,7 @@ 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/questions/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
[**Practice front end system design questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/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&gnrs=frontendinterviewhandbook). It has [over 500+ practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
@ -110,19 +112,20 @@ Through extensive research, here are the different type of formats companies ask
_Legend: ✅: Asked, ❌: Not asked, ⚠️: No data_
| Company | Trivia | Algorithms | JavaScript coding | UI coding | System design |
| Company | Quiz | Algorithms | JavaScript coding | UI coding | System design |
| :-- | :-: | :-: | :-: | :-: | :-: |
| [**Airbnb**](./companies/airbnb-front-end-interview-questions.md) | ❌ | ✅ | ✅ | ✅ | ❌ |
| [**Airbnb**](./companies/airbnb-front-end-interview-questions.md) | ❌ | ✅ | ✅ | ✅ | ✅ |
| [**Amazon**](./companies/amazon-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
| [**Apple**](./companies/apple-front-end-interview-questions.md) | ⚠️ | ⚠️ | ✅ | ✅ | ⚠️ |
| [**Apple**](./companies/apple-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
| **Atlassian** | ❌ | ❌ | ✅ | ✅ | ✅ |
| [**ByteDance/TikTok**](./companies/bytedance-tiktok-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ❌ |
| [**Dropbox**](./companies/dropbox-front-end-interview-questions.md) | ❌ | ⚠️ | ✅ | ✅ | ✅ |
| Facebook/Meta | ✅ | ❌ | ✅ | ❌ | ✅ |
| Flipkart | ⚠️ | ✅ | ⚠️ | ⚠️ | ⚠️ |
| **Facebook/Meta** | ✅ | ❌ | ✅ | ❌ | ✅ |
| **Flipkart** | ⚠️ | ✅ | ⚠️ | ⚠️ | ⚠️ |
| [**Google**](./companies/google-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
| [**LinkedIn**](./companies/linkedin-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
| [**Lyft**](./companies/lyft-front-end-interview-questions.md) | ❌ | ❌ | ✅ | ✅ | ✅ |
| [**Microsoft**](./companies/microsoft-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| [**Microsoft**](./companies/microsoft-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
| [**Salesforce**](./companies/salesforce-front-end-interview-questions.md) | ✅ | ⚠️ | ⚠️ | ⚠️ | ⚠️ |
| [**Twitter**](./companies/twitter-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
| [**Uber**](./companies/uber-front-end-interview-questions.md) | ⚠️ | ⚠️ | ✅ | ✅ | ⚠️ |

98
contents/javascript-questions.md
View File

@ -1,11 +1,11 @@
---
title: JavaScript Interview Questions (Quiz) for Front End Interviews
sidebar_label: JavaScript questions
sidebar_label: JavaScript quiz
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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/questions/javascript-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's JavaScript Quiz Interview Questions](https://www.greatfrontend.com/questions/javascript-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -22,7 +22,7 @@ Event delegation is a technique involving adding event listeners to a parent ele
- Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
- There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
###### References
#### References
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
@ -44,7 +44,7 @@ For an in-depth explanation, do check out his [article on Medium](https://codebu
ES6 allows you to use [arrow functions](http://2ality.com/2017/12/alternate-this.html#arrow-functions) which uses the [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). This is usually convenient, but does prevent the caller from controlling context via `.call` or `.apply`—the consequences being that a library such as `jQuery` will not properly bind `this` in your event handler functions. Thus, it's important to keep this in mind when refactoring large legacy applications.
###### References
#### References
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
@ -93,7 +93,7 @@ Things to note are:
- `.makeSound` is not defined on `Dog`, so the engine goes up the prototype chain and finds `.makeSound` off the inherited `Animal`.
- Using `Object.create` to build the inheritance chain is no longer recommended. Use `Object.setPrototypeOf` instead.
###### References
#### References
- http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
@ -109,7 +109,7 @@ I find AMD syntax to be quite verbose and CommonJS is closer to the style you wo
I'm glad that with ES2015 modules, that has support for both synchronous and asynchronous loading, we can finally just stick to one approach. Although it hasn't been fully rolled out in browsers and in Node, we can always use transpilers to convert our code.
###### References
#### References
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
@ -130,7 +130,7 @@ const foo = void (function bar() {
console.log(foo); // undefined
```
###### References
#### References
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
@ -175,7 +175,7 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign `null` to them after declaring if I don't intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.
###### References
#### References
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
@ -189,7 +189,7 @@ A closure is the combination of a function and the lexical environment within wh
- Data privacy / emulating private methods with closures. Commonly used in the [module pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
- [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
@ -229,7 +229,7 @@ const doubled = a.map((num) => {
The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice.
###### References
#### References
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
@ -261,7 +261,7 @@ const double = arr.map(function (el) {
console.log(double); // [2, 4, 6]
```
###### References
#### References
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
@ -280,7 +280,7 @@ Native objects are objects that are part of the JavaScript language defined by t
Host objects are provided by the runtime environment (browser or Node), such as `window`, `XMLHTTPRequest`, etc.
###### References
#### References
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
@ -306,7 +306,7 @@ console.log(person); // Person { name: "John" }
console.log(person.name); // "john"
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
@ -331,7 +331,7 @@ Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScr
In my experience, it is most useful for binding the value of `this` in methods of classes that you want to pass into other functions. This is frequently done in React components.
###### References
#### References
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
@ -341,7 +341,7 @@ In my experience, it is most useful for binding the value of `this` in methods o
There are some answers online that explain `document.write()` is being used in analytics code or [when you want to include styles that should only work if JavaScript is enabled](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). It is even being used in HTML5 boilerplate to [load scripts in parallel and preserve execution order](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! However, I suspect those reasons might be outdated and in the modern day, they can be achieved without using `document.write()`. Please do correct me if I'm wrong about this.
###### References
#### References
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
@ -378,7 +378,7 @@ This is not really recommended. Feature detection is more foolproof.
This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
@ -390,7 +390,7 @@ Ajax (asynchronous JavaScript and XML) is a set of web development techniques us
The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch()` API.
###### References
#### References
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
@ -440,7 +440,7 @@ JSONP can be unsafe and has some security implications. As JSONP is really JavaS
These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is the recommended approach and JSONP is seen as a hack.
###### References
#### References
- https://stackoverflow.com/a/2067584/1751946
@ -496,7 +496,7 @@ var x = 'local';
let y = 'local';
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting
- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
@ -522,7 +522,7 @@ console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!
```
###### References
#### References
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
@ -532,7 +532,7 @@ Extending a built-in/native JavaScript object means adding properties/functions
The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.
###### References
#### References
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
@ -542,7 +542,7 @@ The `DOMContentLoaded` event is fired when the initial HTML document has been co
`window`'s `load` event is only fired after the DOM and all dependent resources and assets have loaded.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
@ -568,7 +568,7 @@ console.log(a == null); // true
console.log(a == undefined); // true
```
###### References
#### References
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
@ -576,7 +576,7 @@ console.log(a == undefined); // true
The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
###### References
#### References
- https://en.wikipedia.org/wiki/Same-origin_policy
@ -606,7 +606,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
###### References
#### References
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
@ -632,7 +632,7 @@ Disadvantages:
Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
###### References
#### References
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
@ -651,7 +651,7 @@ for (let i = 1; i <= 100; i++) {
I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
###### References
#### References
- https://gist.github.com/jaysonrowe/1592432
@ -665,7 +665,7 @@ The `load` event fires at the end of the document loading process. At this point
The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
@ -689,7 +689,7 @@ The downsides:
- There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
###### References
#### References
- https://github.com/grab/front-end-guide#single-page-apps-spas
- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
@ -702,7 +702,7 @@ Possess working knowledge of it. A promise is an object that may produce a singl
Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
###### References
#### References
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
@ -725,7 +725,7 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
- Slightly more complex code (debatable).
- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
###### References
#### References
- https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md
@ -751,7 +751,7 @@ Disadvantages:
Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
###### References
#### References
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
@ -767,7 +767,7 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- `debugger` statement
- Good old `console.log` debugging
###### References
#### References
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/learn/javascript-debugging-tips
@ -798,7 +798,7 @@ for (let [index, elem] of arr.entries()) {
}
```
###### References
#### References
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
@ -883,7 +883,7 @@ Freezing an object does not allow new properties to be added to an object and pr
- Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.
- Cyclic data structures such as graphs are difficult to build. If you have two objects which can't be modified after initialization, how can you get them to point to each other?
###### References
#### References
- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
@ -906,7 +906,7 @@ const john = { ...human, name: 'John' }; // {race: "human", name: "John"}
const alienJohn = { ...john, race: 'alien' }; // {race: "alien", name: "John"}
```
###### References
#### References
- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
- https://www.sitepoint.com/immutability-javascript/
@ -924,7 +924,7 @@ The event loop is a single-threaded loop that monitors the call stack and checks
If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
###### References
#### References
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
@ -950,7 +950,7 @@ var foo = function () {
};
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
@ -1028,7 +1028,7 @@ const baz = 'baz';
baz = 'qux';
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
@ -1080,7 +1080,7 @@ class Student extends Person {
It's much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
@ -1131,7 +1131,7 @@ The main takeaway here is that `this` can be changed for a normal function, but
This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
@ -1170,7 +1170,7 @@ const transformNamesToUppercase = function (names) {
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```
###### References
#### References
- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
@ -1213,7 +1213,7 @@ console.log(p); // 42
console.log(q); // true
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
@ -1279,7 +1279,7 @@ document.body.innerHTML = `
**Note that your code may be susceptible to XSS by using `.innerHTML`. Sanitize your data before displaying it if it came from a user!**
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
@ -1315,7 +1315,7 @@ var addFive = curriedAdd(5);
var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
```
###### References
#### References
- https://hackernoon.com/currying-in-js-d9ddc64f162e
@ -1357,7 +1357,7 @@ const { e, f, ...others } = {
}; // e: 1, f: 2, others: { g: 3, h: 4 }
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
@ -1373,7 +1373,7 @@ On the server (Node.js), the common way has been to use CommonJS. Each file is t
ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
###### References
#### References
- http://requirejs.org/docs/whyamd.html
- https://nodejs.org/docs/latest/api/modules.html
@ -1383,7 +1383,7 @@ ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This
Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.
###### References
#### References
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods

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

@ -4,9 +4,9 @@ slug: coding/javascript-utility-function
sidebar_label: JavaScript coding
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -46,7 +46,7 @@ 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&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions/javascript-functions-interview-questions?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.
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?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can filter by frameworks, languages, and topics, each question also comes with automated test cases and an official solution authored by ex-FAANG senior engineers.
Here are some questions you can start with:

8
contents/resume.md
View File

@ -2,9 +2,9 @@
title: Resume preparation
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::
@ -26,7 +26,7 @@ Their templates:
- Guarantee readability by FAANG ATS
- Cater to various experience levels
They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which are helpful in helping you craft content that meets the same bar. [Check it out](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)!
They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which helps you craft content that meets the same bar. [Check out FAANG Tech Leads](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)!
### 2. Test readability with industry-standard ATS
@ -34,7 +34,7 @@ Test the readability and formatting of your resume using [OpenResume, a free res
### 3. The plain text file test
Simply copy the content from your resume and paste it into a plain text document! Make edits if:
Simply copy the content from your resume and paste it into a plain text document. Make edits if:
- There are points missing from your original resume
- Characters are displaying incorrectly in plain text

6
contents/trivia.md
View File

@ -1,11 +1,11 @@
---
title: Trivia questions in front end interviews
title: Quiz/trivia questions in front end interviews
sidebar_label: Overview
---
:::info Page migrated to GreatFrontEnd
:::info Latest version on GreatFrontEnd
Front End Interview Handbook is 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-playbook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
:::

26
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&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>! ⭐️`,
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-Meta and Google 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: {
@ -68,25 +68,25 @@ module.exports = {
fill="currentColor"
stroke-width="0"
viewBox="0 0 496 512"
height="24"
width="24"
height="16"
width="16"
xmlns="http://www.w3.org/2000/svg">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>`,
},
{
href: 'https://discord.gg/BZuXW2gJy9',
href: 'https://discord.gg/NDFx8f6P6B',
position: 'right',
className: 'navbar-icon navbar-icon-discord',
'aria-label': 'Discord channel',
html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg>`,
html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg>`,
},
{
href: 'https://x.com/greatfrontend',
position: 'right',
className: 'navbar-icon navbar-icon-twitter',
'aria-label': 'Twitter page',
html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>`,
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="16" height="16" fill="currentColor" version="1.1"><path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"/></svg>`,
},
],
},
@ -140,7 +140,7 @@ module.exports = {
href: '/front-end-system-design/',
},
{
label: 'UI components',
label: 'User interface components',
href: '/front-end-system-design/ui-components/',
},
{
@ -161,17 +161,21 @@ module.exports = {
href: 'https://github.com/yangshun/front-end-interview-handbook',
},
{
label: 'Tech Interview Handbook',
href: 'https://www.techinterviewhandbook.org',
label: 'X',
href: 'https://x.com/greatfrontend',
},
{
label: 'Twitter',
href: 'https://x.com/greatfrontend',
label: 'Discord',
href: 'https://discord.gg/NDFx8f6P6B',
},
{
label: 'Contact us',
href: 'mailto:contact@greatfrontend.com',
},
{
label: 'Tech Interview Handbook',
href: 'https://www.techinterviewhandbook.org',
},
],
},
],

2
website/i18n/de/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -135,7 +135,7 @@ Es gibt eine Ausnahme für die Positionierung von `<script>`s am unteren Rand: D
Denke daran, dass das Einfügen von Scripten vor dem schließenden `</body>`-Tag die Illusion erzeugt, dass die Seite in einem leeren Cache schneller geladen wird (da die Scripte den Download des restlichen Dokuments nicht blockieren). Der Code wird erst dann ausgeführt, wenn die gesamte Seite geladen ist. Sind diese Scripte in das `<head>`-Tag gesetzt, beginnen sie vorher mit der Ausführung - auf einem vorbereiteten Cache würde die Seite also tatsächlich schneller geladen werden.
###### References
#### References
- https://developer.yahoo.com/performance/rules.html#css_top
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/

2
website/i18n/ja-JP/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -134,7 +134,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小の CSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
- 非同期 HTML フラグメント - HTML の一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)にあります。
###### References
#### References
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/

2
website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -33,7 +33,7 @@ import TOCInline from '@theme/TOCInline';
상세한 설명은 [Medium의 글](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)을 참조하세요.
###### References
#### References
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946

30
website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -517,7 +517,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
###### References
#### References
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
@ -543,7 +543,7 @@ Disadvantages:
Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
###### References
#### References
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
@ -562,7 +562,7 @@ for (let i = 1; i <= 100; i++) {
I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
###### References
#### References
- https://gist.github.com/jaysonrowe/1592432
@ -580,7 +580,7 @@ The DOM event `DOMContentLoaded` will fire after the DOM for the page has been c
TODO.
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
@ -604,7 +604,7 @@ The downsides:
- There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
###### References
#### References
- https://github.com/grab/front-end-guide#single-page-apps-spas
- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
@ -617,7 +617,7 @@ Possess working knowledge of it. A promise is an object that may produce a singl
Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply to the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
###### References
#### References
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
@ -656,7 +656,7 @@ Disadvantages:
Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
###### References
#### References
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
@ -670,7 +670,7 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- `debugger` statement
- Good old `console.log` debugging
###### References
#### References
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
@ -710,7 +710,7 @@ The event loop is a single-threaded loop that monitors the call stack and checks
If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
###### References
#### References
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
@ -737,7 +737,7 @@ var foo = function () {
};
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
@ -815,7 +815,7 @@ const baz = 'baz';
baz = 'qux';
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
@ -867,7 +867,7 @@ const transformNamesToUppercase = function (names) {
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```
###### References
#### References
- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
@ -910,7 +910,7 @@ console.log(p); // 42
console.log(q); // true
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
@ -951,7 +951,7 @@ var addFive = curriedAdd(5);
var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
```
###### References
#### References
- https://hackernoon.com/currying-in-js-d9ddc64f162e
@ -993,7 +993,7 @@ const { e, f, ...others } = {
}; // e: 1, f: 2, others: { g: 3, h: 4 }
```
###### References
#### References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

29
website/sidebars.js
View File

@ -3,7 +3,17 @@ module.exports = {
'introduction',
{
type: 'category',
label: 'Trivia questions',
label: 'Coding interview',
collapsed: false,
items: [
'javascript-utility-function',
'build-front-end-user-interfaces',
'algorithms',
],
},
{
type: 'category',
label: 'Quiz/trivia interview',
items: [
'trivia',
'javascript-questions',
@ -11,23 +21,6 @@ module.exports = {
'html-questions',
],
},
{
type: 'category',
label: 'Coding interview',
collapsed: false,
link: {
type: 'generated-index',
title: 'Coding round',
description:
'Various type of coding questions for front end interviews!',
slug: '/coding',
},
items: [
'javascript-utility-function',
'build-front-end-user-interfaces',
'algorithms',
],
},
{
type: 'category',
label: 'System design interview',

29
website/src/components/SidebarAd/index.js
View File

@ -5,12 +5,10 @@ import clsx from 'clsx';
import styles from './styles.module.css';
const BACKGROUNDS = [styles.backgroundOrange, styles.backgroundRed];
function FAANGTechLeads({ className, position }) {
function FAANGTechLeads({ position }) {
return (
<a
className={clsx(styles.container, className)}
className={clsx(styles.container, styles.backgroundRed)}
href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
target="_blank"
rel="noopener"
@ -18,9 +16,9 @@ function FAANGTechLeads({ className, position }) {
window.gtag('event', `faangtechleads.${position}.click`);
}}>
<p className={styles.tagline}>
<strong className={styles.title}>
<span className={styles.title}>
Craft the perfect resume for FAANG
</strong>
</span>
Save time crafting your resume with FAANG Tech Leads'{' '}
<u>FAANG-quality resume templates and examples</u> which have helped
many Software Engineers get interviews at top Bay Area companies. Grab
@ -33,28 +31,24 @@ function FAANGTechLeads({ className, position }) {
function GreatFrontEnd({ position }) {
return (
<a
className={clsx(styles.container, styles.backgroundPurple)}
className={clsx(styles.container)}
href={`https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&gnrs=frontendinterviewhandbook`}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `greatfrontend.${position}.click`);
}}>
<p className={styles.tagline}>
<strong className={styles.title}>
LeetCode for Front End Interviews
</strong>
Looking for front end interview practice? Try <u>GreatFrontEnd</u> - a
platform with curated practice questions, well-explained solutions and
automated test cases.
</p>
<div className={styles.tagline}>
<span className={styles.title}>
Navigate front end interviews easily with GreatFrontEnd
</span>
Meet the front end interview prep platform built by <u>ex-FAANG senior engineers</u> to make your life much easier
</div>
</a>
);
}
export default React.memo(function SidebarAd({ position }) {
const backgroundClass =
BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
// Because the SSR and client output can differ and hydration doesn't patch attribute differences,
// we'll render this on the browser only.
return (
@ -66,7 +60,6 @@ export default React.memo(function SidebarAd({ position }) {
if (path.includes('resume')) {
return (
<FAANGTechLeads
className={backgroundClass}
key={Math.random()}
position={position}
/>

150
website/src/components/SidebarAd/styles.module.css
View File

@ -1,48 +1,134 @@
.container {
background-repeat: no-repeat;
background-size: contain;
border-radius: var(--ifm-global-radius);
color: #fff;
display: block;
opacity: 0.95;
padding: 1rem;
transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.backgroundPurple {
background-color: rgb(79, 70, 229);
@property --border-angle-2 {
syntax: "<angle>";
inherits: true;
initial-value: 90deg;
}
@property --border-angle-3 {
syntax: "<angle>";
inherits: true;
initial-value: 180deg;
}
:root {
--color-one: #A07CFE;
--color-two: #FE8FB5;
--color-three: #FFBE7B;
--background: #fff;
--foreground: #18181b;
--border-size: 1.5px;
--border-radius: 0.75rem;
}
[data-theme="dark"] {
--background: #18181b;
--foreground: #fff;
}
@keyframes rotateBackground {
to { --border-angle-1: 360deg; }
}
@keyframes rotateBackground2 {
to { --border-angle-2: -270deg; }
}
@keyframes rotateBackground3 {
to { --border-angle-3: 540deg; }
}
.container {
--border-angle-1: 0deg;
--border-angle-2: 90deg;
--border-angle-3: 180deg;
background-color: #111;
border: 1px solid #eee;
color: inherit;
font-size: calc(0.8rem + 4vmin);
font-family: inherit;
padding: var(--border-size);
display: flex;
border-radius: var(--border-radius);
background-color: transparent;
background-image: conic-gradient(
from var(--border-angle-1) at 10% 15%,
transparent,
var(--color-one) 10%,
transparent 30%,
transparent
),
conic-gradient(
from var(--border-angle-2) at 70% 60%,
transparent,
var(--color-two) 10%,
transparent 60%,
transparent
),
conic-gradient(
from var(--border-angle-3) at 50% 20%,
transparent,
var(--color-three) 10%,
transparent 50%,
transparent
);
animation:
rotateBackground 3s linear infinite,
rotateBackground2 8s linear infinite,
rotateBackground3 13s linear infinite;
&:hover {
text-decoration: none;
}
}
.container > * {
background: var(--background);
padding: 0.75rem;
border-radius: calc(var(--border-radius) - var(--border-size));
color: var(--foreground);
}
[data-theme^="dark"] .container {
border: 0;
}
.backgroundRed {
background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
}
.backgroundOrange {
background-image: linear-gradient(
90deg,
rgb(253, 200, 48),
rgb(243, 115, 53)
);
}
.container:hover {
color: #fff;
opacity: 1;
text-decoration: none;
}
.tagline {
font-size: 0.75rem;
margin-bottom: 0;
--color-one: rgb(248, 7, 89);
--color-two: rgb(188, 78, 156);
--color-three: rgb(243, 115, 53);
}
.title {
color: var(--ifm-color-content);
display: block;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.1rem;
}
.tagline {
color: var(--ifm-color-content-secondary);
font-size: 0.75rem;
margin-bottom: 0;
strong, u {
color: var(--ifm-color-content);
font-weight: 500;
}
}
[data-theme="dark"] .tagline {
color: #a1a1aa;
}
.logo {
width: 96px;
}

39
website/src/css/custom.css
View File

@ -17,6 +17,7 @@
}
:root {
--ifm-font-size-base: 15px;
--ifm-color-primary: #d62b79;
--ifm-color-primary-dark: #c2256d;
--ifm-color-primary-darker: #b72367;
@ -29,7 +30,7 @@
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
--ifm-footer-padding-vertical: 3rem;
--ifm-footer-padding-vertical: 5rem;
}
html[data-theme='dark'] {
@ -40,14 +41,28 @@ html[data-theme='dark'] {
--ifm-color-primary-light: #ffb01a;
--ifm-color-primary-lighter: #ffb426;
--ifm-color-primary-lightest: #ffc14d;
}
--ifm-footer-padding-vertical: 3rem;
strong {
font-weight: 600;
}
html[data-theme='dark'] strong {
color: #fff;
}
.footer, .footer-dark {
--ifm-footer-background-color: #18181b;
}
.navbar {
font-size: 0.875rem;
}
.navbar__items .navbar-icon {
margin-right: 4px;
}
.footer__links {
margin-bottom: 3rem;
}
@ -56,14 +71,23 @@ html[data-theme='dark'] {
text-align: start;
}
.markdown h1:first-child {
--ifm-h1-font-size: 1.5em;
header h1 {
font-size: 1.875rem;
line-height: 1.2em;
}
@media screen and (min-width: 768px) {
.markdown h1:first-child {
--ifm-h1-font-size: 2.25em;
html[data-theme="dark"] .markdown h1,
html[data-theme="dark"] .markdown h2,
html[data-theme="dark"] .markdown h3,
html[data-theme="dark"] .markdown h4,
html[data-theme="dark"] .markdown h5,
html[data-theme="dark"] .markdown h6 {
color: #fff;
}
.markdown h1 {
font-size: 2rem;
line-height: 1.2em;
}
.markdown h2 {
@ -80,7 +104,6 @@ html[data-theme='dark'] {
.markdown h3 {
--ifm-h3-font-size: 1.25em;
font-weight: 600;
margin-top: 1.8em;
margin-bottom: 0.5em;
}