TestCafe學習筆記-1：自動化測試會員登入
本篇大綱：關於 End-to-End 測試。安裝 TestCafe。撰寫測試檔、Fixtures、Tests。頁面上互動。執行自動化測試。設定排程、機器人通知。程式碼。筆記後心得。選擇使用 TestCafe，主要是因為比較好學，而且 Youtube 上的教學也比較多。
Front-End
製作RWD email 工具：MJML，如何使用及注意事項
本篇大綱：本篇要解決的問題。安裝 MJML。開始使用。MJML 程式碼，寬度、CSS、Style、一般的 a 標籤。整理注意事項的原始碼。用完 MJML 這套 RWD email 工具後深深覺得，終於得到一套 +8 精煉的對抗 Outlook 的神器了！
GitLab Pages，3+2個步驟讓GitLab專案產生靜態頁
本篇大綱：GitLab生成靜態頁，私人專案也行。1 要生成靜態頁的檔案都放進「public」資料夾內。2 建立.gitlab-ci.yaml的檔案3 專案push到GitLab上。+1 等gitlab pipelines顯示狀態為「passed」。+2 輸入GitLab Pages產生靜態頁後的網址。
WebSocket 基本介紹及使用筆記
本篇大綱：WebSocket前端得懂一點。WebSocket重點心智圖。用 Node.js 建一個簡單的 WebSocket Server。前端連結WebSocket。1 建立WebSocket、2 監聽WebSocket事件、3 client端發訊息給WS Server。
Auth0 Universal Login，做一個自己的會員註冊、登入功能
本篇大綱：Auth0 Universal Login步驟。註冊Auth0，設定基本資訊。取得domain、client ID。設定 Login box的樣式。引用createAuth0Client。取得Auth0 config。判斷是否登入，登入就取得資訊。加入LINE登入。Auth0後台看會員狀況
用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)
本篇大綱：外掛有好也有壞，決定自己寫。1 取得分享按鈕的HTML：FB、LINE、Twitter。2 頁面上額外載入JS檔。3 抓每一頁的網址。4 頁面上嵌入HTML。5 設計按鈕樣式。6 原始碼要放哪。完整程式碼。
用Google Apps Script寫一個LINE登入功能：下篇 – 三大步驟
本篇大綱：取得LINE登入的三大步驟。1 產出一個讓使用者點擊的LINE網址。2 拿LINE網址回傳的授權碼，呼API取得token。3 拿token呼API取得使用者的公開資料。三大步驟的完整程式碼。參考資源。上篇的「前置作業」都設定完後，本篇要進入程式碼的部份了，程式碼主要是呼API來取得token跟資料。
用Google Apps Script寫一個LINE登入功能：上篇 – 前置作業
本篇大綱：為什麼要LINE登入？為了電子報訂閱人數。LINE登入會拿到的資料。LINE登入並取得資料的三大步驟。前置作業：3個必備事物。LINE Login後台設定部份。如果常來Let’s Write的朋友，又是眼尖的朋友，會發現本站訂閱電子報換成掃QR code的方式啦~
Netlify+Gitlab 建一個免費靜態網站
本篇大綱：免費架一個站的工具愈來愈多。開始前需要準備好的。1 註冊Netlify帳號。2 連接Gitlab專案。3 修改子網域名稱。4 自訂域名。本篇要筆記的是免費架站工具：Netlify。它可以直接抓Github、Gitlab裡的專案，想更新時只要push專案就行，而且還可以自訂網域。
不會寫程式，也能自己架一個免費網站：Publii + Github pages
本篇大綱：有時候，我們只是想要有一個簡單的網站，而且免費。下載、安裝Publii。Publii基本設定。建立Github帳號，取得token。填上取得的4個值到Publii，然後同步。最後幾個提醒事項。寫這篇，主要是寫給不會寫程式，或是自己就是工程師，但都想要有一個自己的網站。
IntersectionObserver：下篇-實際應用 lazyload、進場效果、無限捲動
本篇大綱：使用資源。lazy load 延遲載入（圖片、影片）、一個神奇的狀況（坑？）。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用（以下簡稱IO），本篇來寫三個實際應用。本篇的無限滾動，是像FB那樣子，頁面每捲到底，就會多載入一張卡片進來。
IntersectionObserver：上篇-基本介紹及使用
本篇大綱：IntersectionObserver？拿超商的歡迎光臨來說明。IO使用3步驟：1 建立觀察器（observer）、2 指定觀察器要觀察的獵物（entry）、3 當獵物 進入（true） / 離開（false） 觀察器視窗的範圍，觀察器就執行callback。原始碼。參考資源。