前言

之前在公司裡面做一些效能上的調整時，無意間發現了一個奇怪的現象，繼續往下追查之後才發現是個好像沒有被什麼人發現過的 bug，而且成因我覺得挺有趣的，就想說可以寫一篇跟大家分享一下。

這篇技術含量不高，可以抱持著看故事的心態來看這篇，會比較有趣一點。

故事的開端

故事的起源呢，是之前在公司裡面要做一些網站上的調整，試著增進一下載入的速度。當我們談到性能最佳化這一塊，其實有很多可以做的，例如說跟 Server 那邊比較有關的是：

1. 使用 HTTP/2
2. 使用 gzip 或是 brotli 進行壓縮
3. 使用 Cache（可以加快 revisit 的速度）
4. 使用 CDN
5. 降低 TTFB 時間

不過以上都需要後端或是 SRE 的協助，跟前端其實關係不大。跟前端關係比較大的，也可以分成很多面向來看，例如說以「減少資源」的角度來看，可以做的事情有：

1. Image 格式調整（壓縮 + webp 或其他格式）
2. JS 大小（ugligy、code spliting、dynamic import）
3. CSS 大小（minify、移除不需要的 CSS）

如果以「加速載入重要資源」的角度，可以加上 preload 或是 preconnect 這些 hint，來提示瀏覽器哪些東西應該先被載入。

還可以從「減少 JS 執行時間」的角度來看，例如說如果是寫 React，可以用 shouldComponentUpdate、PureComponent 或是 memo 來減少不必要的 re-render。

這一篇既然標題都寫 styled components 了，主題當然就是圍繞在 CSS 這一塊。

閱讀更多

前言

要學習一個新的東西，光用看的還真的沒什麼用，直接動手下去做才是比較好的方法。因為上一份工作快離職時 React hook 才剛出來，所以我之前從來沒寫過 hook，只有看過一些基本的教學而已。而前陣子開始工作之後，才終於開始寫 function component + hook。

雖然剛開始還是滿懷念 class 的寫法，但寫久之後覺得 hook 也挺不錯的。在使用 hook 的過程中也有碰到一些剛轉換的人常碰到的問題，仔細研究後發現這篇文章要提的案例還滿不錯的，如果能夠理解這個案例，應該就可以掌握到 class 與 function component 根本上的不同，因此寫了這篇來記錄一下心得。

話說如果你已經寫 function component 一陣子，hook 也用得滿習慣的，而且都有把官方文件還有 dan 哥的文章好好看過，基本上不會從這篇文章獲得任何新知識。這篇適合的對象是剛轉換到 function component，而且不太確定跟 class 的差異是什麼的人。

閱讀更多

前言

如果有先寫過其他 function 不是 first-class 的程式語言，在寫 JavaScript 的時候應該會經歷一些陣痛期，想說到底在做什麼——至少我是這樣的。

我當初發現可以把 function 當作參數到處傳遞的時候，對於比較複雜的 code 就要想很久，而 function 的其他行為也是讓我一頭霧水，例如說 function 居然也是 object，還有 this 到底是什麼鬼東西。

這一篇主要是想分享一些我覺得 function 比較有趣的地方。可是呢，直接開始講一大堆知識太無趣了，我希望能引起大家對這些知識的好奇程度，而想要引起好奇，最好的方法就是提供一個「你也會感興趣的問題」，你就會有動力繼續往下看了。

因此底下就以幾個小問題作為開場，雖然是問題的形式，但答不出來也完全沒有關係，如果你對這些問題的答案有興趣的話再往下看，沒興趣的話出口直走到底左轉。

話說這篇標題本來想取叫：「JavaScript function 知多少」或是「有趣的 JavaScript function」，但這種標題太無趣了，所以才想到這種輕小說式（？）的標題。

閱讀更多

前言

如果要舉出一個在 JavaScript 裡面很重要也很常用，但新手常常搞混的概念，那「非同步（Asynchronous）」當仁不讓，絕對是第一名。跟其他那些 this、closure、prototype 或是 hoisting 比起來，非同步在實際開發的時候用到的頻率高太多了，而且是初學者常常會踩坑的地方。

非同步真的那麼難嗎？

我相信不是的。只要循著一個正確的脈絡前進，就可以循序漸進理解為什麼需要非同步，也能知道在 JavaScript 裡面是怎麼處理這種操作的。

類似的主題我其實在四年前就寫過，但現在回頭看實在是寫得滿差的，所以四年後重新挑戰這個主題，希望能寫出一篇品質不錯的文章，把非同步這件事情講清楚。

