前端工程 – Larry的午茶時光 https://blog.yuyansoftware.com.tw Mon, 14 Apr 2025 03:55:29 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.9.4 https://blog.yuyansoftware.com.tw/wp-content/uploads/2022/10/favicon-45x45.png 前端工程 – Larry的午茶時光 https://blog.yuyansoftware.com.tw 32 32 JavaScript ES6 的模組化功能：import, export。建置前端時 require 與 import 有何不同？ https://blog.yuyansoftware.com.tw/2023/09/javascript-export-import-require/ Sun, 17 Sep 2023 03:08:41 +0000 https://blog.yuyansoftware.com.tw/?p=16865 這篇文章我們來聊一個不新，但重要的議題：JavaScript 的模組化。

其實 JavaScript 早期只是一個腳本式語言，做做 HTML DOM 的簡單變化而已。也許直接寫在 HTML 裡，也許引用幾支 JS 檔，這樣而已。

2010 年 AngularJS 問世，開啟了 201x 年前端工程的飛速成長，包含各種前端框架的興起，與 Single Page Application (單頁式網站)。AngularJS 後來變成了 Angular，加上 React、Vue.js，這三大家前端框架維持了好一段時間。

延伸閱讀，後來 Laravel 預設的前端框架從 Vue.js 改為使用 Alpine.js (我的文章)

2015年，JavaScript ECMAScript 2015 發布，也稱為 ES6。為什麼是 6 這個數字？是 JavaScript 這個語言的第 6 版。也就是從 ES6 開始，JavaScript 導入了模組化的概念以及語法。

ES6 的 import、export

基本上一個 JS 檔案就是一個模組，用 export 語法，將你想要輸出的變數、函式、物件、類別，都可以輸出。例如

export const your_var = 'test';

export function your_func() {
    // …
}

假設上面檔案叫 your_module.js。你可以在 HTML 裡直接輸入 JS 模組，注意一定要寫 type="module"，且 import 的後方是大括號

<script type="module">
    import { your_var, your_func, your_object, your_class } from './your_module.js';

    // 就可以使用 your_var, your_func …
</script>

或是在另一支 JS (假設名稱是 abc.js) 裡面 import，HTML 直接引用 abc.js，注意一樣要寫 type="module"。也就是 your_module.js 的變數輸入到 abc.js，並在 abc.js 執行

<script type="module" src="./abc.js"></script>

輸出或輸入都可以改變數名稱

在輸出時可以改變數名稱

export { your_var as new_name, your_function as new_func };

當然，輸入時就要用新名稱輸入。

輸入時也可以改名

import { your_var as new_name } from "./your_module.js";

這樣在輸入模組就是用新名稱。

還有一種寫法也滿常見的，把整個模組輸入

import * as your_module from './your_module.js';

your_module.func_a();  // 在 your_module.js, func_a 要 named export

named 與 default export / import

以上的 export / import 範例是 named export / import (具名輸出/輸入)，還有一種是 default export / import。例如

// 輸出
export default your_var;
// 輸入
import new_name from './your_module.js';

default export 最重要的就是在輸出模組「只能出現一次」。在輸入模組則是任意取名去接。

這樣就是一個最簡單的 export / import 架構了。完整的 export / import 寫法還有很多變形，可以參考 MDN 的 export 語法文件、import 語法文件

CommonJS 的 require

目前大部分網站，都是在 Node.js 開發環境 build 前端。常常會看到一個 JS 關鍵字 require('...')

require 來自於 CommonJS，始於開發者的獨立專案。後來 Node.js 用 CommonJS 實作，也採用了 require，直至今日。但必須說明，require 並非 JavaScript ES6 的原生規格。

require 的參數常常是「不加」檔名，為什麼？例如

require(‘./your_your_module’);

依照 Node.js 官方文件，Node.js 會先找 .js、.json、.node。如果你要輸入的不是這3個副檔名，require 參數就要寫檔名全稱 (包含副檔名)。

require 參數也可以填入 package.json 中列出的套件名稱，這樣 Node.js 就會知道要輸入的檔案路徑 (通常是在 node_modules 資料夾底下)。

建置前端時 require 與 import 的不同

我們以 Laravel 舉例。基本上 Laravel 是用 require，因為 Laravel 前端建置基底是 Node.js，用的是 CommonJS module system。當然，Node.js 稍作調整可以支援 ES6 module system，不在這裡討論。

如果你有 local module (非 Node.js 核心，非 npm 安裝，開發者自己擺在專案的 js 檔案)，require 跟 import 都可以。

這邊要說明一下，不管是 require 或 import，一般情形只是「執行」該 js 檔案。在建置前端時，是將輸入的模組一起 compile 起來。

結語

本篇回顧了一下 JavaScript ES6 的 import / export，也藉這個機會比較了 Node.js 建置前端時用的 require。

本篇重點並「不在」比較 CommonJS 與 ES6 module system，兩者寫法不同，規格也不同。例如，require 輸入的是整個模組，import 可以輸入一個模組中部分的變數、函式、物件、類別。

import / export 與 require 不是新題目，但卻是現代前端技術很重要的模組化功能。很多前端建置工具是基於 Node.js (例如 Laravel)，require 與 import 也大量被使用，很值得再回顧一下。

]]> Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式 https://blog.yuyansoftware.com.tw/2023/06/bootstrap-5-3-features/ Wed, 28 Jun 2023 09:40:44 +0000 https://blog.yuyansoftware.com.tw/?p=15730 https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/
前幾個星期 (2023/5/30) Bootstrap 5.3 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2023年6月。可以看到每一個 minor version 的更新，就是半年～1年；major version 的更新，是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了，時間真的過得太快。

以下是 Bootstrap 5.3 的主要更新：

深色模式 Dark mode，自訂新的 color mode

Bootstrap 核心已經重新設計，以支援 Dark mode。並新增了關於 Color Mode 的文件 (5.2 沒有)
https://getbootstrap.com/docs/5.3/customize/color-modes/

