讓我們來開發物理包裝器元件吧！ 鱈魚：「第一步從認識碰撞偵測演算法開始！◝(≧∀≦)◟」 路人：「不會吧！╭(°A ,°`)╮」 鱈魚：「的確不會，因為我也不太...
開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...
基本結構 滑動條主體很單純，使用 div 就可以完成，不過握把的部分需要使用 SVG 實現。 結構概念如下圖： 「容器」負責包裝所有內容，並提供水平移動的基...
緣起 源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。 簡單來說就是設計奇奇怪怪的元件。 別看這些元件好像很沒用，實作起來...
所以我說那個畫面呢？ 畢竟是網頁，還是應該先來個網頁才能夠有畫面嘛。( ´ ▽ ` )ﾉ 鱈魚：「讓我們從頭開始建立網頁吧！ˋ( ° ▽、° ) 」 路人：（轉...
從第二階段開始就會寫一些程式啦~終於開始擠牙膏出來了，在寫程式之前，我希望有個聰明靈活的小助手可以幫助我這個老眼昏花的碼農，首先想到的事 ESLint + P...
所有的開發第一步一定是通靈，喔不對，是分析需求。(≖‿ゝ≖)✧ 你一定在想這個元件又沒什麼功能，是要寫個雞毛需求。( ・ิω・ิ) 其實你說得很對，不過這就和練...
今天我們要來安裝、啟動還有調整 VitePress 的首頁，： 快速安裝 VitePress 可以單獨使用，也可以安裝到現有專案中。在這兩種情況下，都可以使用...
改完首頁樣式之後，就會開始想把 header 調整成自己想要的樣子了，看了 官方文件 就會知道，如果我們要調整 header 的內容，我們需要打開 docs/...
現在有需求和規格了，讓我們開始開發吧。 基本結構 第一步先來建立基本樣式，需求提到「除了按鈕本體，在按鈕離開後，會有『拓印』留在原地」。 所以應該要有個容器，裡...
接下來讓我們進行 e2e 測試吧！( •̀ ω •́ )✧ e2e 測試和單元測試差在哪？e2e 測試會著重於在接近真實環境下進行測試，透過 Playwrigh...
緣起： 在全端打滾久了後，終於在去年底默默轉職了純前端，更多東西要塞進我小小的腦袋裡，但是度過了一段很充實的時光，只是心心念念的部落格就離我越來越遙遠了......
看一篇文章最大的不是寫的爛，而是他環境跟你差的遠遠的。-------------------- By Opshell ※ 廣告：請考慮到Opshell's...
到昨天，整個環境才算是設定好了，水了 12 天了，接下來該認認真真的寫一點程式了，那我們今天來水點 Vite 的 plugin 吧 (被拖去打)等等聽我解釋，...
Why write & Why is vitepress 距離weblog(部落格) 線上日記型式的個人網站：張貼文章、圖片或影片，來記錄生活、抒發情...
發想 設計一個停用時握把會被拉長的滑動條。 類似這樣。( ´ ▽ ` )ﾉ 規格 外觀設計 需要有軌道與握把 可設定握把顏色與尺寸 可設定軌道樣式 功能需求...
經過前幾天的水之後，我們部落格的基本設定應該都處理的差不多了，積極的看官可能都新增了一堆頁面在玩了，那我們今天就來正式部署出來，快速拉高成就感吧。 建立 Gi...
沒想到簡單的 config 設定可以寫到兩天，接續昨天的 nav 之後，今天就從 sidebar 開始吧。 sidebar (側邊欄) 這邊是進入文章頁面的時...
昨天設定了 VitePress 集成的 markdown-it 套件功能，今天不出意外的就是要安裝其他的套件來水一天，但是不出意外的出意外了，除了 todo-...
所以我們要怎麼實現彩帶的效果呢？用大量的 div 嗎？ 其實還真的可行，只是畫面可能會卡到爆炸。(›´ω`‹ ) 為了效果與性能兼具，這裡使用 canvas 繪...
現在讓我們對元件進行單元測試吧 單元測試的原則為「把待測物當成黑盒子，專注於測試公開介面」，也就是說我們只會針對元件的 template、props、event...
發想 如果頁面上的元素會依照物理定律，自然下落、彈跳等等，一定很有趣。(´,,•ω•,,) 類似以下影片。( ´ ▽ ` )ﾉ 規格 功能需求 可以設定元素的...
元件測試完成後，讓我們新增更多範例吧！( ‧ω‧)ノ╰(‧ω‧ ) 新增範例 與其使用大量文字描述參數用途，不如提供情境完整的範例，可以讓使用者有更具體的理解。...
開始單元測試前，先讓我們設定一下測試範圍，避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔，所以我們在 vite 新增設定即可。 v...
進入了 stage 5 慢慢的也接近賽季的尾聲啦，做部落格除了分享以外，也想要有交流討論，和大家交交朋友，所以在我們的文章中需要個評論的功能。 評論系統選型：...
前面我們透過了引用 Vue Component 的方式做了一個履歷表，可以客製我們想要的排版和內容，如果 Opshell 想要應徵多種職缺，需要多篇履歷，這樣...
今天大概就是這個系列會寫寫程式的最後一篇文章了，來處理個 sitemap 好了。 Sitemap 是什麼 什麼是 sitemap 呢? 字面解釋就是網站地圖。...
紀錄頁面的閱讀數量，網站的訪客數，應該已經是部落格標配了看著數字的增加，總是會有一咪咪成就感。 由於我們部落格走無後端的輕量化路線，所以計算訪客數的功能就比較...
基本結構 第一步先來建立基本樣式，需求提到「預設 p 標籤，切分後的文字使用 span 標籤，且需要符合 a11y」。 可以想像結構如下圖。 讓我們加入 te...
config 拆分 加完了字型和 SCSS 之後 又要繼續在 config 加設定啦~~不過現在的 themeConfig 由於要一個個連結設定的原因，已經是...
鱈魚
Opshell
iThome鐵人賽
看影片追技術