diff --git a/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx index 7d2792ed6..cfa20e23b 100644 --- a/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx @@ -74,11 +74,11 @@ JavaScript coding interviews share a lot of similarities with algorithmic coding ## Important concepts -| Category | Important Topics | +| Category | Important topics | | --- | --- | -| Data Structures | Arrays, Maps, Stacks, Trees, Sets | -| Algorithms | Binary Search, Breadth-first Search, Depth-first Search, Recursion | -| JavaScript Language | Data types (checking for types, type coercion), Scope, Closures, Callbacks, How `this` keyword works, Object-oriented Programming in JavaScript (prototypes, classes, methods), Arrow functions vs normal functions, Invoking functions via `Function.prototype.apply()`/`Function.prototype.call()`, `Promise`, Handling variadic arguments | +| Data structures | Arrays, Maps, Stacks, Trees, Sets | +| Algorithms | Binary search, Breadth-first search, Depth-first search, Recursion | +| JavaScript language | Data types (checking for types, type coercion), Scope, Closures, Callbacks, How `this` keyword works, Object-oriented programming in JavaScript (prototypes, classes, methods), Arrow functions vs normal functions, Invoking functions via `Function.prototype.apply()`/`Function.prototype.call()`, `Promise`, Handling variadic arguments | | DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation | | Runtime APIs | Timer (`setTimeout()`, `setInterval()`) | diff --git a/packages/front-end-interview-guidebook/contents/resume/en-US.mdx b/packages/front-end-interview-guidebook/contents/resume/en-US.mdx index 047435261..6fba36c60 100644 --- a/packages/front-end-interview-guidebook/contents/resume/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/resume/en-US.mdx @@ -12,18 +12,18 @@ On this page, we provide some front end-specific tips to help Front End Engineer ## Basic requirements -- Preferably kept under one page if you have less than 5 years of experience, not exceeding two pages. -- Build using Microsoft Word, Google Docs, Pages, or LaTeX so that Applicant Tracking System (ATS) can parse the resumes. Avoid using design software. -- Submit in PDF format. +- Preferably kept under one page if you have less than 5 years of experience, not exceeding two pages +- Build using Microsoft Word, Google Docs, Pages, or LaTeX so that Applicant Tracking System (ATS) can parse the resumes. Avoid using design software +- Submit in PDF format ## Formatting and aesthetics Front End Engineers deal with user interfaces frequently and are expected to have a keen sense of design. It will reflect very poorly on you as a Front End Engineer if your resume isn't aesthetically pleasing. -- Use a single column format. -- Use common fonts which are available on most operating systems like Arial, Calibri, or Garamond. Avoid fancy fonts. -- Stick to a single or at most two fonts (one font for headings and another for the body). -- Minimum font size of 11px. +- Use a single-column format +- Use common fonts which are available on most operating systems like Arial, Calibri, or Garamond. Avoid fancy fonts +- Stick to a single or at most two fonts (one font for headings and another for the body) +- Minimum font size of 11px Your resume doesn't need to be super pretty and fancy, it just needs to look neat and visually pleasing. If you have cash to spare, the quickest way to create an aesthetically pleasing and ATS-friendly resume is to purchase resume templates from [FAANG Tech Leads](https://www.faangtechleads.com/). @@ -35,17 +35,17 @@ To improve ATS ranking of your resume, sprinkle "Front End" across your resume w It is common for people to make the mistake of not providing enough details about their experiences and achievements. To stand out, it is important to provide sufficient information about the **scale, complexity, and impact** of your experiences and achievements. -- **Bad 👎**: "Built a website with HTML, CSS, and JavaScript". -- **Better 👍**: "Built a performant e-commerce website that allowed users to browse from hundreds of items, add to their cart and checkout with PayPal. The site has 20k MAU, loads under 2 seconds and a Lighthouse score of 98. Technologies used: Next.js, React, GraphQL, CSS modules." +- **Bad 👎**: "Built a website with HTML, CSS, and JavaScript" +- **Better 👍**: "Built a performant e-commerce website that allowed users to browse from hundreds of items, add to their cart and checkout with PayPal. The site has 20k MAU, loads under 2 seconds and a Lighthouse score of 98. Technologies used: Next.js, React, GraphQL, CSS modules" Here's a non-exhaustive list of front end-related technical achievements that are suitable to be mentioned: -- **Product work**: Elaborate on the features built within a product. +- **Product work**: Elaborate on the features built within a product - **Performance**: Performance improvements made and the resulting gains in percentage. E.g. page load size, page load time, Lighthouse score improvements, etc. -- **Testing**: Number of tests written, how many critical flows they cover, % increase in test coverage. -- **SEO**: % or numerical reduction in SEO errors/warnings. This metric is easy to obtain if the company uses SEO tools like Ahrefs and Semrush. -- **Accessibility (a11y)**: Number of a11y errors fixed, number of flows that were improved to meet WCAG AA/AAA level conformance, number of components where a11y improved. -- **Tooling**: Modernizing of technologies used in a code base, e.g. migrating a jQuery code base to React, improving typesafety by introducing TypeScript. Either describe the product or mention rough number of LOCs/engineers working on the code to give a better sense of the scale and complexity. +- **Testing**: Number of tests written, how many critical flows they cover, % increase in test coverage +- **SEO**: % or numerical reduction in SEO errors/warnings. This metric is easy to obtain if the company uses SEO tools like Ahrefs and Semrush +- **Accessibility (a11y)**: Number of a11y errors fixed, number of flows that were improved to meet WCAG AA/AAA level conformance, number of components where a11y improved +- **Tooling**: Modernizing of technologies used in a code base, e.g. migrating a jQuery code base to React, improving typesafety by introducing TypeScript. Either describe the product or mention rough number of LOCs/engineers working on the code to give a better sense of the scale and complexity ## Skills section diff --git a/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx b/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx index 22bda2fa3..9d90df768 100644 --- a/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx @@ -10,7 +10,7 @@ System Design interviews can come in many forms and covers the entire developmen We have written a comprehensive [Front End System Design guide](/front-end-system-design-playbook) which you should definitely check out. -## Design your system With best practices +## Design your system with best practices When going about the system design interview, regardless whether you are asked to design apps, games, or UI components, there are some things to pay special attention to. Incorporate the tips from our [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) and elevate your front end interview game. diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx index fc9ca0340..7a87d701c 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx @@ -12,12 +12,14 @@ Often during front end interviews, you will be asked to build UI components and ## Initialization +There are multiple ways to initialize a UI component: + ### jQuery-style Before modern JavaScript UI libraries/frameworks like [React](https://reactjs.org/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments: -1. **Root Element**: A root DOM element to render the contents. -1. **Customization Options**: Optional, additional, customization options usually in the form of a plain JavaScript object. +1. **Root element**: A root DOM element to render the contents +1. **Customization options**: Optional, additional, customization options usually in the form of a plain JavaScript object Using jQuery UI, one can turn a DOM element into a [slider](https://api.jqueryui.com/slider/) (among many other UI components) with a single line of code: @@ -54,9 +56,11 @@ function slider(rootEl, options) { } ``` -### React (components) +### React (Or similar component-based libraries) -React forces you to write UI as components which contain its own logic and appearance. React components are JavaScript functions that return markup (a description of how to render itself). React components can take in `props`, which are essentially customization of a component's options. +React forces you to write UI as components where the logic and structure is contained within. React components are JavaScript functions that return markup, a description of how to render itself. + +React components can take in `props`, which are essentially customization options for a component. ```js function Slider({ min, max }) { @@ -80,11 +84,13 @@ const root = createRoot(domNode); root.render(); ``` -You will usually not need to call `createRoot()` yourself if the entire page a React app because there will only be one `createRoot` call for the root/page-level component. +You will usually not need to call `createRoot()` yourself if the entire page is a React app because there will only be one `createRoot()` call at the root/page-level. ## Customizing appearance -Even though UI components in UI libraries provide default styling, developers will usually want to customize them with their company/product's branding and theme colors. Hence all UI components will allow for customization of the appearance, via a few methods: +Even though UI components in UI libraries provide default styling, developers will usually want to customize them with their company/product's branding and theme colors. + +Hence most UI components (especially those built as 3rd-party libraries) will allow for customization of the appearance, via a few methods: ### Class injection @@ -170,7 +176,7 @@ $('#gfe-slider').slider({ }); ``` -#### Non-deterministic styling +#### Downside: Non-deterministic styling Class injection has an unobvious downside — the final visual result is non-deterministic and may not be what is expected. Take the following code for example: @@ -203,11 +209,13 @@ function Slider({ className, value }) { } ``` -In the example above, both `.gfe-slider` and `.my-custom-slider` classes specify the `color` and because these two selectors have the same specificity, the winning style is actually the class that appears later on the HTML page. If the loading order of the stylesheet is not guaranteed (e.g. if stylesheets are lazily loaded), the visual result will not be deterministic. This is when developers start using hacks like `!important` or `.my-custom-slider.my-custom-slider` to let their selectors win the specificity war and the CSS code starts becoming unmaintainable. +In the example above, both `.gfe-slider` and `.my-custom-slider` classes specify the `color` and because these two selectors have the same specificity, the winning style is actually the class that appears later on the HTML page. + +If the loading order of the stylesheet is not guaranteed (e.g. if stylesheets are lazily loaded), the visual result will not be deterministic. The results is that developers start using hacks like `!important` or `.my-custom-slider.my-custom-slider` to let their selectors win the specificity war. With all these hacks, the CSS code starts becoming unmaintainable. In jQuery UI, if a custom class is added, the existing default value is not used. This removes the "winning style" ambiguity but the user must now reimplement all the necessary styles present in the original class. This approach can also be applied to React components to resolve the ambiguity. -Despite its possible flaws, class injection is still a very popular option. +Despite its flaws, class injection is still a very popular option. ### CSS selector hooks @@ -215,8 +223,8 @@ Technically speaking, developers can achieve customization if they read the sour If UI library authors can make these classes/attributes part of their API, which comes with these guarantees: -1. The list of selectors is published for external reference. -1. Existing published selectors will not be changed. If they are changed, it will be a breaking change and a version bump is needed as per semver. +1. The list of selectors is published for external reference +1. Existing published selectors will not be changed. If they are changed, it will be a breaking change and a version bump is needed as per semver Then it's an acceptable practice and developers can "hook" onto them (target them) by using these selectors in their stylesheets. diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx index 0ecf0f38e..d17c12cfc 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx @@ -8,22 +8,22 @@ social_title: Cracking User Interface Questions | Front End Interview Playbook User interface coding interviews will involve candidates writing HTML, CSS and JavaScript to complete. In our opinion this is essential for evaluating the skills of Front End Engineers and more companies are moving towards asking candidates to code user interfaces during interviews. -The user interfaces that candidates are asked to code can range from really small UI components to more complex client-facing products like small apps and games. +## Types of user interface questions -## Examples +The user interfaces that candidates are asked to code can range from really small UI components to more complex client-facing products like small apps and games. ### User interface components/widgets/layouts -- Components: [Accordion](/questions/user-interface/accordion), [Tabs](/questions/user-interface/tabs), [Star Rating Widget](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel. -- Widgets: [Digital Clock](/questions/user-interface/digital-clock), [Analog Clock](/questions/user-interface/analog-clock). +- Components: [Accordion](/questions/user-interface/accordion), [Tabs](/questions/user-interface/tabs), [Star Rating Widget](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel +- Widgets: [Digital Clock](/questions/user-interface/digital-clock), [Analog Clock](/questions/user-interface/analog-clock) - Page Sections: [Signup Form](/questions/user-interface/signup-form), [Holy Grail](/questions/user-interface/holy-grail) ### Apps/games The time allowed for apps/games questions is usually longer than components/widgets. Depending on how complex the question is, you may spend up to half an hour or even an hour to complete the question, especially if you are asked to build games. -- Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter). -- Games: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Snake, Tetris, Minesweeper, Connect 4. +- Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter) +- Games: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Snake, Tetris, Minesweeper, Connect 4 Observe that most games will be 2D grid-based games. Make sure you know how to create grid layouts in HTML and CSS! @@ -31,63 +31,65 @@ Observe that most games will be 2D grid-based games. Make sure you know how to c User interface coding interviews share a fair bit of similarity with non-front end coding interviews. In general, you should: -1. Find out what platform you are coding on and familiarize yourself with the coding environment: +1. **Find out what is available**: Find out what platform you are coding on and familiarize yourself with the coding environment: - Whether you will be using a local IDE or an online one. If local IDE, will you be using your own laptop? - - The supported editor shortcuts. - - Whether you can use JavaScript libraries/framework or have to use vanilla JavaScript. - - Whether you can execute code and preview the UI. + - The supported editor shortcuts + - Whether you can use JavaScript libraries/framework or have to use vanilla JavaScript + - Whether you can execute code and preview the UI - What are the latest supported JavaScript syntax and language features? - - Whether you can install dependencies beforehand. -1. Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code. -1. Ask clarifying questions upon receiving the question. Clarify the following: + - Whether you can install dependencies beforehand +1. **Self introduction**: Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code. +1. **Clarify question**: Ask clarifying questions upon receiving the question. Clarify the following: - Can you use the newest JavaScript syntax? - - Browser support, as this will affect the browser APIs you can use. -1. Break down the problem into stages/milestones that build on top of each other. Communicate this breakdown to your interviewer. Unlike coding interviews, the focus of User Interface coding interviews is usually around the component states and APIs as opposed to complex data structures and algorithms. -1. Code out your solution and explain your code to your interviewer while you are coding. - - Where possible, test your code in the browser after every milestone/feature added, instead of only at the end. - - Refer to the [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) for a list of things to take note of during User Interface coding interviews. -1. After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc. -1. Outline some basic test cases and some edge cases. Test your code with these cases and determine if your code passes them. If it fails, debug the issue(s) and fix them. -1. Explain any tradeoffs you made, cases you explicitly didn't handle, and how you would improve the code if you had more time. -1. The interview might not end here, the interviewer might have follow-up questions for you on this question or give you another question. Be prepared for them. + - Browser support, as this will affect the browser APIs you can use +1. **Manage complexity**: Break down the problem into stages/milestones that build on top of each other. Communicate this breakdown to your interviewer. Unlike coding interviews, the focus of User Interface coding interviews is usually around the component states and APIs as opposed to complex data structures and algorithms +1. **Start coding**: Code out your solution and explain your code to your interviewer while you are coding + - Where possible, test your code in the browser after every milestone/feature added, instead of only at the end + - Refer to the [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) for a list of things to take note of during User Interface coding interviews +1. **Review your code**: After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc. +1. **Testing**: Outline some basic test cases and some edge cases. Test your code with these cases and determine if your code passes them. If it fails, debug the issue(s) and fix them +1. **Tradeoff**: Explain any tradeoffs you made, cases you explicitly didn't handle, and how you would improve the code if you had more time +1. **Follow-ups**: The interview might not end here, the interviewer might have follow-up questions for you on this question or give you another question. Be prepared for them ## How to prepare for user interface coding interviews -1. Be familiar with the topics under the "Important Concepts" below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding. -1. It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript. +1. **Core concepts**: Be familiar with the topics under the [Important concepts](#important-concepts) section below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding. +1. **Practice writing UI**: It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript - **Vanilla JavaScript**: Learn the DOM manipulation APIs. At the very least you should know how to create new DOM elements, add classes/attributes to them, and add child elements. If you come from a [jQuery](https://jquery.com/) background, check out [You might not need jQuery](https://youmightnotneedjquery.com), a website showing you how to accomplish the common jQuery operations in Vanilla JavaScript. You will be pleasantly surprised to find out that with modern browser APIs there isn't really much need for jQuery anymore. - **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://reactjs.org/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers. -1. Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS): +1. **CSS**: Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS): - **Write Vanilla CSS**: Learn to write CSS without reliance on preprocessors like Sass/Less. Not all coding environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (CSS variables). - **Adopt a CSS naming convention**: Consider adopting a CSS naming methodology like [Block Element Modifier](https://getbem.com) when writing your classes. -1. Read our User Interface coding deep dive guides: +1. **Deep dives**: Read our User Interface coding deep dive guides: - [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) - [User Interface Components API Design Principles](/front-end-interview-playbook/user-interface-components-api-design-principles) -1. Pick a [study plan](/interviews/get-started) and practice the [User Interface coding questions](/questions/formats/ui-coding) recommended for the selected study plan. +1. **More practice**: Try out [GFE 75](/interviews/gfe75) or pick a [study plan](/interviews/study-plans) and practice the [User Interface coding questions](/questions/formats/ui-coding) recommended for the selected study plan. - Spend roughly equal amount of time practicing building both UI components and building apps/games. Both are equally important. ## Important concepts +Be familiar with these web development concepts: + | Category | Important topics | | --- | --- | -| Data Structures | Arrays, Maps, Stacks, Trees, Sets | -| Software Engineering | SOLID Principles, Design Patterns, Model-View-Controller | +| Data structures | Arrays, Maps, Stacks, Trees, Sets | +| Software engineering | SOLID principles, Design patterns, Model-View-Controller | | HTML | Semantic HTML, Form validation, Form submission | | CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, CSS custom properties (variables) | | JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, Handling variadic arguments | | DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation | -| Runtime APIs | Timer (`setTimeout()`, `setInterval()`), Network (Ajax, `fetch()`) | +| Runtime APIs | Timer — `setTimeout()`, `setInterval()`, Networking — Ajax, `fetch()` | | Accessibility | ARIA roles, states & properties, Keyboard interactions | ## User interface coding interview rubrics User interface coding interviews have similar rubrics as to JavaScript coding interviews as both involve coding in the front end domain. However, user interface coding questions will have even more emphasis on domain expertise and the various front end topics. -- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs. -- **Software engineering foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions. -- **Domain expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, User Experience, Accessibility, i18n, Networks, Performance. -- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations. -- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise. +- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs +- **Software engineering foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions +- **Domain expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, User Experience, Accessibility, i18n, Networks, Performance +- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations +- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise ## Best practice questions @@ -104,9 +106,9 @@ From experience, the best UI interview questions to practice, as determined by f - [Tic-tac-toe](/questions/user-interface/tic-tac-toe) - [Tabs](/questions/user-interface/tabs) - [Image Carousel](/questions/user-interface/image-carousel) +- [Modal Dialog](/questions/user-interface/modal-dialog) - Autocomplete - Dropdown Menu -- [Modal](/questions/user-interface/modal-dialog) GreatFrontEnd has a [comprehensive list of user interface coding questions](/questions/formats/ui-coding) that you can practice in your framework of choice (currently supports Vanilla JavaScript and [React](https://react.dev/)). We also provide manual tests cases you can test your code against to verify the correctness and solutions written in the various JavaScript UI frameworks by ex-FAANG Senior Engineers. Automated test cases are not provided for UI questions because they tend to be coupled to implementation and hard for automated tests to test accurately. Moreover, during interviews you likely have to test your UI yourself.