在寫這篇文章之前，參考了 Node.js 的官方文件，發現在非同步的講解上其實做得不錯，因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係，我底下會稍微做點介紹。

建議閱讀本文以前需要具備 JavaScript 基礎，知道如何使用 JavaScript 操作 DOM，也知道什麼是 ajax。

接著就讓我們開始吧！

閱讀更多

簡介

近幾年前端框架大放異彩，許多新手才學沒多久的 JavaScript，就直接學習三大框架了（雖然 React 不是框架，但整個生態系其實就跟框架沒兩樣，因此我覺得歸類在框架也不是不行）。

而這三大框架通常都是拿來寫 SPA（Single Page Application）用的，我一直認為在學習這些框架前應該要具備一些基礎知識，尤其是對於前後端的理解，否則一定會遇到很多不知道從何解起的問題。

因此，本文舉出一個我自己曾經碰過，學生也常常跑來問我的問題當作範例，大家也可以先想一下自己能不能回答出這個問題：

假設今天我有個 SPA，搭配某些 router 的 library 來實作路由，所以 /list 會連到列表頁，/about 會到關於我的頁面。

可是奇怪了，當我把 SPA 上傳到 GitHub Pages 之後，首頁是好的，我從首頁進去 /list 也是好的，可是當我在 /list 重新整理的時候，卻顯示 404 not found，這是為什麼呢？

要回答這個問題，必須先來複習一下前後端相關的網路基礎知識。

閱讀更多

（原文寫在 Medium，順便在這邊備份一下）

雖然說我一直很清楚自己目前偏好的學習方法以及路線，並且把我認為適合的路徑都變成上課的大綱拿去教學，但一來好像沒多少人會去看那個大綱，二來大綱並沒有詳細解釋背後的原因。因此我才覺得自己有必要寫這一篇，來寫一下自己認為比較「紮實」的網頁前端學習路線。

閱讀更多

前言

前陣子有個學生跑來問我一個問題，說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件，還有 keyCode 跟 charCode 這兩個東西，有時候拿得到值，有時候卻拿不到，覺得十分困惑。

我原本以為是 React 做了一些處理，所以去看了一下原始碼。後來發現 React 的確有做一些處理，但實際上這個問題跟 React 沒什麼關係，而是 keyPress 跟 keyDown 這兩個原生的 JavaScript 事件本來就有差異。

所以他碰到的問題跟 React 一點關係都沒有，只是對這部分的事件機制不熟而已。

儘管如此，能夠藉由一個實際的問題來參考一下 React 的實作還是件很不錯的事，而且 React 的註解寫得很好。

因此，這篇會先帶大家來看這兩個事件的不同，最後再來看 React 裡面怎麼做一些處理。

閱讀更多

前言

在 JavaScript 裡面，有一個令新手十分頭痛，老手也不一定能完全理解的主題：「this 是什麼？」。身為一個以 JavaScript 當作吃飯工具的前端工程師，我也被這個問題困擾了許久。

我原本以為我這輩子都不會寫有關於 this 的文章。

原因有兩個，第一個是講解 this 的文章已經超級無敵多了，而且每一篇都寫得很不錯，之前看完 What’s THIS in JavaScript ? 系列之後覺得講解的很完整，若是沒有把握自己能夠講得更清楚或是以不同的角度切入，似乎就沒必要再寫一篇文章；第二個原因是若是想要「完全」搞懂 this，要付出的成本可能比你想像中要大得多。

閱讀更多

前言

以 CSS 架構方法來說，主流的大概可以分成三個：OOCSS、SMACSS、BEM，這些架構的提出都是為了讓 CSS 更好維護，這幾個的介紹以及差異可以參考 @arvinh 寫過的 淺談 CSS 方法論與 Atomic CSS。

但我們今天要談的不是上面提到的這三種，而是另外一種相較之下沒那麼主流（但好像有慢慢流行的趨勢），而且很少人第一眼看到就會贊同的方法：functional CSS。

閱讀更多

前言

前幾天看見 Redux 作者 Dan Abramov 寫的這篇：Things I Don’t Know as of 2018，看了之後其實滿有感觸的，前些日子也在思考這種跟自信相關的事情，也做了個簡單的總結，寫下了兩年過後，我能夠被稱為資深工程師了嗎？。

無獨有偶地，這幾天也看到一些 2019 年更新版的學習路線圖，下面依舊有些留言在說「怎麼前端要學那麼多東西」、「怎麼學的完」、「前端好難啊」等等之類的，雖然這兩件事看似沒有關連，但我覺得其實是相關的。

閱讀更多