diff --git a/contents/build-ui-component-app-game.md b/contents/build-ui-component-app-game.md new file mode 100644 index 000000000..92cd3d5fa --- /dev/null +++ b/contents/build-ui-component-app-game.md @@ -0,0 +1,66 @@ +--- +title: Build a UI Component/App/Game +--- + +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. + +## Examples + +- Tabs +- Media Gallery +- Accordion +- Other possible components - https://getbootstrap.com/docs/4.0/components/ + +Companies that ask UI components questions usually ask candidates to code in one of these three styles: + +- Codepen.io (or some other online editor with preview) - You get to visualize the output and iterate on the solution. +- BYOE (bring your own environment) - Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like codepen.io or codesandbox.io. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. +- Write on the whiteboard - Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to do whiteboard-style for front end interviewws. + +## Considerations + +After you complete (or even before you start on) the question, think about these potential issues (where relevant). You may or may not have to handle them, so you can always clarify with the interviewer before starting on it so that you don't write too much/little code: + +### Software Engineering Best Practices + +- 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. + +### Performance and Scalability + +Can my 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 a string is too long? Hint: CSS `word-break` property. +- What if a picture 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? + +### 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? + +### 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 issues with my 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? +- There's probably isn't much time for you to be an expert in accessibility but this is what differentiates a junior vs a senior engineer. + +### Security: + +- XSS vulnerability. Interviewers are especially looking out for this whenever there is user input involved. You almost never need to use `.innerHTML` or `$.html()` function. If you do, make sure you escape the contents first. +- User input that is being displayed in the URL has to be encoded first as well, or else there's also a potential for mischief. + +### 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. diff --git a/contents/design-ui-component-app-game.md b/contents/design-ui-component-app-game.md new file mode 100644 index 000000000..6691c0b39 --- /dev/null +++ b/contents/design-ui-component-app-game.md @@ -0,0 +1,35 @@ +--- +title: Design a UI Component/App/Game +--- + +Just to be clear, design here refers to code/API design and not UI design. This format of question is quite similar to the above and there's a significant amount of overlap between the former and this - you will likely need to do some design in the former and also do some coding here to illustrate your ideas/app state format. + +The difference between this section and the above is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because this format of questions involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details and can keep the discussion at a higher level. + +Many of the topics mentioned above are also relevant in this format of questions - API design, scalability, performance, user experience, i18n, accessibility, security. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from the more junior ones. + +If you possess a laptop and are asked to code them out, you usually can use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals. + +## Basic Examples + +- Tic-tac-toe Game +- Whack-a-mole Game +- Sortable Data Table (with extensions for filtering) + +## Advanced Examples + +If you have to implement these, usually you are given more than half an hour + +- WYSIWYG Editor +- Tetris Game +- Snake Game + +## Helpful Articles + +- https://medium.com/google-design/google-photos-45b714dfbed1 +- https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 +- https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 +- https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0 +- https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 +- https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299 +- https://engineering.fb.com/2020/05/08/web/facebook-redesign/ diff --git a/contents/introduction.md b/contents/introduction.md index 0ebb84ae4..c59629ab1 100644 --- a/contents/introduction.md +++ b/contents/introduction.md @@ -3,3 +3,27 @@ title: Introduction --- Many front end interviews are highly-focused on domain knowledge and applying them to real-world scenarios. You might find that grinding LeetCode is not extremely useful when it comes to interviewing for a front end position, and that's a good thing! But that doesn't mean that you don't have to be familiar with basic data structure and algorithmic concepts - it's just that the concepts that you're tested on are more practical and relevant to real front end development. + +## Front End Interviews 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 a UI component/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 +- **Design a UI component/app/game** - Describe and discuss how you would build a UI component/app/game. This is the front end version of system design questions. E.g. Describe how you would build Emoji autocomplete feature in a chat app + +## General Tips + +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. + +Be _extremely_ familiar with the following concepts: + +- CSS: Specificity, Box model, Layout, Positioning +- 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 + +Look out for interview questions by the companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions. diff --git a/contents/pop-quiz.md b/contents/pop-quiz.md new file mode 100644 index 000000000..8c5bd2a28 --- /dev/null +++ b/contents/pop-quiz.md @@ -0,0 +1,23 @@ +--- +title: Pop Quiz Introduction +sidebar_label: Introduction +--- + +Pop Quiz-style questions are usually found in the first few stages of an interview as the answers are usually short and can possibly be administered by a minimally-technical recruiter. + +Pop quiz questions are meant to test how well a candidates understands the theory behind the domain. They can be aced by either having real solid understanding of the concepts or by pure memorization of answers. The questions asked here are pretty limited and most can be found within the next few sections. + +## Basic Examples + +- What is a closure in JavaScript? +- Explain what promises are and what they're useful for. +- Explain the CSS box model. + +## Advanced Examples + +For more senior candidates, expect to explain more advanced stuff with no absolute answers. + +- How does React work? What is Virtual DOM and why problems does it solve? +- Why did you use library X over library Y? + +The best and correct way is to prepare for such questions is to really understand the concepts and gets some hands-on experience in applying them in a project. Memorizing the answers is not recommended but is acceptable if you are running out of time. diff --git a/contents/utility-function.md b/contents/utility-function.md new file mode 100644 index 000000000..766ebf9fa --- /dev/null +++ b/contents/utility-function.md @@ -0,0 +1,35 @@ +--- +title: Utility Function +--- + +These are the front-end version of LeetCode questions, but with less emphasis on fancy algorithms and more relevance to practical use cases. However, they could also be questions simply being the same LeetCode problem but you are required to answe 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. + +## Basic Examples + +- `debounce`/`throttle` +- `cloneDeep` +- `groupBy` +- `chunk`/`map` then `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) + +The best way to prepare is to get your hands dirty by implementing them yourself and writing test cases for them. Because you're writing functions, pay attention to the time complexity as well. Don't write a function that runs in O(n2) if it can pretty easily be written in O(n). + +Candidates are expected to take just around 10-15 minutes for a basic question. If you can tell that you received a basic question, try to finish within the suggested duration and do not intentionally take the entire interview to do one question. In most cases, you are expected to answer another small question. + +## Advanced Examples + +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 + +## Tips + +- Always try to write pure functions +- If you're writing a recursive function, ask whether there's a maximum stack depth limit +- Some nested data structures can have recursive references to itself. Do clarify that there are no self-references/cycles within the object/ask if you need to handle them (usually the answer is No) diff --git a/website/sidebars.js b/website/sidebars.js index cc82bd9e6..c52d9c431 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -3,8 +3,16 @@ module.exports = { 'introduction', { type: 'category', - label: 'Trivia Questions', - items: ['html-questions', 'css-questions', 'javascript-questions'], + label: 'Pop Quiz', + items: [ + 'pop-quiz', + 'html-questions', + 'css-questions', + 'javascript-questions', + ], }, + 'utility-function', + 'build-ui-component-app-game', + 'design-ui-component-app-game', ], };