🌗 流體玻璃
➤ 打造令人驚豔的網頁視覺效果
✤ https://chiuhans111.github.io/fluidglass/
這篇文章介紹了一種名為「流體玻璃」的網頁視覺效果，它模仿了真實玻璃的流動和反射特性，為使用者介面帶來了更豐富的互動感與視覺吸引力。作者透過詳細的技術步驟，說明如何運用 CSS 和 JavaScript 實現這種效果，讓網頁設計更具現代感和沉浸感。
+ 這個效果太酷了！完全提升了網頁的質感。
+ 謝謝作者的詳細教學，我終於明白怎麼實現了。
#UIUX #設計 #網頁開發

🌗 竊取 Google 頭像：將 OAuth 提供者的圖片轉存至自家 CDN
➤ 確保使用者信任、統一品牌形象的聰明做法
✤ https://taqib.dev/blog/stealing-from-google/
開發者發現現代網頁框架如 Next.js 和 Astro 在處理外部圖片時，雖然提供自動優化，但也引發了安全疑慮，允許任意外部連結可能耗費額外的計算資源。為瞭解決此問題，作者提出了一種創新的方法：透過伺服器端操作，在使用者註冊時，自動擷取來自 Google 或 GitHub 等 OAuth 提供者的頭像，將其下載並上傳到自家的 Cloudflare R2 儲存桶，再透過自訂網域名稱提供服務。此舉不僅強化了使用者對單一網域的信任，也確保了品牌形象的一致性。
+ 這個方法真是太有創意了！解決了框架的痛點，又提升了使用者體驗。必須立刻試試看！
+ 將外部圖片轉存到自家 CDN 的想法很好，但需要考量儲存空間和頻寬成本，不過為了品牌一致性，這似乎是值得的。
#網頁開發 #OAuth #CDN #Next.js #Astro #Cloudflare R2

🌘 最佳 CSS 單位組合： px 與 rem 的融合運用
➤ 擺脫單位迷思，擁抱 CSS 的彈性與精確
✤ https://www.oddbird.net/2025/09/23/type-units/
本文探討 CSS 單位選擇的迷思，作者 Miriam Suzanne 認為我們不必侷限於 px 或 rem 擇一，而是可以透過 CSS 的比較函數（如 `max()`、`clamp()`、`calc()`）來結合不同單位，例如將 `em` 和 `px` 結合，以更精確地反映開發者的意圖，並同時顧及使用者設定的字體大小與裝置空間。這種「詩意 CSS 架構」強調依情境選擇最能表達意義的單位，進而創造更靈活、可維護的網頁設計。
+ 這篇文章終於讓我明白，原來 CSS 單位並非非此即彼，結合使用能解決我一直以來對字體大小和間距的困擾！
+ 非常實用的觀點！將 px 和 em 結合來處理使用者字體設定，還有用 lh 處理段落間距，太有啟發性了。
#CSS #網頁設計 #響應式佈局 #網頁開發

🌖 GitHub 儲存庫：極簡化漸進式網頁應用程式 (PWA) 的檔案與設定
➤ 打造極簡 PWA 的快速入門指南
✤ https://github.com/chr15m/minimal-pwa
此 GitHub 儲存庫提供了建立漸進式網頁應用程式 (PWA) 的最簡檔案與設定。它包含最小化的 manifest.json 和 service worker 檔案，可在 Chrome 上觸發安裝流程。此外，還提供了一個包含單一 HTML 檔案的更精簡版本，該版本能動態生成 manifest.json，且無需 service worker 即可安裝。
+ 太實用了！我一直在尋找能快速啟動 PWA 項目的方法，這個儲存庫正是我需要的。
+ 對於初學者來說，這個儲存庫的解釋和範例非常清晰，能幫助快速理解 PWA 的核心架構。
#網頁開發 #PWA #GitHub

🌗 告別 Disqus - 令人憎惡的廣告注入
➤ 作者因 Disqus 廣告體驗惡劣而決意棄用
✤ https://ryansouthgate.com/goodbye-disqus/
作者因 Disqus 評論系統在其免費方案中注入令人反感的廣告，決定移除此服務。他解釋了自己長期透過 Pi-hole 和 Wireguard VPN 實現廣告屏蔽的環境，因此在短暫解除屏蔽檢查時，才驚覺 Disqus 廣告的低劣品質與詐騙性質。作者認為這些廣告不僅破壞了部落格簡潔的用戶體驗，更侵犯了使用者隱私。考量到 Disqus 從作者的內容和訪客數據中獲利，作者決定替換 Disqus，並尋求注重隱私或可自行託管的替代方案。
+ Disqus 的廣告確實越來越誇張，幸好我也有用 adblocker，不然真的不知道會看到什麼。
+ 終於有人提到這個問題了！Disqus 的廣告體驗太差了，希望作者能找到一個好的替代方案。
#技術部落格 #網頁開發 #廣告屏蔽

