前言

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

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

閱讀更多

前言

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

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

閱讀更多

前言

在兩年前我寫了這篇一個資淺工程師年末的自我省視，內文主要是檢視自己那年學到的東西以及抒發心得感想，並提出一些對於自己職涯發展上的疑問。

標題之所以是打「資淺」工程師，是因為那時覺得連資深的邊都沾不上，所以用了資淺這個字來形容自己。

兩年過去了，職稱從工程師變成資深工程師，甚至還再往上變成了 Front-end Team Lead。雖然職稱本來就不代表一切，但我認為它至少「代表著什麼」，你到了那個位子就必須負起責任，如果覺得自己能力未及，就必須盡力去追趕，直到自己能擔起那個責任為止。

這篇會先回顧我這兩年來的發展，最後再分享一些自己的心得感想。

在這之前一樣先預祝各位讀者新年快樂！

閱讀更多

前言

請先原諒我用了一個比較聳動的標題，因為實在是想不到還有什麼標題好下，最後選擇了一個可能比較有爭議的標題，但能利用這樣的標題激起討論也是滿有趣的，何況我說這話也是有根據的。

在觀看此篇文章之前請先看過上一篇：我知道你懂 hoisting，可是你了解到多深？，因為文章內容有部分相關，所以必須先有 Execution Context 以及 Variable Object 的觀念以後，才能夠吸收這篇文章的東西。

如果你只對文章標題的那句：「所有的函式都是閉包」有興趣，那可以直接往下拉，因為要講閉包就必須先從作用域開始講起，所以這篇文章按照慣例不會太短，前面也會有一定程度的鋪陳。

好，讓我們從作用域開始吧。

閱讀更多

前言

2021-06-09 補充：

感謝讀者 blackr1234 留言，此文章為 2018 年 11 月發表，底下程式碼輸出結果大概是以 Node.js v8.17.0 為準，因此對於一些狀況的輸出可能會跟現在不太一樣。例如說存取宣告前的 let 變數，當初的結果為：ReferenceError: a is not defined，現在用 Node.js v14 的結果則是：ReferenceError: Cannot access 'a' before initialization。

這陣子我在忙一些教學相關的東西，稍微準備一些資料之後教了學生們 JavaScript 裡面的 hoisting，也就是「提升」這個觀念，例如說以下程式碼：

console.log(a)
var a = 10

會輸出undefined而不是ReferenceError: a is not defined，這種現象就叫做 Hoisting，變數的宣告被「提升」到最上面去了。

如果你只想了解最基本的 hoisting，其實差不多就是這樣，但後來我還教了let跟const相關的一些知識，不過前一天剛教學完，隔天就立刻看到相關的技術文章還發現自己教錯，因此特別花了一點時間打算好好理解 hoisting 這個東西。

很多東西沒有深入研究的時候你都會覺得沒什麼，真的跳下去深入去看才會發現自己其實還有一大堆概念沒有搞懂。

有很多人都知道 hoisting，但是理解程度卻不盡相同，我列出了 10 個項目，如果有任何一點你剛好不知道的話，那恭喜，這篇文章應該可以為你帶來一些收穫。

1. 你知道什麼是 hoisting
2. 你知道 hoisting 只會提升宣告而非賦值
3. 你知道 function 宣告、function 的參數以及一般變數宣告同時出現時的提升優先順序
4. 你知道 let 跟 const 沒有 hoisting
5. 你知道第四點是錯的，其實有但只是表現形式不一樣
6. 你知道有關第五點，有個概念叫做 TDZ（Temporal Dead Zone）
7. 你看過 ES3 的規格書，知道裡面是怎麼描述的
8. 你看過 ES6 的規格書，知道裡面是怎麼描述的
9. 你知道 hoisting 背後的原理是什麼
10. 你看過 V8 編譯出來的程式碼

你可能會問說：「我為什麼要知道的這麼深？有什麼用？」，其實我也覺得對 hoisting，只要知道基本的就行了。只要你有好好地宣告變數，就算不知道那些，對日常生活或是工作也不會有太大的影響。

可是假如你像我一樣，想要有朝一日在自己的履歷上面放上「精通 JavaScript」的話，那對這些東西就不能逃避。同時你如果對底層的這些細節愈熟悉，會碰到的問題就愈少，也愈能理解為什麼會有 hoisting 的出現，當你想要在技術這條路上走得更遠爬得更高時，我覺得這些細節是很重要的。

