Skip to content

Commit

Permalink
contents: tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
yangshun committed Sep 3, 2024
1 parent 9413aaf commit 10671fa
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 102 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Front End Interview Guide
description: Everything you need to know - from types of questions to preparation tactics
title: Front End Interview JavaScript Questions and How to Prepare
description: Guide to preparing for algorithmic coding questions in front end / web developer interviews — Concepts to know, interview rubrics, and important practice questions.
seo_title: Front End Interview Guide | Everything you need to know on how to prepare
seo_description: The definitive guide to front end interviews written by Ex-FAANG interviewers. Find out what to expect, the different types of questions and how to prepare.
social_title: Front End Interview Guide | GreatFrontEnd
Expand Down
26 changes: 13 additions & 13 deletions packages/system-design/contents/cheatsheet/en-US.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ social_title: Cheatsheet for Front End System Design Interviews | GreatFrontEnd
seo_description: Summary of the most important things you should take note of during front end system design interviews.
---

## RADIO Framework
## RADIO framework

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 APIs, their parameters and responses.
1. **Optimizations and Deep Dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
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 APIs, their parameters and responses.
1. **Optimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.

## Evaluation Axes
## Evaluation axes

1. **Problem Exploration**: Demonstrated understanding of the problem, asked clarifying questions to reduce ambiguities and gathered sufficient requirements.
1. **Problem exploration**: Demonstrated understanding of the problem, asked clarifying questions to reduce ambiguities and gathered sufficient requirements.
1. **Architecture**: Broke down the problem into smaller independent parts, defined their responsibilities and how these components can work together.
1. **Technical Proficiency**: Demonstrated technical knowledge and proficiency of front end domain fundamentals (e.g. performance, networking, accessibility, i18n, security, etc), relevant technologies and APIs.
1. **Exploration and Tradeoffs**: Suggested various possible approaches on how to achieve certain functionality, explained the pros and cons and made recommendations.
1. **Product and UX Sense**: Showed consideration for user experience and decisions to make the product a great one.
1. **Communication and Collaboration**: Conveyed thoughts and ideas clearly and concisely, receptive to feedback and collaborated with the interviewer.
1. **Technical proficiency**: Demonstrated technical knowledge and proficiency of front end domain fundamentals (e.g. performance, networking, accessibility, i18n, security, etc), relevant technologies and APIs.
1. **Exploration and tradeoffs**: Suggested various possible approaches on how to achieve certain functionality, explained the pros and cons and made recommendations.
1. **Product and UX sense**: Showed consideration for user experience and decisions to make the product a great one.
1. **Communication and collaboration**: Conveyed thoughts and ideas clearly and concisely, receptive to feedback and collaborated with the interviewer.

## Common Mistakes
## Common mistakes

- Jumping into answering the question immediately without first asking questions and gathering requirements.
- Approaching the question in an unstructured manner, going all over the place and missing out on important areas.
Expand Down
50 changes: 25 additions & 25 deletions packages/system-design/contents/evaluation-axes/en-US.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ During interviews, interviewers look out for signals displayed by candidates bef

This section lists some of the behaviors that candidates should display. Bear them in mind as you are answering the system design question and demonstrate them confidently during the interview.

## Problem Exploration
## Problem exploration

- Demonstrated thorough understanding of the problem.
- Explored the requirements sufficiently by asking relevant clarifying questions to minimize ambiguities.
- Gathered functional and non-functional requirements of the problem.
- Defined the scope of the problem.
- Identified the important aspects of the problem to focus on and address.

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Requirements Exploration
Requirements exploration
</div>

## Architecture
Expand All @@ -32,25 +32,25 @@ This section lists some of the behaviors that candidates should display. Bear th
- Developed an architecture that can be put into practice.
- Developed an architecture with scalability and reusability in mind, one that can be extended to support future requirements.

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Architecture/High-level Design, Data Model, Interface Definition
Architecture/High-level design, Data model, Interface definition
</div>

## Technical Proficiency
## Technical proficiency

- Demonstrated technical knowledge and proficiency of front end fundamentals, common technologies and APIs.
- Able to dive into specific front end domain areas where relevant to the problem.
- Identified areas which need to be paid special attention to and addressed them by proposing solutions and analyzing their tradeoffs.

_Front end domain areas include Performance, Networking, HTML/CSS, Accessibility, Internationalization, Security, Scalability, etc._

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Architecture/High-level Design, Optimizations and Deep Dive
Architecture / High-level design, Optimizations and deep dive
</div>

## Exploration and Tradeoffs
## Exploration and tradeoffs

- Offered various possible solutions to the problems at hand and explained the pros and cons of each solution.
- The "problem" here doesn't necessarily refer to the given system design question.
Expand All @@ -59,36 +59,36 @@ _Front end domain areas include Performance, Networking, HTML/CSS, Accessibility
- Do not insist there is only one possible solution. Good questions usually have a few possible solutions where the suitability of each depends on the context.
- Even if the other solutions are clearly and obviously bad, do still mention them and briefly explain why they are bad.

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Requirements Exploration, Data Model, Interface Definition, Optimizations and Deep
Dive
Requirements exploration, Data model, Interface definition, Optimizations and deep
dive
</div>

## Product and UX Sense
## Product and UX sense

Relevant framework sections: **Optimizations and Deep Dive**
Relevant framework sections: **Optimizations and deep dive**

- Proposed a robust solution that lays the foundation of a good product.
- Considered user experience when answering: loading states, performance (perceived or actual), mobile friendliness, keyboard friendliness, etc.
- Considered error cases and suggested ways to handle them.

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Optimizations and Deep Dive
Optimizations and deep dive
</div>

## Communication and Collaboration
## Communication and collaboration

- Conveyed their thoughts and ideas clearly and concisely.
- Explained complex concepts with ease.
- Engaged the interviewer during the session, asks good questions and seeks opinions where relevant.
- Open to feedback from the interviewer and incorporates the feedback to refine their solutions.

<div className="mt-6 space-x-1 space-y-1 text-xs">
<div className="mt-6 space-x-1 space-y-1 text-sm">
<strong className="font-medium">Relevant framework sections:</strong>
Architecture/High-level Design, Data Model, Interface Definition, Optimizations
and Deep Dive
Architecture / High-level design, Data model, Interface definition, Optimizations
and deep dive
</div>

## Summary
Expand All @@ -97,9 +97,9 @@ Here's a table summarizing how the evaluation axes can be mapped to the various

| Axis | R | A | D | I | O |
| ------------------------------- | :-: | :-: | :-: | :-: | :-: |
| Problem Exploration || - | - | - | - |
| Problem exploration || - | - | - | - |
| Architecture | - |||| - |
| Technical Proficiency | - || - | - ||
| Exploration and Tradeoffs | - |||||
| Product and UX Sense | - | - | - | - ||
| Communication and Collaboration ||||||
| Technical proficiency | - || - | - ||
| Exploration and tradeoffs | - |||||
| Product and UX sense | - | - | - | - ||
| Communication and collaboration ||||||
Loading

0 comments on commit 10671fa

Please sign in to comment.