Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Staging Files for tl_PH Translation Repository #33

Merged
merged 7 commits into from
Feb 21, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Staging Files for tl_PH Translation 2/21/18
  • Loading branch information
cordeta authored Feb 21, 2018
commit ba5b0378acc8ee855ca406050ec5d90d8e25bd74
59 changes: 59 additions & 0 deletions translations/tl_PH/topics/browser.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
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/)
14 changes: 14 additions & 0 deletions translations/tl_PH/topics/caching.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
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/)
34 changes: 34 additions & 0 deletions translations/tl_PH/topics/css.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
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/
14 changes: 14 additions & 0 deletions translations/tl_PH/topics/design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
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?
102 changes: 102 additions & 0 deletions translations/tl_PH/topics/dom.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
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
Loading