接下來，我們就一步步來看 hoisting 吧！

閱讀更多

前言

前些日子在忙公司的產品改版，從原本的 PHP 換成後端 Go + 前端 React SPA，分成桌面版跟手機版兩個不同的 Project，而既然都改版了，自然要把最新最潮的 PWA 也放在目標裡面，之前耳聞 PWA 很久但卻沒有實作過的我也有了機會來嘗試這個東西。

如今產品已經改版完畢且上線了兩三個月，慢慢穩定下來，在優化 PWA 的過程中也讓我有了一些心得可以讓大家分享。

在舉一些實際案例之前，先讓我們來談談到底怎樣才算是 PWA。

閱讀更多

前言

這一年間我利用閒暇之餘嘗試進行了幾場教學實驗，希望能透過持續的教學改進自己的教材，從學生的反饋當中得到一些心得。

而在進行這些教學實驗的時候，我常常在想可以透過哪些現成的服務減少我的負擔，畢竟身為工程師嘛，很想把一些瑣碎的事務自動化，長期下來可以節省的時間是很可觀的。

半年前有了第一次嘗試，也在這邊分享了心得：利用 Github Classroom 加 Travis CI 打造改作業系統，有了自動改作業系統以後，確實省下不少麻煩。

這次要來分享的是兩週前用大概一兩天的時間快速實作出來的自動化簽到系統。

閱讀更多

前言

CORS（Cross-Origin Resource Sharing，跨來源資源共享）在前端一直是個很經典的問題，簡單來說就是因為瀏覽器的一些安全考量，你在載入其他網域的資源時會受到一些限制，解決方法也很簡單，就是在 Server 那邊加上一些 response header 例如說 Access-Control-Allow-Origin，有了這個 header 之後瀏覽器就會認為你是有經過驗證的，就沒什麼問題了。

針對這個問題，我以前也有寫過一篇：輕鬆理解 Ajax 與跨來源請求，裡面把碰到的問題與解法寫得十分詳細。

我以為自從我上次深入研究過這個問題之後，從此以後 CORS 再也難不倒我，再也不會看到 console 跳出禁止跨來源存取的錯誤。

但是我錯了。

這次我在一個特定的使用場景之下摔了一跤，但也因此學到不少。而這次的經驗也讓我想起我以前寫的：我遇過的最難的 Cookie 問題。

太好了，又有東西可以跟大家分享了！

閱讀更多

前言

其實這週原本是要來寫淺拷貝跟深拷貝的差異以及實作，但在找資料的時候無意間又看到 call by value 與 call by reference 相關的文章，越研究發現越有趣。原本以為自己已經搞懂了這個問題，但沒想到看的資料越多，卻把自己弄的越糊塗。

要寫這篇文章其實有兩個不同的方式，一個是詳實記錄我研究這個問題的過程以及心中的疑惑，以及最後如何得到解答，簡單來說就是按照時間軸來寫；另外一個是當我研究完以後，再重新以自己的方式整理，並且用更簡單易懂的方式來表達。

以往我的文章大多數都走第二種路線，重新歸納整理過後再寫出一篇相對上更容易理解的文章，用我的方式帶著大家一步步跟著我的脈絡去探討問題最後得出解答。

但這次我想嘗試第一種，帶大家看看我平常寫文章的時候都看了哪些資料，以及發想的過程為何，這樣應該也滿有趣的。

Let’s go!

閱讀更多

前言

雖然說從以前就一直聽到 React 要把內部的 reconciler 換成一個叫做 Fiber 的東西，但從沒仔細研究過，也不知道這樣子的改變會對上層造成什麼影響。

真正開始比較深入理解，是在某一次使用 Redux Form 時踩到一個相關的 bug，才知道 React 自從正式改用 Fiber 之後，其實對上層也有一些改變。

這篇的標題「淺談」不是騙你的，這篇真的很淺，我不會談到 Fiber 底層的運作（因為我也還沒認真研究過），只會用白話文跟你說 Fiber 大概是怎樣，是為了解決什麼樣子的問題而誕生。

閱讀更多