From 264f6cf7d8284c2f8f4c6ed8e0f57e5a9bf959d3 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Wed, 17 Jan 2018 00:24:03 -0800
Subject: [PATCH] Remove Front End

---
 front-end/accessibility.md       |  201 -----
 front-end/browser.md             |   59 --
 front-end/caching.md             |   14 -
 front-end/css.md                 |   34 -
 front-end/design.md              |   14 -
 front-end/dom.md                 |  102 ---
 front-end/html.md                |   18 -
 front-end/interview-questions.md | 1306 +-----------------------------
 front-end/javascript.md          |  108 ---
 front-end/networking.md          |   11 -
 front-end/performance.md         |   66 --
 front-end/security.md            |  110 ---
 front-end/widgets.md             |   56 --
 13 files changed, 2 insertions(+), 2097 deletions(-)
 delete mode 100644 front-end/accessibility.md
 delete mode 100644 front-end/browser.md
 delete mode 100644 front-end/caching.md
 delete mode 100644 front-end/css.md
 delete mode 100644 front-end/design.md
 delete mode 100644 front-end/dom.md
 delete mode 100644 front-end/html.md
 delete mode 100644 front-end/javascript.md
 delete mode 100644 front-end/networking.md
 delete mode 100644 front-end/performance.md
 delete mode 100644 front-end/security.md
 delete mode 100644 front-end/widgets.md

