跳至主要內容
  • Larry的午茶時光
  • 文章列表
  • 蔣鈞林|Larry Chiang
  • 邀約合作,請先看一下
  • 隱私權條款
Larry的午茶時光
請點左側按鈕打開 menu
  • 首頁
  • 商業思維
    • ALL
    • 時事觀察
    • 創業經營
    • 職涯發展
    • 讀書筆記
  • Larry的日常
    • ALL
    • 食記
    • 生活
    • 葡萄酒
    • 開箱
  • 數位行銷
    • ALL
    • Google Analytics (GA)
    • Google Ads
    • SEO
  • 網路科技
    • ALL
    • LINE
    • Chrome
  • 前端工程
    • ALL
    • CSS
    • JavaScript
  • PHP
    • ALL
    • Laravel
    • WordPress
    • OpenCart
  • 軟體工程與管理
    • ALL
    • Design Pattern
    • OGRE 3D
首頁 > 文章列表 > 前端工程

前端工程

JavaScript ES6 模組化 import export CommonJS Node.js require
JavaScript 前端工程 2023 年 9 月 17 日2025 年 4 月 14 日 作者: Larry

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

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

閱讀全文
Bootstrap 5.3 主要更新 深色模式 Dark mode 調色盤色票 Color Palette Link 樣式
CSS 前端工程 2023 年 6 月 28 日2025 年 1 月 21 日 作者: Larry

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

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

閱讀全文
LIFF app LINE Frontend Framework 前端框架
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 Vite frontend 前端 CSS JS
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 瀏覽器,才編譯與該頁面有關的檔案。

閱讀全文
Bootstrap 5
CSS 前端工程 2022 年 7 月 29 日2025 年 1 月 21 日 作者: 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 Cascade Layers 權重 Specificity
CSS 前端工程 2022 年 2 月 6 日2022 年 8 月 16 日 作者: Larry

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

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

閱讀全文
bootstrap 5
CSS 前端工程 2021 年 8 月 24 日2025 年 1 月 21 日 作者: 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 實作。

閱讀全文
Alpine.js Laravel frontend
JavaScript Laravel 前端工程 2021 年 5 月 30 日2025 年 4 月 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 min max clamp
CSS 前端工程 2021 年 3 月 23 日2024 年 11 月 11 日 作者: Larry

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

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

閱讀全文
bootstrap 5
CSS 前端工程 2020 年 12 月 11 日2025 年 1 月 21 日 作者: Larry

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

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

閱讀全文
響應式圖片 Responsive Images
前端工程 網路科技 2020 年 7 月 29 日2025 年 4 月 14 日 作者: Larry

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

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

閱讀全文
aos js
JavaScript 前端工程 2020 年 6 月 11 日2025 年 4 月 14 日 作者: Larry

網頁滾動元素動畫 AOS.js

現在很多網頁,像是手機產品的網頁,當使用者往下拉時,會有圖片或文案浮現的效果。要達成這樣的效果,可以考慮使用 AOS.js。以目前 (2020年6月) 來說,類似功能的插件,應該是以 AOS.js 為主。

閱讀全文
bootstrap 4
CSS 前端工程 2018 年 4 月 19 日2025 年 1 月 21 日 作者: Larry

Bootstrap 4 Flex

Flex 是 CSS3 很重要的一種佈局方式,Bootstrap 4 也出了很多 help class, 建議對前端有興趣的朋友要使用。有很多排列組合,尤其是對齊方面,但不用糾結在其中,一切還是以設計和實務需求來做驅動。

閱讀全文
全屏滾動網頁 fullPage.js
JavaScript 前端工程 2018 年 2 月 23 日2025 年 4 月 14 日 作者: Larry

全屏滾動網頁 fullPage.js

fullPage.js 是一款滿多人使用的全屏滾動網頁框架,如果說把全屏滾動網頁形容成上下播放的投影片,一個 section 就是其中一張投影片,一個網頁可以包含N張投影片,外部要用一個 wrapper 包住 (不能是 html body).

閱讀全文
bootstrap 4
CSS 前端工程 2017 年 8 月 17 日2025 年 1 月 21 日 作者: Larry

Bootstrap 4 主要更新:Grid System、CSS

Bootstrap 4 beta 在日前發佈了,本篇文章記錄了 v4 的主要的更動。如果是同為開發者的朋友,可以想想為什麼 bootstrap v4 要採納這些更動,有什麼技術是值得我們進一步去研讀的。

閱讀全文
Laravel Mix
Laravel 前端工程 2017 年 4 月 15 日2023 年 9 月 13 日 作者: Larry

Laravel Mix

Laravel 5.4 開始使用 Laravel Mix 去處理前端的 js / css 檔案,Laravel Mix 這套件是由 npm 管理的,所以首先確認你的開發環境中有裝 npm.

閱讀全文
JavaScript 前端工程 好文記錄與分享 2016 年 6 月 12 日2025 年 4 月 14 日 作者: Larry

[好文分享] 5 Surprises for PHP Developers Coming to JavaScript

http://radar.oreilly.com/2013/06/5-surprises-for-php-de …

閱讀全文
前端工程 實體活動 2016 年 3 月 26 日2022 年 7 月 27 日 作者: Larry

[線下活動] 2016 iWeb 峰會台北站

有位朋友跟 Larry 提到這個 conference,時間就是今天下午 (2016/03/26),地點是大直 …

閱讀全文
JavaScript 前端工程 2016 年 3 月 21 日2025 年 4 月 14 日 作者: Larry

