前端工程 – LARRY的午茶時光

JavaScript ES6 模組化 import export CommonJS Node.js require

前端工程 2023 年 9 月 17 日2023 年 9 月 17 日作者: Larry

JavaScript ES6 的模組化功能：import, export。建置前端時 require 與 import 有何不同？

這篇文章我們來聊一個不新，但重要的議題：JavaScript 的模組化。2015年，JavaScript ECMAScript 2015 發布，也稱為ES6，從此開始，JavaScript 導入了模組化的概念以及語法。

閱讀全文

Bootstrap 5.3 主要更新深色模式 Dark mode 調色盤色票 Color Palette Link 樣式

Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式

Bootstrap 5.3 主要是新增了深色模式 Dark mode，開發者也可以客製自己的 color mode。另外也翻新了調色盤色票 Color Palette，新增了好幾個色票。連結樣式及文件也大幅度翻新了。

閱讀全文

LINE 前端工程網路科技 2023 年 6 月 3 日2024 年 9 月 30 日作者: Larry

LINE LIFF (LINE Frontend Framework) 前端框架，如何理解、設定與使用 LIFF app

LINE 應該是台灣人最常使用的通訊軟體。LIFF (LINE Frontend Framework) 是一個 LINE 提供的 web app 平台。在 LINE app 中點開 LIFF，直接用戶登入後就可以開始應用。

閱讀全文

Interop 2023 瀏覽器相容性 Chrome Edge Safari Firefox CSS

CSS 前端工程網路科技 2023 年 3 月 19 日2023 年 6 月 3 日作者: Larry

Interop 2023，四大瀏覽器繼續合作，解決瀏覽器相容性的問題並推動新技術

從 Interop 2022 開始，四大瀏覽器 (Chrome, Edge, Safari, Firefox) 一起合作解決瀏覽器相容性的問題，已經有了明確的成果。Interop 2023 四大瀏覽器繼續合作，推動 Web 技術的進步，與降低瀏覽器相容性的問題。

閱讀全文

CSS Viewport Units large small dynamic 手機瀏覽器

CSS 前端工程 2022 年 12 月 13 日2022 年 12 月 14 日作者: Larry

新的 CSS Viewport Units (large/small/dynamic)，目前四大瀏覽器已全部支援！

最近 Chrome 108 版宣布開始支援新的 Viewport Units：lvh, svh, dvh。這也是 Interop 2022 的第 9 個工作項目。Chrome 開始支援後，目前四大瀏覽器都已支援新的 Viewport 單位。

閱讀全文

Laravel 前端工程 2022 年 12 月 10 日2023 年 9 月 13 日作者: Larry

Laravel Vite：繼 Laravel Mix 之後新的前端檔案管理工具

從 Laravel 9.19 開始 (2022/6/30)，Laravel 前端檔案管理工具從 Mix 改為 Vite。Laravel Mix 的底層是 Webpack，而 Vite 是基於原生 JavaScript ESM 的前端開發工具。Vite 在熱更新時 (HMR) 是先 refresh 瀏覽器，才編譯與該頁面有關的檔案。

閱讀全文

CSS 前端工程 2022 年 7 月 29 日2023 年 6 月 25 日作者: Larry

Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以 CSS 變數的使用越來越重要。以及調整了 Bootstrap CSS build sequence。

閱讀全文

Interop 2022 Chrome Safari Edge Firefox 瀏覽器相容性

CSS 前端工程網路科技 2022 年 4 月 18 日2023 年 3 月 18 日作者: Larry

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

史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來，一起解決瀏覽器相容性的問題，一起成立了一個 Interop 2022 專案。

閱讀全文

CSS 前端工程 2022 年 2 月 6 日2022 年 8 月 16 日作者: Larry

CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題

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

閱讀全文

CSS 前端工程 2021 年 8 月 24 日2022 年 8 月 11 日作者: Larry

Bootstrap 5.1 主要更新：開始使用 CSS Grid 實作 grid system，新的元件，更多的 CSS 變數 (custom property)

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

閱讀全文

Laravel 前端工程 2021 年 5 月 30 日2023 年 9 月 14 日作者: Larry

初探 Alpine.js — Laravel 預設的前端框架從 Vue.js 改為使用 Alpine.js

從 Laravel 5 預設是 Vue.js，到 vue 只是一個選項，到 Laravel 8 預設使用 Alpine.js。就 Laravel 的態度而言，整個趨勢是從 Vue.js 轉到 Alpine.js。本篇我們就來聊一下 Alpine.js

閱讀全文

CSS 前端工程 2021 年 3 月 23 日2024 年 11 月 11 日作者: Larry

CSS Comparison Functions：min(), max(), and clamp()

隨著回應式網頁的普及，各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼，更因為可以內嵌運算式，加上 CSS 目前是朝原生參數化的方向在走，在實際使用上可以有更多的想像和寫法。

閱讀全文

CSS 前端工程 2020 年 12 月 11 日2023 年 3 月 18 日作者: Larry

Bootstrap 5 主要更新：不再相依 jQuery，新增 Utilities API，使用 CSS custom properties

本篇會走一遍 Bootstrap 5 的主要更新，懂前端工程的讀者，可以看看有沒有東西是值得拿來使用，或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分，往比較 minor 的部分排序。

閱讀全文

前端工程 2020 年 7 月 29 日2023 年 5 月 21 日作者: Larry

響應式圖片 Responsive Images，img srcset 的用法

懂前端又有玩 Wordpress 的讀者應該知道，Wordpress 會自動幫你生成響應式圖片 (Responsive Images)。上一張圖到 Wordpress，以 Wordpress 5 來說，它會幫你生成不同大小的 4 張圖。前端網頁會依照不同螢幕尺寸 load 並顯示 4 張圖的其中 1 張。

閱讀全文