` element. For a particular ``, as soon as it finds a ` `, it knows that the `` matches the selector, and can stop traversing its parents.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx b/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
index ed0b94749..f7a090ef4 100644
--- a/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
+++ b/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
@@ -27,7 +27,3 @@ The client has to have the `printData` function in its global scope and the func
JSONP can be unsafe and has some security implications. As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data.
These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is the recommended approach and JSONP is seen as a hack.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
index f6fea8e30..29b4a7a4c 100644
--- a/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
+++ b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
@@ -75,7 +75,3 @@ child.greet();
child.constructor.name;
// 'Child'
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-how-this-works-in-javascript/en-US.mdx b/packages/quiz/explain-how-this-works-in-javascript/en-US.mdx
index 0185565dc..0ed4ce2ae 100644
--- a/packages/quiz/explain-how-this-works-in-javascript/en-US.mdx
+++ b/packages/quiz/explain-how-this-works-in-javascript/en-US.mdx
@@ -16,7 +16,3 @@ For an in-depth explanation, do check out his [article on Medium](https://codebu
#### Can you give an example of one of the ways that working with this has changed in ES2015?
ES2015 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.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx b/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
index e1ef736ad..098946277 100644
--- a/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
+++ b/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
@@ -79,7 +79,3 @@ Freezing an object does not allow new properties to be added to an object and pr
- Complex to create yourself: Naive implementations of immutable data structures and its operations can result in extremely poor performance because new objects are created each time. It is recommended to use libraries for efficient immutable data structures and operations that leverage on structural sharing.
- Potential negative performance: Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.
- Complexity for cyclic data structures: Cyclic data structures such as graphs are difficult to build. If you have two objects which can't be modified after initialization, how can you get them to point to each other?
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx b/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
index 022692d9c..ea53528fa 100644
--- a/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
+++ b/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
@@ -5,7 +5,3 @@ title: Explain the difference between synchronous and asynchronous functions
Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx b/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
index fee126570..1715aac00 100644
--- a/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
+++ b/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
@@ -21,7 +21,3 @@ var foo = function () {
console.log('FOOOOO');
};
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx b/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx
index f6598cb69..f6bf33056 100644
--- a/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx
+++ b/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx
@@ -3,7 +3,3 @@ title: Explain the same-origin policy with regards to JavaScript
---
The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx b/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx
index 570886403..d265671ed 100644
--- a/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx
+++ b/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx
@@ -17,7 +17,3 @@ However, in modern SPAs, client-side rendering is used instead. The browser load
- Heavier initial page load due to the loading of framework, app code, and assets required for multiple pages.
- There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx b/packages/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx
index e558051fe..17a713da5 100644
--- a/packages/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx
+++ b/packages/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx
@@ -15,7 +15,3 @@ const foo = void (function bar() {
console.log(foo); // undefined
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx b/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
index 1eb5a260e..bf3a22505 100644
--- a/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
+++ b/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
@@ -32,5 +32,4 @@ Look up the `box-sizing` property, which affects how the total heights and width
## References
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
- [The box model | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx b/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx
index 006df9e3b..5de5d0e8f 100644
--- a/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx
+++ b/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx
@@ -7,7 +7,3 @@ Before Flex became popular (around 2014), the `float`-based grid system was the
Today, `flex` is the recommended approach for building grid systems and has [decent browser support (99.64%)](https://caniuse.com/#search=flex).
For the adventurous, they can look into [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), which uses the shiny new `grid` property. Grid is a two-dimensional grid-based layout system as compared to Flexbox, which is one-dimensional.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx b/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx
index 40bf3da24..21d041400 100644
--- a/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx
+++ b/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx
@@ -30,7 +30,3 @@ To overcome this problem, we can use responsive images, as specified in HTML5. I
It is important to note that browsers which don't support HTML5's `srcset` (i.e. IE11) will ignore it and use `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. Picturefill (link in the references).
For icons, to use SVGs where possible, as they render very crisply regardless of resolution.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx b/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx
index 4dd17f876..fa4d47e34 100644
--- a/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx
+++ b/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx
@@ -7,7 +7,3 @@ Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dime
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create layouts.
Grid is by far the most intuitive approach for creating grid-based layouts but browser support is not that wide at the moment. Many layout problems can already be solved with Flexbox, so there's not a huge need for Grid.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx b/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx
index e2dac9e62..00d3dd241 100644
--- a/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx
+++ b/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx
@@ -3,7 +3,3 @@ title: Have you used or implemented media queries or mobile-specific layouts/CSS
---
An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/how-can-you-share-code-between-files/en-US.mdx b/packages/quiz/how-can-you-share-code-between-files/en-US.mdx
index 533ff0e40..c46ff9987 100644
--- a/packages/quiz/how-can-you-share-code-between-files/en-US.mdx
+++ b/packages/quiz/how-can-you-share-code-between-files/en-US.mdx
@@ -9,7 +9,3 @@ On the client (browser environment), as long as the variables/functions are decl
On the server (Node.js), the common way has been to use CommonJS. Each file is treated as a module and it can export variables and functions by attaching them to the `module.exports` object.
ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx b/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
index 3fc84be5b..e77625bf2 100644
--- a/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
+++ b/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
@@ -8,7 +8,3 @@ In the past, developers used Backbone for my models which encourages a more OOP
The module pattern is still great, but these days, developers prefer using React/Redux which utilize a single-directional data flow based on Flux architecture. It is common now to represent an app's data model using plain objects and write utility pure functions to manipulate these objects. State is manipulated using actions and reducers like in any other Redux application.
Avoid using classical inheritance where possible. When and if you do, stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx b/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx
index 9d295bb9b..8ad2e1ea0 100644
--- a/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx
+++ b/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx
@@ -14,7 +14,3 @@ To let a search engine know that the same content is available in different lang
- **Server-side rendering:** The HTML markup will contain string placeholders and content for the specific language will be fetched from configuration in code or a translation service. The server then dynamically generates the HTML page with content in that particular language.
- **Client-side rendering:** The appropriate locale strings will be fetched and combined with the JavaScript-based views.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)
diff --git a/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx b/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx
index 4789c45d5..ea9c54a97 100644
--- a/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx
+++ b/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx
@@ -11,7 +11,3 @@ subtitle: What techniques/processes do you use?
- Autoprefixer for automatic vendor prefix insertion.
- Feature detection using [Modernizr](https://modernizr.com/).
- Use CSS Feature queries via [`@support``](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.mdx b/packages/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.mdx
index f69c30289..3c67d0854 100644
--- a/packages/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.mdx
+++ b/packages/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.mdx
@@ -12,7 +12,3 @@ Both have these methods have some issues that need to be weighed:
- Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
- Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx b/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx
index 289931a66..d4f3d95d4 100644
--- a/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx
+++ b/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx
@@ -7,7 +7,3 @@ title: How would you approach fixing browser-specific styling issues?
- Use `autoprefixer` to automatically add vendor prefixes to your code.
- Use Reset CSS or Normalize.css.
- If you're using PostCSS (or a similar CSS transpilation library), there may be plugins which allow you to opt in to using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into equivalent backward-compatible code that will work in the targets you've used.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/html5-as-an-open-web-platform-building-blocks/en-US.mdx b/packages/quiz/html5-as-an-open-web-platform-building-blocks/en-US.mdx
index fa1735287..1d693e953 100644
--- a/packages/quiz/html5-as-an-open-web-platform-building-blocks/en-US.mdx
+++ b/packages/quiz/html5-as-an-open-web-platform-building-blocks/en-US.mdx
@@ -10,7 +10,3 @@ title: Consider HTML5 as an open web platform. What are the building blocks of H
- **2D/3D graphics and effects**: Allows a much more diverse range of presentation options.
- **Performance** and integration: Provides greater speed optimization and better usage of computer hardware.
- **Device access**: Allows for the usage of various input and output devices.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)
diff --git a/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx b/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx
index efa1d6052..5fb4e2ec2 100644
--- a/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx
+++ b/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx
@@ -5,7 +5,3 @@ title: Is there any reason you'd want to use `translate()` instead of `absolute`
`translate()` is a possible value of the CSS `transform` property. When using `translate()`, the element still occupies its original space (sort of like `position: relative`). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.
Changing `transform` or `opacity` does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx b/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
index 475036d63..4dc27f017 100644
--- a/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
+++ b/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
@@ -41,7 +41,3 @@ 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)
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-data-attributes-good-for/en-US.mdx b/packages/quiz/what-are-data-attributes-good-for/en-US.mdx
index 704907add..14d32c01b 100644
--- a/packages/quiz/what-are-data-attributes-good-for/en-US.mdx
+++ b/packages/quiz/what-are-data-attributes-good-for/en-US.mdx
@@ -17,7 +17,3 @@ Another common use case for `data-` attributes is to store information used by t
These days, using `data-` attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using "inspect element" in the browser. The data model is better stored within JavaScript environment and have them kept in-sync with the DOM via virtual DOM reconciliation or two-way data binding possibly through a library or a framework.
However, one perfectly valid use of data attributes, is to add an identifier for **end-to-end** testing frameworks (e.g. Playwright, Puppeteer, Selenium), without adding classes or ID attributes just for tests which are primarily for other purposes. The element needs a way to be selected and something like `data-test-id="my-element"` is a valid way to do so without convoluting the semantic markup otherwise.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)
diff --git a/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx b/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx
index 44bf85245..823b1e7bd 100644
--- a/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx
+++ b/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx
@@ -21,7 +21,3 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
- Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. There's more not really a need to use CoffeeScript these days. Instead, TypeScript is the preferred choice because of the added typesafety and improved developer experience it brings.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx b/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx
index 33fafa969..5fa45515c 100644
--- a/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx
+++ b/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx
@@ -7,7 +7,3 @@ Firstly, understand that browsers match selectors from rightmost (key selector)
[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.
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.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx b/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx
index e74b95ad9..7fa742524 100644
--- a/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx
+++ b/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx
@@ -16,7 +16,3 @@ title: What are the advantages and disadvantages of using Ajax?
- Some web crawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
- Webpages using Ajax to fetch data will likely have to combine the fetched remote data with client-side templates to update the DOM. For this to happen, JavaScript will have to be parsed and executed on the browser, and low-end mobile devices might struggle with this.
- Basically most of the disadvantages of an SPA.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx b/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx
index 776274489..fabbfc6e5 100644
--- a/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx
+++ b/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx
@@ -15,7 +15,3 @@ title: What are the advantages/disadvantages of using CSS preprocessors?
- 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.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx b/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
index 8fb3ad241..45a86baf4 100644
--- a/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
+++ b/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
@@ -37,7 +37,3 @@ const { e, f, ...others } = {
h: 4,
}; // e: 1, f: 2, others: { g: 3, h: 4 }
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx b/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
index 6766fc4df..d27e506ef 100644
--- a/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
+++ b/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
@@ -45,7 +45,3 @@ class Student extends Person {
```
It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
index 97f88d1a1..51ba1039b 100644
--- a/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
+++ b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
@@ -73,7 +73,3 @@ foo = 'bar';
const baz = 'baz';
baz = 'qux';
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx b/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx
index 8faa7b8ba..0a36972c0 100644
--- a/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx
+++ b/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx
@@ -72,4 +72,3 @@ Instead of implementing your own way to remove an element from the rendering tre
## References
- [CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx b/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
index 194686c39..3c20094c8 100644
--- a/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
+++ b/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
@@ -18,7 +18,3 @@ title: What are the pros and cons of using Promises instead of callbacks?
- Slightly more complex code (debatable).
- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx b/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx
index 785a725eb..63fd5e313 100644
--- a/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx
+++ b/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx
@@ -7,7 +7,3 @@ title: What are the various clearing techniques and which is appropriate for wha
- `overflow: auto` or `overflow: hidden` method: Parent will establish a new block formatting context and expand to contains its floated children.
In large projects, having a utility `.clearfix` class will be very helpful. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.mdx b/packages/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
index a958652bd..e615646c4 100644
--- a/packages/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
+++ b/packages/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
@@ -7,7 +7,3 @@ Both are ways to implement a module system, which was not natively present in Ja
AMD syntax can be quite verbose and CommonJS is closer to the style you would write import statements in other languages. Most of the time, AMD is unnecessary, because if you served all your JavaScript into one concatenated bundle file, you wouldn't benefit from the async loading properties. Also, CommonJS syntax is closer to Node.js style of writing/importing modules and there is less context-switching overhead when switching between client-side and server-side JavaScript development.
The future standard, ES modules (ESM) has support for both synchronous and asynchronous loading and is supported by both browsers and server-side runtimes. We can finally just stick to one approach (barring upgrading legacy applications).
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-does-a-doctype-do/en-US.mdx b/packages/quiz/what-does-a-doctype-do/en-US.mdx
index a5247e731..6bbc3f328 100644
--- a/packages/quiz/what-does-a-doctype-do/en-US.mdx
+++ b/packages/quiz/what-does-a-doctype-do/en-US.mdx
@@ -9,7 +9,3 @@ A DTD defines how documents of a certain type should be structured (i.e. a `butt
For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the **quirks mode**.
The DOCTYPE declaration for the HTML5 standards is ``.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)
diff --git a/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx b/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx
index 953baa6e8..35401ba52 100644
--- a/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx
+++ b/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx
@@ -24,5 +24,4 @@ Taking into account `padding`s and `border`s as part of the box model resonates
## References
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
- [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx b/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx
index 958d43fa6..eeda5640a 100644
--- a/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx
+++ b/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx
@@ -6,7 +6,3 @@ subtitle: How would you change/improve them?
- **Bootstrap**: Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Future versions of Bootstrap should include a spinner button component, as it is widely used.
- **Semantic UI**: Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
- **Bulma**: A lot of non-semantic and superfluous classes and markup required. Not backward-compatible. Upgrading versions breaks the app in subtle manners.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx b/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
index bcd9e56ce..4cf894521 100644
--- a/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
+++ b/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
@@ -8,7 +8,3 @@ A closure is the combination of a function and the lexical environment within wh
- Data privacy / emulating private methods with closures. Commonly used in the [module pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
- [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx b/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx
index 9285a7bb5..8fd4f9342 100644
--- a/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx
+++ b/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx
@@ -14,7 +14,3 @@ The resulting specificity is not a single numerical score, but an array of value
In the cases of equal specificity: the latest rule is the one that counts. If you have written the same rule into your stylesheet (regardless of internal or external) twice, then the lower rule in your stylesheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.
It's a better practice to write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS UI component library code, it is important that they have low specificities so that users of the library can override them without using too complicated CSS rules just for the sake of increasing specificity or resorting to `!important`.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx b/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
index 494fd0874..9b0114b7b 100644
--- a/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
+++ b/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
@@ -6,7 +6,3 @@ subtitle: What is the difference between call stack and task queue?
The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-is-progressive-rendering/en-US.mdx b/packages/quiz/what-is-progressive-rendering/en-US.mdx
index f4ffc5b98..cf2ace317 100644
--- a/packages/quiz/what-is-progressive-rendering/en-US.mdx
+++ b/packages/quiz/what-is-progressive-rendering/en-US.mdx
@@ -26,7 +26,3 @@ Flushing parts of the HTML to the browser as the page is constructed on the back
- [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
- [Streaming server-side rendering](https://www.patterns.dev/posts/ssr/)
- [Selective hydration](https://www.patterns.dev/posts/react-selective-hydration/)
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)
diff --git a/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx b/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx
index ccb020b0b..77780ea24 100644
--- a/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx
+++ b/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx
@@ -21,5 +21,4 @@ For a complete list of values for the `display` property, refer to [CSS Display
## References
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
diff --git a/packages/quiz/what-is-the-definition-of-a-higher-order-function/en-US.mdx b/packages/quiz/what-is-the-definition-of-a-higher-order-function/en-US.mdx
index 1a42da306..076f5499c 100644
--- a/packages/quiz/what-is-the-definition-of-a-higher-order-function/en-US.mdx
+++ b/packages/quiz/what-is-the-definition-of-a-higher-order-function/en-US.mdx
@@ -33,7 +33,3 @@ const transformNamesToUppercase = function (names) {
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx b/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
index 2f3a9fec3..c0f0f06d4 100644
--- a/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
+++ b/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
@@ -20,7 +20,3 @@ var a = null;
console.log(a == null); // true
console.log(a == undefined); // true
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/en-US.mdx b/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/en-US.mdx
index 1acf1cd48..6a494a72c 100644
--- a/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/en-US.mdx
+++ b/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/en-US.mdx
@@ -5,7 +5,3 @@ title: What is the extent of your experience with Promises and/or their polyfill
Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx b/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
index a997a1db1..d60a2acad 100644
--- a/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
+++ b/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
@@ -22,7 +22,3 @@ subtitle: What are the advantages and disadvantages to using it?
- Concatenation of scripts written in different strict modes might cause issues.
Overall, the benefits outweigh the disadvantages and there is not really a need to rely on the features that strict mode prohibits. We should all be using strict mode by default.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx b/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
index 178d07c13..e09d20517 100644
--- a/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
+++ b/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
@@ -101,7 +101,3 @@ for (let [index, elem] of arr.entries()) {
```
_Reference: [for...of - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)_
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx b/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx
index f7a9d63f7..37e93f577 100644
--- a/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx
+++ b/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx
@@ -11,7 +11,3 @@ title: What tools and techniques do you use for debugging JavaScript code?
- [Redux Devtools](https://github.com/gaearon/redux-devtools)
- Vue
- [Vue Devtools](https://github.com/vuejs/vue-devtools)
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx b/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
index 6b92340a2..d39a3b335 100644
--- a/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
+++ b/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
@@ -27,7 +27,3 @@ const double = arr.map(function (el) {
});
console.log(double); // [2, 4, 6]
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx b/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx
index fc21ac8df..6d6636698 100644
--- a/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx
@@ -9,7 +9,3 @@ A positioned element is an element whose computed `position` property is either
- `absolute`: The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely-positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
- `fixed`: The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
- `sticky`: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed`-positioned.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx b/packages/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
index 1188704d1..640d914e9 100644
--- a/packages/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
@@ -40,7 +40,3 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
```
As a good habit, never leave your variables undeclared or unassigned. Explicitly assign `null` to them after declaring if you don't intend to use them yet. If you use some static analysis tooling in your workflow (e.g. ESLint, TypeScript Compiler), it will usually also be able to check that you are not referencing undeclared variables.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx b/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx
index 0111edaaf..e6d31e10f 100644
--- a/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx
@@ -16,7 +16,3 @@ But after you change the value of the text field by adding "World!" to it, this
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-call-and-apply/en-US.mdx b/packages/quiz/whats-the-difference-between-call-and-apply/en-US.mdx
index 3bf8b0d15..10a5df65a 100644
--- a/packages/quiz/whats-the-difference-between-call-and-apply/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-call-and-apply/en-US.mdx
@@ -12,7 +12,3 @@ function add(a, b) {
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx b/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx
index 3ed79b9ac..804f4f13a 100644
--- a/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx
@@ -31,7 +31,3 @@ This is not really recommended. Feature detection is more foolproof.
## UA String
This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/en-US.mdx b/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/en-US.mdx
index a171a76f2..71d9ae434 100644
--- a/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/en-US.mdx
@@ -5,7 +5,3 @@ title: What's the difference between host objects and native objects?
Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
Host objects are provided by the runtime environment (browser or Node), such as `window`, `XMLHTTPRequest`, etc.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/whats-the-difference-between-inline-and-inline-block/en-US.mdx b/packages/quiz/whats-the-difference-between-inline-and-inline-block/en-US.mdx
index 7ad4356a3..11442035a 100644
--- a/packages/quiz/whats-the-difference-between-inline-and-inline-block/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-inline-and-inline-block/en-US.mdx
@@ -12,7 +12,3 @@ Let's also compare with `display: block` for completeness sake.
| Can be aligned with `vertical-align` | No | Yes | Yes |
| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx b/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx
index afbc41176..3dcfe48c1 100644
--- a/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx
+++ b/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx
@@ -11,7 +11,3 @@ subtitle: Which would you choose, and why?
## Which to choose and why?
Choose resetting when you need to have a very customized or unconventional site design such that you need to do a lot of my own styling and do not need any default styling to be preserved.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions)
diff --git a/packages/quiz/when-would-you-use-document-write/en-US.mdx b/packages/quiz/when-would-you-use-document-write/en-US.mdx
index 25be0ea98..bbb8cc5fb 100644
--- a/packages/quiz/when-would-you-use-document-write/en-US.mdx
+++ b/packages/quiz/when-would-you-use-document-write/en-US.mdx
@@ -5,7 +5,3 @@ title: When would you use `document.write()`?
`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`` and `` removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse.
There are some answers online that explain `document.write()` is being used in analytics code or [when you want to include styles that should only work if JavaScript is enabled](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). It is even being used in HTML5 boilerplate to [load scripts in parallel and preserve execution order](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! However, these reasons might be outdated and in this age, they can be achieved without using `document.write()`.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx b/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
index ab6cb332e..e002508b1 100644
--- a/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
+++ b/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
@@ -5,7 +5,3 @@ title: Why is extending built-in JavaScript objects not a good idea?
Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.
The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/en-US.mdx b/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/en-US.mdx
index 840945d96..adde934f7 100644
--- a/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/en-US.mdx
+++ b/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/en-US.mdx
@@ -3,7 +3,3 @@ title: Why is it called a Ternary expression, what does the word "Ternary" indic
---
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx b/packages/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
index 9a41b31d8..2e6431762 100644
--- a/packages/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
+++ b/packages/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
@@ -3,7 +3,3 @@ title: Why is it, in general, a good idea to leave the global scope of a website
---
JavaScript that is executed in the browser has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx b/packages/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx
index c7199989b..d9a19283d 100644
--- a/packages/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx
+++ b/packages/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx
@@ -6,7 +6,3 @@ subtitle: Does this event have disadvantages? Do you know any alternatives, and
The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-you-might-want-to-create-static-class-members/en-US.mdx b/packages/quiz/why-you-might-want-to-create-static-class-members/en-US.mdx
index 0e29511a4..74e624f74 100644
--- a/packages/quiz/why-you-might-want-to-create-static-class-members/en-US.mdx
+++ b/packages/quiz/why-you-might-want-to-create-static-class-members/en-US.mdx
@@ -3,7 +3,3 @@ title: Why you might want to create static class members?
---
Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions)
diff --git a/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx b/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx
index 173aa84a4..1e75ccc15 100644
--- a/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx
+++ b/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx
@@ -14,7 +14,3 @@ If the client's resolution is 1x, 1.5625 is the closest, and `500w` correspondin
If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
`srcset`s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
-
-## References
-
-- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/html-questions)