史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來,一起解決瀏覽器相容性的問題,一起成立了一個 Interop 2022 專案。
分類: 前端工程
CSS Cascade Layers,解決長期以來 CSS 競爭權重 (Specificity) 的問題
稍微有點規模的專案,都有著複雜的 HTML 結構。你在開發某一頁時,根本不會知道你寫的這一個 CSS,跟已存在的 CSS 到底誰的權重重。如果已存在的 CSS 權重重,就暴力覆寫,大概會是這樣的情況。
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 Comparison Functions:min(), max(), and clamp()
隨著回應式網頁的普及,各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼,更因為可以內嵌運算式,加上 CSS 目前是朝原生參數化的方向在走,在實際使用上可以有更多的想像和寫法。
Bootstrap 5 主要更新:不再相依 jQuery,新增 Utilities API,使用 CSS custom properties
本篇會走一遍 Bootstrap 5 的主要更新,懂前端工程的讀者,可以看看有沒有東西是值得拿來使用,或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分,往比較 minor 的部分排序。
響應式圖片 Responsive Images,img srcset 的用法
懂前端又有玩 Wordpress 的讀者應該知道,Wordpress 會自動幫你生成響應式圖片 (Responsive Images)。上一張圖到 Wordpress,以 Wordpress 5 來說,它會幫你生成不同大小的 4 張圖。前端網頁會依照不同螢幕尺寸 load 並顯示 4 張圖的其中 1 張。
網頁滾動元素動畫 AOS.js
現在很多網頁,像是手機產品的網頁,當使用者往下拉時,會有圖片或文案浮現的效果。要達成這樣的效果,可以考慮使用 AOS.js。以目前 (2020年6月) 來說,類似功能的插件,應該是以 AOS.js 為主。
Bootstrap 4 Flex
Flex 是 CSS3 很重要的一種佈局方式,Bootstrap 4 也出了很多 help class, 建議對前端有興趣的朋友要使用。有很多排列組合,尤其是對齊方面,但不用糾結在其中,一切還是以設計和實務需求來做驅動。
全屏滾動網頁 fullPage.js
fullPage.js 是一款滿多人使用的全屏滾動網頁框架,如果說把全屏滾動網頁形容成上下播放的投影片,一個 section 就是其中一張投影片,一個網頁可以包含N張投影片,外部要用一個 wrapper 包住 (不能是 html body).
Bootstrap 4 主要更新:Grid System、CSS
Bootstrap 4 beta 在日前發佈了,本篇文章記錄了 v4 的主要的更動。如果是同為開發者的朋友,可以想想為什麼 bootstrap v4 要採納這些更動,有什麼技術是值得我們進一步去研讀的。
Laravel Mix
Laravel 5.4 開始使用 Laravel Mix 去處理前端的 js / css 檔案,Laravel Mix 這套件是由 npm 管理的,所以首先確認你的開發環境中有裝 npm.
[好文分享] 5 Surprises for PHP Developers Coming to JavaScript
http://radar.oreilly.com/2013/06/5-surprises-for-php-de …
[線下活動] 2016 iWeb 峰會台北站
有位朋友跟 Larry 提到這個 conference, 時間就是今天下午 (2016 03 26) …