Bootstrap 5.3 不但支援 Dark mode，也允許開發者設計自己的 color mode。語法上，在一開始的 html tag 下 data-bs-theme，例如

<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

你也可以在特定的元件下 color mode，例如 dropdown menu

<div class="dropdown" data-bs-theme="dark">
  <!-- ... -->
</div>

這樣無論上方 html tag 的 color mode，你的 dropdown menu 就會切換成 Dark mode。

當然，如果你想要本來「亮底」的樣式，設定 data-bs-theme="light"，或是將來你自己客製的樣式。

Light / Dark mode 都定義在 scss/_root.scss，包含如果你將來要新增自己的 color mode，也是定義在這支檔案。

目前 scss/_root.scss 定義的是 CSS 變數，你也可以在其中指定特定元件的樣式。例如

@include color-mode(dark) {
  ...
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
  ...
}

另外，如果你重設這個 SCSS 變數

$color-mode-type: media-query; // default 是 "data"

上面那段 SCSS 會編譯成

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

這樣就不是 data-bs-theme 設定 scope 的概念，而是 media query prefers-color-scheme，隨使用者作業系統調整亮/暗模式。

有一些 Dark mode 的 CSS 變數是定義在 scss/_variables-dark.scss。當然，你可以修改再重新編譯。如果你要新增 color mode，官方文件也建議新增新的 scss 檔案，例如 scss/_variables-blue.scss。

scss/_variables-dark.scss 中大量的使用 Bootstrap 內建的 SCSS function shade-color()、tint-color()，也就是拿原始的調色盤色票去做深淺變化。如果你要整個換色系的話，修改原始色票再重新編譯，scss/_variables-dark.scss 這支檔案就會自動幫你做深淺變化了。

翻新調色盤色票 Color Palette

文件也做大幅更新，第一節 Colors 是 5.3 新增的。
https://getbootstrap.com/docs/5.3/customize/color/

新增 secondary、tertiary 兩個色票。舉例來說，Bootstrap 5.3 Light mode 中這幾個變數 (數值是 Bootstrap 5.3 定義的，之後版本不一定會改)

--bs-body-color-rgb: 33,37,41;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-tertiary-color: rgba(33, 37, 41, 0.5);

因為是 Light mode，背景是白的，隨著 alpha 值越透明，tertiary 文字顏色最淡。

Bootstrap 5.3 Dark mode 中這幾個變數的數值

--bs-body-color-rgb: 173,181,189;
--bs-secondary-color: rgba(173, 181, 189, 0.75);
--bs-tertiary-color: rgba(173, 181, 189, 0.5);

因為是 Dark mode，背景是黑的，隨著 alpha 值越透明，也就是 tertiary 文字顏色最深。

進一步說明，以目前 (2023年6月) Bootstrap 官網文件來說，如果是 Dark mode，一般文字顏色就是 --bs-body-color，secondary / tertiary 多了兩個不同灰階 (顏色更深) 的選擇。

.bg-body-secondary、.bg-body-tertiary 就不是深淺灰階的概念，是由 Bootstrap 直接定義值，用來搭配 --bs-secondary-color、--bs-tertiary-color 的顏色。 

另外還新增 {color}-bg-subtle、{color}-border-subtle、{color}-text-emphasis 這幾個顏色。

subtle 這邊指的是暗的、淡的。比如說 .bg-success 是軟體操作成功的綠色，.bg-success-subtle 在 Light mode 就是淡綠色，在 Dark mode 就是墨綠色。

https://getbootstrap.com/docs/5.3/customize/color/
文件也列出 Bootstrap 所有可用的色票，包含紅橙黃綠藍靛紫，以及各自的灰階，如果要很快的找一個色票使用，可以參考這裡。

新的 Link 連結樣式

新的 Link 文件 (Bootstrap 5.2 沒有)，包含透明度 opacity，底線 underline 等樣式。
https://getbootstrap.com/docs/5.3/utilities/link/

新的 Icon Link 文件 (Bootstrap 5.2 沒有)
https://getbootstrap.com/docs/5.3/helpers/icon-link/

可以輕易的在連結的前或後，加上小圖。如果再加上 css .icon-link-hover，滑鼠 hover 時小圖會有小動畫。

<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg>...</svg>
</a>

新的 css .focus-ring，讓元件在 :focus 狀態下，不要顯示預設的 outline，而是變成 box-shadow，這樣可以更好的讓開發者客製化。

.focus-ring 也是 Bootstrap 5.3 的新文件
https://getbootstrap.com/docs/5.3/helpers/focus-ring/

總結

這次 Bootstrap 5.3 更新主要是在深色模式 Dark mode，還有各種色系、色票的更新，並沒有大的架構或排版上的更新。

Dark mode 的確是近幾年的 CSS 主題：Windows / Mac / Android / iPhone / iPad 作業系統都支援 Dark mode，當然細緻一點的 web app，應該也要支援 Dark mode。

調色盤色票的更新，則是讓我們再 review 一次，未來可不可用 Bootstrap 內建的色票架構。

]]> LINE LIFF (LINE Frontend Framework) 前端框架，如何理解、設定與使用 LIFF app https://blog.yuyansoftware.com.tw/2023/06/liff-app-line-frontend-framework/ Sat, 03 Jun 2023 13:01:27 +0000 https://blog.yuyansoftware.com.tw/?p=15238 圖片來源 https://developers.line.biz/en/docs/liff/overview/

LINE 應該是台灣人最常使用的通訊軟體。LIFF (LINE Frontend Framework) 是一個 LINE 提供的 web app 平台。

LIFF app 我們可以想成是一個嵌入 LIFF SDK (js) 的網頁，使用者在自己的 LINE 點開該網頁時，直接 Line login 到該網頁。

一般 LINE 聊天機器人，與用戶交談一定是「問答式訊息」的形式。LIFF 因為是網頁的形式，可以達成一些問答式訊息做不到的效果。另外，LIFF 因為是 LINE 自家的東西，高度整合，在 LINE 裡彈出 LIFF 網頁的用戶體驗，也比轉址到其他網頁好。

