Staging Files for tl_PH Translation Repository (yangshun#33)

* Staging File for PH Translation 2/21/18

* Staging File for PH Translation 2/21/18

* Staging File for Tl_PH Translation 2/21/18

* Staging Files for tl_PH Translation

* Staging Files for tl_PH Translation 2/21/18

* Staging Files for tl_PH Translation 2/21/18

translations/tl_PH/CODE_OF_CONDUCT.md

@@ -0,0 +1,3 @@
+# Code of Conduct
+
+We have adopted the same Code of Conduct as Facebook that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.

translations/tl_PH/CONTRIBUTING.MD

@@ -0,0 +1,7 @@
+## Contributing
+
+When contributing to this repository, if it is a non-trivial change, please first discuss the change you wish to make via creating an issue in this repository.
+
+As much as possible, try to follow the existing format of markdown and code. JavaScript code should adopt [Standard style](https://standardjs.com/).
+
+Please note we have a Code of Conduct, please follow it in all your interactions with the project.

translations/tl_PH/README.md

@@ -0,0 +1,36 @@
+<h1 align="center">Front End Interview Handbook</h1>
+
+<div align="center">
+  <a href="https://dribbble.com/shots/3831443-Tech-Interview-Handbook">
+    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/f4d3132f/assets/book.svg" alt="Front End Interview Handbook" width="400"/>
+    </a>
+  <br>
+  <p>
+    <em>Credits: <a href="https://dribbble.com/shots/3831443-Tech-Interview-Handbook">Illustration</a> by <a href="https://dribbble.com/yangheng">@yangheng</a>
+    </em>
+  </p>
+</div>
+
+## What is this?
+
+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 Developer 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.
+
+## Looking for Generic Interview Preparation?
+
+You might be interested in the [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) which has helpful content on general coding interviews such as algorithms, behavioral questions and an [interview cheatsheet](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)!
+
+## Table of Contents
+
+1. [HTML Questions](questions/html-questions.md)
+1. [CSS Questions](questions/css-questions.md)
+1. [JavaScript Questions](questions/javascript-questions.md)
+
+## Related
+
+If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It is pretty much still WIP but I intend to make it into a library that is able to be used in production and also a reference resource for revising Data Structures and Algorithms.
+
+## Contributing
+
+Feel free to make pull requests to correct any mistakes in the answers or suggest new questions.

translations/tl_PH/questions/html-questions.md

@@ -0,0 +1,183 @@
+# HTML Questions
+
+Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
+
+* [What does a doctype do?](#what-does-a-doctype-do)
+* [How do you serve a page with content in multiple languages?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
+* [What kind of things must you be wary of when design or developing for multilingual sites?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
+* [What are `data-` attributes good for?](#what-are-data--attributes-good-for)
+* [Consider HTML5 as an open web platform. What are the building blocks of HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
+* [Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
+* [Describe the difference between `<script>`, `<script async>` and `<script defer>`.](#describe-the-difference-between-script-script-async-and-script-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?](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
+* [What is progressive rendering?](#what-is-progressive-rendering)
+* [Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
+* [Have you used different HTML templating languages before?](#have-you-used-different-html-templating-languages-before)
+
+### What does a `DOCTYPE` do?
+
+`DOCTYPE` is an abbreviation for “document type”. It is a declaration used in HTML to distinguish between standards mode and [quirks mode](https://quirks.spec.whatwg.org/#history). Its presence tells the browser to render the web page 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
+* https://quirks.spec.whatwg.org/#history
+
+[[↑] Back to top](#html-questions)
+
+### 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
+
+[[↑] Back to top](#html-questions)
+
+### 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. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: `I will travel on {% date %}` and `{% date %} 我会出发`. Note that the position of the variable is different due to grammar rules of the language.
+* 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
+
+[[↑] Back to top](#html-questions)
+
+### 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
+
+[[↑] Back to top](#html-questions)
+
+### 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
+
+[[↑] Back to top](#html-questions)
+
+### 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
+
+[[↑] Back to top](#html-questions)
+
+### 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/
+
+[[↑] Back to top](#html-questions)
+
+### 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
+
+[[↑] Back to top](#html-questions)
+
+### 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/
+
+[[↑] Back to top](#html-questions)
+
+### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
+
+TODO
+
+[[↑] Back to top](#html-questions)
+
+### 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.
+
+[[↑] Back to top](#html-questions)
+
+### 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/
+
+---