前端工程 – LARRY的午茶時光@雨燕網路資訊

Interop 2022 Google Apple Microsoft Mozilla 瀏覽器相容性

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

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

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

閱讀全文

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

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

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

閱讀全文

CSS 前端工程 2021 年 8 月 24 日2022 年 2 月 5 日作者: 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 PHP 前端工程 2021 年 5 月 30 日2021 年 6 月 4 日作者: Larry

Laravel frontend from Vue.js to Alpine.js – Introduction to Alpine.js

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

閱讀全文

CSS 前端工程 2021 年 3 月 23 日2022 年 2 月 6 日作者: Larry

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

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

閱讀全文

CSS 前端工程 2020 年 12 月 11 日2022 年 2 月 5 日作者: Larry

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

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

閱讀全文

前端工程 2020 年 7 月 29 日2021 年 8 月 26 日作者: Larry

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

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

閱讀全文