PWA 學習筆記 – 5：用 Firebase 做 Web Push
本篇大綱：用到的資源二、取得FCM金鑰三、新增manifest.json、firebase config、取得使用者的token、新增sw.js、註冊sw.js、存cookies、存firebase、發送web push、接收web push、補充資源
August
PWA 學習筆記 – 4：manifest.json
本篇大綱：Manifest.json參考資源、manifest.json是做什麼用的？manifest.json成員、關於「chrome主動提示加入主畫面」。manifest.json是在學PWA這塊時最簡單的部份，主要是建一支json檔就可以，相關的參數MDN上或是google一下就會看到。
PWA 學習筆記 – 3：Workbox 參數
本篇大綱：列出workbox可用的參數設定 -1 Route Requests -2 Route Requests + 自訂cache名稱 -3 改成debug模式 -4 cache來自於別的網域時 -5 快取的檔案加入檔案數量、期限的限制 -6 離線時也能向GA發送請求
PWA 學習筆記 – 2：Workbox CLI
本篇大綱：workbox CLI在做些什麼、用workbox CLI建立sw.js -1 安裝workbox CLI -2 存一支sw-config.js檔(看需求可跳過) -3 使用workbox小精靈，生成workbox-config.js檔 -4 用workbox-config.js檔，生出sw.js
PWA 學習筆記-1：Cache、Workbox 基本使用
本篇大綱：前言：PWA會是未來趨勢啊、推薦3篇優質教學文、關於「存到快取(cache)」的就我所知、實作：註冊sw.js、如何查看是否成功註冊、sw.js實作：寫一份sw.js檔、實作：用workbox建立sw.js、實測：頁面載入速度有比較快嗎？
從使用者輸入網址，到瀏覽器呈現出來，經過了哪些過程？
文章中說有資歷的前端在面試時會遇到三個問題，能回答的話offer大概也到手了：1、用戶輸入URL回車之後，瀏覽器到底做了啥？2、頁面渲染的完整流程是怎樣的？3、前端性能優化有哪些經驗？坦白說，因為這三題我完全答不出來，覺得是很勸世的一篇文章啊，就認真的來看。
漸層色按鈕 Hover 效果
本篇大綱：本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時，看見他們頁面上的按鈕，就是非漸色轉到漸層色，並且還能帶有transition的過渡。看了一下他們的寫法，發現原理很簡單，就寫了一個在CodePen上，方便以後取用。
一個簡單的卡片樣式 Simple Card UI
從Google Material Design問世以後，愈來愈多網站設計出了卡片的ui。卡片樣式大同小異，大部份包含：頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片，歡迎大家取用。以下講一下設計上的思考，跟一些最近常用的方法。
Google Material Design 表單標籤效果
自從 Google 設計了 Material Desgin 後，表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇，在註冊的時候，就發現他們的表單就是用了一樣的效果，連 Netflix 都在用了，看來是個好設計，就決定自己來寫一個。
用 Google Cloud Platform / GCP 建 Node.js 網站
本篇大綱：本篇要解決的問題、介紹GCP（Google Cloud Platform）及使用介面、使用GCP App Engine、安裝Google Cloud SDK、app.yaml、Cloud Build API、3個注意事項五、結論及心得
像 Medium 的漸近式圖片加載
本篇大綱：圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入，實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後，頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據，4.57秒，下面這張是用了延遲載入後的數據，降到2.02秒。
Google Analytics 加上 AI
GA大概是全球網站資料分析工具中市佔率最高的，所以AI提出的資訊會是大部份的網站都想知道的，像圖片中出現的Facebook來源狀況，跟網站的忠誠度，光看到標題就想點進去了。點進忠誠度這點，就看見以目前的網站數據，分析為什麼AI會覺得忠誠度降低的原因，並直接搭配圖表來說明。