#網頁設計

這篇寫給前端工程師的字體指南，從最基本的字體種類、CJK 差異、授權地雷，到可閱讀性與缺字陷阱，帶你一次搞懂網頁字體的眉角，避免讓你的 UI 看起來像缺字的抖音字幕那樣亂七八糟。

勝勝教你怎麼用簡單影像處理搭配 OCR 自動破解 NCC 網站的驗證碼，定期監控 Apple 大 HomePod 是否通過審核，還有政府開放資料與 Telegram 機器人通知教學。

教你如何在網頁上放透明影片，說明 Chrome、Firefox、Safari 支援的影片格式差異，並示範如何用 After Effects、ffmpeg、Compressor 輸出帶透明通道的 WebM 與 HEVC 影片。

純前端用 Media Source Extensions 拼接 MP4 影片超麻煩，需用 ffmpeg 加特定參數才能正常播放，解決影片間隙問題。

Chrome 79 開始支援 PWA 遮罩圖示，讓應用程式圖示能更好地適配 Android 手機的安全區域。本文教你如何製作遮罩圖示並修改 manifest.json，輕鬆實現適合各種螢幕形狀的漂亮圖示，還附上實機截圖示範效果。

用 JavaScript 偵測系統深色模式偏好，動態切換網站主題。

介紹如何在前端使用 reCAPTCHA v3，省去傳統驗證核取方塊，並示範如何註冊金鑰、在前端頁面加入 reCAPTCHA 程式碼，以及如何在 Node.js 後端用 request-promise 驗證 token。

介紹 YouTube 字幕格式 webVTT，並示範用 youtube-dl 下載字幕後，修改時間軸標記中的 align、size、position 屬性調整字幕位置與大小，還附上 W3C 官方規範與實用教學連結。

分享使用 node-sass-middleware 時遇到的坑，原來預設只支援 .scss，若想用 .sass 副檔名必須額外設定 indentedSyntax: true，才能正常編譯。