diff --git a/contents/algorithms.md b/contents/algorithms.md index dc90842f5..30bea2ef9 100644 --- a/contents/algorithms.md +++ b/contents/algorithms.md @@ -6,7 +6,7 @@ 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 Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -22,7 +22,7 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s ### 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)). +[GreatFrontEnd](https://www.greatfrontend.com) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). 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 @@ -47,6 +47,6 @@ If you want more structured algorithms practice which are targeted at JavaScript :::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! +Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). Start practicing today! ::: \ No newline at end of file diff --git a/contents/behavioral.md b/contents/behavioral.md index 38a924234..0e1cb994a 100644 --- a/contents/behavioral.md +++ b/contents/behavioral.md @@ -4,7 +4,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/build-front-end-user-interfaces.md b/contents/build-front-end-user-interfaces.md index f9da448e0..3cf2d517b 100644 --- a/contents/build-front-end-user-interfaces.md +++ b/contents/build-front-end-user-interfaces.md @@ -6,7 +6,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -39,7 +39,7 @@ Companies that ask such questions usually ask candidates to code in one of these :::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! +Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface). Start practicing today! ::: @@ -98,6 +98,6 @@ Lastly, mention how you would do things differently if you had more time and wer :::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! +Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface). Start practicing today! ::: \ No newline at end of file diff --git a/contents/companies/airbnb-front-end-interview-questions.md b/contents/companies/airbnb-front-end-interview-questions.md index 55196bd02..963832273 100644 --- a/contents/companies/airbnb-front-end-interview-questions.md +++ b/contents/companies/airbnb-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/amazon-front-end-interview-questions.md b/contents/companies/amazon-front-end-interview-questions.md index e68e3f863..a46dc48f1 100644 --- a/contents/companies/amazon-front-end-interview-questions.md +++ b/contents/companies/amazon-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/apple-front-end-interview-questions.md b/contents/companies/apple-front-end-interview-questions.md index 1e0532e16..febe2fad7 100644 --- a/contents/companies/apple-front-end-interview-questions.md +++ b/contents/companies/apple-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/bytedance-tiktok-front-end-interview-questions.md b/contents/companies/bytedance-tiktok-front-end-interview-questions.md index 53ca4c1f9..5f3c0cce4 100644 --- a/contents/companies/bytedance-tiktok-front-end-interview-questions.md +++ b/contents/companies/bytedance-tiktok-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/dropbox-front-end-interview-questions.md b/contents/companies/dropbox-front-end-interview-questions.md index 021ee9b8c..f47c4c15b 100644 --- a/contents/companies/dropbox-front-end-interview-questions.md +++ b/contents/companies/dropbox-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/google-front-end-interview-questions.md b/contents/companies/google-front-end-interview-questions.md index 0dbab382d..c3a837a90 100644 --- a/contents/companies/google-front-end-interview-questions.md +++ b/contents/companies/google-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/linkedin-front-end-interview-questions.md b/contents/companies/linkedin-front-end-interview-questions.md index b35e30321..d4b2115d7 100644 --- a/contents/companies/linkedin-front-end-interview-questions.md +++ b/contents/companies/linkedin-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/lyft-front-end-interview-questions.md b/contents/companies/lyft-front-end-interview-questions.md index 0db4c6f8d..527259f3d 100644 --- a/contents/companies/lyft-front-end-interview-questions.md +++ b/contents/companies/lyft-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/microsoft-front-end-interview-questions.md b/contents/companies/microsoft-front-end-interview-questions.md index 17d6f9218..f258b0c0e 100644 --- a/contents/companies/microsoft-front-end-interview-questions.md +++ b/contents/companies/microsoft-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/salesforce-front-end-interview-questions.md b/contents/companies/salesforce-front-end-interview-questions.md index 790913a56..35cc5b6f7 100644 --- a/contents/companies/salesforce-front-end-interview-questions.md +++ b/contents/companies/salesforce-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/twitter-front-end-interview-questions.md b/contents/companies/twitter-front-end-interview-questions.md index 92b16c718..e0bc3cfd6 100644 --- a/contents/companies/twitter-front-end-interview-questions.md +++ b/contents/companies/twitter-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/companies/uber-front-end-interview-questions.md b/contents/companies/uber-front-end-interview-questions.md index aa352587c..ee0cabbd3 100644 --- a/contents/companies/uber-front-end-interview-questions.md +++ b/contents/companies/uber-front-end-interview-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/css-questions.md b/contents/css-questions.md index a6c73c78a..ef0d8c432 100644 --- a/contents/css-questions.md +++ b/contents/css-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/front-end-system-design-applications.md b/contents/front-end-system-design-applications.md index f0759b94e..1c585519c 100644 --- a/contents/front-end-system-design-applications.md +++ b/contents/front-end-system-design-applications.md @@ -6,7 +6,7 @@ sidebar_label: Applications :::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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -22,11 +22,11 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro ## Framework -1. Requirements clarifications/alignment +1. Requirements exploration 1. Architecture 1. Data model -1. API design -1. Deep dive +1. Interface definition (API) +1. Optimizations and deep dive - User experience (UX) - Performance - Accessibility (a11y) @@ -34,7 +34,7 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro - Multi-device support - Security -### Requirements clarification +### Requirements exploration Every system design interview should start with clarifying requirements about the question, which is usually left vague intentionally. Some considerations: @@ -44,7 +44,7 @@ Every system design interview should start with clarifying requirements about th - Do we need to support internationalization? - Does the app need to work offline? -### Architecture +### Architecture / High-level design Architecture for front end interviews are typically focused on the client-side architecture, and not on large scale distributed systems where databases, load balancers and servers are involved. @@ -60,11 +60,11 @@ For applications, common architectures include Model-View-Controller, Model-View Client app state, which is a combination of server state (database) and true client state (non-persisted to the server). -### API design +### Interface definition (API) API design for applications will refer to the HTTP/network API parameters and the shape of the responses. -### Deep dives +### Optimization and 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. diff --git a/contents/front-end-system-design-ui-components.md b/contents/front-end-system-design-ui-components.md index 55228559e..58c5cad05 100644 --- a/contents/front-end-system-design-ui-components.md +++ b/contents/front-end-system-design-ui-components.md @@ -6,7 +6,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -26,15 +26,16 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro ## 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. +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. -1. **Requirements clarifications/alignment** - Ask about the requirements of the system. -1. **Architecture** - Outline the architecture of the subcomponents in the component, where relevant. -1. **Data model** - How would the component store any data passed into it? What data structures are used? -1. **API design** - What's the API for using this component? What options will be allowed on the component? -1. **Deep dive** - User Experience (UX), Performance, Accessibility (a11y), Internationalization (i18n), Multi-device support, Security +1. **Requirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions. +1. **Architecture / High-level design**: Identify the key components of the product and how they are related to each other. +1. **Data model**: Describe the various data entities, the fields they contain and which component(s) they belong to. +1. **Interface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses. +1. **Optimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product. -### Requirements clarification + +### Requirements exploration Every system design interview (even for non-front end as well) should start with requirements gathering/clarifying requirements about the question, which is usually left underspecified on purpose. You are recommended to spend at least a few minutes clarifying the requirements. Do not start drawing the architecture before you are clear about the requirements! @@ -48,7 +49,7 @@ Some considerations: - Do we need to support internationalization? - How much styling customization do we want to allow? -### Architecture +### Architecture / High-level design Architecture for front end interviews are typically focused on the client-side architecture, and not on large scale distributed systems where databases, load balancers and servers are involved. @@ -79,7 +80,7 @@ Deciding what data to put in state is essential to doing well for this portion. - Components are easier to reason about (read/understand) the fewer the fields there are in the state. We should strive to reduce the amount of state needed. If a component uses a value which can be derived from another piece of state, then that value should most likely not be part of the state. For example if your component is rendering a list of items and you want to display a message when there are no items to render, there shouldn't be an additional `isEmpty` state because it can be derived from the length of the `items`. - If a component has multiple subcomponents, it'll be best if it's possible to consolidate the state within the top level and the rest of the components are pure and stateless. -### API design +### Interface definition (API) The key idea behind components is for them to be reused and abstract complexities. Good components are designed well such that they can be reused in multiple scenarios and users do not have to know how they work internally before using them. For components, API refers to configuration options which would the component developer would expose to other developers to specify. @@ -98,7 +99,7 @@ The key idea behind components is for them to be reused and abstract complexitie ::: -### Deep dives +### Optimization and 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. diff --git a/contents/front-end-system-design.md b/contents/front-end-system-design.md index 008609eb8..54213ce62 100644 --- a/contents/front-end-system-design.md +++ b/contents/front-end-system-design.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -22,15 +22,15 @@ The two main kinds of front end system design interviews are UI components and a ## Front end system design examples - User interface components - - Autocomplete — [Read example solution 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) + - 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 (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) + - 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 :::info Read front end system design case studies @@ -39,17 +39,17 @@ The two main kinds of front end system design interviews are UI components and a ::: -## RADAD Framework +## RADIO Framework System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great! Otherwise, here's a framework you can use to give an outline to the interviewer as to what you are going to cover, which is also helpful when working on new front end projects at work. -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. +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. -1. **Requirements clarifications/alignment** - Ask about the requirements of the system. -1. **Architecture** - Outline the architecture of the system (could be a UI component or an app, depending on the question). Draw diagrams where relevant. -1. **Data model** - How would the component store any data passed into it? What data structures are used? -1. **API design** - What's the API for using this component? What options will be allowed on the component? -1. **Deep dive** - User Experience (UX), Performance, Accessibility (a11y), Internationalization (i18n), Multi-device support, Security +1. **Requirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions. +1. **Architecture / High-level design**: Identify the key components of the product and how they are related to each other. +1. **Data model**: Describe the various data entities, the fields they contain and which component(s) they belong to. +1. **Interface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses. +1. **Optimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product. 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. diff --git a/contents/html-questions.md b/contents/html-questions.md index 3097afce3..06d1ef7de 100644 --- a/contents/html-questions.md +++ b/contents/html-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/introduction.md b/contents/introduction.md index cb9e7ab40..739392b7e 100644 --- a/contents/introduction.md +++ b/contents/introduction.md @@ -4,7 +4,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -90,7 +90,7 @@ Describe and discuss how you would build a UI component/app/game and its archite :::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)! +[GreatFrontEnd](https://www.greatfrontend.com) has questions and answers for all kind of front end interview questions, [study plans](https://www.greatfrontend.com/get-started), and a [huge question bank](https://www.greatfrontend.com/prepare/coding)! ::: diff --git a/contents/javascript-questions.md b/contents/javascript-questions.md index 594a1c438..b190ad9fb 100644 --- a/contents/javascript-questions.md +++ b/contents/javascript-questions.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/javascript-utility-function.md b/contents/javascript-utility-function.md index 463965129..f26bde42b 100644 --- a/contents/javascript-utility-function.md +++ b/contents/javascript-utility-function.md @@ -6,7 +6,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -16,7 +16,7 @@ Almost all existing utility functions you will be asked exist within the JavaScr :::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! +Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities). Start practicing today! ::: @@ -47,7 +47,7 @@ Advanced questions are usually given to more senior candidates and expect around :::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! +Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities). Start practicing today! ::: diff --git a/contents/resume.md b/contents/resume.md index b7617c28b..03894656e 100644 --- a/contents/resume.md +++ b/contents/resume.md @@ -4,7 +4,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: diff --git a/contents/trivia.md b/contents/trivia.md index 6ddcaad73..748d38529 100644 --- a/contents/trivia.md +++ b/contents/trivia.md @@ -5,7 +5,7 @@ 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). +Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! 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). ::: @@ -26,7 +26,7 @@ Trivia questions are meant to test how well candidates understand the theory beh :::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! +[GreatFrontEnd](https://www.greatfrontend.com) provides front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of trivia questions and answers](https://www.greatfrontend.com/prepare/quiz). Start studying today! ::: diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 27f6075e6..491688661 100755 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -27,7 +27,25 @@ module.exports = { }, items: [ {to: 'introduction', label: 'Start reading', position: 'left'}, - {to: 'coding', label: 'Coding', position: 'left'}, + { + type: 'dropdown', + position: 'left', + label: 'Practice', + items: [ + { + label: 'Coding Questions', + href: 'https://www.greatfrontend.com/prepare/coding' + }, + { + label: 'System Design', + href: 'https://www.greatfrontend.com/prepare/system-design' + }, + { + label: 'Quiz Questions', + href: 'https://www.greatfrontend.com/prepare/quiz' + }, + ] + }, { to: 'front-end-system-design', label: 'System design', @@ -132,6 +150,10 @@ module.exports = { { title: 'More', items: [ + { + label: 'GreatFrontEnd', + href: 'https://www.greatfrontend.com', + }, { label: 'GitHub', href: 'https://github.com/yangshun/front-end-interview-handbook', @@ -142,11 +164,11 @@ module.exports = { }, { label: 'Twitter', - href: 'https://twitter.com/yangshunz', + href: 'https://twitter.com/greatfrontend', }, { label: 'Contact us', - href: 'mailto:contact@techinterviewhandbook.org', + href: 'mailto:contact@greatfrontend.com', }, ], }, diff --git a/website/src/css/custom.css b/website/src/css/custom.css index c75dd580c..10c547e34 100755 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -44,6 +44,10 @@ html[data-theme='dark'] { --ifm-footer-padding-vertical: 3rem; } +.navbar { + font-size: 0.875rem; +} + .footer__links { margin-bottom: 3rem; }