diff --git a/packages/quiz/are-you-familiar-with-styling-svg/en-US.mdx b/packages/quiz/are-you-familiar-with-styling-svg/en-US.mdx new file mode 100644 index 000000000..64c8b5595 --- /dev/null +++ b/packages/quiz/are-you-familiar-with-styling-svg/en-US.mdx @@ -0,0 +1,25 @@ +--- +title: Are you familiar with styling SVG? +--- + +There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type. + +Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc. + +```html + +``` + +The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overridden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. Hence if you did something like `svg { fill: blue; }` it will override the purple fill that has been defined. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions) diff --git a/packages/quiz/are-you-familiar-with-styling-svg/metadata.json b/packages/quiz/are-you-familiar-with-styling-svg/metadata.json new file mode 100644 index 000000000..4015015cc --- /dev/null +++ b/packages/quiz/are-you-familiar-with-styling-svg/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "are-you-familiar-with-styling-svg", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/en-US.mdx b/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/en-US.mdx new file mode 100644 index 000000000..0bdc8a9cc --- /dev/null +++ b/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/en-US.mdx @@ -0,0 +1,41 @@ +--- +title: Can you describe the main difference between a `.forEach` loop and a `.map()` loop? +subtitle: Why you would pick one versus the other? +--- + +To understand the differences between the two, let's look at what each function does. + +## `forEach` + +- Iterates through the elements in an array. +- Executes a callback for each element. +- Does not return a value. + +```js +const a = [1, 2, 3]; +const doubled = a.forEach((num, index) => { + // Do something with num and/or index. +}); + +// doubled = undefined +``` + +## `map` + +- Iterates through the elements in an array. +- "Maps" each element to a new element by calling the function on each element, creating a new array as a result. + +```js +const a = [1, 2, 3]; +const doubled = a.map((num) => { + return num * 2; +}); + +// doubled = [2, 4, 6] +``` + +The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/metadata.json b/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/metadata.json new file mode 100644 index 000000000..11ac5ebd6 --- /dev/null +++ b/packages/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other", + "languages": [], + "companies": [ + "twitter" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx b/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx new file mode 100644 index 000000000..3dfa7fa44 --- /dev/null +++ b/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx @@ -0,0 +1,42 @@ +--- +title: Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy? +--- + +These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices. + +```css +@media (min-width: 768px) { + .my-class { + font-size: 24px; + } +} + +@media (max-width: 767px) { + .my-class { + font-size: 12px; + } +} +``` + +A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example: + +```css +.my-class { + font-size: 12px; +} + +@media (min-width: 768px) { + .my-class { + font-size: 24px; + } +} +``` + +A mobile-first strategy has the following main advantages: + +- It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries. +- Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions) diff --git a/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json b/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json new file mode 100644 index 000000000..280cbf1c7 --- /dev/null +++ b/packages/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx b/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx new file mode 100644 index 000000000..ed5e9aa99 --- /dev/null +++ b/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx @@ -0,0 +1,42 @@ +--- +title: Can you give an example for destructuring an object or an array? +--- + +Destructuring is an expression available in ES2015 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables. + +## Array destructuring + +```js +// Variable assignment. +const foo = ['one', 'two', 'three']; + +const [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +``` + +```js +// Swapping variables +let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +``` + +## Object destructuring + +```js +// Variable assignment. +const o = { p: 42, q: true }; +const { p, q } = o; + +console.log(p); // 42 +console.log(q); // true +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/metadata.json b/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/metadata.json new file mode 100644 index 000000000..cec49cca1 --- /dev/null +++ b/packages/quiz/can-you-give-an-example-for-destructuring-an-object-or-an-array/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "can-you-give-an-example-for-destructuring-an-object-or-an-array", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/en-US.mdx b/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/en-US.mdx new file mode 100644 index 000000000..dc1159400 --- /dev/null +++ b/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/en-US.mdx @@ -0,0 +1,37 @@ +--- +title: Can you give an example of a curry function and why this syntax offers an advantage? +--- + +Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter. + +```js +function curry(fn) { + if (fn.length === 0) { + return fn; + } + + function _curried(depth, args) { + return function (newArgument) { + if (depth - 1 === 0) { + return fn(...args, newArgument); + } + return _curried(depth - 1, [...args, newArgument]); + }; + } + + return _curried(fn.length, []); +} + +function add(a, b) { + return a + b; +} + +var curriedAdd = curry(add); +var addFive = curriedAdd(5); + +var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10] +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json b/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json new file mode 100644 index 000000000..c5047a7e8 --- /dev/null +++ b/packages/quiz/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx b/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx new file mode 100644 index 000000000..c082e99ac --- /dev/null +++ b/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx @@ -0,0 +1,24 @@ +--- +title: Can you give an example of an `@media` property other than `screen`? +--- + +There are four types of `@media` properties (including `screen`): + +- `all`: for all media type devices +- `print`: for printers +- `speech`: for screen readers that "reads" the page out loud +- `screen`: for computer screens, tablets, smart-phones etc. + +Here is an example of `print` media type's usage: + +```css +@media print { + body { + color: black; + } +} +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions) diff --git a/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json b/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json new file mode 100644 index 000000000..5bcfd2a05 --- /dev/null +++ b/packages/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "can-you-give-an-example-of-an-media-property-other-than-screen", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx b/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx new file mode 100644 index 000000000..cf04491c6 --- /dev/null +++ b/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx @@ -0,0 +1,10 @@ +--- +title: Can you offer a use case for the new arrow => function syntax? +subtitle: How does this new syntax differ from other functions? +--- + +One obvious benefit of arrow functions is to simplify the syntax needed to create functions, without a need for the `function` keyword. The `this` within arrow functions is also bound to the enclosing scope which is different compared to regular functions where the `this` is determined by the object calling it. Lexically-scoped `this` is useful when invoking callbacks especially in React components. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/metadata.json b/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/metadata.json new file mode 100644 index 000000000..458b4cc9c --- /dev/null +++ b/packages/quiz/can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "can-you-offer-a-use-case-for-the-new-arrow-greater-function-syntax-how-does-this-new-syntax-differ-from-other-functions", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/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/en-US.mdx b/packages/quiz/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/en-US.mdx new file mode 100644 index 000000000..790d9687c --- /dev/null +++ b/packages/quiz/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/en-US.mdx @@ -0,0 +1,19 @@ +--- +title: 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` +--- + +Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724). + +```js +for (let i = 1; i <= 100; i++) { + let f = i % 3 == 0, + b = i % 5 == 0; + console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i); +} +``` + +It is not advisable to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/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/metadata.json b/packages/quiz/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/metadata.json new file mode 100644 index 000000000..3700e2390 --- /dev/null +++ b/packages/quiz/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/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "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", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/css-link-between-head-and-js-script-just-before-body/en-US.mdx b/packages/quiz/css-link-between-head-and-js-script-just-before-body/en-US.mdx new file mode 100644 index 000000000..6d71668d6 --- /dev/null +++ b/packages/quiz/css-link-between-head-and-js-script-just-before-body/en-US.mdx @@ -0,0 +1,28 @@ +--- +title: Why is it generally a good idea to position CSS ``s between `` and JS ` + + +``` + +```js +// File loaded from https://example.com?callback=printData +printData({ name: 'John Doe' }); +``` + +The client has to have the `printData` function in its global scope and the function will be executed by the client when the response from the cross-origin domain is received. + +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-jsonp-works-and-how-its-not-really-ajax/metadata.json b/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/metadata.json new file mode 100644 index 000000000..6df745319 --- /dev/null +++ b/packages/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "explain-how-jsonp-works-and-how-its-not-really-ajax", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript", + "network", + "security" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx new file mode 100644 index 000000000..f6fea8e30 --- /dev/null +++ b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx @@ -0,0 +1,81 @@ +--- +title: Explain how prototypal inheritance works +--- + +This is an extremely common JavaScript interview question. All JavaScript objects have a `__proto__` property with the exception of objects created with `Object.create(null)`, that is a reference to another object, which is called the object's "prototype". When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `__proto__`, and the `__proto__`'s `__proto__` and so on, until it finds the property defined on one of the `__proto__`s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects). + +## Example of Prototypal Inheritance + +```js +function Parent() { + this.name = 'Parent'; +} + +Parent.prototype.greet = function () { + console.log('Hello from ' + this.name); +}; + +const child = Object.create(Parent.prototype); + +// Call parent constructor with child +Parent.call(child); + +child.cry = function () { + console.log('waaaaaahhhh!'); +}; + +child.cry(); +// waaaaaahhhh! + +child.greet(); +// hello from Parent + +child.constructor; +// ƒ Parent() { +// this.name = 'Parent'; +// } + +child.constructor.name; +// 'Parent' +``` + +Things to note are: + +- `.greet` is not defined on the _child_, so the engine goes up the prototype chain and finds `.greet` off the inherited from _Parent_. +- We need to call `Object.create` in one of following ways for the prototype methods to be inherited: + - Object.create(Parent.prototype); + - Object.create(new Parent(null)); + - Object.create(objLiteral); + - Currently, `child.constructor` is pointing to the `Parent`: + +If we'd like to correct this, one option would be to do: + +```js +function Parent() { + this.name = 'Parent'; +} + +Parent.prototype.greet = function () { + console.log('Hello from ' + this.name); +}; + +function Child() { + Parent.call(this); + this.name = 'Child'; +} + +Child.prototype = Object.create(Parent.prototype); +Child.prototype.constructor = Child; + +const child = new Child(); + +child.greet(); +// hello from Child + +child.constructor.name; +// 'Child' +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/explain-how-prototypal-inheritance-works/metadata.json b/packages/quiz/explain-how-prototypal-inheritance-works/metadata.json new file mode 100644 index 000000000..768f274e6 --- /dev/null +++ b/packages/quiz/explain-how-prototypal-inheritance-works/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "explain-how-prototypal-inheritance-works", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..0185565dc --- /dev/null +++ b/packages/quiz/explain-how-this-works-in-javascript/en-US.mdx @@ -0,0 +1,22 @@ +--- +title: Explain how `this` works in JavaScript +--- + +There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. Having read many explanations on `this` online, [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation was the clearest. The following rules are applied: + +1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object. +1. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument. +1. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of. +1. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the global object. In a browser, it is the `window` object. If in strict mode (`'use strict'`), `this` will be `undefined` instead of the global object. +1. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value. +1. 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). + +#### 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-how-this-works-in-javascript/metadata.json b/packages/quiz/explain-how-this-works-in-javascript/metadata.json new file mode 100644 index 000000000..3ef5759aa --- /dev/null +++ b/packages/quiz/explain-how-this-works-in-javascript/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "explain-how-this-works-in-javascript", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "featured": true, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..e1ef736ad --- /dev/null +++ b/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx @@ -0,0 +1,85 @@ +--- +title: Explain the difference between mutable and immutable objects +--- + +Immutability is a core principle in functional programming and has lots to offer to object-oriented programs as well. A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created. + +## What is an example of an immutable object in JavaScript? + +In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable. + +Some built-in immutable JavaScript objects are `Math`, `Date`. + +Here are a few ways to add/simulate immutability on plain JavaScript objects. + +### Object Constant Properties + +By combining `writable: false` and `configurable: false`, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like: + +```js +let myObject = {}; +Object.defineProperty(myObject, 'number', { + value: 42, + writable: false, + configurable: false, +}); +console.log(myObject.number); // 42 +myObject.number = 43; +console.log(myObject.number); // 42 +``` + +### Prevent Extensions + +If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object's properties alone, call `Object.preventExtensions(...)`: + +```js +let myObject = { + a: 2, +}; + +Object.preventExtensions(myObject); + +myObject.b = 3; +myObject.b; // undefined +``` + +In non-strict mode, the creation of `b` fails silently. In strict mode, it throws a `TypeError`. + +### Seal + +`Object.seal()` creates a "sealed" object, which means it takes an existing object and essentially calls `Object.preventExtensions()` on it, but also marks all its existing properties as `configurable: false`. + +So, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties (though you can still modify their values). + +### Freeze + +`Object.freeze()` creates a frozen object, which means it takes an existing object and essentially calls `Object.seal()` on it, but it also marks all "data accessor" properties as writable:false, so that their values cannot be changed. + +This approach is the highest level of immutability that you can attain for an object itself, as it prevents any changes to the object or to any of its direct properties (though, as mentioned above, the contents of any referenced other objects are unaffected). + +```js +let immutableObject = Object.freeze({}); +``` + +Freezing an object does not allow new properties to be added to an object and prevents users from removing or altering the existing properties. `Object.freeze()` preserves the enumerability, configurability, writability and the prototype of the object. It returns the passed object and does not create a frozen copy. + +## What are the pros and cons of immutability? + +### Pros + +- Easier change detection: Object equality can be determined in a performant and easy manner through referential equality. This is useful for comparing object differences in React and Redux. +- Less complicated: Programs with immutable objects are less complicated to think about, since you don't need to worry about how an object may evolve over time. +- Easy sharing via references: One copy of an object is just as good as another, so you can cache objects or reuse the same object multiple times. +- Thread-safe: Immutable objects can be safely used between threads in a multi-threaded environment since there is no risk of them being modified in other concurrently running threads. +- Less memory needed: Using libraries like [Immer](https://immerjs.github.io/immer/) and [Immutable.js](https://immutable-js.com/), objects are modified using structural sharing and less memory is needed for having multiple objects with similar structures. +- No need for defensive copying: Defensive copies are no longer necessary when immutable objects are returning from or passed to functions, since there is no possibility an immutable object will be modified by it. + +### Cons + +- 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-mutable-and-immutable-objects/metadata.json b/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/metadata.json new file mode 100644 index 000000000..e8bb134d4 --- /dev/null +++ b/packages/quiz/explain-the-difference-between-mutable-and-immutable-objects/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "explain-the-difference-between-mutable-and-immutable-objects", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..022692d9c --- /dev/null +++ b/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx @@ -0,0 +1,11 @@ +--- +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-difference-between-synchronous-and-asynchronous-functions/metadata.json b/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/metadata.json new file mode 100644 index 000000000..f5c84dd70 --- /dev/null +++ b/packages/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "explain-the-difference-between-synchronous-and-asynchronous-functions", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..fee126570 --- /dev/null +++ b/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx @@ -0,0 +1,27 @@ +--- +title: Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` +--- + +The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables). For more explanation on hoisting, refer to the question on [hoisting](/questions/quiz/explain-hoisting). If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error. + +## Function Declaration + +```js +foo(); // 'FOOOOO' +function foo() { + console.log('FOOOOO'); +} +``` + +## Function Expression + +```js +foo(); // Uncaught TypeError: foo is not a function +var foo = function () { + console.log('FOOOOO'); +}; +``` + +## 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/metadata.json b/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/metadata.json new file mode 100644 index 000000000..a78218415 --- /dev/null +++ b/packages/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..f6598cb69 --- /dev/null +++ b/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx @@ -0,0 +1,9 @@ +--- +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-the-same-origin-policy-with-regards-to-javascript/metadata.json b/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/metadata.json new file mode 100644 index 000000000..48841e810 --- /dev/null +++ b/packages/quiz/explain-the-same-origin-policy-with-regards-to-javascript/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "explain-the-same-origin-policy-with-regards-to-javascript", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript", + "network" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..570886403 --- /dev/null +++ b/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: Explain what a single page app is and how to make one SEO-friendly +--- + +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. + +## Pros + +- The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes. +- Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load. +- Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken. + +## Cons + +- 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-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/metadata.json b/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/metadata.json new file mode 100644 index 000000000..7bb79a948 --- /dev/null +++ b/packages/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..e558051fe --- /dev/null +++ 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 @@ -0,0 +1,21 @@ +--- +title: "Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?" +--- + +IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a _function declaration_ and the latter (a pair of parentheses) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`. + +Here are two ways to fix it that involves adding more parentheses: `(function foo(){ })()` and `(function foo(){ }())`. Statements that begin with `function` are considered to be _function declarations_; by wrapping this function within `()`, it becomes a _function expression_ which can then be executed with the subsequent `()`. These functions are not exposed in the global scope and you can even omit its name if you do not need to reference itself within the body. + +You might also use `void` operator: `void function foo(){ }();`. Unfortunately, there is one issue with such approach. The evaluation of given expression is always `undefined`, so if your IIFE function returns anything, you can't use it. An example: + +```js +const foo = void (function bar() { + return 'foo'; +})(); + +console.log(foo); // undefined +``` + +## 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/metadata.json 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/metadata.json new file mode 100644 index 000000000..4a0611cc6 --- /dev/null +++ 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/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..1eb5a260e --- /dev/null +++ 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 @@ -0,0 +1,36 @@ +--- +title: Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models. +--- + +The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding `padding`, `border`, and `margin` areas. + +The CSS box model is responsible for calculating: + +- How much space a block element takes up. +- Whether or not borders and/or margins overlap, or collapse. +- A box's dimensions. + +## Box Model Rules + +- The dimensions of a block element are calculated by `width`, `height`, `padding`, `border`s. +- If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which, see [describe floats and how they work](/questions/quiz/describe-floats-and-how-they-work)). +- If no `width` is specified, a non-`float`-ed block element will expand to fit the width of its parent minus the `padding`, unless it has a `max-width` property set, in which case it will be no wider than the specified maximum width. + - Some block-level elements (e.g. `table`, `figure`, and `input`) have inherent or default width values, and may not expand to fill the full width of their parent container. + - Note: `span` is an inline-level element and does not have a default width, so it will not expand to fit. +- The `height` of an element is calculated by the content's `height`. +- The `width` of an element is calculated by the content's `width`. +- By default (`box-sizing: content-box`), `padding`s and `border`s are not part of the `width` and `height` of an element. + +Note that `margin`s are not counted towards the actual size of the box. It affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the `border` — it does not extend into the `margin`. + +## Extra + +Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated. + +- `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above. +- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border, but not including the margin. This is a much more intuitive way to think about boxes and hence many CSS frameworks set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/css/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information. + +## 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/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/metadata.json 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/metadata.json new file mode 100644 index 000000000..6d56b057a --- /dev/null +++ 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/metadata.json @@ -0,0 +1,19 @@ +{ + "slug": "explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models", + "languages": [], + "companies": [ + "amazon", + "google", + "linkedin" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "featured": true, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..006df9e3b --- /dev/null +++ b/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: Have you ever used a grid system, and if so, what do you prefer? +--- + +Before Flex became popular (around 2014), the `float`-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the `float` approach until Bootstrap 4 which switched to the `flex`-based approach. + +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-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json b/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json new file mode 100644 index 000000000..f797853c5 --- /dev/null +++ b/packages/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..40bf3da24 --- /dev/null +++ b/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx @@ -0,0 +1,36 @@ +--- +title: Have you ever worked with retina graphics? +subtitle: If so, when and what techniques did you use? +--- + +_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays. + +Browsers by default render DOM elements according to the device resolution, except for images. + +In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire. + +To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance: + +```html +
+ +
+``` + +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-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json b/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json new file mode 100644 index 000000000..d81c7839e --- /dev/null +++ b/packages/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..4dd17f876 --- /dev/null +++ b/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: Have you played around with the new CSS Flexbox or Grid specs? +--- + +Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts. + +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-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json b/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json new file mode 100644 index 000000000..31c712d55 --- /dev/null +++ b/packages/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "have-you-played-around-with-the-new-css-flexbox-or-grid-specs", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..e2dac9e62 --- /dev/null +++ b/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx @@ -0,0 +1,9 @@ +--- +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/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json b/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json new file mode 100644 index 000000000..d24aa6715 --- /dev/null +++ b/packages/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..533ff0e40 --- /dev/null +++ b/packages/quiz/how-can-you-share-code-between-files/en-US.mdx @@ -0,0 +1,15 @@ +--- +title: How can you share code between files? +--- + +This depends on the JavaScript environment. + +On the client (browser environment), as long as the variables/functions are declared in the global scope (`window`), all scripts can refer to them. Alternatively, adopt the Asynchronous Module Definition (AMD) via RequireJS for a more modular approach. + +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-can-you-share-code-between-files/metadata.json b/packages/quiz/how-can-you-share-code-between-files/metadata.json new file mode 100644 index 000000000..7e785f569 --- /dev/null +++ b/packages/quiz/how-can-you-share-code-between-files/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "how-can-you-share-code-between-files", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..3fc84be5b --- /dev/null +++ b/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx @@ -0,0 +1,14 @@ +--- +title: How do you organize your code? +subtitle: Do you use module pattern, classical inheritance, something else? +--- + +In the past, developers used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them. + +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-organize-your-code-module-pattern-classical-inheritance/metadata.json b/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/metadata.json new file mode 100644 index 000000000..7510484d8 --- /dev/null +++ b/packages/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "how-do-you-organize-your-code-module-pattern-classical-inheritance", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..9d295bb9b --- /dev/null +++ b/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx @@ -0,0 +1,20 @@ +--- +title: How do you serve a page with content in multiple languages? +--- + +> Assumption: The question is about how to serve a page with content available in multiple languages and the content within the page should be displayed only in one consistent language. + +Serving a page in different languages is one of the aspects of internationalization (i18n). + +When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the `Accept-Language` header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the `lang` attribute in the `` tag, such as `...`. + +To let a search engine know that the same content is available in different languages, `` tags with the `rel="alternate"` and `hreflang="..."` attributes should be used. E.g. ``. + +## Rendering + +- **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-a-page-with-content-in-multiple-languages/metadata.json b/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/metadata.json new file mode 100644 index 000000000..59dc972de --- /dev/null +++ b/packages/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "how-do-you-serve-a-page-with-content-in-multiple-languages", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html", + "i18n" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..4789c45d5 --- /dev/null +++ b/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: How do you serve your pages for feature-constrained browsers? +subtitle: What techniques/processes do you use? +--- + +## Techniques + +- Graceful degradation: The practice of building an application for modern browsers while ensuring it remains functional in older browsers. +- Progressive enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it. +- Use [caniuse.com](https://caniuse.com/) to check for feature support. +- 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-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json b/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json new file mode 100644 index 000000000..97094753f --- /dev/null +++ b/packages/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..f69c30289 --- /dev/null +++ b/packages/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.mdx @@ -0,0 +1,18 @@ +--- +title: How is responsive design different from adaptive design? +--- + +Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on. + +Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops. + +Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size. + +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-is-responsive-design-different-from-adaptive-design/metadata.json b/packages/quiz/how-is-responsive-design-different-from-adaptive-design/metadata.json new file mode 100644 index 000000000..441466977 --- /dev/null +++ b/packages/quiz/how-is-responsive-design-different-from-adaptive-design/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "how-is-responsive-design-different-from-adaptive-design", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..289931a66 --- /dev/null +++ b/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: How would you approach fixing browser-specific styling issues? +--- + +- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though. +- Use libraries like Bootstrap that already handles these styling issues for you. +- 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/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json b/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json new file mode 100644 index 000000000..aefba6ef4 --- /dev/null +++ b/packages/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "how-would-you-approach-fixing-browser-specific-styling-issues", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..fa1735287 --- /dev/null +++ b/packages/quiz/html5-as-an-open-web-platform-building-blocks/en-US.mdx @@ -0,0 +1,16 @@ +--- +title: Consider HTML5 as an open web platform. What are the building blocks of HTML5? +--- + +- **Semantics**: HTML tags describe the content. +- **Styling**: Customizing appearance of HTML tags +- **Connectivity**: Communicate with the server in new and innovative ways. +- **Offline and storage**: Allows webpages to store data on the client-side locally and operate offline more efficiently. +- **Multimedia**: Makes video and audio first-class citizens in the Open Web. +- **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/html5-as-an-open-web-platform-building-blocks/metadata.json b/packages/quiz/html5-as-an-open-web-platform-building-blocks/metadata.json new file mode 100644 index 000000000..34d1b292f --- /dev/null +++ b/packages/quiz/html5-as-an-open-web-platform-building-blocks/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "html5-as-an-open-web-platform-building-blocks", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..efa1d6052 --- /dev/null +++ b/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why? +--- + +`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/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json b/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json new file mode 100644 index 000000000..73883a578 --- /dev/null +++ b/packages/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css", + "performance" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..475036d63 --- /dev/null +++ b/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx @@ -0,0 +1,47 @@ +--- +title: What advantage is there for using the arrow syntax for a method in a constructor? +--- + +The main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, `this` will always refer to that object. For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log` that name, one as a regular function and one as an arrow function: + +```js +const Person = function (firstName) { + this.firstName = firstName; + this.sayName1 = function () { + console.log(this.firstName); + }; + this.sayName2 = () => { + console.log(this.firstName); + }; +}; + +const john = new Person('John'); +const dave = new Person('Dave'); + +john.sayName1(); // John +john.sayName2(); // John + +// The regular function can have its 'this' value changed, but the arrow function cannot +john.sayName1.call(dave); // Dave (because "this" is now the dave object) +john.sayName2.call(dave); // John + +john.sayName1.apply(dave); // Dave (because 'this' is now the dave object) +john.sayName2.apply(dave); // John + +john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object) +john.sayName2.bind(dave)(); // John + +var sayNameFromWindow1 = john.sayName1; +sayNameFromWindow1(); // undefined (because 'this' is now the window object) + +var sayNameFromWindow2 = john.sayName2; +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-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/metadata.json b/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/metadata.json new file mode 100644 index 000000000..6a10fd2f8 --- /dev/null +++ b/packages/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..704907add --- /dev/null +++ b/packages/quiz/what-are-data-attributes-good-for/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: What are `data-` attributes good for? +--- + +Before JavaScript frameworks became popular, developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for when there are no more appropriate attributes or elements. + +Another common use case for `data-` attributes is to store information used by third-party libraries or frameworks. For example, the Bootstrap library uses data attributes to cause ` +... + +``` + +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-data-attributes-good-for/metadata.json b/packages/quiz/what-are-data-attributes-good-for/metadata.json new file mode 100644 index 000000000..e4054ef50 --- /dev/null +++ b/packages/quiz/what-are-data-attributes-good-for/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "what-are-data-attributes-good-for", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html", + "testing" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..44bf85245 --- /dev/null +++ b/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx @@ -0,0 +1,27 @@ +--- +title: What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript? +--- + +Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript. + +## Advantages + +- Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns. +- Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which ES5 lacks, but ES2015 is awesome. +- Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time. + +## Disadvantages + +- Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers. +- Debugging can be a pain if your source maps do not map nicely to your pre-compiled source. +- Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects. +- Smaller community (depends on the language), which means resources, tutorials, libraries, and tooling would be harder to find. +- IDE/editor support might be lacking. +- These languages will always be behind the latest JavaScript standard. +- 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-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/metadata.json b/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/metadata.json new file mode 100644 index 000000000..f31f921f6 --- /dev/null +++ b/packages/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..33fafa969 --- /dev/null +++ b/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx @@ -0,0 +1,13 @@ +--- +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. + +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-some-of-the-gotchas-for-writing-efficient-css/metadata.json b/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/metadata.json new file mode 100644 index 000000000..d0a8c9b6a --- /dev/null +++ b/packages/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-are-some-of-the-gotchas-for-writing-efficient-css", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..e74b95ad9 --- /dev/null +++ b/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx @@ -0,0 +1,22 @@ +--- +title: What are the advantages and disadvantages of using Ajax? +--- + +## Advantages + +- Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page. +- Reduce connections to the server since scripts and stylesheets only have to be requested once. +- State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded. +- Basically most of the advantages of an SPA. + +## Disadvantages + +- Dynamic webpages are harder to bookmark. +- Does not work if JavaScript has been disabled in the browser. +- 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-and-disadvantages-of-using-ajax/metadata.json b/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/metadata.json new file mode 100644 index 000000000..0ac4769c0 --- /dev/null +++ b/packages/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "what-are-the-advantages-and-disadvantages-of-using-ajax", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript", + "network" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..776274489 --- /dev/null +++ b/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx @@ -0,0 +1,21 @@ +--- +title: What are the advantages/disadvantages of using CSS preprocessors? +--- + +## Advantages + +- CSS is made more maintainable. +- Easier to write nested selectors. +- Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables). +- Mixins to generate repeated CSS. +- Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose. +- Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file. + +## 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. + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/css-questions) diff --git a/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json b/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json new file mode 100644 index 000000000..3cef8d4c0 --- /dev/null +++ b/packages/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-are-the-advantages-disadvantages-of-using-css-preprocessors", + "languages": [], + "companies": [ + "linkedin" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..8fb3ad241 --- /dev/null +++ b/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx @@ -0,0 +1,43 @@ +--- +title: What are the benefits of using spread syntax and how is it different from rest syntax? +--- + +ES2015's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and RxJS projects. + +```js +function putDookieInAnyArray(arr) { + return [...arr, 'dookie']; +} + +const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"] + +const person = { + name: 'Todd', + age: 29, +}; + +const copyOfTodd = { ...person }; +``` + +ES2015's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments. + +```js +function addFiveToABunchOfNumbers(...numbers) { + return numbers.map((x) => x + 5); +} + +const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15] + +const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4] + +const { e, f, ...others } = { + e: 1, + f: 2, + g: 3, + 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-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/metadata.json b/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/metadata.json new file mode 100644 index 000000000..8376b3a39 --- /dev/null +++ b/packages/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..6766fc4df --- /dev/null +++ b/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx @@ -0,0 +1,51 @@ +--- +title: What are the differences between ES2015 class and ES5 function constructors? +--- + +Let's first look at example of each: + +```js +// ES5 Function Constructor +function Person(name) { + this.name = name; +} + +// ES2015 Class +class Person { + constructor(name) { + this.name = name; + } +} +``` + +For simple constructors, they look pretty similar. + +The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above. + +```js +// ES5 Function Constructor +function Student(name, studentId) { + // Call constructor of superclass to initialize superclass-derived members. + Person.call(this, name); + + // Initialize subclass's own members. + this.studentId = studentId; +} + +Student.prototype = Object.create(Person.prototype); +Student.prototype.constructor = Student; + +// ES2015 Class +class Student extends Person { + constructor(name, studentId) { + super(name); + this.studentId = studentId; + } +} +``` + +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-es6-class-and-es5-function-constructors/metadata.json b/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/metadata.json new file mode 100644 index 000000000..db6967396 --- /dev/null +++ b/packages/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-are-the-differences-between-es6-class-and-es5-function-constructors", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..97f88d1a1 --- /dev/null +++ b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx @@ -0,0 +1,79 @@ +--- +title: What are the differences between variables created using `let`, `var` or `const`? +--- + +Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop). + +```js +function foo() { + // All variables are accessible within functions. + var bar = 'bar'; + let baz = 'baz'; + const qux = 'qux'; + + console.log(bar); // bar + console.log(baz); // baz + console.log(qux); // qux +} + +console.log(bar); // ReferenceError: bar is not defined +console.log(baz); // ReferenceError: baz is not defined +console.log(qux); // ReferenceError: qux is not defined +``` + +```js +if (true) { + var bar = 'bar'; + let baz = 'baz'; + const qux = 'qux'; +} + +// var declared variables are accessible anywhere in the function scope. +console.log(bar); // bar +// let and const defined variables are not accessible outside of the block they were defined in. +console.log(baz); // ReferenceError: baz is not defined +console.log(qux); // ReferenceError: qux is not defined +``` + +`var` allows variables to be hoisted, meaning they can be referenced in code before they are declared. `let` and `const` will not allow this, instead throwing an error. + +```js +console.log(foo); // undefined + +var foo = 'foo'; + +console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization + +let baz = 'baz'; + +console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization + +const bar = 'bar'; +``` + +Redeclaring a variable with `var` will not throw an error, but `let` and `const` will. + +```js +var foo = 'foo'; +var foo = 'bar'; +console.log(foo); // "bar" + +let baz = 'baz'; +let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared +``` + +`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not. + +```js +// This is fine. +let foo = 'foo'; +foo = 'bar'; + +// This causes an exception. +const baz = 'baz'; +baz = 'qux'; +``` + +## 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/metadata.json b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/metadata.json new file mode 100644 index 000000000..356e60418 --- /dev/null +++ b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/metadata.json @@ -0,0 +1,16 @@ +{ + "slug": "what-are-the-differences-between-variables-created-using-let-var-or-const", + "languages": [], + "companies": [ + "microsoft" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..8faa7b8ba --- /dev/null +++ b/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx @@ -0,0 +1,75 @@ +--- +title: What are the different ways to visually hide content (and make it available only for screen readers)? +--- + +These techniques are related to accessibility (a11y). + +## Small/zero size + +`width: 1px; height: 1px` and a combination of using CSS clip to make the element take up (barely any) space on the screen at all. + +Using `width: 0; height; 0` is not recommended because search engines might penalize this thinking it has a malicious intention, like keyword stuffing. + +## Absolute positioning + +`position: absolute; left: -99999px` will position an element way outside of the screen. However, as per [WebAIM's article](https://webaim.org/techniques/css/invisiblecontent/): + +> Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus. + +Use this only when your contents contain only text. + +## Text indentation + +`text-indent: -9999px`. This only works on text within the `block` elements. Similar to the absolute positioning technique above, focusable elements given this style will still be focusable, causing confusion for sighted users who use keyboard navigation. + +## Incorrect ways + +The following ways are incorrect because they hide content from the user **AND** screen readers, which is incorrect if the purpose is to expose to screen readers only. + +- `display: none` +- `visibility: hidden` +- `hidden` attribute + +## Techniques in the wild + +Ideally, it is recommended to combine the above approaches to make sure it works properly in all browsers. + +Instead of implementing your own way to remove an element from the rendering tree and the a11y tree, you are recommended to use one of the following approaches from mature CSS frameworks, which have been battle-tested on many websites. + +### Tailwind CSS + +```css +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +``` + +### Bootstrap CSS + +```css +.visually-hidden, +.visually-hidden-focusable:not(:focus):not(:focus-within) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} +``` + +## 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-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json b/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json new file mode 100644 index 000000000..878f2df8e --- /dev/null +++ b/packages/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css", + "a11y" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..194686c39 --- /dev/null +++ b/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx @@ -0,0 +1,24 @@ +--- +title: What are the pros and cons of using Promises instead of callbacks? +--- + +## Pros + +- Avoid callback hell which can be unreadable. +- Makes it easy to write sequential asynchronous code that is readable with `.then()`. +- Makes it easy to write parallel asynchronous code with `Promise.all()`. +- With promises, these scenarios which are present in callbacks-only coding, will not happen: + - Call the callback too early + - Call the callback too late (or never) + - Call the callback too few or too many times + - Fail to pass along any necessary environment/parameters + - Swallow any errors/exceptions that may happen + +## Cons + +- 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-pros-and-cons-of-using-promises-instead-of-callbacks/metadata.json b/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/metadata.json new file mode 100644 index 000000000..b5202ce41 --- /dev/null +++ b/packages/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks", + "languages": [], + "companies": [ + "linkedin" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..785a725eb --- /dev/null +++ b/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What are the various clearing techniques and which is appropriate for what context? +--- + +- Empty `div` method: `
`. +- Clearfix method: Refer to the `.clearfix` class above. +- `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-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json b/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json new file mode 100644 index 000000000..c5215e0c9 --- /dev/null +++ b/packages/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..a958652bd --- /dev/null +++ b/packages/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What do you think of AMD vs CommonJS? +--- + +Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers. + +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-do-you-think-of-amd-vs-commonjs/metadata.json b/packages/quiz/what-do-you-think-of-amd-vs-commonjs/metadata.json new file mode 100644 index 000000000..6d7c4f00f --- /dev/null +++ b/packages/quiz/what-do-you-think-of-amd-vs-commonjs/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-do-you-think-of-amd-vs-commonjs", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/what-does-a-doctype-do/en-US.mdx b/packages/quiz/what-does-a-doctype-do/en-US.mdx new file mode 100644 index 000000000..a5247e731 --- /dev/null +++ b/packages/quiz/what-does-a-doctype-do/en-US.mdx @@ -0,0 +1,15 @@ +--- +title: What does a `DOCTYPE` do? +--- + +**DOCTYPE** is an abbreviation for **Document Type**. A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**. + +A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document _supposedly_ respects (i.e. this document respects the HTML DTD). + +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-a-doctype-do/metadata.json b/packages/quiz/what-does-a-doctype-do/metadata.json new file mode 100644 index 000000000..22919ec29 --- /dev/null +++ b/packages/quiz/what-does-a-doctype-do/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-does-a-doctype-do", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..953baa6e8 --- /dev/null +++ b/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx @@ -0,0 +1,28 @@ +--- +title: 'What does `* { box-sizing: border-box; }` do?' +subtitle: What are its advantages? +--- + +`* { box-sizing: border-box; }` makes every element on the page use the `box-sizing: border-box` approach for calculating the elements `height` and `width`. + +## What's the difference? + +By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for if an element has `height` and `width` specified. `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation. The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width. The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width. + +The following table indicates whether the property is included in the element's calculation of height and width when it has the respective `box-sizing`: + +| Property | `box-sizing: content-box` (default) | `box-sizing: border-box` | +| --------- | ----------------------------------- | ------------------------ | +| content | Yes | Yes | +| `padding` | No | Yes | +| `border` | No | Yes | +| `margin` | No | No | + +## Advantages + +Taking into account `padding`s and `border`s as part of the box model resonates better with how designers actually imagine content in grids. This is a much more intuitive way to think about boxes and hence many CSS frameworks set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. + +## 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-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json b/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json new file mode 100644 index 000000000..92f1e53c0 --- /dev/null +++ b/packages/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-does-box-sizing-border-box-do-what-are-its-advantages", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "featured": true, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..958d43fa6 --- /dev/null +++ b/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx @@ -0,0 +1,12 @@ +--- +title: What existing CSS frameworks have you used locally, or in production? +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-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json b/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json new file mode 100644 index 000000000..8447c76c5 --- /dev/null +++ b/packages/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..bcd9e56ce --- /dev/null +++ b/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx @@ -0,0 +1,14 @@ +--- +title: What is a closure, and how/why would you use one? +--- + +A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned. + +## Why would you use one? + +- 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-a-closure-and-how-why-would-you-use-one/metadata.json b/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/metadata.json new file mode 100644 index 000000000..55513f303 --- /dev/null +++ b/packages/quiz/what-is-a-closure-and-how-why-would-you-use-one/metadata.json @@ -0,0 +1,19 @@ +{ + "slug": "what-is-a-closure-and-how-why-would-you-use-one", + "languages": [], + "companies": [ + "amazon", + "linkedin", + "microsoft", + "salesforce" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "featured": false +} \ No newline at end of file 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 new file mode 100644 index 000000000..9285a7bb5 --- /dev/null +++ b/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx @@ -0,0 +1,20 @@ +--- +title: What is CSS selector specificity and how does it work? +--- + +The browser determines what styles to show on an element depending on the specificity of CSS rules. We assume that the browser has already determined the rules that match a particular element. Among the matching rules, the specificity, four comma-separate values, `a, b, c, d` are calculated for each rule based on the following: + +1. `a` is whether inline styles are being used. If the property declaration is an inline style on the element, `a` is 1, else 0. +1. `b` is the number of ID selectors. +1. `c` is the number of classes, attributes and pseudo-classes selectors. +1. `d` is the number of tags and pseudo-elements selectors. + +The resulting specificity is not a single numerical score, but an array of values that can be compared column by column. When comparing selectors to determine which has the highest specificity, look from left to right, and compare the highest value in each column. So a value in column `b` will override values in columns `c` and `d`, no matter what they might be. As such, specificity of `0, 1, 0, 0` would be greater than one of `0, 0, 10, 10`. + +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-css-selector-specificity-and-how-does-it-work/metadata.json b/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/metadata.json new file mode 100644 index 000000000..434f8db08 --- /dev/null +++ b/packages/quiz/what-is-css-selector-specificity-and-how-does-it-work/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-is-css-selector-specificity-and-how-does-it-work", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "featured": false, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..494fd0874 --- /dev/null +++ b/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx @@ -0,0 +1,12 @@ +--- +title: What is event loop? +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-event-loop-what-is-the-difference-between-call-stack-and-task-queue/metadata.json b/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/metadata.json new file mode 100644 index 000000000..96e777277 --- /dev/null +++ b/packages/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue", + "languages": [], + "companies": [ + "salesforce" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file diff --git a/packages/quiz/what-is-progressive-rendering/en-US.mdx b/packages/quiz/what-is-progressive-rendering/en-US.mdx new file mode 100644 index 000000000..f4ffc5b98 --- /dev/null +++ b/packages/quiz/what-is-progressive-rendering/en-US.mdx @@ -0,0 +1,32 @@ +--- +title: What is progressive rendering? +--- + +Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible. + +It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)! + +## Lazy loading of images + +Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image. + +- `` is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them. +- Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position). + +## 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/). + +## Other modern techniques + +- [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-progressive-rendering/metadata.json b/packages/quiz/what-is-progressive-rendering/metadata.json new file mode 100644 index 000000000..9c4cc3fc7 --- /dev/null +++ b/packages/quiz/what-is-progressive-rendering/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-is-progressive-rendering", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..ccb020b0b --- /dev/null +++ b/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx @@ -0,0 +1,25 @@ +--- +title: What is the CSS `display` property and can you give a few examples of its use? +--- + +The common values for the `display` property: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`. + +| `display` Value | Description | +| :-- | :-- | +| `none` | Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree. | +| `block` | The element consumes the whole line in the block direction (which is usually horizontal). | +| `inline` | Elements can be laid out beside each other. | +| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height`. | +| `flex` | Behaves as a block-level `flex` container, which can be manipulated using flexbox model. | +| `grid` | Behaves as a block-level `grid` container using grid layout. | +| `table` | Behaves like the `` element. | +| `table-row` | Behaves like the `` element. | +| `table-cell` | Behaves like the `
` element. | +| `list-item` | Behaves like a `
  • ` element which allows it to define `list-style-type` and `list-style-position`. | + +For a complete list of values for the `display` property, refer to [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/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-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json b/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json new file mode 100644 index 000000000..ad8c66721 --- /dev/null +++ b/packages/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "featured": false, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..1a42da306 --- /dev/null +++ b/packages/quiz/what-is-the-definition-of-a-higher-order-function/en-US.mdx @@ -0,0 +1,39 @@ +--- +title: What is the definition of a higher-order function? +--- + +A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind` is one such example in JavaScript. + +## Map + +Let say we have an array of names which we need to transform each string to uppercase. + +```js +const names = ['irish', 'daisy', 'anna']; +``` + +The imperative way will be as such: + +```js +const transformNamesToUppercase = function (names) { + const results = []; + for (let i = 0; i < names.length; i++) { + results.push(names[i].toUpperCase()); + } + return results; +}; +transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] +``` + +Use `.map(transformerFn)` makes the code shorter and more declarative. + +```js +const transformNamesToUppercase = function (names) { + return names.map((name) => name.toUpperCase()); +}; +transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/what-is-the-definition-of-a-higher-order-function/metadata.json b/packages/quiz/what-is-the-definition-of-a-higher-order-function/metadata.json new file mode 100644 index 000000000..4415c619c --- /dev/null +++ b/packages/quiz/what-is-the-definition-of-a-higher-order-function/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-is-the-definition-of-a-higher-order-function", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..2f3a9fec3 --- /dev/null +++ b/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx @@ -0,0 +1,26 @@ +--- +title: What is the difference between `==` and `===`? +--- + +`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as: + +```js +1 == '1'; // true +1 == [1]; // true +1 == true; // true +0 == ''; // true +0 == '0'; // true +0 == false; // true +``` + +As a general rule of thumb, never use the `==` operator, except for convenience when comparing against `null` or `undefined`, where `a == null` will return `true` if `a` is `null` or `undefined`. + +```js +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-difference-between-double-equal-and-triple-equal/metadata.json b/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/metadata.json new file mode 100644 index 000000000..856602184 --- /dev/null +++ b/packages/quiz/what-is-the-difference-between-double-equal-and-triple-equal/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "what-is-the-difference-between-double-equal-and-triple-equal", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..1acf1cd48 --- /dev/null +++ b/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: What is the extent of your experience with Promises and/or their polyfills? +--- + +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-the-extent-of-your-experience-with-promises-andor-their-polyfills/metadata.json b/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/metadata.json new file mode 100644 index 000000000..a6df9a994 --- /dev/null +++ b/packages/quiz/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..a997a1db1 --- /dev/null +++ b/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx @@ -0,0 +1,28 @@ +--- +title: What is `"use strict";`? +subtitle: What are the advantages and disadvantages to using it? +--- + +`'use strict'` is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript. + +## Advantages + +- Makes it impossible to accidentally create global variables. +- Makes assignments which would otherwise silently fail to throw an exception. +- Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect). +- Requires that function parameter names be unique. +- `this` is `undefined` in the global context. +- It catches some common coding bloopers, throwing exceptions. +- It disables features that are confusing or poorly thought out. + +## Disadvantages + +- Many missing features that some developers might be used to. +- No more access to `function.caller` and `function.arguments`. +- 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-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/metadata.json b/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/metadata.json new file mode 100644 index 000000000..db19ba6bd --- /dev/null +++ b/packages/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..178d07c13 --- /dev/null +++ b/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx @@ -0,0 +1,107 @@ +--- +title: What language constructions do you use for iterating over object properties and array items? +--- + +## Objects + +### `for...in` statement + +```js +for (const property in obj) { + console.log(property); +} +``` + +The `for...in` statement iterates over all the object's **enumerable** properties (including inherited enumerable properties). Hence most of the time you should should check whether the property exists on directly on the object via `Object.hasOwn(object, property)` before using it. + +```js +for (const property in obj) { + if (Object.hasOwn(obj, property)) { + console.log(property); + } +} +``` + +Note that `obj.hasOwnProperty()` is not recommended because it doesn't work for objects created using `Object.create(null)`. It is recommended to use [`Object.hasOwn()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) in newer browsers, or use the good old `Object.prototype.hasOwnProperty.call(object, key)`. + +### `Object.keys()` + +```js +Object.keys(obj).forEach((property) => { + console.log(property); +}); +``` + +`Object.keys()` is a static method that will return an array of all the enumerable property names of the object that you pass it. Since `Object.keys()` returns an array, you can also use the array iteration approaches listed below to iterate through it. + +_Reference: [Object.keys() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)_ + +### `Object.getOwnPropertyNames()` + +```js +Object.getOwnPropertyNames(obj).forEach((property) => { + console.log(property); +}); +``` + +`Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it. Since `Object.getOwnPropertyNames()` returns an array, you can also use the array iteration approaches listed below to iterate through it. + +_Reference: [Object.getOwnPropertyNames() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)_ + +## Arrays + +### `for` loop + +```js +for (var i = 0; i < arr.length; i++) { + console.log(arr[i]); +} +``` + +A common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use `let` over `var`. + +```js +for (let i = 0; i < arr.length; i++) { + console.log(arr[i]); +} +``` + +### `Array.prototype.forEach()` + +```js +arr.forEach((element, index) => { + console.log(element, index); +}); +``` + +The `Array.prototype.forEach()` method can be more convenient at times if you do not need to use the `index` and all you need is the individual array elements. However, the downside is that you cannot stop the iteration halfway and the provided function will be executed on the elements once. A `for` loop or `for...of` statement is more relevant if you need finer control over the iteration. + +_Reference: [Array.prototype.forEach() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)_ + +### `for...of` statement + +```js +for (let element of arr) { + console.log(element); +} +``` + +ES2015 introduces a new way to iterate, the `for-of` loop, that allows you to loop over objects that conform to the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) such as `String`, `Array`, `Map`, `Set`, etc. It combines the advantages of the `for` loop and the `forEach()` method. The advantage of the `for` loop is that you can break from it, and the advantage of `forEach()` is that it is more concise than the `for` loop because you don't need a counter variable. With the `for...of` statement, you get both the ability to break from a loop and a more concise syntax. + +Most of the time, prefer the `.forEach` method, but it really depends on what you are trying to do. Before ES2015, we used `for` loops when we needed to prematurely terminate the loop using `break`. But now with ES2015, we can do that with `for...of` statement. Use `for` loops when you need more flexibility, such as incrementing the iterator more than once per loop. + +Also, when using the `for...of` statement, if you need to access both the index and value of each array element, you can do so with ES2015 `Array.prototype.entries()` method: + +```js +const arr = ['a', 'b', 'c']; + +for (let [index, elem] of arr.entries()) { + console.log(index, ': ', elem); +} +``` + +_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-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/metadata.json b/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/metadata.json new file mode 100644 index 000000000..daf0a7a96 --- /dev/null +++ b/packages/quiz/what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..f7a9d63f7 --- /dev/null +++ b/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: What tools and techniques do you use for debugging JavaScript code? +--- + +- JavaScript + - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d) + - `debugger` statement + - Traditional `console.log()` debugging +- React and Redux + - [React Devtools](https://github.com/facebook/react-devtools) + - [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/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/metadata.json b/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/metadata.json new file mode 100644 index 000000000..ab59ffab9 --- /dev/null +++ b/packages/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "what-tools-and-techniques-do-you-use-for-debugging-javascript-code", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..6b92340a2 --- /dev/null +++ b/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx @@ -0,0 +1,33 @@ +--- +title: What's a typical use case for anonymous functions? +--- + +They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope. + +```js +(function () { + // Some code here. +})(); +``` + +As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body. + +```js +setTimeout(function () { + console.log('Hello world!'); +}, 1000); +``` + +Arguments to functional programming constructs or Lodash (similar to callbacks). + +```js +const arr = [1, 2, 3]; +const double = arr.map(function (el) { + return el * 2; +}); +console.log(double); // [2, 4, 6] +``` + +## References + +- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/javascript-questions) diff --git a/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/metadata.json b/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/metadata.json new file mode 100644 index 000000000..b13ea3b48 --- /dev/null +++ b/packages/quiz/whats-a-typical-use-case-for-anonymous-functions/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "whats-a-typical-use-case-for-anonymous-functions", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..fc21ac8df --- /dev/null +++ b/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx @@ -0,0 +1,15 @@ +--- +title: What's the difference between a `relative`, `fixed`, `absolute` and `static`-ally positioned element? +--- + +A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`. + +- `static`: The default position; the element will flow into the page as it normally would. The `top`, `right`, `bottom`, `left` and `z-index` properties do not apply. +- `relative`: The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). +- `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-relative-fixed-absolute-and-statically-positioned-element/metadata.json b/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/metadata.json new file mode 100644 index 000000000..31f35c2b2 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/metadata.json @@ -0,0 +1,17 @@ +{ + "slug": "whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element", + "languages": [], + "companies": [ + "salesforce" + ], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "featured": false, + "ranking": 2 +} \ No newline at end of file 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 new file mode 100644 index 000000000..1188704d1 --- /dev/null +++ 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 @@ -0,0 +1,46 @@ +--- +title: "What's the difference between a variable that is: `null`, `undefined` or undeclared?" +subtitle: How would you go about checking for any of these states?" +--- + +**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block. + +```js +function foo() { + x = 1; // Throws a ReferenceError in strict mode +} + +foo(); +console.log(x); // 1 +``` + +A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the abstract equality operator to check, as it will also return `true` if the value is `null`. + +```js +var foo; +console.log(foo); // undefined +console.log(foo === undefined); // true +console.log(typeof foo === 'undefined'); // true + +console.log(foo == null); // true. Wrong, don't use this to check! + +function bar() {} +var baz = bar(); +console.log(baz); // undefined +``` + +A variable that is `null` will have been explicitly assigned to the `null` value. It represents no value and is different from `undefined` in the sense that it has been explicitly assigned. To check for `null,` simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (`==`) to check, as it will also return `true` if the value is `undefined`. + +```js +var foo = null; +console.log(foo === null); // true +console.log(typeof foo === 'object'); // true + +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-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/metadata.json 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/metadata.json new file mode 100644 index 000000000..01605b7c7 --- /dev/null +++ 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/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..0111edaaf --- /dev/null +++ b/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx @@ -0,0 +1,22 @@ +--- +title: What's the difference between an "attribute" and a "property"? +--- + +Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: ``. + +```js +const input = document.querySelector('input'); +console.log(input.getAttribute('value')); // Hello +console.log(input.value); // Hello +``` + +But after you change the value of the text field by adding "World!" to it, this becomes: + +```js +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-an-attribute-and-a-property/metadata.json b/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/metadata.json new file mode 100644 index 000000000..92174325e --- /dev/null +++ b/packages/quiz/whats-the-difference-between-an-attribute-and-a-property/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "whats-the-difference-between-an-attribute-and-a-property", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..3bf8b0d15 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-call-and-apply/en-US.mdx @@ -0,0 +1,18 @@ +--- +title: What's the difference between `.call` and `.apply`? +--- + +Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments. + +```js +function add(a, b) { + return 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-call-and-apply/metadata.json b/packages/quiz/whats-the-difference-between-call-and-apply/metadata.json new file mode 100644 index 000000000..f35274931 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-call-and-apply/metadata.json @@ -0,0 +1,15 @@ +{ + "slug": "whats-the-difference-between-call-and-apply", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "high", + "difficulty": "medium", + "featured": false, + "ranking": 1 +} \ No newline at end of file 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 new file mode 100644 index 000000000..3ed79b9ac --- /dev/null +++ b/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx @@ -0,0 +1,37 @@ +--- +title: What's the difference between feature detection, feature inference, and using the UA string? +--- + +## Feature Detection + +Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example: + +```js +if ('geolocation' in navigator) { + // Can use navigator.geolocation +} else { + // Handle lack of feature +} +``` + +[Modernizr](https://modernizr.com/) is a great library to handle feature detection. + +## Feature Inference + +Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.: + +```js +if (document.getElementsByTagName) { + element = document.getElementById(id); +} +``` + +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-feature-detection-feature-inference-and-using-the-ua-string/metadata.json b/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/metadata.json new file mode 100644 index 000000000..3a20a0530 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..a171a76f2 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/en-US.mdx @@ -0,0 +1,11 @@ +--- +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-host-objects-and-native-objects/metadata.json b/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/metadata.json new file mode 100644 index 000000000..fb29d2552 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-host-objects-and-native-objects/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "whats-the-difference-between-host-objects-and-native-objects", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..7ad4356a3 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-inline-and-inline-block/en-US.mdx @@ -0,0 +1,18 @@ +--- +title: What's the difference between `inline` and `inline-block`? +--- + +Let's also compare with `display: block` for completeness sake. + +| | `block` | `inline-block` | `inline` | +| --- | --- | --- | --- | +| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. | +| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it. | +| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. | +| 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-inline-and-inline-block/metadata.json b/packages/quiz/whats-the-difference-between-inline-and-inline-block/metadata.json new file mode 100644 index 000000000..c203631d9 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-inline-and-inline-block/metadata.json @@ -0,0 +1,14 @@ +{ + "slug": "whats-the-difference-between-inline-and-inline-block", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "high", + "difficulty": "medium", + "ranking": 2 +} \ No newline at end of file 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 new file mode 100644 index 000000000..afbc41176 --- /dev/null +++ b/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: What's the difference between "resetting" and "normalizing" CSS? +subtitle: Which would you choose, and why? +--- + +| Term | Definition | +| --- | --- | +| **Resetting** | Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements. | +| **Normalizing** | Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies. | + +## 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/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json b/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json new file mode 100644 index 000000000..ca11ccb6a --- /dev/null +++ b/packages/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "css" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..25be0ea98 --- /dev/null +++ b/packages/quiz/when-would-you-use-document-write/en-US.mdx @@ -0,0 +1,11 @@ +--- +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/when-would-you-use-document-write/metadata.json b/packages/quiz/when-would-you-use-document-write/metadata.json new file mode 100644 index 000000000..33bc27fdd --- /dev/null +++ b/packages/quiz/when-would-you-use-document-write/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "when-would-you-use-document-write", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..ab6cb332e --- /dev/null +++ b/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx @@ -0,0 +1,11 @@ +--- +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-extending-built-in-javascript-objects-not-a-good-idea/metadata.json b/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/metadata.json new file mode 100644 index 000000000..79ceed5fe --- /dev/null +++ b/packages/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "why-is-extending-built-in-javascript-objects-not-a-good-idea", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..840945d96 --- /dev/null +++ b/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: Why is it called a Ternary expression, what does the word "Ternary" indicate? +--- + +"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-called-a-ternary-expression-what-does-the-word-ternary-indicate/metadata.json b/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/metadata.json new file mode 100644 index 000000000..163bb2ddc --- /dev/null +++ b/packages/quiz/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..9a41b31d8 --- /dev/null +++ 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 @@ -0,0 +1,9 @@ +--- +title: Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it? +--- + +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-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/metadata.json 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/metadata.json new file mode 100644 index 000000000..0868c8e23 --- /dev/null +++ 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/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..c7199989b --- /dev/null +++ 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 @@ -0,0 +1,12 @@ +--- +title: Why would you use something like the `load` event? +subtitle: Does this event have disadvantages? Do you know any alternatives, and why would you use those? +--- + +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-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/metadata.json 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/metadata.json new file mode 100644 index 000000000..c93d63e30 --- /dev/null +++ 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/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "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", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..0e29511a4 --- /dev/null +++ b/packages/quiz/why-you-might-want-to-create-static-class-members/en-US.mdx @@ -0,0 +1,9 @@ +--- +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-might-want-to-create-static-class-members/metadata.json b/packages/quiz/why-you-might-want-to-create-static-class-members/metadata.json new file mode 100644 index 000000000..d75711e10 --- /dev/null +++ b/packages/quiz/why-you-might-want-to-create-static-class-members/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "why-you-might-want-to-create-static-class-members", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "javascript" + ], + "importance": "low", + "difficulty": "medium" +} \ No newline at end of file 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 new file mode 100644 index 000000000..173aa84a4 --- /dev/null +++ b/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx @@ -0,0 +1,20 @@ +--- +title: Why you would use a `srcset` attribute in an image tag? +subtitle: Explain the process the browser uses when evaluating the content of this attribute. +--- + +You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made: + +- 500 / 320 = 1.5625 +- 1000 / 320 = 3.125 +- 2000 / 320 = 6.25 + +If the client's resolution is 1x, 1.5625 is the closest, and `500w` corresponding to `small.jpg` will be selected by the browser. + +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) diff --git a/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json b/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json new file mode 100644 index 000000000..ba3ab5a9e --- /dev/null +++ b/packages/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json @@ -0,0 +1,13 @@ +{ + "slug": "why-you-would-use-a-srcset-attribute-in-an-image-tag", + "languages": [], + "companies": [], + "premium": false, + "duration": 5, + "published": true, + "topics": [ + "html" + ], + "importance": "mid", + "difficulty": "medium" +} \ No newline at end of file