如何建立 LIFF app

要使用 LIFF，到 LINE Developer Console 建立一個類型為「LINE Login」的 channel。目前 (2023年6月) 一定要類型為「LINE Login」的 channel (Messaging API 不行)。

在「LINE Login」channel 切到 LIFF tab，可以新增一個 LIFF app。也可以新增多個 LIFF app，會列在這頁。

如果在一個 channel 底下新增了多個 LIFF app。LINE 在前幾天有一個公告，2023/5/23 之後新增的 LIFF app，會以新增日期新到舊排列，2023/5/23 以前新增的 LIFF app 則沒有固定的排序規則。
https://developers.line.biz/en/news/2023/05/23/order-of-liff-apps/

新增 LIFF app 時的欄位

新增 LIFF app 時，填入你想要的 LIFF app 名稱。選擇彈出的 Size：Full / Tall / Compact，三擇一。

彈出 Size 的選項分別是：Full 佔據手機螢幕 100%，Tall 佔據手機螢幕「約」80%，Compact 佔據手機螢幕「約」50%。

填入你的 Endpoint URL。這是你要 host 實體網頁的 URL，這實體網頁就是所謂的 LIFF web app。輸入的網址要 https 開頭。

接著選擇用戶授權 LIFF SDK 的不同權限 Scopes：profile / chat_message.write / openid，可以多選。

以 profile 舉例，如果有勾 profile 且用戶使用時同意，這樣 LIFF app 就可以使用 liff.getProfile() 或 liff.getFriendship() 兩個 API。

接著選擇 Bot link feature: On (Normal) / On (Aggressive) / Off，三擇一。

一般來說選 On (Normal)，這會在 LIFF app 用戶使用同意這一頁，增加一個將此 LINE 官方帳號 (Official Account, OA) 增加為好友的選項。

新增完了會得到一個 LIFF ID 跟 LIFF URL

新增完了會得到一個 LIFF ID 跟 LIFF URL。以目前來說 (2023年6月)，LIFF URL 的格式是 https://liff.line.me/your_liff_id 

使用者觸發此 LIFF URL 時，LINE 會轉址到之前填的 Endpoint URL，並提供 LIFF web app。當然，轉址時 LINE server 會確認點擊來源、確認是哪個 LINE 用戶，以及 Developer Console 的後台設定，例如彈出高度的設定。

LIFF 網頁的製作

https://developers.line.biz/en/docs/liff/developing-liff-apps/
LIFF 網頁的製作，參考這份官方文件。基本上一開始一定要 init

liff.init({
    liffId: 'your_liff_id’,
})
.then(() => {
    // start to use LIFF's api
})
.catch((err) => {
    console.log(err);
});

在 LIFF browser (也就是在 LINE App 中點開)，做完 init 就直接已經 login 了。在 external browser (也就是一般手機/電腦瀏覽器) 要另 call liff.login()

因為我們主要使用場景是在 LINE App，暫時不談 external browser。

如果在 LIFF browser 點開，init / login 成功了，我們可以直接 call liff.getProfile()，就可以拿到 LINE user id，顯示名稱、縮圖。還記得文章上方 Developer Console 設定時，要選一個 Scopes，有勾 profile 才能使用 liff.getProfile()。

詳細 LIFF API 規格參考官方文件
https://developers.line.biz/en/reference/liff/

init / login 完成了，你的應用就可以開始了

init / login 完成了，你的應用就可以開始了。例如，如果需要 LIFF app 與你的系統主機作互動，用 access token 或 ID token 當溝通方式。

// 二擇一，如果需要回傳 server
liff.getAccessToken();
liff.getIDToken(); // 需要 Scope openid 的權限

完整的互動方式請參考官方文件，有 sequence diagram
https://developers.line.biz/en/docs/liff/using-user-profile/

以上大概就是 LIFF app 的架構。建立一個實體網頁 → 在 Developer Console 中設定 → 在實體網頁嵌入 LIFF SDK 並初始成功 → 在 LIFF browser (也就是在 LINE App 中) 點開 LIFF URL，建立好的 LIFF app 就會彈出了。

接著就是建立你的系統需求、應用、以及變化。

結論

本篇文章走了一遍 LIFF app 大的架構與理解，細節有需要請參考官方文件。

LIFF 因為是網頁的形式，可以達成一些「問答式訊息」做不到的效果。在 LINE app 中點開 LIFF，直接用戶登入後就可以開始應用。網頁開發上應該也與一般網頁無異 (不要使用 LIFF browser 不支援的技術)。

另外，LIFF 因為是 LINE 自家的東西，高度整合，在 LINE 裡彈出 LIFF 網頁，用戶體驗應該也比轉址其他網頁好。

很多服務業，例如餐飲業或美業，如果有建立 FB/IG 粉絲頁、Google 商家，其實並不需要也沒有官網。此時 LINE 的應用就派上用場了，例如查詢預約及會員點數。

其實很多行業並不需要官網，我們要在這個認知下，做系統的規劃。

]]> Interop 2023，四大瀏覽器繼續合作，解決瀏覽器相容性的問題並推動新技術 https://blog.yuyansoftware.com.tw/2023/03/interop-2023-browser-compatibility-css/ Sun, 19 Mar 2023 04:01:26 +0000 https://blog.yuyansoftware.com.tw/?p=14412 去年 (2022) 開始四大瀏覽器 (Chrome, Edge, Safari, Firefox) 開始合作，一起解決瀏覽器相容性的問題，也因此這四家瀏覽器廠商一起成立了一個 Interop 2022 專案。

Interop 2022 主要專注在 15 個瀏覽器相容性的問題。參考我去年 (2022) 的文章
從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

