Front-end

前言

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

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

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

閱讀更多

Back-end

前言

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

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

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

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

閱讀更多

Front-end

前言

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

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

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

但是我錯了。

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

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

閱讀更多

JavaScript

前言

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

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

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

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

Let’s go!

閱讀更多

React

前言

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

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

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

閱讀更多

Front-end

前言

前陣子在 Hacker News 上面看到這篇：Show HN: A CSS Keylogger，大開眼界，決定要找個時間好好來研究一下，並且寫一篇文章分享給大家。

這篇會講到以下東西：

  1. 什麼是 keylogger
  2. CSS keylogger 的原理
  3. CSS keylogger 與 React
  4. 防禦方法

好，那就讓我們開始吧！

閱讀更多

React

前陣子正在重構公司的專案，試了一些東西之後發現自己對於 React 的渲染機制其實不太了解，不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣，其實還有滿多人對這整個機制不太熟悉，因此決定寫這篇來分享自己的心得。

其實不知道怎麼優化倒還好，更慘的事情是你自以為在優化，其實卻在拖慢效能，而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了！這個就嚴重了。

因此，這篇文章會涵蓋到下面幾個主題：

  1. Component 跟 PureComponent 的差異
  2. shouldComponentUpdate 的作用
  3. React 的渲染機制
  4. 為什麼要用 Immutable data structures

為了判別你到底對以上這些理解多少，我們馬上進行幾個小測驗！有些有陷阱，請睜大眼睛看清楚啦！

閱讀更多

Front-end

前言

關注 RxJS 已經好一段時間了，最早知道這個東西是因為 redux-observable，是一個 redux 的 middleware，Netflix 利用它來解決複雜的非同步相關問題，那時候我連redux-saga都還沒搞懂，沒想到就又有新的東西出來了。

半年前花了一些時間，找了很多網路上的資料，試圖想要搞懂這整個東西。可是對我來說，很多教學的步調都太快了，不然就是講得太仔細，反而讓初學者無所適從。

這次有機會在公司的新專案裡面嘗試導入redux-observable，身為提倡要導入的人，勢必要對這東西有一定的瞭解。秉持著這個想法，上週認真花了點時間再次把相關資源都研究了一下，漸漸整理出一套「我覺得應該可以把 RxJS 講得更好懂」的方法，在這邊跟大家分享一下。

在開始之前，要先大力稱讚去年 iT 邦幫忙鐵人賽的 Web 組冠軍：30 天精通 RxJS，這系列文章寫得很完整，感受得出來作者下了很多功夫在這上面。看完這篇之後如果對更多應用有興趣的，可以去把這系列的文章讀完。

好，那就讓我們開始吧！

閱讀更多