AngularJS (4)

這兩天試了一下 Angular 2. 與其說是 Angular 的二代,倒不如說整個打掉重練 XD 1. 首先 …

閱讀全文
gulp js css auto versioning
JavaScript 前端工程 2016 年 1 月 3 日2025 年 4 月 14 日 作者: Larry

如何利用 gulp 自動添加 JS 及 CSS 版號 (auto-versioning),避免瀏覽器快取

當一個使用者瀏覽了你的網站,過沒幾天你更新了 JS 或 CSS,但因為該使用者的瀏覽器記住了上次瀏覽的 JS / CSS,以至於你更新的 JS / CSS 不會在他的瀏覽器上生效。同理,也不會對其他最近瀏覽你網站的使用者生效。

閱讀全文
JavaScript 前端工程 2015 年 12 月 15 日2025 年 4 月 14 日 作者: Larry

AngularJS (3)

https://docs.angularjs.org/tutorial  一直以來沒有真正走過官方教 …

閱讀全文

文章導覽

較舊的文章

本站用戶輪廓

我有空會將GA數據更新在這裡。
2025年3月
女男使用者比 58.2%:41.8%
使用裝置比
手機 60.9%:電腦 38.3%:平板 0.8%

關於我

蔣鈞林 Larry

十幾年的部落客,自有網站(本站)

關於Larry👉台大電機系畢業,美國南加大電機工程碩士(主修多媒體與創新科技)

30幾歲時創業,自此做商業的時間比做工程的時間還多

本站的主題是商業、創業、美食、葡萄酒、科技、AI、財經投資

這是我的 FB粉專 與 IG,我也常使用 Threads,歡迎大家追蹤互動~

如果您對相關主題有興趣、建議,或是徵詢合作,歡迎來信

larry@yuyansoftware.com.tw

更多關於我

邀約合作,請先看一下

因為不時會接到廠商的合作邀約,我把我這邊的合作方式,寫成公告。有意合作的廠商請先看一下,謝謝。

公司本業

我的本業是 雨燕網路資訊 的經營者。
🚩雨燕公司致力於協助客戶建置客製化網站系統,例如訂單、進銷存、客戶管理、ERP、預約排班、電商網站。
🚩我們也熟悉 WordPress 網站,包含站主本身就是十幾年的部落客。

近期文章

  • 福岡塔 (Fukuoka Tower),日本第三高塔,福岡市景一覽無遺,幫大家整理福岡塔的必玩重點

    福岡塔 (Fukuoka Tower),日本第三高塔,福岡市景一覽無遺,幫大家整理福岡塔的必玩重點

    2025 年 5 月 11 日
  • [日本福岡] 從舞鶴公園天守台,到大濠公園的半日遊,在湖畔旁 &LOCALS 喝一杯抹茶拿鐵

    [日本福岡] 從舞鶴公園天守台,到大濠公園的半日遊,在湖畔旁 &LOCALS 喝一杯抹茶拿鐵

    2025 年 4 月 19 日
  • 台股 2025/4/7 大跌 2065 點,再次刷新史上最大單日跌幅,如何面對股市災難式的大跌?

    台股 2025/4/7 大跌 2065 點,再次刷新史上最大單日跌幅,如何面對股市災難式的大跌?

    2025 年 4 月 9 日
  • [日本福岡] 博多魚河岸(魚がし),長浜鮮魚市場,市場會館一樓,好吃的海鮮丼和炸天婦羅

    [日本福岡] 博多魚河岸(魚がし),長浜鮮魚市場,市場會館一樓,好吃的海鮮丼和炸天婦羅

    2025 年 3 月 28 日
  • 黃仁勳 2025 GTC 的演講摘要,公布下一代AI伺服器架構 Rubin,從企業到個人的 DGX 系列

    黃仁勳 2025 GTC 的演講摘要,公布下一代AI伺服器架構 Rubin,從企業到個人的 DGX 系列

    2025 年 3 月 22 日

系列文章

商業思維系列>> 職涯發展>>

創業經營>> 讀書筆記>>

時事觀察>> 財經投資>>

數位行銷系列>> Google Ads>>

Google Analytics SEO>>

台北東區美食>> 中山區美食>>

信義區美食>> 捷運中山站美食

日本料理>> 法式料理>>

日式燒肉>> 義式料理>>

火鍋麻辣鍋>> 甜點飲料>>

葡萄酒>> 牛排>>

完整分類

  • Larry的日常 (154)
    • 生活 (21)
    • 葡萄酒 (30)
    • 開箱 (9)
    • 音樂 (7)
    • 食記 (91)
  • PHP (27)
    • Laravel (20)
    • OpenCart (2)
    • WordPress (2)
  • 前端工程 (33)
    • CSS (14)
    • JavaScript (13)
  • 商業思維 (92)
    • 創業經營 (38)
    • 時事觀察 (37)
    • 職涯發展 (18)
    • 自媒體經營 (7)
    • 讀書筆記 (22)
  • 好文記錄與分享 (9)
  • 實體活動 (4)
  • 數位行銷 (63)
    • Google Ads (29)
    • Google Analytics (GA) (26)
    • SEO (7)
  • 網路科技 (36)
    • Chrome (5)
    • LINE (4)
  • 軟體工程與管理 (25)
    • Design Pattern (6)
    • OGRE 3D (7)
  • 軟體開發隨筆 (9)
台北市天氣預報
縮小
© 2025 Larry的午茶時光 版權所有