mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reformat Markdown files

This commit is contained in:
Yangshun Tay 2020-01-27 23:08:44 +08:00
parent 526774b786
commit cae93b4f5c
22 changed files with 2240 additions and 2206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -17,7 +17,6 @@ Unlike typical software engineer job interviews, front-end job interviews have l
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 to 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.
---
<div align="center">
@ -26,7 +25,6 @@ While there are some existing resources to help front end developers in preparin
---
## 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)!

10
Translations/Chinese/README.md
View File

@ -29,14 +29,14 @@
## 翻译
* [English](/README.md)
* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
* [Tagalog](/Translations/Tagalog/README.md)
* [Japanese (日本語)](/Translations/Japanese/README.md)
- [English](/README.md)
- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
- [Tagalog](/Translations/Tagalog/README.md)
- [Japanese (日本語)](/Translations/Japanese/README.md)
**进行中**
* [Korean (한국어)](/Translations/Korean/README.md)
- [Korean (한국어)](/Translations/Korean/README.md)
## 相关

272
Translations/Chinese/questions/css-questions.md
View File

@ -2,37 +2,37 @@
本章节是[前端开发者面试问题 - 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-的区别是什么你会选择哪种方式为什么)
* [请阐述`Float`定位的工作原理。](#请阐述float定位的工作原理)
* [请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。](#请阐述z-index属性并说明如何形成层叠上下文stacking-context)
* [请阐述块格式化上下文（Block Formatting Context）及其工作原理。](#请阐述块格式化上下文block-formatting-context及其工作原理)
* [有哪些清除浮动的技术，都适用哪些情况？](#有哪些清除浮动的技术都适用哪些情况)
* [请解释什么是精灵图（css sprites），以及如何实现？](#请解释什么是精灵图css-sprites以及如何实现)
* [如何解决不同浏览器的样式兼容性问题？](#如何解决不同浏览器的样式兼容性问题)
* [如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？](#如何为功能受限的浏览器提供页面-使用什么样的技术和流程)
* [有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？](#有什么不同的方式可以隐藏内容使其仅适用于屏幕阅读器)
* [你使用过栅格系统吗？偏爱哪一个？](#你使用过栅格系统吗偏爱哪一个)
* [你是否使用过媒体查询或移动优先的布局？](#你是否使用过媒体查询或移动优先的布局)
* [你熟悉制作 SVG 吗？](#你熟悉制作-svg-吗)
* [除了`screen`，你还能说出一个 @media 属性的例子吗？](#除了screen你还能说出一个-media-属性的例子吗)
* [编写高效的 CSS 应该注意什么？](#编写高效的-css-应该注意什么)
* [使用 CSS 预处理的优缺点分别是什么？](#使用-css-预处理的优缺点分别是什么)
* [对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？](#对于你使用过的-css-预处理说说喜欢和不喜欢的地方)
* [如何实现一个使用非标准字体的网页设计？](#如何实现一个使用非标准字体的网页设计)
* [解释浏览器如何确定哪些元素与 CSS 选择器匹配。](#解释浏览器如何确定哪些元素与-css-选择器匹配)
* [描述伪元素及其用途。](#描述伪元素及其用途)
* [说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。](#说说你对盒模型的理解以及如何告知浏览器使用不同的盒模型渲染布局)
* [`* { box-sizing: border-box; }`会产生怎样的效果？](#--box-sizing-border-box-会产生怎样的效果)
* [`display`的属性值都有哪些？](#display的属性值都有哪些)
* [`inline`和`inline-block`有什么区别？](#inline和inline-block有什么区别)
* [`relative`、`fixed`、`absolute`和`static`四种定位有什么区别？](#relativefixedabsolute和static四种定位有什么区别)
* [你使用过哪些现有的 CSS 框架？你是如何改进它们的？](#你使用过哪些现有的-css-框架你是如何改进它们的)
* [你了解 CSS Flexbox 和 Grid 吗？](#你了解-css-flexbox-和-grid-吗)
* [请解释在编写网站时，响应式与移动优先的区别。](#请解释在编写网站时响应式与移动优先的区别)
* [响应式设计与自适应设计有何不同？](#响应式设计与自适应设计有何不同)
* [你有没有使用过视网膜分辨率的图形？当中使用什么技术？](#你有没有使用过视网膜分辨率的图形当中使用什么技术)
* [什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。](#什么情况下用translate而不用绝对定位什么时候情况相反)
- [CSS 选择器的优先级是如何计算的？](#css-选择器的优先级是如何计算的)
- [重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？](#重置resettingcss-和-标准化normalizingcss-的区别是什么你会选择哪种方式为什么)
- [请阐述`Float`定位的工作原理。](#请阐述float定位的工作原理)
- [请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。](#请阐述z-index属性并说明如何形成层叠上下文stacking-context)
- [请阐述块格式化上下文（Block Formatting Context）及其工作原理。](#请阐述块格式化上下文block-formatting-context及其工作原理)
- [有哪些清除浮动的技术，都适用哪些情况？](#有哪些清除浮动的技术都适用哪些情况)
- [请解释什么是精灵图（css sprites），以及如何实现？](#请解释什么是精灵图css-sprites以及如何实现)
- [如何解决不同浏览器的样式兼容性问题？](#如何解决不同浏览器的样式兼容性问题)
- [如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？](#如何为功能受限的浏览器提供页面-使用什么样的技术和流程)
- [有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？](#有什么不同的方式可以隐藏内容使其仅适用于屏幕阅读器)
- [你使用过栅格系统吗？偏爱哪一个？](#你使用过栅格系统吗偏爱哪一个)
- [你是否使用过媒体查询或移动优先的布局？](#你是否使用过媒体查询或移动优先的布局)
- [你熟悉制作 SVG 吗？](#你熟悉制作-svg-吗)
- [除了`screen`，你还能说出一个 @media 属性的例子吗？](#除了screen你还能说出一个-media-属性的例子吗)
- [编写高效的 CSS 应该注意什么？](#编写高效的-css-应该注意什么)
- [使用 CSS 预处理的优缺点分别是什么？](#使用-css-预处理的优缺点分别是什么)
- [对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？](#对于你使用过的-css-预处理说说喜欢和不喜欢的地方)
- [如何实现一个使用非标准字体的网页设计？](#如何实现一个使用非标准字体的网页设计)
- [解释浏览器如何确定哪些元素与 CSS 选择器匹配。](#解释浏览器如何确定哪些元素与-css-选择器匹配)
- [描述伪元素及其用途。](#描述伪元素及其用途)
- [说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。](#说说你对盒模型的理解以及如何告知浏览器使用不同的盒模型渲染布局)
- [`* { box-sizing: border-box; }`会产生怎样的效果？](#--box-sizing-border-box-会产生怎样的效果)
- [`display`的属性值都有哪些？](#display的属性值都有哪些)
- [`inline`和`inline-block`有什么区别？](#inline和inline-block有什么区别)
- [`relative`、`fixed`、`absolute`和`static`四种定位有什么区别？](#relativefixedabsolute和static四种定位有什么区别)
- [你使用过哪些现有的 CSS 框架？你是如何改进它们的？](#你使用过哪些现有的-css-框架你是如何改进它们的)
- [你了解 CSS Flexbox 和 Grid 吗？](#你了解-css-flexbox-和-grid-吗)
- [请解释在编写网站时，响应式与移动优先的区别。](#请解释在编写网站时响应式与移动优先的区别)
- [响应式设计与自适应设计有何不同？](#响应式设计与自适应设计有何不同)
- [你有没有使用过视网膜分辨率的图形？当中使用什么技术？](#你有没有使用过视网膜分辨率的图形当中使用什么技术)
- [什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。](#什么情况下用translate而不用绝对定位什么时候情况相反)
### CSS 选择器的优先级是如何计算的？
@ -51,21 +51,21 @@
###### 参考
* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
* https://www.sitepoint.com/web-foundations/specificity/
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
[[↑] 回到顶部](#css-问题)
### 重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？
* **重置（Resetting）**： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像`margin`、`padding`、`font-size`这些样式全部置成一样。你将必须重新定义各种元素的样式。
* **标准化（Normalizing）**： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
- **重置（Resetting）**： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像`margin`、`padding`、`font-size`这些样式全部置成一样。你将必须重新定义各种元素的样式。
- **标准化（Normalizing）**： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。
###### 参考
* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
[[↑] 回到顶部](#css-问题)
@ -81,7 +81,7 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下
```css
.clearfix::after {
content: '';
content: "";
display: block;
clear: both;
}
@ -91,7 +91,7 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下
###### 参考
* https://css-tricks.com/all-about-floats/
- https://css-tricks.com/all-about-floats/
[[↑] 回到顶部](#css-问题)
@ -107,9 +107,9 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
###### 参考
* 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
- 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
[[↑] 回到顶部](#css-问题)
@ -119,10 +119,10 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：
* `float`的值不是`none`.
* `position`的值不是`static`或`relative`.
* `display`的值是`table-cell`、`table-caption`、`inline-block`、`flex`、或`inline-flex`。
* `overflow`的值不是`visible`。
- `float`的值不是`none`.
- `position`的值不是`static`或`relative`.
- `display`的值是`table-cell`、`table-caption`、`inline-block`、`flex`、或`inline-flex`。
- `overflow`的值不是`visible`。
在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。
@ -130,16 +130,16 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
[[↑] 回到顶部](#css-问题)
### 有哪些清除浮动的技术，都适用哪些情况？
* 空`div`方法：`<div style="clear:both;"></div>`。
* Clearfix 方法：上文使用`.clearfix`类已经提到。
* `overflow: auto`或`overflow: hidden`方法：上文已经提到。
- 空`div`方法：`<div style="clear:both;"></div>`。
- Clearfix 方法：上文使用`.clearfix`类已经提到。
- `overflow: auto`或`overflow: hidden`方法：上文已经提到。
在大型项目中，我会使用 Clearfix 方法，在需要的地方使用`.clearfix`。设置`overflow: hidden`的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
@ -148,7 +148,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
### 请解释什么是精灵图（css sprites），以及如何实现？
精灵图，也称雪碧图。因常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。
精灵图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：
1. 使用生成器将多张图片打包成一张精灵图，并为其生成合适的 CSS。
@ -157,31 +157,31 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
好处：
* 减少加载多张图片的 HTTP 请求数（一张精灵图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
* 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在`:hover`伪类中的图片，不会出现闪烁。
- 减少加载多张图片的 HTTP 请求数（一张精灵图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
- 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在`:hover`伪类中的图片，不会出现闪烁。
###### 参考
* https://css-tricks.com/css-sprites/
- https://css-tricks.com/css-sprites/
[[↑] 回到顶部](#css-问题)
### 如何解决不同浏览器的样式兼容性问题？
* 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
* 使用已经处理好此类问题的库，比如 Bootstrap。
* 使用 `autoprefixer` 自动生成 CSS 属性前缀。
* 使用 Reset CSS 或 Normalize.css。
- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
- 使用已经处理好此类问题的库，比如 Bootstrap。
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
- 使用 Reset CSS 或 Normalize.css。
[[↑] 回到顶部](#css-问题)
### 如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？
* 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
* 渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
* 利用 [caniuse.com](https://caniuse.com/) 检查特性支持。
* 使用 `autoprefixer` 自动生成 CSS 属性前缀。
* 使用 [Modernizr](https://modernizr.com/)进行特性检测。
- 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
- 渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
- 利用 [caniuse.com](https://caniuse.com/) 检查特性支持。
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
- 使用 [Modernizr](https://modernizr.com/)进行特性检测。
[[↑] 回到顶部](#css-问题)
@ -189,20 +189,20 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
这些方法与可访问性（a11y）有关。
* `visibility: hidden`：元素仍然在页面流中，并占用空间。
* `width: 0; height: 0`：使元素不占用屏幕上的任何空间，导致不显示它。
* `position: absolute; left: -99999px`： 将它置于屏幕之外。
* `text-indent: -9999px`：这只适用于`block`元素中的文本。
* Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
* WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
- `visibility: hidden`：元素仍然在页面流中，并占用空间。
- `width: 0; height: 0`：使元素不占用屏幕上的任何空间，导致不显示它。
- `position: absolute; left: -99999px`： 将它置于屏幕之外。
- `text-indent: -9999px`：这只适用于`block`元素中的文本。
- Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
- WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。
###### 参考
* https://www.w3.org/TR/wai-aria-1.1/
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
* http://a11yproject.com/
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
[[↑] 回到顶部](#css-问题)
@ -220,19 +220,26 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
### 你熟悉制作 SVG 吗？
是的，你可以使用内联CSS、嵌入式CSS部分或外部CSS文件对形状进行着色（包括指定对象上的属性）。在网上大部分SVG使用的是内联CSS，不过每个类型都有优点和缺点。
是的，你可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件对形状进行着色（包括指定对象上的属性）。在网上大部分 SVG 使用的是内联 CSS，不过每个类型都有优点和缺点。
通过设置`fill`和`stroke`属性，可以完成基本着色操作。`fill`可以设置内部的颜色，`stroke`可以设置周围绘制的线条的颜色。你可以使用与`HTML`中使用的CSS颜色命名方案相同的CSS颜色命名方案：颜色名称（即`red`）、RGB值（即`rgb(255,0,0)`）、十六进制值、RGBA值等等。
通过设置`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"
fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
<rect
x="10"
y="10"
width="100"
height="100"
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
```
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
[[↑] 回到顶部](#css-问题)
@ -241,12 +248,11 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- `all` 适用于所有设备。
- `print` 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
- `screen` 主要适用于彩色的电脑屏幕
- `speech` 解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.
- `speech` 解析 speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.
###### 参考
* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
[[↑] 回到顶部](#css-问题)
@ -261,8 +267,8 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
###### 参考
* https://developers.google.com/web/fundamentals/performance/rendering/
* https://csstriggers.com/
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
[[↑] 回到顶部](#css-问题)
@ -270,17 +276,17 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
优点：
* 提高 CSS 可维护性。
* 易于编写嵌套选择器。
* 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
* 通过混合（Mixins）生成重复的 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.
* 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
- 提高 CSS 可维护性。
- 易于编写嵌套选择器。
- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
- 通过混合（Mixins）生成重复的 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.
- 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
缺点：
* 需要预处理工具。
* 重新编译的时间可能会很慢。
- 需要预处理工具。
- 重新编译的时间可能会很慢。
[[↑] 回到顶部](#css-问题)
@ -288,13 +294,13 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
喜欢：
* 绝大部分优点上题以及提过。
* Less 用 JavaScript 实现，与 NodeJS 高度结合。
- 绝大部分优点上题以及提过。
- Less 用 JavaScript 实现，与 NodeJS 高度结合。
**Dislikes:**
* 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
* Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
- 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
- Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
[[↑] 回到顶部](#css-问题)
@ -312,7 +318,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
###### 参考
* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
[[↑] 回到顶部](#css-问题)
@ -320,13 +326,13 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（`:first-line`，`:first-letter`）或将元素添加到标记中（与 content:...组合），而不必修改标记（`:before`，`:after`）。
* `:first-line`和`:first-letter`可以用来修饰文字。
* 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
* 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
- `:first-line`和`:first-letter`可以用来修饰文字。
- 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
- 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
###### 参考
* https://css-tricks.com/almanac/selectors/a/after-and-before/
- https://css-tricks.com/almanac/selectors/a/after-and-before/
[[↑] 回到顶部](#css-问题)
@ -336,37 +342,37 @@ CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据
CSS 盒模型负责计算：
* 块级元素占用多少空间。
* 边框是否重叠，边距是否合并。
* 盒子的尺寸。
- 块级元素占用多少空间。
- 边框是否重叠，边距是否合并。
- 盒子的尺寸。
盒模型有以下规则：
* 块级元素的大小由`width`、`height`、`padding`、`border`和`margin`决定。
* 如果没有指定`height`，则块级元素的高度等于其包含子元素的内容高度加上`padding`（除非有浮动元素，请参阅下文）。
* 如果没有指定`width`，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的`padding`。
* 元素的`height`是由内容的`height`来计算的。
* 元素的`width`是由内容的`width`来计算的。
* 默认情况下，`padding`和`border`不是元素`width`和`height`的组成部分。
- 块级元素的大小由`width`、`height`、`padding`、`border`和`margin`决定。
- 如果没有指定`height`，则块级元素的高度等于其包含子元素的内容高度加上`padding`（除非有浮动元素，请参阅下文）。
- 如果没有指定`width`，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的`padding`。
- 元素的`height`是由内容的`height`来计算的。
- 元素的`width`是由内容的`width`来计算的。
- 默认情况下，`padding`和`border`不是元素`width`和`height`的组成部分。
###### 参考
* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
[[↑] 回到顶部](#css-问题)
### `* { box-sizing: border-box; }`会产生怎样的效果？
* 元素默认应用了`box-sizing: content-box`，元素的宽高只会决定内容（content）的大小。
* `box-sizing: border-box`改变计算元素`width`和`height`的方式，`border`和`padding`的大小也将计算在内。
* 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
* 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
- 元素默认应用了`box-sizing: content-box`，元素的宽高只会决定内容（content）的大小。
- `box-sizing: border-box`改变计算元素`width`和`height`的方式，`border`和`padding`的大小也将计算在内。
- 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
- 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
[[↑] 回到顶部](#css-问题)
### `display`的属性值都有哪些？
* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
@ -391,23 +397,23 @@ TODO
经过定位的元素，其`position`属性值必然是`relative`、`absolute`、`fixed`或`sticky`。
* `static`：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
* `relative`：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
* `absolute`：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
* `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
* `sticky`：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 `table` 元素的效果与 `position: relative` 相同。
- `static`：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
- `relative`：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
- `absolute`：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
- `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
- `sticky`：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 `table` 元素的效果与 `position: relative` 相同。
###### 参考
* https://developer.mozilla.org/en/docs/Web/CSS/position
- https://developer.mozilla.org/en/docs/Web/CSS/position
[[↑] 回到顶部](#css-问题)
### 你使用过哪些现有的 CSS 框架？你是如何改进它们的？
* **Bootstrap**： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
* **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
* **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
- **Bootstrap**： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
- **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
- **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
[[↑] 回到顶部](#css-问题)
@ -421,7 +427,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
###### 参考
* https://philipwalton.github.io/solved-by-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
[[↑] 回到顶部](#css-问题)
@ -441,9 +447,9 @@ TODO
###### 参考
* 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/
- 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/
[[↑] 回到顶部](#css-问题)
@ -457,7 +463,7 @@ TODO
###### 参考
* https://www.sitepoint.com/css-techniques-for-retina-displays/
- https://www.sitepoint.com/css-techniques-for-retina-displays/
[[↑] 回到顶部](#css-问题)
@ -469,12 +475,12 @@ TODO
###### 参考
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] 回到顶部](#css-问题)
### 其他答案
* 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/
- 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/

106
Translations/Chinese/questions/html-questions.md
View File

@ -2,17 +2,17 @@
本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
* [`DOCTYPE`有什么用？](#doctype有什么用)
* [如何提供包含多种语言内容的页面？](#如何提供包含多种语言内容的页面)
* [在设计开发多语言网站时，需要留心哪些事情？](#在设计开发多语言网站时需要留心哪些事情)
* [什么是`data-`属性？](#什么是data-属性)
* [将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？](#将-html5-看作成开放的网络平台什么是-html5-的基本构件building-block)
* [请描述`cookie`、`sessionStorage`和`localStorage`的区别。](#请描述cookiesessionstorage和localstorage的区别)
* [请描述`<script>`、`<script async>`和`<script defer>`的区别。](#请描述scriptscript-async和script-defer的区别)
* [为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
* [什么是渐进式渲染（progressive rendering）？](#什么是渐进式渲染progressive-rendering)
* [为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。](#为什么在img标签中使用srcset属性请描述浏览器遇到该属性后的处理过程)
* [你有过使用不同模版语言的经历吗？](#你有过使用不同模版语言的经历吗)
- [`DOCTYPE`有什么用？](#doctype有什么用)
- [如何提供包含多种语言内容的页面？](#如何提供包含多种语言内容的页面)
- [在设计开发多语言网站时，需要留心哪些事情？](#在设计开发多语言网站时需要留心哪些事情)
- [什么是`data-`属性？](#什么是data-属性)
- [将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？](#将-html5-看作成开放的网络平台什么是-html5-的基本构件building-block)
- [请描述`cookie`、`sessionStorage`和`localStorage`的区别。](#请描述cookiesessionstorage和localstorage的区别)
- [请描述`<script>`、`<script async>`和`<script defer>`的区别。](#请描述scriptscript-async和script-defer的区别)
- [为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
- [什么是渐进式渲染（progressive rendering）？](#什么是渐进式渲染progressive-rendering)
- [为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。](#为什么在img标签中使用srcset属性请描述浏览器遇到该属性后的处理过程)
- [你有过使用不同模版语言的经历吗？](#你有过使用不同模版语言的经历吗)
### `DOCTYPE`有什么用？
@ -22,9 +22,9 @@
###### 参考
* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
* https://www.w3.org/QA/Tips/Doctype
* https://quirks.spec.whatwg.org/#history
- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
[[↑] 回到顶部](#html-问题)
@ -38,24 +38,24 @@
###### 参考
* https://www.w3.org/International/getting-started/language
- https://www.w3.org/International/getting-started/language
[[↑] 回到顶部](#html-问题)
### 在设计开发多语言网站时，需要留心哪些事情？
* 在 HTML 中使用`lang`属性。
* 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
* 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
* 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
* 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
* 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
* 不要使用连接的翻译字符串——不要做类似这样的事情，比如`“今天的日期是”+具体日期`。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：`I will travel on {% date %}`和`{% date %} 我会出发`。可以看到，语言的语法规则不同，变量的位置是不同的。
* 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
- 在 HTML 中使用`lang`属性。
- 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
- 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
- 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
- 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
- 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
- 不要使用连接的翻译字符串——不要做类似这样的事情，比如`“今天的日期是”+具体日期`。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：`I will travel on {% date %}`和`{% date %} 我会出发`。可以看到，语言的语法规则不同，变量的位置是不同的。
- 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
###### 参考
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
[[↑] 回到顶部](#html-问题)
@ -67,25 +67,25 @@
###### 参考
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
[[↑] 回到顶部](#html-问题)
### 将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？
* 语义 - 提供更准确地描述内容。
* 连接 - 提供新的方式与服务器通信。
* 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
* 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
* 2D/3D 图形和特效 - 提供更多种演示选项。
* 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
* 设备访问 - 允许使用各种输入、输出设备。
* 外观 - 可以开发丰富的主题。
- 语义 - 提供更准确地描述内容。
- 连接 - 提供新的方式与服务器通信。
- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
- 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
- 2D/3D 图形和特效 - 提供更多种演示选项。
- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
- 设备访问 - 允许使用各种输入、输出设备。
- 外观 - 可以开发丰富的主题。
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[[↑] 回到顶部](#html-问题)
@ -95,7 +95,7 @@
| | `cookie` | `localStorage` | `sessionStorage` |
| -------------------------------------------------- | -------------------------------------------------- | -------------- | ---------------- |
| 由谁初始化 | 服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端 | 客户端 |
| 由谁初始化 | 服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端 | 客户端 |
| 过期时间 | 手动设置 | 永不过期 | 当前页面关闭时 |
| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 |
| 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过`Cookie`请求头，自动发送给服务器 | 否 | 否 |
@ -104,24 +104,24 @@
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
[[↑] 回到顶部](#html-问题)
### 请描述`<script>`、`<script async>`和`<script defer>`的区别。
* `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
* `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
* `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
- `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
- `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
- `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
注意：没有`src`属性的脚本，`async`和`defer`属性会被忽略。
###### 参考
* 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/
- 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/
[[↑] 回到顶部](#html-问题)
@ -139,7 +139,7 @@
###### 参考
* https://developer.yahoo.com/performance/rules.html#css_top
- https://developer.yahoo.com/performance/rules.html#css_top
[[↑] 回到顶部](#html-问题)
@ -151,14 +151,14 @@
一些举例：
* 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
* 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
* 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
- 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
- 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
###### 参考
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] 回到顶部](#html-问题)
@ -179,7 +179,7 @@
###### 参考
* https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[[↑] 回到顶部](#html-问题)
@ -191,7 +191,7 @@
### 其它答案
* 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/
- 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/
---

500
Translations/Chinese/questions/javascript-questions.md
View File

File diff suppressed because it is too large Load Diff

10
Translations/Japanese/README.md
View File

@ -29,14 +29,14 @@
## 各国語版
* [English](/README.md)
* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
* [Tagalog](/Translations/Tagalog/README.md)
* [Japanese (日本語)](/Translations/Japanese/README.md)
- [English](/README.md)
- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
- [Tagalog](/Translations/Tagalog/README.md)
- [Japanese (日本語)](/Translations/Japanese/README.md)
**製作中**
* [Korean (한국어)](/Translations/Korean/README.md)
- [Korean (한국어)](/Translations/Korean/README.md)
## 関連情報

276
Translations/Japanese/questions/css-questions.md
View File

@ -2,37 +2,37 @@
[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-の違いは何ですかあなたはどちらを使いますかそしてそれはなぜですか)
* [`float` とは何ですか？どのようにはたらきますか？](#float-とは何ですかどのようにはたらきますか)
* [`z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。](#z-index-とは何かとスタックコンテキストスタック文脈がどのように作られるのかを教えてください)
* [ブロック整形文脈（Block Formatting Context: BFC）とその仕組みを教えてください。](#ブロック整形文脈block-formatting-context-bfcとその仕組みを教えてください)
* [clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？](#clear-を行う手法にはどのようなものがありそれぞれどのような状況に適していますか)
* [CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。](#css-スプライトとは何ですかページやサイトに実装する方法も合わせて説明してください)
* [ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？](#ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか)
* [機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？](#機能の少ないブラウザに対してはどのようにページを提供しますかどのようなテクニックプロセスを使用しますか)
* [コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。](#コンテンツを視覚的に隠すスクリーンリーダーのみ利用可能にする方法にはどのようなものがありますかいくつか教えてください)
* [グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？](#グリッドシステムを使用したことがありますか使ったことがあるならあなたはどのグリッドシステムが好きですか)
* [メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？](#メディアクエリやモバイル固有のレイアウトcss-を使用したり実装したことはありますか)
* [SVG のスタイリングについては詳しいですか？](#svg-のスタイリングについては詳しいですか)
* [`screen` 以外の `@media` プロパティの例を挙げられますか？](#screen-以外の-media-プロパティの例を挙げられますか)
* [効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？](#効率的な-css-を書くにために避けるべき-落とし穴-にはどんなものがありますか)
* [CSS プリプロセッサを使用するメリットとデメリットを教えてください。](#css-プリプロセッサを使用するメリットとデメリットには何がありますか)
* [使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。](#使用したことのある-css-プリプロセッサについて好きなものと嫌いなものを教えてください)
* [非標準フォントを使用する Web サイトを実装するにはどのようにしますか？](#非標準フォントを使用する-web-サイトを実装するにはどのようにしますか)
* [CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。](#css-セレクタにマッチする要素がどれなのかブラウザがどのように決定しているかを説明してください)
* [疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。](#疑似要素について説明しそれらがなんのために使われているかを詳しく話してください)
* [ボックスモデルがなんであるかのあなたの理解と、ボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する複数の方法を説明してください。](#ボックスモデルがなんであるかのあなたの理解と異なるボックスモデルでレイアウトをレンダリングするために-css-でブラウザに指示する方法を説明してください)
* [`* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？](#--box-sizing-border-box--によって何が起きますかその利点は何ですか)
* [CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？](#css-の-display-プロパティとは何ですかその使い方の例をいくつか挙げることができますか)
* [`inline` と `inline-block` の違いは何ですか？](#inline-と-inline-block-の違いは何ですか)
* [`position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？](#position-が-relativefixedabsolutestatic-の要素の違いは何ですか)
* [ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？](#ローカルや本番環境でどの既存の-css-フレームワークを使用していますかまたどのように変更改善していますか)
* [CSS の Flexbox や Grid の仕様で遊んだことはありますか？](#css-の-flexbox-や-grid-の仕様で遊んだことはありますか)
* [ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？](#ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか)
* [レスポンシブデザインはアダプティブデザインと何が違いますか？](#レスポンシブデザインはアダプティブデザインと何が違いますか)
* [Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？](#retina-対応を行ったことはありますかもしあるならいつどのようなテクニックを使いましたか)
* [`position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。](#position-absolute-の代わりに-translate-を使用するべき場合はありますかその逆の場合もありますか理由も合わせて教えてください)
- [CSS セレクターの詳細度とは何ですか？どのようにはたらきますか？](#css-セレクターの詳細度とは何ですかそれはどのようにはたらきますか)
- ["リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？](#リセット-と-ノーマライズ-css-の違いは何ですかあなたはどちらを使いますかそしてそれはなぜですか)
- [`float` とは何ですか？どのようにはたらきますか？](#float-とは何ですかどのようにはたらきますか)
- [`z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。](#z-index-とは何かとスタックコンテキストスタック文脈がどのように作られるのかを教えてください)
- [ブロック整形文脈（Block Formatting Context: BFC）とその仕組みを教えてください。](#ブロック整形文脈block-formatting-context-bfcとその仕組みを教えてください)
- [clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？](#clear-を行う手法にはどのようなものがありそれぞれどのような状況に適していますか)
- [CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。](#css-スプライトとは何ですかページやサイトに実装する方法も合わせて説明してください)
- [ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？](#ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか)
- [機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？](#機能の少ないブラウザに対してはどのようにページを提供しますかどのようなテクニックプロセスを使用しますか)
- [コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。](#コンテンツを視覚的に隠すスクリーンリーダーのみ利用可能にする方法にはどのようなものがありますかいくつか教えてください)
- [グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？](#グリッドシステムを使用したことがありますか使ったことがあるならあなたはどのグリッドシステムが好きですか)
- [メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？](#メディアクエリやモバイル固有のレイアウトcss-を使用したり実装したことはありますか)
- [SVG のスタイリングについては詳しいですか？](#svg-のスタイリングについては詳しいですか)
- [`screen` 以外の `@media` プロパティの例を挙げられますか？](#screen-以外の-media-プロパティの例を挙げられますか)
- [効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？](#効率的な-css-を書くにために避けるべき-落とし穴-にはどんなものがありますか)
- [CSS プリプロセッサを使用するメリットとデメリットを教えてください。](#css-プリプロセッサを使用するメリットとデメリットには何がありますか)
- [使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。](#使用したことのある-css-プリプロセッサについて好きなものと嫌いなものを教えてください)
- [非標準フォントを使用する Web サイトを実装するにはどのようにしますか？](#非標準フォントを使用する-web-サイトを実装するにはどのようにしますか)
- [CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。](#css-セレクタにマッチする要素がどれなのかブラウザがどのように決定しているかを説明してください)
- [疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。](#疑似要素について説明しそれらがなんのために使われているかを詳しく話してください)
- [ボックスモデルがなんであるかのあなたの理解と、ボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する複数の方法を説明してください。](#ボックスモデルがなんであるかのあなたの理解と異なるボックスモデルでレイアウトをレンダリングするために-css-でブラウザに指示する方法を説明してください)
- [`* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？](#--box-sizing-border-box--によって何が起きますかその利点は何ですか)
- [CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？](#css-の-display-プロパティとは何ですかその使い方の例をいくつか挙げることができますか)
- [`inline` と `inline-block` の違いは何ですか？](#inline-と-inline-block-の違いは何ですか)
- [`position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？](#position-が-relativefixedabsolutestatic-の要素の違いは何ですか)
- [ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？](#ローカルや本番環境でどの既存の-css-フレームワークを使用していますかまたどのように変更改善していますか)
- [CSS の Flexbox や Grid の仕様で遊んだことはありますか？](#css-の-flexbox-や-grid-の仕様で遊んだことはありますか)
- [ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？](#ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか)
- [レスポンシブデザインはアダプティブデザインと何が違いますか？](#レスポンシブデザインはアダプティブデザインと何が違いますか)
- [Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？](#retina-対応を行ったことはありますかもしあるならいつどのようなテクニックを使いましたか)
- [`position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。](#position-absolute-の代わりに-translate-を使用するべき場合はありますかその逆の場合もありますか理由も合わせて教えてください)
### CSS セレクターの詳細度とは何ですか？それはどのようにはたらきますか？
@ -51,21 +51,21 @@
###### 参考
* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
* https://www.sitepoint.com/web-foundations/specificity/
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
[[↑] 先頭に戻る](#css-に関する質問)
### "リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？
* **リセット** - リセットとは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。例えば、`margin`、`padding`、`font-size` は全て同じ要素にリセットされます。一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。
* **ノーマライズ** - ノーマライズでは、すべてのスタイルを削除するのではなく、有用なデフォルトスタイルは保持します。合わせて、一般的なブラウザの依存関係のバグを修正します。
- **リセット** - リセットとは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。例えば、`margin`、`padding`、`font-size` は全て同じ要素にリセットされます。一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。
- **ノーマライズ** - ノーマライズでは、すべてのスタイルを削除するのではなく、有用なデフォルトスタイルは保持します。合わせて、一般的なブラウザの依存関係のバグを修正します。
私は非常にカスタマイズされた、または一般的ではないデザインのサイトを作成する際にはリセットを選択します。これらの場合、自分のスタイリングをたくさん行う必要があり、デフォルトのスタイリングを保存する必要がないためです。
###### 参考
* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
[[↑] 先頭に戻る](#css-に関する質問)
@ -81,7 +81,7 @@ CSS の `clear` プロパティは、`left`/`right`/`both` フロート要素の
```css
.clearfix:after {
content: ' ';
content: " ";
visibility: hidden;
display: block;
height: 0;
@ -93,7 +93,7 @@ CSS の `clear` プロパティは、`left`/`right`/`both` フロート要素の
###### 参考
* https://css-tricks.com/all-about-floats/
- https://css-tricks.com/all-about-floats/
[[↑] 先頭に戻る](#css-に関する質問)
@ -109,10 +109,10 @@ CSS の `z-index` プロパティは、重なっている要素の垂直方向
###### 参考
* 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 (英語)
* https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context (日本語)
- 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 (英語)
- https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context (日本語)
[[↑] 先頭に戻る](#css-に関する質問)
@ -122,10 +122,10 @@ CSS の `z-index` プロパティは、重なっている要素の垂直方向
BFC は、以下の条件の少なくとも 1 つを満たす HTML ボックスです。
* `float` の値は `none` ではありません。
* `position` の値は `static` でも `relative` でもありません。
* `display` の値は `table-cell`、`table-caption`、`inline-block`、`flex`、`inline-flex` です。
* `overflow` の値は `visible` ではありません。
- `float` の値は `none` ではありません。
- `position` の値は `static` でも `relative` でもありません。
- `display` の値は `table-cell`、`table-caption`、`inline-block`、`flex`、`inline-flex` です。
- `overflow` の値は `visible` ではありません。
BFC では、各ボックスの左端が包含ブロックの左端に接します（右から左への書式設定、右端からのタッチ）。
@ -133,17 +133,17 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context (英語)
* https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context (英語)
- https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
[[↑] 先頭に戻る](#css-に関する質問)
### clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？
* 空の `div` メソッド - `<div style="clear:both;"></div>`
* Clearfix メソッド - 上記の `.clearfix` クラスを参照してください。
* `overflow: auto` または `overflow: hidden` メソッド - 親は新しいブロック書式設定コンテキストを確立し、float された子を含むように展開します。
- 空の `div` メソッド - `<div style="clear:both;"></div>`
- Clearfix メソッド - 上記の `.clearfix` クラスを参照してください。
- `overflow: auto` または `overflow: hidden` メソッド - 親は新しいブロック書式設定コンテキストを確立し、float された子を含むように展開します。
大規模なプロジェクトでは、ユーティリティ `.clearfix` クラスを作成し、必要な場所で使用します。子供が親よりも背が高く、それほど理想的でない場合、`overflow: hidden` は子供をクリップするかもしれません。
@ -159,31 +159,31 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
**利点:**
* 複数のイメージに対する HTTP リクエストの数を減らす（スプライトシートごとに 1 回のリクエストが 1 回だけ必要）。しかし、HTTP2 では複数のイメージを読み込むことはもはや大きな問題にはなりません。
* 必要なまでダウンロードされないアセットの事前ダウンロード。例えば、`:hover` 疑似ステートにのみ現れるイメージ。点滅は見られない。
- 複数のイメージに対する HTTP リクエストの数を減らす（スプライトシートごとに 1 回のリクエストが 1 回だけ必要）。しかし、HTTP2 では複数のイメージを読み込むことはもはや大きな問題にはなりません。
- 必要なまでダウンロードされないアセットの事前ダウンロード。例えば、`:hover` 疑似ステートにのみ現れるイメージ。点滅は見られない。
###### 参考
* https://css-tricks.com/css-sprites/
- https://css-tricks.com/css-sprites/
[[↑] 先頭に戻る](#css-に関する質問)
### ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？
* 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。
* これらのスタイリングの問題を既に処理している Bootstrap のようなライブラリを使用してください。
* ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
* Reset CSS または Normalize.css を使用してください。
- 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。
- これらのスタイリングの問題を既に処理している Bootstrap のようなライブラリを使用してください。
- ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
- Reset CSS または Normalize.css を使用してください。
[[↑] 先頭に戻る](#css-に関する質問)
### 機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？
* グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。
* プログレッシブ・エンハンス（Progressive Enhancement） - 基本レベルのユーザーエクスペリエンスのためのアプリケーションを構築するが、ブラウザーがそれをサポートするときに機能拡張を追加するプラクティス。
* 機能のサポートを確認するには、[caniuse.com](https://caniuse.com/) を使用してください。
* 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
* [Modernizr](https://modernizr.com/) を使った機能の検出
- グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。
- プログレッシブ・エンハンス（Progressive Enhancement） - 基本レベルのユーザーエクスペリエンスのためのアプリケーションを構築するが、ブラウザーがそれをサポートするときに機能拡張を追加するプラクティス。
- 機能のサポートを確認するには、[caniuse.com](https://caniuse.com/) を使用してください。
- 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
- [Modernizr](https://modernizr.com/) を使った機能の検出
[[↑] 先頭に戻る](#css-に関する質問)
@ -191,21 +191,21 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
これらの技術はアクセシビリティ（a11y）に関連しています。
* `visibility: hidden`： しかし、要素はまだページの流れにあり、まだ空間を占めています。
* `width: 0; height: 0`： 要素が画面上のスペースを全く占めないようにして、それを表示しないようにします。
* `position: absolute; left: -99999px`： 画面の外側に配置します。
* `text-indent: -9999px`： これは `block` 要素内のテキストに対してのみ機能します。
* メタデータ： たとえば、Schema.org、RDF、JSON-LD を使用します。
* WAI-ARIA： Web ページのアクセシビリティを向上させる方法を指定する W3C の技術仕様。
- `visibility: hidden`： しかし、要素はまだページの流れにあり、まだ空間を占めています。
- `width: 0; height: 0`： 要素が画面上のスペースを全く占めないようにして、それを表示しないようにします。
- `position: absolute; left: -99999px`： 画面の外側に配置します。
- `text-indent: -9999px`： これは `block` 要素内のテキストに対してのみ機能します。
- メタデータ： たとえば、Schema.org、RDF、JSON-LD を使用します。
- WAI-ARIA： Web ページのアクセシビリティを向上させる方法を指定する W3C の技術仕様。
WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute` による位置決定手法を採用しています。注意すべきことが少なく、ほとんどの要素に対応している簡単な手法だからです。
###### 参考
* https://www.w3.org/TR/wai-aria-1.1/
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA (英語)
* https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
* http://a11yproject.com/
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA (英語)
- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
- http://a11yproject.com/
[[↑] 先頭に戻る](#css-に関する質問)
@ -231,10 +231,10 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
はい、@media プロパティには `screen` も含めて４つの種類があります。:
* `all` - 全てのデバイス
* `print` - プリンター
* `speech` - ページを読み上げるスクリーンリーダー
* `screen` - コンピュータスクリーンやタブレット、スマートフォンなど
- `all` - 全てのデバイス
- `print` - プリンター
- `speech` - ページを読み上げるスクリーンリーダー
- `screen` - コンピュータスクリーンやタブレット、スマートフォンなど
`print` メディアタイプの使い方の例:
@ -258,8 +258,8 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
###### 参考
* https://developers.google.com/web/fundamentals/performance/rendering/
* https://csstriggers.com/
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
[[↑] 先頭に戻る](#css-に関する質問)
@ -267,15 +267,15 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
**メリット:**
* CSS のメンテナンス性が向上しました。
* ネストされたセレクタを書きやすい。
* 一貫したテーマ設定のための変数。異なるプロジェクト間でテーマファイルを共有できます。
* ミックスインは繰り返し CSS を生成します。
* あなたのコードを複数のファイルに分割する。CSS ファイルも分割することができますが、そのためには各 CSS ファイルをダウンロードするための HTTP リクエストが必要です。
- CSS のメンテナンス性が向上しました。
- ネストされたセレクタを書きやすい。
- 一貫したテーマ設定のための変数。異なるプロジェクト間でテーマファイルを共有できます。
- ミックスインは繰り返し CSS を生成します。
- あなたのコードを複数のファイルに分割する。CSS ファイルも分割することができますが、そのためには各 CSS ファイルをダウンロードするための HTTP リクエストが必要です。
**デメリット:**
* 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
- 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
[[↑] 先頭に戻る](#css-に関する質問)
@ -283,13 +283,13 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
**好きなもの:**
* 主に上記の利点。
* Less は JavaScript で書かれており、Node でうまくいきます。
- 主に上記の利点。
- Less は JavaScript で書かれており、Node でうまくいきます。
**嫌いなもの:**
* C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
* Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
- C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
- Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
[[↑] 先頭に戻る](#css-に関する質問)
@ -307,7 +307,7 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
###### 参考
* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
[[↑] 先頭に戻る](#css-に関する質問)
@ -315,13 +315,13 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
CSS 疑似要素はセレクタに追加されたキーワードで、選択した要素の特定の部分をスタイルすることができます。マークアップ(`:before`, `:after`)を変更しなくても、マークアップ(combined with `content: ...`)への要素の追加やデコレーション(`:first-line`, `:first-letter`) に使用できます。
* `:first-line` と `:first-letter` を使ってテキストを装飾することができます。
* 上記の `.clearfix` ハックで、`clear:both` でゼロスペースの要素を追加するために使用されます。
* ツールチップの三角形の矢印は `:before` と `:after` を使います。三角形は実際には DOM ではなくスタイリングの一部とみなされるため、懸念の分離を促します。追加の HTML 要素を使用せずに CSS スタイルだけで三角形を描画することは、実際には不可能です。
- `:first-line` と `:first-letter` を使ってテキストを装飾することができます。
- 上記の `.clearfix` ハックで、`clear:both` でゼロスペースの要素を追加するために使用されます。
- ツールチップの三角形の矢印は `:before` と `:after` を使います。三角形は実際には DOM ではなくスタイリングの一部とみなされるため、懸念の分離を促します。追加の HTML 要素を使用せずに CSS スタイルだけで三角形を描画することは、実際には不可能です。
###### 参考
* https://css-tricks.com/almanac/selectors/a/after-and-before/
- https://css-tricks.com/almanac/selectors/a/after-and-before/
[[↑] 先頭に戻る](#css-に関する質問)
@ -331,37 +331,37 @@ CSS ボックスモデルは、ドキュメントツリー内の要素に対し
CSS ボックスモデルは、次の計算を行います。
* ブロック要素がどれくらいのスペースを占めるか。
* 枠線や余白が重なるかどうか、または折りたたむかどうか。
* ボックスの寸法。
- ブロック要素がどれくらいのスペースを占めるか。
- 枠線や余白が重なるかどうか、または折りたたむかどうか。
- ボックスの寸法。
ボックスモデルには次の規則があります。
* ブロック要素の大きさは、`width`、`height`、`padding`、`border` および `margin` によって計算されます。
* `height` が指定されていない場合、ブロック要素は含まれている内容と同じくらい高くなります（フロートがない限り、以下参照）。
* `width` が指定されていない場合、フロートのブロック要素は、その親の幅から `padding` の幅に収まるように展開されます。
* 要素の `height` は内容の `height` によって計算されます。
* 要素の `width` は内容の `width` によって計算されます。
* デフォルトでは、`padding` と `border` は要素の `width` と `height` の一部ではありません。
- ブロック要素の大きさは、`width`、`height`、`padding`、`border` および `margin` によって計算されます。
- `height` が指定されていない場合、ブロック要素は含まれている内容と同じくらい高くなります（フロートがない限り、以下参照）。
- `width` が指定されていない場合、フロートのブロック要素は、その親の幅から `padding` の幅に収まるように展開されます。
- 要素の `height` は内容の `height` によって計算されます。
- 要素の `width` は内容の `width` によって計算されます。
- デフォルトでは、`padding` と `border` は要素の `width` と `height` の一部ではありません。
###### 参考
* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
[[↑] 先頭に戻る](#css-に関する質問)
### `* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？
* デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。
* `box-sizing：border-box` は、要素の `width` と `height` がどのように計算されるかを変更し、`border` と `padding` も計算に含めます。
* 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
* 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
- デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。
- `box-sizing：border-box` は、要素の `width` と `height` がどのように計算されるかを変更し、`border` と `padding` も計算に含めます。
- 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
- 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
[[↑] 先頭に戻る](#css-に関する質問)
### CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？
* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`
TODO
@ -371,14 +371,14 @@ TODO
比較のために `block` も並べます。
| | `block` | `inline-block` | `inline` |
| ----------------------------------| ------------------------------------------------------------| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| サイズ | 親要素の幅と同じになる。 | 要素によって変わる。 | 要素によって変わる。 |
| ポジショニング | 新しい行から始まり、隣に要素を並べられない。(`float`を使う場合を除く) | 他の要素とフローし、隣に要素を並べることができる。 | 他の要素とフローし、隣に要素を並べることができる。 |
| `width` と `height` の指定ができるか | はい | はい | いいえ、設定をしても無視される。 |
| `vertical-align` を指定できるか | いいえ | はい | はい |
| マージンとパディング | 上下左右に指定できる。 | 上下左右に指定できる。 | 左右のみ指定可能。上下に指定をしてもレイアウトに影響はない。 `border` と `padding` が要素の周りに視覚的に現れていても、上下のスペースは `line-height` によって決まる。 |
| フロート | - | - | 上下の `margins` と `paddings` を設定できる `block` 要素のようになる。 |
| | `block` | `inline-block` | `inline` |
| ------------------------------------ | --------------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| サイズ | 親要素の幅と同じになる。 | 要素によって変わる。 | 要素によって変わる。 |
| ポジショニング | 新しい行から始まり、隣に要素を並べられない。(`float`を使う場合を除く) | 他の要素とフローし、隣に要素を並べることができる。 | 他の要素とフローし、隣に要素を並べることができる。 |
| `width` と `height` の指定ができるか | はい | はい | いいえ、設定をしても無視される。 |
| `vertical-align` を指定できるか | いいえ | はい | はい |
| マージンとパディング | 上下左右に指定できる。 | 上下左右に指定できる。 | 左右のみ指定可能。上下に指定をしてもレイアウトに影響はない。 `border` と `padding` が要素の周りに視覚的に現れていても、上下のスペースは `line-height` によって決まる。 |
| フロート | - | - | 上下の `margins` と `paddings` を設定できる `block` 要素のようになる。 |
[[↑] 先頭に戻る](#css-に関する質問)
@ -386,24 +386,24 @@ TODO
配置された要素は、計算された `position` プロパティが `relative`、`absolute`、`fixed` または `sticky` のいずれかである要素です。
* `static` - デフォルトの位置です。要素は通常どおりページに流れます。`top`、`right`、`bottom`、`left`、`z-index` プロパティは適用されません。
* `relative` - 要素の位置は、レイアウトを変更することなく、それ自体に対して相対的に調整されます（したがって、配置されていなかった要素の隙間を残します）。
* `absolute` - 要素は、ページのフローから削除され、もしあれば、最も近い位置にある祖先に対して指定された位置に置かれます。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。これらの要素は他の要素の位置に影響しません。
* `fixed` - 要素は、ページのフローから削除され、ビューポートに対して指定された位置に配置され、スクロールすると移動しません。
* `sticky` - スティッキーポジショニングは、相対位置と固定位置のハイブリッドです。要素は、指定されたしきい値を超えるまで、相対的な位置として扱われます。その時点で、`fixed` の位置として扱われます。
- `static` - デフォルトの位置です。要素は通常どおりページに流れます。`top`、`right`、`bottom`、`left`、`z-index` プロパティは適用されません。
- `relative` - 要素の位置は、レイアウトを変更することなく、それ自体に対して相対的に調整されます（したがって、配置されていなかった要素の隙間を残します）。
- `absolute` - 要素は、ページのフローから削除され、もしあれば、最も近い位置にある祖先に対して指定された位置に置かれます。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。これらの要素は他の要素の位置に影響しません。
- `fixed` - 要素は、ページのフローから削除され、ビューポートに対して指定された位置に配置され、スクロールすると移動しません。
- `sticky` - スティッキーポジショニングは、相対位置と固定位置のハイブリッドです。要素は、指定されたしきい値を超えるまで、相対的な位置として扱われます。その時点で、`fixed` の位置として扱われます。
###### 参考
* https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
* https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
- https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
- https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
[[↑] 先頭に戻る](#css-に関する質問)
### ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？
* **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ 2 年間アルファになっています。広く使用されているように、スピナーボタンコンポーネントを追加します。
* **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
* **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
- **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ 2 年間アルファになっています。広く使用されているように、スピナーボタンコンポーネントを追加します。
- **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
- **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
[[↑] 先頭に戻る](#css-に関する質問)
@ -417,7 +417,7 @@ Flexbox は、コンテナ内の要素の垂直方向のセンタリング、ス
###### 参考
* https://philipwalton.github.io/solved-by-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
[[↑] 先頭に戻る](#css-に関する質問)
@ -437,10 +437,10 @@ TODO
###### 参考
* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design (英語)
* https://developer.mozilla.org/ja/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/
- https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design (英語)
- https://developer.mozilla.org/ja/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/
[[↑] 先頭に戻る](#css-に関する質問)
@ -454,7 +454,7 @@ TODO
###### 参考
* https://www.sitepoint.com/css-techniques-for-retina-displays/
- https://www.sitepoint.com/css-techniques-for-retina-displays/
[[↑] 先頭に戻る](#css-に関する質問)
@ -466,12 +466,12 @@ TODO
###### 参考
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] 先頭に戻る](#css-に関する質問)
### 他の方の回答集
* 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/
- 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/

116
Translations/Japanese/questions/html-questions.md
View File

@ -2,17 +2,17 @@
[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-は何のためにあるものですか)
* [どのようにすれば複数の言語のコンテンツを含むページを提供できますか？](#どのようにすれば複数の言語のコンテンツを含むページを提供できますか)
* [多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？](#多言語サイトを設計開発する際にはどんなことに注意を払わなければならないですか)
* [`data-` 属性は何のために使われるのですか？](#data--属性は何のために使われるのですか)
* [HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？](#html5-をオープンウェブプラットフォームとして考えたときにhtml5-とはどんな要素から成るものですか)
* [`cookie`、`sessionStorage`、`localStorage` の違いを教えてください。](#cookiesessionstoragelocalstorage-の違いを教えてください)
* [`<script>`、`<script async>`、`<script defer>` の違いを教えてください。](#scriptscript-asyncscript-defer-の違いを教えてください)
* [なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？](#なぜ一般的にcss-の-link-を-headhead-の間にjs-の-script-を-body-の直前に置くことが良いと言われているのでしょうかこうすべきでない例外を知っていますか)
* [プログレッシブレンダリングとは何ですか？](#プログレッシブレンダリングとは何ですか)
* [img タグに `srcset` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。](#img-タグに-srcset-属性を使用する理由はこの属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください)
* [HTML テンプレート言語をいくつか使用した経験はありますか？](#html-テンプレート言語をいくつか使用した経験はありますか)
- [`DOCTYPE` は何のためにあるものですか？](#doctype-は何のためにあるものですか)
- [どのようにすれば複数の言語のコンテンツを含むページを提供できますか？](#どのようにすれば複数の言語のコンテンツを含むページを提供できますか)
- [多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？](#多言語サイトを設計開発する際にはどんなことに注意を払わなければならないですか)
- [`data-` 属性は何のために使われるのですか？](#data--属性は何のために使われるのですか)
- [HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？](#html5-をオープンウェブプラットフォームとして考えたときにhtml5-とはどんな要素から成るものですか)
- [`cookie`、`sessionStorage`、`localStorage` の違いを教えてください。](#cookiesessionstoragelocalstorage-の違いを教えてください)
- [`<script>`、`<script async>`、`<script defer>` の違いを教えてください。](#scriptscript-asyncscript-defer-の違いを教えてください)
- [なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？](#なぜ一般的にcss-の-link-を-headhead-の間にjs-の-script-を-body-の直前に置くことが良いと言われているのでしょうかこうすべきでない例外を知っていますか)
- [プログレッシブレンダリングとは何ですか？](#プログレッシブレンダリングとは何ですか)
- [img タグに `srcset` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。](#img-タグに-srcset-属性を使用する理由はこの属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください)
- [HTML テンプレート言語をいくつか使用した経験はありますか？](#html-テンプレート言語をいくつか使用した経験はありますか)
### `DOCTYPE` は何のためにあるものですか？
@ -22,9 +22,9 @@
###### 参考
* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
* https://www.w3.org/QA/Tips/Doctype
* https://quirks.spec.whatwg.org/#history
- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
[[↑] 先頭に戻る](#html-に関する質問)
@ -38,24 +38,24 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
###### 参考
* https://www.w3.org/International/getting-started/language
- https://www.w3.org/International/getting-started/language
[[↑] 先頭に戻る](#html-に関する質問)
### 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？
* HTML に `lang` 属性を使います。
* ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにします。
* 画像によるテキストを使用することはスケーラブルな方法ではない - 確かに画像にテキストを配置することは、システムに無い見栄えの良いフォントをあらゆるコンピュータに表示させるための一般的な方法です。しかし、画像によるテキストを翻訳するにはテキストごとに各言語用の別々の画像が必要になります。このような画像の変換はほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
* 制限的な言葉/文章の長さ - 別の言語で書くとコンテンツの長さが変わるので、デザインのレイアウトやオーバーフローの問題に注意します。テキスト量でデザインを決めるのは避けるべきです。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
* 色がどのように認識されているかに注意します。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
* 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
* 翻訳された文字列を連結しない - `"今日の日付は" + date` のことです。異なる言語で単語の順序は変化するのです。かわりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の 2 つの文章をそれぞれ日本語と英語で見てみましょう： `私は{% date %}に旅行します` と `I will travel on {% date %}` です。変数の位置は、言語の文法規則によって異なることに注意する必要があります。
* 言語の読む方向 - 英語では、左から右、上から下へ向かって読みますが、日本語では伝統的に、上から下へ、右から左へ向かって読みます。
- HTML に `lang` 属性を使います。
- ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにします。
- 画像によるテキストを使用することはスケーラブルな方法ではない - 確かに画像にテキストを配置することは、システムに無い見栄えの良いフォントをあらゆるコンピュータに表示させるための一般的な方法です。しかし、画像によるテキストを翻訳するにはテキストごとに各言語用の別々の画像が必要になります。このような画像の変換はほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
- 制限的な言葉/文章の長さ - 別の言語で書くとコンテンツの長さが変わるので、デザインのレイアウトやオーバーフローの問題に注意します。テキスト量でデザインを決めるのは避けるべきです。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
- 色がどのように認識されているかに注意します。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
- 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
- 翻訳された文字列を連結しない - `"今日の日付は" + date` のことです。異なる言語で単語の順序は変化するのです。かわりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の 2 つの文章をそれぞれ日本語と英語で見てみましょう： `私は{% date %}に旅行します` と `I will travel on {% date %}` です。変数の位置は、言語の文法規則によって異なることに注意する必要があります。
- 言語の読む方向 - 英語では、左から右、上から下へ向かって読みますが、日本語では伝統的に、上から下へ、右から左へ向かって読みます。
###### 参考
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
[[↑] 先頭に戻る](#html-に関する質問)
@ -67,26 +67,26 @@ JavaScript フレームワークが普及する前に、フロントエンドの
###### 参考
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
[[↑] 先頭に戻る](#html-に関する質問)
### HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？
* セマンティクス - コンテンツを正確に記述できるようにします。
* 接続性 - 新しく革新的な方法でサーバーと通信することができます。
* オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
* マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
* 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
* パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
* デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
* スタイリング - 製作者はより洗練されたテーマを書くことができます。
- セマンティクス - コンテンツを正確に記述できるようにします。
- 接続性 - 新しく革新的な方法でサーバーと通信することができます。
- オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
- マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
- 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
- パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
- デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
- スタイリング - 製作者はより洗練されたテーマを書くことができます。
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
* https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
- https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)
[[↑] 先頭に戻る](#html-に関する質問)
@ -105,25 +105,25 @@ JavaScript フレームワークが普及する前に、フロントエンドの
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies (英語)
* https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
* http://tutorial.techaltum.com/local-and-session-storage.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies (英語)
- https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
- http://tutorial.techaltum.com/local-and-session-storage.html
[[↑] 先頭に戻る](#html-に関する質問)
### `<script>`、`<script async>`、`<script defer>` の違いを教えてください。
* `<script>` - HTML 解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後に HTML 解析が再開されます。
* `<script async>` - スクリプトは HTML 解析と並行して取得され、利用可能になるとすぐに（HTML 解析が完了する前に）実行されます。スクリプトがページ上の他のスクリプト（アナリティックスなど）と独立している場合は、`async` を使用します。
* `<script defer>` - スクリプトは HTML 解析と並行して取得され、ページの解析が完了すると実行されます。複数のスクリプトがある場合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されます。スクリプトが完全に解析された DOM に依存している場合、`defer` 属性は HTML が実行前に完全に解析されることを保証するのに役立ちます。`<body>` の最後に通常の `<script>` を置くことと大した違いはありません。遅延されたスクリプトは `document.write` を含んではいけません。
- `<script>` - HTML 解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後に HTML 解析が再開されます。
- `<script async>` - スクリプトは HTML 解析と並行して取得され、利用可能になるとすぐに（HTML 解析が完了する前に）実行されます。スクリプトがページ上の他のスクリプト（アナリティックスなど）と独立している場合は、`async` を使用します。
- `<script defer>` - スクリプトは HTML 解析と並行して取得され、ページの解析が完了すると実行されます。複数のスクリプトがある場合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されます。スクリプトが完全に解析された DOM に依存している場合、`defer` 属性は HTML が実行前に完全に解析されることを保証するのに役立ちます。`<body>` の最後に通常の `<script>` を置くことと大した違いはありません。遅延されたスクリプトは `document.write` を含んではいけません。
注意： `src` 属性を持たないスクリプトでは `async` と `defer` 属性は無視されます。
###### 参考
* 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/
- 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/
[[↑] 先頭に戻る](#html-に関する質問)
@ -141,7 +141,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
###### 参考
* https://developer.yahoo.com/performance/rules.html#css_top
- https://developer.yahoo.com/performance/rules.html#css_top
[[↑] 先頭に戻る](#html-に関する質問)
@ -153,14 +153,14 @@ JavaScript フレームワークが普及する前に、フロントエンドの
このような技術の例：
* 画像の遅延読み込み - ページ上の画像が一度に読み込まれないようにします。ユーザーが画像を表示するページの部分にスクロールすると、JavaScript が使用されて画像がロードされます。
* 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小の CSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
* 非同期 HTML フラグメント - HTML の一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)にあります。
- 画像の遅延読み込み - ページ上の画像が一度に読み込まれないようにします。ユーザーが画像を表示するページの部分にスクロールすると、JavaScript が使用されて画像がロードされます。
- 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小の CSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
- 非同期 HTML フラグメント - HTML の一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](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/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] 先頭に戻る](#html-に関する質問)
@ -168,9 +168,9 @@ JavaScript フレームワークが普及する前に、フロントエンドの
デバイスの表示幅に応じて異なるイメージをユーザーに提供したい場合は、`srcset` 属性を使用します。Retina ディスプレイに高品質のイメージを表示することでユーザー体験を向上させ、ローエンドのデバイスに低解像度のイメージを提供することでパフォーマンスとデータ量削減に貢献します（ローエンドでは高品質イメージを提供しても綺麗になりません）。例：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` はブラウザに小、中、大のいずれかを表示するように指示します。クライアントの解像度に応じて「jpg」グラフィックを表示します。最初の値はイメージ名で、2 番目の値はイメージのピクセル単位の幅です。320px のデバイス幅の場合、次の計算が行われます。
* 500/320 = 1.5625
* 1000/320 = 3.125
* 2000/320 = 6.25
- 500/320 = 1.5625
- 1000/320 = 3.125
- 2000/320 = 6.25
クライアントの解像度が 1x の場合、1.5625 が最も近く、`small.jpg` に対応する `500w` がブラウザによって選択されます。
@ -180,8 +180,8 @@ JavaScript フレームワークが普及する前に、フロントエンドの
###### 参考
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] 先頭に戻る](#html-に関する質問)
@ -193,7 +193,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
### 他の方の回答集
* 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/
- 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/
---

490
Translations/Japanese/questions/javascript-questions.md
View File

@ -2,72 +2,72 @@
[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-はどう機能するものなのか説明してください)
* [プロトタイプ継承はどのように機能するか説明してください。](#プロトタイプ継承はどのように機能するか説明してください)
* [AMD と CommonJS は何が違いますか？](#amd-と-commonjs-は何が違いますか)
* [なぜ次のコードは IIFE として機能しないのでしょうか？:`function foo(){ }();` IIFE として機能させるには何を変える必要がありますか？](#なぜ次のコードは-iife-として機能しないのでしょうかfunction-foo--iife-として機能させるには何を変える必要がありますか)
* [変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？](#変数が-nullundefined未定義だったときの違いはなんでしょうどのようにしてこれらの状態を調べますか)
* [クロージャとはなんですか？また、なぜこれを使うのでしょうか？どのように使うのでしょうか？](#クロージャとはなんですかまたなぜこれを使うのでしょうかどのように使うのでしょうか)
* [`.forEach` と `.map()` の違いを説明できますか？これらをどのように使い分けますか？](#foreach-と-map-の違いを説明できますかこれらをどのように使い分けますか)
* [無名関数の典型的な使い方を教えてください。](#無名関数の典型的な使い方を教えてください)
* [どのようなことを意識してコードを組み立てていますか？（モジュールパターン, classical inheritance？）](#どのようなことを意識してコードを組み立てていますか-モジュールパターン-classical-inheritance)
* [host objects と native objects は何が違いますか？](#host-objects-と-native-objects-は何が違いますか)
* [次のコードの違いはなんですか？:`function Person(){}` 後、`var person = Person()` と `var person = new Person()`](#次のコードの違いはなんですか-function-person-後var-person--person-と-var-person--new-person)
* [`.call` と `.apply` の違いはなんですか？](#call-と-apply-の違いはなんですか)
* [`Function.prototype.bind` について説明してください。](#functionprototypebind-について説明してください)
* [`document.write()` はいつ使いますか？](#documentwrite-はいつ使いますか)
* [feature detection, feature inference, and using the UA string の違いはなんですか？](#feature-detection-feature-inference-and-using-the-ua-string-の違いはなんですか)
* [Ajax をできるだけ詳しく説明してください。](#ajax-をできるだけ詳しく説明してください)
* [Ajax を利用する利点と欠点はなんですか？](#ajax-を利用する利点と欠点はなんですか)
* [JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。](#jsonp-がどのように機能するかまたそれが-ajax-とはどこが違うのかを説明してください)
* [JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？](#javascript-templating-を使ったことがありますか-もしあればどのライブラリを使ったことがありますか)
* ["巻き上げ"について説明してください。](#巻き上げについて説明してください)
* [event bubbling について教えてください。](#event-bubbling-について教えてください)
* ["attribute" と "property" の違いを説明してください。](#attribute-と-property-の違いを説明してください)
* [ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？](#ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか)
* [document `load` event と document `DOMContentLoaded` event の違いは？](#document-load-event-と-document-domcontentloaded-event-の違いは)
* [`==` と `===` の違いはなんですか？](#-と--の違いはなんですか)
* [JavaScript の同一オリジンポリシーについて説明してください。](#javascript-の同一オリジンポリシーについて説明してください)
* [以下のコードを動くようにしてください: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#以下のコードを動くようにしてください)
* [それが　 Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？](#それがternary-expression-と呼ばれるのはなぜですか-ternary-はどういう意味で使われているのでしょうか)
* [`"use strict";` とはなんですか？これを使う利点と欠点を教えてください。](#use-strict-とはなんですかこれを使う利点と欠点を教えてください)
* [**"fizz"** を`3`の倍数で、**"buzz"** を`5`の倍数で、**"fizzbuzz"** を`3`と`5`の倍数で出力する`100`まで反復する for ループを作成してください。](#fizz-を3の倍数でbuzz-を5の倍数でfizzbuzz-を3と5の倍数で出力する100まで反復する-for-ループを作成してください)
* [Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？](#web-サイトのグローバルスコープをそのままの状態を保ち決して触らないことが一般的に良いとされているのはなぜですか)
* [なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？](#なぜあなたは-load-イベントのようなものを使うのですかこのイベントには欠点がありますかあなたは何か選択肢を知っていますかなぜそれらを使うのですか)
* [シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。](#シングルページアプリが何であるかそして-seo-に優しいアプリを作る方法を説明してください)
* [プロミスおよび/またはそのポリフィルの経験はどの程度ですか？](#プロミスおよびまたはそのポリフィルの経験はどの程度ですか)
* [コールバックの代わりにプロミスを使用することの長所と短所は何ですか？](#コールバックの代わりにプロミスを使用することの長所と短所は何ですか)
* [JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。](#javascript-にコンパイルしてくれる言語で-javascript-を書く利点と欠点をいくつか教えてください)
* [JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？](#javascript-のコードをデバッグする際にはどんなツールや技術をを利用しますか)
* [オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？](#オブジェクトのプロパティや配列の要素をイテレートする際にどの構文を使いますか)
* [mutable と immutable オブジェクトの違いを説明してください](#mutable-と-immutable-オブジェクトの違いを説明してください)
* [synchronous と asynchronous functions の違いを説明してください。](#synchronous-と-asynchronous-functions-の違いを説明してください)
* [event loop とはなんですか？call stack や task queue との違いはなんですか？](#event-loop-とはなんですかcall-stack-や-task-queue-との違いはなんですか)
* [`function foo() {}` と `var foo = function() {}` をした場合の `foo` の使い方の違いを説明してください。](#function-foo--と-var-foo--function--をした場合の-foo-の使い方の違いを説明してください)
* [`let` と `var` と `const` で宣言した変数の違いはなんですか？](#let-と-var-と-const-で宣言した変数の違いはなんですか)
* [ES6 のクラス定義と、ES5 のコンストラクタ関数との違いには何がありますか？](#es6-のクラス定義とes5-のコンストラクタ関数との違いには何がありますか)
* [アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？](#アロー構文の使い方を例示してくださいこの構文と他の方法による定義とは何が違いますか)
* [コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？](#コンストラクタにおいてメソッドをアロー構文で定義する方法の利点はなんですか)
* [高階関数とはなんですか？](#高階関数とはなんですか)
* [オブジェクトと配列について、「分割代入」の例を教えてください。](#オブジェクトと配列について分割代入の例を教えてください)
* [ES6 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？](#es6-のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが例を示すことはできますか)
* [カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？](#カリー化の例を説明してくださいまたカリー化がもたらす利点はどこにあるのでしょうか)
* [spread syntax を利用する利点はなんですか？また、rest syntax とは何が違っていますか？](#spread-syntax-を利用する利点はなんですかまたrest-syntax-とは何が違っていますか)
* [ファイル間でコードを共有するにはどうすれば良いですか？](#ファイル間でコードを共有するにはどうすれば良いですか)
* [静的クラスメンバーはどんな場面で使いますか？](#静的クラスメンバーはどんな場面で使いますか)
- [イベントデリゲーションについて説明してください。](#イベントデリゲーションについて説明してください)
- [JavaScript の `this` はどう機能するものなのか説明してください。](#javascript-の-this-はどう機能するものなのか説明してください)
- [プロトタイプ継承はどのように機能するか説明してください。](#プロトタイプ継承はどのように機能するか説明してください)
- [AMD と CommonJS は何が違いますか？](#amd-と-commonjs-は何が違いますか)
- [なぜ次のコードは IIFE として機能しないのでしょうか？:`function foo(){ }();` IIFE として機能させるには何を変える必要がありますか？](#なぜ次のコードは-iife-として機能しないのでしょうかfunction-foo--iife-として機能させるには何を変える必要がありますか)
- [変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？](#変数が-nullundefined未定義だったときの違いはなんでしょうどのようにしてこれらの状態を調べますか)
- [クロージャとはなんですか？また、なぜこれを使うのでしょうか？どのように使うのでしょうか？](#クロージャとはなんですかまたなぜこれを使うのでしょうかどのように使うのでしょうか)
- [`.forEach` と `.map()` の違いを説明できますか？これらをどのように使い分けますか？](#foreach-と-map-の違いを説明できますかこれらをどのように使い分けますか)
- [無名関数の典型的な使い方を教えてください。](#無名関数の典型的な使い方を教えてください)
- [どのようなことを意識してコードを組み立てていますか？（モジュールパターン, classical inheritance？）](#どのようなことを意識してコードを組み立てていますか-モジュールパターン-classical-inheritance)
- [host objects と native objects は何が違いますか？](#host-objects-と-native-objects-は何が違いますか)
- [次のコードの違いはなんですか？:`function Person(){}` 後、`var person = Person()` と `var person = new Person()`](#次のコードの違いはなんですか-function-person-後var-person--person-と-var-person--new-person)
- [`.call` と `.apply` の違いはなんですか？](#call-と-apply-の違いはなんですか)
- [`Function.prototype.bind` について説明してください。](#functionprototypebind-について説明してください)
- [`document.write()` はいつ使いますか？](#documentwrite-はいつ使いますか)
- [feature detection, feature inference, and using the UA string の違いはなんですか？](#feature-detection-feature-inference-and-using-the-ua-string-の違いはなんですか)
- [Ajax をできるだけ詳しく説明してください。](#ajax-をできるだけ詳しく説明してください)
- [Ajax を利用する利点と欠点はなんですか？](#ajax-を利用する利点と欠点はなんですか)
- [JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。](#jsonp-がどのように機能するかまたそれが-ajax-とはどこが違うのかを説明してください)
- [JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？](#javascript-templating-を使ったことがありますか-もしあればどのライブラリを使ったことがありますか)
- ["巻き上げ"について説明してください。](#巻き上げについて説明してください)
- [event bubbling について教えてください。](#event-bubbling-について教えてください)
- ["attribute" と "property" の違いを説明してください。](#attribute-と-property-の違いを説明してください)
- [ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？](#ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか)
- [document `load` event と document `DOMContentLoaded` event の違いは？](#document-load-event-と-document-domcontentloaded-event-の違いは)
- [`==` と `===` の違いはなんですか？](#-と--の違いはなんですか)
- [JavaScript の同一オリジンポリシーについて説明してください。](#javascript-の同一オリジンポリシーについて説明してください)
- [以下のコードを動くようにしてください: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#以下のコードを動くようにしてください)
- [それが　 Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？](#それがternary-expression-と呼ばれるのはなぜですか-ternary-はどういう意味で使われているのでしょうか)
- [`"use strict";` とはなんですか？これを使う利点と欠点を教えてください。](#use-strict-とはなんですかこれを使う利点と欠点を教えてください)
- [**"fizz"** を`3`の倍数で、**"buzz"** を`5`の倍数で、**"fizzbuzz"** を`3`と`5`の倍数で出力する`100`まで反復する for ループを作成してください。](#fizz-を3の倍数でbuzz-を5の倍数でfizzbuzz-を3と5の倍数で出力する100まで反復する-for-ループを作成してください)
- [Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？](#web-サイトのグローバルスコープをそのままの状態を保ち決して触らないことが一般的に良いとされているのはなぜですか)
- [なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？](#なぜあなたは-load-イベントのようなものを使うのですかこのイベントには欠点がありますかあなたは何か選択肢を知っていますかなぜそれらを使うのですか)
- [シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。](#シングルページアプリが何であるかそして-seo-に優しいアプリを作る方法を説明してください)
- [プロミスおよび/またはそのポリフィルの経験はどの程度ですか？](#プロミスおよびまたはそのポリフィルの経験はどの程度ですか)
- [コールバックの代わりにプロミスを使用することの長所と短所は何ですか？](#コールバックの代わりにプロミスを使用することの長所と短所は何ですか)
- [JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。](#javascript-にコンパイルしてくれる言語で-javascript-を書く利点と欠点をいくつか教えてください)
- [JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？](#javascript-のコードをデバッグする際にはどんなツールや技術をを利用しますか)
- [オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？](#オブジェクトのプロパティや配列の要素をイテレートする際にどの構文を使いますか)
- [mutable と immutable オブジェクトの違いを説明してください](#mutable-と-immutable-オブジェクトの違いを説明してください)
- [synchronous と asynchronous functions の違いを説明してください。](#synchronous-と-asynchronous-functions-の違いを説明してください)
- [event loop とはなんですか？call stack や task queue との違いはなんですか？](#event-loop-とはなんですかcall-stack-や-task-queue-との違いはなんですか)
- [`function foo() {}` と `var foo = function() {}` をした場合の `foo` の使い方の違いを説明してください。](#function-foo--と-var-foo--function--をした場合の-foo-の使い方の違いを説明してください)
- [`let` と `var` と `const` で宣言した変数の違いはなんですか？](#let-と-var-と-const-で宣言した変数の違いはなんですか)
- [ES6 のクラス定義と、ES5 のコンストラクタ関数との違いには何がありますか？](#es6-のクラス定義とes5-のコンストラクタ関数との違いには何がありますか)
- [アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？](#アロー構文の使い方を例示してくださいこの構文と他の方法による定義とは何が違いますか)
- [コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？](#コンストラクタにおいてメソッドをアロー構文で定義する方法の利点はなんですか)
- [高階関数とはなんですか？](#高階関数とはなんですか)
- [オブジェクトと配列について、「分割代入」の例を教えてください。](#オブジェクトと配列について分割代入の例を教えてください)
- [ES6 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？](#es6-のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが例を示すことはできますか)
- [カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？](#カリー化の例を説明してくださいまたカリー化がもたらす利点はどこにあるのでしょうか)
- [spread syntax を利用する利点はなんですか？また、rest syntax とは何が違っていますか？](#spread-syntax-を利用する利点はなんですかまたrest-syntax-とは何が違っていますか)
- [ファイル間でコードを共有するにはどうすれば良いですか？](#ファイル間でコードを共有するにはどうすれば良いですか)
- [静的クラスメンバーはどんな場面で使いますか？](#静的クラスメンバーはどんな場面で使いますか)
### イベントデリゲーションについて説明してください。
イベントデリゲーションは、イベントリスナーを子要素に追加するのではなく、親要素に追加する手法です。リスナーは子孫要素でイベントがトリガーされるたびに発生します。これはイベントが DOM を登ってくるためです。この手法の利点は次のとおりです。
* 子孫ごとにイベントハンドラーをアタッチするのではなく親要素に 1 つのハンドラーしか必要ないため、メモリの使用量が減少します。
* 削除された要素からハンドラをはずしたり、新しい要素にイベントをつける必要がなくなります。
- 子孫ごとにイベントハンドラーをアタッチするのではなく親要素に 1 つのハンドラーしか必要ないため、メモリの使用量が減少します。
- 削除された要素からハンドラをはずしたり、新しい要素にイベントをつける必要がなくなります。
###### 参考
* https://davidwalsh.name/event-delegate
* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
[[↑] 先頭に戻る](#js-に関する質問)
@ -86,8 +86,8 @@
###### 参考
* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
* https://stackoverflow.com/a/3127440/1751946
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
[[↑] 先頭に戻る](#js-に関する質問)
@ -97,8 +97,8 @@
###### 参考
* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
* https://davidwalsh.name/javascript-objects
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
[[↑] 先頭に戻る](#js-に関する質問)
@ -112,8 +112,8 @@
###### 参考
* https://auth0.com/blog/javascript-module-systems-showdown/
* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
[[↑] 先頭に戻る](#js-に関する質問)
@ -125,7 +125,7 @@ IIFE は、Immediately Invoked Function Expressions の略です。JavaScript
###### 参考
* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
[[↑] 先頭に戻る](#js-に関する質問)
@ -148,7 +148,7 @@ console.log(x); // 1
var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true
console.log(typeof foo === "undefined"); // true
console.log(foo == null); // true. Wrong, don't use this to check!
@ -170,9 +170,9 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
###### 参考
* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined (日本語)
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -182,13 +182,13 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
**なぜそれを使うのか？**
* データのプライバシー/クロージャによるプライベートメソッドのエミュレート。[モジュールパターン](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)でよく使われる。
* [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)
- データのプライバシー/クロージャによるプライベートメソッドのエミュレート。[モジュールパターン](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)でよく使われる。
- [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
[[↑] 先頭に戻る](#js-に関する質問)
@ -198,9 +198,9 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
**`forEach`**
* 配列内の要素を反復処理します。
* 各要素のコールバックを実行します。
* 値を返しません。
- 配列内の要素を反復処理します。
- 各要素のコールバックを実行します。
- 値を返しません。
```js
const a = [1, 2, 3];
@ -213,8 +213,8 @@ const doubled = a.forEach((num, index) => {
**`map`**
* 配列内の要素を反復処理します。
* 各要素の関数を呼び出し、結果として新しい配列を作成して、各要素を新しい要素にマップします。
- 配列内の要素を反復処理します。
- 各要素の関数を呼び出し、結果として新しい配列を作成して、各要素を新しい要素にマップします。
```js
const a = [1, 2, 3];
@ -229,7 +229,7 @@ const doubled = a.map(num => {
###### 参考
* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
[[↑] 先頭に戻る](#js-に関する質問)
@ -247,7 +247,7 @@ IIFE では、ローカルスコープ内でコードをカプセル化して、
```js
setTimeout(function() {
console.log('Hello world!');
console.log("Hello world!");
}, 1000);
```
@ -263,8 +263,8 @@ console.log(double); // [2, 4, 6]
###### 参考
* 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
- 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
[[↑] 先頭に戻る](#js-に関する質問)
@ -286,7 +286,7 @@ console.log(double); // [2, 4, 6]
###### 参考
* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
[[↑] 先頭に戻る](#js-に関する質問)
@ -303,19 +303,19 @@ function Person(name) {
this.name = name;
}
var person = Person('John');
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');
var person = new Person("John");
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"
```
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -344,8 +344,8 @@ console.log(add.apply(null, [1, 2])); // 3
###### 参考
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind (日本語)
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -357,8 +357,8 @@ console.log(add.apply(null, [1, 2])); // 3
###### 参考
* 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
- 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
[[↑] 先頭に戻る](#js-に関する質問)
@ -369,7 +369,7 @@ console.log(add.apply(null, [1, 2])); // 3
機能の検出には、ブラウザが特定のコードブロックをサポートしているかどうか、またそのコードが実行されているかどうかに応じて異なるコードが実行されているかどうかが決まります。例えば:
```js
if ('geolocation' in navigator) {
if ("geolocation" in navigator) {
// Can use navigator.geolocation
} else {
// Handle lack of feature
@ -396,11 +396,11 @@ if (document.getElementsByTagName) {
###### 参考
* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (英語)
* https://developer.mozilla.org/ja/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 (英語)
* https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent (日本語)
- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (英語)
- https://developer.mozilla.org/ja/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 (英語)
- https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -412,9 +412,9 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
###### 参考
* https://en.wikipedia.org/wiki/Ajax_(programming)
* https://developer.mozilla.org/en-US/docs/AJAX (英語)
* https://developer.mozilla.org/ja/docs/AJAX (日本語)
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX (英語)
- https://developer.mozilla.org/ja/docs/AJAX (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -422,17 +422,17 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
**利点**
* より良い対話性。サーバーからの新しいコンテンツは、ページ全体をリロードする必要なく動的に変更できます。
* スクリプトとスタイルシートは一度しか要求されないので、サーバへの接続を減らす。
* 状態はページ上で維持することができます。メインのコンテナページがリロードされなかったため、JavaScript 変数と DOM 状態は保持されます。
* 基本的に SPA の利点のほとんど。
- より良い対話性。サーバーからの新しいコンテンツは、ページ全体をリロードする必要なく動的に変更できます。
- スクリプトとスタイルシートは一度しか要求されないので、サーバへの接続を減らす。
- 状態はページ上で維持することができます。メインのコンテナページがリロードされなかったため、JavaScript 変数と DOM 状態は保持されます。
- 基本的に SPA の利点のほとんど。
**欠点**
* 動的なウェブページはブックマークするのが難しいです。
* ブラウザで JavaScript が無効になっていると機能しません。
* 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
* SPA の基本的な欠点。
- 動的なウェブページはブックマークするのが難しいです。
- ブラウザで JavaScript が無効になっていると機能しません。
- 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
- SPA の基本的な欠点。
[[↑] 先頭に戻る](#js-に関する質問)
@ -445,9 +445,9 @@ JSONP は、`<script>` タグを介してクロスオリジンドメインにリ
```html
<!-- https://mydomain.com -->
<script>
function printData(data) {
console.log(`My name is ${data.name}!`);
}
function printData(data) {
console.log(`My name is ${data.name}!`);
}
</script>
<script src="https://example.com?callback=printData"></script>
@ -455,7 +455,7 @@ function printData(data) {
```js
// File loaded from https://example.com?callback=printData
printData({ name: 'Yang Shun' });
printData({ name: "Yang Shun" });
```
クライアントは、そのグローバルスコープ内に `printData` 関数を持たなければならず、関数はクロスオリジンドメインからの応答を受け取ったときにクライアントによって実行されます。
@ -466,7 +466,7 @@ JSONP は安全ではなく、セキュリティ上の問題もあります。JS
###### 参考
* https://stackoverflow.com/a/2067584/1751946
- https://stackoverflow.com/a/2067584/1751946
[[↑] 先頭に戻る](#js-に関する質問)
@ -505,7 +505,7 @@ console.log(bar); // 2
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
console.log("FOOOOO");
}
console.log(foo); // [Function: foo]
@ -513,7 +513,7 @@ console.log(foo); // [Function: foo]
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function() {
console.log('BARRRR');
console.log("BARRRR");
};
console.log(bar); // [Function: bar]
```
@ -531,21 +531,21 @@ DOM エレメントでイベントがトリガーされると、リスナーが
属性は HTML マークアップで定義されますが、プロパティは DOM で定義されます。違いを説明するために、HTML にこのテキストフィールドがあるとします：`<input type="text" value="Hello">`
```js
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
const input = document.querySelector("input");
console.log(input.getAttribute("value")); // Hello
console.log(input.value); // Hello
```
しかし、"World！"を追加してテキストフィールドの値を変更した後、それは、以下になります:
```js
console.log(input.getAttribute('value')); // Hello
console.log(input.getAttribute("value")); // Hello
console.log(input.value); // Hello World!
```
###### 参考
* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
[[↑] 先頭に戻る](#js-に関する質問)
@ -557,7 +557,7 @@ console.log(input.value); // Hello World!
###### 参考
* http://lucybain.com/blog/2014/js-extending-built-in-objects/
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
[[↑] 先頭に戻る](#js-に関する質問)
@ -569,10 +569,10 @@ console.log(input.value); // Hello World!
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (英語)
* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (日本語)
* https://developer.mozilla.org/en-US/docs/Web/Events/load (英語)
* https://developer.mozilla.org/en-US/docs/Web/Events/load (日本語)
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (英語)
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (日本語)
- https://developer.mozilla.org/en-US/docs/Web/Events/load (英語)
- https://developer.mozilla.org/en-US/docs/Web/Events/load (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -581,11 +581,11 @@ console.log(input.value); // Hello World!
`==` は抽象的な等価演算子であり、`===` は厳密な等価演算子です。`==` 演算子は、必要な型変換を行った後、等しいかどうかを比較します。`===` 演算子は型変換を行いません。したがって、2 つの値が同じ型でない場合、`===` は単に `false` を返します。`==` を使用すると、次のような厄介なことが起こる可能性があります:
```js
1 == '1'; // true
1 == "1"; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == ""; // true
0 == "0"; // true
0 == false; // true
```
@ -599,7 +599,7 @@ console.log(a == undefined); // true
###### 参考
* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
[[↑] 先頭に戻る](#js-に関する質問)
@ -609,7 +609,7 @@ console.log(a == undefined); // true
###### 参考
* https://en.wikipedia.org/wiki/Same-origin_policy
- https://en.wikipedia.org/wiki/Same-origin_policy
[[↑] 先頭に戻る](#js-に関する質問)
@ -635,8 +635,8 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
###### 参考
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (英語)
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (日本語)
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (英語)
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -646,26 +646,26 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
利点：
* 誤ってグローバル変数を作成することは不可能になります。
* 静かに例外をスローすることができない割り当てを行います。
* 削除不可能なプロパティーの削除を試行させます（試行が効果を持たない前に）。
* 関数のパラメータ名は一意である必要があります。
* `this` はグローバルコンテキストでは未定義です。
* 例外を投げて、いくつかの共通のコーディング・グロッパーを捕まえる。
* それは、混乱しているか、または慎重に考えられていない機能を無効にします。
- 誤ってグローバル変数を作成することは不可能になります。
- 静かに例外をスローすることができない割り当てを行います。
- 削除不可能なプロパティーの削除を試行させます（試行が効果を持たない前に）。
- 関数のパラメータ名は一意である必要があります。
- `this` はグローバルコンテキストでは未定義です。
- 例外を投げて、いくつかの共通のコーディング・グロッパーを捕まえる。
- それは、混乱しているか、または慎重に考えられていない機能を無効にします。
欠点：
* いくつかの開発者が慣れ親しかった欠けている機能がたくさんあります。
* `function.caller` と `function.arguments` へのアクセスはもうありません。
* 異なる厳密なモードで記述されたスクリプトを連結すると、問題が発生する可能性があります。
- いくつかの開発者が慣れ親しかった欠けている機能がたくさんあります。
- `function.caller` と `function.arguments` へのアクセスはもうありません。
- 異なる厳密なモードで記述されたスクリプトを連結すると、問題が発生する可能性があります。
全体的に、私は利点が欠点を上回っていると思うし、厳密なモードブロックという機能に頼る必要はなかった。私は厳密なモードを使用することをお勧めします。
###### 参考
* http://2ality.com/2011/10/strict-mode-hatred.html
* http://lucybain.com/blog/2014/js-use-strict/
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
[[↑] 先頭に戻る](#js-に関する質問)
@ -677,7 +677,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
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);
console.log(f ? (b ? "FizzBuzz" : "Fizz") : b ? "Buzz" : i);
}
```
@ -685,7 +685,7 @@ for (let i = 1; i <= 100; i++) {
###### 参考
* https://gist.github.com/jaysonrowe/1592432
- https://gist.github.com/jaysonrowe/1592432
[[↑] 先頭に戻る](#js-に関する質問)
@ -705,8 +705,8 @@ TODO.
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -720,22 +720,22 @@ TODO.
利点：
* アプリの応答性が向上し、フルページのリフレッシュのためにページの移動の間にフラッシュが表示されないという問題がありました。
* ページロードごとに同じアセットを再度ダウンロードする必要がないため、サーバーへの HTTP 要求が少なくなります。
* クライアントとサーバーの間の問題の明確な分離。サーバーコードを変更することなく、さまざまなプラットフォーム（モバイル、チャットボット、スマートウォッチなど）の新しいクライアントを簡単に構築できます。また、API 契約が破られていない限り、クライアントとサーバーのテクノロジスタックを個別に変更することもできます。
- アプリの応答性が向上し、フルページのリフレッシュのためにページの移動の間にフラッシュが表示されないという問題がありました。
- ページロードごとに同じアセットを再度ダウンロードする必要がないため、サーバーへの HTTP 要求が少なくなります。
- クライアントとサーバーの間の問題の明確な分離。サーバーコードを変更することなく、さまざまなプラットフォーム（モバイル、チャットボット、スマートウォッチなど）の新しいクライアントを簡単に構築できます。また、API 契約が破られていない限り、クライアントとサーバーのテクノロジスタックを個別に変更することもできます。
欠点：
* 複数のページに必要なフレームワーク、アプリケーションコード、およびアセットの読み込みによる最初のページ読み込みが重くなりました。
* すべてのリクエストを単一のエントリポイントにルーティングし、そこからクライアント側のルーティングを引き継ぐように設定する追加のステップがサーバー上で実行されます。
* SPA はコンテンツを表示するために JavaScript に依存していますが、すべての検索エンジンがクロール中に JavaScript を実行するわけではなく、ページ上に空のコンテンツが表示されることがあります。これは、誤ってあなたのアプリの検索エンジン最適化（SEO）を傷つけます。しかし、ほとんどの場合、アプリケーションを構築するときに、SEO はすべてのコンテンツが検索エンジンによってインデックスを作成する必要があるわけではないため、最も重要な要素ではありません。これを克服するには、アプリをサーバー側でレンダリングするか、[Prerender](https://prerender.io/) などのサービスを使用してブラウザの JavaScript をレンダリングし、静的 HTML を保存してクローラー。
- 複数のページに必要なフレームワーク、アプリケーションコード、およびアセットの読み込みによる最初のページ読み込みが重くなりました。
- すべてのリクエストを単一のエントリポイントにルーティングし、そこからクライアント側のルーティングを引き継ぐように設定する追加のステップがサーバー上で実行されます。
- SPA はコンテンツを表示するために JavaScript に依存していますが、すべての検索エンジンがクロール中に JavaScript を実行するわけではなく、ページ上に空のコンテンツが表示されることがあります。これは、誤ってあなたのアプリの検索エンジン最適化（SEO）を傷つけます。しかし、ほとんどの場合、アプリケーションを構築するときに、SEO はすべてのコンテンツが検索エンジンによってインデックスを作成する必要があるわけではないため、最も重要な要素ではありません。これを克服するには、アプリをサーバー側でレンダリングするか、[Prerender](https://prerender.io/) などのサービスを使用してブラウザの JavaScript をレンダリングし、静的 HTML を保存してクローラー。
###### 参考
* 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
- 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
[[↑] 先頭に戻る](#js-に関する質問)
@ -747,7 +747,7 @@ TODO.
###### 参考
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
[[↑] 先頭に戻る](#js-に関する質問)
@ -755,14 +755,14 @@ TODO.
**長所**
* 読めないコールバック地獄は避けてください。
* `.then()` で読めるシーケンシャルな非同期コードを書くのが簡単になります。
* `Promise.all()` で並列非同期コードを書くのが簡単になります。
- 読めないコールバック地獄は避けてください。
- `.then()` で読めるシーケンシャルな非同期コードを書くのが簡単になります。
- `Promise.all()` で並列非同期コードを書くのが簡単になります。
**短所**
* やや複雑なコード（議論の余地がある）。
* ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
- やや複雑なコード（議論の余地がある）。
- ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
[[↑] 先頭に戻る](#js-に関する質問)
@ -772,42 +772,42 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
利点：
* JavaScript の長年にわたる問題のいくつかを修正し、JavaScript のアンチパターンを廃止しました。
* JavaScript の上に文法的な砂糖を提供することで、短いコードを書くことができますが、ES5 はそれがないと思っていますが、ES2015 はすばらしいです。
* 静的型は時間が経っても維持する必要のある大規模プロジェクトの場合は素晴らしいです（TypeScript の場合）。
- JavaScript の長年にわたる問題のいくつかを修正し、JavaScript のアンチパターンを廃止しました。
- JavaScript の上に文法的な砂糖を提供することで、短いコードを書くことができますが、ES5 はそれがないと思っていますが、ES2015 はすばらしいです。
- 静的型は時間が経っても維持する必要のある大規模プロジェクトの場合は素晴らしいです（TypeScript の場合）。
欠点：
* ブラウザは JavaScript のみを実行するため、ビルド/コンパイルのプロセスを必要とし、ブラウザに提供する前にコードを JavaScript にコンパイルする必要があります。
* ソースマップがあらかじめコンパイルされたソースにうまくマッピングされない場合、デバッグが苦しいことがあります。
* ほとんどの開発者はこれらの言語に精通しておらず、それを学ぶ必要があります。プロジェクトに使用する場合、チームのコストが上昇します。
* 小規模なコミュニティ（言語に依存します）。リソース、チュートリアル、図書館、ツールなどを見つけるのが難しくなります。
* IDE/エディタのサポートが不足している可能性があります。
* これらの言語は常に最新の JavaScript 標準より遅れています。
* 開発者は、コードがコンパイルされていることを認識しておく必要があります。これは実際に実行されるコードであり、最終的に問題になります。
- ブラウザは JavaScript のみを実行するため、ビルド/コンパイルのプロセスを必要とし、ブラウザに提供する前にコードを JavaScript にコンパイルする必要があります。
- ソースマップがあらかじめコンパイルされたソースにうまくマッピングされない場合、デバッグが苦しいことがあります。
- ほとんどの開発者はこれらの言語に精通しておらず、それを学ぶ必要があります。プロジェクトに使用する場合、チームのコストが上昇します。
- 小規模なコミュニティ（言語に依存します）。リソース、チュートリアル、図書館、ツールなどを見つけるのが難しくなります。
- IDE/エディタのサポートが不足している可能性があります。
- これらの言語は常に最新の JavaScript 標準より遅れています。
- 開発者は、コードがコンパイルされていることを認識しておく必要があります。これは実際に実行されるコードであり、最終的に問題になります。
具体的には、ES2015 では JavaScript が大幅に改善され、はるかに書やすくなっています。私は最近 CoffeeScript の必要性を見ていません。
###### 参考
* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
[[↑] 先頭に戻る](#js-に関する質問)
### JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？
* 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
- 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
###### 参考
* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
* https://raygun.com/blog/javascript-debugging/
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
[[↑] 先頭に戻る](#js-に関する質問)
@ -815,14 +815,14 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
オブジェクトの場合：
* `for` ループ用 - `for (var property in obj) { console.log(property); }`。ただし、これは継承されたプロパティを繰り返し処理するため、使用する前に `obj.hasOwnProperty(property）` チェックを追加します。
* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティをリストします。
* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティと列挙可能でないプロパティをリストします。
- `for` ループ用 - `for (var property in obj) { console.log(property); }`。ただし、これは継承されたプロパティを繰り返し処理するため、使用する前に `obj.hasOwnProperty(property）` チェックを追加します。
- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティをリストします。
- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティと列挙可能でないプロパティをリストします。
配列の場合：
* `for` ループ - `for (var i = 0; i < arr.length; i++)`。ここでの一般的な落とし穴は、`var` は関数スコープであり、ブロックスコープではなく、ブロックスコープのイテレータ変数を使用したいと思うことです。ES2015 では、ブロックスコープを持つ `let` が導入されています。代わりにそのブロックを使用することをお勧めします。したがって、これは `for (let i = 0; i < arr.length; i++)` となります。
* `forEach` - `arr.forEach(function (el, index) { ... })`。必要なのが配列要素であれば `index` を使う必要がないので、このコンストラクトは時に便利です。また、`every` と `some` メソッドもあります。これにより、早期に反復処理を終了させることができます。
- `for` ループ - `for (var i = 0; i < arr.length; i++)`。ここでの一般的な落とし穴は、`var` は関数スコープであり、ブロックスコープではなく、ブロックスコープのイテレータ変数を使用したいと思うことです。ES2015 では、ブロックスコープを持つ `let` が導入されています。代わりにそのブロックを使用することをお勧めします。したがって、これは `for (let i = 0; i < arr.length; i++)` となります。
- `forEach` - `arr.forEach(function (el, index) { ... })`。必要なのが配列要素であれば `index` を使う必要がないので、このコンストラクトは時に便利です。また、`every` と `some` メソッドもあります。これにより、早期に反復処理を終了させることができます。
ほとんどの場合、私は `.forEach` メソッドを好むでしょうが、本当にあなたがしようとしているものに依存します。`for` ループは、より柔軟性を持たせます。たとえば、`break` を使ってループを早期に終了するか、ループごとにイテレータを複数回インクリメントします。
@ -830,9 +830,9 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
### mutable と immutable オブジェクトの違いを説明してください
* JavaScript の不変オブジェクトの例は何ですか？
* 不変性の長所と短所は何ですか？
* あなた自身のコードで不変性をどのように達成できますか？
- JavaScript の不変オブジェクトの例は何ですか？
- 不変性の長所と短所は何ですか？
- あなた自身のコードで不変性をどのように達成できますか？
TODO
@ -854,8 +854,8 @@ TODO
###### 参考
* 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/
- 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/
[[↑] 先頭に戻る](#js-に関する質問)
@ -868,7 +868,7 @@ TODO
```js
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
console.log("FOOOOO");
}
```
@ -877,14 +877,14 @@ function foo() {
```js
foo(); // Uncaught TypeError: foo is not a function
var foo = function() {
console.log('FOOOOO');
console.log("FOOOOO");
};
```
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -895,9 +895,9 @@ var foo = function() {
```js
function foo() {
// All variables are accessible within functions.
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
var bar = "bar";
let baz = "baz";
const qux = "qux";
console.log(bar); // bar
console.log(baz); // baz
@ -911,9 +911,9 @@ console.log(qux); // ReferenceError: qux is not defined
```js
if (true) {
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
var bar = "bar";
let baz = "baz";
const qux = "qux";
}
// var declared variables are accessible anywhere in the function scope.
@ -928,48 +928,48 @@ console.log(qux); // ReferenceError: qux is not defined
```js
console.log(foo); // undefined
var foo = 'foo';
var foo = "foo";
console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
let baz = 'baz';
let baz = "baz";
console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
const bar = 'bar';
const bar = "bar";
```
`var` で変数を再宣言してもエラーは発生しませんが、`let` と `const` はエラーになります。
```js
var foo = 'foo';
var foo = 'bar';
var foo = "foo";
var foo = "bar";
console.log(foo); // "bar"
let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
let baz = "baz";
let baz = "qux"; // Uncaught SyntaxError: Identifier 'baz' has already been declared
```
`let` と `const` は `let` が変数の値を再割り当てすることができるという点で `let` と `const` は異なります。
```js
// This is fine.
let foo = 'foo';
foo = 'bar';
let foo = "foo";
foo = "bar";
// This causes an exception.
const baz = 'baz';
baz = 'qux';
const baz = "baz";
baz = "qux";
```
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let (日本語)
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var (英語)
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var (英語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -1000,7 +1000,7 @@ TODO
文字列を大文字に変換するために必要な名前の配列があるとしましょう。
```js
const names = ['irish', 'daisy', 'anna'];
const names = ["irish", "daisy", "anna"];
```
命令的な方法はこのようになります：
@ -1027,9 +1027,9 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
###### 参考
* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
* https://eloquentjavascript.net/05_higher_order.html
- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
[[↑] 先頭に戻る](#js-に関する質問)
@ -1041,7 +1041,7 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```js
// Variable assignment.
const foo = ['one', 'two', 'three'];
const foo = ["one", "two", "three"];
const [one, two, three] = foo;
console.log(one); // "one"
@ -1072,9 +1072,9 @@ console.log(q); // true
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
* https://ponyfoo.com/articles/es6-destructuring-in-depth
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
- https://ponyfoo.com/articles/es6-destructuring-in-depth
[[↑] 先頭に戻る](#js-に関する質問)
@ -1118,7 +1118,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
###### 参考
* https://hackernoon.com/currying-in-js-d9ddc64f162e
- https://hackernoon.com/currying-in-js-d9ddc64f162e
[[↑] 先頭に戻る](#js-に関する質問)
@ -1128,14 +1128,14 @@ ES6 の普及構文は、`Object.create`、`slice`、またはライブラリ関
```js
function putDookieInAnyArray(arr) {
return [...arr, 'dookie'];
return [...arr, "dookie"];
}
const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
const result = putDookieInAnyArray(["I", "really", "don't", "like"]); // ["I", "really", "don't", "like", "dookie"]
const person = {
name: 'Todd',
age: 29,
name: "Todd",
age: 29
};
const copyOfTodd = { ...person };
@ -1156,18 +1156,18 @@ const { e, f, ...others } = {
e: 1,
f: 2,
g: 3,
h: 4,
h: 4
}; // e: 1, f: 2, others: { g: 3, h: 4 }
```
###### 参考
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax (日本語)
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters (日本語)
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters (日本語)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
[[↑] 先頭に戻る](#js-に関する質問)
@ -1183,9 +1183,9 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
###### 参考
* http://requirejs.org/docs/whyamd.html
* https://nodejs.org/docs/latest/api/modules.html
* http://2ality.com/2014/09/es6-modules-final.html
- http://requirejs.org/docs/whyamd.html
- https://nodejs.org/docs/latest/api/modules.html
- http://2ality.com/2014/09/es6-modules-final.html
[[↑] 先頭に戻る](#js-に関する質問)
@ -1195,10 +1195,10 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
###### 参考
* https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
[[↑] 先頭に戻る](#js-に関する質問)
### 他の方の回答集
* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

36
Translations/Korean/questions/css-questions.md
View File

@ -82,7 +82,7 @@ CSS `clear` 속성은 float 요소에 `left`/`right`/`both`에 위치하도록
```css
.clearfix:after {
content: ' ';
content: " ";
visibility: hidden;
display: block;
height: 0;
@ -497,9 +497,9 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
###### 참고자료
* 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/
- 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/
[[↑] Back to top](#css-질문)
@ -515,16 +515,19 @@ _레티나_ 는 픽셀 비율이 1보다 큰 고해상도 화면을 나타내는
이 문제를 극복하기 위해, HTML5에 스펙인 반응형 이미지를 사용할 수 있습니다. 이는 동일한 이미지의 다른 해상도 파일을 브라우저에 제공하고 html 속성 `srcset`과 `sizes`를 사용하여 어떤 이미지가 가장 적합한지 결정하도록합니다.
```html
<div responsive-background-image>
<img src="/images/test-1600.jpg"
<div responsive-background-image>
<img
src="/images/test-1600.jpg"
sizes="
(min-width: 768px) 50vw,
(min-width: 1024px) 66vw,
100vw"
srcset="
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w">
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w
"
/>
</div>
```
@ -532,12 +535,11 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
아이콘의 경우, SVG나 아이콘폰트를 사용하면 해상도에 관계없이 매우 선명하게 렌더링되므로 가능하면 이를 사용합니다.
###### 참고자료
* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
* http://scottjehl.github.io/picturefill/
* https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
[[↑] Back to top](#css-질문)
@ -549,12 +551,12 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
###### 참고자료
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] Back to top](#css-질문)
### 다른 답변들
* 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/
- 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/

7
Translations/Korean/questions/javascript-questions.md
View File

@ -2,6 +2,7 @@
[프론트엔드 면접 질문 - JS 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md)에 대한 해설입니다. Pull Request를 통한 제안, 수정 요청 환영합니다.
- [이벤트 위임에 대해 설명하세요.](#이벤트-위임에-대해-설명하세요)
- [`this`가 JavaScript에서 어떻게 작동하는지 설명하세요.](#this가-javascript에서-어떻게-작동하는지-설명하세요)
- [프로토타입 상속이 어떻게 작동하는지 설명하세요.](#프로토타입-상속이-어떻게-작동하는지-설명하세요)
@ -846,7 +847,7 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
```js
const arr = ['a', 'b', 'c'];
for (let [index, elem] of arr.entries()) {
for (let [index, elem] of arr.entries()) {
console.log(index, ': ', elem);
}
```
@ -1054,7 +1055,7 @@ ES5에서 상속을 사용하는 것이 훨씬 더 불편하며, ES6 버전이
### 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?
화살표 함수의 한 가지 분명한 이점은 `function` 키워드를 사용하지 않고도 함수를 생성하는데 필요한 문법을 단순화하는 것입니다.
화살표 함수의 한 가지 분명한 이점은 `function` 키워드를 사용하지 않고도 함수를 생성하는데 필요한 문법을 단순화하는 것입니다.
또한, 화살표 함수 내의 `this`는, `this`가 함수를 호출하는 객체에 의해 결정되는 일반 함수와 다르게, 주변 스코프에에 묶입니다.
@ -1105,7 +1106,7 @@ sayNameFromWindow2(); // John
이는 특히 React 클래스 컴포넌트에서 유용할 수 있습니다. 일반 함수를 사용하는 클릭 핸들러와 같은 클래스 메소드를 정의한 다음, 해당 클릭 핸들러를 하위 컴포넌트의 prop으로 전달하면 상위 컴포넌트의 생성자에서 `this`도 바인드해야합니다.
대신 화살표 함수를 사용하면, 메소드가 `this`값을 주위 렉시컬 컨텍스트에서 자동으로 가져오기 때문에 `this`를 바인딩할 필요가 없습니다.
(좋은 데모, 샘플 코드는 [이 기사](https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)를 참조하세요.)
###### 참고자료

10
Translations/Portuguese/README.md
View File

@ -29,14 +29,14 @@ Podes estar interessado no [Tech Interview Handbook](https://github.com/yangshun
## Traduções
* [English](/README.md)
* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
* [Tagalog](/Translations/Tagalog/README.md)
* [Japanese (日本語)](/Translations/Japanese/README.md)
- [English](/README.md)
- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
- [Tagalog](/Translations/Tagalog/README.md)
- [Japanese (日本語)](/Translations/Japanese/README.md)
**Em Progresso**
* [Korean (한국어)](/Translations/Korean/README.md)
- [Korean (한국어)](/Translations/Korean/README.md)
## Relacionados

112
Translations/Portuguese/questions/html-questions.md
View File

@ -2,17 +2,17 @@
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)
* [Que tipo de coisas tu deves desconfiar ao projetar ou desenvolver sites multilíngues?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
* [Quais são os atributos `data-` bons para?](#what-are-data--attributes-good-for)
* [Considera HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
* [Descreve a diferença entre uma `cookie`, `sessionStorage` e `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
* [Descreva a diferença entre `<script>`, `<script async>` e `<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)
* [O que é a renderização progressiva?](#what-is-progressive-rendering)
* [Por que usarias um atributo `srcset` numa etiqueta de imagem? Explica o processo que o navegador usa ao avaliar o conteúdo deste atributo](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
* [Tu já usaste diferentes linguagens de modelos de HTML antes?](#have-you-used-different-html-templating-languages-before)
- [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)
- [Que tipo de coisas tu deves desconfiar ao projetar ou desenvolver sites multilíngues?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
- [Quais são os atributos `data-` bons para?](#what-are-data--attributes-good-for)
- [Considera HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
- [Descreve a diferença entre uma `cookie`, `sessionStorage` e `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
- [Descreva a diferença entre `<script>`, `<script async>` e `<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)
- [O que é a renderização progressiva?](#what-is-progressive-rendering)
- [Por que usarias um atributo `srcset` numa etiqueta de imagem? Explica o processo que o navegador usa ao avaliar o conteúdo deste atributo](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
- [Tu já usaste diferentes linguagens de modelos de HTML antes?](#have-you-used-different-html-templating-languages-before)
### O que faz um `DOCTYPE`?
@ -22,9 +22,9 @@ Moral da história - apenas adiciona `<!DOCTYPE html>` no início da sua página
###### Referências
* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
* https://www.w3.org/QA/Tips/Doctype
* https://quirks.spec.whatwg.org/#history
- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
[[↑] De volta ao topo](#html-questions)
@ -38,24 +38,24 @@ Na parte de trás, a marcação HTML irá conter espaços reservados `i18n` e co
###### Referências
* https://www.w3.org/International/getting-started/language
- https://www.w3.org/International/getting-started/language
[[↑] De volta ao topo](#html-questions)
### Que tipo de coisas tuvocê deves desconfiar ao projetar ou desenvolver sites multilíngues?
* Usa atributos `lang` a tua HTML.
* Direccionando os de utilizadores para o teu idioma nativo - Permite que um utilizador mude facilmente o seu país/idioma sem problemas.
* O texto em imagens não é uma abordagem escalável - Colocar texto numa imagem ainda é uma maneira popular de obter fontes bonitas e sem sistema para serem exibidas em qualquer computador. No entanto, para traduzir o texto da imagem, cada sequência de texto precisará de ter uma imagem separada criada para cada idioma. Qualquer coisa mais do que um punhado de substituições como esta podem rapidamente sair do controle.
* Palavras restritas/comprimento da frase - Alguns conteúdos podem ser mais longos quando escritos num outro idioma. Desconfie de problemas de layout ou transbordamento no design. É melhor evitar projetar onde a quantidade de texto faria ou partisse um projeto. As contagens de personagens entram no jogo com coisas como manchetes, rótulos e botões. Eles são um menor problema com o texto livre, como texto corporativo ou comentários.
* Lembra-te de como as cores são percebidas - As cores são percebidas de maneira diferente em línguas e culturas. O design deve usar a cor adequadamente.
* Formatar datas e moedas - As datas do calendário são por vezes apresentadas de diferentes maneiras. Por exemplo. "31 de maio de 2012" nos EUA versus "31 de maio de 2012" em partes da Europa.
* Não concatene as cordas traduzidas - Não faças nada como `"A data hoje é" + data`. Ele vai partir em idiomas com diferentes ordens de palavras. Usa uma string de modelo com substituição de parâmetros para cada idioma. Por exemplo, vê as duas frases seguintes em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observa que a posição da variável é diferente devido às regras da gramática do idioma.
* Direção da leitura de idioma - Em inglês, lemos da esquerda para a direita, de cima para baixo, em japonês tradicional, o texto é lido de cima para baixo, da direita para a esquerda.
- Usa atributos `lang` a tua HTML.
- Direccionando os de utilizadores para o teu idioma nativo - Permite que um utilizador mude facilmente o seu país/idioma sem problemas.
- O texto em imagens não é uma abordagem escalável - Colocar texto numa imagem ainda é uma maneira popular de obter fontes bonitas e sem sistema para serem exibidas em qualquer computador. No entanto, para traduzir o texto da imagem, cada sequência de texto precisará de ter uma imagem separada criada para cada idioma. Qualquer coisa mais do que um punhado de substituições como esta podem rapidamente sair do controle.
- Palavras restritas/comprimento da frase - Alguns conteúdos podem ser mais longos quando escritos num outro idioma. Desconfie de problemas de layout ou transbordamento no design. É melhor evitar projetar onde a quantidade de texto faria ou partisse um projeto. As contagens de personagens entram no jogo com coisas como manchetes, rótulos e botões. Eles são um menor problema com o texto livre, como texto corporativo ou comentários.
- Lembra-te de como as cores são percebidas - As cores são percebidas de maneira diferente em línguas e culturas. O design deve usar a cor adequadamente.
- Formatar datas e moedas - As datas do calendário são por vezes apresentadas de diferentes maneiras. Por exemplo. "31 de maio de 2012" nos EUA versus "31 de maio de 2012" em partes da Europa.
- Não concatene as cordas traduzidas - Não faças nada como `"A data hoje é" + data`. Ele vai partir em idiomas com diferentes ordens de palavras. Usa uma string de modelo com substituição de parâmetros para cada idioma. Por exemplo, vê as duas frases seguintes em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observa que a posição da variável é diferente devido às regras da gramática do idioma.
- Direção da leitura de idioma - Em inglês, lemos da esquerda para a direita, de cima para baixo, em japonês tradicional, o texto é lido de cima para baixo, da direita para a esquerda.
###### Referências
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
[[↑] De volta ao topo](#html-questions)
@ -67,25 +67,25 @@ Atualmente, o uso dos atributos `data-` não é encorajado. Uma das razões é q
###### Referências
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
[[↑] De volta ao topo](#html-questions)
### Considera HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?
* Semântica - Permite que tu descrevas mais precisamente o que é o teu conteúdo.
* Conectividade - Permite que tu comuniques com o servidor de formas novas e inovadoras.
* Offline e armazenamento - Permite que as páginas da Web armazenem dados no lado do cliente localmente e funcionem offline de forma mais eficiente.
* Multimédia - Criar vídeo e áudio de primeira classe cidadãos na Open Web.
* Gráficos e efeitos 2D/3D - Permitir uma gama muito mais diversificada de opções de apresentação.
* Desempenho e integração - Fornecer maior optimização da velocidade e melhor uso do hardware do computador.
* Acesso ao dispositivo - Permitir o uso de vários dispositivos de entrada e saída.
* Styling - Permitir que os autores escrevam temas mais sofisticados.
- Semântica - Permite que tu descrevas mais precisamente o que é o teu conteúdo.
- Conectividade - Permite que tu comuniques com o servidor de formas novas e inovadoras.
- Offline e armazenamento - Permite que as páginas da Web armazenem dados no lado do cliente localmente e funcionem offline de forma mais eficiente.
- Multimédia - Criar vídeo e áudio de primeira classe cidadãos na Open Web.
- Gráficos e efeitos 2D/3D - Permitir uma gama muito mais diversificada de opções de apresentação.
- Desempenho e integração - Fornecer maior optimização da velocidade e melhor uso do hardware do computador.
- Acesso ao dispositivo - Permitir o uso de vários dispositivos de entrada e saída.
- Styling - Permitir que os autores escrevam temas mais sofisticados.
###### Referências
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[[↑] De volta ao topo](#html-questions)
@ -105,25 +105,25 @@ Todas as tecnologias acima mencionadas são mecanismos de armazenamento de valor
###### Referências
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
[[↑] De volta ao topo](#html-questions)
### Descreve a diferença entre `<script>`, `<script async>` e `<script defer>`.
* `<script>` - A análise HTML é bloqueada, o script é executado e executado imediatamente, a análise HTML é retomada após o script ser executado.
* `<script async>` - O script será procurado em paralelo com a análise HTML e executado assim que estiver disponível (potencialmente antes da análise HTML). Usa `async` quando o script for independente de qualquer outro script na página, por exemplo, analítica.
- `<script>` - A análise HTML é bloqueada, o script é executado e executado imediatamente, a análise HTML é retomada após o script ser executado.
- `<script async>` - O script será procurado em paralelo com a análise HTML e executado assim que estiver disponível (potencialmente antes da análise HTML). Usa `async` quando o script for independente de qualquer outro script na página, por exemplo, analítica.
- `<script defer>` - O script será procurado em paralelo com a análise de HTML e executado quando a página terminar de analisar. Se houver vários deles, cada script diferido é executado na ordem em que foram encontrados no documento. Se um script depende de um DOM totalmente analisado, o atributo ` defer`` será útil para garantir que o HTML seja totalmente analisado antes de o executar. Não há muita diferença em colocar um `<script>`normal no final de`<body>`. Um script diferido não deve conter`document.write`.
* `<script defer>` - O script será procurado em paralelo com a análise de HTML e executado quando a página terminar de analisar. Se houver vários deles, cada script diferido é executado na ordem em que foram encontrados no documento. Se um script depende de um DOM totalmente analisado, o atributo ` defer`` será útil para garantir que o HTML seja totalmente analisado antes de o executar. Não há muita diferença em colocar um `<script>`normal no final de`<body>`. Um script diferido não deve conter`document.write`.
Nota: Os atributos `async` e` defer`` são ignorados para scripts que não possuem atributo `src`.
###### Referências
* 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/
- 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/
[[↑] De volta ao topo](#html-questions)
@ -141,7 +141,7 @@ Uma exceção para o posicionamento de `<script>`s na parte inferior é quando o
###### Referências
* https://developer.yahoo.com/performance/rules.html#css_top
- https://developer.yahoo.com/performance/rules.html#css_top
[[↑] De volta ao topo](#html-questions)
@ -153,14 +153,14 @@ Ele costumava ser muito mais prevalecente nos dias que antecedem a internet de b
Exemplos de tais técnicas:
* O carregamento preguiçoso de imagens - As imagens na página não são carregadas de uma só vez. O JavaScript será usado para carregar uma imagem quando o utilizador rolar para a parte da página que mostra a imagem.
* Priorizando o conteúdo visível (ou a renderização acima da dobra) - Inclua apenas o CSS/conteúdo/scripts mínimos necessários para a quantidade de página que será processada no navegador de primeiros utilizadores para exibir o mais rápido possível, tu podes usar o diferido scripts ou ouve o evento `DOMContentLoaded`/`load` para carregar os outros recursos e conteúdo.
* Fragmentos HTML Async - Peças de lavagem do HTML para o navegador à medida que a página é construída na parte traseira. Mais detalhes sobre a técnica podem ser encontrados [aqui](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
- O carregamento preguiçoso de imagens - As imagens na página não são carregadas de uma só vez. O JavaScript será usado para carregar uma imagem quando o utilizador rolar para a parte da página que mostra a imagem.
- Priorizando o conteúdo visível (ou a renderização acima da dobra) - Inclua apenas o CSS/conteúdo/scripts mínimos necessários para a quantidade de página que será processada no navegador de primeiros utilizadores para exibir o mais rápido possível, tu podes usar o diferido scripts ou ouve o evento `DOMContentLoaded`/`load` para carregar os outros recursos e conteúdo.
- Fragmentos HTML Async - Peças de lavagem do HTML para o navegador à medida que a página é construída na parte traseira. Mais detalhes sobre a técnica podem ser encontrados [aqui](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
###### Referências
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] De volta ao topo](#html-questions)
@ -168,9 +168,9 @@ Exemplos de tais técnicas:
Tu usarias o atributo `srcset` quando quiseres exibir imagens diferentes para os utilizadores, dependendo da largura do ecrã do dispositivo - mostrar imagens de qualidade superior para dispositivos com display de retina aumenta a experiência do utilizador enquanto fornece imagens de baixa resolução para dispositivos de baixo custo aumentam o desempenho e diminuem o desperdício de dados (porque servir uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para mostrar o pequeno, médio ou grande `.jpg` gráfico dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, os seguintes cálculos são feitos:
* 500 / 320 = 1.5625
* 1000 / 320 = 3.125
* 2000 / 320 = 6.25
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25
Se a resolução do cliente for 1x, 1.5625 é o mais próximo, e `500w` corresponde a `small.jpg` será selecionado pelo navegador.
@ -180,8 +180,8 @@ Se a resolução for retina (2x), o navegador usará a resolução mais próxima
###### Referências
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
[[↑] De volta ao topo](#html-questions)
@ -193,7 +193,7 @@ Sim, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, apenas para
### Outras respostas
* 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/
- 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/
---

134
Translations/Russian/questions/html-questions.md
View File

@ -2,24 +2,24 @@
Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/russian#html).
* [Для чего нужен DOCTYPE?](#для-чего-нужен-doctype)
* [Как следует оформлять страницу, содержимое которой может быть на разных языках?](#как-следует-оформлять-страницу-содержимое-которой-может-быть-на-разных-языках)
* [На что необходимо обратить внимание при разработке мультиязычных сайтов?](#на-что-необходимо-обратить-внимание-при-разработке-мультиязычных-сайтов)
* [Для чего нужны `data-` атрибуты?](#для-чего-нужны-data-атрибуты)
* [Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?](#представьте-html5-как-открытую-веб-платформу-из-каких-блоков-состоит-html5)
* [Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.](#объясните-разницу-между-cookie-sessionstorage-и-localstorage)
* [Объясните разницу между `<script>`, `<script async>` и `<script defer>`.](#объясните-разницу-между-script-script-async-и-script-defer)
* [Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?](#почему-хорошей-практикой-считается-располагать-link-для-подключения-css-между-headhead-а-script-для-подключения-js-ставить-перед-body-знаете-ли-вы-исключения)
* [Что такое прогрессивный рендеринг?](#что-такое-прогрессивный-рендеринг)
* [Для чего используется атрибут `srcset` в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.](#для-чего-используется-атрибут-srcset-в-теге-изображения-опишите-процесс-который-браузер-использует-при-обработке-содержимого-этого-атрибута)
* [Приходилось ли вам работать с языками HTML-шаблонизации?](#приходилось-ли-вам-работать-с-языками-html-шаблонизации)
- [Для чего нужен DOCTYPE?](#для-чего-нужен-doctype)
- [Как следует оформлять страницу, содержимое которой может быть на разных языках?](#как-следует-оформлять-страницу-содержимое-которой-может-быть-на-разных-языках)
- [На что необходимо обратить внимание при разработке мультиязычных сайтов?](#на-что-необходимо-обратить-внимание-при-разработке-мультиязычных-сайтов)
- [Для чего нужны `data-` атрибуты?](#для-чего-нужны-data-атрибуты)
- [Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?](#представьте-html5-как-открытую-веб-платформу-из-каких-блоков-состоит-html5)
- [Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.](#объясните-разницу-между-cookie-sessionstorage-и-localstorage)
- [Объясните разницу между `<script>`, `<script async>` и `<script defer>`.](#объясните-разницу-между-script-script-async-и-script-defer)
- [Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?](#почему-хорошей-практикой-считается-располагать-link-для-подключения-css-между-headhead-а-script-для-подключения-js-ставить-перед-body-знаете-ли-вы-исключения)
- [Что такое прогрессивный рендеринг?](#что-такое-прогрессивный-рендеринг)
- [Для чего используется атрибут `srcset` в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.](#для-чего-используется-атрибут-srcset-в-теге-изображения-опишите-процесс-который-браузер-использует-при-обработке-содержимого-этого-атрибута)
- [Приходилось ли вам работать с языками HTML-шаблонизации?](#приходилось-ли-вам-работать-с-языками-html-шаблонизации)
### Для чего нужен DOCTYPE?
**DOCTYPE** — это сокращение от **DOCument TYPE** (тип документа).
DOCTYPE всегда связан с **DTD** — **Document Type Definition** (определение типа документа).
DTD определяет как должны быть структурированы документы определенного типа (т.е. тег `button` может содержать в себе тег `span`, но не `div`), в то время как DOCTYPE объявляет, к какому DTD *предположительно* относится документ.
DTD определяет как должны быть структурированы документы определенного типа (т.е. тег `button` может содержать в себе тег `span`, но не `div`), в то время как DOCTYPE объявляет, к какому DTD _предположительно_ относится документ.
Для веб-страниц объявление DOCTYPE необходимо. Он используется для того, чтобы сообщить пользовательскому агенту, к какой версии спецификаций HTML принадлежит ваш документ.
Как только пользовательский агент распознал правильный DOCTYPE, он запустит режим **no-quirks**, соответствующий этому DOCTYPE, для чтения документа.
@ -29,9 +29,9 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
###### Ссылки
* https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
* https://html.spec.whatwg.org/multipage/xhtml.html
* https://quirks.spec.whatwg.org/
- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
[[↑] Наверх](#вопросы-по-html)
@ -45,24 +45,24 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
###### Ссылки
* https://www.w3.org/International/getting-started/language
- https://www.w3.org/International/getting-started/language
[[↑] Наверх](#вопросы-по-html)
### На что необходимо обратить внимание при разработке мультиязычных сайтов?
* Используйте атрибут `lang` в HTML.
* Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
* Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
* Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
* Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
* Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в странах Европы.
* Не склеивайте переведенные строки. Не пишите что-то вроде `"Сегодняшняя дата " + date`. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно: `Я буду путешествовать {% date %}` и `{% date %} 我会出发`. Обратите внимание, что положение переменной отличается из-за грамматических правил языка.
* Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
- Используйте атрибут `lang` в HTML.
- Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
- Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
- Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в странах Европы.
- Не склеивайте переведенные строки. Не пишите что-то вроде `"Сегодняшняя дата " + date`. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно: `Я буду путешествовать {% date %}` и `{% date %} 我会出发`. Обратите внимание, что положение переменной отличается из-за грамматических правил языка.
- Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
###### Ссылки
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
[[↑] Наверх](#вопросы-по-html)
@ -74,25 +74,25 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
###### Ссылки
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
[[↑] Наверх](#вопросы-по-html)
### Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
* Семантика. Позволяет более точно описать из чего состоит контент.
* Связанность. Позволяет общаться с сервером новыми и инновационными способами.
* Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
* Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
* 2D/3D-графика и эффекты. Позволяет расширить возможности презентации.
* Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
* Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
* Стилизация. Позволяет создавать более сложные темы оформления.
- Семантика. Позволяет более точно описать из чего состоит контент.
- Связанность. Позволяет общаться с сервером новыми и инновационными способами.
- Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
- Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
- 2D/3D-графика и эффекты. Позволяет расширить возможности презентации.
- Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
- Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
- Стилизация. Позволяет создавать более сложные темы оформления.
###### Ссылки
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[[↑] Наверх](#вопросы-по-html)
@ -100,35 +100,35 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
| | `cookie` | `localStorage` | `sessionStorage` |
| -------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
| Инициатор | Клиент или сервер. Сервер может использовать заголовок `Set-Cookie` | Клиент | Клиент |
| Срок хранения | Устанавливается вручную | Всегда | До закрытия вкладки |
| Хранение между сессиями | Зависит от установки срока хранения | Да | Нет |
| Отправка на сервер с каждым HTTP-запросом | автоматически, с помощью заголовка `Cookie` | Нет | Нет |
| Емкость (на один домен) | 4 КБ | 5 МБ | 5 МБ |
| Доступность | В любом окне | В любом окне | В той же вкладке |
| | `cookie` | `localStorage` | `sessionStorage` |
| ----------------------------------------- | ------------------------------------------------------------------- | -------------- | ------------------- |
| Инициатор | Клиент или сервер. Сервер может использовать заголовок `Set-Cookie` | Клиент | Клиент |
| Срок хранения | Устанавливается вручную | Всегда | До закрытия вкладки |
| Хранение между сессиями | Зависит от установки срока хранения | Да | Нет |
| Отправка на сервер с каждым HTTP-запросом | автоматически, с помощью заголовка `Cookie` | Нет | Нет |
| Емкость (на один домен) | 4 КБ | 5 МБ | 5 МБ |
| Доступность | В любом окне | В любом окне | В той же вкладке |
###### Ссылки
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
[[↑] Наверх](#вопросы-по-html)
### Объясните разницу между `<script>`, `<script async>` и `<script defer>`.
* `<script>` - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
* `<script async>` - скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте `async` тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
* `<script defer>` - скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут `defer` обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом `<body>`. Отложенный скрипт не должен содержать `document.write`.
- `<script>` - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
- `<script async>` - скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте `async` тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
- `<script defer>` - скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут `defer` обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом `<body>`. Отложенный скрипт не должен содержать `document.write`.
Примечание: Атрибуты `async` и `defer` игнорируются, если у тега `<script>` нет атрибута `src`.
###### Ссылки
* 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/
- 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/
[[↑] Наверх](#вопросы-по-html)
@ -146,9 +146,9 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
###### Ссылки
* https://developer.yahoo.com/performance/rules.html#css_top
* https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
* https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
- https://developer.yahoo.com/performance/rules.html#css_top
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
[[↑] Наверх](#вопросы-по-html)
@ -162,14 +162,14 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
Примеры подобных технологий:
* Ленивая загрузка изображений. Изображения на странице не загружаются все разом. JavaScript подгрузит изображения тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
* Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события `DOMContentLoaded` или `load`, чтобы загрузить остальные ресурсы и контент.
* Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать [в этой статье](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
- Ленивая загрузка изображений. Изображения на странице не загружаются все разом. JavaScript подгрузит изображения тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
- Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события `DOMContentLoaded` или `load`, чтобы загрузить остальные ресурсы и контент.
- Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать [в этой статье](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
###### Ссылки
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] Наверх](#вопросы-по-html)
@ -177,9 +177,9 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
Вы должны использовать атрибут `srcset`, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
* 500 / 320 = 1.5625
* 1000 / 320 = 3.125
* 2000 / 320 = 6.25
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25
Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и `500w` соответствующее `small.jpg` будет отображено в браузере.
@ -189,8 +189,8 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
###### Ссылки
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
[[↑] Наверх](#вопросы-по-html)
@ -202,7 +202,7 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
### Другие ответы
* 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/
- 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/
---

541
Translations/Russian/questions/javascript-questions.md
View File

File diff suppressed because it is too large Load Diff

3
Translations/Tagalog/CODE_OF_CONDUCT.md
View File

@ -1,3 +0,0 @@
# 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.

250
Translations/Tagalog/questions/css-questions.md
View File

@ -2,37 +2,37 @@
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)
* [Ilarawan ang mga `float` at kung paano sila gumagana.](#ilarawan-ang-mga-float-at-kung-paano-sila-gumagana)
* [Ilarawan ang z-index at kung papaano nabuo ang konteksto.](iIlarawan-ang-z-index-at-kung-papaano-nabuo-ang-konteksto)
* [Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.](#ilarawan-ang-bfk-block-formatting-na-konteksto-at-papaaano-ito-gumagana)
* [Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?](#ano-ang-ibat-ibang-teknik-ng-paglilinis-at-kung-ano-ang-nararapat-sa-kung-ano-ang-konteksto)
* [Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.](#ipaliwanag-ang-mga-css-na-sprite-at-papaano-mo-ipapatupad-ang-mga-ito-sa-isang-pahina-o-site)
* [Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?](#papaano-mo-didiskartehan-ang-pag-aayos-ng-mga-ispisipik-sa-browser-na-pag-eestilo-na-isyu)
* [Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?](#papaano-mo-inahahanda-ang-iyong-mga-pahina-para-sa-mga-browser-na-kulang-sa-tampok-ano-ano-ang-mga-teknik-or-proseso-ang-iyong-ginagamit)
* [Ano-ano ang mga iba't ibang pamamaraan upang matago ang nakatagong nilalaman (at gawan ng paraan na ito ay magagamit lamang ng mga mambabasa ng iskrin)?](#ano-ano-ang-mga-ibat-ibang-pamamaraan-upang-matago-ang-nakatagong-nilalaman-at-gawan-ng-paraan-na-ito-ay-magagamit-lamang-ng-mga-mambabasa-ng-iskrin)
* [Ikaw ba ay nakagamit kailanman ng sistemang grid?, at kung gayon, Ano ang iyong mas pipiliin?](#ikaw-ba-ay-nakagamit-kailanman-ng-sistemang-grid-at-kung-gayon-ano-ang-iyong-mas-pipiliin)
* [Ikaw ba ay nakagamit oh nakapagpatupad na ng mga query sa mobile o mga layout na espisipik sa mobile/CSS?](#ikaw-ba-ay-nakagamit-oh-nakapagpatupad-na-ng-mga-query-sa-mobile-o-mga-layout-na-espisipik-sa-mobilecss)
* [Ikaw ba ay pamilyar sa estilong SVG?](#ikaw-ba-ay-pamilyar-sa-estilong-svg)
* [Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?](#makapagbibigay-kaba-ng-halimbawa-ng-klase-ng-media-maliban-sa-iskrin)
* [Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?](#ano-ano-ang-ilan-sa-mga-pasabog-para-sa-epektibong-pagsusulat-ng-css)
* [Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?](#ano-ang-mga-pakinabang-o-di-pakinabang-ng-paggamit-ng-mga-preprocessors-ng-css)
* [Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.](#ilarawan-kung-ano-ang-iyong-gusto-at-di-gusto-tungkol-sa-css-na-mga-preprocessor-na-iyong-nagamit)
* [Papaano mo ipapatupad ang isang web design comp na gumagamit ng mga di pangkaraniwang font?](#papaano-mo-ipapatupad-ang-isang-web-design-comp-na-gumagamit-ng-mga-di-pangkaraniwang-font)
* [Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.](#ipaliwanag-kung-paano-tinutukoy-ng-isang-browser-kung-anu-anong-mga-elemento-ang-tumutugma-sa-tagapili-ng-css)
* [Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.](#ilarawan-ang-mga-elementong-pseudo-at-talakayin-kung-para-saan-ito-gagamitin)
* [Ipaliwanag ang iyong pagkakaintindi sa modelong kahon at papaano mo pagsasabihan ang browser sa CSS na mag-render ng iyong layout sa iba't ibang modelo ng kahon.](#ipaliwanag-ang-iyong-pagkakaintindi-sa-modelong-kahon-at-papaano-mo-pagsasabihan-ang-browser-sa-css-na-mag-render-ng-iyong-layout-sa-ibat-ibang-modelo-ng-kahon)
* [Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?](#ano-ang-ginagawa-ng---box-sizing-border-box--anu-ano-ang-mga-pakinabang-nito)
* [Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?](#ano-ang-katangian-ng-css-na-display-at-pwede-ka-bang-magbigay-ng-ilang-mga-halimbawa-ng-paggamit-nito)
* [Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?](#ano-ang-pagkakaiba-sa-pagitan-ng-inline-at-inline-block)
* [Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?](#ano-ang-pagkakaiba-sa-pagitan-ng-relative-fixed-absolute-at-elementong-nakaposisyong-panig-sa-static)
* [Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?](#ano-ang-mga-umiiral-na-framework-ng-css-na-ginamit-mo-ng-lokal-o-kaya-naman-ay-sa-produksyon-papaano-mo-babaguhin-o-mapapabuti-ang-mga-ito)
* [Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?](#ikaw-ba-ay-nakapaglaro-na-sa-paligid-ng-bagong-css-flexbox-o-grid-na-specs)
* [Maipapaliwanag mo ba ang kaibahan sa pagitan ng pag-code ng isang web site na tumutugon kumpara sa paggamit ng diskarteng mobile ang una?](#maipapaliwanag-mo-ba-ang-kaibahan-sa-pagitan-ng-pag-code-ng-isang-web-site-na-tumutugon-kumpara-sa-paggamit-ng-diskarteng-mobile-ang-una)
* [Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?](#sa-anong-paraan-naiiba-ang-disenyo-ng-tumutugon-mula-sa-disenyo-ng-umaangkop)
* [Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?](#ikaw-ba-ay-nakagamit-na-ng-mga-grapikong-retina-kung-gayon-kelan-at-anu-anong-mga-teknik-ang-iyong-ginamit)
* [May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?](#may-kadahilanan-ba-na-nais-mong-gamitin-ang-translate-kesa-sa-absolute-na-pag-poposisyon-o-kabaliktaran-at-bakit)
- [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)
- [Ilarawan ang mga `float` at kung paano sila gumagana.](#ilarawan-ang-mga-float-at-kung-paano-sila-gumagana)
- [Ilarawan ang z-index at kung papaano nabuo ang konteksto.](iIlarawan-ang-z-index-at-kung-papaano-nabuo-ang-konteksto)
- [Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.](#ilarawan-ang-bfk-block-formatting-na-konteksto-at-papaaano-ito-gumagana)
- [Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?](#ano-ang-ibat-ibang-teknik-ng-paglilinis-at-kung-ano-ang-nararapat-sa-kung-ano-ang-konteksto)
- [Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.](#ipaliwanag-ang-mga-css-na-sprite-at-papaano-mo-ipapatupad-ang-mga-ito-sa-isang-pahina-o-site)
- [Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?](#papaano-mo-didiskartehan-ang-pag-aayos-ng-mga-ispisipik-sa-browser-na-pag-eestilo-na-isyu)
- [Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?](#papaano-mo-inahahanda-ang-iyong-mga-pahina-para-sa-mga-browser-na-kulang-sa-tampok-ano-ano-ang-mga-teknik-or-proseso-ang-iyong-ginagamit)
- [Ano-ano ang mga iba't ibang pamamaraan upang matago ang nakatagong nilalaman (at gawan ng paraan na ito ay magagamit lamang ng mga mambabasa ng iskrin)?](#ano-ano-ang-mga-ibat-ibang-pamamaraan-upang-matago-ang-nakatagong-nilalaman-at-gawan-ng-paraan-na-ito-ay-magagamit-lamang-ng-mga-mambabasa-ng-iskrin)
- [Ikaw ba ay nakagamit kailanman ng sistemang grid?, at kung gayon, Ano ang iyong mas pipiliin?](#ikaw-ba-ay-nakagamit-kailanman-ng-sistemang-grid-at-kung-gayon-ano-ang-iyong-mas-pipiliin)
- [Ikaw ba ay nakagamit oh nakapagpatupad na ng mga query sa mobile o mga layout na espisipik sa mobile/CSS?](#ikaw-ba-ay-nakagamit-oh-nakapagpatupad-na-ng-mga-query-sa-mobile-o-mga-layout-na-espisipik-sa-mobilecss)
- [Ikaw ba ay pamilyar sa estilong SVG?](#ikaw-ba-ay-pamilyar-sa-estilong-svg)
- [Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?](#makapagbibigay-kaba-ng-halimbawa-ng-klase-ng-media-maliban-sa-iskrin)
- [Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?](#ano-ano-ang-ilan-sa-mga-pasabog-para-sa-epektibong-pagsusulat-ng-css)
- [Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?](#ano-ang-mga-pakinabang-o-di-pakinabang-ng-paggamit-ng-mga-preprocessors-ng-css)
- [Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.](#ilarawan-kung-ano-ang-iyong-gusto-at-di-gusto-tungkol-sa-css-na-mga-preprocessor-na-iyong-nagamit)
- [Papaano mo ipapatupad ang isang web design comp na gumagamit ng mga di pangkaraniwang font?](#papaano-mo-ipapatupad-ang-isang-web-design-comp-na-gumagamit-ng-mga-di-pangkaraniwang-font)
- [Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.](#ipaliwanag-kung-paano-tinutukoy-ng-isang-browser-kung-anu-anong-mga-elemento-ang-tumutugma-sa-tagapili-ng-css)
- [Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.](#ilarawan-ang-mga-elementong-pseudo-at-talakayin-kung-para-saan-ito-gagamitin)
- [Ipaliwanag ang iyong pagkakaintindi sa modelong kahon at papaano mo pagsasabihan ang browser sa CSS na mag-render ng iyong layout sa iba't ibang modelo ng kahon.](#ipaliwanag-ang-iyong-pagkakaintindi-sa-modelong-kahon-at-papaano-mo-pagsasabihan-ang-browser-sa-css-na-mag-render-ng-iyong-layout-sa-ibat-ibang-modelo-ng-kahon)
- [Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?](#ano-ang-ginagawa-ng---box-sizing-border-box--anu-ano-ang-mga-pakinabang-nito)
- [Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?](#ano-ang-katangian-ng-css-na-display-at-pwede-ka-bang-magbigay-ng-ilang-mga-halimbawa-ng-paggamit-nito)
- [Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?](#ano-ang-pagkakaiba-sa-pagitan-ng-inline-at-inline-block)
- [Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?](#ano-ang-pagkakaiba-sa-pagitan-ng-relative-fixed-absolute-at-elementong-nakaposisyong-panig-sa-static)
- [Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?](#ano-ang-mga-umiiral-na-framework-ng-css-na-ginamit-mo-ng-lokal-o-kaya-naman-ay-sa-produksyon-papaano-mo-babaguhin-o-mapapabuti-ang-mga-ito)
- [Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?](#ikaw-ba-ay-nakapaglaro-na-sa-paligid-ng-bagong-css-flexbox-o-grid-na-specs)
- [Maipapaliwanag mo ba ang kaibahan sa pagitan ng pag-code ng isang web site na tumutugon kumpara sa paggamit ng diskarteng mobile ang una?](#maipapaliwanag-mo-ba-ang-kaibahan-sa-pagitan-ng-pag-code-ng-isang-web-site-na-tumutugon-kumpara-sa-paggamit-ng-diskarteng-mobile-ang-una)
- [Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?](#sa-anong-paraan-naiiba-ang-disenyo-ng-tumutugon-mula-sa-disenyo-ng-umaangkop)
- [Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?](#ikaw-ba-ay-nakagamit-na-ng-mga-grapikong-retina-kung-gayon-kelan-at-anu-anong-mga-teknik-ang-iyong-ginamit)
- [May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?](#may-kadahilanan-ba-na-nais-mong-gamitin-ang-translate-kesa-sa-absolute-na-pag-poposisyon-o-kabaliktaran-at-bakit)
### Ano ang pagsisigurado ng CSS selector at kung paano ito gumagana?
@ -51,21 +51,21 @@ Mas gusto kong magsulat ng mga CSS na panuntunan na may mababang pagtitiyak ng s
###### Mga Reperensiya
* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
* https://www.sitepoint.com/web-foundations/specificity/
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?
* **Pag-reset** - Ang pag-reset ay sinadya upang i-strip ang lahat ng mga default na pag-istilo ng browser sa mga elemento. Halimbawa. mga `margin`,mga `padding`,mga `font-size` ng lahat ng mga elemento ay naka-set upang maging pareho. Kakailanganin mong ideklara ulit ang estilo para sa karaniwang mga elemento ng tipograpiya.
* **Pag-normalize** - Ang pag-normalize ay pinapanatili ang kapaki-pakinabang na mga estilo ng default sa halip na i-unstyle ang lahat. Iniayos din nito ang mga bug para sa mga karaniwang dependensya ng browser.
- **Pag-reset** - Ang pag-reset ay sinadya upang i-strip ang lahat ng mga default na pag-istilo ng browser sa mga elemento. Halimbawa. mga `margin`,mga `padding`,mga `font-size` ng lahat ng mga elemento ay naka-set upang maging pareho. Kakailanganin mong ideklara ulit ang estilo para sa karaniwang mga elemento ng tipograpiya.
- **Pag-normalize** - Ang pag-normalize ay pinapanatili ang kapaki-pakinabang na mga estilo ng default sa halip na i-unstyle ang lahat. Iniayos din nito ang mga bug para sa mga karaniwang dependensya ng browser.
Mas pipiliin ko ang pagreset kung meron man akong mas pinasadya o hindi tipikal na disenyo ng site tulad ng kailangan kong gawin sa karamihan ng aking sariling estilo at hindi kailangan ng anumang mga default na estilo para sa pag-aalaga.
###### Mga Reperensiya
* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -81,7 +81,7 @@ Ang `.clearfix` na hack ay gumagamit ng isang wais na CSS pseudo na selector na
```css
.clearfix:after {
content: ' ';
content: " ";
visibility: hidden;
display: block;
height: 0;
@ -93,7 +93,7 @@ Bilang alternatibo, Ibigay ang `overflow: auto` o `overflow: hidden` na katangia
###### Mga Reperensiya
* https://css-tricks.com/all-about-floats/
- https://css-tricks.com/all-about-floats/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -109,9 +109,9 @@ Ang bawat kontekstong nakasalansan ay nakatimpi - matapos ang mga nilalaman ng e
###### Mga Reperensiya
* 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
- 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
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -122,10 +122,10 @@ Ang Block Formatting na Konteksto (BFK) ay parte ng biswal na pagrender ng css n
Ang BFK ay isang HTML na kahon na natutugunan ng hindi bababa sa isa sa mga sumusunod na kondisyon:
* Ang halaga ng `float` ay hindi `none`.
* Ang halaga ng `position` ay hindi `static` o `relative`.
* Ang halaga ng `display` ay `table-cell`, `table-caption`, `inline-block`, `flex`, o `inline-flex`.
* Ang halaga ng `overflow` ay hindi `visible`.
- Ang halaga ng `float` ay hindi `none`.
- Ang halaga ng `position` ay hindi `static` o `relative`.
- Ang halaga ng `display` ay `table-cell`, `table-caption`, `inline-block`, `flex`, o `inline-flex`.
- Ang halaga ng `overflow` ay hindi `visible`.
Sa isang BFK, hinawakan ang kaliwang panlabas na gilid ng bawat kahon ang kaliwang gilid ng bloke na naglalaman
(for right-to-left formatting, right edges touch).
@ -134,16 +134,16 @@ Ang mga bertikal na margin sa pagitan ng mga katabing kahon ng block-level sa is
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?
* Walang laman na `div` na paraaan- `<div style="clear:both;"></div>`.
* Clearfix na paraan - Sumangguni sa `.clearfix` na klase sa itaas.
* `overflow: auto` o `overflow: hidden` na paraan - Magtatatag ang magulang ng isang bagong konteksto sa pag-format ng block at palawakin na naglalaman ng mga anak nito.
- Walang laman na `div` na paraaan- `<div style="clear:both;"></div>`.
- Clearfix na paraan - Sumangguni sa `.clearfix` na klase sa itaas.
- `overflow: auto` o `overflow: hidden` na paraan - Magtatatag ang magulang ng isang bagong konteksto sa pag-format ng block at palawakin na naglalaman ng mga anak nito.
Sa mga malaking proyekto, Gusto kong magsulat ng kagamitan na `.clearfix` na klase at gamitin ang mga ito sa mga lugar na kung saan ko kailangan. Ang `overflow: hidden` maaaring i-clip ang mga bata kung ang mga bata ay mas mataas kaysa sa magulang at hindi masyadong mainam.
@ -159,31 +159,31 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
**Mga Bentahe:**
* Bawasan ang bilang ng mga kahilingan ng HTTP para sa maraming mga imahe (kailangan lamang ng isang solong kahilingan sa bawat spritesheet). Ngunit sa HTTP2, Ang paglo-load ng maramihang mga imahe ay kinalaunan hindi na isang isyu.
* Pangunang pagdownload ng mga asset na hindi ma-download hangga't hindi pa kailangan, gaya ng mga imahe na makikita lang kung ang `:hover` ay nasa pseudo na estado. Ang pag-blink ay hindi makikita.
- Bawasan ang bilang ng mga kahilingan ng HTTP para sa maraming mga imahe (kailangan lamang ng isang solong kahilingan sa bawat spritesheet). Ngunit sa HTTP2, Ang paglo-load ng maramihang mga imahe ay kinalaunan hindi na isang isyu.
- Pangunang pagdownload ng mga asset na hindi ma-download hangga't hindi pa kailangan, gaya ng mga imahe na makikita lang kung ang `:hover` ay nasa pseudo na estado. Ang pag-blink ay hindi makikita.
###### Mga Reperensiya
* https://css-tricks.com/css-sprites/
- https://css-tricks.com/css-sprites/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?
* Matapos malaman ang isyu at ang nakakasakit na browser, gumamit ng isang hiwalay na estilo ng sheet na naglo-load lamang kapag ginagamit ang partikular na browser na iyon. Bagaman ang pamamaraan na ito ay nangangailangan ng pagrender sa panig ng serber.
* Gumamit ng mga librerya kagaya ng Bootstrap na humahawak na ng mga estilo ng mga isyu para sa iyo.
* Gumamit ng `autoprefixer` upang awtomatikong magdagdag ng mga prefix ng vendor sa iyong code.
* Gumamit ng pa-reset sa CSS o kaya naman ay Normalize.css.
- Matapos malaman ang isyu at ang nakakasakit na browser, gumamit ng isang hiwalay na estilo ng sheet na naglo-load lamang kapag ginagamit ang partikular na browser na iyon. Bagaman ang pamamaraan na ito ay nangangailangan ng pagrender sa panig ng serber.
- Gumamit ng mga librerya kagaya ng Bootstrap na humahawak na ng mga estilo ng mga isyu para sa iyo.
- Gumamit ng `autoprefixer` upang awtomatikong magdagdag ng mga prefix ng vendor sa iyong code.
- Gumamit ng pa-reset sa CSS o kaya naman ay Normalize.css.
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?
* Kaaya-ayang pag-degrade - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa mga modernong browser habang tinitiyak na ito ay nananatiling punksyonal sa mas lumang mga browser.
* progresibong pagpapahusay - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa antas ng lebel ng karanasan ng gumagamit, ngunit nagdaragdag ng mga punksyonal na pagpapahusay kapag sinusuportahan ito ng isang browser.
* Gumamit ng [caniuse.com](https://caniuse.com/)upang suriin ang suporta sa tampok.
* Autoprefixer para sa pagpapasok ng prefix ng awtomatikong vendor.
* Pag-detect ng mga tampok gamit ang [Modernizr](https://modernizr.com/).
- Kaaya-ayang pag-degrade - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa mga modernong browser habang tinitiyak na ito ay nananatiling punksyonal sa mas lumang mga browser.
- progresibong pagpapahusay - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa antas ng lebel ng karanasan ng gumagamit, ngunit nagdaragdag ng mga punksyonal na pagpapahusay kapag sinusuportahan ito ng isang browser.
- Gumamit ng [caniuse.com](https://caniuse.com/)upang suriin ang suporta sa tampok.
- Autoprefixer para sa pagpapasok ng prefix ng awtomatikong vendor.
- Pag-detect ng mga tampok gamit ang [Modernizr](https://modernizr.com/).
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -191,20 +191,20 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
Ang mga pamamaraan na ito ay may kaugnayan sa pagkakarating (a11y).
* `visibility: hidden`. Gayunpaman ang elemento ay nasa daloy pa rin ng pahina, at umuupa pa rin ng espasyo.
* `width: 0; height: 0`. Gawin ang elemento na hindi kukuha ng anumang espasyo sa iskrin ng lahat, na magreresulta sa hindi pagpapakita nito.
* `position: absolute; left: -99999px`. Ilagay ito sa labas ng iskrin.
* `text-indent: -9999px`. Ito ay gagana lamang sa mga teksto sa loob ng `block` na mga elemento.
* Metadata. Halimbawa ay sa paggamit ng Schema.org, RDF at JSON-LD.
* WAI-ARIA. Isang W3C na teknikal na ispisipikasyon na tinutukoy kung paano madagdagan ang ang abilidad ng pag-akses ng mga pahina ng web.
- `visibility: hidden`. Gayunpaman ang elemento ay nasa daloy pa rin ng pahina, at umuupa pa rin ng espasyo.
- `width: 0; height: 0`. Gawin ang elemento na hindi kukuha ng anumang espasyo sa iskrin ng lahat, na magreresulta sa hindi pagpapakita nito.
- `position: absolute; left: -99999px`. Ilagay ito sa labas ng iskrin.
- `text-indent: -9999px`. Ito ay gagana lamang sa mga teksto sa loob ng `block` na mga elemento.
- Metadata. Halimbawa ay sa paggamit ng Schema.org, RDF at JSON-LD.
- WAI-ARIA. Isang W3C na teknikal na ispisipikasyon na tinutukoy kung paano madagdagan ang ang abilidad ng pag-akses ng mga pahina ng web.
Kahit na ang WAI-ARIA ay ang angkop na solusyon, Ako ay pupunta parin sa `absolute` na pagpoposisyon na paglapit, dahil mayroon itong maliit na mga problema, na gumagana para sa karamihan ng mga elemento at ito ay isang madaling pamamaraan.
###### Mga Reperensiya
* https://www.w3.org/TR/wai-aria-1.1/
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
* http://a11yproject.com/
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -230,10 +230,10 @@ Hindi... Sa kasamaang palad
Oo, mayroong apat na uri ng @media na mga katangian (kabilang ang _screen_):
* `all` - para sa lahat ng mga aparatong uri ng media
* `print` - para sa mga printer
* `speech` - para sa mga nagbabasa ng iskrin na "binabasa" ang pahina ng malakas
* `screen` -para sa mga iskrin ng kompyuter, tablet, smart-phone atbp
- `all` - para sa lahat ng mga aparatong uri ng media
- `print` - para sa mga printer
- `speech` - para sa mga nagbabasa ng iskrin na "binabasa" ang pahina ng malakas
- `screen` -para sa mga iskrin ng kompyuter, tablet, smart-phone atbp
Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
@ -247,7 +247,7 @@ Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -261,8 +261,8 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
###### Mga Reperensiya
* https://developers.google.com/web/fundamentals/performance/rendering/
* https://csstriggers.com/
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -270,15 +270,15 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
**Mga Bentahe:**
* CSS ay ginawang mas kapanati-panatili.
* Madaling sumulat nga mga nested na tagapili.
* Mga variable para sa pare-pareho na pag-theme. Maaaring magbahagi ng mga file ng tema sa iba't ibang mga proyekto.
* Mga paghalo para maka-generate ng naulit na CSS.
* Ang paghati sa iyong code sa maramihang mga file. Ang mga file ng CSS ay maaaring hatiin din ngunit ang paggawa nito ay mangangailangan pa ng isang HTTP na kahilingan upang i-download ang bawat CSS na file.
- CSS ay ginawang mas kapanati-panatili.
- Madaling sumulat nga mga nested na tagapili.
- Mga variable para sa pare-pareho na pag-theme. Maaaring magbahagi ng mga file ng tema sa iba't ibang mga proyekto.
- Mga paghalo para maka-generate ng naulit na CSS.
- Ang paghati sa iyong code sa maramihang mga file. Ang mga file ng CSS ay maaaring hatiin din ngunit ang paggawa nito ay mangangailangan pa ng isang HTTP na kahilingan upang i-download ang bawat CSS na file.
**Mga Kasahulan:**
* Nangangailangan ng mga gamit para sa pag-preprocess. Maaaring ang oras ng pag-compile ulit ay magiging.
- Nangangailangan ng mga gamit para sa pag-preprocess. Maaaring ang oras ng pag-compile ulit ay magiging.
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -286,13 +286,13 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
**Mga Gusto:**
* Halos ang lahat ng bentahe ay nasabi na sa itaas.
* Kaunti lang ang isinulat sa JavaScript, na gumaganap nang mahusay sa Node.
- Halos ang lahat ng bentahe ay nasabi na sa itaas.
- Kaunti lang ang isinulat sa JavaScript, na gumaganap nang mahusay sa Node.
**Mga Hindi Gusto:**
* Gumagamit ako ng Sass sa pamamagitan ng `node-sass`, na kung saan ay naka-bisa para sa LibSass na nakasulat sa C++. Ako ay madalas na mag-recompile nito kapag ako ay lumilipat sa pagitan ng mga bersyon ng node.
* Sa maliit, ang mga variable na pangalan ay naka-prefix sa `@`, na maaaring malito sa katutubong mga keyword sa CSS tulad ng `@ media`,`@ import` at `@ font-face` na panuntunan.
- Gumagamit ako ng Sass sa pamamagitan ng `node-sass`, na kung saan ay naka-bisa para sa LibSass na nakasulat sa C++. Ako ay madalas na mag-recompile nito kapag ako ay lumilipat sa pagitan ng mga bersyon ng node.
- Sa maliit, ang mga variable na pangalan ay naka-prefix sa `@`, na maaaring malito sa katutubong mga keyword sa CSS tulad ng `@ media`,`@ import` at `@ font-face` na panuntunan.
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -310,7 +310,7 @@ Halimbawa ay sa tagapiling `p span` na ito, unang hahanapin ng mga browser ang l
###### Mga Reperensiya
* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -318,13 +318,13 @@ Halimbawa ay sa tagapiling `p span` na ito, unang hahanapin ng mga browser ang l
Ang CSS pseudo-element ay isang keyword na dinadagdag sa tagapili na nagbibigay-daan sa iyo ng pag-eestilo ng isang tiyak na bahagi ng piniling elemento(s). Maaari silang magamit para sa dekorasyon (`:first-line`, `:first-letter`) o pagdaragdag ng mga elemento sa markup (kasama ng `content: ...`) na hindi na kailangang baguhin pa ang markup (`:before`, `:after`).
* `:first-line` at `:first-letter` ay magagamit para lagyan ng dekorasyon ang teksto.
- `:first-line` at `:first-letter` ay magagamit para lagyan ng dekorasyon ang teksto.
\*Ginamit sa `.clearfix` na hack na ipinakita sa itaas upang magdagdag ng zero-space na elemento kasabay ang `clear: both`.
* Mala-tatsulok na mga arrow sa tooltips ay gumagamit ng `:before` at `:after`. Hinihikayat ang paghihiwalay ng mga alalahanin dahil ang tatsulok ay itinuturing na bahagi ng estilo at hindi talaga ang DOM. Hindi talaga posible na gumuhit ng isang tatsulok na may mga estilo lamang ng CSS nang hindi gumagamit ng karagdagang elemento ng HTML.
- Mala-tatsulok na mga arrow sa tooltips ay gumagamit ng `:before` at `:after`. Hinihikayat ang paghihiwalay ng mga alalahanin dahil ang tatsulok ay itinuturing na bahagi ng estilo at hindi talaga ang DOM. Hindi talaga posible na gumuhit ng isang tatsulok na may mga estilo lamang ng CSS nang hindi gumagamit ng karagdagang elemento ng HTML.
###### RMga Reperensiya
* https://css-tricks.com/almanac/selectors/a/after-and-before/
- https://css-tricks.com/almanac/selectors/a/after-and-before/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -334,37 +334,37 @@ Ang CSS na modelo ng kahon ay naglalarawan ng mga hugis-parihaba na kahon na bin
Ang CSS na modelong kahon ay responsable sa pagkalkula ng:
* Ilang ang espasyong kinakain ng elemento ng block.
* Kung ang mga borders at / o mga palugit ay magkakapatong, o bumagsak.
* Mga sukat ng isang kahon.
- Ilang ang espasyong kinakain ng elemento ng block.
- Kung ang mga borders at / o mga palugit ay magkakapatong, o bumagsak.
- Mga sukat ng isang kahon.
Ang modelo ng kahon ay may mga sumusunod na panuntunan:
* Ang mga sukat ng isang elemento ng block ay kinakalkula gamit ang `lapad`,`taas`, `padding`, mga `border`, at mga `margin`.
* Kung walang tinukoy na `taas`, ang isang elementong bloke ay magiging kasing taas ng nilalaman na naglalaman nito, kasama ang `padding` (maliban kung may mga float, na nakikita sa ibaba).
* Kung walang tinukoy na `lapad`, ang isang hindi floated na elemento ng block ay lalawak upang magkasya ang lapad ng kanyang magulang na bawas ang `padding`.
* Ang `taas` ng isang elemento ay kinakalkula sa pamamagitan ng`taas` ng nilalaman.
* Ang `lapad` ng isang elemento ay kinakalkula ng `lapad` ng nilalaman.
* Sa pamamagitan ng default, ang `padding` at mga `border`s ay hindi bahagi ng `lapad` at`taas` ng isang elemento.
- Ang mga sukat ng isang elemento ng block ay kinakalkula gamit ang `lapad`,`taas`, `padding`, mga `border`, at mga `margin`.
- Kung walang tinukoy na `taas`, ang isang elementong bloke ay magiging kasing taas ng nilalaman na naglalaman nito, kasama ang `padding` (maliban kung may mga float, na nakikita sa ibaba).
- Kung walang tinukoy na `lapad`, ang isang hindi floated na elemento ng block ay lalawak upang magkasya ang lapad ng kanyang magulang na bawas ang `padding`.
- Ang `taas` ng isang elemento ay kinakalkula sa pamamagitan ng`taas` ng nilalaman.
- Ang `lapad` ng isang elemento ay kinakalkula ng `lapad` ng nilalaman.
- Sa pamamagitan ng default, ang `padding` at mga `border`s ay hindi bahagi ng `lapad` at`taas` ng isang elemento.
###### Mga Reperensiya
* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?
* Bilang default, ang mga elemento ay may `box-sizing: content-box` na naipapatupad, at tanging ang laki ng nilalaman lang ang siyang binibilang.
* Ang `box-sizing: border-box` ay ang siyang nagpapabago kung papaano kinakalkula ang `lapad` at `taas` ng mga elemento, kasama ang `border` at `padding` sa pagkalkula.
* Ang `taas` ng isang elemento ay kinalkula ngayon ng lapad ng`taas` + bertikal na `padding` + bertikal na `border`.
* Ang `lapad` ng isang elemento ay kinakalkula ngayon ng `lapad` ng nilalaman + pahalang na `padding` + pahalang na `border`.
- Bilang default, ang mga elemento ay may `box-sizing: content-box` na naipapatupad, at tanging ang laki ng nilalaman lang ang siyang binibilang.
- Ang `box-sizing: border-box` ay ang siyang nagpapabago kung papaano kinakalkula ang `lapad` at `taas` ng mga elemento, kasama ang `border` at `padding` sa pagkalkula.
- Ang `taas` ng isang elemento ay kinalkula ngayon ng lapad ng`taas` + bertikal na `padding` + bertikal na `border`.
- Ang `lapad` ng isang elemento ay kinakalkula ngayon ng `lapad` ng nilalaman + pahalang na `padding` + pahalang na `border`.
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?
* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
@ -389,23 +389,23 @@ Ako ay magbibigay ng isang paghahambing sa `block` para sa mahusay na panukalang
Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posisyon` ay alinman sa`kamag-anak`, `absolute`,`fixed` o `malagkit`.
* `static` - Ang default na posisyon; ang elemento ay dumadaloy sa pahina gaya ng karaniwan. Ang mga `taas`,`kanan`, `ilalim`,`kaliwa` at `z-index` na katangian ay hindi nalalapat.
* `kamag-anak` - Ang posisyon ng elemento ay nababagay sa sarili nito, nang hindi binabago ang layout (at sa gayo'y nag-iiwan ng puwang para sa elemento kung saan ay hindi ito nakaposisyon).
* `absolute` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa pinakamalapit na nakaposisyon na ninuno kung mayroon man, o kung hindi man sa kamag-anak sa paunang nilalaman ng bloke. Ang mga nakaposisyon na mga kahon ay maaaring magkaroon ng mga gilid, at hindi sila bumagsak sa anumang iba pang mga margin. Ang mga elementong ito ay hindi nakakaapekto sa posisyon ng iba pang mga elemento.
* `naayos` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa viewport na hindi gumagalaw kapag nag-scroll.
* `malagkit` - Ang malagkit na pagpoposisyon ay isang hybrid ng kamag-anak at nakapirming pagpoposisyon. Ang elemento ay itinuturing bilang `kamag-anak` na nakaposisyon hanggang sa lumampas ito sa tinutukoy na limitasyon, na kung saan ang puntong ito ay itinuturing na `nakatakda` na nakaposisyon.
- `static` - Ang default na posisyon; ang elemento ay dumadaloy sa pahina gaya ng karaniwan. Ang mga `taas`,`kanan`, `ilalim`,`kaliwa` at `z-index` na katangian ay hindi nalalapat.
- `kamag-anak` - Ang posisyon ng elemento ay nababagay sa sarili nito, nang hindi binabago ang layout (at sa gayo'y nag-iiwan ng puwang para sa elemento kung saan ay hindi ito nakaposisyon).
- `absolute` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa pinakamalapit na nakaposisyon na ninuno kung mayroon man, o kung hindi man sa kamag-anak sa paunang nilalaman ng bloke. Ang mga nakaposisyon na mga kahon ay maaaring magkaroon ng mga gilid, at hindi sila bumagsak sa anumang iba pang mga margin. Ang mga elementong ito ay hindi nakakaapekto sa posisyon ng iba pang mga elemento.
- `naayos` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa viewport na hindi gumagalaw kapag nag-scroll.
- `malagkit` - Ang malagkit na pagpoposisyon ay isang hybrid ng kamag-anak at nakapirming pagpoposisyon. Ang elemento ay itinuturing bilang `kamag-anak` na nakaposisyon hanggang sa lumampas ito sa tinutukoy na limitasyon, na kung saan ang puntong ito ay itinuturing na `nakatakda` na nakaposisyon.
###### Mga Reperensiya
* https://developer.mozilla.org/en/docs/Web/CSS/position
- https://developer.mozilla.org/en/docs/Web/CSS/position
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?
* ** Bootstrap ** - Mabagal na ikot ng paglabas. Ang Bootstrap 4 ay nasa alpha sa halos dalawang taon. Magdagdag ng bahagi ng pindutan ng spinner, dahil malawak itong ginagamit.
* ** Semantikong UI ** - Ang istraktura ng pinagmulang code ay gumagawa ng pagsadya ng tema na napakahirap maunawaan. Masakit na ipasadya sa hindi pangkaraniwang sistema ng paggawa ng tema. Hardcoded na config na landas sa loob ng librerya ng vendor. Hindi mahusay na pag-disenyo para pag-override ng mga variable na hindi katulad sa Bootstrap.
* ** Bulma ** - Isang pulutong ng mga di-semantiko at labis na mga klase at markup ang kinakailangan. Hindi tugma ang pabalik. Ang pag-upgrade ng mga bersyon sa sumisira sa app sa banayad na asal.
- ** Bootstrap ** - Mabagal na ikot ng paglabas. Ang Bootstrap 4 ay nasa alpha sa halos dalawang taon. Magdagdag ng bahagi ng pindutan ng spinner, dahil malawak itong ginagamit.
- ** Semantikong UI ** - Ang istraktura ng pinagmulang code ay gumagawa ng pagsadya ng tema na napakahirap maunawaan. Masakit na ipasadya sa hindi pangkaraniwang sistema ng paggawa ng tema. Hardcoded na config na landas sa loob ng librerya ng vendor. Hindi mahusay na pag-disenyo para pag-override ng mga variable na hindi katulad sa Bootstrap.
- ** Bulma ** - Isang pulutong ng mga di-semantiko at labis na mga klase at markup ang kinakailangan. Hindi tugma ang pabalik. Ang pag-upgrade ng mga bersyon sa sumisira sa app sa banayad na asal.
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -419,7 +419,7 @@ Ang Grid sa ngayon ay ang pinaka-intuitive na diskarte para sa paglikha ng grid-
###### Mga Reperensiya
* https://philipwalton.github.io/solved-by-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -439,9 +439,9 @@ Ang bumabagay na disenyo ay mas katulad ng modernong kahulugan ng progresibong p
###### Mga Reperensiya
* 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/
- 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/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -455,7 +455,7 @@ Ang isa pang paraan ay ang paggamit ng JavaScript upang palitan ang mga attribut
###### Mga Reperensiya
* https://www.sitepoint.com/css-techniques-for-retina-displays/
- https://www.sitepoint.com/css-techniques-for-retina-displays/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
@ -465,12 +465,12 @@ Ang `translate ()` ay isang halaga ng CSS `transform`. Ang pagpapalit ng `transf
###### Mga Reperensiya
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
### Ang ibang mga Kasagutan
* 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/
- 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/

102
Translations/Tagalog/questions/html-questions.md
View File

@ -2,17 +2,17 @@
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)
* [Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?](#anong-uri-ng-mga-bagay-ang-dapat-mong-ingatan-ukol-sa-pagdidisenyo-o-pag-develop-ng-mga-multilingual-na-site)
* [Saan maganda ang mga `data-`na katangian?](#saan-maganda-ang-mga-data-na-katangian)
* [Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?](#isaalang-alang-ang-html5-bilang-isang-bukas-na-web-platform-ano-ano-ang-mga-pangunahing-sangkap-ng-html5)
* [Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-isang-cookie-sessionstorage-at-localstorage)
* [Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-script-script-async-at-script-defer)
* [Bakit karaniwang magandang ideya na ilagay ang mga CSS `<link>` sa pagitan ng `<head> </ head>` at JS `<script>` s bago ang `/ <body>`? May alam ka bang anumang mga pagbubukod?](#bakit-karaniwang-magandang-ideya-na-ilagay-ang-mga-css-link-sa-pagitan-ng-head-head-at-js-script-s-bago-ang-body-may-alam-ka-bang-anumang-mga-pagbubukod)
* [Ano ang progresibong pag-render?](#ano-ang-progresibong-pag-render)
* [Bakit ka gagamit ng isang `srcset` na katangian sa isang tag ng imahe? Ipaliwanag ang proseso na ginagamit ng browser sa pagsuri ng nilalaman ng katangiang ito.](#bakit-ka-gagamit-ng-isang-srcset-na-katangian-sa-isang-tag-ng-imahe-ipaliwanag-ang-proseso-na-ginagamit-ng-browser-sa-pagsuri-ng-nilalaman-ng-katangiang-ito)
* [Nakagamit ka na ba ng ibang lenggwahe sa pag-template ng HTML?](#nakagamit-ka-na-ba-ng-ibang-lenggwahe-sa-pag-template-ng-html)
- [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)
- [Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?](#anong-uri-ng-mga-bagay-ang-dapat-mong-ingatan-ukol-sa-pagdidisenyo-o-pag-develop-ng-mga-multilingual-na-site)
- [Saan maganda ang mga `data-`na katangian?](#saan-maganda-ang-mga-data-na-katangian)
- [Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?](#isaalang-alang-ang-html5-bilang-isang-bukas-na-web-platform-ano-ano-ang-mga-pangunahing-sangkap-ng-html5)
- [Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-isang-cookie-sessionstorage-at-localstorage)
- [Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-script-script-async-at-script-defer)
- [Bakit karaniwang magandang ideya na ilagay ang mga CSS `<link>` sa pagitan ng `<head> </ head>` at JS `<script>` s bago ang `/ <body>`? May alam ka bang anumang mga pagbubukod?](#bakit-karaniwang-magandang-ideya-na-ilagay-ang-mga-css-link-sa-pagitan-ng-head-head-at-js-script-s-bago-ang-body-may-alam-ka-bang-anumang-mga-pagbubukod)
- [Ano ang progresibong pag-render?](#ano-ang-progresibong-pag-render)
- [Bakit ka gagamit ng isang `srcset` na katangian sa isang tag ng imahe? Ipaliwanag ang proseso na ginagamit ng browser sa pagsuri ng nilalaman ng katangiang ito.](#bakit-ka-gagamit-ng-isang-srcset-na-katangian-sa-isang-tag-ng-imahe-ipaliwanag-ang-proseso-na-ginagamit-ng-browser-sa-pagsuri-ng-nilalaman-ng-katangiang-ito)
- [Nakagamit ka na ba ng ibang lenggwahe sa pag-template ng HTML?](#nakagamit-ka-na-ba-ng-ibang-lenggwahe-sa-pag-template-ng-html)
### Ano ang ginagawa ng `DOCTYPE`?
@ -22,9 +22,9 @@ Moral ng kuwento - idagdag lamang ang `<! DOCTYPE html>` sa simula ng iyong pahi
###### Mga Reperensiya
* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
* https://www.w3.org/QA/Tips/Doctype
* https://quirks.spec.whatwg.org/#history
- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -38,24 +38,24 @@ Sa back end, ang HTML markup ay maglalaman ng mga `i18n` na placeholder at para
###### Mga Reperensiya
* https://www.w3.org/International/getting-started/language
- https://www.w3.org/International/getting-started/language
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
### Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?
* Gumamit ng `lang` na katangian sa iyong HTML.
* Pag-direkta sa mga gumagamit sa kanilang katutubong wika - Payagan ang isang gumagamit na baguhin ang kanyang bansa / wika nang walang abala.
* Ang teksto sa mga imahe ay hindi isang nasusukat na diskarte - Ang paglalagay ng teksto sa isang imahe ay isang sikat pa rin na paraan upang makakuha ng mga kagandahan, di-systemang mga font na ipapakita sa anumang kompyuter. Gayunpaman upang i-translate ang teksto ng imahe, ang bawat string ng teksto ay kailangang magkaroon ng isang hiwalay na imahe na ililikha para sa bawat wika. Anumang bagay na higit pa sa isang dakot ng kapalit na tulad nito ay maaaring mabilis na mawalan ng kontrol.
* Maging maingat sa mga isyu ng layout o overflow sa disenyo. Pinakamainam na iwasan ang pagdisenyo kung saan ang halaga ng teksto ay makakasira sa isang disenyo. Ang mga bilang ng mga character ay nakikipaglaro sa mga bagay na tulad ng mga headline, mga label, at mga pindutan. Mas mababa ang mga ito sa isang isyu sa libreng dumadaloy na teksto tulad ng teksto ng katawan o mga komento.
* Pag-isipan kung paano nakikita ang mga kulay - Ang mga kulay ay itinuturing na isang paghatol din sa mga wika at kultura. Ang disenyo ay dapat gumamit ng kulay kung ano man ang naaangkop.
* Mga petsa at pera sa pag-format - Ang mga petsa ng kalendaryo ay ipinapahayag minsan sa iba't ibang paraan. Halimbawa, "Mayo 31, 2012" sa U.S. kumpara sa "31 Mayo 2012" sa mga bahagi ng Europa.
* Huwag pagsama-samahin ang mga isinalin na mga string - Huwag gumawa ng anumang bagay tulad ng `"Ang petsa ngayon ay "+ date`.Ito ay makasisira sa mga wika na may iba't ibang pagkasunod-sunod ng mga salita. Gumamit ng isang string ng template na may mga parameter na pagpapalit para sa bawat wika sa halip. Halimbawa, tingnan ang sumusunod na dalawang pangungusap sa wikang Ingles at Tsino: `Maglalakbay ako sa {% date%}` at `{% date%} 我 会 出发`. Tandaan na ang posisyon ng variable ay naiiba dahil sa mga tuntunin ng grammar ng wika.
* Direksyon sa pagbabasa ng wika - Sa Ingles, binabasa namin mula sa kaliwa papuntang kanan, mula itaas papuntang pailalim, habang sa tradisyunal na Hapon naman, ang teksto ay binabasa nang pababa, mula kanan papuntang kaliwa.
- Gumamit ng `lang` na katangian sa iyong HTML.
- Pag-direkta sa mga gumagamit sa kanilang katutubong wika - Payagan ang isang gumagamit na baguhin ang kanyang bansa / wika nang walang abala.
- Ang teksto sa mga imahe ay hindi isang nasusukat na diskarte - Ang paglalagay ng teksto sa isang imahe ay isang sikat pa rin na paraan upang makakuha ng mga kagandahan, di-systemang mga font na ipapakita sa anumang kompyuter. Gayunpaman upang i-translate ang teksto ng imahe, ang bawat string ng teksto ay kailangang magkaroon ng isang hiwalay na imahe na ililikha para sa bawat wika. Anumang bagay na higit pa sa isang dakot ng kapalit na tulad nito ay maaaring mabilis na mawalan ng kontrol.
- Maging maingat sa mga isyu ng layout o overflow sa disenyo. Pinakamainam na iwasan ang pagdisenyo kung saan ang halaga ng teksto ay makakasira sa isang disenyo. Ang mga bilang ng mga character ay nakikipaglaro sa mga bagay na tulad ng mga headline, mga label, at mga pindutan. Mas mababa ang mga ito sa isang isyu sa libreng dumadaloy na teksto tulad ng teksto ng katawan o mga komento.
- Pag-isipan kung paano nakikita ang mga kulay - Ang mga kulay ay itinuturing na isang paghatol din sa mga wika at kultura. Ang disenyo ay dapat gumamit ng kulay kung ano man ang naaangkop.
- Mga petsa at pera sa pag-format - Ang mga petsa ng kalendaryo ay ipinapahayag minsan sa iba't ibang paraan. Halimbawa, "Mayo 31, 2012" sa U.S. kumpara sa "31 Mayo 2012" sa mga bahagi ng Europa.
- Huwag pagsama-samahin ang mga isinalin na mga string - Huwag gumawa ng anumang bagay tulad ng `"Ang petsa ngayon ay "+ date`.Ito ay makasisira sa mga wika na may iba't ibang pagkasunod-sunod ng mga salita. Gumamit ng isang string ng template na may mga parameter na pagpapalit para sa bawat wika sa halip. Halimbawa, tingnan ang sumusunod na dalawang pangungusap sa wikang Ingles at Tsino: `Maglalakbay ako sa {% date%}` at `{% date%} 我 会 出发`. Tandaan na ang posisyon ng variable ay naiiba dahil sa mga tuntunin ng grammar ng wika.
- Direksyon sa pagbabasa ng wika - Sa Ingles, binabasa namin mula sa kaliwa papuntang kanan, mula itaas papuntang pailalim, habang sa tradisyunal na Hapon naman, ang teksto ay binabasa nang pababa, mula kanan papuntang kaliwa.
###### Mga Reperensiya
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -67,25 +67,25 @@ These days, using `data-` attributes is not encouraged. One reason is that users
###### Mga Reperensiya
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
### Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?
* Mga semantika - Nagpapahintulot sa iyo na ilarawan nang mas tiyak kung ano ang nilalaman.
* Pagkakakonekta - Binibigyang-daan ka na makipag-ugnay sa serber sa mga bago at makabagong pamamaraan.
* Offline at imbakan - Pinapayagan ang mga webpage na mag-imbak ng data sa lokal na client-side at mag-operate sa paraang offline nang mas mahusay.
* Multimedia - Paggawa ng mga pangmamamayang de-kalidad na video at audio sa Open Web.
* 2D / 3D na mga grapiks at mga effects - Pinapayagan ang mas malawak na hanay ng mga pagpipilian sa pagtatanghal.
* Pagsasagawa at pagsasama - Pagbibigay ng mabilis na pag-optimize at mas mahusay na paggamit ng hardware sa kompyuter.
* Akses ng device - Nagpapahintulot para sa paggamit ng iba't ibang mga input at output na aparato.
* Pag-istilo - Pagpapaalam sa mga may-akda na magsulat ng mas sopistikadong mga tema.
- Mga semantika - Nagpapahintulot sa iyo na ilarawan nang mas tiyak kung ano ang nilalaman.
- Pagkakakonekta - Binibigyang-daan ka na makipag-ugnay sa serber sa mga bago at makabagong pamamaraan.
- Offline at imbakan - Pinapayagan ang mga webpage na mag-imbak ng data sa lokal na client-side at mag-operate sa paraang offline nang mas mahusay.
- Multimedia - Paggawa ng mga pangmamamayang de-kalidad na video at audio sa Open Web.
- 2D / 3D na mga grapiks at mga effects - Pinapayagan ang mas malawak na hanay ng mga pagpipilian sa pagtatanghal.
- Pagsasagawa at pagsasama - Pagbibigay ng mabilis na pag-optimize at mas mahusay na paggamit ng hardware sa kompyuter.
- Akses ng device - Nagpapahintulot para sa paggamit ng iba't ibang mga input at output na aparato.
- Pag-istilo - Pagpapaalam sa mga may-akda na magsulat ng mas sopistikadong mga tema.
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -104,24 +104,24 @@ Ang lahat ng nabanggit na mga teknolohiya ay ang mahahalagang mekanismo ng imbak
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
### Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.
* `<script>` - Ang pag-parse ng HTML ay naka-block, ang script ay kinuha at agad na pinaandar, ang pag-parse ng HTML ay ipagpapatuloy pagkatapos na maisagawa ang script.
* `<script async>` - Ang script ay kukunin na kahilera sa pag-parse ng HTML at maisagawa sa lalong madaling panahon na ito ay magagamit (may potensyal bago makumpleto ang pag-parse ng HTML). Gumamit ng `async` kapag ang script ay malaya sa anumang iba pang mga script sa pahina, halimbawa ay mga analitika.
* `<script defer>` - Ang script ay kukuha ng kahanay sa pag-parse ng HTML at isasagawa kapag natapos na ang pahina sa pag-parse. Kung maraming ganito, ang bawat ipinagpaliban na script ay ipapagana ayon sa pagkakasunud-sunod sa panahong itoy nasagupaan sa dokumento. Kung ang isang script ay umaasa sa isang ganap na nai-parse na DOM, ang `defer` na katangian ay magiging kapaki-pakinabang sa pagtitiyak na ang HTML ay ganap na ma-parse bago pa man isagawa. Hindi gaanong naiiba ang paglagay ng normal na `<script>` sa dulo ng `` body '`. Ang isang ipinagpaliban na script ay hindi dapat maglalaman ng`document.write`.
- `<script>` - Ang pag-parse ng HTML ay naka-block, ang script ay kinuha at agad na pinaandar, ang pag-parse ng HTML ay ipagpapatuloy pagkatapos na maisagawa ang script.
- `<script async>` - Ang script ay kukunin na kahilera sa pag-parse ng HTML at maisagawa sa lalong madaling panahon na ito ay magagamit (may potensyal bago makumpleto ang pag-parse ng HTML). Gumamit ng `async` kapag ang script ay malaya sa anumang iba pang mga script sa pahina, halimbawa ay mga analitika.
- `<script defer>` - Ang script ay kukuha ng kahanay sa pag-parse ng HTML at isasagawa kapag natapos na ang pahina sa pag-parse. Kung maraming ganito, ang bawat ipinagpaliban na script ay ipapagana ayon sa pagkakasunud-sunod sa panahong itoy nasagupaan sa dokumento. Kung ang isang script ay umaasa sa isang ganap na nai-parse na DOM, ang `defer` na katangian ay magiging kapaki-pakinabang sa pagtitiyak na ang HTML ay ganap na ma-parse bago pa man isagawa. Hindi gaanong naiiba ang paglagay ng normal na `<script>` sa dulo ng `` body '`. Ang isang ipinagpaliban na script ay hindi dapat maglalaman ng`document.write`.
Tandaan: Ang mga katangian ng `async` at `defer` ay binabalewala para sa mga script na walang katangian na `src`.
###### Mga Reperensiya
* 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/
- 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/
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -139,7 +139,7 @@ Ang isang pagbubukod para sa pagpoposisyon ng mga `<script>` sa baba ay kapag an
###### Mga Reperensiya
* https://developer.yahoo.com/performance/rules.html#css_top
- https://developer.yahoo.com/performance/rules.html#css_top
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -151,14 +151,14 @@ Ito ay ginagamit ng mas laganap noong mga araw na wala pang broadband internet n
Mga halimbawa ng naturang pamamaraan:
* Mabagal na pag-load ng mga imahe - Ang lahat ng mga imahe sa pahina ay hindi nag-load ng sabay-sabay. Ang JavaScript ay gagamitin upang mag-load ng isang imahe kapag nag-scroll ang gumagamit sa bahagi ng pahina na nagpapakita ng imahe.
* Pag-prioritize ng nakikitang nilalaman (o pag-render sa itaas ng tiklop) - Isama lamang ang pinakamaliit na CSS / nilalaman / script na kailangan para sa dami ng pahina na mai-render sa unang gumagamit ng browser upang ipakita nang mabilis hangga't maaari, maaari mong gamitin ang ipinagpaliban na script o makinig para sa kaganapan ng `DOMContentLoaded` /` load ' upang mag-load sa iba pang mga mapagkukunan at nilalaman.
* Mga fragment ng Async HTML - Ang mga bahagi ng HTML sa pag-flush sa browser habang ginagawa ang pahina sa back end. Ang mga higit pang mga detalye sa pamamaraan ay matatagpuan [dito](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
- Mabagal na pag-load ng mga imahe - Ang lahat ng mga imahe sa pahina ay hindi nag-load ng sabay-sabay. Ang JavaScript ay gagamitin upang mag-load ng isang imahe kapag nag-scroll ang gumagamit sa bahagi ng pahina na nagpapakita ng imahe.
- Pag-prioritize ng nakikitang nilalaman (o pag-render sa itaas ng tiklop) - Isama lamang ang pinakamaliit na CSS / nilalaman / script na kailangan para sa dami ng pahina na mai-render sa unang gumagamit ng browser upang ipakita nang mabilis hangga't maaari, maaari mong gamitin ang ipinagpaliban na script o makinig para sa kaganapan ng `DOMContentLoaded` /` load ' upang mag-load sa iba pang mga mapagkukunan at nilalaman.
- Mga fragment ng Async HTML - Ang mga bahagi ng HTML sa pag-flush sa browser habang ginagawa ang pahina sa back end. Ang mga higit pang mga detalye sa pamamaraan ay matatagpuan [dito](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
###### Mga Reperensiya
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
[[↑] Bumalik sa taas](#mga-tanong-sa-html)
@ -175,7 +175,7 @@ Oo, Pug (dating Jade), ERB, Slim, Handlebars, Jinja, Liquid, upang pangalanan la
### Mga Ibang Sagot
* 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/
- 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/
---

444
Translations/Tagalog/questions/javascript-questions.md
View File

@ -2,72 +2,72 @@
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)
* [Ipaliwanag kung paano gumagana ang prototypal na pagmamana](#ipaliwanag-kung-paano-gumagana-ang-prototypal-na-pagmamana)
* [Ano ang iyong naiisip sa AMD laban sa CommonJS?](#ano-ang-iyong-naiisip-sa-amd-laban-sa-commonjs)
* [Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?](#ipaliwanag-kung-bakit-ang-mga-sumusunod-ay-hindi-gumagana-bilang-isang-iife-function-foo--ano-ang-kailangang-baguhin-upang-gawing-maayos-itong-iife)
* [Ano ang kaibahan sa pagitan ng isang variable na: `null`, `undefined` o hindi naipahayag? Paano mo gagawin ang pag-check para sa alinman sa mga kalagayang ito?](#ano-ang-kaibahan-sa-pagitan-ng-isang-variable-na-null-undefined-o-hindi-naipahayag-paano-mo-gagawin-ang-pag-check-para-sa-alinman-sa-mga-kalagayang-ito)
* [Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?](#ano-ang-pagsasara-at-paano-mo-gagamitin-ang-isa-sa-mga-ito)
* [Mailalarawan mo ba ang pangunahing pagkakaiba sa pagitan ng isang `.forEach` na loop at isang `.Map()` na loop at bakit kailangan mo lang pumili ng isa mula sa dalawa?](#mailalarawan-mo-ba-ang-pangunahing-pagkakaiba-sa-pagitan-ng-isang-foreach-na-loop-at-isang-map-na-loop-at-bakit-kailangan-mo-lang-pumili-ng-isa-mula-sa-dalawa?)
* [Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?](#ano-ang-isang-tipikal-na-kaso-ng-paggamit-para-sa-mga-hindi-kilalang-punksyon)
* [Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)](#paano-mo-inaayos-ang-iyong-code-modular-na-pattern-makalumang-pagmamana)
* [Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?](#ano-ang-pagkakaiba-sa-pagitan-ng-mga-host-na-bagay-at-mga-likas-na-bagay)
* [Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?](#kaibahan-sa-pagitan-ng-punksyon-na-person-var-person--person-var-person--new-person)
* [Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?](#ano-ang-pagkakaiba-sa-pagitan-ng-call-at-apply)
* [Ipaliwanag ang `Function.prototype.bind`.](#ipaliwanag-ang-functionprototypebind)
* [Kelan ka gagamit ng `document.write()`?](#kelan-ka-gagamit-ng-documentwrite)
* [Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?](#ano-ang-kaibahan-sa-pagitan-ng-pagtukoy-na-tampok-tampok-na-pagkakilala-at-paggamit-ng-Uua-na-string)
* [Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.](#ipaliwanag-ang-ajax-sa-mas-detalyadong-pamamaraan-hanggat-maaari)
* [Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?](#ano-ang-mga-kalamangan-at-di-kalamangan-ng-paggamit-ng-ajax)
* [Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).](#ipaliwanag-kung-papaano-gumagana-ang-jsonp-at-kung-bakit-hindi-talaga-ajax)
* [Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?](#ikaw-ba-ay-nakagamit-na-ng-javascript-sa-pag-template-kung-gayon-anong-mga-librerya-ang-ginamit-mo)
* [Ipaliwanag ang "hoisting".](#ipaliwanag-ang-hoisting)
* [Ilarawan ang kaganapan ng pagbubwak.](#ilarawan-ang-kaganapan-ng-pagbubwak)
* [Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?](#ano-ang-pagkakaiba-sa-pagitan-ng-isang-katangian-at-isang-propyedad)
* [Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?](#bakit-ang-pagpapalawak-ng-mga-built-in-na-javascript-na-mga-bagay-ay-hindi-isang-magandang-ideya)
* [Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?](#pagkakaiba-sa-pagitan-ng-kaganapan-ng-pag-load-ng-dokumento-at-dokumento-ng-domcontentloaded-na-kaganapan)
* [Ano ang pagkakaiba sa pagitan ng `==` at `===`?](#ano-ang-pagkakaiba-sa-pagitan-ng--at-)
* [Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.](#ipaliwanag-ang-patakaran-na-pareho-pareho-dapat-ang-pinanggalingan-tungkol-sa-javascript)
* [Paganahin ito:](#paganahin-ito)
* [Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?](#bakit-tinatawag-itong-isang-ternary-na-ekspresyon-ano-ang-ibig-sabihin-ng-salitang-ternary)
* [Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?](#ano-ang-use-strict-ano-ang-mga-bentahe-at-di-bentahe-sa-paggamit-nito)
* [Gumawa ng para sa loop na mag-iterate hanggang sa 100 habang mag-ouput ng "fizz" sa multiples ng 3, "buzz" sa pagmultiplika ng 5 at "fizzbuzz" sa pagmultiplika ng 3 at 5](#gumawa-ng-para-sa-loop-na-mag-iterate-hanggang-sa-100-habang-mag-ouput-ng-fizz-sa-multiples-ng-3-buzz-sa-pagmultiplika-ng-5-at-fizzbuzz-sa-pagmultiplika-ng-3-at-5)
* [Bakit, sa pangkalahatan, isang magandang ideya na iwanan ang pandaigdigang saklaw ng isang website bilang kung ano man ito at hindi kailanman na galawin ito?](#bakit-sa-pangkalahatan-isang-magandang-ideya-na-iwanan-ang-pandaigdigang-saklaw-ng-isang-website-bilang-kung-ano-man-ito-at-hindi-kailanman-na-galawin-ito)
* [Bakit mo gagamitin ang isang bagay tulad ng `load` na kaganapan? Mayroon bang mga di-bentahe ang kaganapang ito? May alam ka bang anumang mga alternatibo, at bakit mo gagamitin ang mga ito?](#bakit-mo-gagamitin-ang-isang-bagay-tulad-ng-load-na-kaganapan-mayroon-bang-mga-di-bentahe-ang-kaganapang-ito-may-alam-ka-bang-anumang-mga-alternatibo-at-bakit-mo-gagamitin-ang-mga-ito)
* [Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.](#ipaliwanag-kung-ano-ang-isang-solong-pahina-na-app-at-kung-paano-gumawa-ng-isang-seo-friendly)
* [Ano ang lawak ng iyong karanasan sa mga Pangako at o ang kanilang mga polyfill?](#ano-ang-lawak-ng-iyong-karanasan-sa-mga-pangako-at-o-ang-kanilang-mga-polyfill)
* [Ano ang mga kalamangan at kahinaan ng paggamit ng mga Pangako sa halip ng mga callback?](#ano-ang-mga-kalamangan-at-kahinaan-ng-paggamit-ng-mga-pangako-sa-halip-ng-mga-callback?)
* [Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?](#ano-ang-ilan-sa-mga-pakinabang-o-di-pakinabang-ng-pagsulat-ng-javascript-code-sa-isang-wika-na-naka-compile-sa-javascript)
* [Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?](#anong-mga-kagamitan-at-pamamaraan-ang-ginagamit-mo-sa-pag-debug-ng-javascript-na-code)
* [Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?](#anong-mga-pag-construct-ng-wika-ang-ginagamit-mo-para-sa-pag-ulit-sa-mga-katangian-ng-bagay-at-mga-item-na-array)
* [Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-mga-bagay-na-nababago-at-hindi-nababago)
* [Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-sabay-at-hindi-sabay-na-punksiyon)
* [Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?](#ano-ang-loop-na-kaganapan-ano-ang-pagkakaiba-sa-pagitan-ng-call-na-stack-at-queue-ng-gawain)
* [Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`](#ipaliwanag-ang-mga-pagkakaiba-sa-paggamit-ng-foo-sa-pagitan-ng-function-foo--at-var-foo--function-)
* [Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-mga-variable-na-nilikha-sa-pamamagitan-ng-paggamit-ng-let-var-o-const)
* [Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-es6-na-class-at-mga-es5-na-taga-construct-na-punksyon)
* [May maaalok ka bang isang kaso ng paggamit para sa bagong arrow => sintaks ng punksyon? Paano naiiba ang bagong sintaks na ito sa iba pang mga punksyon?](#may-maaalok-ka-bang-isang-kaso-ng-paggamit-para-sa-bagong-arrow--sintaks-ng-punksyon-Paano-naiiba-ang-bagong-sintaks-na-ito-sa-iba-pang-mga-punksyon)
* [Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?](#ano-ang-bentahe-para-sa-paggamit-ng-sintaks-na-arrow-para-sa-isang-paraan-sa-isang-taga-construct)
* [Ano ang kahulugan ng isang mas mataas na hanay na punksyon?](#ano-ang-kahulugan-ng-isang-mas-mataas-na-hanay-na-punksyon)
* [Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?](#makapagbibigaay-kaba-ng-isang-halimbawa-para-sa-pag-destructure-ng-isang-bagay-o-isang-array)
* [Ang literal na ES6 na template ay nag-aalok ng maraming kakayahan na umangkop sa pagbuo ng mga string, maaari ka bang makapagbigay ng isang halimbawa?](#ang-literal-na-es6-na-template-ay-nag-aalok-ng-maraming-kakayahan-na-umangkop-sa-pagbuo-ng-mga-string-maaari-ka-bang-makapagbigay-ng-isang-halimbawa)
* [Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?](#makapagbibigay-kaba-ng-isang-halimbawa-ng-isang-punksyon-na-curry-at-kung-bakit-ang-sintaks-na-ito-ay-nag-aalok-ng-isang-kalamangan)
* [Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?](#ano-ang-mga-pakinabang-ng-paggamit-ng-spread-na-sintaks-at-kung-paano-ito-naiiba-mula-sa-rest-na-sintaks)
* [Paano ka makakabahagi ng code sa pagitan ng mga file?](#paano-ka-makakabahagi-ng-code-sa-pagitan-ng-mga-file)
* [Bakit gusto mong lumikha ng mga statik na miyembro ng klase?](#bakit-gusto-mong-lumikha-ng-mga-statik-na-miyembro-ng-klase)
- [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)
- [Ipaliwanag kung paano gumagana ang prototypal na pagmamana](#ipaliwanag-kung-paano-gumagana-ang-prototypal-na-pagmamana)
- [Ano ang iyong naiisip sa AMD laban sa CommonJS?](#ano-ang-iyong-naiisip-sa-amd-laban-sa-commonjs)
- [Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?](#ipaliwanag-kung-bakit-ang-mga-sumusunod-ay-hindi-gumagana-bilang-isang-iife-function-foo--ano-ang-kailangang-baguhin-upang-gawing-maayos-itong-iife)
- [Ano ang kaibahan sa pagitan ng isang variable na: `null`, `undefined` o hindi naipahayag? Paano mo gagawin ang pag-check para sa alinman sa mga kalagayang ito?](#ano-ang-kaibahan-sa-pagitan-ng-isang-variable-na-null-undefined-o-hindi-naipahayag-paano-mo-gagawin-ang-pag-check-para-sa-alinman-sa-mga-kalagayang-ito)
- [Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?](#ano-ang-pagsasara-at-paano-mo-gagamitin-ang-isa-sa-mga-ito)
- [Mailalarawan mo ba ang pangunahing pagkakaiba sa pagitan ng isang `.forEach` na loop at isang `.Map()` na loop at bakit kailangan mo lang pumili ng isa mula sa dalawa?](#mailalarawan-mo-ba-ang-pangunahing-pagkakaiba-sa-pagitan-ng-isang-foreach-na-loop-at-isang-map-na-loop-at-bakit-kailangan-mo-lang-pumili-ng-isa-mula-sa-dalawa?)
- [Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?](#ano-ang-isang-tipikal-na-kaso-ng-paggamit-para-sa-mga-hindi-kilalang-punksyon)
- [Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)](#paano-mo-inaayos-ang-iyong-code-modular-na-pattern-makalumang-pagmamana)
- [Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?](#ano-ang-pagkakaiba-sa-pagitan-ng-mga-host-na-bagay-at-mga-likas-na-bagay)
- [Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?](#kaibahan-sa-pagitan-ng-punksyon-na-person-var-person--person-var-person--new-person)
- [Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?](#ano-ang-pagkakaiba-sa-pagitan-ng-call-at-apply)
- [Ipaliwanag ang `Function.prototype.bind`.](#ipaliwanag-ang-functionprototypebind)
- [Kelan ka gagamit ng `document.write()`?](#kelan-ka-gagamit-ng-documentwrite)
- [Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?](#ano-ang-kaibahan-sa-pagitan-ng-pagtukoy-na-tampok-tampok-na-pagkakilala-at-paggamit-ng-Uua-na-string)
- [Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.](#ipaliwanag-ang-ajax-sa-mas-detalyadong-pamamaraan-hanggat-maaari)
- [Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?](#ano-ang-mga-kalamangan-at-di-kalamangan-ng-paggamit-ng-ajax)
- [Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).](#ipaliwanag-kung-papaano-gumagana-ang-jsonp-at-kung-bakit-hindi-talaga-ajax)
- [Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?](#ikaw-ba-ay-nakagamit-na-ng-javascript-sa-pag-template-kung-gayon-anong-mga-librerya-ang-ginamit-mo)
- [Ipaliwanag ang "hoisting".](#ipaliwanag-ang-hoisting)
- [Ilarawan ang kaganapan ng pagbubwak.](#ilarawan-ang-kaganapan-ng-pagbubwak)
- [Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?](#ano-ang-pagkakaiba-sa-pagitan-ng-isang-katangian-at-isang-propyedad)
- [Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?](#bakit-ang-pagpapalawak-ng-mga-built-in-na-javascript-na-mga-bagay-ay-hindi-isang-magandang-ideya)
- [Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?](#pagkakaiba-sa-pagitan-ng-kaganapan-ng-pag-load-ng-dokumento-at-dokumento-ng-domcontentloaded-na-kaganapan)
- [Ano ang pagkakaiba sa pagitan ng `==` at `===`?](#ano-ang-pagkakaiba-sa-pagitan-ng--at-)
- [Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.](#ipaliwanag-ang-patakaran-na-pareho-pareho-dapat-ang-pinanggalingan-tungkol-sa-javascript)
- [Paganahin ito:](#paganahin-ito)
- [Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?](#bakit-tinatawag-itong-isang-ternary-na-ekspresyon-ano-ang-ibig-sabihin-ng-salitang-ternary)
- [Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?](#ano-ang-use-strict-ano-ang-mga-bentahe-at-di-bentahe-sa-paggamit-nito)
- [Gumawa ng para sa loop na mag-iterate hanggang sa 100 habang mag-ouput ng "fizz" sa multiples ng 3, "buzz" sa pagmultiplika ng 5 at "fizzbuzz" sa pagmultiplika ng 3 at 5](#gumawa-ng-para-sa-loop-na-mag-iterate-hanggang-sa-100-habang-mag-ouput-ng-fizz-sa-multiples-ng-3-buzz-sa-pagmultiplika-ng-5-at-fizzbuzz-sa-pagmultiplika-ng-3-at-5)
- [Bakit, sa pangkalahatan, isang magandang ideya na iwanan ang pandaigdigang saklaw ng isang website bilang kung ano man ito at hindi kailanman na galawin ito?](#bakit-sa-pangkalahatan-isang-magandang-ideya-na-iwanan-ang-pandaigdigang-saklaw-ng-isang-website-bilang-kung-ano-man-ito-at-hindi-kailanman-na-galawin-ito)
- [Bakit mo gagamitin ang isang bagay tulad ng `load` na kaganapan? Mayroon bang mga di-bentahe ang kaganapang ito? May alam ka bang anumang mga alternatibo, at bakit mo gagamitin ang mga ito?](#bakit-mo-gagamitin-ang-isang-bagay-tulad-ng-load-na-kaganapan-mayroon-bang-mga-di-bentahe-ang-kaganapang-ito-may-alam-ka-bang-anumang-mga-alternatibo-at-bakit-mo-gagamitin-ang-mga-ito)
- [Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.](#ipaliwanag-kung-ano-ang-isang-solong-pahina-na-app-at-kung-paano-gumawa-ng-isang-seo-friendly)
- [Ano ang lawak ng iyong karanasan sa mga Pangako at o ang kanilang mga polyfill?](#ano-ang-lawak-ng-iyong-karanasan-sa-mga-pangako-at-o-ang-kanilang-mga-polyfill)
- [Ano ang mga kalamangan at kahinaan ng paggamit ng mga Pangako sa halip ng mga callback?](#ano-ang-mga-kalamangan-at-kahinaan-ng-paggamit-ng-mga-pangako-sa-halip-ng-mga-callback?)
- [Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?](#ano-ang-ilan-sa-mga-pakinabang-o-di-pakinabang-ng-pagsulat-ng-javascript-code-sa-isang-wika-na-naka-compile-sa-javascript)
- [Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?](#anong-mga-kagamitan-at-pamamaraan-ang-ginagamit-mo-sa-pag-debug-ng-javascript-na-code)
- [Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?](#anong-mga-pag-construct-ng-wika-ang-ginagamit-mo-para-sa-pag-ulit-sa-mga-katangian-ng-bagay-at-mga-item-na-array)
- [Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-mga-bagay-na-nababago-at-hindi-nababago)
- [Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-sabay-at-hindi-sabay-na-punksiyon)
- [Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?](#ano-ang-loop-na-kaganapan-ano-ang-pagkakaiba-sa-pagitan-ng-call-na-stack-at-queue-ng-gawain)
- [Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`](#ipaliwanag-ang-mga-pagkakaiba-sa-paggamit-ng-foo-sa-pagitan-ng-function-foo--at-var-foo--function-)
- [Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-mga-variable-na-nilikha-sa-pamamagitan-ng-paggamit-ng-let-var-o-const)
- [Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-es6-na-class-at-mga-es5-na-taga-construct-na-punksyon)
- [May maaalok ka bang isang kaso ng paggamit para sa bagong arrow => sintaks ng punksyon? Paano naiiba ang bagong sintaks na ito sa iba pang mga punksyon?](#may-maaalok-ka-bang-isang-kaso-ng-paggamit-para-sa-bagong-arrow--sintaks-ng-punksyon-Paano-naiiba-ang-bagong-sintaks-na-ito-sa-iba-pang-mga-punksyon)
- [Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?](#ano-ang-bentahe-para-sa-paggamit-ng-sintaks-na-arrow-para-sa-isang-paraan-sa-isang-taga-construct)
- [Ano ang kahulugan ng isang mas mataas na hanay na punksyon?](#ano-ang-kahulugan-ng-isang-mas-mataas-na-hanay-na-punksyon)
- [Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?](#makapagbibigaay-kaba-ng-isang-halimbawa-para-sa-pag-destructure-ng-isang-bagay-o-isang-array)
- [Ang literal na ES6 na template ay nag-aalok ng maraming kakayahan na umangkop sa pagbuo ng mga string, maaari ka bang makapagbigay ng isang halimbawa?](#ang-literal-na-es6-na-template-ay-nag-aalok-ng-maraming-kakayahan-na-umangkop-sa-pagbuo-ng-mga-string-maaari-ka-bang-makapagbigay-ng-isang-halimbawa)
- [Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?](#makapagbibigay-kaba-ng-isang-halimbawa-ng-isang-punksyon-na-curry-at-kung-bakit-ang-sintaks-na-ito-ay-nag-aalok-ng-isang-kalamangan)
- [Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?](#ano-ang-mga-pakinabang-ng-paggamit-ng-spread-na-sintaks-at-kung-paano-ito-naiiba-mula-sa-rest-na-sintaks)
- [Paano ka makakabahagi ng code sa pagitan ng mga file?](#paano-ka-makakabahagi-ng-code-sa-pagitan-ng-mga-file)
- [Bakit gusto mong lumikha ng mga statik na miyembro ng klase?](#bakit-gusto-mong-lumikha-ng-mga-statik-na-miyembro-ng-klase)
### Ipaliwanag ang delegasyon ng kaganapan
Ang delegasyon ng kaganapan ay isang pamamaraan na kinasasangkutan ng pagdaragdag ng mga tagapakinig ng kaganapan sa isang elemento ng magulang sa halip na idagdag ang mga ito sa mga kaapu-apuhan na elemento. Ang tagapakinig ay titira kapag ang kaganapan ay na-trigger sa mga kaapu-apuhan na sangkap dahil sa kaganapang pagbulubok sa DOM. Ang mga pakinabang ng pamamaraang ito ay:
* Ang bakas ng memorya ay bababa dahil ang isang nag-iisang humahawak ay kailangan sa elemento ng magulang, sa halip na mag-attach sa mga humahawak ng kaganapan sa bawat inapo.
* Hindi na kailangang buksan ang humahawak mula sa mga elemento na aalisin at itali ang kaganapan para sa mga bagong elemento.
- Ang bakas ng memorya ay bababa dahil ang isang nag-iisang humahawak ay kailangan sa elemento ng magulang, sa halip na mag-attach sa mga humahawak ng kaganapan sa bawat inapo.
- Hindi na kailangang buksan ang humahawak mula sa mga elemento na aalisin at itali ang kaganapan para sa mga bagong elemento.
###### Mga Reperensiya
* https://davidwalsh.name/event-delegate
* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -86,8 +86,8 @@ Para sa malalim na pagpapaliwanag, tingnan ang kanyang [artikulo sa Medium](http
###### Mga Reperensiya
* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
* https://stackoverflow.com/a/3127440/1751946
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -97,8 +97,8 @@ Ito ay isang pangkaraniwan na tanong sa pakikipanayam tungkol sa JavaScript. Ang
###### Mga Reperensiya
* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
* https://davidwalsh.name/javascript-objects
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -113,8 +113,8 @@ Natutuwa ako na may mga ES2015 na module, na may suporta para sa parehong kasaba
###### Mga Reperensiya
* https://auth0.com/blog/javascript-module-systems-showdown/
* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -126,7 +126,7 @@ Narito ang dalawang paraan upang ayusin ito na kinasasangkutan ng pagdaragdag ng
###### Mga Reperensiya
* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -149,7 +149,7 @@ Ang isang variable na `undefined` ay isang variable na ipinahayag na, ngunit hin
var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true
console.log(typeof foo === "undefined"); // true
console.log(foo == null); // true. Mali, wag itong gamitin para sumuri!
@ -171,8 +171,8 @@ Bilang isang personal na nakaugalian, hindi ko kailanman iiwanan ang aking mga v
###### Mga Reperensiya
* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -182,13 +182,13 @@ Ang pagsasara ay ang kumbinasyon ng isang punksyon at ang leksikong environment
**Bakit ka pipili ng isa?**
* Privacy sa datos / pag-emulate ng pribadong pamamaraan sa closures. Karaniwang ginagamit sa [pattern ng module](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
* [Bahagyang mga aplikasyon o pagcurry](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
- Privacy sa datos / pag-emulate ng pribadong pamamaraan sa closures. Karaniwang ginagamit sa [pattern ng module](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
- [Bahagyang mga aplikasyon o pagcurry](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -198,9 +198,9 @@ Upang maunawaan ang mga pagkakaiba sa pagitan ng dalawa, tingnan natin kung ano
**`forEach`**
* nagbabago sa pamamagitan ng mga elemento sa isang array.
* Nagpapatupad ng callback para sa bawat elemento.
* Hindi nagbabalik ng isang halaga.
- nagbabago sa pamamagitan ng mga elemento sa isang array.
- Nagpapatupad ng callback para sa bawat elemento.
- Hindi nagbabalik ng isang halaga.
```js
const a = [1, 2, 3];
@ -213,8 +213,8 @@ const doubled = a.forEach((num, index) => {
**`map`**
* binabago sa pamamagitan ng mga elemento sa isang array.
* Mina- "Map" ang bawat elemento sa isang bagong elemento sa pamamagitan ng pagtawag sa punksyon sa bawat elemento, na lumilikha ng isang bagong array bilang isang resulta.
- binabago sa pamamagitan ng mga elemento sa isang array.
- Mina- "Map" ang bawat elemento sa isang bagong elemento sa pamamagitan ng pagtawag sa punksyon sa bawat elemento, na lumilikha ng isang bagong array bilang isang resulta.
```js
const a = [1, 2, 3];
@ -229,7 +229,7 @@ Ang pangunahing pagkakaiba sa pagitan ng `.forEach` at `.map ()` ay ang `.map ()
###### Mga Reperensiya
* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -247,7 +247,7 @@ Bilang isang callback na ginagamit minsan at hindi na kailangang magamit kahit s
```js
setTimeout(function() {
console.log('Hello world!');
console.log("Hello world!");
}, 1000);
```
@ -263,8 +263,8 @@ console.log(double); // [2, 4, 6]
###### Mga Reperensiya
* 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
- 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
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -286,7 +286,7 @@ Ang mga bagay na host ay ibinibigay ng runtime environment (browser o Node), kag
###### Mga Reperensiya
* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -303,18 +303,18 @@ function Person(name) {
this.name = name;
}
var person = Person('John');
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');
var person = new Person("John");
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"
```
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -343,7 +343,7 @@ Sa aking karanasan, ito ay pinaka-kapaki-pakinabang para sa pag-bind ng halaga n
###### Mga Reperensiya
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -355,8 +355,8 @@ Mayroong ilang mga sagot na makikita online na nagpapaliwanag na ang `document.w
###### Mga Reperensiya
* 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
- 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
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -368,7 +368,7 @@ Ang pagtuklas ng tampok ay kinasasangkutan ng pagtatrabaho kung ang isang browse
Halimbawa:
```js
if ('geolocation' in navigator) {
if ("geolocation" in navigator) {
// Pwedeng gamitin ang navigator.geolocation
} else {
// Ang handle ay kulang sa tampok
@ -395,9 +395,9 @@ Ito ay isang string na iniulat ng browser na nagbibigay-daan sa mga network prot
###### Mga Reperensiya
* 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
- 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
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -409,8 +409,8 @@ Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong ko
###### Mga Reperensiya
* https://en.wikipedia.org/wiki/Ajax_(programming)
* https://developer.mozilla.org/en-US/docs/AJAX
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -418,16 +418,16 @@ Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong ko
**Mga Kalamangan**
* Mas mahusay na pakikipag-ugnayan. Maaaring mabago ang bagong nilalaman mula sa serber nang hindi kailangang i-reload ang buong pahina.
* Binawasang mga koneksyon sa serber dahil ang mga script at mga stylesheet lamang ay kailangang hilingin ng isang beses lamang.
* Maaaring mapanatili ang estado sa isang pahina. Ang mga JavaScript na variable at DOM na estado ay mananatili dahil ang pangunahing pahinang paglalagyan ay hindi na-reload.
* Karaniwang karamihan sa mga pakinabang ng isang SPA.
- Mas mahusay na pakikipag-ugnayan. Maaaring mabago ang bagong nilalaman mula sa serber nang hindi kailangang i-reload ang buong pahina.
- Binawasang mga koneksyon sa serber dahil ang mga script at mga stylesheet lamang ay kailangang hilingin ng isang beses lamang.
- Maaaring mapanatili ang estado sa isang pahina. Ang mga JavaScript na variable at DOM na estado ay mananatili dahil ang pangunahing pahinang paglalagyan ay hindi na-reload.
- Karaniwang karamihan sa mga pakinabang ng isang SPA.
**Mga Di Kalamangan**
* Ang mga dynamic na webpage ay mas mahirap i-bookmark.
* Hindi gagana kung hindi pinagana ang JavaScript sa browser.\* Ang ilang mga webcrawlers ay hindi nagsasagawa ng JavaScript at hindi makikita ang nilalamang na-load ng JavaScript.
* Karaniwang karamihan sa mga di kalamangan ng isang SPA.
- Ang mga dynamic na webpage ay mas mahirap i-bookmark.
- Hindi gagana kung hindi pinagana ang JavaScript sa browser.\* Ang ilang mga webcrawlers ay hindi nagsasagawa ng JavaScript at hindi makikita ang nilalamang na-load ng JavaScript.
- Karaniwang karamihan sa mga di kalamangan ng isang SPA.
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -440,9 +440,9 @@ Gumagana ang JSONP sa pamamagitan ng paggawa ng isang kahilingan sa isang cross-
```html
<!-- https://mydomain.com -->
<script>
function printData(data) {
console.log(`My name is ${data.name}!`);
}
function printData(data) {
console.log(`My name is ${data.name}!`);
}
</script>
<script src="https://example.com?callback=printData"></script>
@ -450,7 +450,7 @@ function printData(data) {
```js
// Ang file ay naload galing sa https://example.com?callback=printData
printData({ name: 'Yang Shun' });
printData({ name: "Yang Shun" });
```
Ang kliyente ay dapat magkaroon ng punksyon na `printData` sa pandaigdigang saklaw nito at ang punksyon ay isasagawa ng kliyente kapag ang tugon mula sa cross-origin na domain ay natanggap na.
@ -461,7 +461,7 @@ Sa panahon ngayon, Ang [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource
###### Mga Reperensiya
* https://stackoverflow.com/a/2067584/1751946
- https://stackoverflow.com/a/2067584/1751946
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -500,7 +500,7 @@ Ang mga deklarasyon ng punksyon ay may na-hoist katawan habang ang mga ekspresyo
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
console.log("FOOOOO");
}
console.log(foo); // [Function: foo]
@ -508,7 +508,7 @@ console.log(foo); // [Function: foo]
console.log(bar); // undefined
bar(); // Uncaught TypeError: ang bar ay hindi isang punksyon
var bar = function() {
console.log('BARRRR');
console.log("BARRRR");
};
console.log(bar); // [Function: bar]
```
@ -526,21 +526,21 @@ Kapag ang isang kaganapan ay nag-trigger sa isang elemento ng DOM, susubukan nit
Ang mga katangian ay tinukoy sa markup ng HTML ngunit ang mga propyedad ay tinukoy sa DOM. Upang ilarawan ang pagkakaiba, isipin na mayroon kaming field na ito sa aming HTML: `<input type ="text"value ="Hello">`.
```js
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
const input = document.querySelector("input");
console.log(input.getAttribute("value")); // Hello
console.log(input.value); // Hello
```
Ngunit pagkatapos mong baguhin ang halaga ng patlang ng teksto sa pamamagitan ng pagdaragdag ng "World!" dito, ito ay nagiging:
```js
console.log(input.getAttribute('value')); // Hello
console.log(input.getAttribute("value")); // Hello
console.log(input.value); // Hello World!
```
###### Mga Reperensiya
* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -552,7 +552,7 @@ Ang tanging oras na maaari mong i-extend ang isang likas na bagay ay kung nais m
###### Mga Reperensiya
* http://lucybain.com/blog/2014/js-extending-built-in-objects/
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -562,8 +562,8 @@ Ang `DOMContentLoaded` na kaganapan ay pinapaputok kapag ang unang HTML na dokum
###### Mga Reperensiya
* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
* https://developer.mozilla.org/en-US/docs/Web/Events/load
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -572,11 +572,11 @@ Ang `DOMContentLoaded` na kaganapan ay pinapaputok kapag ang unang HTML na dokum
Ang `==` ay ang abstraktong pagkakapantay-pantay na operator habang ang `===` ay ang mahigpit na pagkakapantay-pantay na operator. Ang `==` ay ang abstraktong pagkakapantay-pantay na operator habang ang `===` ay ang mahigpit na pagkakapantay-pantay na operator. Ang `== operator ay maghahambing para sa pagkakapantay-pantay matapos gawin ang anumang kinakailangang mga conversion na uri. Ang operator ng`===`ay hindi gagawin ang uri ng conversion, kaya kung ang dalawang halaga ay hindi magkatulad na uri`=== `ay babalik lamang` false`. Kapag gumagamit ng`==`, ang mga funky bagay ay maaaring mangyari, tulad ng: na operator ay maghahambing para sa pagkakapantay-pantay matapos gawin ang anumang kinakailangang mga pagpapalit na uri. Ang operator ng`===`ay hindi gagawin ang uri ng pagpapalit, kaya kung ang dalawang halaga ay hindi magkatulad na uri` === `ay babalik lamang sa`false`. Kapag gumagamit ng`==`, ang mga kaiba-ibang mga bagay ay maaaring mangyari, tulad ng:
```js
1 == '1'; // true
1 == "1"; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == ""; // true
0 == "0"; // true
0 == false; // true
```
@ -590,7 +590,7 @@ console.log(a == undefined); // true
###### Mga Reperensiya
* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -600,7 +600,7 @@ Pinipigilan ng patakaran ng may parehong pinagmulan ang JavaScript mula sa pagga
###### Mga reperensiya
* https://en.wikipedia.org/wiki/Same-origin_policy
- https://en.wikipedia.org/wiki/Same-origin_policy
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -626,7 +626,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
###### References
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -636,26 +636,26 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
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.
- 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.
- 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/
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -667,7 +667,7 @@ Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jayso
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);
console.log(f ? (b ? "FizzBuzz" : "Fizz") : b ? "Buzz" : i);
}
```
@ -675,7 +675,7 @@ I would not advise you to write the above during interviews though. Just stick w
###### References
* https://gist.github.com/jaysonrowe/1592432
- https://gist.github.com/jaysonrowe/1592432
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -695,7 +695,7 @@ TODO.
###### References
* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -709,22 +709,22 @@ However in modern SPAs, client-side rendering is used instead. The browser loads
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 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".
- 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
- 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
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -736,7 +736,7 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
###### References
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -744,14 +744,14 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
**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()`.
- 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.
- Slightly more complex code (debatable).
- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -761,42 +761,42 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
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.
- 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.
- 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
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
### Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na 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
- 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/
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -804,14 +804,14 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
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` 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.
- `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.
@ -819,9 +819,9 @@ Most of the time, I would prefer the `.forEach` method, but it really depends on
### Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.
* 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?
- 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
@ -843,8 +843,8 @@ If you haven't already checked out Philip Robert's [talk on the Event Loop](http
###### 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/
- 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/
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -857,7 +857,7 @@ The former is a function declaration while the latter is a function expression.
```js
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
console.log("FOOOOO");
}
```
@ -866,13 +866,13 @@ function foo() {
```js
foo(); // Uncaught TypeError: foo is not a function
var foo = function() {
console.log('FOOOOO');
console.log("FOOOOO");
};
```
###### References
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -883,9 +883,9 @@ Variables declared using the `var` keyword are scoped to the function in which t
```js
function foo() {
// All variables are accessible within functions.
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
var bar = "bar";
let baz = "baz";
const qux = "qux";
console.log(bar); // bar
console.log(baz); // baz
@ -899,9 +899,9 @@ console.log(qux); // ReferenceError: qux is not defined
```js
if (true) {
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
var bar = "bar";
let baz = "baz";
const qux = "qux";
}
// var declared variables are accessible anywhere in the function scope.
@ -916,45 +916,45 @@ console.log(qux); // ReferenceError: qux is not defined
```js
console.log(foo); // undefined
var foo = 'foo';
var foo = "foo";
console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
let baz = 'baz';
let baz = "baz";
console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
const bar = 'bar';
const bar = "bar";
```
Redeclaring a variable with `var` will not throw an error, but 'let' and 'const' will.
```js
var foo = 'foo';
var foo = 'bar';
var foo = "foo";
var foo = "bar";
console.log(foo); // "bar"
let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
let baz = "baz";
let baz = "qux"; // Uncaught SyntaxError: Identifier 'baz' has already been declared
```
`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.
```js
// This is fine.
let foo = 'foo';
foo = 'bar';
let foo = "foo";
foo = "bar";
// This causes an exception.
const baz = 'baz';
baz = 'qux';
const baz = "baz";
baz = "qux";
```
###### References
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -985,7 +985,7 @@ A higher-order function is any function that takes one or more functions as argu
Let say we have an array of names which we need to transform each string to uppercase.
```js
const names = ['irish', 'daisy', 'anna'];
const names = ["irish", "daisy", "anna"];
```
The imperative way will be as such:
@ -1012,9 +1012,9 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
###### References
* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
* https://eloquentjavascript.net/05_higher_order.html
- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -1026,7 +1026,7 @@ Destructuring is an expression available in ES6 which enables a succinct and con
```js
// Variable assignment.
const foo = ['one', 'two', 'three'];
const foo = ["one", "two", "three"];
const [one, two, three] = foo;
console.log(one); // "one"
@ -1057,8 +1057,8 @@ console.log(q); // true
###### References
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
* https://ponyfoo.com/articles/es6-destructuring-in-depth
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -1102,7 +1102,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
###### References
* https://hackernoon.com/currying-in-js-d9ddc64f162e
- https://hackernoon.com/currying-in-js-d9ddc64f162e
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -1112,14 +1112,14 @@ ES6's spread syntax is very useful when coding in a functional paradigm as we ca
```js
function putDookieInAnyArray(arr) {
return [...arr, 'dookie'];
return [...arr, "dookie"];
}
const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
const result = putDookieInAnyArray(["I", "really", "don't", "like"]); // ["I", "really", "don't", "like", "dookie"]
const person = {
name: 'Todd',
age: 29,
name: "Todd",
age: 29
};
const copyOfTodd = { ...person };
@ -1140,15 +1140,15 @@ const { e, f, ...others } = {
e: 1,
f: 2,
g: 3,
h: 4,
h: 4
}; // e: 1, f: 2, others: { g: 3, h: 4 }
```
###### References
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
[[↑] Bumalik sa taas](#mga-tanong-sa-js)
@ -1166,4 +1166,4 @@ TODO
### Mga Ibang Sagot
* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

321
questions/css-questions.md
View File

@ -2,37 +2,37 @@
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)
* [Describe `float`s and how they work.](#describe-floats-and-how-they-work)
* [Describe z-index and how stacking context is formed.](#describe-z-index-and-how-stacking-context-is-formed)
* [Describe BFC (Block Formatting Context) and how it works.](#describe-block-formatting-context-bfc-and-how-it-works)
* [What are the various clearing techniques and which is appropriate for what context?](#what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context)
* [Explain CSS sprites, and how you would implement them on a page or site.](#explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site)
* [How would you approach fixing browser-specific styling issues?](#how-would-you-approach-fixing-browser-specific-styling-issues)
* [How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?](#how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniquesprocesses-do-you-use)
* [What are the different ways to visually hide content (and make it available only for screen readers)?](#what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers)
* [Have you ever used a grid system, and if so, what do you prefer?](#have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer)
* [Have you used or implemented media queries or mobile specific layouts/CSS?](#have-you-used-or-implemented-media-queries-or-mobile-specific-layoutscss)
* [Are you familiar with styling SVG?](#are-you-familiar-with-styling-svg)
* [Can you give an example of an @media property other than screen?](#can-you-give-an-example-of-an-media-property-other-than-screen)
* [What are some of the "gotchas" for writing efficient CSS?](#what-are-some-of-the-gotchas-for-writing-efficient-css)
* [What are the advantages/disadvantages of using CSS preprocessors?](#what-are-the-advantagesdisadvantages-of-using-css-preprocessors)
* [Describe what you like and dislike about the CSS preprocessors you have used.](#describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used)
* [How would you implement a web design comp that uses non-standard fonts?](#how-would-you-implement-a-web-design-comp-that-uses-non-standard-fonts)
* [Explain how a browser determines what elements match a CSS selector.](#explain-how-a-browser-determines-what-elements-match-a-css-selector)
* [Describe pseudo-elements and discuss what they are used for.](#describe-pseudo-elements-and-discuss-what-they-are-used-for)
* [Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.](#explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
* [What does `* { box-sizing: border-box; }` do? What are its advantages?](#what-does---box-sizing-border-box--do-what-are-its-advantages)
* [What is the CSS `display` property and can you give a few examples of its use?](#what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use)
* [What's the difference between `inline` and `inline-block`?](#whats-the-difference-between-inline-and-inline-block)
* [What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?](#whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
* [What existing CSS frameworks have you used locally, or in production? How would you change/improve them?](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them)
* [Have you played around with the new CSS Flexbox or Grid specs?](#have-you-played-around-with-the-new-css-flexbox-or-grid-specs)
* [Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?](#can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy)
* [How is responsive design different from adaptive design?](#how-is-responsive-design-different-from-adaptive-design)
* [Have you ever worked with retina graphics? If so, when and what techniques did you use?](#have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use)
* [Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?](#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why)
- [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)
- [Describe `float`s and how they work.](#describe-floats-and-how-they-work)
- [Describe z-index and how stacking context is formed.](#describe-z-index-and-how-stacking-context-is-formed)
- [Describe BFC (Block Formatting Context) and how it works.](#describe-block-formatting-context-bfc-and-how-it-works)
- [What are the various clearing techniques and which is appropriate for what context?](#what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context)
- [Explain CSS sprites, and how you would implement them on a page or site.](#explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site)
- [How would you approach fixing browser-specific styling issues?](#how-would-you-approach-fixing-browser-specific-styling-issues)
- [How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?](#how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniquesprocesses-do-you-use)
- [What are the different ways to visually hide content (and make it available only for screen readers)?](#what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers)
- [Have you ever used a grid system, and if so, what do you prefer?](#have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer)
- [Have you used or implemented media queries or mobile specific layouts/CSS?](#have-you-used-or-implemented-media-queries-or-mobile-specific-layoutscss)
- [Are you familiar with styling SVG?](#are-you-familiar-with-styling-svg)
- [Can you give an example of an @media property other than screen?](#can-you-give-an-example-of-an-media-property-other-than-screen)
- [What are some of the "gotchas" for writing efficient CSS?](#what-are-some-of-the-gotchas-for-writing-efficient-css)
- [What are the advantages/disadvantages of using CSS preprocessors?](#what-are-the-advantagesdisadvantages-of-using-css-preprocessors)
- [Describe what you like and dislike about the CSS preprocessors you have used.](#describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used)
- [How would you implement a web design comp that uses non-standard fonts?](#how-would-you-implement-a-web-design-comp-that-uses-non-standard-fonts)
- [Explain how a browser determines what elements match a CSS selector.](#explain-how-a-browser-determines-what-elements-match-a-css-selector)
- [Describe pseudo-elements and discuss what they are used for.](#describe-pseudo-elements-and-discuss-what-they-are-used-for)
- [Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.](#explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
- [What does `* { box-sizing: border-box; }` do? What are its advantages?](#what-does---box-sizing-border-box--do-what-are-its-advantages)
- [What is the CSS `display` property and can you give a few examples of its use?](#what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use)
- [What's the difference between `inline` and `inline-block`?](#whats-the-difference-between-inline-and-inline-block)
- [What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?](#whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
- [What existing CSS frameworks have you used locally, or in production? How would you change/improve them?](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them)
- [Have you played around with the new CSS Flexbox or Grid specs?](#have-you-played-around-with-the-new-css-flexbox-or-grid-specs)
- [Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?](#can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy)
- [How is responsive design different from adaptive design?](#how-is-responsive-design-different-from-adaptive-design)
- [Have you ever worked with retina graphics? If so, when and what techniques did you use?](#have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use)
- [Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?](#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why)
### What is CSS selector specificity and how does it work?
@ -51,21 +51,21 @@ I would write CSS rules with low specificity so that they can be easily overridd
###### References
* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
* https://www.sitepoint.com/web-foundations/specificity/
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
[[↑] Back to top](#css-questions)
### 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.
- **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 a very customized or unconventional site design such that I need to do a lot of my own styling and 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
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
[[↑] Back to top](#css-questions)
@ -81,7 +81,7 @@ The `.clearfix` hack uses a clever CSS [pseudo selector](#describe-pseudo-elemen
```css
.clearfix:after {
content: ' ';
content: " ";
visibility: hidden;
display: block;
height: 0;
@ -93,7 +93,7 @@ Alternatively, give `overflow: auto` or `overflow: hidden` property to the paren
###### References
* https://css-tricks.com/all-about-floats/
- https://css-tricks.com/all-about-floats/
[[↑] Back to top](#css-questions)
@ -111,9 +111,9 @@ _Note: What exactly qualifies an element to create a stacking context is listed
###### 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
- 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
[[↑] Back to top](#css-questions)
@ -125,10 +125,10 @@ Knowing how to establish a block formatting context is important, because withou
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`.
- 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).
@ -136,16 +136,16 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more
###### References
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
[[↑] Back to top](#css-questions)
### 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.
- 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.
@ -161,33 +161,33 @@ CSS sprites combine multiple images into one single larger image. It is a common
**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.
- 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/
- https://css-tricks.com/css-sprites/
[[↑] Back to top](#css-questions)
### 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.
* If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.
- 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.
- If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.
[[↑] Back to top](#css-questions)
### 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/).
* Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
- 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/).
- Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
[[↑] Back to top](#css-questions)
@ -195,20 +195,20 @@ CSS sprites combine multiple images into one single larger image. It is a common
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.
- `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/
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
[[↑] Back to top](#css-questions)
@ -231,15 +231,23 @@ 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"
fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
<rect
x="10"
y="10"
width="100"
height="100"
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
```
The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overriden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. So, if you did something like `svg { fill: blue; }` it would override the purple fill we've defined.
###### References
* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
[[↑] Back to top](#css-questions)
@ -247,10 +255,10 @@ The above `fill="purple"` is an example of a _presentational attribute_. Interes
Yes, there are four types of @media properties (including _screen_):
* `all` - for all media type devices
* `print` - for printers
* `speech` - for screenreaders that "reads" the page out loud
* `screen` - for computer screens, tablets, smart-phones etc.
- `all` - for all media type devices
- `print` - for printers
- `speech` - for screenreaders that "reads" the page out loud
- `screen` - for computer screens, tablets, smart-phones etc.
Here is an example of `print` media type's usage:
@ -264,7 +272,7 @@ Here is an example of `print` media type's usage:
###### References
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
[[↑] Back to top](#css-questions)
@ -278,8 +286,8 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
###### References
* https://developers.google.com/web/fundamentals/performance/rendering/
* https://csstriggers.com/
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
[[↑] Back to top](#css-questions)
@ -287,17 +295,17 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
**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.
* Sass features like loops, lists, and maps can make configuration easier and less verbose.
* Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
- 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.
- Sass features like loops, lists, and maps can make configuration easier and less verbose.
- Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
**Disadvantages:**
* Requires tools for preprocessing. Re-compilation time can be slow.
* Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
- Requires tools for preprocessing. Re-compilation time can be slow.
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
[[↑] Back to top](#css-questions)
@ -305,13 +313,13 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
**Likes:**
* Mostly the advantages mentioned above.
* Less is written in JavaScript, which plays well with Node.
- 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.
- 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.
[[↑] Back to top](#css-questions)
@ -329,7 +337,7 @@ For example with this selector `p span`, browsers firstly find all the `<span>`
###### References
* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
[[↑] Back to top](#css-questions)
@ -337,13 +345,13 @@ For example with this selector `p span`, browsers firstly find all the `<span>`
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.
- `: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/
- https://css-tricks.com/almanac/selectors/a/after-and-before/
[[↑] Back to top](#css-questions)
@ -353,53 +361,53 @@ The CSS box model describes the rectangular boxes that are generated for element
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.
- 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.
- 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
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
[[↑] Back to top](#css-questions)
### 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.
* Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
- 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.
- Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
###### References
* https://www.paulirish.com/2012/box-sizing-border-box-ftw/
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
[[↑] Back to top](#css-questions)
### What is the CSS `display` property and can you give a few examples of its use?
* `none`, `block`, `inline`, `inline-block`, `flex`, `gird`, `table`, `table-row`, `table-cell`, `list-item`.
- `none`, `block`, `inline`, `inline-block`, `flex`, `gird`, `table`, `table-row`, `table-cell`, `list-item`.
| `display` | Description |
|:--- | :--- |
| `none` | Does not display an element (the elementv no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree |
| `block` | The element consumes the whole line in the block direction (which is usually horizontal) |
| `inline` | Elements can be laid out beside each other |
| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height` |
| `table` | Behaves like the `<table>` element |
| `table-row` | Behaves like the `<tr>` element |
| `table-cell` | Behaves like the `<td>` element |
| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
| `display` | Description |
| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `none` | Does not display an element (the elementv no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree |
| `block` | The element consumes the whole line in the block direction (which is usually horizontal) |
| `inline` | Elements can be laid out beside each other |
| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height` |
| `table` | Behaves like the `<table>` element |
| `table-row` | Behaves like the `<tr>` element |
| `table-cell` | Behaves like the `<td>` element |
| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
[[↑] Back to top](#css-questions)
@ -422,23 +430,23 @@ I shall throw in a comparison with `block` for good measure.
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.
- `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
- https://developer.mozilla.org/en/docs/Web/CSS/position
[[↑] Back to top](#css-questions)
### 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. Its unconventional theming system is a pain to customize. 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.
- **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. Its unconventional theming system is a pain to customize. 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.
[[↑] Back to top](#css-questions)
@ -452,7 +460,7 @@ Grid is by far the most intuitive approach for creating grid-based layouts (it b
###### References
* https://philipwalton.github.io/solved-by-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
[[↑] Back to top](#css-questions)
@ -491,8 +499,8 @@ A mobile-first strategy is also responsive, however it agrees we should default
A mobile-first strategy has 2 main advantages:
* It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
* It forces to write cleaner code in respect to responsive CSS rules.
- It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
- It forces to write cleaner code in respect to responsive CSS rules.
[[↑] Back to top](#css-questions)
@ -506,14 +514,14 @@ Adaptive design is more like the modern definition of progressive enhancement. I
Both have these methods have some issues that need to be weighed:
* Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
* Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
- Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
- Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
###### 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/
- 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/
[[↑] Back to top](#css-questions)
@ -529,15 +537,18 @@ To overcome this problem, we can use responsive images, as specified in HTML5. I
```html
<div responsive-background-image>
<img src="/images/test-1600.jpg"
<img
src="/images/test-1600.jpg"
sizes="
(min-width: 768px) 50vw,
(min-width: 1024px) 66vw,
100vw"
srcset="
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w">
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w
"
/>
</div>
```
@ -547,9 +558,9 @@ For icons, I would also opt to use SVGs and icon fonts where possible, as they r
###### References
* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
* http://scottjehl.github.io/picturefill/
* https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
[[↑] Back to top](#css-questions)
@ -561,12 +572,12 @@ When using `translate()`, the element still occupies its original space (sort of
###### References
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[[↑] Back to top](#css-questions)
### 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/
- 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/

118
questions/html-questions.md
View File

@ -2,24 +2,24 @@
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)
* [What kind of things must you be wary of when designing 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?](#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 designing 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**.
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.
@ -29,9 +29,9 @@ The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
###### References
* https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
* https://html.spec.whatwg.org/multipage/xhtml.html
* https://quirks.spec.whatwg.org/
- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
[[↑] Back to top](#html-questions)
@ -45,24 +45,24 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
###### References
* https://www.w3.org/International/getting-started/language
- 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 raster-based images (e.g. png, gif, jpg, etc.), 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 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.
- 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 raster-based images (e.g. png, gif, jpg, etc.), 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 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
- 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)
@ -76,25 +76,25 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
###### 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
- 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.
- 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
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[[↑] Back to top](#html-questions)
@ -115,24 +115,24 @@ _Note: If the user decides to clear browsing data via whatever mechanism provide
###### References
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
- 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 in putting a normal `<script>` at the end of `<body>`. A deferred script must not contain `document.write`.
- `<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 in 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/
- 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)
@ -150,9 +150,9 @@ An exception for positioning of `<script>`s at the bottom is when your script co
###### References
* https://developer.yahoo.com/performance/rules.html#css_top
* https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
* https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
- https://developer.yahoo.com/performance/rules.html#css_top
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
[[↑] Back to top](#html-questions)
@ -164,14 +164,14 @@ It used to be much more prevalent in the days before broadband internet but it i
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/).
- 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/
- 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)
@ -179,9 +179,9 @@ Examples of such techniques:
You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
* 500 / 320 = 1.5625
* 1000 / 320 = 3.125
* 2000 / 320 = 6.25
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25
If the client's resolution is 1x, 1.5625 is the closest, and `500w` corresponding to `small.jpg` will be selected by the browser.
@ -191,8 +191,8 @@ If the resolution is retina (2x), the browser will use the closest resolution ab
###### References
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
[[↑] Back to top](#html-questions)
@ -204,7 +204,7 @@ Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a f
### 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/
- 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/
---

586
questions/javascript-questions.md
View File

File diff suppressed because it is too large Load Diff