https://web.dev/interop-2023/
今年的 Interop 2023 主要專注在以下領域

  1. Border Image in CSS
  2. Color Spaces and Functions in CSS
  3. Container Queries (@container)
  4. Containment in CSS
  5. CSS Pseudo-classes
  6. Custom Properties (@property)
  7. Flexbox
  8. Font feature detection and palettes
  9. Forms
  10. Grid
  11. :has()
  12. Inert
  13. Masking in CSS
  14. Math Functions in CSS
  15. Media Queries
  16. Modules in Web Workers
  17. Motion Path in CSS Animations
  18. Offscreen Canvas
  19. Pointer and mouse Events
  20. URL
  21. Web Compat 2023
  22. Web Codecs (video)
  23. Web Components

Interop 有一個網頁，測試四大瀏覽器每個版本對於新規格的支援度，像是軟體開發的 auto test 面板，很清楚很有趣。
https://wpt.fyi/interop-2023

可以看到關於 Interop 2022 的重點領域：Cascade Layers、Dialog Element、position sticky、aspect-ratio、Viewport Units，等，四大瀏覽器已經有很高的支援度了，也因此沒有出現在 Interop 2023 的重點項目。

延伸閱讀：我之前關於 Cascade Layers、Viewport Units 的文章

Interop 2023 的重點項目，例如 Container Queries，目前 (2023年3月) 四大瀏覽器已全部支援。它是傳統 media query 的加強版，可以指定元件 container，並依照此 container 的大小下不同的 CSS 語法。

在不同 container 大小可以下不同 CSS 語法，可以大幅增加 component reusable。

:has() selector 可以選擇有某種 child 元素的 parent 元素，或是該元素有某種 sibling 元素。目前 (2023年3月) Firefox 還不支援。

Custom Properties 已經是一個大家常用，而且新手幾乎一定要學的語法了。Bootstrap 5 開始也將 Custom Properties 寫法納入到核心。Bootstrap 5 beta 1 是2020年12月發布的，可想而知 Custom Properties 已經通用了多久，Bootstrap 才決定採用，再加開發的時間，2020年12月才發布 beta 1。

既然 Custom Properties 上線以久，Interop 2023 關注的是它的 @property 語法，目前 (2023年3月) Safari 和 Firefox 都不支援。

@property 語法可以將原本的 CSS 變數，擴展成資料結構。你可以指定這個變數的類型 (syntax) 與初始值 (initial-value)，後續開發者指定 CSS 變數值時，會執行 type check，如果 invalid，會 fallback 到 initial-value。

CSS Masking 也是被「挖出來」重新討論的題目。CSS Masking (mask-image) 是一個存在很久的東西了，的確好像長期以來不是討論的重點，開發者使用起來也抖抖的，不知道是不是完整的規格，會不會有瀏覽器相容性的問題。

我在 2015 年有一篇文章，那時 CSS Masking 已經出來，而且已經「擺在那邊」很久了：CSS 的演變歷程，Mask & Clip

Interop 2023 還有很多要討論的題目，這邊就不一一列舉。

結論

撰文的現在是2023年3月，201x 有幾年 CSS 的發展有停滯，但近幾年隨著 CSS Grid、Custom Properties、甚至 Cascade Layers 等新技術的上線，似乎 CSS 這個語言又有了很強的進步動能。

larry 覺得近幾年 CSS 可以進步這件事，跟微軟目前的 CEO Satya Nadella 與他的領導團隊有關。他們讓 IE 退休，用 Chromium 當核心重做 Edge，瀏覽器所有規格也跟 Google、Mozilla 合作。試想，如果現在還有很多公司用 Windows IE 瀏覽器，你要怎麼去推 CSS 科技進步？

包含之前的文章 Interop 2022，還有 ChatGPT 是否會取代 Google 搜尋？ 都表達了我對微軟 CEO Satya Nadella 的敬意。larry 開公司很久了，我看得出來他的商業判斷很厲害。

很高興歷史走到現在，這幾家巨頭企業在瀏覽器的部分是傾向合作，而不是對抗。也因此 CSS 這個語言，甚至整個網路科技的發展，都是不斷往前的。

]]> 新的 CSS Viewport Units (large/small/dynamic)，目前四大瀏覽器已全部支援！ https://blog.yuyansoftware.com.tw/2022/12/css-viewport-units-large-small-dynamic/ Tue, 13 Dec 2022 05:11:40 +0000 https://blog.yuyansoftware.com.tw/?p=13180 圖片來源 https://web.dev/viewport-units/

larry 之前有一篇關於 Interop 2022 的文章
從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

https://web.dev/viewport-units/
幾天前 web dev 有一篇文章，提到了 Interop 2022 的第 9 個工作項目：新的 Viewport Units，lvh, svh, dvh。也很高興宣布四大瀏覽器都支援新的 Viewport 單位。

Viewport 長度單位的官方文件在這裡
https://drafts.csswg.org/css-values-4/#viewport-relative-lengths

這份文件是 CSS Values and Units Module Level 4，這份文件從 Level 3 到撰文的此時 (2022年12月) 已經出到 Level 5。

除了我們熟知的 vw, vh，還有 vmin, vmax。vmin 代表 vw / vh 兩者中比較小的，也就是當 viewport 是寬的 (vw > vh)，vmin 代表 vh。當 viewport 是高的，vmin 代表 vw。vmax 也是一樣邏輯，取 vw / vh 兩者中比較大的。

以上這部分是四大瀏覽器早就支援的。

新的 Viewport 單位主要為了解決一般手機瀏覽器，使用者在捲動網頁時，網址列/工具列會自動縮放的問題。

例如 height: 100vh 的區塊，如果手機瀏覽器網址列/工具列都顯示出來，height: 100vh 的區塊其實是比可視面積高的。

上面 Level 4 文件新定義了 3 個新單位：

  • lv*：large viewport size，所有瀏覽器 UI 縮起來時，最大的網頁可視面積。當設定 height: 100lvh，且瀏覽器 UI 展開時，有可能會遮住網頁。
  • sv*：small viewport size，所有瀏覽器 UI 展開時，最小的網頁可視面積。當設定 height: 100svh，且瀏覽器 UI 縮起來時，有可能會出現空白面積。
  • dv*：dynamic viewport size，除了瀏覽器 UI 之外，網頁的可視面積。隨使用者操作，dv* 會動態更新成 lv* 或 sv*。也因為 dv* 會動態更新，使用者操作時可能網頁內容會有奇怪縮放 (如果某一區塊是用 dvh 當單位)。

