12
12
1 . [ HTML 問題] ( #html-questions )
13
13
1 . [ CSS 問題] ( #css-questions )
14
14
1 . [ JS 問題] ( #js-questions )
15
- 1 . [ Network 問題] ( #network-questions )
15
+ 1 . [ 測試問題] ( #testing-questions )
16
+ 1 . [ 效能問題] ( #performance-questions )
17
+ 1 . [ 網路問題] ( #network-questions )
16
18
1 . [ 程式碼問題] ( #coding-questions )
17
19
1 . [ 有趣問題] ( #fun-questions )
18
20
27
29
28
30
* 你昨天或這週學習了什麼?
29
31
* 寫程式的哪部份最讓你感到很興奮或是有興趣?
30
- * What is a recent technical challenge you experienced and how did you solve it?
32
+ * 最近有無遇過不容易的技術性問題,又如何解決?
31
33
* 當你開發Web應用程式或網站時,針對UI、安全性、效能、SEO、維護性,以及技術,你考量的點是什麼?
32
- * 說說你喜好的開發環境 (作業系統, 編輯器或 IDE, 瀏覽器, 開發工具 … 之類)
34
+ * 說說你喜好的開發環境 (作業系統, 編輯器或 IDE, 瀏覽器, 開發工具 … 之類)。
33
35
* 你最熟悉哪一套版本控制系統?
34
36
* 你可以描述你在開發一個網站時的工作流程嗎?
35
37
* 如果有 5 種不同的樣式表 (stylesheets),該如何整併到網站?
36
38
* 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎?
37
39
* 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)?
38
40
* 說出三種能加快網頁讀取速度的方法 (感覺上的速度或是真正的讀取時間)。
39
41
* 如果你加入了一個專案,但是他們的程式碼用 tabs,但是你習慣用spaces (空白鍵),你會怎麼做?
40
- * 寫一個簡易的投影片頁面
42
+ * 寫一個簡易的投影片頁面。
41
43
* 你用什麼工具來測試你的程式碼效能?
42
44
* 如果今年你能精通一項技術,那會是什麼?
43
45
* 描述標準和製定標準機構的重要性?
44
- * 什麼是 FOUC? 你怎麼避免 FOUC?
45
- * Explain what ARIA and screenreaders are, and how to make a website accessible.
46
- * Explain some of the pros and cons for CSS animations versus JavaScript animations.
46
+ * 什麼是 Flash of Unstyled Content? 你怎麼避免 FOUC?
47
+ * 解釋什麼是 ARIA 與 screenreaders,它們是怎麼樣讓網站使用更無障礙?
48
+ * 解釋 CSS 動畫與 JavaScript 動畫之間的憂與劣。
49
+ * CORS 是什麼,它解決了什麼問題?
47
50
48
51
#### <a name =' html-questions ' >HTML 問題:</a >
49
52
54
57
* 你怎麼做一個需要支持多國語言的網頁?
55
58
* 當開發和設計一個多國語言網站時,有什麼需要小心的?
56
59
* ` data- ` 屬性的好處在哪?
57
- * 考慮 HTML5 作為一個開放式的網站平台。 HTML5 的 building blocks 有哪些 ?
60
+ * 考慮 HTML5 作為一個開放式的網站平台,組成 HTML5 的技術有哪些 ?
58
61
* 請描述 ` cookies ` , ` sessionStorage ` 和 ` localStorage ` 的不同?
59
- * Describe the difference between ` <script> ` , ` <script async> ` & ` <script defer> ` .
60
- * 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?
62
+ * 描述下列之間的不同 ` <script> ` , ` <script async> ` & ` <script defer> ` 。
63
+ * 為什麼把 CSS ` <link> ` 放在 ` <head></head> ` 之間,與將 JS ` <script> ` 放在 ` </body> ` 之前是個較好的主意?有什麼例外情形嗎?
64
+ * 什麼是漸進式呈現?
65
+ * 有用過 HTML 樣板語言(template languages)嗎?
61
66
62
67
#### <a name =' css-questions ' >CSS 問題:</a >
63
68
64
69
* CSS 的 class 和 ID 兩者有何差異?
65
70
* 描述 "resetting" 和 "normalizing" 的差異性?你會選擇哪一種,為什麼選擇它?
66
71
* 描述 Floats 並解釋如何運作。
67
72
* 描述 z-index 並且描述堆疊內容 (stacking context) 如何形成。
73
+ * 解釋 BFC(Block Formatting Context) 是什麼、如何運作的。
68
74
* 有哪些不同的 clearing 技術?哪個適用在哪種內容上?
69
75
* 描述 CSS sprites, 你如何實作在網頁或網站上?
70
76
* 你最喜愛的圖片取代技術是什麼?你什麼時候會用到?
71
- * CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的 ?
77
+ * 針對各瀏覽器制定的樣式表(browser-specific styling),你的做法是 ?
72
78
* 你怎麼讓你的網頁支援有功能限制的瀏覽器?
73
79
* 你會使用什麼樣的技術/流程 ?
74
80
* 有什麼方法來隱藏網頁的內容? (只顯示在 screen readers)?
78
84
* 你如何優化你的網頁以利於列印?
79
85
* 在寫高效的 CSS 時,有什麼要注意的?
80
86
* 使用 CSS preprocessors 的優點和缺點是什麼? (Sass, Compass, Stylus, LESS)
81
- * 描述你使用過的喜歡和不喜歡的 CSS preprocessors
87
+ * 描述你使用過的喜歡和不喜歡的 CSS preprocessors。
82
88
* 你如何使用非標準字體來實作網頁設計?
83
89
* 解釋瀏覽器如何按照 CSS selector 找到對應的 element。
84
90
* 解釋你所認知的 box model,以及你如何在 CSS 告訴瀏覽器使用不同 box model 來呈現圖層?
85
91
* 請解釋 ` * { box-sizing: border-box; } ` ?並且說明使用它的好處?
86
- * 請列出您記憶中 display 屬性的全部值
92
+ * 請列出您記憶中 display 屬性的全部值。
87
93
* 請說明 inline 和 inline-block 的差異性?
88
94
* 請說明 relative、fixed、absolute 和 static 元件差異性?
89
- * The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
95
+ * 'C' 在 CSS 中代表層疊。樣式的優先級(舉出範例)?如何利用這項功能?
90
96
* 你目前有使用哪一套 CSS Framework 在開發環境或產品線上?
91
97
* 如果有,請問是哪一套,並且描述如果改善或提昇 CSS Framework?
92
98
* 請問你有使用過 CSS Flexbox 或 Grid specs?
93
99
* 如何區分 responsive design 與 adaptive design 有何不同?
94
100
* 你曾經使用過 retina graphics?如果有,是在什麼時機以及用了什麼技術?
95
- * Is there any reason you'd want to use ` translate() ` instead of * absolute positioning* , or vice-versa? And why?
101
+ * 為什麼會用 ` translate() ` 代替 * aboslute positioning * ,或者用 * absolute positioning* 代替 ` translate ` ?為什麼要這樣?
96
102
97
103
#### <a name =' js-questions ' >JS 規格問題集:</a >
98
104
99
- * 描述 event delegation
100
- * 描述 ` this ` 如果運作在 JavaScript 中
105
+ * 描述 event delegation。
106
+ * 描述 ` this ` 如何在 JavaScript 中運作。
101
107
* 描述 prototypal inheritance 如何運作?
102
108
* 你如何測試你的 JavaScript?
103
109
* AMD vs. CommonJS?
@@ -135,7 +141,35 @@ duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
135
141
136
142
* Ternary expression 怎麼來的, "Ternary" 的意思是什麼?
137
143
* 什麼是 ` "use strict"; ` ? 使用他的優點和缺點是什麼?
138
- * Create a for loop that iterates up to ` 100 ` while outputting ** "fizz"** at multiples of ` 3 ` , ` "buzz" ` at multiples of ` 5 ` and ** "fizzbuzz"** at multiples of ` 3 ` and ` 5 `
144
+ * 建個數到 ` 100 ` 的迴圈,當數字是 ` 3 ` 的倍數時輸出 ** "fizz"** ,當數字是 ` 5 ` 的倍數時輸出 ` "buzz" ` ,當數字同時是 ` 3 ` 與 ` 5 ` 的倍數時輸出 ** "fizzbuzz"** 。
145
+ * 為什麼保持網站的全域(global scope)原樣是一個好做法?
146
+ * 為什麼要用 ` load ` 事件?有什麼缺點嗎?有其他選擇嗎?又為何選擇它?
147
+ * 解釋什麼是 single page app,並怎麼讓它對 SEO 更友善。
148
+ * 你對 Promises 的經驗?有用過相關的補強(ployfills)嗎?
149
+ * Promises 之於 callbacks 的優劣?
150
+ * JavaScript 轉譯器(transpiler)的優缺點?
151
+ * 你用什麼工具或技巧來做 JavaScript debug?
152
+ * 你都用什麼對 object properties 與 array 進行迭代?
153
+ * 解釋 mutable 與 immutable objects 之間的不同。
154
+ * 舉個 immutable 在 JavaScript 中例子?
155
+ * immutability 的憂劣?
156
+ * 如何達成 immutability?
157
+ * 解釋同步(synchronous)與非同步(asynchronous)函式之間的差異。
158
+ * Event loop 是什麼?
159
+ * call stack 與 task queue 之間的不同?
160
+
161
+ #### <a name =' testing-questions ' >測試問題集:</a >
162
+
163
+ * 寫測試有什麼好壞?
164
+ * 都用什麼工具測試代碼是否能運作?
165
+ * Unit test 與 functional/integration 間的不同?
166
+ * 監控代碼風格 linting 工具的用途是?
167
+
168
+ #### <a name =' performance-questions ' >效能問題集:</a >
169
+
170
+ * 你都用什麼工具尋找效能上的臭蟲?
171
+ * 有哪些方法可改善網站在 scrolling 效能?
172
+ * 解釋 layout, painting 與 compositing 的不同。(瀏覽器在 render 上的效能問題)
139
173
140
174
#### <a name =' network-questions ' >網路問題集:</a >
141
175
@@ -149,10 +183,16 @@ duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
149
183
* Transfer-Encoding
150
184
* ETag
151
185
* X-Frame-Options
152
- * 請描述 ` GET ` 和 ` POST ` 的差異性?
186
+ * 列出所有你知道的 HTTP 操作,並詳加解釋。
153
187
154
188
#### <a name =' coding-questions ' >程式碼問題集:</a >
155
189
190
+ 問題: ` foo ` 的值是什麼?
191
+
192
+ ``` javascript
193
+ var foo = 10 + ' 20' ;
194
+ ```
195
+
156
196
問題:實作符合下面的函式
157
197
158
198
``` javascript
@@ -166,7 +206,7 @@ add(2)(5); // 7
166
206
" i'm a lasagna hog" .split (" " ).reverse ().join (" " );
167
207
```
168
208
169
- 問題: window.foo 的值是什麼?
209
+ 問題: ` window.foo ` 的值是什麼?
170
210
171
211
``` javascript
172
212
( window .foo || ( window .foo = " bar" ) );
@@ -183,21 +223,31 @@ var foo = "Hello";
183
223
alert (foo + bar);
184
224
```
185
225
186
- 問題: 下面 foo.length 的值是什麼?
226
+ 問題: 下面 ` foo.length ` 的值是什麼?
187
227
188
228
``` javascript
189
229
var foo = [];
190
230
foo .push (1 );
191
231
foo .push (2 );
192
232
```
193
233
234
+ 問題:下面這段會印出什麼?
235
+
236
+ ``` javascript
237
+ console .log (' one' );
238
+ setTimeout (function () {
239
+ console .log (' two' );
240
+ }, 0 );
241
+ console .log (' three' );
242
+ ```
243
+
194
244
#### <a name =' fun-questions ' >有趣問題:</a >
195
245
196
246
* 你最近寫過最酷的專案是?
197
247
* 你使用的開發工具中,你最喜歡的部分是什麼?
198
248
* 你有任何的 pet projects (個人開發的小專案)? 什麼樣的?
199
249
* 你最喜歡 IE 瀏覽器的什麼特點?
200
- * How do you like your coffee ?
250
+ * 喜歡咖啡嗎 ?
201
251
202
252
#### <a name =' contributors ' >貢獻作者群:</a >
203
253
0 commit comments