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

CSS 前端工程 2021 年 8 月 24 日2021 年 10 月 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 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 日2021 年 3 月 30 日作者: Larry

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

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

閱讀全文

CSS 前端工程 2020 年 12 月 11 日2020 年 12 月 15 日作者: 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 張。

閱讀全文