原本的 vw, vh 指的是 “UA (User Agent) default viewport size”。上面 Level 4 文件指出 default viewport size 可以是 large viewport size 或 small viewport size，或 large / small 之間的值。也就是依照不同手機瀏覽器不一定。

當然，如果不影響你的頁面，不用煩惱。但如果你有手機應用，又正好有 height: 100vh 之類，就要測試一下 large / small / dynamic viewport 單位。

large / small / dynamic viewport 單位，四大瀏覽器 Chrome 108，Firefox 101，Edge 108，Safari 15.4 都已經支援 (以目前2022年12月來講，都算新版瀏覽器)。

上面 web dev 文章有提到 3 點要特別注意：

  1. 所有 viewport 單位都「沒有」考慮 scrollbar 的寬度。如果是傳統 scrollbar 的系統，width: 100vw 有可能會超出可視面積。
  2. dynamic viewport 單位值的更新問題。尤其當網頁的更新速度 (frame rate) 小於瀏覽器 UI 縮放的更新速度，dv* 的區塊可能會有奇怪縮放 (本文上方有提到)。
  3. 手機彈出的虛擬鍵盤「不算」瀏覽器 UI，因此不影響 viewport 單位的值。

結論

從 Compat 2021 到 Interop 2022，四大瀏覽器開始合作，很明顯的看到 CSS 語言的整合與進展，這對網路科技的發展，絕對是一件好事。

如果讀者有稍微瀏覽一下 CSS Values and Units Module Level 4 的文件，viewport 單位的更新其實是一個細節更新，但文件裡有多少備註，多少版本。任何一丁點科技的演進，都是不知道多少人智慧的結晶。

]]> Laravel Vite：繼 Laravel Mix 之後新的前端檔案管理工具 https://blog.yuyansoftware.com.tw/2022/12/laravel-vite/ Sat, 10 Dec 2022 11:53:49 +0000 https://blog.yuyansoftware.com.tw/?p=13078 從 Laravel 5.4 開始 (2017/1/24)，前端檔案管理工具就是 Laravel Mix，我當年還有一篇關於 Laravel Mix 的文章

Laravel 9.19 開始 (2022/6/30)，Laravel 前端檔案管理工具從 Laravel Mix 改為 Vite。

每次寫關於軟體工程演進類的文章，都會有感於時間過得真的太快。2017~2022，五年多就這樣過去了。五年的時間，希望大家在人生中都有累積些什麼。

Laravel Mix 的底層是 Webpack，在 Laravel 根目錄會有 package.json, webpack.mix.js 兩支檔案。執行

npm install

會依照 package.json 去安裝套件到你的開發環境。

package.json 中有一個 “scripts” 欄位，定義了很多 npm 指令，並將 npm 指令轉成 mix 指令。mix 指令就會去跑 webpack.mix.js 這支檔案裡的 script，包含 compile css / js。

Laravel Vite 是基於 Vite，是一個基於原生 JavaScript ESM 的前端開發工具。與 Webpack 機制上不同的是，Webpack 一律依照 script 打包全部檔案素材 (dev mode 也是打包全部)。

而 Vite 在熱更新時 (hot module replacement，HMR)，是先 refresh 瀏覽器，檢查現在前端頁面有關的檔案是否有更新，如果有，才編譯與該頁面有關的檔案 (而不是每次都全部打包)。因此在開發階段，尤其是大型專案，會大幅加速開發時間。

Laravel Vite 一樣有 package.json，一樣要跑 npm install。只是根目錄 script 檔案不是 webpack.mix.js，改為用 vite.config.js。

Laravel Vite 的 package.json 中一樣有 “scripts” 欄位：

npm run dev  // 轉成 “vite”
npm run build  // 轉成 "vite build"

vite 指令就會去跑 vite.config.js 這支檔案裡的 script，預設是

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

