[feih] seo: fix page has links to redirect for first 50 pages (#521)
This commit is contained in:
Zhou Yuhang
GitHub
parent
ead68ec888
commit
cd270d89c2
|
|
@ -43,7 +43,7 @@ WIP.
|
|||
- Prototype chain
|
||||
- `this` keyword
|
||||
- https://rainsoft.io/gentle-explanation-of-this-in-javascript/
|
||||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4
|
||||
- Classes
|
||||
- Methods
|
||||
- Use non-arrow functions for methods that will be called using the `object.method()` syntax because you need the value of `this` to point to the instance itself.
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
|
|||
|
||||
## Session hijacking
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies
|
||||
- https://www.nczonline.net/blog/2009/05/12/cookies-and-security/
|
||||
|
||||
## Framebusting
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
|
||||
</h3>
|
||||
<p>
|
||||
Join/follow us on <a href="https://linkedin.com/company/greatfrontend" target="_blank">LinkedIn</a> | <a href="https://discord.gg/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://x.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
|
||||
Join/follow us on <a href="https://linkedin.com/company/greatfrontend" target="_blank">LinkedIn</a> | <a href="https://discord.com/invite/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://x.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Find the latest version of this page on [GreatFrontEnd's Airbnb Front End Interv
|
|||
## JavaScript coding questions
|
||||
|
||||
- Write a simple promise.
|
||||
- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/interview-question/348436/Airbnb-or-Phone-Screen-or-Implement-StoreData-class)
|
||||
- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/post/348436/airbnb-phone-screen-implement-storedata-p3ypb/)
|
||||
|
||||
## User interface coding questions
|
||||
|
||||
|
|
|
|||
|
|
@ -128,11 +128,11 @@ Questions sourced from the web and the [GreatFrontEnd](https://www.greatfrontend
|
|||
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting
|
||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||
- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
|
||||
- Implement a Like button ([Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button))
|
||||
- Implement a Like button ([Source](https://leetcode.com/discuss/post/1719943/amazon-phone-screen-fee-l5-like-button-b-0z2l/))
|
||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||
- Given a JSON object generate a file directory UI
|
||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/post/1984996/amazon-virtual-onsite-april-2022-fronten-qiku/>)
|
||||
- Implement a search bar using HTML, CSS and JavaScript
|
||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||
- Implement a star rating widget
|
||||
|
|
@ -146,7 +146,7 @@ Questions sourced from the web and the [GreatFrontEnd](https://www.greatfrontend
|
|||
|
||||
### System design questions
|
||||
|
||||
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/post/1984996/amazon-virtual-onsite-april-2022-fronten-qiku/>)
|
||||
- Design an accordion component.
|
||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Not much is known about Apple's front end interview process.
|
|||
## JavaScript coding questions
|
||||
|
||||
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
|
||||
- [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||
- [Practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||
- How can you execute an array of promise in sequence?
|
||||
|
||||
## User interface coding questions
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/
|
|||
|
||||
## JavaScript coding questions
|
||||
|
||||
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
|
||||
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/post/427896/dropbox-phone-screen-implement-getbyclas-fxpl/)
|
||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||
- OOP-based class management system.
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ Refer to Google's official interview preparation guides for:
|
|||
- You are given four numbers (type int), and have four basic math operators at your disposal (+, -, x, /). Given arbitrary ways to group the numbers and using any of the operators, determine if you can make the number 24 from the four numbers. The numbers must be processed in the order they appear.
|
||||
- Find k-nearest points.
|
||||
|
||||
_Source: [Glassdoor Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm), [Google | Front End engineer](https://leetcode.com/discuss/interview-question/271736/google-front-end-engineer-onsite-interview)_
|
||||
_Source: [Glassdoor Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm), [Google | Front End engineer](https://leetcode.com/discuss/post/271736/google-front-end-engineer-by-sithis-kvr1/)_
|
||||
|
||||
## Insider tips from the GreatFrontEnd community
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_sou
|
|||
|
||||
**18th Oct 2023**:
|
||||
|
||||
> I once had the [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) question for Lyft interview 😦 but I had an onsite to be scheduled but they didn't have my level so it seemed futile It was a technical phone interview, they were on the phone and I was live coding on something like a codepad I think it was about an hour, 10 minutes of intro and 10 minutes of questions 🫠
|
||||
> I once had the [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) question for Lyft interview 😦 but I had an onsite to be scheduled but they didn't have my level so it seemed futile It was a technical phone interview, they were on the phone and I was live coding on something like a codepad I think it was about an hour, 10 minutes of intro and 10 minutes of questions 🫠
|
||||
|
||||
**4th Mar 2023**:
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interv
|
|||
|
||||
## User interface coding questions
|
||||
|
||||
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
|
||||
- Implement a typeahead. [Source](https://leetcode.com/discuss/post/1220887/twitter-frontend-phone-screen-by-anonymo-k2xo/)
|
||||
- Add features to a tic-tac-toe game.
|
||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@ Not much is known about Uber's front end interview process.
|
|||
|
||||
## JavaScript coding questions
|
||||
|
||||
- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source A](https://leetcode.com/discuss/interview-question/2409192/Uber-or-Phone-Screen-or-Senior-Front-End-Engineer) and [Source B](https://leetcode.com/discuss/interview-question/124880/Rate-Limiter)
|
||||
- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source A](https://leetcode.com/discuss/post/2409192/uber-phone-screen-senior-front-end-engin-xp4p/) and [Source B](https://leetcode.com/discuss/post/124880/rate-limiter-by-bhosdike-0euv/)
|
||||
|
||||
## User interface coding questions
|
||||
|
||||
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
|
||||
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/post/1064199/uber-front-end-phone-screen-reject-by-an-16nz/)
|
||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)
|
||||
- Overlapping circles app. [Source](https://leetcode.com/discuss/post/1784074/uber-phone-overlapping-circles-app-rejec-ql4p/)
|
||||
|
||||
## Insider tips from the GreatFrontEnd community
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ I would write CSS rules with low specificity so that they can be easily overridd
|
|||
#### References
|
||||
|
||||
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
|
||||
- https://www.sitepoint.com/web-foundations/specificity/
|
||||
- https://www.sitepoint.com/css-selectors-specificity/
|
||||
|
||||
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
|
||||
|
||||
|
|
@ -82,19 +82,19 @@ A stacking context is an element that contains a set of layers. Within a local s
|
|||
|
||||
Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`.
|
||||
|
||||
_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
|
||||
_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)._
|
||||
|
||||
#### References
|
||||
|
||||
- https://css-tricks.com/almanac/properties/z/z-index/
|
||||
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
|
||||
|
||||
### Describe Block Formatting Context (BFC) and how it works.
|
||||
|
||||
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
|
||||
|
||||
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
|
||||
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
|
||||
|
||||
A BFC is an HTML box that satisfies at least one of the following conditions:
|
||||
|
||||
|
|
@ -105,11 +105,11 @@ A BFC is an HTML box that satisfies at least one of the following conditions:
|
|||
|
||||
In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
|
||||
|
||||
Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/).
|
||||
Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/collapsing-margins/).
|
||||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
|
||||
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
|
||||
|
||||
### What are the various clearing techniques and which is appropriate for what context?
|
||||
|
|
@ -160,7 +160,7 @@ These techniques are related to accessibility (a11y).
|
|||
|
||||
- `width: 0; height: 0`. Make the element not take up any space on the screen at all, resulting in not showing it.
|
||||
- `position: absolute; left: -99999px`. Position it outside of the screen.
|
||||
- `text-indent: -9999px`. This only works on text within the `block` elements. This is a widely used and famous trick, but it comes with [some downsides](https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) like causing performance issues, so you might want to consider using `text-indent: 100%` instead.
|
||||
- `text-indent: -9999px`. This only works on text within the `block` elements. This is a widely used and famous trick, but it comes with [some downsides](https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) like causing performance issues, so you might want to consider using `text-indent: 100%` instead.
|
||||
- Meta tags. For example by using Schema.org, RDF, and JSON-LD.
|
||||
- WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
|
||||
|
||||
|
|
@ -170,8 +170,8 @@ Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioni
|
|||
|
||||
- https://www.w3.org/TR/wai-aria-1.1/
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
|
||||
- http://a11yproject.com/
|
||||
- https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
||||
- https://www.a11yproject.com/
|
||||
- https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
||||
|
||||
### Have you ever used a grid system, and if so, what do you prefer?
|
||||
|
||||
|
|
@ -205,7 +205,7 @@ The above `fill="purple"` is an example of a _presentational attribute_. Interes
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
|
||||
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Fills_and_strokes
|
||||
|
||||
### Can you give an example of an @media property other than screen?
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ Here is an example of `print` media type's usage:
|
|||
|
||||
Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
|
||||
|
||||
[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
|
||||
[BEM (Block Element Modifier)](https://en.bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
|
||||
|
||||
Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
|
||||
|
||||
|
|
@ -257,7 +257,7 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
|
|||
**Disadvantages:**
|
||||
|
||||
- Requires tools for preprocessing. Re-compilation time can be slow.
|
||||
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
|
||||
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
|
||||
|
||||
### Describe what you like and dislike about the CSS preprocessors you have used.
|
||||
|
||||
|
|
@ -372,7 +372,7 @@ A positioned element is an element whose computed `position` property is either
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/position
|
||||
|
||||
### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
|
||||
|
||||
|
|
@ -446,8 +446,7 @@ Both have these methods have some issues that need to be weighed:
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
|
||||
- http://mediumwell.com/responsive-adaptive-mobile/
|
||||
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
|
||||
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
|
||||
|
||||
### Have you ever worked with retina graphics? If so, when and what techniques did you use?
|
||||
|
|
@ -484,7 +483,6 @@ For icons, I would also opt to use SVGs and icon fonts where possible, as they r
|
|||
|
||||
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
|
||||
- http://scottjehl.github.io/picturefill/
|
||||
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
|
||||
|
||||
### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
|
||||
|
||||
|
|
@ -498,6 +496,6 @@ When using `translate()`, the element still occupies its original space (sort of
|
|||
|
||||
### Other Answers
|
||||
|
||||
- https://neal.codes/blog/front-end-interview-css-questions
|
||||
- https://neal.codes/blog/front-end-interview-css-questions/
|
||||
- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
|
||||
- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ In front end, performance typically refers to a few things - loading speed, how
|
|||
|
||||
**Optimization tips**
|
||||
|
||||
- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/).
|
||||
- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/articles/virtualize-long-lists-react-window).
|
||||
- **Lazy loading/load only necessary data**: For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
|
||||
- **Preloading/prefetching data ahead of time**: For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
|
|||
#### References
|
||||
|
||||
- http://html5doctor.com/html5-custom-data-attributes/
|
||||
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
|
||||
- https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
|
||||
|
||||
### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
- https://developer.mozilla.org/en-US/docs/Glossary/HTML5
|
||||
|
||||
### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ _Note: If the user decides to clear browsing data via whatever mechanism provide
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies
|
||||
- http://tutorial.techaltum.com/local-and-session-storage.html
|
||||
|
||||
### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
|
||||
|
|
@ -120,7 +120,7 @@ Note: The `async` and `defer` attributes are ignored for scripts that have no `s
|
|||
|
||||
#### References
|
||||
|
||||
- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
|
||||
- https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
|
||||
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
|
||||
- https://bitsofco.de/async-vs-defer/
|
||||
|
||||
|
|
@ -158,12 +158,12 @@ Examples of such techniques:
|
|||
|
||||
- Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
|
||||
- Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
|
||||
- Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
|
||||
- Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
|
||||
|
||||
#### References
|
||||
|
||||
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
|
||||
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
|
||||
- https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/
|
||||
|
||||
### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ If the resolution is retina (2x), the browser will use the closest resolution ab
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images
|
||||
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
|
||||
|
||||
### Have you used different HTML templating languages before?
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Find the latest version of this page on [GreatFrontEnd's JavaScript Quiz Intervi
|
|||
|
||||
:::
|
||||
|
||||
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
|
|
@ -38,15 +38,15 @@ There's no simple explanation for `this`; it is one of the most confusing concep
|
|||
5. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
|
||||
6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created.
|
||||
|
||||
For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
|
||||
For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4).
|
||||
|
||||
#### Can you give an example of one of the ways that working with this has changed in ES6?
|
||||
|
||||
ES6 allows you to use [arrow functions](http://2ality.com/2017/12/alternate-this.html#arrow-functions) which uses the [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). This is usually convenient, but does prevent the caller from controlling context via `.call` or `.apply`—the consequences being that a library such as `jQuery` will not properly bind `this` in your event handler functions. Thus, it's important to keep this in mind when refactoring large legacy applications.
|
||||
ES6 allows you to use [arrow functions](https://2ality.com/2017/12/alternate-this.html#arrow-functions) which uses the [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). This is usually convenient, but does prevent the caller from controlling context via `.call` or `.apply`—the consequences being that a library such as `jQuery` will not properly bind `this` in your event handler functions. Thus, it's important to keep this in mind when refactoring large legacy applications.
|
||||
|
||||
#### References
|
||||
|
||||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4
|
||||
- https://stackoverflow.com/a/3127440/1751946
|
||||
|
||||
### Explain how prototypal inheritance works
|
||||
|
|
@ -99,7 +99,7 @@ Things to note are:
|
|||
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
|
||||
- https://davidwalsh.name/javascript-objects
|
||||
- https://crockford.com/javascript/prototypal.html
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
|
||||
|
||||
### What do you think of AMD vs CommonJS?
|
||||
|
||||
|
|
@ -132,7 +132,7 @@ console.log(foo); // undefined
|
|||
|
||||
#### References
|
||||
|
||||
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
|
||||
- https://lucybain.com/blog/2014/immediately-invoked-function-expression/
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
|
||||
|
||||
### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
|
||||
|
|
@ -178,7 +178,7 @@ As a personal habit, I never leave my variables undeclared or unassigned. I will
|
|||
#### References
|
||||
|
||||
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
|
||||
|
||||
### What is a closure, and how/why would you use one?
|
||||
|
||||
|
|
@ -191,7 +191,7 @@ A closure is the combination of a function and the lexical environment within wh
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
|
||||
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
|
||||
|
||||
### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
|
||||
|
|
@ -231,7 +231,7 @@ The main difference between `.forEach` and `.map()` is that `.map()` returns a n
|
|||
|
||||
#### References
|
||||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f?gi=c9bc30cbec28
|
||||
|
||||
### What's a typical use case for anonymous functions?
|
||||
|
||||
|
|
@ -325,7 +325,7 @@ console.log(add.apply(null, [1, 2])); // 3
|
|||
|
||||
### Explain `Function.prototype.bind`.
|
||||
|
||||
Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
|
||||
Taken word-for-word from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind):
|
||||
|
||||
> The `bind()` method creates a new function that, when called, has its `this` keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
|
||||
|
||||
|
|
@ -333,7 +333,7 @@ In my experience, it is most useful for binding the value of `this` in methods o
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
|
||||
|
||||
### When would you use `document.write()`?
|
||||
|
||||
|
|
@ -344,7 +344,7 @@ There are some answers online that explain `document.write()` is being used in a
|
|||
#### References
|
||||
|
||||
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
|
||||
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
|
||||
- https://github.com/h5bp/html5-boilerplate/wiki/#documentwrite-script-tag
|
||||
|
||||
### What's the difference between feature detection, feature inference, and using the UA string?
|
||||
|
||||
|
|
@ -380,9 +380,9 @@ This is a browser-reported string that allows the network protocol peers to iden
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
|
||||
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
|
||||
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
|
||||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent
|
||||
|
||||
### Explain Ajax in as much detail as possible.
|
||||
|
||||
|
|
@ -393,7 +393,7 @@ The `XMLHttpRequest` API is frequently used for the asynchronous communication o
|
|||
#### References
|
||||
|
||||
- https://en.wikipedia.org/wiki/Ajax_(programming)
|
||||
- https://developer.mozilla.org/en-US/docs/AJAX
|
||||
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests
|
||||
|
||||
### What are the advantages and disadvantages of using Ajax?
|
||||
|
||||
|
|
@ -498,7 +498,7 @@ let y = 'local';
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting
|
||||
- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
|
||||
|
||||
### Describe event bubbling.
|
||||
|
|
@ -534,7 +534,7 @@ The only time you may want to extend a native object is when you want to create
|
|||
|
||||
#### References
|
||||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
- https://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
### Difference between document `load` event and document `DOMContentLoaded` event?
|
||||
|
||||
|
|
@ -544,8 +544,8 @@ The `DOMContentLoaded` event is fired when the initial HTML document has been co
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Events/load
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
|
||||
|
||||
### What is the difference between `==` and `===`?
|
||||
|
||||
|
|
@ -608,7 +608,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
|
||||
|
||||
### What is `"use strict";`? What are the advantages and disadvantages to using it?
|
||||
|
||||
|
|
@ -634,8 +634,8 @@ Overall, I think the benefits outweigh the disadvantages, and I never had to rel
|
|||
|
||||
#### References
|
||||
|
||||
- http://2ality.com/2011/10/strict-mode-hatred.html
|
||||
- http://lucybain.com/blog/2014/js-use-strict/
|
||||
- https://2ality.com/2011/10/strict-mode-hatred.html
|
||||
- https://lucybain.com/blog/2014/js-use-strict/
|
||||
|
||||
### Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.
|
||||
|
||||
|
|
@ -667,7 +667,7 @@ The DOM event `DOMContentLoaded` will fire after the DOM for the page has been c
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
|
||||
|
||||
### Explain what a single page app is and how to make one SEO-friendly.
|
||||
|
||||
|
|
@ -675,7 +675,7 @@ The below is taken from the awesome [Grab Front End Guide](https://github.com/gr
|
|||
|
||||
Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response to their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML to the new page. This is called server-side rendering.
|
||||
|
||||
However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). New data required for the new page, usually in JSON format, is retrieved by the browser via [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
|
||||
However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). New data required for the new page, usually in JSON format, is retrieved by the browser via [AJAX](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests) requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
|
||||
|
||||
The benefits:
|
||||
|
||||
|
|
@ -692,9 +692,9 @@ The downsides:
|
|||
#### References
|
||||
|
||||
- https://github.com/grab/front-end-guide#single-page-apps-spas
|
||||
- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
|
||||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
- https://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
|
||||
- https://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://www.freecodecamp.org/news/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
### What is the extent of your experience with Promises and/or their polyfills?
|
||||
|
||||
|
|
@ -759,17 +759,16 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
|
|||
|
||||
- React and Redux
|
||||
- [React Devtools](https://github.com/facebook/react-devtools)
|
||||
- [Redux Devtools](https://github.com/gaearon/redux-devtools)
|
||||
- [Redux Devtools](https://github.com/reduxjs/redux-devtools)
|
||||
- Vue
|
||||
- [Vue Devtools](https://github.com/vuejs/vue-devtools)
|
||||
- [Vue Devtools](https://github.com/vuejs/devtools-v6)
|
||||
- JavaScript
|
||||
- [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
|
||||
- Chrome Devtools
|
||||
- `debugger` statement
|
||||
- Good old `console.log` debugging
|
||||
|
||||
#### References
|
||||
|
||||
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
|
||||
- https://raygun.com/learn/javascript-debugging-tips
|
||||
|
||||
### What language constructions do you use for iterating over object properties and array items?
|
||||
|
|
@ -800,7 +799,7 @@ for (let [index, elem] of arr.entries()) {
|
|||
|
||||
#### References
|
||||
|
||||
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
|
||||
- https://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
|
||||
|
||||
### Explain the difference between mutable and immutable objects.
|
||||
|
|
@ -1082,7 +1081,7 @@ It's much more verbose to use inheritance in ES5 and the ES6 version is easier t
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
|
||||
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript
|
||||
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
|
||||
|
||||
### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
|
||||
|
|
@ -1129,12 +1128,12 @@ sayNameFromWindow2(); // John
|
|||
|
||||
The main takeaway here is that `this` can be changed for a normal function, but the context always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the context changing.
|
||||
|
||||
This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://machnicki.medium.com/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
|
||||
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
|
||||
- https://machnicki.medium.com/handle-events-in-react-with-arrow-functions-ede88184bbb
|
||||
|
||||
### What is the definition of a higher-order function?
|
||||
|
||||
|
|
@ -1215,7 +1214,7 @@ console.log(q); // true
|
|||
|
||||
#### References
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring
|
||||
- https://ponyfoo.com/articles/es6-destructuring-in-depth
|
||||
|
||||
### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
|
||||
|
|
@ -1361,7 +1360,7 @@ const { e, f, ...others } = {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring
|
||||
|
||||
### How can you share code between files?
|
||||
|
||||
|
|
@ -1375,9 +1374,9 @@ ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This
|
|||
|
||||
#### References
|
||||
|
||||
- http://requirejs.org/docs/whyamd.html
|
||||
- https://requirejs.org/docs/whyamd.html
|
||||
- https://nodejs.org/docs/latest/api/modules.html
|
||||
- http://2ality.com/2014/09/es6-modules-final.html
|
||||
- https://2ality.com/2014/09/es6-modules-final.html
|
||||
|
||||
### Why might you want to create static class members?
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ Find the latest version of this page on [GreatFrontEnd's Front End Interview Pla
|
|||
|
||||
:::
|
||||
|
||||
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.
|
||||
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/) contains more details on how to write a killer resume which will also benefit Front End engineer candidates.
|
||||
|
||||
<div>
|
||||
<a className="button button--primary" href="https://www.techinterviewhandbook.org/resume/guide">Go to Tech Interview Handbook →</a>
|
||||
<a className="button button--primary" href="https://www.techinterviewhandbook.org/resume/">Go to Tech Interview Handbook →</a>
|
||||
</div>
|
||||
|
||||
## Recommended resume tools
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Describe Block Formatting Context (BFC) and how it works.
|
|||
|
||||
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
|
||||
|
||||
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
|
||||
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
|
||||
|
||||
A BFC is an HTML box that satisfies at least one of the following conditions:
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,4 @@ A stacking context is an element that contains a set of layers. Within a local s
|
|||
|
||||
Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`.
|
||||
|
||||
_**Note**: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
|
||||
_**Note**: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)._
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ title: What are some of the "gotchas" for writing efficient CSS?
|
|||
|
||||
Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
|
||||
|
||||
[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
|
||||
[BEM (Block Element Modifier)](https://en.bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
|
||||
|
||||
Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
|
||||
|
|
|
|||
|
|
@ -14,4 +14,4 @@ title: What are the advantages/disadvantages of using CSS preprocessors?
|
|||
## Disadvantages
|
||||
|
||||
- Requires tools for preprocessing. Re-compilation time can be slow.
|
||||
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.
|
||||
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Include only the minimum CSS/content/scripts necessary for the amount of page th
|
|||
|
||||
## Async HTML fragments
|
||||
|
||||
Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
|
||||
Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
|
||||
|
||||
## Other modern techniques
|
||||
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ In contrast to `Object`, `Map` provides dedicated APIs for various common tasks:
|
|||
|
||||
There seems to be a common belief among JavaScript community that `Map` is faster than `Object`, for the most part. There are [people](https://twitter.com/diegohaz/status/1534888291732013058) who claimed to see noticeable performance gains by switching from `Object` to `Map`.
|
||||
|
||||
My experience of grinding LeetCode seems to confirm this belief: LeetCode feeds a huge amount of data as the test cases to your solution and it times out if your solution is taking too long. Questions like [this](https://leetcode.com/problems/random-pick-with-weight/discuss/671804/Javascript-with-explanation-and-very-interesting-find-regarding-vs-Map) only times out if you use `Object`, but not on `Map`.
|
||||
My experience of grinding LeetCode seems to confirm this belief: LeetCode feeds a huge amount of data as the test cases to your solution and it times out if your solution is taking too long. Questions like [this](https://leetcode.com/problems/random-pick-with-weight/solutions/671804/Javascript-with-explanation-and-very-interesting-find-regarding-vs-Map/) only times out if you use `Object`, but not on `Map`.
|
||||
|
||||
However, I believe just saying "`Map` is faster than `Object`" is reductive. There must be some nuance that I wanted to find out myself. Therefore. I built [a little app](https://csb-yuu1dm.netlify.app/) to run some benchmarks.
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ module.exports = {
|
|||
</svg>`,
|
||||
},
|
||||
{
|
||||
href: 'https://discord.gg/NDFx8f6P6B',
|
||||
href: 'https://discord.com/invite/NDFx8f6P6B',
|
||||
position: 'right',
|
||||
className: 'navbar-icon navbar-icon-discord',
|
||||
'aria-label': 'Discord channel',
|
||||
|
|
@ -166,7 +166,7 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discord.gg/NDFx8f6P6B',
|
||||
href: 'https://discord.com/invite/NDFx8f6P6B',
|
||||
},
|
||||
{
|
||||
label: 'Contact us',
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ export default [
|
|||
<br />
|
||||
<br />
|
||||
I've learnt a few things and blogged about them on{' '}
|
||||
<a href="https://zhenghao.io" rel="noopener">
|
||||
https://zhenghao.io
|
||||
<a href="https://www.zhenghao.io/" rel="noopener">
|
||||
https://www.zhenghao.io/
|
||||
</a>
|
||||
, check them out if you're interested!
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -474,7 +474,7 @@ function SuccessStoriesSection() {
|
|||
Would you like to contribute a success story?{' '}
|
||||
<a
|
||||
href="https://github.com/yangshun/front-end-interview-handbook/edit/main/website/src/data/successStories.js"
|
||||
rel="noopener"
|
||||
rel="nofollow noopener"
|
||||
target="_blank">
|
||||
Open a Pull Request here
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue