From 1fe3e48bb1f0f4f1a5c1ca168f4ff761425ec769 Mon Sep 17 00:00:00 2001 From: Yangshun Date: Tue, 15 Mar 2022 08:02:27 +0800 Subject: [PATCH] contents: proofread for typos + add supplementary content --- contents/algorithms.md | 8 +- contents/build-user-interfaces.md | 47 +++---- contents/introduction.md | 36 +++-- contents/resume.md | 33 +++++ contents/utility-function.md | 10 +- website/sidebars.js | 1 + website/src/components/SidebarAd/index.js | 126 +++++++++++++----- .../components/SidebarAd/styles.module.css | 6 + website/src/pages/index.js | 14 +- 9 files changed, 196 insertions(+), 85 deletions(-) create mode 100644 contents/resume.md diff --git a/contents/algorithms.md b/contents/algorithms.md index a61937513..3fb7a2e33 100644 --- a/contents/algorithms.md +++ b/contents/algorithms.md @@ -3,15 +3,15 @@ title: Front end algorithms sidebar_label: Algorithms --- -Front End engineers are also Software Engineers after all, and it's an expectation that Front End engineers have basic competency in algorithms and data structures. It is possible and reasonable that you will be asked to solve algorithmic questions during your front end interviews and most likely you will be expected to use JavaScript. +Front End Engineers are also Software Engineers after all, and it's 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. +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. The [Tech Interview Handbook](https://techinterviewhandbook.org/algorithms/introduction/) goes into great detail about preparing for Algorithms questions. Go to Tech Interview Handbook  → -## Quality courses +## Algorithm courses ### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=) @@ -27,7 +27,7 @@ This Udemy bestseller is one of the highest-rated interview preparation course ( ## JavaScript courses -If you want more structured algorithms practice in JavaScript, check out the following courses. +If you want more structured algorithms practice which are targeted at JavaScript, check out the following courses. | Course | Reviews | Duration | Price | Contents | | :-- | --- | --- | --- | --- | diff --git a/contents/build-user-interfaces.md b/contents/build-user-interfaces.md index 1bad6d65b..54c723ed6 100644 --- a/contents/build-user-interfaces.md +++ b/contents/build-user-interfaces.md @@ -3,7 +3,7 @@ title: Build front end user interfaces sidebar_label: Build user interfaces --- -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, JS, CSS. +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, JS, CSS. Companies that ask such questions usually ask candidates to code in one of these three ways: @@ -16,17 +16,18 @@ Companies that ask such questions usually ask candidates to code in one of these - Components - Tabs - Accordion - - Photo gallery - - Other possible components - [Bootstrap](https://getbootstrap.com/docs/4.0/components/) + - Photo Gallery + - 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 - Kanban Board - Games - - Tic-tac-toe Game - - Whack-a-mole Game - - Tetris Game (advanced) - - Snake Game (advanced) + - Tic-tac-toe + - Whack-a-mole + - Wordle + - Tetris (advanced) + - Snake (advanced) ## Considerations @@ -35,36 +36,36 @@ After you complete (or even before you start on) the question, think about these ### Front end best practices - Avoid writing global variables. Wrap your code within an IIFE and leave the global scope clean. -- What if I need to have multiple instances of this components on the page? Did I use any global variables that will make it hard for me to do so? Will having my components on the same page affect each other? They should be independent! -- Do I have a convenient API to instantiate independent components with configurable options? Old school jQuery UI components are a good examples of this. +- What if you need to have multiple instances of this components on the page? Does your code enable me to do this? Did you use any global variables that will make it hard for you to do so? Will having multiple components on the same page affect each other? They should be independent! +- Do you have a convenient API to instantiate independent components with configurable options? Old school jQuery UI components are a good examples of this. ### Performance and scalability -Can my component scale (network request duration, performance, UI, UX, etc)? +Can your component scale (network request duration, performance, UI, UX, etc)? -- What if the network takes too long to return something? How do I test slow network speed? Hint: Chrome Devtools Network tab. +- What if the network takes too long to return something? How do you test slow network speed? Hint: Chrome Devtools Network tab. - What if a string is too long? Hint: CSS `word-break` property. -- What if a picture is too large? +- What if an image is too large? - Can the component contain any amount of child items? Example: Support flexible amount of thumbnails in a photo gallery component. -- Will the layout be messed up if I have too few or too many of these items? What if there are no items, what empty state do I show? -- How will performance be affected if I have too many elements on the page? How do I solve it? Hint: [Virtual list](https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209) -- Did I hard code any values that will make it hard to extend to changing requirements in future? Did I design for extensibility? +- Will the layout be messed up if you have too few or too many of these items? What if there are no items, what empty state do you show? +- How will performance be affected if you have too many elements on the page? How do you solve it? Hint: [Virtual list](https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209) +- Did you hard code any values that will make it hard to extend to changing requirements in future? Did you design for extensibility? ### Network requests - Does the component deal with race conditions in network/async requests? E.g. a new network request is fired before the response for the previous request is returned. -- What if the request timeout or errored? How can I recover from it gracefully? -- How can I improve the performance of the component? Can I make use of caching, lazy loading, prefetching/preloading? -- What if I need to load a lot of data/images? Can I lazily load them? Can I fetch the data in batches to reduce spamming the API endpoint? +- What if the request timeout or errored? How can you recover from it gracefully? +- How can you improve the performance of the component? Can you make use of caching, lazy loading, prefetching/preloading? +- What if you need to load a lot of data/images? Can you lazily load them? Can you fetch the data in batches to reduce spamming the API endpoint? ### User experience -- Is my component mobile-friendly? Can my component fit on different screen widths? How do I make it mobile-friendly? -- Is my component easily i18n-able? How can I change the design to cater for i18n? Does my component support RTL languages? -- Are there any potential UX/accessibility (a11y) issues with my components? +- Is my component mobile-friendly? Can my component fit on different screen widths? How do you make it mobile-friendly? +- Is my component easily i18n-able? How can you change the design to cater for i18n? Does your component support RTL languages? +- Are there any potential UX/accessibility (a11y) issues with your components? - What are some common accessibility techniques and gotchas? - https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67 -- What tools can I use to check for accessibility? +- What tools can you use to check for accessibility? - There's probably isn't much time for you to be an expert in a11y but knowledge of a11y is one of the differentiating factors between junior vs senior engineers. ### Security @@ -74,4 +75,4 @@ Can my component scale (network request duration, 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, make the component mobile-friendly and test on different screen widths, add keyboard shortcuts, etc. +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. diff --git a/contents/introduction.md b/contents/introduction.md index 86e455e48..6e067153c 100644 --- a/contents/introduction.md +++ b/contents/introduction.md @@ -10,16 +10,6 @@ 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 software engineer interview. Among the existing resources, probably the most helpful question bank would 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 pop quiz-style questions along with information and guidance for other front end interview formats. -## Front end interview formats - -Unlike Software Engineering interviews, the formats for front end interviews are less known and less standard. However, there are a few common formats: - -- **Pop quiz** - Short questions which test your knowledge and have clear non-subjective answers. E.g. Explain the `this` keyword in JavaScript -- **Algorithms** - LeetCode-style algorithmic coding questions, but solve them using JavaScript -- **Write a small utility function/library** - Implement a common function in JavaScript. This is the front end version of LeetCode-style algorithm questions. E.g. Implement the `debounce` function found in Underscore/Lodash -- **Build user interfaces (component/app/game)** - Write HTML, CSS and JavaScript to implement a UI component or a small app/game. E.g. Build a tabs component, Tic-tac-toe Game, Tetris Game -- **System design** - Describe and discuss how you would build a UI component/app/game and its architecture. This is the front end version of system design questions. E.g. Describe how you would build Emoji autocomplete feature in a chat app, what APIs it would have, what components there are to the feature, how to ensure it has good performance, UX, etc. - ## 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. @@ -30,6 +20,30 @@ Be _extremely_ familiar with the following concepts: - JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout`, `setInterval`) - JavaScript design patterns: Observer pattern, Module pattern - HTML: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission -- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of lower-level stuff +- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals Look out for interview questions by companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions. + +## Front end interview formats + +Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. However, there are a few common formats: + +### Pop quiz + +Short questions which test your knowledge and have clear non-subjective answers. These are usually asked by recruiters because the answers can be verified by non-technical people E.g. Explain the `this` keyword in JavaScript. + +[Read more about front end pop quizzes](./pop-quiz.md) + +### Coding + +- **Algorithms** - LeetCode-style algorithmic coding questions, but solve them using JavaScript +- **Write a small utility function/library** - Implement a common function in JavaScript. This is the front end version of LeetCode-style algorithm questions. E.g. Implement the `debounce` function found in Underscore/Lodash +- **Build user interfaces (component/app/game)** - Write HTML, CSS and JavaScript to implement a UI component or a small app/game. E.g. Build a tabs component, Tic-tac-toe Game, Tetris Game + +[Read more about front end coding questions](./algorithms.md) + +### System Design + +Describe and discuss how you would build a UI component/app/game and its architecture. This is the front end version of system design questions. E.g. Describe how you would build Emoji autocomplete feature in a chat app, what APIs it would have, what components there are to the feature, how to ensure it has good performance, UX, etc. + +[Read more about front end system design](./front-end-system-design.md) diff --git a/contents/resume.md b/contents/resume.md new file mode 100644 index 000000000..bb0ae918a --- /dev/null +++ b/contents/resume.md @@ -0,0 +1,33 @@ +--- +title: Resume preparation +--- + +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. + +
+ Go to Tech Interview Handbook  → +
+ +## Free resume checking tools + +### 1. Free resume review by professional resume writers + +TopResume provides a [free all-in-one review](https://tidd.ly/3GxVIs9) of your resume - where their professional resume writers will provide feedback on your style and organization, writing and mechanics, as well as a free ATS readability analysis, where you can view a sample output of how an industry-standard ATS would interpret your experience and skills. Highly recommended to try this out! + +### 2. Test readability with industry-standard ATS + +Test the readability and formatting of your resume using [FAANG Tech Leads' free resume parser tool](https://www.faangtechleads.com/resume/check?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=resume_parser&aff=1e80c401fe7e2). Most big companies use such resume parsers, including but not limited to Figma, Palantir, Netflix, Twitch, and Yelp. + +:::tip Expert tip + +[FAANG Tech Leads](https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2) is currently offering resume templates and references at **70% off**. + +Their templates: + +- Are created by ex-FAANG hiring managers based on top resumes received from hundreds of candidate applications +- Guarantee readability by FAANG ATS +- Cater to various experience levels + +They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which are helpful in helping you craft content that meets the same bar. [Check it out](https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)! + +::: diff --git a/contents/utility-function.md b/contents/utility-function.md index 1bea4336b..07314c8e3 100644 --- a/contents/utility-function.md +++ b/contents/utility-function.md @@ -3,16 +3,16 @@ title: Front end utility functions sidebar_label: Utility functions --- -These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focused to practical use cases. However, they could also be questions simply being the same LeetCode problem but you are required to answer in JavaScript. +These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focused on practical use cases. However, they could also be questions simply being the same LeetCode problem but you are required to answer in JavaScript. -Almost all existing utilty functions asked exist within JavaScript core or famous third-party libraries like Lodash, 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 and you're not expected to produce such level of complexity in an interview. +Almost all existing utilty 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 and you're not expected to produce such level of complexity in an interview. ## Basic examples - `debounce()`/`throttle()` - `cloneDeep()` - `groupBy()` -- `chunk()`/`map()` then `mapAsync`(`Promise.all`) then `mapWithChunksAsync` +- `chunk()`/`map()` with follow up of `mapAsync`(`Promise.all`) then `mapWithChunksAsync` - Convert all keys within an object into snake_case/camelCase - `document.querySelectorAll` (limited to just tags selectors) - [Observer pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript) @@ -26,8 +26,8 @@ Candidates are expected to take just around 10-15 minutes for a basic question. Advanced questions are usually given to more senior candidates and expect around 25-30 minutes to complete or arrive at a minimally working solution. - Write a templating engine that does variables substitution and simple conditionals -- Implement `JSON.stringify` -- Generate table of contents/outline from a DOM similar to Google Docs +- Implement `JSON.stringify()` +- Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline) ## Tips diff --git a/website/sidebars.js b/website/sidebars.js index 63181c132..ffb6c6f32 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -34,5 +34,6 @@ module.exports = { ], }, 'behavioral', + 'resume', ], }; diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js index efd7d5617..b8519d8d7 100644 --- a/website/src/components/SidebarAd/index.js +++ b/website/src/components/SidebarAd/index.js @@ -12,6 +12,70 @@ const BACKGROUNDS = [ styles.backgroundRed, ]; +function FAANGTechLeads({className, position}) { + return ( + { + window.gtag('event', `faangtechleads.${position}.click`); + }}> +

+ + Craft the perfect resume for FAANG + + Save time crafting your resume with FAANG Tech Leads'{' '} + FAANG-ready resume templates and examples which have helped many + Software Engineers get interviews at top Bay Area companies. Grab them + now for a whopping 70% off! +

+ + ); +} + +function AlgoMonster({className, position}) { + return ( + { + window.gtag('event', `algomonster.${position}.click`); + }}> +

+ + Stop grinding. Study with a plan + + Developed by Google engineers, AlgoMonster is the fastest way to + get a software engineering job. Join today for a 70% discount!! +

+ + ); +} + +function EducativeCoding({className, position}) { + return ( + { + window.gtag('event', `educative.${position}.click`); + }}> +

+ Looking to get hired at FAANG?{' '} + Educative offers many great courses to improve your interview + game. Join today for a 10% discount! +

+ + ); +} + export default React.memo(function SidebarAd({position}) { const backgroundClass = BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)]; @@ -19,42 +83,34 @@ export default React.memo(function SidebarAd({position}) { // we'll render this on the browser only. return ( - {() => - Math.random() > 0.5 ? ( - { - window.gtag('event', `algomonster.${position}.click`); - }}> -

- Stop grinding and study with a plan! -
- Developed by Google engineers, AlgoMonster is the fastest - way to get a software engineering job.{' '} - Join today for a 70% discount!! -

- - ) : ( - { + const path = window.location.pathname; + // Ugly hack to show conditional sidebar content. + + if (path.includes('resume')) { + return ( + + ); + } + + return Math.random() > 0.5 ? ( + { - window.gtag('event', `educative.${position}.click`); - }}> -

- Looking to get hired at FAANG? Educative{' '} - offers many great courses to improve your interview game.{' '} - Join today for a 10% discount! -

- - ) - } + position={position} + /> + ) : ( + + ); + }} ); }); diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css index 01bd1de43..80358c8f6 100644 --- a/website/src/components/SidebarAd/styles.module.css +++ b/website/src/components/SidebarAd/styles.module.css @@ -41,6 +41,12 @@ margin-bottom: 0; } +.title { + display: block; + font-size: 0.8rem; + margin-bottom: 0.1rem; +} + .logo { width: 96px; } diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 095813a52..18e024743 100755 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -17,9 +17,9 @@ export default function Home() { description={siteConfig.tagline}>
- - + + @@ -331,7 +331,7 @@ function TweetsSection() { handle="silvenon" name="Matija Marohnić" date="Jul 20, 2020" - avatar="https://pbs.twimg.com/profile_images/1337063712470036480/QvLY_uQZ_400x400.jpg" + avatar="https://pbs.twimg.com/profile_images/1497396127745945606/rtohsd4F_400x400.jpg" content={ <> Front End Interview Handbook is AMAZING, huge props to @@ -398,11 +398,11 @@ function TweetsSection() { } /> Are you hiring new frontend developers or are you applying to