diff --git a/front-end/accessibility.md b/front-end/accessibility.md
deleted file mode 100644
index e6f61451..00000000
--- a/front-end/accessibility.md
+++ /dev/null
@@ -1,201 +0,0 @@
-Accessibility
-==
-
-## Glossary
-
-- **Accessibility** -
-- **WAI-ARIA** - Web Accessibility Initiative - Accessible Rich Internet Applications. Commonly shortened to ARIA.
-
-## What is Accessibility?
-
-Making sure that the content and the websites we create are usable to people with impairments or disabilities.
-
-## WebAIM Checklist
-
-The following is a checklist that contains recommendations for implementing HTML-related principles and techniques for those seeking WCAG 2.0 conformance (it is NOT the Web Content Accessibility Guidelines (WCAG) 2.0).
-
-- **Perceivable** - Web content is made available to the senses - sight, hearing, and/or touch.
-  - Text Alternatives: Provide text alternatives for any non-text content.
-  - Time-based Media: Provide alternatives for time-based media.
-  - Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
-  - Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
-- **Operable** - Interface forms, controls, and navigation are operable.
-  - Keyboard Accessible: Make all functionality available from a keyboard.
-  - Enough Time: Provide users enough time to read and use content.
-  - Seizures: Do not design content in a way that is known to cause seizures.
-  - Navigable: Provide ways to help users navigate, find content, and determine where they are.
-- **Understandable** - Content and interface are understandable.
-  - Readable: Make text content readable and understandable.
-  - Predictable: Make Web pages appear and operate in predictable ways.
-  - Input Assistance: Help users avoid and correct mistakes.
-- **Robust** - Content can be used reliably by a wide variety of user agents, including assistive technologies.
-  - Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
-
-**Source:** http://webaim.org/standards/wcag/checklist
-
-## Focus
-
-- Making sure your application has a sensible tab order is important.
-- HTML forms and inputs are focusable and handle keyboard events by default.
-- Focus tab order relies on the DOM order in the HTML.
-- Be careful when using CSS when changing the order of elements on the screen, it can cause the order to be unintuitive and messy.
-- `tabindex` attribute:
-  - `-1`: Not in the natural tab order, but programatically focusable using JavaScript with `focus()` method. Useful for off-screen content which later appears on screen. Children elements are **NOT** pulled out of the tab order.
-  - `0`: In the natural tab order and can be programatically focused.
-  - `1` (bigger than 1): In the natural tab order but jumped in front of the tab order regardless of where it is in the DOM. It can be considered an anti-pattern.
-- Add focus behavior to interactive controls, like buttons, tabs, dropdowns, stuff that users will interactive with.
-- Use skip links to allow users to skip directly to the main content without having to tab through all the navigation.
-- `document.activeElement` is useful in tracking the current element that has focus on.
-
-## Semantics
-
-- Using proper labeling not only helps accessibility but it makes the element easier to target for all users!
-- Use `<label>` with `for` attributes for form elements.
-- Use `alt` attribute for `<img>` elements. Alt text must describe the image.
-- TODO
-
-## Navigating Content
-
-- MacOS comes built-in with VoiceOver. Press <kbd>CMD</kbd> + <kbd>F5</kbd> to activate.
-  - Activate Web Rotor with <kbd>Ctrl</kbd> + <kbd>Option</kbd> + <kbd>U</kbd>. Web Rotor displays landmarks, headings, links and more on the page and allows you to jump to them directly.
-- Heading weight should be decided by its importance on the page and not how big it should look, as the heading tag chosen affects the order the headings are listed on screen readers.
-- Use HTML5 semantic tags like `<main>`, `<nav>`, `<header>`, `<aside>`, `<article>`, `<section>`, `<footer>` to indicate landmarks on the page.
-
-## ARIA
-
-- Express semantics that HTML can't express on its own.
-- Accessibility tree = DOM + ARIA.
-- ARIA attributes
-  - Allow us to modify the accessibility tree before they are exposed to assistive technologies.
-  - DO NOT modify the element appearance.
-  - DO NOT modify element behaviour.
-  - DO NOT add focusability.
-  - DO NOT add keyboard event handling.
-- E.g. for custom checkboxes, adding ARIA attributes is not sufficient, you will need to write your own JavaScript to emulate the native behaviour to synchronize the ARIA attributes and values with the actual visual state, such as toggling using clicks and hitting spacebar. It's probably not worth it to reinvent the wheel by writing your own custom widgets that already exist in HTML5.
-- ARIA can add semantics to elements that have no native semantics, such as `<div>`. ARIA can also modify element semantics.
-- ARIA allows developers to create accessible widgets that do not exist in HTML5, such as a tree widget.
-- `aria-role` attributes tell assistive technologies that the element should follow that role's accessibility patterns. There are well-defined roles in the HTML spec. Do not define them on your own.
-  - `tabindex="0"` is usually added to it elements that have `role` added so that it can be focused.
-- Assistive labelling
-  - `aria-label` is useful for labelling buttons where the content is empty or contains only icons.
-  - `aria-labelledby` is similar to `<label>` elements, and can be used on any elements.
-    ```html
-    /* Normal label example */
-    <input type="radio" id="coffee-label">
-    <label for="coffee-label">Coffee</label>
-
-    /* aria-labelledby example */
-    <div role="radio" aria-labelledby="coffee-label"></div>
-    <span id="coffee-label">Coffee</span>
-    ```
-- ARIA Relationships
-  - ARIA relationship attributes create semantic relationships between elements on the page. The `aria-labelledby` attribute in the previous example indicates that the `<div>` is labelled by the element with that `id`.
-  - Possible relationship attributes include `aria-activedescendent`, `aria-describedby`, `aria-labelledby`, `aria-owns`, `aria-posinset` and `aria-setsize`.
-- With ARIA, you can expose only relevant parts of the page to accessibility tree. Elements can be hidden via:
-  - Setting `visibility`: `<button style="visibility: hidden">`.
-  - Setting `display`: `<button style="display: none">`.
-  - HTML5 `hidden` attribute: `<span hidden>`. This makes the element hidden to everyone.
-  - `aria-hidden` attribute: `<div aria-hidden="true">`. This makes the element hidden to screenreaders too. Note that `aria-hidden` attribute requires an explicit value of `true` or `false`.
-- Technique for screenreader-only text:
-  ```
-  .screenreader {
-    position: absolute;
-    left: -1000px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  }
-  ```
-- `aria-live` attribute can be used to grab the assistive technology's attention to cause it to announce updates to the user. Practically, include `aria-live` attributes in the initial page load. The different `aria-live` values include:
-  - `off` (default) - Updates will not be presented unless the region is currently focused.
-  - `polite` - Assistive technologies should announce updates at the next graceful opportunity, such as at the end of speaking the current sentence on when the user pauses typing. Such as receiving new chat messages.
-  - `assertive` - Highest priority and assistive technologies should notify the user immediately. Examples include server status error alerts.
-- `aria-atomic` attribute indicates whether the entire region should be presented as a whole when communicating updates. Such as a date widget comprising of multiple `<input>` fields for day/month/year. When the user changes a field, the full contents of the widget will be read out. It takes in a `true` or `false` value.
-- `aria-relevant` attribute indicates what types of changes should be presented to the user.
-  - `additions` - Element nodes are added to the DOM within the live region.
-  - `removals` - Text or element nodes within the live region are removed from the DOM.
-  - `text` - Text is added to any DOM descendant nodes of the live region.
-  - `all` - Equivalent to the combination of all values, `additions removals text`.
-  - `additions text` (default) - Equivalent to the combination of values, `additions text`.
-- `aria-busy` attribute indicates the assistive technologies should ignore changes to the element, such as when things are loading, for example after a temporary connectivity loss. It takes in `true` or `false`. It takes in a `true` or `false` value.
-
-## Style
-
-#### Introduction
-
-- Ensure elements are styled to support the existing accessibility work, such as adding styles for `:focus` and the various ARIA states.
-- Flexible user interface that can handle being zoomed or scaled up, for users who have trouble reading smaller text.
-- Color choices and the importance of contrast, making sure we are not conveying information just with color alone.
-
-#### Focus
-
-- As much as possible, leave the default focus in place. Do not remove the `:focus` styling just because it does not fit into your design or looks odd! - A good technique is to use a similar styling as `:hover` for `:focus`.
-- Some CSS resets would kill off the focus styling, so it's important to be aware of them and get them back.
-
-#### Styling with ARIA
-
-Consider using ARIA attributes in your CSS selectors to reduce some noise in your CSS. For custom toggle buttons, instead of doing this,
-
-```html
-<div class="toggle pressed" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle.pressed {
-  ...
-}
-```
-
-you can do this instead:
-
-```html
-<div class="toggle" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle[aria-pressed="true"] {
-  ...
-}
-```
-
-which removes the need for toggling the `press` class on the element.
-
-#### Responsive Design
-
-Responsive design is also beneficial for accessibility when zooming the page transforms the page into the mobile layout instead.
-
-Use a meta viewport tag:
-
-```
-<meta name="viewport" content="width=device-width initial-scale="1">
-```
-
-`user-scalable=no` is an anti-pattern for accessibility.
-
-Use relative units like `%`, `em` and `rem`. The differences are as follows:
-
-- `%` - Relative to the containing block.
-- `em` - Relative to the `font-size` of the parent.
-- `rem` - Relative to the `font-size` of the root, which is the `<html>` element.
-
-Interactive interface elements such as buttons should be large enough, have enough spacing around itself so that they do not overlap with other interactive elements.
-
-#### Color and Contrast
-
-Contrast ratio is the ratio of luminance between the foreground color (such as text) and the background color. For text and images, aim for a large contrast ratio of 7:1 and for larger text (over 18 point or 14 point bold), aim for at least 4.5:1.
-
-Chrome Devtools has an Accessibility audit feature that can flag the contrast issues on your page.
-
-Color should not be used as the sole method of conveying content or distinguishing visual elements, such as only changing the `border-color` of `<input>` fields that have error to red. These changes will not be obvious/visible to people with color blindness. An error message below the field will be helpful.
-
-Some users might be using a High Contrast mode which allows a user to invert the background and foreground colors to read text better. Ensure that your page also looks fine on High Contrast mode which you can simulate with a [Chrome High Contrast extension](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en).
-
-#### Assessing Impact of Accessibility Issues
-
-Fixing accessibility issues is like fixing bugs; it is best looked at through the lens of impact. How can you have the most impact on users with the least amount of effort?
-
-- How frequent is this piece of UI used? Is it part of a critical flow?
-- How badly does this accessibility issue affect your users?
-- How expensive is it going to cost to fix?
-
-###### References
-
-- https://www.udacity.com/course/web-accessibility--ud891
diff --git a/front-end/browser.md b/front-end/browser.md
deleted file mode 100644
index 8ace1b82..00000000
--- a/front-end/browser.md
+++ /dev/null
@@ -1,59 +0,0 @@
-Browser
-==
-
-## Glossary
-
-- **BOM** - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The `window` object is one of them.
-- **CSSOM** - CSS Object Model.
-- **DOM** - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents.
-- **Reflow** - When the changes affect document contents or structure, or element position, a reflow (or relayout) happens.
-- **Repaint** - When changing element styles which don't affect the element's position on a page (such as `background-color`, `border-color`, `visibility`), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening).
-- **Composite** - TODO
-
-## Rendering
-
-High level flow of how browsers render a webpage:
-
-1. DOM
-  - The DOM (Document Object Model) is formed from the HTML that is received from a server.
-  - Characters -> Tokens -> Nodes -> DOM.
-  - DOM construction is incremental.
-  - CSS and JS are requested as the respective `<link>` and `<script>` tags are encountered.
-1. CSSOM
-  - Styles are loaded and parsed, forming the CSSOM (CSS Object Model).
-  - Characters -> Tokens -> Nodes -> CSSOM.
-  - CSSOM construction is not incremental.
-  - Browser blocks page rendering until it receives and processes all the CSS.
-  - CSS is render blocking.
-1. Render Tree
-  - On top of DOM and CSSOM, a render tree is created, which is a set of objects to be rendered. Render tree reflects the DOM structure except for invisible elements (like the <head> tag or elements that have `display: none`; set). Each text string is represented in the rendering tree as a separate renderer. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
-1. Layout
-  - For each render tree element, its coordinates are calculated, which is called "layout". Browsers use a flow method which only required one pass to layout all the elements (tables require more than one pass).
-1. Painting
-  - Finally, this gets actually displayed in a browser window, a process called "painting".
-
-###### References
-
-- http://taligarsiel.com/Projects/howbrowserswork1.htm
-- https://medium.freecodecamp.org/its-not-dark-magic-pulling-back-the-curtains-from-your-stylesheets-c8d677fa21b2
-
-## Repaint
-
-When changing element styles which don't affect the element's position on a page (such as `background-color`, `border-color`, `visibility`), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening).
-
-## Reflow
-
-When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:
-- DOM manipulation (element addition, deletion, altering, or changing element order)
-- Contents changes, including text changes in form fields
-- Calculation or altering of CSS properties
-- Adding or removing style sheets
-- Changing the "class" attribute
-- Browser window manipulation (resizing, scrolling); Pseudo-class activation (`:hover`)
-
-#### References
-
-- [How Browsers Work](http://taligarsiel.com/Projects/howbrowserswork1.htm)
-- [What Every Frontend Developer Should Know About Webpage Rendering](http://frontendbabel.info/articles/webpage-rendering-101/)
-- [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
-- [Building the DOM faster: speculative parsing, async, defer and preload](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/)
diff --git a/front-end/caching.md b/front-end/caching.md
deleted file mode 100644
index cea2dbd9..00000000
--- a/front-end/caching.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Caching
-==
-
-WIP.
-
-## Glossary
-
-- **Cookies**
-
-#### References
-
-- [A Tale of Four Caches](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/)
-- [Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies](https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies)
-- [This browser tweak saved 60% of requests to Facebook](https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/)
diff --git a/front-end/css.md b/front-end/css.md
deleted file mode 100644
index d2a034a3..00000000
--- a/front-end/css.md
+++ /dev/null
@@ -1,34 +0,0 @@
-CSS
-==
-
-CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
-
-However, the encapsulation of styles that these methodologies bring about are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.
-
-As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to [partially solve some of the problems](https://speakerdeck.com/vjeux/react-css-in-js) with writing CSS at scale. "At scale" means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing [CSS in JS](https://github.com/MicheleBertoli/css-in-js) at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, I would recommend [CSS Modules](https://github.com/css-modules/css-modules). CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.
-
-If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www.codecademy.com/learn/learn-html-css) will be a good introduction to you. Next, read up on the [Sass preprocessor](http://sass-lang.com/), an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.
-
-## Glossary
-
-- [**Box Model**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - 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.
-- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. 
-  - When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. It only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
-  - Typically used in type selectors/pseduo elements (`h1`, `div`, `:before`), class/attribute selectors (`.btn`, `[type="radio"]`), pseudo-classes (`:hover`) and ID selectors (`#someElement`).
-  - Inline styles added to an element always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
-  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks  the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
-- [**Positioning**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - The position CSS property determines how an element will be positioned in a document. The `top`, `right`, `bottom`, and `left` properties would later determine the final location of said positioned element.
-  - Initial value: `static`
-  - Values that are frequently used: `relative`, `absolute`, `fixed`, `sticky`
-- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal *flow* of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
-  - Initial value: `none`
-  - Values that are frequently used: `left`, `right`, `inline-start`, `inline-end`.
-  - Additional Notes: Usually, there would be cases that you may want to move an item below any floated elements. E.g, you may want some elements like your paragraphs to remain adjacent to floats, but force headings and footers to be on their own line. See [`clear` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) for more examples
-
-## Writing CSS without Side Effects
-
-TODO
-
-###### References
-
-- https://philipwalton.com/articles/side-effects-in-css/
diff --git a/front-end/design.md b/front-end/design.md
deleted file mode 100644
index cef9c972..00000000
--- a/front-end/design.md
+++ /dev/null
@@ -1,14 +0,0 @@
-Design Questions
-==
-
-## Autocomplete Widget
-
-Talk me through a full stack implementation of an autocomplete widget. A user can type text into it, and get back results from a server.
-- How would you design a frontend to support the following features:
-  - Fetch data from a backend API
-  - Render results as a tree (items can have parents/children - it's not just a flat list)
-  - Support for checkbox, radio button, icon, and regular list items - items come in many forms
-- What does the component's API look like?
-- What does the backend API look like?
-- What perf considerations are there for complete-as-you-type behavior? Are there any edge cases (for example, if the user types fast and the network is slow)?
-- How would you design the network stack and backend in support of fast performance: how do your client/server communicate? How is your data stored on the backend? How do these approaches scale to lots of data and lots of clients?
diff --git a/front-end/dom.md b/front-end/dom.md
deleted file mode 100644
index e6671939..00000000
--- a/front-end/dom.md
+++ /dev/null
@@ -1,102 +0,0 @@
-DOM
-==
-
-## Glossary
-
-- **Event Delegation** - Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.
-
-## Node API
-
-Here's a list of the essential and more common DOM `Node` APIs. It is important to know how to traverse and manipulate the DOM in vanilla JS without jQuery.
-
-**Properties**
-
-- `Node.childNodes` - Returns a live `NodeList` containing all the children of this node. `NodeList` being live means that if the children of the Node change, the `NodeList` object is automatically updated.
-- `Node.firstChild`
-- `Node.lastChild`
-- `Node.nextSibling` - Returns a `Node` representing the next node in the tree, or `null` if there isn't such a node.
-- `Node.nodeName` - `DIV`, `SPAN`, etc. Note that it is in upper case in HTML documents, and has the same value as `Element.tagName`.
-- `Node.parentNode` - Returns a `Node` that is the parent of this node. If there is no such node, like if this node is the top of the tree or if it doesn't participate in a tree, this property returns `null`.
-- `Node.parentElement` - Returns an `Element` that is the parent of this node. If the node has no parent, or if that parent is not an `Element`, this property returns `null`.
-- `Node.previousSibling` - Returns a `Node` representing the previous node in the tree, or `null` if there isn't such a node.
-- `Node.textContent` - Returns / Sets the textual content of an element and all its descendants.
-
-**Methods**
-
-- `Node.appendChild(node)` - Adds the specified `node` argument as the last child to the current node. If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
-- `Node.cloneNode(node)` - Clone a `Node`, and optionally, all of its contents. By default, it clones the content of the node.
-- `Node.contains(node)` - Returns a `Boolean` value indicating whether a node is a descendant of a given node or not.
-- `Node.hasChildNodes()` - Returns a `Boolean` indicating if the element has any child nodes, or not.
-- `Node.insertBefore(newNode, referenceNode)` - Inserts the first `Node` before the reference node as a child of the current node. If `referenceNode` is `null`, the `newNode` is inserted at the end of the list of child nodes.
-- `Node.removeChild(node)` - Removes a child node from the current element, which must be a child of the current node.
-- `Node.replaceChild(newChild, oldChild)` - Replaces one child node of the specified node with another node.
-
-## Element API
-
-Here's a list of the essential and more common DOM `Element` APIs. It is important to know how to traverse and manipulate the DOM in vanilla JS without jQuery.
-
-**Properties**
-
-- `Element.attributes` - Returns a `NamedNodeMap` object containing the assigned attributes of the corresponding HTML element.
-- `Element.classList` - Returns a `DOMTokenList` containing the list of class attributes.
-  - `DOMTokenList.add(String [, String])` - Add specified class values. If these classes already exist in attribute of the element, they are ignored.
-  - `DOMTokenList.remove(String [, String])` - Remove specified class values.
-  - `DOMTokenList.toggle(String [, force])` - Toggle specified class value. If second argument is present and evaluates to `true`, add the class value, else remove it.
-  - `DOMTokenList.contains(String)` - Checks if specified class value exists in class attribute of the element.
-- `Element.className` - A `DOMString` representing the class of the element.
-- `Element.id`
-- `Element.innerHTML` - Returns a `DOMString` representing the markup of the element's content or parse the content string and assigns the resulting nodes as children of the element.
-- `Element.tagName` - `DIV`, `SPAN`, etc. Note that it is in upper case in HTML documents, and has the same value as `Node.nodeName`.
-
-**Methods**
-
-- `EventTarget.addEventListener(type, callback, options)` - Registers an event handler to a specific event type on the element. Read up more on the `options` [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
-- `EventTarget.removeEventListener(type, callback, options)` - Removes an event listener from the element. Read up more on the `options` [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener).
-- `Element.closest(selectors)` - Returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns `null`.
-- `Element.getElementsByClassName(classNames)`- Returns a live `HTMLCollection` that contains all descendants of the current element that possess the list of classes given in the parameter.
-- `Element.getElementsByTagName(tagName)` - Returns a live `HTMLCollection` containing all descendant elements, of a particular tag name, from the current element.
-- `Element.querySelector(selectors)` - Returns the first `Node` which matches the specified selector string relative to the element.
-- `Element.querySelectorAll(selectors)` - Returns a `NodeList` of nodes which match the specified selector string relative to the element.
-- `ChildNode.remove()` - Removes the element from the children list of its parent. TODO: Check whether it's `Element` or `ChildNode`.
-- `Element.setAttribute(attrName, value)` - Sets the value of a named attribute of the current node.
-- `Element.removeAttribute(attrName)` - Removes the named attribute from the current node.
-
-## Document API
-
-- `document.getElementById(id)` - An Element object, or null if an element with the specified ID is not in the document.
-
-## Window/Document Events
-
-- `document.addEventListener('DOMContentLoaded', callback)`
-  - The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Similar to `jQuery.ready()` but different because `$.ready` will execute immediately if the `DOMContentLoaded` event has already fired.
-  - This corresponds to `document.readyState === 'interactive'`.
-- `window.onload = function() {}`
-  - `window`'s `load` event is only fired after the DOM and all assets have loaded.
-  - This corresponds to `document.readyState === 'complete'`.
-
-## Questions
-
-**What's the difference between `Node.children` and `Node.childNodes`?**
-
-`Node.children` returns a live `HTMLCollection` of the child `elements` of `Node`. `Node.childNodes` returns a `NodeList`, an ordered collection of DOM nodes that are children of the current `Element`. `childNodes` includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use `Node.children` instead.
-
-**What's the difference between `NodeList` and `HTMLCollection`?**
-
-A `NodeList` can contain any node type, but an `HTMLCollection` is supposed to only contain `Element` nodes. `HTMLCollection` is always live and is a superset of `NodeList`. `NodeList` need not be live.
-
-**How do you convert an `HTMLCollection` or `NodeList` into an array?**
-
-```js
-const nodelist = document.querySelectorAll('div');
-// Array.from
-const divArray = Array.from(nodelist);
-// Array.prototype.slice
-const divArray2 = Array.prototype.slice.call(nodelist); // or .apply
-// ES2015 Spread
-const divArray3 = [...nodeList];
-```
-
-## References
-
-- https://developer.mozilla.org/en-US/docs/Web/API/Node
-- https://developer.mozilla.org/en-US/docs/Web/API/Element
diff --git a/front-end/html.md b/front-end/html.md
deleted file mode 100644
index 97034e16..00000000
--- a/front-end/html.md
+++ /dev/null
@@ -1,18 +0,0 @@
-HTML
-==
-
-HTML (Hypertext Markup Language) is the structure that all websites are built on. Anyone working on websites and webapps should have a basic understanding of HTML at the very least. A helpful analogy for understanding the importance of HTML is the house scenario. When building a new house, the process can be split into a few key areas; structure (HTML), aesthetics (CSS) and furniture (Content). The HTML is your basic page structure, without the structure, you cannot change how it looks using CSS, or what content is on the page.
-
-## Glossary
-
-- **Doctype**
-
-## Deprecated Tags
-
-There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them. 
-
-## Script Loading
-
-- `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
-- `<script async>` - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use `async` when the script is independent of any other scripts on the page, for example analytics.
-- `<script defer>` - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document.
diff --git a/front-end/interview-questions.md b/front-end/interview-questions.md
index ad68ee0e..8374975d 100644
--- a/front-end/interview-questions.md
+++ b/front-end/interview-questions.md
@@ -1,1305 +1,3 @@
-Front-end Job Interview Questions
-==
+# Front-end Job Interview Questions
 
-Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.
-
-While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be [Front-end Job Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, I couldn't find many complete and satisfactory answers for these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.
-
-## Table of Contents
-
-  1. [HTML Questions](#html-questions)
-  1. [CSS Questions](#css-questions)
-  1. [JS Questions](#js-questions)
-
-## HTML Questions
-
-Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions). Pull requests for suggestions and corrections are welcome!
-
-### What does a `doctype` do?
-
-`doctype` is an abbreviation for document type. It is a declaration used in HTML5 to distinguish between a standards-compliant parsing mode and a quirks parsing mode. Hence its presence tells the browser to parse and render the webpage in standards mode.
-
-Moral of the story - just add `<!DOCTYPE html>` at the start of your page.
-
-###### References
-
-- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
-- https://www.w3.org/QA/Tips/Doctype
-
-### What's the difference between full standards mode, almost standards mode and quirks mode?
-
-- **Quirks mode** - Layout emulates non-standard behavior in Netscape Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. The list of quirks can be found [here](https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior).
-- **Full standards mode** - The layout behavior is the one described by the HTML and CSS specifications.
-- **Almost standards mode** - There are only a very small number of quirks implemented. Differences can be found [here](https://developer.mozilla.org/en-US/docs/Gecko's_Almost_Standards_Mode).
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
-
-### What's the difference between HTML and XHTML?
-
-XHTML belongs to the family of XML markups languages and is different from HTML. Some of differences are as follows:
-
-- XHTML documents have to be well-formed, unlike HTML, which is more forgiving.
-- XHTML is case-sensitive for element and attribute names, while HTML is not.
-- Raw `<` and `&` characters are not allowed except inside of `CDATA` Sections (`<![CDATA[ ... ]]>`). JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections, such as the `<` operator. Hence it is tricky to use inline `styles` or `script` tags in XHTML and should be avoided.
-- A fatal parse error in XML (such as an incorrect tag structure) causes document processing to be aborted.
-
-Full list of differences can be found on [Wikipedia](https://en.wikipedia.org/wiki/XHTML#Relationship_to_HTML).
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_
-- https://en.wikipedia.org/wiki/XHTML
-
-### Are there any problems with serving pages as `application/xhtml+xml`?
-
-Basically the problems lie in the differences between parsing HTML and XML as mentioned above.
-
-- XHTML, or rather, XML syntax is less forgiving and if your page isn't fully XML-compliant, there will be parsing errors and users get unreadable content.
-- Serving your pages as `application/xhtml+xml` will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode#XHTML
-
-### How do you serve a page with content in multiple languages?
-
-The question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
-
-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 `<html>` tag, such as `<html lang="en">...</html>`.
-
-In the back end, the HTML markup will contain `i18n` placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
-
-###### References
-
-- https://www.w3.org/International/getting-started/language
-
-### What kind of things must you be wary of when designing or developing for multilingual sites?
-
-- Use `lang` attribute in your HTML.
-- Directing users to their native language - Allow a user to change his country/language easily without hassle.
-- Text in images is not a scalable approach - Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However to translate image text, each string of text will need to have it's a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.
-- Restrictive words / sentence length - Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free flowing text such as body text or comments.
-- Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures. The design should use color appropriately.
-- Formatting dates and currencies - Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe.
-- Do not concatenate translated strings - Do not do anything like `"The date today is " + date`. It will break in languages with different word order. Using template parameters instead.
-- Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
-
-###### References
-
-- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-### What are `data-` attributes good for?
-
-Before JavaScript frameworks became popular, front end 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 which there are no more appropriate attributes or elements.
-
-These days, using `data-` attributes is 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 itself and stay updated with the DOM via data binding possibly through a library or a framework.
-
-###### References
-
-- http://html5doctor.com/html5-custom-data-attributes/
-- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
-
-- Semantics - Allowing you to describe more precisely what your content is.
-- Connectivity - Allowing you to communicate with the server in new and innovative ways.
-- Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently.
-- Multimedia - Making video and audio first-class citizens in the Open Web.
-- 2D/3D graphics and effects - Allowing a much more diverse range of presentation options.
-- Performance and integration - Providing greater speed optimization and better usage of computer hardware.
-- Device access - Allowing for the usage of various input and output devices.
-- Styling - Letting authors write more sophisticated themes.
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
-
-### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
-
-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 |
-| Have domain associated | Yes | No | 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 |
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-- http://tutorial.techaltum.com/local-and-session-storage.html
-
-### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
-
-- `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
-- `<script async>` - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use `async` when the script is independent of any other scripts on the page, for example analytics.
-- `<script defer>` - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document. If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing. There's not much difference from putting a normal `<script>` at the end of `<body>`. A deferred script must not contain `document.write`.
-
-Note: The `async` and `defer` attrib­utes are ignored for scripts that have no `src` attribute.
-
-###### References
-
-- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-- https://stackoverflow.com/questions/10808109/script-tag-async-defer
-- https://bitsofco.de/async-vs-defer/
-
-### Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
-
-**Placing `<link>`s in the `<head>`**
-
-Putting `<link>`s in the head is part of the specification. Besides that, placing at the top allows the page to render progressively which improves user experience. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is stuck viewing a blank white page. It prevents the flash of unstyled contents.
-
-**Placing `<script>`s just before `</body>`**
-
-`<script>`s block HTML parsing while they are being downloaded and executed. Downloading the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
-
-An exception for positioning of `<script>`s at the bottom is when your script contains `document.write()`, but these days it's not a good practice to use `document.write()`. Also, placing `<script>`s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. One possible workaround is to put `<script>` in the `<head>` and use the `defer` attribute.
-
-###### References
-
-- https://developer.yahoo.com/performance/rules.html#css_top
-
-### What is progressive rendering?
-
-Progressive rendering is the name given to techniques used to improve 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 useful in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
-
-Examples of such techniques:
-
-- Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
-- Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
-- Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
-
-###### References
-
-- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-### Have you used different HTML templating languages before?
-
-Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
-
-### Other Answers
-
-- https://neal.codes/blog/front-end-interview-questions-html/
-- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
-## CSS Questions
-
-Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#css-questions). Pull requests for suggestions and corrections are welcome!
-
-### What is the difference between classes and IDs in CSS?
-
-- **IDs** - Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one `id` attribute.
-- **Classes** - Can be reused on multiple elements within the document. Mainly for styling and targeting elements.
-
-###### References
-- https://www.w3.org/TR/CSS1/#id-as-selector
-- https://www.w3.org/TR/CSS1/#class-as-selector
-
-### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
-
-- **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.
-
-I would choose resetting when I have very a customized or unconventional site design such that I need to do a lot of my own styling do not need any default styling to be preserved.
-
-###### References
-
-- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
-
-### Describe `float`s and how they work.
-
-Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
-
-The CSS `clear` property can be used to be positioned below `left`/`right`/`both` floated elements.
-
-If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
-
-The `.clearfix` hack uses a clever CSS pseudo selector (`:after`) to clear floats. Rather than setting the overflow on the parent, you apply an additional class `clearfix` to it. Then apply this CSS:
-
-```css
-.clearfix:after {
-  content: ' ';
-  visibility: hidden;
-  display: block;
-  height: 0;
-  clear: both;
-}
-```
-
-Alternatively, give `overflow: auto` or `overflow: hidden` property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
-
-###### References
-
-- https://css-tricks.com/all-about-floats/
-
-### Describe `z-index` and how stacking context is formed.
-
-The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only effects elements that have a `position` value which is not `static`.
-
-Without any `z-index` value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.
-
-A stacking context is an element that contains a set of layers. Within a local stacking context, the `z-index` values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher `z-index` than element B.
-
-Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform that is not `none`.
-
-###### References
-
-- https://css-tricks.com/almanac/properties/z/z-index/
-- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-### Describe Block Formatting Context (BFC) and how it works.
-
-A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
-
-A BFC is an HTML box that satisfies at least one of the following conditions:
-
-- The value of `float` is not `none`.
-- The value of `position` is neither `static` nor `relative`.
-- The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`.
-- The value of `overflow` is not `visible`.
-
-In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
-
-Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/).
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
-
-### What are the various clearing techniques and which is appropriate for what context?
-
-- Empty `div` method - `<div style="clear:both;"></div>`.
-- 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, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
-
-### Explain CSS sprites, and how you would implement them on a page or site.
-
-CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it). How to implement it:
-
-1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
-1. Each image would have a corresponding CSS class with `background-image`, `background-position` and `background-size` properties defined.
-1. To use that image, add the corresponding class to your element.
-
-**Advantages:**
-
-- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
-- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
-
-###### References
-
-- https://css-tricks.com/css-sprites/
-
-### What are your favorite image replacement techniques and which do you use when?
-
-CSS image replacement is a technique of replacing a text element (usually a header tag like an `<h1>`) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.
-
-It's not really relevant these days. Check out the link below for all the available techniques.
-
-###### References
-
-- https://css-tricks.com/the-image-replacement-museum/
-
-### 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.
-
-### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
-
-- 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/).
-
-### What are the different ways to visually hide content (and make it available only for screen readers)?
-
-These techniques are related to accessibility (a11y).
-
-- `visibility: hidden`. However the element is still in the flow of the page, and still takes up space.
-- `width: 0; height: 0`. Make the element not take up any space on the screen at all, resulting in not showing it.
-- `position: absolute; left: -99999px`. Position it outside of the screen.
-- `text-indent: -9999px`. This only works on text within the `block` elements.
-- Metadata. For example by using Schema.org, RDF and JSON-LD.
-- WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
-
-Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioning approach, as it has the least caveats, works for most elements and it's an easy technique.
-
-###### References
-
-- https://www.w3.org/TR/wai-aria-1.1/
-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
-- http://a11yproject.com/
-
-### Have you ever used a grid system, and if so, what do you prefer?
-
-I like the `float`-based grid system because it still has the most browser support among the alternative existing systems (flex, grid). It has been used in Bootstrap for years and has been proven to work.
-
-### Have you used or implemented media queries or mobile-specific layouts/CSS?
-
-Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
-
-### Are you familiar with styling SVG?
-
-No... Sadly.
-
-### How do you optimize your webpages for print?
-
-- Create a stylesheet for print or use media queries.
-
-```html
-<!-- Main stylesheet on top -->
-<link rel="stylesheet" href="/global.css" media="all" />
-<!-- Print only, on bottom -->
-<link rel="stylesheet" href="/print.css" media="print" />
-```
-
-Make sure to put non-print styles inside `@media screen { ... }`.
-
-```css
-@media print {
-  ...
-}
-```
-
-- Deliberately add page breaks.
-
-```html
-<style>
-.page-break {
-  display: none;
-  page-break-before: always;
-}
-</style>
-
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...
-<div class="page-break"></div>
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
-```
-
-###### References
-
-- https://davidwalsh.name/optimizing-structure-print-css
-
-### 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 numbers 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 reflow, repaint and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
-
-###### References
-
-- https://developers.google.com/web/fundamentals/performance/rendering/
-- https://csstriggers.com/
-
-### What are the advantages/disadvantages of using CSS preprocessors?
-
-**Advantages:**
-
-- CSS is made more maintainable.
-- Easy to write nested selectors.
-- Variables for consistent theming. Can share theme files across different projects.
-- Mixins to generate repeated CSS.
-- Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
-
-**Disadvantages:**
-
-- Requires tools for preprocessing. Re-compilation time can be slow.
-
-### Describe what you like and dislike about the CSS preprocessors you have used.
-
-**Likes:**
-
-- Mostly the advantages mentioned above.
-- Less is written in JavaScript, which plays well with Node.
-
-**Dislikes:**
-
-- I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
-- In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
-
-### How would you implement a web design comp that uses non-standard fonts?
-
-Use `@font-face` and define `font-family` for different `font-weight`s.
-
-### Explain how a browser determines what elements match a CSS selector.
-
-This part is related to the above about writing efficient CSS. 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.
-
-For example with this selector `p span`, browsers firstly find all the `<span>` elements, and traverse up its parent all the way up to the root to find the `<p>` element. For a particular `<span>`, as soon as it finds a `<p>`, it knows that the `<span>` matches and can stop its matching.
-
-###### References
-
-- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
-
-### Describe pseudo-elements and discuss what they are used for.
-
-A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`:first-line`, `:first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
-
-- `:first-line` and `:first-letter` can be used to decorate text.
-- Used in the `.clearfix` hack as shown above to add a zero-space element with `clear: both`.
-- Triangular arrows in tooltips use `:before` and `:after`. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM. It's not really possible to draw a triangle with just CSS styles without using an additional HTML element.
-
-###### References
-
-- https://css-tricks.com/almanac/selectors/a/after-and-before/
-
-### 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.
-
-The box model has the following rules:
-
-- The dimensions of a block element are calculated by `width`, `height`, `padding`, `border`s, and `margin`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 below).
-- If no `width` is specified, a non-floated block element will expand to fit the width of its parent minus `padding`.
-- 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, `padding`s and `border`s are not part of the `width` and `height` of an element.
-
-###### References
-
-- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
-
-### What does `* { box-sizing: border-box; }` do? What are its advantages?
-
-- By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.
-- `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.
-
-### List as many values for the `display` property that you can remember.
-
-- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
-
-### What's the difference between `inline` and `inline-block`?
-
-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. | Flows along with other content and allows other elements beside. |
-| 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. |
-
-### 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
-
-- https://developer.mozilla.org/en/docs/Web/CSS/position
-
-### The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
-
-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.
-2. `b` is the number of ID selectors.
-3. `c` is the number of classes, attributes and pseudo-classes selectors.
-4. `d` is the number of tags and pseudo-elements selectors.
-
-The resulting specificity is not a score, but a matrix 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 style sheet (regardless of internal or external) twice, then the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.
-
-I would 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
-
-- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
-- https://www.sitepoint.com/web-foundations/specificity/
-
-### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
-
-- **Bootstrap** - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely-used.
-- **Semantic UI** - Source code structure makes theme customization extremely hard to understand. Painful to customize with unconventional theming system. 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.
-
-### Have you played around with the new CSS Flexbox or Grid specs?
-
-Yes. 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. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using `flex-grow`, and I had to rewrite my code using `inline-blocks` and math to calculate the widths in percentages, it wasn't a nice experience.
-
-Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
-
-###### References
-
-- https://philipwalton.github.io/solved-by-flexbox/
-
-### 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.
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
-- http://mediumwell.com/responsive-adaptive-mobile/
-- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
-
-### Have you ever worked with retina graphics? If so, when and what techniques did you use?
-
-I tend to use higher resolution graphics (twice the display size) to handle retina display. The better way would be to use a media query like `@media only screen and (min-device-pixel-ratio: 2) { ... }` and change the `background-image`.
-
-For icons, I would also opt to use svgs and icon fonts where possible, as they render very crisply regardless of resolution.
-
-Another method would be to use JavaScript to replace the `<img>` `src` attribute with higher resolution versions after checking the `window.devicePixelRatio` value.
-
-###### References
-
-- https://www.sitepoint.com/css-techniques-for-retina-displays/
-
-### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
-
-`translate()` is a value of CSS `transform`. Changing `transform` or `opacity` does not trigger browser reflow or repaint, only compositions, whereas 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.
-
-When using `translate()`, the element still takes up its original space (sort of like `position: relative`), unlike in changing the absolute positioning.
-
-###### References
-
-- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
-
-### Other Answers
-
-- https://neal.codes/blog/front-end-interview-css-questions
-- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
-- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
-## JS Questions
-
-Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#js-questions). Pull requests for suggestions and corrections are welcome!
-
-### Explain event delegation
-
-Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
-
-- Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
-- There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
-
-###### References
-
-- https://davidwalsh.name/event-delegate
-- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
-
-### 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. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be 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.
-2. 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.
-3. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of.
-4. 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.
-5. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
-6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created.
-
-For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
-
-###### References
-
-- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-- https://stackoverflow.com/a/3127440/1751946
-
-### Explain how prototypal inheritance works
-
-This is an extremely common JavaScript interview question. All JavaScript objects have a `prototype` property, that is a reference to another object. 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 `prototype`, and the `prototype`'s `prototype` and so on, until it finds the property defined on one of the `prototype`s or until it reaches the end of the prototype chain. This behaviour simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
-
-###### References
-
-- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
-- https://davidwalsh.name/javascript-objects
-
-### 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.
-
-I find AMD syntax to be quite verbose and CommonJS is closer to the style you would write import statements in other languages. Most of the time, I find AMD 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 style of writing modules and there is less context-switching overhead when switching between client side and server side JavaScript development.
-
-I'm glad that with ES2015 modules, that has support for both synchronous and asynchronous loading, we can finally just stick to one approach. Although it hasn't been fully rolled out in browsers and in Node, we can always use transpilers to convert our code.
-
-###### References
-
-- https://auth0.com/blog/javascript-module-systems-showdown/
-- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
-
-### 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 brackets) 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 brackets: `(function foo(){ })()` and `(function foo(){ }())`. 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.
-
-###### References
-
-- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
-
-### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
-
-**Undeclared** variables are created when you assign to 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(foo == undefined); // true. Wrong, don't use this to check!
-```
-
-As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign `null` to them after declaring, if I don't intend to use it yet.
-
-###### References
-
-- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
-- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
-
-### 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
-
-- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
-- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
-
-### 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
-
-- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
-- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
-
-### How do you organize your code? (module pattern, classical inheritance?)
-
-In the past, I 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, I use the Flux architecture based on React/Redux which encourages a single-directional functional programming approach instead. I would represent my app's models 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.
-
-I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
-
-### 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
-
-- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
-
-### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
-
-This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is use PascalCase for functions that are intended to be used as constructors.
-
-`var person = Person()` invokes the `Person` as a function, and not as a constructor. Invoking as such is a common mistake if it the function is intended to be used as a constructor. Typically, the constructor does not return anything, hence invoking the constructor like a normal function will return `undefined` and that gets assigned to the variable intended as the instance.
-
-`var person = new Person()` creates an instance of the `Person` object using the `new` operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)`.
-
-```js
-function Person(name) {
-  this.name = name;
-}
-
-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');
-console.log(person); // Person { name: "John" }
-console.log(person.name); // "john"
-```
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
-
-### 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 a 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 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
-```
-
-### Explain `Function.prototype.bind`.
-
-Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
-
-> The `bind()` method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
-
-In my experience, it is most useful for binding the value of `this` in methods of classes that you want to pass into other functions. This is frequently done in React components.
-
-###### References
-
-- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
-
-### 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 (`<head>` and `<body>` removed!) and replaces the contents with the given parameter value in string. 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, I suspect those reasons might be outdated and in the modern day, they can be achieved without using `document.write()`. Please do correct me if I'm wrong about this.
-
-###### References
-
-- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
-- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
-
-### 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 dependent 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
-
-- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
-- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
-
-### Explain Ajax in as much detail as possible.
-
-Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute JSON for XML due to the advantages of being native to JavaScript.
-
-The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch` API.
-
-###### References
-
-- https://en.wikipedia.org/wiki/Ajax_(programming)
-- https://developer.mozilla.org/en-US/docs/AJAX
-
-### 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 webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
-- Basically most of the disadvantages of an SPA.
-
-### Explain how JSONP works (and how it's not really Ajax).
-
-JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed.
-
-JSONP works by making a request to a cross-origin domain via a `<script>` tag and usually with a `callback` query parameter, for example: `https://example.com?callback=printData`. The server will then wrap the data within a function called `printData` and return it to the client.
-
-```html
-<!-- https://mydomain.com -->
-<script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
-</script>
-
-<script src="https://example.com?callback=printData"></script>
-```
-
-```js
-// File loaded from https://example.com?callback=printData
-printData({ name: 'Yang Shun' });
-```
-
-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
-
-- https://stackoverflow.com/a/2067584/1751946
-
-### Have you ever used JavaScript templating? If so, what libraries have you used?
-
-Yes. Handlebars, Underscore, Lodash, AngularJS and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favourite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code.
-
-```js
-const template = `<div>My name is: ${name}</div>`;
-```
-
-However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries.
-
-### Explain "hoisting".
-
-Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "hoisted" up to the top of the current scope. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is. Let's explain with a few examples.
-
-```js
-// var declarations are hoisted.
-console.log(foo); // undefined
-var foo = 1;
-console.log(foo); // 1
-
-// let/const declarations are NOT hoisted.
-console.log(bar); // ReferenceError: bar is not defined
-let bar = 2;
-console.log(bar); // 2
-```
-
-Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.
-
-```js
-// Function Declaration
-console.log(foo); // [Function: foo]
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
-}
-console.log(foo); // [Function: foo]
-
-// Function Expression
-console.log(bar); // undefined
-bar(); // Uncaught TypeError: bar is not a function
-var bar = function() {
-  console.log('BARRRR');
-}
-console.log(bar); // [Function: bar]
-```
-
-### Describe event bubbling.
-
-When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation.
-
-### 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: `<input type="text" value="Hello">`.
-
-```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
-
-- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
-
-### 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 are 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
-
-- http://lucybain.com/blog/2014/js-extending-built-in-objects/
-
-### Difference between document load event and document DOMContentLoaded event?
-
-The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
-
-`window`'s `load` event is only fired after the DOM and all dependent resources and assets have loaded.
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
-- https://developer.mozilla.org/en-US/docs/Web/Events/load
-
-### 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
-```
-
-My advice is never to 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
-
-- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
-
-### 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
-
-- https://en.wikipedia.org/wiki/Same-origin_policy
-
-### Make this work:
-
-```js
-duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-```js
-function duplicate(arr) {
-  return arr.concat(arr);
-}
-
-duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-### 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
-
-- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
-
-### What is `"use strict";`? 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 in to 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 (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, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
-
-###### References
-
-- http://2ality.com/2011/10/strict-mode-hatred.html
-- http://lucybain.com/blog/2014/js-use-strict/
-
-### Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.
-
-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));
-}
-```
-
-I would not advise you 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
-
-- https://gist.github.com/jaysonrowe/1592432
-
-### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
-
-Every script has access to the global scope, and if everyone is using the global namespace to define their own variables, there will bound to be collisions. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
-
-### 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?
-
-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.
-
-TODO.
-
-###### References
-
-- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-
-### Explain what a single page app is and how to make one SEO-friendly.
-
-The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
-
-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 for 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 for 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.
-
-The benefits:
-
-- 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.
-
-The downsides:
-
-- Heavier initial page load due to 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
-
-- https://github.com/grab/front-end-guide#single-page-apps-spas
-- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
-- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
-- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
-
-### 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 some time 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 to the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
-
-###### References
-
-- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
-
-### 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()`.
-
-**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.
-
-### 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 I think 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. I don't really see the need for CoffeeScript these days.
-
-###### References
-
-- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
-
-### What tools and techniques do you use for debugging JavaScript code?
-
-- React and Redux
-  - [React Devtools](https://github.com/facebook/react-devtools)
-  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
-- JavaScript
-  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  - `debugger` statement
-  - Good old `console.log` debugging
-
-###### References
-
-- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
-- https://raygun.com/blog/javascript-debugging/
-
-### What language constructions do you use for iterating over object properties and array items?
-
-For objects:
-
-- `for` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it.
-- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it.
-- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
-
-For arrays:
-
-- `for` loops - `for (var i = 0; i < arr.length; i++)`. The 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 that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`.
-- `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early.
-
-Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop.
-
-### Explain the difference between mutable and immutable objects.
-
-- What is an example of an immutable object in JavaScript?
-- What are the pros and cons of immutability?
-- How can you achieve immutability in your own code?
-
-TODO
-
-### 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 continues 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).
-
-### What is event loop? 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
-
-- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
-- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
-
-### 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 behaviour as variables). For more explanation on hoisting, refer to the question above on 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
-
-- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
-
-### Other Answers
-
-- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+Front-end Job Interview Questions have been migrated [here](https://github.com/yangshun/front-end-interview-handbook).
diff --git a/front-end/javascript.md b/front-end/javascript.md
deleted file mode 100644
index 6278f652..00000000
--- a/front-end/javascript.md
+++ /dev/null
@@ -1,108 +0,0 @@
-JavaScript
-==
-
-WIP.
-
-## Contents
-
-- [Glossary](#glossary)
-- [Core Language](#core-language)
-- [Design Patterns](#design-patterns)
-- [Strict Mode](#strict-mode)
-
-## Glossary
-
-- **Closure** - "Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope." - [YDKJS](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md)
-- **Event Loop** - 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 message queue. If the call stack is empty and there are callback functions in the message queue, a message is dequeued and pushed onto the call stack to be executed.
-- **Hoisting** - "Wherever a var appears inside a scope, that declaration is taken to belong to the entire scope and accessible everywhere throughout." - [YDKJS](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md#hoisting)
-- **Promise** - "The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value." - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-  - Promises can contain an immediate value.
-- **Prototype** - TBD
-- **This** - The `this` keyword does not refer to the function in which `this` is used or that function's scope. Javascript uses [4 rules](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md#determining-this) to determine if `this` will reference an arbitrary object, *undefined* or the *global* object inside a particular function call.
-
-## Core Language
-
-### Variables
-
-- Reference: [Types and Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch1.md)
-- Types
-- Scopes
-- [Coercion](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md#coercion)
-
-### Functions
-
-- Reference: [this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md)
-- Declaration vs Expression
-- Closures
-- `.call`, `.apply` and `.bind`
-- Currying
-- Arrow functions and lexical this
-
-### Prototypes and Objects
-
-- Reference: [this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures)
-- Prototype chain
-- `this` keyword
-  - https://rainsoft.io/gentle-explanation-of-this-in-javascript/
-  - https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-- Classes
-  - Methods
-    - Use non-arrow functions for methods that will be called using the `object.method()` syntax because you need the value of `this` to point to the instance itself.
-
-### Async
-
-- Reference: [Async and Peformance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance)
-- `setTimeout`, `setInterval` and event loop
-  - [setImmediate() vs nextTick() vs setTimeout(fn,0)](http://voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/)
-- Event Loop
-- Debounce and Throttle
-  - Throttling enforces a maximum number of times a function can be called over time.
-  - Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called.
-  - https://css-tricks.com/debouncing-throttling-explained-examples/
-- Callbacks
-- [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-- [Async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) and [Await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) in ES7
-
-**Reference**
-
-- https://www.vikingcodeschool.com/falling-in-love-with-javascript/the-javascript-event-loop
-
-## Design Patterns
-
-- https://addyosmani.com/resources/essentialjsdesignpatterns/book/
-
-## Strict Mode
-
-1. Strict mode eliminates some JavaScript silent errors by changing them to throw errors.
-1. Strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations. Strict mode code can sometimes be made to run faster than identical code that's not strict mode.
-1. Strict mode prohibits some syntax likely to be defined in future versions of ECMAScript.
-
-**Converting Mistakes into Errors**
-
-- Prevent accidental creation of global variables.
-- Makes assignments which would otherwise silently fail throw an exception.
-- Makes attempts to delete undeletable properties throw errors.
-- Requires that all properties named in an object literal be unique. Duplicate property names are a syntax error in strict mode.
-- Requires that function parameter names be unique. In normal code the last duplicated argument hides previous identically-named arguments.
-- Forbids setting properties on primitive values in ES6. Without strict mode, setting properties is simply ignored (no-op), with strict mode, however, a `TypeError` is thrown.
-
-**Simplifying Variable Uses**
-
-- Prohibits `with`.
-- `eval` of strict mode code does not introduce new variables into the surrounding scope.
-- Forbids deleting plain variables. `delete` name in strict mode is a syntax error: `var x; delete x; // !!! syntax error`.
-
-**Paving the way for future ECMAScript versions**
-
-- Future ECMAScript versions will likely introduce new syntax, and strict mode in ECMAScript 5 applies some restrictions to ease the transition. It will be easier to make some changes if the foundations of those changes are prohibited in strict mode.
-- First, in strict mode a short list of identifiers become reserved keywords. These words are `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, and `yield`. In strict mode, then, you can't name or use variables or arguments with these names.
-- Second, strict mode prohibits function statements not at the top level of a script or function.
-
-## Transpilation: TBD
-
-## Useful Links
-
-- https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95#.l2n8icwl4
-- https://github.com/mbeaudru/modern-js-cheatsheet
-- [Functional Programming in Javascript - Javascript Allonge](https://leanpub.com/javascriptallongesix/read)
-- [Dr. Frisby's Mostly Adequate Guide to Functional Programming](https://drboolean.gitbooks.io/mostly-adequate-guide/content/)
diff --git a/front-end/networking.md b/front-end/networking.md
deleted file mode 100644
index f013f4f4..00000000
--- a/front-end/networking.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Networking
-==
-
-WIP.
-
-## Glossary
-
-- **JSON**
-- **RPC**
-- **HTTP**
-- **HTTP/2**
diff --git a/front-end/performance.md b/front-end/performance.md
deleted file mode 100644
index 5e5fe530..00000000
--- a/front-end/performance.md
+++ /dev/null
@@ -1,66 +0,0 @@
-Performance
-==
-
-WIP.
-
-## Glossary
-
-- **Critical Rendering Path** -
-- `requestAnimationFrame`
-
-## General Strategies
-
-1. Minimize Bytes.
-1. Reduce critical resources.
-1. Reduce CRP length. TODO: Explain what CRP length is.
-
-## Loading
-
-- Minify, Compress, Cache assets.
-- Browsers have a [preloader](https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/) to load assets ahead of time.
-
-## Rendering
-
-- Remove whitespace and comments from HTML/CSS/JS file via minification.
-- CSS
-  - CSS blocks rendering AND JavaScript execution.
-  - Split up CSS for fewer rendering blocking CSS stylesheets by using media attributes.
-    - Download only the necessary CSS before the browser can start to render.
-    - https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries
-  - Use Simpler selectors.
-- JavaScript
-  - JS blocks HTML parsing. If the script is external, it will have to be downloaded first. This incurs latency in network and execution.
-  - Shift `<script>` tags to the bottom.
-  - Async:
-    - Scripts that don't modify the DOM or CSSOM can use the `async` attribute to tell the browser not to block DOM parsing and does not need to wait for the CSSOM to be ready.
-  - Defer JavaScript execution:
-    - There is also a `defer` attribute available. The difference is that with `defer`, the script waits to execute until after the document has been parsed, whereas `async` lets the script run in the background while the document is being parsed.
-  - Use web workers for long running operations to move into a web worker thread.
-  - Use `requestAnimationFrame`
-
-###### References
-
-- https://bitsofco.de/understanding-the-critical-rendering-path/
-
-## Measuring
-
-- [Navigation Timing API](https://developer.mozilla.org/en/docs/Web/API/Navigation_timing_API) is a JavaScript API for accurately measuring performance on the web. The API provides a simple way to get accurate and detailed timing statistics natively for page navigation and load events.
-  - `performance.timing`: An object with the timestamps of the various events on the page. Some uses:
-    - Network latency: `responseEnd` - `fetchStart`.
-    - The time taken for page load once the page is received from the server: `loadEventEnd` - `responseEnd`.
-    - The whole process of navigation and page load: `loadEventEnd` - `navigationStart`.
-
-## Tools
-
-- Yahoo YSlow
-- Google PageSpeed Insights
-- WebPageTest
-- Sitespeed.io
-- Google Lighthouse
-
-## Web Performance Rules
-
-- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp
-- http://stevesouders.com/hpws/rules.php
-- https://developer.yahoo.com/performance/rules.html
-- https://browserdiet.com/en/
diff --git a/front-end/security.md b/front-end/security.md
deleted file mode 100644
index 59ac38b2..00000000
--- a/front-end/security.md
+++ /dev/null
@@ -1,110 +0,0 @@
-Security
-==
-
-## Glossary
-
-- **CORS** - Cross-Origin Resource Sharing (CORS).
-- **CSRF** - Cross-Site request forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they're currently authenticated.
-- **XSS** - Cross-site scripting (XSS).
-
-## CORS
-
-The same-origin policy protects users by disallowing websites to retrieve information from other websites of different origins. An origin is the triple {protocol, host, port}. Two resources are considered to be of the same origin if and only if all these values are exactly the same.
-
-Cross-Origin Resource Sharing allows relaxing of the same-origin policy. CORS defines a way in which a browser and server can interact to determine whether or not it is safe to allow the cross-origin request.
-
-This standard extends HTTP with a new `Origin` request header and `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` response headers. It allows servers to use a header to explicitly list origins and HTTP methods that may request a file or to use a wildcard and allow a file to be requested by any site. `XMLHttpRequest`s to a target origin from a different source origin will be blocked if the server did not allow CORS for source origin.
-
-## CSRF
-
-XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
-
-#### Protection
-
-- Verifying Same Origin with Standard Headers
-  - There are two steps to this check:
-    1. Determining the origin the request is coming from (source origin).
-    2. Determining the origin the request is going to (target origin).
-  - Examine the `Origin`, `Referer` and `Host` Header values.
-- Synchronizer Tokens
-  - The CSRF token is added as a hidden field for forms or within the URL.
-  - Characteristics of a CSRF Token
-    - Unique per user session
-    - Large random value
-    - Generated by a cryptographically secure random number generator
-  - The server rejects the requested action if the CSRF token fails validation.
-- Double Cookie
-  - When a user visits a site, the site should generate a (cryptographically strong) pseudorandom value and set it as a cookie on the user's machine. The site should require every form submission to include this pseudorandom value as a form value and also as a cookie value. When a POST request is sent to the site, the request should only be considered valid if the form value and the cookie value are the same. When an attacker submits a form on behalf of a user, he can only modify the values of the form. An attacker cannot read any data sent from the server or modify cookie values, per the same-origin policy. This means that while an attacker can send any value he wants with the form, he will be unable to modify or read the value stored in the cookie. Since the cookie value and the form value must be the same, the attacker will be unable to successfully submit a form unless he is able to guess the pseudorandom value.
-  - The advantage of this approach is that it requires no server state; you simply set the cookie value once, then every HTTP POST checks to ensure that one of the submitted <input> values contains the exact same cookie value. Any difference between the two means a possible XSRF attack.
-- Cookie-to-Header Token
-  - On login, the web application sets a cookie containing a random token that remains the same for the whole user session
-    - `Set-Cookie: Csrf-token=i8XNjC4b8KVok4uw5RftR38Wgp2BFwql; expires=Thu, 23-Jul-2015 10:25:33 GMT; Max-Age=31449600; Path=/`
-  - JavaScript operating on the client side reads its value and copies it into a custom HTTP header sent with each transactional request
-    - `X-Csrf-Token: i8XNjC4b8KVok4uw5RftR38Wgp2BFwql`
-  - The server validates presence and integrity of the token.
-  - Security of this technique is based on the assumption that only JavaScript running within the same origin will be able to read the cookie's value.
-  - JavaScript running from a rogue file or email will not be able to read it and copy into the custom header. Even though the `csrf-token` cookie will be automatically sent with the rogue request, the server will be still expecting a valid `X-Csrf-Token` header.
-- Use of Custom Request Headers
-  - An alternate defense which is particularly well suited for AJAX endpoints is the use of a custom request header. This defense relies on the same-origin policy (SOP) restriction that only JavaScript can be used to add a custom header, and only within its origin. By default, browsers don't allow JavaScript to make cross origin requests. Such a header can be `X-Requested-With: XMLHttpRequest`.
-  - If this is the case for your system, you can simply verify the presence of this header and value on all your server side AJAX endpoints in order to protect against CSRF attacks. This approach has the double advantage of usually requiring no UI changes and not introducing any server side state, which is particularly attractive to REST services. You can always add your own custom header and value if that is preferred.
-- Require user interaction
-  - Require a re-authentication, using a one-time token, or requiring users to complete a captcha.
-
-###### References
-
-- [OWASP CSRF](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF))
-
-## HTTPS
-
-HTTPS is HTTP over SSL/TLS. Servers and clients still speak exactly the same HTTP to each other, but over a secure SSL connection that encrypts and decrypts their requests and responses. The SSL layer has 2 main purposes:
-
-1. Verifying that you are talking directly to the server that you think you are talking to.
-1. Ensuring that only the server can read what you send it and only you can read what it sends back.
-
-#### TLS Handshake
-
-// TODO. Crosscheck and add in more details.
-
-1. The client computer sends a `ClientHello` message to the server with its Transport Layer Security (TLS) version, list of cipher algorithms and compression methods available.
-1. The server replies with a `ServerHello` message to the client with the TLS version, selected cipher, selected compression methods and the server's public certificate signed by a CA (Certificate Authority). The certificate contains a public key that will be used by the client to encrypt the rest of the handshake until a symmetric key can be agreed upon.
-1. The client verifies the server digital certificate against its list of trusted CAs. If trust can be established based on the CA, the client generates a string of pseudo-random bytes and encrypts this with the server's public key. These random bytes can be used to determine the symmetric key.
-1. The server decrypts the random bytes using its private key and uses these bytes to generate its own copy of the symmetric master key.
-1. The client sends a `Finished` message to the server, encrypting a hash of the transmission up to this point with the symmetric key.
-1. The server generates its own hash, and then decrypts the client-sent hash to verify that it matches. If it does, it sends its own `Finished` message to the client, also encrypted with the symmetric key.
-1. From now on the TLS session transmits the application (HTTP) data encrypted with the agreed symmetric key.
-
-#### Downsides of HTTPS
-
-- TLS handshake computational and latency overhead.
-- Encryption and decryption requires more computation power and bandwidth.
-
-###### References
-
-- https://blog.hartleybrody.com/https-certificates/
-- https://github.com/alex/what-happens-when#tls-handshake
-- http://robertheaton.com/2014/03/27/how-does-https-actually-work/
-
-## XSS
-
-XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
-
-```js
-const name = "<img src='x' onerror='alert(1)'>";
-el.innerHTML = name;
-```
-
-http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
-
-## Session hijacking
-
-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-- https://www.nczonline.net/blog/2009/05/12/cookies-and-security/
-
-
-## Framebusting
-
-https://seclab.stanford.edu/websec/framebusting/framebust.pdf
-
-## API
-
-https://github.com/shieldfy/API-Security-Checklist
diff --git a/front-end/widgets.md b/front-end/widgets.md
deleted file mode 100644
index 6c456fc9..00000000
--- a/front-end/widgets.md
+++ /dev/null
@@ -1,56 +0,0 @@
-Widgets
-==
-
-Here are some commonly seen widgets/components and the considerations we should take into account when designing them.
-
-### Autocomplete
-
-Also known as typeahead box.
-
-#### UX
-
-- Type a minimum number of characters (typically two) for the results to be displayed. This is because short search terms can result in too many matches and irrelevant results may be returned.
-- Number of query suggestions should be kept short and scrollbars should be avoided. Shorter list of results are more manageable and reduces the cognitive load on the user. If you have scrollbars it probably means you are displaying too many results!
-- Highlight the non-search terms (suggested terms) in the results. This helps the user differentiate the autocomplete suggestions, make it easier to compare.
-- Support keyboard shortcuts: Up/down to navigate and enter to search.
-- Show a history of recent searches.
-- Use placeholder text in the input field to educate users, such as "Type to view suggestions".
-
-#### Performance
-
-- Use windowing/virtual lists when the search results is too long.
-- Debounce user input and only search when user stops typing for some time (usually 300ms).
-
-###### References
-
-- https://baymard.com/blog/autocomplete-design
-
-### Carousel
-
-#### UX
-
-- Consider preloading a few images to the left/right of the displayed image during idle time so that as the user navigates, he does not have to wait for the image to be downloaded.
-- Allow left/right keyboard navigation of the carousel.
-
-#### Performance
-
-- Lazy load the images. Only load those that the user has a high likelihood of viewing - Current image and a few to the left and right.
-
-### Dropdown
-
-- Dropdowns that are displayed on hover are not mobile friendly as there is no hover event on mobile.
-- Dropdown positioning can differ based on position of element on screen. If the element is near the edge and the displayed dropdown will be obscured outside of the viewport, the position of the dropdown can and should be changed.
-- If the height of the dropdown is too long, it may extend outside of the screen. Be sure to make the dropdown contents scrollable by setting a `max-height`.
-
-### Modal
-
-- Modals can usually be dismissed by clicking on the backdrop. If the user interacts with the modal content by clicking on it, the backdrop might also receive the click event and be dismissed as a result.
-
-###### References
-
-- https://css-tricks.com/dangers-stopping-event-propagation/
-
-### Tooltip
-
-- Tooltips that are displayed on hover are not mobile friendly as there is no hover event on mobile.
-- Tooltip positioning can differ based on position of element on screen. If the element is near the edge and the displayed tooltip will be obscured outside of the viewport, the position of the tooltip can and should be changed.