Posts

緣起 由於最近碰到要在負責的網頁式聊天機器人中，新增如同Line聊天室的貼圖功能，可想而知會有大量的貼圖圖片會需要在用戶裝置瀏覽器進行下載，不管是對圖片伺服器或是用戶等待的過程來說都是不小的負擔。 為了解決這個問題，透過使用了 PWA (Progressive Web App) 技術中常用的離線儲存方案 indexedDB 來快取貼圖圖片，不僅減少用戶端與網站伺服器端的連線流量，也提升的用戶體驗(UX: User Experience) 。 Service Worker Service Worker是一個事件驅動的網站 Worker，根據不同的來源 (origin) 與網址路徑 (path) 進行註冊後，之後再次訪問同一網站後即會在背景執行這個 Service Worker。 Service Worker 無法直接存取 DOM 物件，他負責監聽和處理像是 fetch, notification(推播), sync 還有 Service Worker 註冊、啟動 等相關事件。 透過處理上述事件，我們可以讓 web 網頁像一般的手機原生 App 一樣可以執行安裝、發送推播、離線瀏覽及連線後同步等等作業。 離線儲存 常見的 Ｗeb 儲存方案有下面幾種: Cookie LocalStorage Cache (precache) indexedDB 一般 SPA (Single Page Application) 中比較常用的是 Cookie 跟 LocalStorage 兩種儲存方法，不過在使用上都會有大小的限制（無法儲存較大的網站資源），像是 LocalStorage 的限制依照瀏覽器不同會落在大約 2MB ~ 10MB 左右，超過後就會發出Error。 而在 PWA 的離線儲存上通常會使用 Cache(precache) 或 indexedDB 來實作，它們的大小通常跟使用者裝置的 disk 空間有關係，以 Chrome 為例，所有網站可以用的共享儲存空間為硬碟可用空間的1/3, 每個網站 App 可以使用共享空間中的 20%。...

這陣子在研究自行建設 Postfix Mail Server，發現要架設一個 Mail Server 沒有想像中的容易，除了需要透過 DNS 記錄設定網域的 A 記錄、 MX 記錄之外，另外需要 DNS 設定 SPF, DKIM, DMARC 等安全性設定。 在設定的過程中很快的遇到了瓶頸，一般的網域服務諸如 HiDomain、GoDaddy 等平台都有代管 DNS 記錄的上限，像我使用的 HiDomain 就有最多設定 20 筆記錄的上限，因為在不同專案已經註冊了許多子網域，這次要架設一個 Mail Server 時我很快就碰到了 DNS 記錄的代管上限，後來決定使用在 Kubernetes (k8s) 中經常使用的輕量 DNS Server CoreDNS 來自建 DNS Server。 關於 CoreDNS CoreDNS 是雲原生運算基金會 (Cloud Native Computing Foundation, 簡稱 CNCF)的一項專案，並於 2019 年畢業。 CoreDNS 主要使用 Go 語言實做，所以可以安裝於不同平台並且相當輕量不會佔用太多系統的資源，同時在設定上非常簡單，透過使用 corefile ，可以很簡單的引入各種 plugin，很大程度地減少設定上的複雜度，接下來就實際進入安裝與使用的介紹。 安裝 CoreDNS 官網上提供了三種安裝方式， Binaries 、 Source 及 Docker。 Binaries 是已經預先編譯好的可執行檔，可以透過官方的連結去下載使用。...

前端專案時常需要進行主題(Theme)切換，比方說現在最常見的 light/dark mode 主題切換。 本文將介紹如何透過 CSS Variables (或 CSS Custom Properties) 及 HTML root element 上的屬性控制前端網頁的主題切換。 CSS Variables (或 CSS Custom Properties)是 CSS3 的新功能，讓您可以不用透過SASS、SCSS等預處理語言即可在原生 CSS 語法中使用變數，讓 CSS 語法也可以達到 Clean Code。 1 2 3 4 5 6 7 8 9 10 11 :root { --primary-color: blue; } p { color: var(--primary-color); } h1 { color: var(--primary-color); } ▲範例：透過 CSS Variable 指定主題色彩的顏色 上面是一個簡單的範例，透過一個 –primary-color 的變數指定主題色彩，並套用到網頁中不同元的的樣式之中，未來要修改主題色時，只需要更新該變數，就可以一次性切換頁面中元件(如範例中的 與 標籤)的主題色，而不用一項一項的修改 CSS 樣式。 Theme 主題切換 從前面的說明中可以得知，宣告 Theme 相關的 CSS Variables 時通常會將變數的定義寫在 :root 的區塊中讓全域的 element 元件都可以取用，這意思就是說 CSS 變數需要定義在 document....