-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
605 lines (429 loc) · 28.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
<!-- hexo-inject:begin --><!-- hexo-inject:end --><meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TechBridge 技術共筆部落格</title>
<meta name="description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- google-site-verification -->
<meta name="google-site-verification" content="WX_9sZlrIYOEpy8RR7zCoa7-pJk611zZt11BSBUcDVY">
<link rel="stylesheet preload" type="text/css" href="/css/screen.css" as="style">
<link rel="stylesheet preload" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" as="style">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/img/favicon.ico">
<link rel="icon preload" href="/img/favicon.ico" as="image">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="atom.xml"><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body class="home-template">
<!-- hexo-inject:begin --><!-- hexo-inject:end --><header class="site-head" >
<div class="vertical">
<div class="site-head-content inner">
<a class="blog-logo" href="/"><img src="/img/logo-tb-500-500.png" alt="Blog Logo"/></a>
<h1 class="blog-title">TechBridge 技術共筆部落格</h1>
<h2 class="blog-description">var topics = ['Web前後端', '行動網路', '機器人/物聯網', '數據分析', '產品設計', 'etc.']</h2>
<div class="navbar-block">
<span><a href="/">首頁</a></span> / <span><a href="/about/">關於我們</a></span> / <span><a href="http://weekly.techbridge.cc/" target="_blank">技術週刊</a></span> / <span><a href="https://www.facebook.com/techbridge.cc/" target="_blank">粉絲專頁</a></span> / <span><a href="/atom.xml" target="_blank">訂閱RSS </a></span>
<br>
</div>
</div>
</div>
</header>
<main class="content" role="main">
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-11-30T19:49:03.000Z" itemprop="datePublished">
2019-11-30
</time>
|
<a href='/tags/Web/'>Web</a>
</span>
<meta name="generator" content="Don’t break the Web：以 SmooshGate 以及 keygen 為例">
<meta name="og:title" content="Don’t break the Web：以 SmooshGate 以及 keygen 為例">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/11/30/smooshgate-and-keygen/">Don’t break the Web：以 SmooshGate 以及 keygen 為例</a></h1>
</header>
<section class="post-excerpt">
<p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近 YDKJS（You Don’t Know JS 的縮寫，中譯版翻成：你所不知道的JS）有了第二版，名叫 <a href="https://twitter.com/ydkjsy" target="_blank" rel="noopener">YDKJSY</a>，Y 是 Yet 的意思（中文版可能可以翻叫：你還是不知道的 JS）。這個第二版還沒全部完成，但在 <a href="https://github.com/getify/You-Dont-Know-JS" target="_blank" rel="noopener">GitHub</a> 上面已經公開了最前面的一些章節。</p>
<p>搶先讀了一下第一章，在講與 JS 相關的歷史，其中提到一段讓我很感興趣的議題：</p>
<blockquote>
<p> As such, sometimes the JS engines will refuse to conform to a specification-dictated change because it would break that web content.</p>
</blockquote>
<blockquote>
<p>In these cases, often TC39 will backtrack and simply choose to conform the specification to the reality of the web. For example, TC39 planned to add a contains(..) method for Arrays, but it was found that this name conflicted with old JS frameworks still in use on some sites, so they changed the name to a non-conflicting includes(..). The same happened with a comedic/tragic JS community crisis dubbed “smooshgate”, where the planned flatten(..) method was eventually renamed flat(..).</p>
</blockquote>
<p>大意是在說有時候 JS 的規格必須跟現實（已經存在的那些舊的實作）妥協。例如說原本 Array 要加上一個叫做 contains 的 method，但因為會有問題所以改叫 includes，flatten 也改名叫做 flat。</p>
<p>還有一個上面特別標起來的詞「smooshgate」，用這個當關鍵字去找才發現是去年三月左右發生的事件，至於發生了什麼，底下會詳述，跟上面提的 flatten 有關。看到有這件事的時候我第一個反應是：「咦，我怎麼什麼都不知道？」，查了一下繁體中文的資料，大概也只有這篇有提到：<a href="https://blog.othree.net/log/2018/05/28/smooshgate/" target="_blank" rel="noopener">SmooshGate</a>，以及<a href="https://medium.com/@liuderchi/%E7%AD%86%E8%A8%98-3-%E7%A8%AE-javascript-%E7%89%A9%E4%BB%B6%E5%B1%AC%E6%80%A7%E7%9A%84%E7%89%B9%E6%80%A7-3b982f4c5695" target="_blank" rel="noopener">[筆記] 3 種 JavaScript 物件屬性的特性</a>這篇有擦到邊而已。</p>
<p>在仔細研究了一下事情的來龍去脈之後，覺得是個滿有趣的議題，因此寫了這篇跟大家分享。</p>
</p>
<p>
<a href="/2019/11/30/smooshgate-and-keygen/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-11-22T21:51:34.000Z" itemprop="datePublished">
2019-11-22
</time>
|
<a href='/tags/Algorithm/'>Algorithm</a>,
<a href='/tags/Leetcode/'>Leetcode</a>,
<a href='/tags/Software-Engineer/'>Software Engineer</a>
</span>
<meta name="generator" content="Leetcode 刷題 pattern - Fast & Slow Pointer">
<meta name="og:title" content="Leetcode 刷題 pattern - Fast & Slow Pointer">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/11/22/leetcode-pattern-fast-and-slow-pointer/">Leetcode 刷題 pattern - Fast & Slow Pointer</a></h1>
</header>
<section class="post-excerpt">
<p>
前言身在大 CS 時代，有越來越多人投入刷題的行列，在眼花撩亂的題海中，要想有效率地刷題，掌握並通達題目解法背後，可以不斷被拿來使用的觀念，才能做到以簡禦繁。之前 Huli 寫的 程式解題新手入門注意事項 也講得非常好，寫題目是為了學會解題的思考方法，確保自己掌握重要的資料結構跟演算法。這也是為什麼我想要寫這系列的文章，把多個散落在各處的題目銜接起來，以後看到相似的問題就可以舉一反三，而不是去背各題目的解法。
舉例來說，之前遇過一題電話
</p>
<p>
<a href="/2019/11/22/leetcode-pattern-fast-and-slow-pointer/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-11-15T10:23:23.000Z" itemprop="datePublished">
2019-11-15
</time>
|
<a href='/tags/軟體工程師/'>軟體工程師</a>,
<a href='/tags/軟體工程/'>軟體工程</a>,
<a href='/tags/software-engineering/'>software engineering</a>,
<a href='/tags/bash/'>bash</a>,
<a href='/tags/shell/'>shell</a>,
<a href='/tags/linux/'>linux</a>,
<a href='/tags/指令/'>指令</a>,
<a href='/tags/命令列/'>命令列</a>,
<a href='/tags/command-line/'>command line</a>,
<a href='/tags/script/'>script</a>,
<a href='/tags/unix/'>unix</a>,
<a href='/tags/mac/'>mac</a>,
<a href='/tags/os/'>os</a>,
<a href='/tags/windows/'>windows</a>,
<a href='/tags/curl/'>curl</a>,
<a href='/tags/shell-script/'>shell script</a>
</span>
<meta name="generator" content="簡明 Linux Shell Script 入門教學">
<meta name="og:title" content="簡明 Linux Shell Script 入門教學">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/11/15/linux-shell-script-tutorial/">簡明 Linux Shell Script 入門教學</a></h1>
</header>
<section class="post-excerpt">
<p>
前言Shell 是一種讓使用者可以和作業系統 Kernel（核心用來控制 CPU、記憶體、硬碟等硬體）互動溝通的橋樑。Shell Script 主要是使用在 Linux 和 MacOS 等 Unix-like 作業系統的自動化操作指令的程式語言。其透過 Unix shell 命令列直譯器來執行（我們這邊主要使用 bash shell，其他的 Unix shell 觀念大致類似），使用方式有點類似直譯式程式語言（不用編譯直接執行）。在
</p>
<p>
<a href="/2019/11/15/linux-shell-script-tutorial/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-11-06T08:56:40.000Z" itemprop="datePublished">
2019-11-06
</time>
|
<a href='/tags/web/'>web</a>,
<a href='/tags/animation/'>animation</a>,
<a href='/tags/svg/'>svg</a>,
<a href='/tags/TimelineMax/'>TimelineMax</a>,
<a href='/tags/GSAP/'>GSAP</a>
</span>
<meta name="generator" content="十分鐘、五步驟，SVG 動起來！">
<meta name="og:title" content="十分鐘、五步驟，SVG 動起來！">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/11/06/svg-animation-in-10mins/">十分鐘、五步驟，SVG 動起來！</a></h1>
</header>
<section class="post-excerpt">
<p>
前言在 Codepen 上常常看到很多會設計又懂寫前端的高手，用 SVG 畫出很漂亮的圖案後，還能讓他們產生可愛的動畫，我一直很好奇他們是怎麼實作的，總覺得很困難，好像得對 SVG 透徹了解，並且自己畫出那些 SVG 圖案，才有辦法實作動畫。但其實不然，今天就來分享一個簡單的小技巧，讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來！
簡單看個成品，你可以點選下面範例中的 build 按鈕，可以看到原本靜止的 SVG 房子動了起來
</p>
<p>
<a href="/2019/11/06/svg-animation-in-10mins/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-11-02T10:34:52.000Z" itemprop="datePublished">
2019-11-02
</time>
|
<a href='/tags/JavaScript/'>JavaScript</a>,
<a href='/tags/Algorithm/'>Algorithm</a>
</span>
<meta name="generator" content="程式解題新手入門注意事項">
<meta name="og:title" content="程式解題新手入門注意事項">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/11/02/before-start-leetcode/">程式解題新手入門注意事項</a></h1>
</header>
<section class="post-excerpt">
<p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在這兩三年之間，「刷題」似乎成為了一種風潮。本科系要去面試大公司的時候要刷題，非本科系出去面試也要刷題，好像只要沒有刷題就會落後他人，就會被公司刷掉。</p>
<p>其實我一直不是很喜歡「刷題」這個詞，主要是因為「刷」這個字。不知道大家對這個字的解讀是什麼，但我會認為有種「為了寫題目而寫題目」的感覺，就好像題海戰術那樣。雖然說題海戰術用得好的話成效滿顯著的，但總感覺很多人刷到最後會變成「看過的題目就會，沒看過的就一定不會」，如果是這樣子的話，那我覺得不是一件好事。</p>
<p>之前我有寫了一篇文章：<a href="https://medium.com/@hulitw/learn-coding-9c572c2fb2" target="_blank" rel="noopener">當我們在學程式時，要學的到底是什麼？</a>，稍微談了一下這件事情。</p>
<p>總之呢，比起刷題這個詞，我更喜歡用「程式解題」四個字來表達我想表達的意思。</p>
</p>
<p>
<a href="/2019/11/02/before-start-leetcode/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-10-26T16:51:34.000Z" itemprop="datePublished">
2019-10-26
</time>
|
<a href='/tags/Algorithm/'>Algorithm</a>,
<a href='/tags/Leetcode/'>Leetcode</a>,
<a href='/tags/Software-Engineer/'>Software Engineer</a>
</span>
<meta name="generator" content="Leetcode 刷題 pattern - Next Greater Element">
<meta name="og:title" content="Leetcode 刷題 pattern - Next Greater Element">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/10/26/leetcode-pattern-next-greater-element/">Leetcode 刷題 pattern - Next Greater Element</a></h1>
</header>
<section class="post-excerpt">
<p>
前言身在大 CS 時代，有越來越多人投入刷題的行列，在眼花撩亂的題海中，要想有效率地刷題，掌握並通達題目解法背後，可以不斷被拿來使用的觀念，才能做到以簡禦繁。
繼之前寫過的 Two Pointer 跟 Sliding Window，今天要來跟大家介紹另一種演算法的 pattern - Next Greater Element。
Next Greater Element 的第一個範例 - Leetcode #496 - Next Grea
</p>
<p>
<a href="/2019/10/26/leetcode-pattern-next-greater-element/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-10-19T23:54:49.000Z" itemprop="datePublished">
2019-10-19
</time>
|
<a href='/tags/Python-PyGame-遊戲製作-game-遊戲開發/'>Python - PyGame - 遊戲製作 - game - 遊戲開發</a>
</span>
<meta name="generator" content="使用 Python 和 PyGame 遊戲製作入門教學">
<meta name="og:title" content="使用 Python 和 PyGame 遊戲製作入門教學">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/10/19/how-to-build-up-game-with-pygame-tutorial/">使用 Python 和 PyGame 遊戲製作入門教學</a></h1>
</header>
<section class="post-excerpt">
<p>
前言隨著天氣越來越冷，很多人卻納悶蚊子為何不減反增。身為一個工程師若沒辦法成功在現實社會和蚊子好好相處，只好做打蚊子遊戲調劑身心（咦）。本文將透過一個打蚊子遊戲，帶領讀者學習如何使用 Python 的 PyGame 模組製作一個簡單的打蚊子遊戲，在學習遊戲開發的基本觀念的同時，也讓我們在虛擬社會中可以彌補現實社會中的遺憾（喂）。好啦，就讓我們開始 PyGame 遊戲開發之旅吧！
PyGame 初體驗PyGame 是一種 Python
</p>
<p>
<a href="/2019/10/19/how-to-build-up-game-with-pygame-tutorial/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-10-13T17:07:29.000Z" itemprop="datePublished">
2019-10-13
</time>
|
<a href='/tags/web/'>web</a>,
<a href='/tags/javascript/'>javascript</a>,
<a href='/tags/web-accessibility/'>web accessibility</a>,
<a href='/tags/a11y/'>a11y</a>
</span>
<meta name="generator" content="Web Accessibility 的重要性">
<meta name="og:title" content="Web Accessibility 的重要性">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/10/13/web-accessibility-intro/">Web Accessibility 的重要性</a></h1>
</header>
<section class="post-excerpt">
<p>
前言你是否曾因為網路上被歧視、被霸凌的新聞或影片而憤憤不平？你是否曾因為各種身殘心不殘的勵志故事而感到激勵？如果你有過上述經驗，那當你在製作網站時，是否曾經考量過 Web Accessibility（a11y） 呢？
老實說，我真的很少在實作時認真的驗證自己的網站的可訪性，花在考量是否能支援 IE 9 的時間還比較多一些。（想當年在政府機關服務時，看到局處長很自豪官網拿到無障礙網站評等第一時，還覺得莫名其妙，想說網站這麼醜，到底哪裡無障
</p>
<p>
<a href="/2019/10/13/web-accessibility-intro/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-10-05T04:07:33.000Z" itemprop="datePublished">
2019-10-05
</time>
|
<a href='/tags/JavaScript/'>JavaScript</a>
</span>
<meta name="generator" content="JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！">
<meta name="og:title" content="JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/10/05/javascript-async-sync-and-callback/">JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！</a></h1>
</header>
<section class="post-excerpt">
<p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>如果要舉出一個在 JavaScript 裡面很重要也很常用，但新手常常搞混的概念，那「非同步（Asynchronous）」當仁不讓，絕對是第一名。跟其他那些 <a href="https://blog.huli.tw/2019/02/23/javascript-what-is-this/" target="_blank" rel="noopener">this</a>、<a href="https://blog.huli.tw/2018/12/08/javascript-closure/" target="_blank" rel="noopener">closure</a>、<a href="https://blog.huli.tw/2017/08/27/the-javascripts-prototype-chain/" target="_blank" rel="noopener">prototype</a> 或是 <a href="https://blog.huli.tw/2018/11/10/javascript-hoisting-and-tdz/" target="_blank" rel="noopener">hoisting</a> 比起來，非同步在實際開發的時候用到的頻率高太多了，而且是初學者常常會踩坑的地方。</p>
<p>非同步真的那麼難嗎？</p>
<p>我相信不是的。只要循著一個正確的脈絡前進，就可以循序漸進理解為什麼需要非同步，也能知道在 JavaScript 裡面是怎麼處理這種操作的。</p>
<p>類似的主題我其實在四年前就<a href="https://blog.huli.tw/2015/08/26/javascript-promise-generator-async-es6/" target="_blank" rel="noopener">寫過</a>，但現在回頭看實在是寫得滿差的，所以四年後重新挑戰這個主題，希望能寫出一篇品質不錯的文章，把非同步這件事情講清楚。</p>
<p>在寫這篇文章之前，參考了 <a href="https://nodejs.org/en/docs/guides/" target="_blank" rel="noopener">Node.js</a> 的官方文件，發現在非同步的講解上其實做得不錯，因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係，我底下會稍微做點介紹。</p>
<p>建議閱讀本文以前需要具備 JavaScript 基礎，知道如何使用 JavaScript 操作 DOM，也知道什麼是 ajax。</p>
<p>接著就讓我們開始吧！</p>
</p>
<p>
<a href="/2019/10/05/javascript-async-sync-and-callback/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<article class="post">
<header class="post-header">
<span class="post-meta">
<time datetime="2019-10-04T17:03:44.000Z" itemprop="datePublished">
2019-10-04
</time>
|
<a href='/tags/Web/'>Web</a>,
<a href='/tags/Backend/'>Backend</a>,
<a href='/tags/Interview/'>Interview</a>
</span>
<meta name="generator" content="2019 Web Backend 面試總結">
<meta name="og:title" content="2019 Web Backend 面試總結">
<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。">
<meta name="og:type" content="website">
<meta name="og:image" content="/img/og-cover.png">
<h1 class="post-title"><a href="/2019/10/04/web-backend-interview-in-2019/">2019 Web Backend 面試總結</a></h1>
</header>
<section class="post-excerpt">
<p>
前言會想分享這篇整理，主要是因為今年是我第一次面試工作，在準備期間我曾無比焦慮，看過一篇又一篇的面經，總覺得怎麼還是這麼多不懂的，而且看了也未必在面試中回答得出來，後來我發現，原來是對於面試會考哪些類別的問題沒有概念，所以才感到焦慮。希望透過這篇後端面試總結，讓即將上路或是正在途中的人，可以有個方向，知道如何準備！
我會將後端面試分為六大類：
演算法（Algorithm）
程式語言（Programming Language）
作業系統
</p>
<p>
<a href="/2019/10/04/web-backend-interview-in-2019/" class="excerpt-link">Read More...</a>
</p>
</section>
</article>
<nav class="pagination" role="pagination">
<span class="page-number">Page 1 of 22</span>
<a class="older-posts" href="/page/2/">Older Posts →</a>
</nav>
</main>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-75308642-1', 'auto');
ga('send', 'pageview');
</script>
<footer class="site-footer">
<a class="subscribe icon-feed" href="/atom.xml"><span class="tooltip">Subscribe!</span></a>
<div class="inner">
<section class="copyright">All content copyright <a href="/">TechBridge 技術共筆部落格</a> © 2017 • All rights reserved.</section>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '[object Object]']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var disqus_shortname = 'techbridgeweekly';
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/medium-zoom.min.js"></script>
<script>
// NodeList
mediumZoom(document.querySelectorAll('img'));
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ["$","$"], ["\\(","\\)"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
processEscapes: true
}
});
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax();
for (var i = 0; i < all.length; ++i)
all[i].SourceElement().parentNode.className += ' has-jax';
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!-- hexo-inject:begin --><!-- Begin: Injected MathJax -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config("");
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="">
</script>
<!-- End: Injected MathJax -->
<!-- hexo-inject:end -->
</body>
</html>