🌘 CSS 規則鎖定特定字元
➤ 解鎖 CSS 的隱藏能力：為個別字元施展獨特樣式
✤ https://shkspr.mobi/blog/2025/09/targetting-specific-characters-with-css-rules/
本篇文章探討如何運用 CSS 的 `unicode-range` 屬性，為網頁上的特定字元套用不同的樣式，藉此達成獨特的視覺效果。作者說明雖然 CSS 本身無法直接鎖定如「E」這類單一字母，但可透過定義包含特定 Unicode 範圍的字型，來改變這些字元的外觀，例如改變字體、顏色或大小，並舉例說明如何讓所有小寫的母音字母呈現不同字體，或讓所有大寫字母呈現彩色像素風格。雖然此方法在樣式變化上有所侷限，主要能調整字體，但藉由 WOFF2 格式的 COLR 表格，也能實現字元的多彩顯示。
+ 太神啦！這根本是 CSS 犯罪的最高境界，完全沒有瑕疵！
+ 非常實用！我過去曾用這技巧來載入特定語言的字型，但從沒想過能用來處理大小寫字母，我得好好研究一下 `size-adjust` 了！
#CSS #網頁開發 #字型排印

🌗 MESH：嘗試HTMX後放棄──模組化伺服器端渲染（SSR）的另一種實現
➤ 放棄HTMX，尋求結構化元件式SSR之路
✤ https://ajmoon.com/posts/mesh-i-tried-htmx-then-ditched-it
作者Alex Moon分享了他對HTMX的嘗試與最終放棄的心得。他認為HTMX雖然引入了HTML Over The Wire的革命性概念，讓開發者能擺脫JavaScript框架的束縛，然而，HTMX在結構和開發者經驗上有所欠缺，容易導致程式碼混亂。為瞭解決這個問題，他提出了MESH框架，一個模組化的伺服器端渲染（SSR）解決方案，結合了HTMX的聲明式特性與Web Components的元件化優勢，實現了「一個元件等於一個端點」的設計理念，並透過Declarative Shadow DOM（DSD）和HTMX的「out-of-band」交換機制，來建構更具結構化且易於維護的現代網頁應用。
+ HTMX的確很有意思，但沒有結構確實是個問題。MESH聽起來像是解決了這個痛
#網頁開發 #HTMX #伺服器端渲染 #元件化 #JavaScript

🌘 透過書籤小工具連結至文字片段
➤ 讓分享網頁上的精確內容變得輕而易舉
✤ https://alexwlchan.net/2025/text-fragments-bookmarklet/
作者介紹了一種透過書籤小工具（bookmarklet）快速產生網頁文字片段連結的方法。雖然瀏覽器已內建類似功能，但作者認為書籤小工具更易於使用，並提供實際的 JavaScript 程式碼，說明如何取得選取的文字並建構出可連結至特定文字的 URL。此工具旨在簡化分享特定網頁內容時，讀者尋找內容的過程。
+ 這個書籤小工具太棒了！我經常需要分享網頁上的特定段落，但手動建構連結很麻煩，這個解決方案正是我需要的。
+ 我之前不知道瀏覽器內建了「複製連結（含醒目標示）」功能，但還是覺得書籤小工具更方便，尤其是在設定鍵盤快速鍵方面。
#網頁開發 #JavaScript #書籤小工具

🌘 這個網站沒有類別
➤ 捨棄類別，擁抱原生標籤與自訂屬性的現代 CSS 實踐
✤ https://aaadaaam.com/notes/no-class/
作者分享了他如何徹底重構個人網站，完全捨棄 CSS 類別（class）的經驗。他透過強化預設元素樣式、大量運用語意化標籤，並結合自訂 HTML 標籤與屬性，達成更簡潔、更易於管理的 CSS 架構。這種方法雖需要更細膩的前期規劃，但能大幅減少 CSS 體積並提升可存取性。
+ 很佩服作者的勇氣，竟然敢徹底移除 class！這種做法對於小型個人專案來說，確實能帶來不少優勢。
+ 雖然聽起來很吸引人，但對於大型團隊或複雜專案，這種方法的可行性與維護性會不會是個大問題？
#網頁開發 #CSS #前端技術

🌘 趣味：製作 90 年代 GIF 動畫馬賽克
➤ 從 GeoCities 的懷舊 GIF 到酷炫的網頁動畫
✤ https://alexplescan.com/posts/2025/09/15/gifs/
作者分享瞭如何利用網頁技術，從網際網路檔案館收集並處理大量 90 年代 GIF 動畫，最終製作成一個在瀏覽器中運行的滾動式馬賽克動畫，並加入 CRT 濾鏡效果。過程中涵蓋了 GIF 的下載、去重複（包括逐位元組和感知哈希比對）、以及過濾不適當內容（利用 NSFW 圖像分類器）。作者強調了整個過程的趣味性和懷舊感，並展示了為現場活動準備視覺效果的技術細節。
+ 這真是太酷了！我喜歡那些老式 GIF，能把它們變成一個動態的馬賽克真是個絕妙的主意。CRT 濾鏡效果更是畫龍點睛！
+ 感謝作者分享這麼詳細的技術細節，尤其是 GIF 去重複和 NSFW 過濾的部分。這對於處理大量圖像數據非常有啟發性。
#網頁開發 #JavaScript #Canvas API #圖像處理 #復古