[Misc] Update links to the original repo with questions (#185)
This commit is contained in:
Artur Allaev
Yangshun Tay
parent
28dee15c8a
commit
599ebb0d5f
|
|
@ -1,6 +1,6 @@
|
|||
# CSS 问题
|
||||
|
||||
本章节是[前端开发者面试问题 - CSS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
本章节是[前端开发者面试问题 - CSS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
|
||||
* [CSS 选择器的优先级是如何计算的？](#css-选择器的优先级是如何计算的)
|
||||
* [重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？](#重置resettingcss-和-标准化normalizingcss-的区别是什么你会选择哪种方式为什么)
|
||||
|
|
@ -223,7 +223,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
通过设置`fill`和`stroke`属性，可以完成基本着色操作。`fill`可以设置内部的颜色，`stroke`可以设置周围绘制的线条的颜色。你可以使用与`HTML`中使用的CSS颜色命名方案相同的CSS颜色命名方案：颜色名称（即`red`）、RGB值（即`rgb(255,0,0)`）、十六进制值、RGBA值等等。
|
||||
|
||||
```html
|
||||
<rect x="10" y="10" width="100" height="100" stroke="blue"
|
||||
<rect x="10" y="10" width="100" height="100" stroke="blue"
|
||||
fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# HTML 问题
|
||||
|
||||
本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
|
||||
* [`DOCTYPE`有什么用？](#doctype有什么用)
|
||||
* [如何提供包含多种语言内容的页面？](#如何提供包含多种语言内容的页面)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## JS 问题
|
||||
|
||||
本章节是[前端开发者面试问题 - JS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
本章节是[前端开发者面试问题 - JS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
|
||||
|
||||
* [请解释事件委托（event delegation）。](#请解释事件委托event-delegation)
|
||||
* [请简述`JavaScript`中的`this`。](#请简述javascript中的this)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# CSS に関する質問
|
||||
|
||||
[Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
[Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
|
||||
* [CSS セレクターの詳細度とは何ですか？どのようにはたらきますか？](#css-セレクターの詳細度とは何ですかそれはどのようにはたらきますか)
|
||||
* ["リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？](#リセット-と-ノーマライズ-css-の違いは何ですかあなたはどちらを使いますかそしてそれはなぜですか)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# HTML に関する質問
|
||||
|
||||
[Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
[Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
|
||||
* [`DOCTYPE` は何のためにあるものですか？](#doctype-は何のためにあるものですか)
|
||||
* [どのようにすれば複数の言語のコンテンツを含むページを提供できますか？](#どのようにすれば複数の言語のコンテンツを含むページを提供できますか)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# JS に関する質問
|
||||
|
||||
[Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
[Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
|
||||
|
||||
* [イベントデリゲーションについて説明してください。](#イベントデリゲーションについて説明してください)
|
||||
* [JavaScript の `this` はどう機能するものなのか説明してください。](#javascript-の-this-はどう機能するものなのか説明してください)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Perguntas HTML
|
||||
|
||||
Respostas a [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Os pedidos de sugestões e correções são bem-vindos!
|
||||
Respostas a [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Os pedidos de sugestões e correções são bem-vindos!
|
||||
|
||||
* [O que faz um doctype?](#what-does-a-doctype-do)
|
||||
* [Como é que tu serves uma página com conteúdo em vários idiomas?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Mga Katanungan sa CSS
|
||||
|
||||
Mga kasagutan sa [Mga Kasagutan sa Pakikipanayam sa Front-end na Trabaho - Mga Katanungan sa CSS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md). Malugod na tatanggapin ang mga Pull request para sa mga suhestyon at mga koreksyon!
|
||||
Mga kasagutan sa [Mga Kasagutan sa Pakikipanayam sa Front-end na Trabaho - Mga Katanungan sa CSS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Malugod na tatanggapin ang mga Pull request para sa mga suhestyon at mga koreksyon!
|
||||
|
||||
* [Ano ang pagsisigurado ng CSS selector at kung paano ito gumagana?](#ano-ang-pagsisigurado-ng-css-selector-at-kung-paano-ito-gumagana)
|
||||
* [Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?](#ano-ang-pagkakaiba-sa-pagitan-ng-pag-reset-at-pag-normalize-ng-css-saan-sa-dalawa-ang-iyong-pipiliin-at-bakit)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Mga Tanong sa HTML
|
||||
|
||||
Mga sagot sa [Mga Tanong sa Pakikipanayam para sa Trabahong Pangfront-end - Mga Tanong sa HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Malugod naming tatanggaping ang mga pull request para sa mga mungkahi at mga koreksyon
|
||||
Mga sagot sa [Mga Tanong sa Pakikipanayam para sa Trabahong Pangfront-end - Mga Tanong sa HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Malugod naming tatanggaping ang mga pull request para sa mga mungkahi at mga koreksyon
|
||||
|
||||
* [Ano ang ginagawa ng `DOCTYPE`?](#ano-ang-ginagawa-ng-doctype)
|
||||
* [Papaano mo ihahain ang pahinang may iba't-ibang lenggwaheng nilalaman?](#papaano-mo-ihahain-ang-pahinang-may-ibat-ibang-lenggwaheng-nilalaman)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## Mga Tanong sa JS
|
||||
|
||||
Mga Sagot sa [Mga Tanong sa Pakikipanayam sa Trabahong Pangfront-end - Mga Tanong sa JS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md). Ang mga pull request para sa mga suhestyon at koreksyon ay malugod na tatanggapin
|
||||
Mga Sagot sa [Mga Tanong sa Pakikipanayam sa Trabahong Pangfront-end - Mga Tanong sa JS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Ang mga pull request para sa mga suhestyon at koreksyon ay malugod na tatanggapin
|
||||
|
||||
* [Ipaliwanag ang delegasyon ng kaganapan](#ipaliwanag-ang-delegasyon-ng-kaganapan)
|
||||
* [Ipaliwanag kung paano gumagana ang `this` na ito sa JavaScript](#ipaliwanag-kung-paano-gumagana-ang-this-na-ito-sa-javascript)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# CSS Questions
|
||||
|
||||
Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
* [What is CSS selector specificity and how does it work?](#what-is-css-selector-specificity-and-how-does-it-work)
|
||||
* [What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?](#whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why)
|
||||
|
|
@ -226,7 +226,7 @@ Yes, there are several ways to color shapes (including specifying attributes on
|
|||
Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc.
|
||||
|
||||
```html
|
||||
<rect x="10" y="10" width="100" height="100" stroke="blue"
|
||||
<rect x="10" y="10" width="100" height="100" stroke="blue"
|
||||
fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
|
||||
```
|
||||
|
||||
|
|
@ -505,7 +505,7 @@ In order to have crisp, good-looking graphics that make the best of retina displ
|
|||
To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:
|
||||
|
||||
```html
|
||||
<div responsive-background-image>
|
||||
<div responsive-background-image>
|
||||
<img src="/images/test-1600.jpg"
|
||||
sizes="
|
||||
(min-width: 768px) 50vw,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# 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!
|
||||
Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/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)
|
||||
|
|
@ -16,13 +16,13 @@ Answers to [Front-end Job Interview Questions - HTML Questions](https://github.c
|
|||
|
||||
### What does a DOCTYPE do?
|
||||
|
||||
**DOCTYPE** is an abbreviation for **DOCument TYPE**.
|
||||
A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.
|
||||
**DOCTYPE** is an abbreviation for **DOCument TYPE**.
|
||||
A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.
|
||||
|
||||
A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document *supposedly* respects (i.e. this document respects the HTML DTD).
|
||||
A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document *supposedly* respects (i.e. this document respects the HTML DTD).
|
||||
|
||||
For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects.
|
||||
Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document.
|
||||
For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects.
|
||||
Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document.
|
||||
If a user agent doesn't recognize a correct DOCTYPE, it will trigger the **quirks mode**.
|
||||
|
||||
The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
|
||||
|
|
@ -136,7 +136,7 @@ Note: The `async` and `defer` attributes are ignored for scripts that have no
|
|||
|
||||
**Placing `<link>`s in the `<head>`**
|
||||
|
||||
Putting `<link>`s in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which can shows a webpage with no styling applied.
|
||||
Putting `<link>`s in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which can shows a webpage with no styling applied.
|
||||
|
||||
**Placing `<script>`s just before `</body>`**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## JS Questions
|
||||
|
||||
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
|
||||
|
||||
* [Explain event delegation](#explain-event-delegation)
|
||||
* [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript)
|
||||
|
|
@ -838,16 +838,16 @@ 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.
|
||||
* `for-of` loops - `for (let elem of arr) { ... }`. ES6 introduces a new loop, the `for-of` loop, that allows you to loop over objects that conform to the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) such as `String`, `Array`, `Map`, `Set`, etc. It combines the advantages of the `for` loop and the `forEach()` method. The advantage of the `for` loop is that you can break from it, and the advantage of `forEach()` is that it is more concise than the `for` loop because you don't need a counter variable. With the `for-of` loop, you get both the ability to break from a loop and a more concise syntax.
|
||||
* `for-of` loops - `for (let elem of arr) { ... }`. ES6 introduces a new loop, the `for-of` loop, that allows you to loop over objects that conform to the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) such as `String`, `Array`, `Map`, `Set`, etc. It combines the advantages of the `for` loop and the `forEach()` method. The advantage of the `for` loop is that you can break from it, and the advantage of `forEach()` is that it is more concise than the `for` loop because you don't need a counter variable. With the `for-of` loop, you get both the ability to break from a loop and a more concise syntax.
|
||||
|
||||
Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. Before ES6, we used `for` loops when we needed to prematurely terminate the loop using `break`. But now with ES6, we can do that with `for-of` loops. I would use `for` loops when I need even more flexibility, such as incrementing the iterator more than once per loop.
|
||||
Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. Before ES6, we used `for` loops when we needed to prematurely terminate the loop using `break`. But now with ES6, we can do that with `for-of` loops. I would use `for` loops when I need even more flexibility, such as incrementing the iterator more than once per loop.
|
||||
|
||||
Also, when using the `for-of` loop, if you need to access both the index and value of each array element, you can do so with the ES6 Array `entries()` method and destructuring:
|
||||
|
||||
```
|
||||
const arr = ['a', 'b', 'c'];
|
||||
|
||||
for (let [index, elem] of arr.entries()) {
|
||||
for (let [index, elem] of arr.entries()) {
|
||||
console.log(index, ': ', elem);
|
||||
}
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue