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