卡斯伯提供的教學資源：
VSCode Prettier 整合 ESLint 自動排版
VSCode 中有一個非常不錯的格式化工具，可以透過一個按鍵將雜亂的程式碼排列的整整齊齊，無論是 HTML、CSS、JavaScript 均可以套用。而此工具稱為 “Prettier”，在 VSCode 中也是屬於預設工具，除了預設選項外也能有許多的客製化調整。 而我們在開發的過程中，為了確保團隊...
Vue3 中使用 Event Bus
Vue 2 中要進行跨元件通訊，除了 Vuex 以外的另一個常見手法是 Event Bus，對於小型專案來說 Event Bus 相當方便，僅需要 $on、$emit 兩個語法就能進行跨元件通訊。而 Vue 3 中移除了 $on、$off 等語法，因此 Event Bus 也等同於被移除。 在 Vu...
12 個前端愛用的 VSCode 擴充套件
工欲善其事，缺乏好工具必定壞脾氣。 身為一名工程師，將文字編輯器打造出具個人風格也是理所當然的。VSCode 是現在主流的文字編輯器，也因為使用者相當多，沒有特別打理的情況不乏會有撞衫的情況： 「你也是用 VSCode 喔」「我也是耶…」（不知怎麼往下接） 為了避免尷尬情境，並且突顯自己的高尚，將 ...
Async function / Await 深度介紹
非同步在前端的做法不斷的在進行優化調整，先前介紹過 Promise 可以解決非同步過度巢狀的問題，而本篇要介紹的 async function（非同步函式） 及 await 則可以將非同步的程式碼寫成類似同步的形式。 Promise 與 async, awaitPromise 本篇不會詳細介紹，如...
VSCode JS 註解就是你的文件
在使用文字編輯器時，你是否有以下狀況呢？ 搞不懂，為什麼文字編輯器總是沒跳提示 函式庫沒有安裝插件就不知道如何輸入 同事或過去自己寫的函式不知道在寫什麼，都要花上許多時間去理解 想要為函式補充註解，但不知道如何著手 那麼你可以試著使用 VSCode，強大的 Intellisense 搞定所有函式...
純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹
幾年前的 iOS、MacOS 更新以後，毛玻璃視覺效果越來越受到許多人喜愛，在使用毛玻璃以前，背景與主要的畫面區塊的風格整合是一件麻煩的事情，除了畫面的協調性外，還要維持資訊的傳達性。而毛玻璃可以讓背景的畫面霧化，凸顯上層的主要資訊，並讓背景與整體不致於產生衝突感。 網頁在套用毛玻璃的特效流程近年有...
新手前端也不該犯的錯：圖片變形
網頁常見錯誤的之一：圖片比例變形 當網頁有此錯誤時，會大大的降低網頁的畫面水平，如果是作為一個求職作品，也會被貼上 “不細心” 的標籤，本篇介紹幾種簡單的方式來解決此問題。 以下是原始圖片（圖片來自於 Unsplash，如果失連歡迎與我聯絡）。 .box { height: 400px !i...
Bootstrap 5 格線的運作原理
.box { height: 100px; background-color: #69F0AE; display: flex; justify-content: center; align-items: center; } Bootstrap 4 中我經常會建議學員不要...
怎樣也不會失手的 Bootstrap 格線運用技巧
.box { height: 100px; background-color: #69F0AE; } .form-row>.col, .form-row>[class*=col-] { padding-right: 5px; padding-left: 5px; } .form...
手把手自訂你的 Bootstrap 樣式
Bootstrap 在第四版以後在介紹文檔，說明自己是一個函式庫而不是框架。樣式的框架代表載入後都是基於此架構開發，無論是否喜歡特定的內容，都需要先全盤接受後再自行調整；而函式庫代表你可以選用自己喜歡的部份，並且調整成合適的樣式，相對於框架來說有更高的彈性。 本篇將會依據 Bootstrap 文檔及...