TestCafe 學習筆記 – 1：自動化測試會員登入
本篇大綱：關於 End-to-End 測試。安裝 TestCafe。撰寫測試檔、Fixtures、Tests。頁面上互動。執行自動化測試。設定排程、機器人通知。程式碼。筆記後心得。選擇使用 TestCafe，主要是因為比較好學，而且 Youtube 上的教學也比較多。
製作 RWD email 工具：MJML，如何使用及注意事項
本篇大綱：本篇要解決的問題。安裝 MJML。開始使用。MJML 程式碼，寬度、CSS、Style、一般的 a 標籤。整理注意事項的原始碼。用完 MJML 這套 RWD email 工具後深深覺得，終於得到一套 +8 精煉的對抗 Outlook 的神器了！
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）
學習如何在 WordPress 上使用原生 JavaScript 製作 FB、LINE 和 Twitter 的社群分享按鈕。本文提供了詳細的步驟指南和完整程式碼，助你輕鬆實現社群分享功能。
用 Google Apps Script 寫一個 LINE 登入功能：下篇 – 三大步驟
本篇大綱：取得 LINE 登入的三大步驟。1 產出一個讓使用者點擊的 LINE 網址。2 拿 LINE 網址回傳的授權碼，調用 API 取得 token。3 拿 token 調用 API 取得使用者的公開資料。三大步驟的完整程式碼。參考資源。
用 Google Apps Script 寫一個 LINE 登入功能：上篇 – 前置作業
本篇大綱：為什麼要 LINE 登入？為了電子報訂閱人數。LINE 登入會拿到的資料。LINE 登入並取得資料的三大步驟。前置作業：3 個必備事物。LINE Login 後台設定部份。
Netlify + GitLab 建一個免費靜態網站
本篇大綱：免費架一個站的工具愈來愈多。開始前需要準備好的。1 註冊 Netlify 帳號。2 連接 GitLab 專案。3 修改子網域名稱。4 自訂域名。
不會寫程式，也能自己架一個免費網站：Publii + GitHub Pages
本篇文章介紹了如何使用 Publii 和 GitHub Pages 來建立一個免費的網站，即使你不會寫程式。文章內容涵蓋了從下載和安裝 Publii，設定基本資訊，到在 GitHub 上建立帳號和取得 token 的步驟。最後，還提供了一些使用 Publii 和 GitHub Pages 的提醒事項。
IntersectionObserver：下篇 – 實際應用 lazyload、進場效果、無限捲動
本篇大綱：使用資源。lazy load 延遲載入（圖片、影片）、一個神奇的狀況（坑？）。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用（以下簡稱IO），本篇來寫三個實際應用。
IntersectionObserver：上篇 – 基本介紹及使用
本篇大綱：IntersectionObserver？拿超商的歡迎光臨來說明。IO 使用 3 步驟：1 建立觀察器（observer）、2 指定觀察器要觀察的獵物（entry）、3 當獵物進入（true） / 離開（false） 觀察器視窗的範圍，觀察器就執行 callback。原始碼。參考資源。
postMessage：主頁、iframe 頁可互相傳值
本篇大綱：前端的一個困擾 管不到 iframe。Google、Facebook 也是這樣傳值的。postMessage 基本使用、傳值、接值。原始碼、Demo。本篇筆記要記錄的就是 A、B 頁面 iframe 的情況下，A 傳給 B，或 B 傳給 A 的問題怎麼解決。
Recent Comments