` 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` |
+| `display` | Description |
+| :-- | :-- |
+| `none` | Does not display an element (the elementv 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` |
+| `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` |
[[↑] Back to top](#css-questions)
@@ -416,14 +416,14 @@ The box model has the following rules:
I shall throw in a comparison with `block` for good measure.
-| | `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. |
+| | `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. |
[[↑] Back to top](#css-questions)
diff --git a/contents/en/questions/html-questions.md b/contents/en/questions/html-questions.md
index 690da01ce..65a0b6caf 100644
--- a/contents/en/questions/html-questions.md
+++ b/contents/en/questions/html-questions.md
@@ -16,14 +16,11 @@ Answers to [Front-end Job Interview Questions - HTML Questions](https://github.c
### What does a DOCTYPE do?
-**DOCTYPE** is an abbreviation for **DOCument TYPE**.
-A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.
+**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**.
+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 ``.
@@ -102,14 +99,14 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
-| | `cookie` | `localStorage` | `sessionStorage` |
-| -------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
-| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
-| Expiry | Manually set | Forever | On tab close |
-| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
-| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
-| Capacity (per domain) | 4kb | 5MB | 5MB |
-| Accessibility | Any window | Any window | Same tab |
+| | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
+| Expiry | Manually set | Forever | On tab close |
+| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
+| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
+| Capacity (per domain) | 4kb | 5MB | 5MB |
+| Accessibility | Any window | Any window | Same tab |
_Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any `cookie`, `localStorage`, or `sessionStorage` stored. It's important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions)._
diff --git a/contents/en/questions/javascript-questions.md b/contents/en/questions/javascript-questions.md
index dbf492f02..364b250ce 100644
--- a/contents/en/questions/javascript-questions.md
+++ b/contents/en/questions/javascript-questions.md
@@ -104,26 +104,26 @@ This is an extremely common JavaScript interview question. All JavaScript object
We already have a build-in `Object.create`, but if you were to provide a polyfill for it, that might look like:
```javascript
-if (typeof Object.create !== "function") {
- Object.create = function(parent) {
+if (typeof Object.create !== 'function') {
+ Object.create = function (parent) {
function Tmp() {}
Tmp.prototype = parent;
return new Tmp();
};
}
-const Parent = function() {
- this.name = "Parent";
+const Parent = function () {
+ this.name = 'Parent';
};
-Parent.prototype.greet = function() {
- console.log("hello from Parent");
+Parent.prototype.greet = function () {
+ console.log('hello from Parent');
};
const child = Object.create(Parent.prototype);
-child.cry = function() {
- console.log("waaaaaahhhh!");
+child.cry = function () {
+ console.log('waaaaaahhhh!');
};
child.cry();
@@ -156,7 +156,7 @@ child.constructor.name
```javascript
function Child() {
Parent.call(this);
- this.name = "child";
+ this.name = 'child';
}
Child.prototype = Parent.prototype;
@@ -240,7 +240,7 @@ A variable that is `undefined` is a variable that has been declared, but not ass
var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
-console.log(typeof foo === "undefined"); // true
+console.log(typeof foo === 'undefined'); // true
console.log(foo == null); // true. Wrong, don't use this to check!
@@ -254,7 +254,7 @@ A variable that is `null` will have been explicitly assigned to the `null` value
```js
var foo = null;
console.log(foo === null); // true
-console.log(typeof foo === "object"); // true
+console.log(typeof foo === 'object'); // true
console.log(foo == undefined); // true. Wrong, don't use this to check!
```
@@ -310,7 +310,7 @@ const doubled = a.forEach((num, index) => {
```js
const a = [1, 2, 3];
-const doubled = a.map(num => {
+const doubled = a.map((num) => {
return num * 2;
});
@@ -330,7 +330,7 @@ The main difference between `.forEach` and `.map()` is that `.map()` returns a n
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() {
+(function () {
// Some code here.
})();
```
@@ -338,8 +338,8 @@ They can be used in IIFEs to encapsulate some code within a local scope so that
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!");
+setTimeout(function () {
+ console.log('Hello world!');
}, 1000);
```
@@ -347,7 +347,7 @@ Arguments to functional programming constructs or Lodash (similar to callbacks).
```js
const arr = [1, 2, 3];
-const double = arr.map(function(el) {
+const double = arr.map(function (el) {
return el * 2;
});
console.log(double); // [2, 4, 6]
@@ -395,11 +395,11 @@ function Person(name) {
this.name = name;
}
-var person = Person("John");
+var person = Person('John');
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
-var person = new Person("John");
+var person = new Person('John');
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"
```
@@ -459,7 +459,7 @@ There are some answers online that explain `document.write()` is being used in a
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) {
+if ('geolocation' in navigator) {
// Can use navigator.geolocation
} else {
// Handle lack of feature
@@ -543,7 +543,7 @@ JSONP works by making a request to a cross-origin domain via a ` | |
- 
+