├── .gitignore ├── .travis.yml ├── .topics_WIP_PLEASE_IGNORE ├── networking.md ├── caching.md ├── design.md ├── html.md ├── performance.md ├── widgets.md ├── browser.md ├── css.md ├── javascript.md ├── dom.md ├── security.md └── accessibility.md ├── .editorconfig ├── utilities └── debounce.js ├── CODE_OF_CONDUCT.md ├── Translations ├── Tagalog │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.MD │ ├── README.md │ └── questions │ │ └── html-questions.md ├── Chinese │ ├── README.md │ └── questions │ │ ├── html-questions.md │ │ └── css-questions.md ├── Japanese │ ├── README.md │ └── questions │ │ └── html-questions.md ├── Korean │ ├── README.md │ └── questions │ │ ├── html-questions.md │ │ └── css-questions.md └── Portuguese │ ├── README.md │ └── questions │ └── html-questions.md ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── LICENSE ├── CONTRIBUTING.md ├── README.md ├── assets ├── scroll.svg └── book.svg └── questions └── html-questions.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | install: 2 | - gem install awesome_bot 3 | 4 | script: 5 | - awesome_bot **/*.md --allow-dupe --allow-redirect --allow 429 --skip-save-results 6 | -------------------------------------------------------------------------------- /.topics_WIP_PLEASE_IGNORE/networking.md: -------------------------------------------------------------------------------- 1 | Networking 2 | == 3 | 4 | WIP. 5 | 6 | ## Glossary 7 | 8 | - **JSON** 9 | - **RPC** 10 | - **HTTP** 11 | - **HTTP/2** 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | 8 | [*.{js,py}] 9 | charset = utf-8 10 | indent_style = space 11 | indent_size = 4 12 | -------------------------------------------------------------------------------- /utilities/debounce.js: -------------------------------------------------------------------------------- 1 | const debounce = (fn, time) => { 2 | let timerId; 3 | return function(...args) { 4 | const functionCall = () => fn.apply(this, args); 5 | clearTimeout(timerId); 6 | timerId = setTimeout(functionCall, time); 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | 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. 4 | -------------------------------------------------------------------------------- /Translations/Tagalog/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | 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. 4 | -------------------------------------------------------------------------------- /Translations/Tagalog/CONTRIBUTING.MD: -------------------------------------------------------------------------------- 1 | ## Sa Pag-aambag 2 | 3 | Sa pag-aambag sa imbakang ito, kung ito ay isang di-maliit na pagbabago, pakiusap ay talakayin muna ang pagbabago na nais mong gawin Sa pamamagitan ng paggawa ng isyu sa imbakang ito. 4 | 5 | Hangga't maari, subukan na sundin ang umiiral na format ng markdown at code. Ang JavaScript na code ay dapat pagtibayan ng [Standard style](https://standardjs.com/). 6 | 7 | Paalala lang na meron tayong Code of Conduct, mangyaring sundin ito sa lahat ng iyong mga pakikipag-ugnayan sa proyekto. 8 | -------------------------------------------------------------------------------- /.topics_WIP_PLEASE_IGNORE/caching.md: -------------------------------------------------------------------------------- 1 | Caching 2 | == 3 | 4 | WIP. 5 | 6 | ## Glossary 7 | 8 | - **Cookies** 9 | 10 | #### References 11 | 12 | - [A Tale of Four Caches](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) 13 | - [Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies](https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies) 14 | - [This browser tweak saved 60% of requests to Facebook](https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/) 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.topics_WIP_PLEASE_IGNORE/design.md: -------------------------------------------------------------------------------- 1 | Design Questions 2 | == 3 | 4 | ## Autocomplete Widget 5 | 6 | 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. 7 | - How would you design a frontend to support the following features: 8 | - Fetch data from a backend API 9 | - Render results as a tree (items can have parents/children - it's not just a flat list) 10 | - Support for checkbox, radio button, icon, and regular list items - items come in many forms 11 | - What does the component's API look like? 12 | - What does the backend API look like? 13 | - 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)? 14 | - 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? 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-Present Yangshun Tay 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.topics_WIP_PLEASE_IGNORE/html.md: -------------------------------------------------------------------------------- 1 | HTML 2 | == 3 | 4 | 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. 5 | 6 | ## Glossary 7 | 8 | - **Doctype** 9 | 10 | ## Deprecated Tags 11 | 12 | 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. 13 | 14 | ## Script Loading 15 | 16 | - `