首頁

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

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

VSCode Prettier 整合 ESLint 自動排版

VSCode 中有一個非常不錯的格式化工具,可以透過一個按鍵將雜亂的程式碼排列的整整齊齊,無論是 HTML、CSS、JavaScript 均可以套用。而此工具稱為 “Prettier”,在 VSCode 中也是屬於預設工具,除了預設選項外也能有許多的客製化調整。 而我們在開發的過程中,為了確保團隊的開發風格一致,JS 部分通常也會導入 ESLint 來統一撰寫風格。 但是,ESlint 與 Pr

Vue3 中使用 Event Bus

Vue 2 中要進行跨元件通訊,除了 Vuex 以外的另一個常見手法是 Event Bus,對於小型專案來說 Event Bus 相當方便,僅需要 $on、$emit 兩個語法就能進行跨元件通訊。而 Vue 3 中移除了 $on、$off 等語法,因此 Event Bus 也等同於被移除。 在 Vue 3 的官方文件中也有提如果有類似的功能需求,可以參考相關的套件 mitt 或 tiny-emit

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

工欲善其事,缺乏好工具必定壞脾氣。 身為一名工程師,將文字編輯器打造出具個人風格也是理所當然的。VSCode 是現在主流的文字編輯器,也因為使用者相當多,沒有特別打理的情況不乏會有撞衫的情況: 「你也是用 VSCode 喔」「我也是耶…」(不知怎麼往下接) 為了避免尷尬情境,並且突顯自己的高尚,將 VSCode 安裝一堆套件,讓它每次展示就像一款從未現身於世面的工具;在社群中將不會有撞衫感,更能顯

Async function / Await 深度介紹

非同步在前端的做法不斷的在進行優化調整,先前介紹過 Promise 可以解決非同步過度巢狀的問題,而本篇要介紹的 async function(非同步函式) 及 await 則可以將非同步的程式碼寫成類似同步的形式。 Promise 與 async, awaitPromise 本篇不會詳細介紹,如果不熟悉可以先查看 本篇 文章,Promise 與非同步函式兩者是密不可分的,雖然 async fu

VSCode JS 註解就是你的文件

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

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

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

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

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

Bootstrap 5 格線的運作原理

.box { height: 100px; background-color: #69F0AE; display: flex; justify-content: center; align-items: center; } Bootstrap 4 中我經常會建議學員不要自行調整水平間距,因為在不熟悉的情況下這可能會造成許多額外的問題,常見的情況有: 整體的格線風格不