入口的 css / js 一樣是 resources/sass/app.scss, resources/js/app.js。注意有一個設定 refresh: true，這代表在執行 npm run dev 時，如果底下這幾個路徑檔案有更新

  • app/View/Components/**
  • lang/**
  • resources/lang/**
  • resources/views/**
  • routes/**

瀏覽器已 load 的頁面會整頁 refresh。以上是預設的監聽路徑，你也可以將自己想監聽的檔案路徑設定給 refresh 參數 (以設定 array 代替 true)，這樣 Vite 就會監聽你定義的路徑。

跟之前一樣 app.scss 中預設 import 隔壁的 _variables.scss。

app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 你需要的套件，例如：jQuery，Bootstrap，Vue，等。

在前端檔案加一行 (與 Mix 不同，Vite 引用 css / js 在同一行)

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

就可以將 compile 好的 css / js 引入 (並加 preload 屬性)。如果是 Build Mode (npm run build)，css / js 檔名會加上版本號 (auto-versioning)。

目前如果先安裝 laravel/ui，build 出來的 css / js 會包含 Bootstrap 5.2.3，是目前 (2022年12月) Bootstrap 的最新版。

Vite 也可以處理前端素材檔案，例如圖檔跟字型檔。在 JS 的入口處 (app.js) 寫入

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

執行 npm run build，這樣 Vite 就會將素材檔名編碼過，並移到 public folder 底下。前端要用素材檔可以這樣寫

<img src="{{ Vite::asset('resources/images/logo.png') }}">
{{-- <img src="http://your-url.com/build/assets/logo.1234ooxx.png"> --}}

結論

從 Webpack 到 Vite，底層是完全不同了。但可以看出來 Laravel Vite 創作時，作者盡量不動 Laravel 的架構，與之前一樣的 css / js 入口檔案。

Vite config 當然有一些獨立的功能和寫法。既然 Laravel 決定改用 Vite 了，我們應該也要隨之學習和習慣 Vite 的使用。

]]> Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence https://blog.yuyansoftware.com.tw/2022/07/bootstrap-5-2-features/ Fri, 29 Jul 2022 03:36:00 +0000 https://blog.yuyansoftware.com.tw/?p=11285 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/
前幾天 (2022/7/19) Bootstrap 5.2 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2022年7月。可以看到每一個 Bootstrap minor version 的更新，就是半年～1年。更甭論 major version 的更新是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了。

以下是 Bootstrap 5.2 的主要更新：

官網首頁重新設計，以及文件網頁優化

重新設計了 Bootstrap 官網首頁，文件網頁也有多處優化，包含左側 menu 的重組，文件搜尋的使用體驗，等等。

更新按鈕樣式

border-radius 調大了一點，雖然按鈕大小跟之前一樣，看起來好像 padding 變小而文字更突出的感覺。

幾乎全部元件都用 CSS 變數 (custom property) 實作

比 Bootstrap 5.1 更多的 CSS 變數實作，幾乎全部元件都是。

新的 _maps.scss

有一個新的 scss/_maps.scss (Bootstrap 5.1 沒有)。_maps.scss 將一些 Sass map 從 _variables.scss 抽出。修正對原始 Sass map 修改時，基於原始 Sass map 擴展的 map，不會繼承這些修改的問題。

舉例來說 $utilities-colors 基於 $theme-colors 擴展。因為 Bootstrap 5.1 $utilities-colors 在 _variables.scss 就定義生成了，所以在

@import "variables";

之後對 $theme-colors 的修改，都不會繼承到 $utilities-colors (它已經生成了)。

而 Bootstrap 5.2 $utilities-colors 移到 _map.scss，整個架構上會比較清楚，你的 Bootstrap CSS build 順序可以參考：

// Functions come first
@import "functions";

// Your optional variable overrides here

// Variables come next
@import "variables";

// Your optional Sass map overrides here

// Third the default maps
@import "maps";

// The rest
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";

新的 CSS helpers and utilities

新的 .text-bg-{color} helper，使用 .text-bg-{color} 可以直接設定 background-color 和文字顏色，而不是兩個 css class 個別設定。

font-weight 方面新增 .fw-semibold (font weight 600)。border-radius 方面新增 .rounded-4 (border radius 1rem) .rounded-5 (border radius 2rem)

Responsive offcanvas

Bootstrap 5.2 可以使用 .offcanvas-{sm|md|lg|xl|xxl}，例如 .offcanvas-lg，在 viewport 大於 lg breakpoint 時，已經顯示的 offcanvas 會隱藏。

Bootstrap 5.0、5.1 就開始使用的 .offcanvas class 仍然存在，使用 .offcanvas 顯示就不隨 viewport 大小而改變。

compile CSS Grid 版本時可以包含 container class

scss/_variables.scss 新增了一個變數 $enable-container-classes，如果是 true，當 compile 成 CSS Grid 版本，container class 仍然會 compile 進去 (5.1 之前不會)。

總結

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以大家要知道 CSS 變數的使用是一個趨勢。也要稍微知道一下新的 _maps.scss，它的邏輯是什麼，Bootstrap 5.2 CSS build 的順序是什麼。

]]> 從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題 https://blog.yuyansoftware.com.tw/2022/04/compat-2021-interop-2022-browser-compatibility/ Mon, 18 Apr 2022 03:50:14 +0000 https://blog.yuyansoftware.com.tw/?p=10239 https://web.dev/interop-2022/
前幾天看到這篇文章，史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來，一起解決瀏覽器相容性的問題。因此這幾家瀏覽器廠商一起成立了一個 Interop 2022 專案。

上方 web dev 文章提到了 compatibility, interoperability 這兩個字的不同。

compatibility 指的是 “site compat”，應該是以網站為主，同一網站在不同的環境應該要有類似的行為。interoperability 應該是以環境為主，在這裡指的是瀏覽器，不同的瀏覽器對一樣的語法、指令，應該要有高度類似的行為。

因為 compatibility, interoperability 這兩個字嚴格來講語意不太相同，這幾家瀏覽器廠商是選用 interoperability 的 Interop。

https://web.dev/compat2021/
事實上從 2019，Google, Mozilla, Microsoft 就已經合作開始在研究瀏覽器相容的議題，並在 2021 成立了 Compat 2021 專案。Compat 2021 專案專注於以下五個領域：

  1. CSS Flexbox
  2. CSS Grid
  3. position: sticky
  4. aspect-ratio
  5. CSS Transforms：有 3D transform 和動畫時，每個瀏覽器行為有可能不同。

Compat 2021 對新 CSS 語法的普及，不同瀏覽器相容性的提升，都有一些明顯的成果。

這邊聊一下微軟 (Microsoft)，注意 Compat 2021 的成員已經有微軟了，他們已經跟 Google, Mozilla 合作很久了。現任的微軟領導班子真的很厲害，解開了傳統賣套裝軟體 (Windows, Office) 的束縛。走向雲端訂閱制，走向行動裝置，軟體也同時在 Android, iPhone, Mac 上架。

瀏覽器方面打掉 IE，用 Chromium 當核心重做 Edge。用 Chromium 當核心就代表要跟 Google 合作，微軟想得也很清楚，就是跟 Google 合作。

撰文的現在是2022年4月，瀏覽器市佔率 Edge 已經接近第二名的 Safari，很多3C網站都預測 Edge 市佔率將會超越 Safari。微軟現任的領導班子很厲害，公司策略都想得很清楚，也是商業競合策略的最佳教材。

公司業務的某個部分跟外部合作，一定會有妥協的部分，但可能因此會有很多機會、很多成長，那為什麼不合作。

不管是微軟，還是其他巨頭企業，當然都知道競合策略，當然也知道賽局理論，這次 Interop 2022 的合作就是最好的例子。延伸閱讀：[讀書筆記] 思辨賽局 (The Art of Strategy)

回到 Interop 2022，它主要專注在以下 15 個領域：

  1. Cascade Layers
    關於這個主題我有一篇文章：CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題
  2. Color Spaces and Functions
  3. Containment
  4. Dialog Element
  5. Forms
  6. Scrolling
  7. Subgrid
  8. Typography and Encodings
  9. Viewport Units：CSS Values and Units Module Level 4 新定義了 3 個單位，lvh, svh, dvh
  10. Web Compat：以使用者的角度來講，同一網站不同瀏覽器，有沒有真的會影響到使用體驗的部分。
    === 以下是從 Compat 2021 繼承下來 ===
  11. CSS Flexbox
  12. CSS Grid
  13. position: sticky
  14. aspect-ratio
  15. CSS Transforms

Chrome, Safari, Edge, Firefox 在 Interop 2022 規格所得的分數，會持續在這個網頁更新 https://wpt.fyi/interop-2022

結論

撰文的現在是2022年4月，CSS 從 responsive design, Flexbox, CSS Grid 等新技術到現在，已經十幾年的時間。以整個軟體工程來講，CSS 是年輕的語言沒錯，但十幾年下來，要找到新的突破點、優化點確實也不容易。

但畢竟任何網路應用，離不開網頁的呈現。幾個大的網路巨頭企業，也各自有自己的瀏覽器。但值得高興的是，這幾家巨頭企業在瀏覽器的部分是傾向於合作，而不是對抗。巨頭的合作對 CSS 這個語言，網路科技的發展，乃至於整個網路環境，都是一個比較好的發展方向。

]]> CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題 https://blog.yuyansoftware.com.tw/2022/02/css-cascade-layers-specificity/ Sun, 06 Feb 2022 05:18:46 +0000 https://blog.yuyansoftware.com.tw/?p=9625 前幾天看到一篇文章
https://developer.chrome.com/blog/cascade-layers/

Chromium 99、Firefox 97、Safari 15.4 將會支援 CSS Cascade Layers。雖然全瀏覽器的支援度還是不夠，但這幾家瀏覽器的大廠支援，就說明了 Cascade Layers 會成為未來的規格。

Cascade Layers 的官方文件在這裡
https://www.w3.org/TR/css-cascade-5/#layering

上面文件是 CSS Cascading and Inheritance Level 5，此份文件從 Level 3 到撰文的此時 (2022年2月) 已經出到 Level 6。CSS Cascading and Inheritance 就是負責定義在多個 CSS 語法下，一個 HTML element，最終是採用哪一個 CSS。

CSS Cascade 中很重要的一件事，就是搞清楚 Specificity (權重) 的概念。一般來講，用 HTML ID 來指定 CSS 的權重會大於用 CSS class，用 CSS class 來指定 CSS 的權重又大於用 HTML tag。

前幾年有人提出 BEM (Block Element Modifier) 命名的概念，它就是依照 HTML 區塊、區塊裡的元素、modifier 等，把所有名稱連起來，寫一個長長的 CSS selector。經驗夠的工程師就知道，這樣多難維護啊。重點是專案要快速完成吧，而不是把團隊的精力時間花在維護 BEM 命名。

稍微有點規模的專案，都有著複雜的 HTML 結構。你在開發某一頁時，根本不會知道你寫的這一個 CSS，跟已存在的 CSS 到底誰的權重重。如果已存在的 CSS 權重重，就暴力覆寫，大概會是這樣的情況。一整個專案的 CSS 有點像是在同一個平面，沒有任何結構，彼此競爭。

新的規格 Cascade Layers 試圖解決這個問題。以優先級來講，永遠先考慮 Cascade Layers，再考慮 Specificity (權重)。

我們來看一段 sample code

@layer base {
  div.abc {
    color: red;
  }
}

@layer theme {
  div {
    color: green;
  }
}

如果現在 HTML 裡有一個 <div class="abc">，裡面的字是什麼顏色？以權重來講，有指定 .abc 當然權重比較高。但是因為有使用 @layer，後宣告的 @layer 永遠覆寫之前宣告的 @layer，所以 <div class="abc"> 裡面的字是綠色。

在 CSS 檔案最上方，可以明確指定 layer 順序，例如加這一行到 CSS 檔案最上方

@layer theme, base; // 明確指定先 theme 再 base

這樣 @layer base 裡指定的 CSS 就會覆寫 @layer theme 裡指定的 CSS。

如同名稱 Cascade Layers，它把本來在同一個平面，互相競爭(權重)的 CSS，上下分層了。當然一般狀況，先宣告 base layer (下層)，再宣告 theme layer (上層)，甚至客製的元件 layer (更上層)。

上方 Chrome Developer 的文章有提醒

  1. 在 @layer 中的 CSS selector 仍然要寫全稱。本來寫什麼，在 @layer 裡就寫什麼，不要誤解 @layer 可以讓你的 CSS 少寫什麼。
  2. 如果同時有 layered / non-layered CSS，non-layered CSS 永遠先被採用，不管它的 selector 權重如何。所以要導入 Cascade Layers，先從基底的 CSS 開始導入，才不會影響整個專案。
  3. !important 會反轉優先順序。承第二點，如果同時有 layered / non-layered CSS，而且同時有 !important，@layer !important 的優先級高。
    如果同時有多個 layered CSS，而且同時有 !important，第一個 layered CSS with !important 的優先級最高。
    不管是 layered / non-layered 比較，多個 layer 比較，!important 都反轉了優先順序。
  4. @layer 的語法是宣告新的 layer。例如一 layer abc，如果你
    @import '....' layer(abc);
    之後再宣告 @layer abc，這個 @layer abc 無效。不會有任何權重，是完全被忽略。
    總之，Chrome Developer 的文章建議，CSS 檔案一開始就宣告 @layer，另一方面也明確的指定 layer order。

結論

Chromium 99、Firefox 97、Safari 15.4 將會支援 CSS Cascade Layers，這幾家瀏覽器的大廠支援，說明了 Cascade Layers 會成為未來的規格。

本篇文章走了一遍 CSS Specificity (權重)，但長期以來全部 CSS 在同一平面競爭權重，有總是暴力覆寫的問題。Cascade Layers 可以將整個專案的 CSS 結構化，由下到上分為 base, theme, components 等，是一個合理又聰明的做法。上方圖層 (layer) 覆蓋下方圖層，也是一個清楚而直覺的想像。

Cascade Layers 可能會成為未來的規格，值得投資時間，有在做前端的讀者可以參考看看囉。

延伸閱讀：從 Compat 2021 到 Interop 2022，史上第一次所有主流的瀏覽器廠商，合作解決瀏覽器相容性的問題

]]> Bootstrap 5.1 主要更新：開始使用 CSS Grid 實作 grid system，新的元件，更多的 CSS 變數 (custom property) https://blog.yuyansoftware.com.tw/2021/08/bootstrap-5-1-css-grid-custom-property/ Tue, 24 Aug 2021 07:46:34 +0000 https://blog.yuyansoftware.com.tw/?p=8377 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/
前幾天 (2021年 8/4) Bootstrap 5.1 釋出了。每次看到新的 Bootstrap 版本釋出，都會有感於時間過的真的飛快。

上一篇我關於 Bootstrap 5 的文章是在去年底 (2020年底)，一轉眼 2021 年大半年又過了。

以下是 Bootstrap 5.1 的主要更新：

使用 CSS Grid 實作 grid system

使用 CSS Grid 實作 grid system 是 Bootstrap 5.1 的主要更新。很多專家認為 CSS Grid 是繼 Flexbox 後，近代 CSS 的另一個里程碑。Bootstrap 4 開始使用 Flexbox 實作 grid system，Bootstrap 5.1 預設也是 Flexbox 實作，但可以切換為 CSS Grid 實作。

同時也釋出了新的 CSS Grid 文件，5.0 還沒有這頁文件，從 5.1 開始。
https://getbootstrap.com/docs/5.1/layout/css-grid/

Bootstrap 5.1 如何切換 Flexbox 實作到 CSS Grid 實作？找到檔案位置 /bootstrap-5.1.0/scss/_variables.scss, 設定這兩個變數

$enable-grid-classes: false; 
$enable-cssgrid: true;

改好了重新 compile SCSS。Bootstrap 5.0 的 _variables.scss 沒有 $enable-cssgrid 這個變數，所以可以確定是 5.1 引入的。

一樣是 Bootstrap Grid System row/col 的架構，只是將 row 換成 grid，col 換成 g-col。例如這樣三個 div 分別在 12 份中佔有一份、兩份、和三份。
.grid 設定 display:grid，g-col-* 設定 grid-column

<div class="grid">
  <div class="g-col-1">
    Column
  </div>
  <div class="g-col-2">
    Column
  </div>
  <div class="g-col-3">
    Column
  </div>
</div>

.grid 同時定義了 CSS gap。相較於用 padding/margin 去做 gutter，gap 是新一代做 gutter 的方式。如果仔細去看，每個 g-col 本身沒有 padding/margin，但卻能彼此分開，這不符合 CSS box model 阿？larry 看到一種說法，gutter 如字面翻譯是水溝，在 CSS Grid 裡面 gutter 本身就是一種物件，會佔面積。而 gap 只是定義了 gutter 的寬度。

下方是 Bootstrap CSS Grid 文件中的 sample code。這個 sample 做了一個 9×9 的 grid，第一個 child 是第一行第一個，第二個 child 是第二行第二個，第三個 child 是第三行第三個。以賓果遊戲來說，是左上到右下連線的圖形。

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

從這個 sample 我們可以看出

  1. Bootstrap 官方鼓勵 inline CSS custom property 的使用。inline 指定 --bs-rows, --bs-columns 是不是更靈活，redundant code 更少一些。
  2. g-start-* 可以指定水平開頭的位置，inline CSS grid-row 可以指定是屬於第幾行。

Offcanvas in navbar (new component)

Offcanvas 在 Bootstrap 5.0 已經新增了，是一個新的元件。觸發時左、右、上、下其中一側彈出視窗，按按鈕或按叉結束時再縮回原處。

Bootstrap 5.1 將 Offcanvas 和 navbar 做整合。尤其手機版的 navbar 通常會縮成一個 toggle button，點了之後可以指定 Offcanvas 從哪個方向彈出，navbar 的內容可以放在 Offcanvas 裡面。

Placeholder (new component)

將還沒 load 好的文字，用銀色區塊替代。例如 Facebook，早就是這樣做 placeholder。

在要顯示銀色區塊的 DOM (不一定是銀色，可以自行設定 background-color)，加上 CSS class .placeholder，DOM 的寬度要設定一下。container 可以加上 CSS class .placeholder-glow 或 .placeholder-wave，讓 placeholder 區塊有小小的水波閃爍。

.bg-* & .text-* utility 的實作變數化

Bootstrap 5.0 中 background color utility 實作如下 (text color utility 類似，僅用 background 舉例)

.bg-success {
  background-color: #198754 !important;
}

Bootstrap 5.1 改為

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

這樣如果你要微調 .bg-success 的顏色，在你的專案裡重新設定 --bs-success-rgb 就好了。未來 Bootstrap 會接著把其他 utility 也變數化。Bootstrap 的演進有這樣的味道：Bootstrap 只管架構，顏色等屬性由 CSS 變數設定。對軟體工程有研究的讀者應該知道，資料 / 邏輯分離的概念。

總結

Bootstrap 5.1 開始使用 CSS Grid 實作 grid system，而且又新增了很多元件。從 Bootstrap 的發展和文件可以看出來，Bootstrap 非常大量的使用 CSS custom property，同時也鼓勵開發者在專案裡使用 CSS custom property 做出變化。CSS Grid、Bootstrap 的新元件、CSS custom property 的使用，都是很值得參考的。

]]>