把 Angular SSR 應用部屬到 Firebase
前言繼上次玩了一下 SSR Hydration 之後，這次直接體驗用 Firebase 來發布 Angular SSR 的應用，並把過程記錄下來。這次的實驗是使用 Firebase 的 Functions 來部屬 SSR 應用，以及使用 Firebase Hosting 來部屬靜態檔案。概念上就是 Hosting 的首頁直接導向 Server 的 API 來取得 SSR 的 HTML 字串，然後 Client 端再進行 Hydration 以此初始化 Angular 應用。先看 Lighthouse 測一下跑分的結果: Ng build 之前的準備我直接基於之前的 TodoMVC2023 專案來實驗，在執行指令之前，我們需要做一下檔案的調整。 修改 angular.json 的 build outputPa..
Read more
使用原生 HTML Dialog
關於 Modal 與 Dialog在今日的網站開發上，使用彈窗式的介面來呈現資訊只要是接觸過網站開發的人應該都不陌生，而在過去我們對於彈窗式介面的實現方式，通常是透過 JavaScript 控制 class 來達成，但這樣的方式在維護上會有一些問題，例如：對於 Modal 或 Dialog 的顯示位置我們都需要另外寫一份 CSS 去設計，需要使用 .open 之類的 CSS class 來控制開關，或者需要額外的元素實現 Modal 的背景，而這樣的實現成本比較高，而且也不易維護。而在 HTML5 中，我們可以透過 dialog 標籤來實現彈窗式介面，這樣的實現方式不僅簡單，而且也不需要透過 JS 來控制 CSS Class，接下來就讓我們來看看如何使用 dialog element。
Read more
關於 Angular SSR 與 Hydration
什麼是 SSR ?SSR 的全名是 Server-Side Rendering，是一種網頁開發技術。它指的是在 server 端將網頁應用程式的原始碼轉換成 HTML 字串，然後將這些 HTML 發送到 client 端。當 client 端收到預先渲染的 HTML 時，它可以立即在瀏覽器上顯示，而無需等待 JavaScript 加載和執行。這樣可以提高網站的首次加載速度，改善搜尋引擎的索引效果，以及提供更好的使用者體驗。 什麼是 Hydration ?Hydration 是指 client 端將 server 端回傳的 HTML 字串轉換成具有 Angular 功能的實時應用。在這個過程中，Angular 會將預先渲染的 HTML 中的靜態內容與 Angular 的動態功能結合起來，並綁定事件，讓使用者..
Read more
使用 Angular Standalone Component 簡化開發
在 Angular 14 新增了 Standalone Component 的功能，以往我們新增的 Component、Directive 以及 Pipe 可以不需要透過 NgModule 來管理元件，同時也能簡化使用 Angular 開發應用的體驗。現有應用可以選擇性逐步採用新的獨立樣式，而無需進行任何重大更改。 如何使用 Standalone Component建立 Standalone Component語法相當簡單，只需要在 ng generate 指令後面加上 --standalone 即可： ng generate component <component-name> --standalone Component 轉換成 Standalone Component如果要在既有的 Co..
Read more
原子化 CSS 學習筆記
原子化原子化是指將事物拆分成最小、最基本的單位，就像原子一樣。這種方法強調把各個元件或功能分解為更細緻、可重複使用的部分，以便在不同的場景下靈活應用。原子化設計理念的出現，為設計師和開發者帶來了新的思考方式，讓他們能更有效率的設計與開發。 關於原子化 CSS單論原子化設計本身是一個概念，這個概念適用於很多事物上，而原子化 CSS 是基於原子化設計概念而提出的一種 CSS 編寫方法，它傾向於小巧且用途單一的 class，並且會以視覺效果進行命名。 撰寫風格與命名規範可能衍生的問題OOCSS、SMACSS、BEM、ITCSS 等這些撰寫風格和命名規範在網頁開發領域相當常見。其主要目的是通過組件名稱或狀態描述 class，並給予多個 CSS 屬性配置，以提高可維護性和重用性。然而，在實際應用中，這些方法可能會遇..
Read more