website: add GreatFrontEnd links
This commit is contained in:
Yangshun Tay
Yangshun
parent
7fe6ec7118
commit
27095b4f69
|
|
@ -9,7 +9,7 @@
|
|||
<a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
|
||||
</h3>
|
||||
<p>
|
||||
Join/follow us on <a href="https://discord.com/invite/BZuXW2gJy9" target="_blank">Discord</a> | <a href="https://twitter.com/yangshunz" target="_blank">Twitter</a> | <a href="https://t.me/techinterviewhandbook" target="_blank" >Telegram</a> | <a href="https://facebook.com/techinterviewhandbook" target="_blank">Facebook</a>
|
||||
Join/follow us on <a href="https://discord.com/invite/BZuXW2gJy9" target="_blank">Discord</a> | <a href="https://twitter.com/greatfrontend" target="_blank">Twitter</a> | <a href="https://t.me/techinterviewhandbook" target="_blank" >Telegram</a> | <a href="https://facebook.com/techinterviewhandbook" target="_blank">Facebook</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ Unlike typical software engineer job interviews, front end job interviews have l
|
|||
---
|
||||
|
||||
<div align="center">
|
||||
<h3>💡 Preparing for front end interviews? <a href="https://www.greatfrontend.com">GreatFrontEnd</a> is offering 50% off its lifetime plan of high quality practice questions and solutions written by ex-FAANG Engineers 💡</h3>
|
||||
<h3>💡 Preparing for front end interviews? <a href="https://www.greatfrontend.com">GreatFrontEnd</a> is offering 25% off its lifetime plan of high quality practice questions and solutions written by ex-FAANG Engineers 💡</h3>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ slug: coding/algorithms
|
|||
sidebar_label: Algorithms coding
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?fpr=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.
|
||||
|
||||
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.
|
||||
|
|
@ -12,6 +18,13 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
|
|||
|
||||
<a className="button button--primary" href="https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/">Go to Tech Interview Handbook →</a>
|
||||
|
||||
## Free practice questions
|
||||
|
||||
### GreatFrontEnd
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?fpr=frontendinterviewhandbook). You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack), [Queues](https://www.greatfrontend.com/questions/javascript/queue)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort)).
|
||||
|
||||
|
||||
## Algorithm courses
|
||||
|
||||
### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
|
||||
|
|
@ -31,3 +44,9 @@ If you want more structured algorithms practice which are targeted at JavaScript
|
|||
| [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 |
|
||||
|
||||
:::info Practice Data Structures and Algorithms coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
|
||||
:::
|
||||
|
|
@ -2,6 +2,12 @@
|
|||
title: Behavorial interview
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?fpr=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.
|
||||
|
||||
<a className="button button--primary" href="https://www.techinterviewhandbook.org/behavioral-interview/">Go to Tech Interview Handbook →</a>
|
||||
|
|
@ -16,6 +22,12 @@ 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)_
|
||||
|
||||
:::info Free behavioral interview guide
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com) shows you how to approach behavioral interviews as a front end engineer with its free [Behavioral Interview Guidebook](https://www.greatfrontend.com/behavioral-interview-guidebook). 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.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ slug: coding/build-front-end-user-interfaces
|
|||
sidebar_label: User interface coding
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Many Front End Engineers spend a lot of time building UI, and building a UI component is a good way to assess someone's familiarity in the three biggest aspects of front end — HTML, JavaScript, CSS.
|
||||
|
||||
Companies that ask such questions usually ask candidates to code in one of these three ways:
|
||||
|
|
@ -16,10 +22,10 @@ Companies that ask such questions usually ask candidates to code in one of these
|
|||
## Examples
|
||||
|
||||
- Components
|
||||
- Tabs
|
||||
- Accordion
|
||||
- Tabs — [Practice on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/tabs) (Paid)
|
||||
- Accordion — [Practice on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/accordion) (Paid)
|
||||
- Photo Gallery
|
||||
- Other possible components - [Refer to Bootstrap's list](https://getbootstrap.com/docs/4.0/components/)
|
||||
- Other possible components—- [Refer to Bootstrap's list](https://getbootstrap.com/docs/4.0/components/)
|
||||
- Apps
|
||||
- Sortable Data Table (with extensions for filtering)
|
||||
- TODO list
|
||||
|
|
@ -31,6 +37,12 @@ Companies that ask such questions usually ask candidates to code in one of these
|
|||
- Tetris (advanced)
|
||||
- Snake (advanced)
|
||||
|
||||
:::info Practice UI coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
## Considerations
|
||||
|
||||
After you complete (or even before you start on) the question, think about these potential issues (where relevant). You may or may not have to handle them, so you can always clarify with the interviewer before starting on it so that you don't write too much/little code.
|
||||
|
|
@ -83,3 +95,9 @@ Does your component scale (latency, performance, UI, UX, etc)?
|
|||
### Future
|
||||
|
||||
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.
|
||||
|
||||
:::info Practice UI coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
|
||||
:::
|
||||
|
|
@ -3,6 +3,12 @@ title: Airbnb front end interview questions
|
|||
sidebar_label: Airbnb interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Write a simple promise.
|
||||
|
|
@ -11,7 +17,9 @@ sidebar_label: Airbnb interview questions
|
|||
## User interface coding
|
||||
|
||||
- Given an input and an endpoint which returns a JSON list, as a result, extend it to autocomplete on change, handle key navigation through the results.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Given a star widget embedded in a form write the code to select the stars and submit the correct value through a normal form action. Make reusable for multiple star widgets.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/star-rating)
|
||||
|
||||
_Source: [Glassdoor Airbnb Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)_
|
||||
|
||||
|
|
|
|||
|
|
@ -3,30 +3,44 @@ title: Amazon front end interview questions
|
|||
sidebar_label: Amazon interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Amazon is known to focus a lot on behavioral questions and their Leadership Principles. Hence be well-prepared in the non-technical aspects too. Refer to the [official Amazon Interview Preparation Guide for Software Development Engineer](https://amazonsdeinterviewprep.splashthat.com/).
|
||||
|
||||
## Trivia
|
||||
|
||||
- What is the CSS box model?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
|
||||
- What is a JavaScript closure?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one)
|
||||
- What happens when you type URL into a browser and hit enter?
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
|
||||
- [Practice questions on GreatFrontEnd](https://www.greatfrontend.com/questions/js/coding/utilities)
|
||||
- Given an object and a filter function, write a function that recursively filters the object, returning only values which return `true` when called with the filter function (like `Array.prototype.filter` but for objects).
|
||||
- Implement a function `getElementsByStyle(property, value)` that returns all elements in the DOM that match that style.
|
||||
- E.g. `getElementsByStyle("color", "#fff")` will return all elements in the DOM with white text.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name) (Paid)
|
||||
- Promisify a function.
|
||||
|
||||
## User interface coding
|
||||
|
||||
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/data-selection) (Paid)
|
||||
- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
|
||||
- Implement a Like button. [Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/like-button) (Paid)
|
||||
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||
- Implement a search bar using HTML, CSS and JavaScript.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Implement a star rating widget.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/star-rating)
|
||||
- Implement tic-tac-toe.
|
||||
- Recreate an adaptive layout with flexbox. Ensure accessibility.
|
||||
- Implement a chess board with movable pieces.
|
||||
|
|
@ -37,6 +51,7 @@ Amazon is known to focus a lot on behavioral questions and their Leadership Prin
|
|||
|
||||
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||
- Design an accordion component.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/user-interface/accordion) (Paid)
|
||||
|
||||
## Algorithm
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,18 @@ title: Apple front end interview questions
|
|||
sidebar_label: Apple interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Not much is known about Apple's front end interview process.
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
|
||||
- [Practice questions on GreatFrontEnd](https://www.greatfrontend.com/questions/coding)
|
||||
- How can you execute an array of promise in sequence?
|
||||
|
||||
## User interface coding
|
||||
|
|
|
|||
|
|
@ -3,20 +3,30 @@ title: ByteDance/TikTok front end interview questions
|
|||
sidebar_label: ByteDance/TikTok interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
ByteDance/TikTok's front end interview is quite balanced in terms of interview format.
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Implement `Promise.all`.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/promise-all)
|
||||
- Implement a function which extends `Array.prototype`.
|
||||
- [Practice questions on GreatFrontEnd](https://www.greatfrontend.com/prepare/coding)
|
||||
|
||||
## User interface coding
|
||||
|
||||
- Implement a dropdown component.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
|
||||
|
||||
## Trivia
|
||||
|
||||
- Difference between `localStorage` and cookies.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
|
||||
|
||||
## Algorithm
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Dropbox front end interview questions
|
|||
sidebar_label: Dropbox interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Dropbox focuses on practical questions for their Front End Engineering interview loop rather than on raw algorithmic coding.
|
||||
|
||||
> Our web developer interviews focus on practical application of HTML/CSS/JS for building web UI. The questions are based on real-world examples rather than raw coding exercises. You will be given a design spec and asked to build the best solution you can that demonstrates your experience and grasp of web development technologies.
|
||||
|
|
@ -12,11 +18,13 @@ Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/
|
|||
## JavaScript
|
||||
|
||||
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name)
|
||||
- OOP-based class management system.
|
||||
|
||||
## User interface coding
|
||||
|
||||
- Build an image gallery using JavaScript, HTML, CSS.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/image-carousel)
|
||||
- Forming words from mobile keypad.
|
||||
- Build a UI that fetches data from a weather API that is matching a design spec.
|
||||
- Build a UI that matches a design spec of one of the pages on the Dropbox homepage.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Google front end interview questions
|
|||
sidebar_label: Google interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Since it's Google, candidates can expect to be tested on fundamental Computer Science concepts as well as their front end knowledge/skills.
|
||||
|
||||
> Web Front End: You should be ready to cover topics like front end latency and implementation of standard CS algorithms using idiomatic JavaScript. You should be able to articulate Javascript strengths and shortcomings and ready to cover any of the following: Web security issues (XSS, XSRF), Prototypal inheritance, DOM API & manipulation, CSS manipulation, Browser / DOM events & event handling, XHR requests & HTTP headers, JavaScript closures
|
||||
|
|
@ -11,11 +17,16 @@ Refer to the [full official Google Interview Preparation Guide for Front End Sof
|
|||
|
||||
## JavaScript
|
||||
|
||||
- Implement the outline view for a Google doc.
|
||||
- DFS on HTML nodes.
|
||||
- Implement `throttle`.
|
||||
- How do you make a function that only calls input function f every 50 milliseconds?
|
||||
- How do you make a function that takes f and returns a function that calls f on a timeout?
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/debounce)
|
||||
- Implement the outline view for a Google doc.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/table-of-contents) (Paid)
|
||||
- DFS on HTML nodes.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name) (Paid)
|
||||
- Implement `throttle`.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/throttle) (Paid)
|
||||
- How do you make a function that only calls input function f every 50 milliseconds?
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/throttle) (Paid)
|
||||
- Given a timeline write the JavaScript to select all nodes within selection of timeline.
|
||||
|
||||
## User interface coding
|
||||
|
|
@ -25,8 +36,8 @@ Refer to the [full official Google Interview Preparation Guide for Front End Sof
|
|||
- Implement nested checkboxes (when the parent is checked, children are checked and vice versa. Use `<input type="checkbox">`). Similar to [Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/).
|
||||
- Design a webpage which can auto load new posts when you reach the bottom of the page by using JavaScript. You may use AJAX and JavaScript event listeners.
|
||||
- Write a UI using HTML, CSS, JavaScript that allows uses to enter the number of rows and columns in text input fields within a form and renders a table.
|
||||
|
||||
Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/throttle) (Paid)
|
||||
- Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
|
||||
|
||||
| 1 | 8 | 9 | 16 | 17 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
|
|
@ -34,18 +45,22 @@ Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on t
|
|||
| 3 | 6 | 11 | 14 | 19 |
|
||||
| 4 | 5 | 12 | 13 | 20 |
|
||||
|
||||
|
||||
## Trivia
|
||||
|
||||
- Explain the CSS Box Model.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
|
||||
- What happens when you type a URL into the browser and hits enter?
|
||||
- Given some text on a web page, how many ways can you make the text disappear?
|
||||
- How do you send data from a web page to a server without a page refresh?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax)
|
||||
|
||||
## System design
|
||||
|
||||
- Design emoji autocomplete.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Design JS Bin.
|
||||
- How would you create a Google Analytics SDK used by webpages?
|
||||
- Design emoji autocomplete.
|
||||
|
||||
## Algorithm
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,16 @@ title: LinkedIn front end interview questions
|
|||
sidebar_label: LinkedIn interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Write a `getElementsByClassName` function.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name)
|
||||
|
||||
## User interface coding
|
||||
|
||||
|
|
@ -15,11 +22,14 @@ sidebar_label: LinkedIn interview questions
|
|||
## Trivia
|
||||
|
||||
- Difference between CSS `padding` and `margin`.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
|
||||
- Difference between promise and callback?
|
||||
- Difference between event bubbling and capturing?
|
||||
- Difference between callback and closure in JavaScript?
|
||||
- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors)
|
||||
- What is event delegation?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/explain-event-delegation)
|
||||
|
||||
## Algorithm
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,21 @@ title: Lyft front end interview questions
|
|||
sidebar_label: Lyft interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Implement `Promise.all`.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/promise-all)
|
||||
- Write the logic for minesweeper using vanilla JS.
|
||||
|
||||
## User interface coding
|
||||
|
||||
- Implement an autocomplete.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
|
||||
_Source: [Glassdoor Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Microsoft front end interview questions
|
|||
sidebar_label: Microsoft interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## JavaScript
|
||||
|
||||
- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
|
||||
|
|
@ -17,12 +23,16 @@ sidebar_label: Microsoft interview questions
|
|||
## Trivia
|
||||
|
||||
- What is a prototype?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works)
|
||||
- What is a closure?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one)
|
||||
- What is the difference between `let`, `const`, and `var`?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
|
||||
- What is DOM?
|
||||
|
||||
## System Design
|
||||
|
||||
- Design an email client like Microsoft Outlook.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/email-client-outlook) (Paid)
|
||||
|
||||
_Source: [Glassdoor Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_
|
||||
|
|
|
|||
|
|
@ -3,13 +3,26 @@ title: Salesforce front end interview questions
|
|||
sidebar_label: Salesforce interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Not much is known about Salesforce's front end interview process.
|
||||
|
||||
## Coding
|
||||
|
||||
- Flatten a nested array.
|
||||
- [Practice question on GreatFrontEnd](https://www.greatfrontend.com/questions/javascript/flatten)
|
||||
|
||||
## Trivia
|
||||
|
||||
- What is the event loop?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
|
||||
- What is a closure?
|
||||
- Flatten a nested array.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one)
|
||||
- Positioning in CSS.
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
|
||||
|
||||
_Source: [Glassdoor Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Twitter front end interview questions
|
|||
sidebar_label: Twitter interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## User interface coding
|
||||
|
||||
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
|
||||
|
|
@ -11,5 +17,6 @@ sidebar_label: Twitter interview questions
|
|||
## Trivia
|
||||
|
||||
- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
|
||||
- [Read answer on GreatFrontEnd](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other)
|
||||
|
||||
_Source: [Glassdoor Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Uber front end interview questions
|
|||
sidebar_label: Uber interview questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Not much is known about Uber's front end interview process.
|
||||
|
||||
## JavaScript
|
||||
|
|
@ -12,4 +18,4 @@ Not much is known about Uber's front end interview process.
|
|||
## User interface coding
|
||||
|
||||
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
|
||||
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject) 80/Rate-Limiter)
|
||||
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: CSS trivia questions in front end interviews
|
|||
sidebar_label: CSS questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
|
|
|||
|
|
@ -4,17 +4,20 @@ slug: front-end-system-design/applications
|
|||
sidebar_label: Applications
|
||||
---
|
||||
|
||||
:::caution
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
This page is still work in progress.
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
- Social network
|
||||
- News feed (e.g. Facebook) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
|
||||
- E-commerce marketplace (e.g. Amazon) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)
|
||||
- Chat application (e.g. Messenger) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)
|
||||
- Photo sharing application (e.g. Instagram) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)
|
||||
- Video watching website
|
||||
- Chat application
|
||||
- Mail application
|
||||
|
||||
## Framework
|
||||
|
|
@ -47,18 +50,20 @@ Architecture for front end interviews are typically focused on the client-side a
|
|||
|
||||
For applications, common architectures include Model-View-Controller, Model-View-ViewModel, Flux, N-tier (where data tier is on the client) etc.
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
### Data model
|
||||
|
||||
Client app state, which is a combination of server state (database) and true client state (non-persisted to the server).
|
||||
|
||||
TBD.
|
||||
|
||||
### API design
|
||||
|
||||
API design for applications will refer to the HTTP/network API parameters and the shape of the responses.
|
||||
|
||||
TBD.
|
||||
|
||||
### Deep dives
|
||||
|
||||
With the architectural basics of the application covered, we can dive into specific areas which the application might need special attention to. Note that there almost definitely won't be enough time to cover every area, and not every area will be very relevant to the component at hand.
|
||||
|
|
@ -83,3 +88,9 @@ Many companies blog about their technical challenges in the front end domain and
|
|||
- [A Pinterest Progressive Web App Performance Case Study](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)
|
||||
- [A React And Preact Progressive Web App Performance Case Study: Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
|
||||
- [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -4,11 +4,26 @@ slug: front-end-system-design/ui-components
|
|||
sidebar_label: UI components
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
- Image carousel
|
||||
- Autocomplete — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Image carousel — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)
|
||||
- Dropdown menu — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
|
||||
- Modal dialog — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/modal-dialog) (Paid)
|
||||
- Selector which loads options over the network
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
## 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 **RADAD** 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.
|
||||
|
|
@ -47,6 +62,12 @@ Let's take an image carousel example. Subcomponents within an image carousel wou
|
|||
|
||||
If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
### Data model
|
||||
|
||||
Data model for components will refer to the component state. The concept of state should be familiar to most front end developers who have used front end UI libraries/frameworks such as React, Angular, Vue, Svelte, etc. In every of these libraries/frameworks, state is a common concept.
|
||||
|
|
@ -71,6 +92,12 @@ The key idea behind components is for them to be reused and abstract complexitie
|
|||
- Possible configuration options:
|
||||
- Lifecycle/event hooks - `onClick`, `onChange`, `onBlur`, `onFocus`, etc.
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
### Deep dives
|
||||
|
||||
With the basics of the component covered, we can dive into specific areas where the component might need special attention to. Note that there almost definitely won't be enough time to cover every area, and not every area will be very relevant to the component at hand.
|
||||
|
|
@ -110,6 +137,12 @@ In front end, performance typically refers to a few things - loading speed, how
|
|||
- Lazy loading/load only necessary data - For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
|
||||
- Preloading/prefetching data ahead of time - For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
#### Accessibility (a11y)
|
||||
|
||||
Accessibility (a11y) is the practice of making your websites usable by as many people as possible.
|
||||
|
|
@ -152,6 +185,8 @@ Most of the time, components aren't exposed to security vulnerabilities, but it
|
|||
- Clickjacking
|
||||
- [`rel=noopener`](https://mathiasbynens.github.io/rel-noopener/)
|
||||
|
||||
## Helpful articles
|
||||
:::info Read front end system design case studies
|
||||
|
||||
- [Building an accessible autocomplete control](https://adamsilver.io/blog/building-an-accessible-autocomplete-control/)
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their front end system design guide and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Front end system design interview overview
|
|||
sidebar_label: Overview
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?fpr=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.
|
||||
|
||||
"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.
|
||||
|
|
@ -13,15 +19,25 @@ Many of the topics mentioned in the ["Build user interfaces" format](./build-fro
|
|||
|
||||
The two main kinds of front end system design interviews are UI components and applications.
|
||||
|
||||
## Examples
|
||||
## Front end system design examples
|
||||
|
||||
- User interface components
|
||||
- Image carousel
|
||||
- Selector
|
||||
- Autocomplete — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Image carousel — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)
|
||||
- Dropdown menu — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
|
||||
- Modal dialog — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/modal-dialog) (Paid)
|
||||
- Applications
|
||||
- News feed
|
||||
- News feed (e.g. Facebook) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
|
||||
- E-commerce marketplace (e.g. Amazon) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)
|
||||
- Chat application (e.g. Messenger) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)
|
||||
- Photo sharing application (e.g. Instagram) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)
|
||||
- Video watching website
|
||||
- Chat application
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design) and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
||||
## RADAD Framework
|
||||
|
||||
|
|
@ -47,3 +63,9 @@ Because front end system design interviews focus on front end, you probably do n
|
|||
- Talk 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).
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/system-design) shows you how to approach front end system design interviews with their front end system design guide and case studies. Start reading today!
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: HTML trivia questions in front end interviews
|
|||
sidebar_label: HTML questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
title: Introduction
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
## What is this?
|
||||
|
||||
Unlike typical software engineer job interviews, front end interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the front end domain — HTML, CSS, JavaScript, just to name a few.
|
||||
|
|
@ -10,6 +16,8 @@ Many front end interviews are highly-focused on domain knowledge and applying th
|
|||
|
||||
While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a general software engineer interview. Among the existing resources, the most helpful question bank would probably be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, there aren't many complete and satisfactory answers to these questions readily available online. This handbook answers these trivia-style questions along with information and guidance for other front end interview formats.
|
||||
|
||||
To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=introduction&fpr=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
|
||||
|
||||
## General tips for front end interviews
|
||||
|
||||
Regardless of which type of format you are given, one thing stays true - you need to be extremely strong in your front end fundamentals and constantly display mastery of them to your interviewer.
|
||||
|
|
@ -80,9 +88,15 @@ 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)
|
||||
|
||||
:::info Be interview-ready with GreatFrontEnd
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has questions and answers for all kind of front end interview questions, [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook), and a [huge question bank](https://www.greatfrontend.com/prepare/coding?fpr=frontendinterviewhandbook)!
|
||||
|
||||
:::
|
||||
|
||||
## Company interview formats
|
||||
|
||||
Through extensive research, are the different type of formats companies ask during the technical rounds of front end interviews. If you're interviewing for front end engineering roles at certain companies, prepare accordingly!
|
||||
Through extensive research, here are the different type of formats companies ask during the technical rounds of front end interviews. If you're interviewing for front end engineering roles at certain companies, prepare accordingly!
|
||||
|
||||
_Legend: ✅: Asked, ❌: Not asked, ⚠️: No data_
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: JavaScript trivia questions in front end interviews
|
|||
sidebar_label: JavaScript questions
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
|
|
|||
|
|
@ -4,10 +4,23 @@ slug: coding/javascript-utility-function
|
|||
sidebar_label: JavaScript coding
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focus on practical use cases. However, they can also be questions simply being the same LeetCode problem but you are required to answer in JavaScript.
|
||||
|
||||
Almost all existing utility functions you will be asked exist within the JavaScript language or famous third-party libraries like Lodash/Underscore, with the most famous being `debounce` and `throttle`. However, Lodash's implementation is extremely over-engineered — reusing a lot of abstract functions and supporting weird and obscure use cases for older browsers; you're not expected to handle such edge cases within an interview setting.
|
||||
|
||||
:::info Practice JavaScript coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## Basic examples
|
||||
|
||||
- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`
|
||||
|
|
@ -32,6 +45,12 @@ Advanced questions are usually given to more senior candidates and expect around
|
|||
- Implement `JSON.stringify()`.
|
||||
- Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline).
|
||||
|
||||
:::info Practice JavaScript coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
## Tips
|
||||
|
||||
- Always strive to write pure functions, aka functions which don't rely on state outside of the function and doesn't cause side effects.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
title: Resume preparation
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Resumes are often overlooked in the job application process, but extremely important as they can make or break your application. The [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/guide) contains more details on how to write a killer resume which will also benefit Front End engineer candidates.
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Trivia questions in front end interviews
|
|||
sidebar_label: Overview
|
||||
---
|
||||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
|
||||
:::
|
||||
|
||||
Trivia-style questions are usually found in the first few stages of an interview as the answers are usually short and can possibly be administered by a minimally-technical recruiter.
|
||||
|
||||
Trivia questions are meant to test how well candidates understand the theory behind the domain. They can be aced by either having real solid understanding of the concepts or by pure memorization of answers. While there can be infinitely many possible quiz questions, the most common questions can be found within the next few pages.
|
||||
|
|
@ -18,6 +24,12 @@ Trivia questions are meant to test how well candidates understand the theory beh
|
|||
- Explain the CSS box model.
|
||||
- Explain the various CSS `position` properties and its differences.
|
||||
|
||||
:::info Best place to prepare for Front End interviews.
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) provides front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of trivia questions and answers](https://www.greatfrontend.com/prepare/quiz?fpr=frontendinterviewhandbook). Start studying today!
|
||||
|
||||
:::
|
||||
|
||||
## Advanced examples
|
||||
|
||||
For more senior candidates, expect to explain more advanced stuff with no absolute answers.
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ This is good advice and it's not new advice. In most university courses, student
|
|||
|
||||
Having a strong foundation enables someone to make switching domains a possibility. There will definitely be a ramp-up process, but it can be made smoother with solid foundations, and with the skill of learning how to learn fast. In the extreme case where the web becomes irrelevant, and no companies want to hire front end developers anymore, front end developers with strong fundamentals can always slightly switch tracks by doing mobile or back end engineering, or even the hottest UI platform (AR/VR?) out there.
|
||||
|
||||
Having good tools to use (like Create React App, Parcel) doesn't eradicate the need for Front End developers to possess good software engineering skills. What will happen if you are the person tasked to build the tools? Great Front End developers (or Software Engineers really) go beneath the abstractions layer, understand how their tools work, and what problems the tool set out to solve. They also constantly seek to challenge and improve the status quo by building better technologies to cater to the ever-increasing demands.
|
||||
Having good tools to use (like Create React App, Parcel) doesn't eradicate the need for Front End developers to possess good software engineering skills. What will happen if you are the person tasked to build the tools? GreatFrontEnd developers (or Software Engineers really) go beneath the abstractions layer, understand how their tools work, and what problems the tool set out to solve. They also constantly seek to challenge and improve the status quo by building better technologies to cater to the ever-increasing demands.
|
||||
|
||||
At Facebook, the Front End Engineers are Software Engineers first, domain experts second. Many of the Front End engineers I know at Facebook have a deep understanding of the technical stack and don't just work on stuff related to the browser. At Facebook scale, front end work also involves building a lot of infrastructure to make our front end code base scale well with the growing technical and people needs. That means writing [codemods](https://github.com/facebook/jscodeshift) to do large-scale refactoring, inventing new [UI](https://reactjs.org) [paradigms](http://facebook.github.io/flux/), performant [testing frameworks](https://jestjs.io), creating [type-checkers](https://flow.org) for untyped languages, changing the ways we [fetch data](https://graphql.org) from our servers and [managing it on clients](https://relay.dev). These tools wouldn't exist if the Front End engineers at Facebook didn't possess strong software engineering skills.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ module.exports = {
|
|||
onBrokenLinks: 'ignore',
|
||||
themeConfig: {
|
||||
announcementBar: {
|
||||
id: 'faangtechleads', // Increment on change
|
||||
content: `⭐️ Craft the perfect resume for FAANG with these <a href="https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=banner&aff=1e80c401fe7e2" target="_blank">Software Engineer resume templates and examples</a>!</a> ⭐️`,
|
||||
id: 'gfe', // Increment on change
|
||||
content: `⭐️ We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-FAANG Senior Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">Get 25% off the lifetime plan today</a>! ⭐️`,
|
||||
isCloseable: false,
|
||||
},
|
||||
prism: {
|
||||
|
|
@ -62,7 +62,7 @@ module.exports = {
|
|||
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>`,
|
||||
},
|
||||
{
|
||||
href: 'https://twitter.com/yangshunz',
|
||||
href: 'https://twitter.com/greatfrontend',
|
||||
position: 'right',
|
||||
className: 'navbar-icon navbar-icon-twitter',
|
||||
'aria-label': 'Twitter page',
|
||||
|
|
@ -137,8 +137,8 @@ module.exports = {
|
|||
href: 'https://github.com/yangshun/front-end-interview-handbook',
|
||||
},
|
||||
{
|
||||
label: 'Facebook',
|
||||
href: 'https://www.facebook.com/techinterviewhandbook',
|
||||
label: 'Tech Interview Handbook',
|
||||
href: 'https://www.techinterviewhandbook.org',
|
||||
},
|
||||
{
|
||||
label: 'Twitter',
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
"deploy": "docusaurus deploy"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.0.1",
|
||||
"@docusaurus/plugin-client-redirects": "^2.0.1",
|
||||
"@docusaurus/preset-classic": "^2.0.1",
|
||||
"@docusaurus/core": "2.0.1",
|
||||
"@docusaurus/plugin-client-redirects": "2.0.1",
|
||||
"@docusaurus/preset-classic": "2.0.1",
|
||||
"clsx": "^1.2.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const BACKGROUNDS = [
|
||||
styles.backgroundOrange,
|
||||
styles.backgroundPurple,
|
||||
styles.backgroundRed,
|
||||
];
|
||||
const BACKGROUNDS = [styles.backgroundOrange, styles.backgroundRed];
|
||||
|
||||
function FAANGTechLeads({className, position}) {
|
||||
return (
|
||||
|
|
@ -35,42 +30,23 @@ function FAANGTechLeads({className, position}) {
|
|||
);
|
||||
}
|
||||
|
||||
function AlgoMonster({className, position}) {
|
||||
function GreatFrontEnd({position}) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, className)}
|
||||
href="https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack="
|
||||
className={clsx(styles.container, styles.backgroundPurple)}
|
||||
href={`https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&fpr=frontendinterviewhandbook`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `algomonster.${position}.click`);
|
||||
window.gtag('event', `greatfrontend.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Stop grinding. Study with a plan
|
||||
LeetCode for Front End Interviews
|
||||
</strong>
|
||||
Developed by Google engineers, <u>AlgoMonster</u> is the fastest way to
|
||||
get a software engineering job. <u>Join today for a 70% discount!</u>!
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function EducativeCoding({className, position}) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, className)}
|
||||
href="https://educative.io/tech-interview-handbook"
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `educative.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>Looking to get hired at FAANG?</strong>{' '}
|
||||
<u>Educative</u> offers many great courses to improve your interview
|
||||
game. <u>Join today for a 10% discount!</u>
|
||||
Get 25% off <u>GreatFrontEnd</u>'s lifetime plan of high quality
|
||||
practice questions, answers and guides by{' '}
|
||||
<u>ex-FAANG Senior Engineers</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
|
|
@ -97,19 +73,7 @@ export default React.memo(function SidebarAd({position}) {
|
|||
);
|
||||
}
|
||||
|
||||
return Math.random() > 0.5 ? (
|
||||
<AlgoMonster
|
||||
className={backgroundClass}
|
||||
key={Math.random()}
|
||||
position={position}
|
||||
/>
|
||||
) : (
|
||||
<EducativeCoding
|
||||
className={backgroundClass}
|
||||
key={Math.random()}
|
||||
position={position}
|
||||
/>
|
||||
);
|
||||
return <GreatFrontEnd position={position} />;
|
||||
}}
|
||||
</BrowserOnly>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,11 +11,7 @@
|
|||
}
|
||||
|
||||
.backgroundPurple {
|
||||
background-image: linear-gradient(
|
||||
138deg,
|
||||
rgb(69, 104, 220),
|
||||
rgb(176, 106, 179)
|
||||
);
|
||||
background-color: rgb(79, 70, 229);
|
||||
}
|
||||
|
||||
.backgroundRed {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ export default function Home() {
|
|||
description={siteConfig.tagline}>
|
||||
<div>
|
||||
<HeroSection />
|
||||
<FAANGTechLeadsSection />
|
||||
<GreatFrontEndSection />
|
||||
<FeaturesSection />
|
||||
<TweetsSection />
|
||||
<MoonchaserSection />
|
||||
<FAANGTechLeadsSection />
|
||||
<SuccessStoriesSection />
|
||||
<SponsorshipSection />
|
||||
</div>
|
||||
|
|
@ -74,45 +74,64 @@ function HeroSection() {
|
|||
);
|
||||
}
|
||||
|
||||
function MoonchaserSection() {
|
||||
/* Because the SSR and client output can differ and hydration doesn't patch attribute differences,
|
||||
we'll render this on the browser only. */
|
||||
function GreatFrontEndSection() {
|
||||
return (
|
||||
<BrowserOnly>
|
||||
{() => (
|
||||
<div className={clsx('padding-vert--lg', styles.sectionSponsor)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<div className="margin-vert--lg text--center">
|
||||
<h2 className={styles.sectionSponsorTitle}>
|
||||
<div align="center">
|
||||
<strong>
|
||||
Get paid more. Receive risk-free salary negotiation help
|
||||
from Moonchaser. You pay nothing unless your offer is
|
||||
increased.
|
||||
</strong>
|
||||
</div>
|
||||
</h2>
|
||||
<div className="margin-vert--lg">
|
||||
<div
|
||||
className={clsx('padding-vert--lg')}
|
||||
style={{backgroundColor: 'rgb(79, 70, 229)'}}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--10 col--offset-1">
|
||||
<div className="margin-vert--lg text--center">
|
||||
<div>
|
||||
<h2
|
||||
className={styles.sectionSponsorTitle}
|
||||
style={{fontSize: 'var(--ifm-h2-font-size)'}}>
|
||||
<strong>
|
||||
Want to practice front end questions and reference answers from experienced ex-FAANG senior engineers? Top front end interview practice platform{' '}
|
||||
<a
|
||||
className="button button--secondary button--lg"
|
||||
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
onClick={() => {
|
||||
window.gtag('event', 'moonchaser.homepage.click');
|
||||
}}>
|
||||
Get risk-free negotiation advice →
|
||||
</a>
|
||||
</div>
|
||||
href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
|
||||
style={{color: '#fff', textDecoration: 'underline'}}>
|
||||
GreatFrontEnd
|
||||
</a>{' '}
|
||||
is now offering 25% off their lifetime plan! Try out their free questions today:
|
||||
</strong>
|
||||
</h2>
|
||||
<div className="margin-vert--lg">
|
||||
<a
|
||||
className="button button--secondary button--lg"
|
||||
href="https://www.greatfrontend.com/questions/system-design/news-feed-facebook"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
onClick={() => {
|
||||
window.gtag(
|
||||
'event',
|
||||
'greatfrontend.homepage.system_design.click',
|
||||
);
|
||||
}}>
|
||||
System Design Questions →
|
||||
</a>
|
||||
|
||||
<a
|
||||
className="button button--secondary button--lg"
|
||||
href="https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
onClick={() => {
|
||||
window.gtag(
|
||||
'event',
|
||||
'greatfrontend.homepage.coding.click',
|
||||
);
|
||||
}}>
|
||||
Coding Questions →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</BrowserOnly>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +154,7 @@ function FAANGTechLeadsSection() {
|
|||
<div className="margin-vert--lg">
|
||||
<a
|
||||
className="button button--secondary button--lg"
|
||||
href="https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2"
|
||||
href="https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -29,29 +29,6 @@ function TOC({className, ...props}) {
|
|||
linkClassName={LINK_CLASS_NAME}
|
||||
linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
|
||||
/>
|
||||
<div
|
||||
className={clsx(
|
||||
'margin-top--md padding--md',
|
||||
styles.socialLinksContainer,
|
||||
)}>
|
||||
<div className={styles.socialLinks}>
|
||||
Follow us
|
||||
<a
|
||||
href="https://twitter.com/yangshunz"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="navbar-icon navbar-icon-twitter"
|
||||
aria-label="Twitter"
|
||||
/>
|
||||
<a
|
||||
href="https://discord.gg/BZuXW2gJy9"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="navbar-icon navbar-icon-discord"
|
||||
aria-label="Discord channel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2650,7 +2650,7 @@
|
|||
"@docsearch/css" "3.1.1"
|
||||
algoliasearch "^4.0.0"
|
||||
|
||||
"@docusaurus/core@2.0.1", "@docusaurus/core@^2.0.1":
|
||||
"@docusaurus/core@2.0.1":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.0.1.tgz#a2b0d653e8f18eacddda4778a46b638dd1f0f45c"
|
||||
integrity sha512-Prd46TtZdiixlTl8a+h9bI5HegkfREjSNkrX2rVEwJZeziSz4ya+l7QDnbnCB2XbxEG8cveFo/F9q5lixolDtQ==
|
||||
|
|
@ -2782,7 +2782,7 @@
|
|||
react-helmet-async "*"
|
||||
react-loadable "npm:@docusaurus/react-loadable@5.5.2"
|
||||
|
||||
"@docusaurus/plugin-client-redirects@^2.0.1":
|
||||
"@docusaurus/plugin-client-redirects@2.0.1":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-2.0.1.tgz#3b00cd0a816fe85e6c505651f28b59fff723ac67"
|
||||
integrity sha512-A/giM3MIRRyUmxNzLb/jWvmRf0NtPYX4bV04njAnziAdPo4dqT4dZF2Hvy0uUSaF/SXPGLUjrZWWpzTl5mTJtQ==
|
||||
|
|
@ -2902,7 +2902,7 @@
|
|||
sitemap "^7.1.1"
|
||||
tslib "^2.4.0"
|
||||
|
||||
"@docusaurus/preset-classic@^2.0.1":
|
||||
"@docusaurus/preset-classic@2.0.1":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.0.1.tgz#21a806e16b61026d2a0efa6ca97e17397065d894"
|
||||
integrity sha512-nOoniTg46My1qdDlLWeFs55uEmxOJ+9WMF8KKG8KMCu5LAvpemMi7rQd4x8Tw+xiPHZ/sQzH9JmPTMPRE4QGPw==
|
||||
|
|
@ -4496,11 +4496,6 @@ ci-info@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
|
||||
integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
|
||||
|
||||
classnames@^2.2.6:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
|
||||
|
||||
clean-css@^5.1.5:
|
||||
version "5.1.5"
|
||||
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.1.5.tgz#3b0af240dcfc9a3779a08c2332df3ebd4474f232"
|
||||
|
|
|
|||
Loading…
Reference in New Issue