卡斯伯提供的教學資源:


development

NODE.JS 開 API 不求人 - 教學影片

直播主題:NODE.JS 開 API 不求人活動時間時間:5/19 晚間八點直播位置:六角學院 Youtube 頻道 本次直播內容包含: API 的運作原理 建立 CRUD 的 API 範例 前端與後端的 API 串接示範 共筆文件:共筆文件 影片 講者:卡斯伯六角學院共同創辦人從設計轉行前...

development

VSCode Prettier 整合 ESLint 自動排版

VSCode 中有一個非常不錯的格式化工具,可以透過一個按鍵將雜亂的程式碼排列的整整齊齊,無論是 HTML、CSS、JavaScript 均可以套用。而此工具稱為 “Prettier”,在 VSCode 中也是屬於預設工具,除了預設選項外也能有許多的客製化調整。 而我們在開發的過程中,為了確保團隊...


development

Vue3 中使用 Event Bus

Vue 2 中要進行跨元件通訊,除了 Vuex 以外的另一個常見手法是 Event Bus,對於小型專案來說 Event Bus 相當方便,僅需要 $on、$emit 兩個語法就能進行跨元件通訊。而 Vue 3 中移除了 $on、$off 等語法,因此 Event Bus 也等同於被移除。 在 Vu...

development

12 個前端愛用的 VSCode 擴充套件

工欲善其事,缺乏好工具必定壞脾氣。 身為一名工程師,將文字編輯器打造出具個人風格也是理所當然的。VSCode 是現在主流的文字編輯器,也因為使用者相當多,沒有特別打理的情況不乏會有撞衫的情況: 「你也是用 VSCode 喔」「我也是耶…」(不知怎麼往下接) 為了避免尷尬情境,並且突顯自己的高尚,將 ...

development

Async function / Await 深度介紹

非同步在前端的做法不斷的在進行優化調整,先前介紹過 Promise 可以解決非同步過度巢狀的問題,而本篇要介紹的 async function(非同步函式) 及 await 則可以將非同步的程式碼寫成類似同步的形式。 Promise 與 async, awaitPromise 本篇不會詳細介紹,如...

development

VSCode JS 註解就是你的文件

在使用文字編輯器時,你是否有以下狀況呢? 搞不懂,為什麼文字編輯器總是沒跳提示 函式庫沒有安裝插件就不知道如何輸入 同事或過去自己寫的函式不知道在寫什麼,都要花上許多時間去理解 想要為函式補充註解,但不知道如何著手 那麼你可以試著使用 VSCode,強大的 Intellisense 搞定所有函式...

development

純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹

幾年前的 iOS、MacOS 更新以後,毛玻璃視覺效果越來越受到許多人喜愛,在使用毛玻璃以前,背景與主要的畫面區塊的風格整合是一件麻煩的事情,除了畫面的協調性外,還要維持資訊的傳達性。而毛玻璃可以讓背景的畫面霧化,凸顯上層的主要資訊,並讓背景與整體不致於產生衝突感。 網頁在套用毛玻璃的特效流程近年有...

development

新手前端也不該犯的錯:圖片變形

網頁常見錯誤的之一:圖片比例變形 當網頁有此錯誤時,會大大的降低網頁的畫面水平,如果是作為一個求職作品,也會被貼上 “不細心” 的標籤,本篇介紹幾種簡單的方式來解決此問題。 以下是原始圖片(圖片來自於 Unsplash,如果失連歡迎與我聯絡)。 .box { height: 400px !i...

development

Bootstrap 5 格線的運作原理

.box { height: 100px; background-color: #69F0AE; display: flex; justify-content: center; align-items: center; } Bootstrap 4 中我經常會建議學員不要...

development

怎樣也不會失手的 Bootstrap 格線運用技巧

.box { height: 100px; background-color: #69F0AE; } .form-row>.col, .form-row>[class*=col-] { padding-right: 5px; padding-left: 5px; } .form...

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))
撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))