一些有趣的 CSS 選擇器
本篇大綱：本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。
用 CSS :target 製作頁籤、手風琴功能
本篇大綱：本篇要解決的問題。頁籤 Tab。手風琴 Collapse。本篇算是對 :target 選擇器的小練習，是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能。
用 Microsoft Clarity 網站分析工具，觀察使用者行為
本篇大綱：本篇要解決的問題。安裝 Clarity。Scroll depth 捲動深度。Dead clicks 無回應點擊。Rage clicks 憤怒點擊。JavaScript errors。Quick backs 過快點擊回上頁。基本數據。Recordings。Heatmaps。
如何用 Postman Mock Server 快速建立 API Server
學習如何使用 Postman Mock Server 快速建立 API Server。從建立 Mock Server 到設定回應和新增 API Key，本文提供了詳細的步驟和指南，助你輕鬆模擬 API 伺服器並進行測試。
Word、Excel 合併列印功能使用筆記
本篇大綱：本篇要解決的問題。工程師角度介紹合併列印。製作 Excel 檔。製作 Word。合併列印功能、啟用合併列印、選取收件者、插入合併欄位、完成合併。篩選功能。範例檔案下載。
用 Vue.js 製作圖片版 EDM 生成器
本篇大綱：本篇要解決的問題。預覽、產出的HTML，要分開。用 replace 替代 hack，補上 width、html。檔案包成 zip 的套件：JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔，要刪掉 base64 的開頭。demo 及原始檔下載。
第 100 篇：起點、轉折、then()
賀~本站文章數到達第 100 篇啦~~造訪人次也在這個月破了 10 萬，平日的不重複瀏覽量也破 600 啦~最重要的是，本站終於有了專屬的 Logo！網站跟各社群上都更新了，完完全全是請設計師設計的，不再是素材網上找一找然後拼湊而成。
滿版圖片背景、影音背景
本篇大綱：本篇要解決的問題、滿版背景圖、滿版影音背景。最近遇到頁面的第一屏是滿版影片當背景的設計稿，原本以為只是偶爾有的樣式，後來看到朋友做別的案子時也有一樣的設計，才想把這次寫滿版影片的方式給筆記起來。
TestCafe 學習筆記 – 2：常用設定及功能
本篇大綱：typeText，輸入文字時可帶的參數。比對網址。修改等待時間。螢幕截圖。用瀏覽器的模擬手機功能。取消快取。建立不同會員身份來測試。這篇是 Augustus 翻了一次 TestCafe 的說明文件後，整理出覺得會常用到的部份。
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。
Recent Comments