總算安全度過 30 天惹，希望各位讀者們都有收穫。(oﾟvﾟ)ノ 因為篇幅關係還有很多元件沒辦法登場，如果大家真的很想看某個元件的開發過程，可以留言給我，我會努...
讓我們也把 Web Component 頁面加上一點自動化測試吧！(/≧▽≦)/ 第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\web-compo...
在社群分享酷酷的元件時，有人問到「元件有沒有不需要依賴 Vue 的版本？」 當時沒有，現在有了！(≧∇≦)ﾉ 甚麼是 Web Component Web Com...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\slider-stubborn.spec.ts import { test,...
提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧ 參數客製 展示客製化參數的效果。 src\components\slider-stubborn...
第一步來新增測試檔案。 src\components\slider-stubborn\slider-stubborn.spec.ts import { moun...
基本結構 滑動條主體很單純，使用 div 就可以完成，不過握把的部分需要使用 SVG 實現。 結構概念如下圖： 「容器」負責包裝所有內容，並提供水平移動的基...
發想 設計一個停用時握把會被拉長的滑動條。 類似這樣。( ´ ▽ ` )ﾉ 規格 外觀設計 需要有軌道與握把 可設定握把顏色與尺寸 可設定軌道樣式 功能需求...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\wrapper-physics.spec.ts import { test,...
提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧ 物體性質 調整物體性質，產生更多樣的交互作用。 src\components\wrapper-...
開始測試前，讓我們在元件中新增一些對外屬性，方便進行測試吧。( ´ ▽ ` )ﾉ src\components\wrapper-physics\wrapper-...
讓我們來開發物理包裝器元件吧！ 鱈魚：「第一步從認識碰撞偵測演算法開始！◝(≧∀≦)◟」 路人：「不會吧！╭(°A ,°`)╮」 鱈魚：「的確不會，因為我也不太...
發想 如果頁面上的元素會依照物理定律，自然下落、彈跳等等，一定很有趣。(´,,•ω•,,) 類似以下影片。( ´ ▽ ` )ﾉ 規格 功能需求 可以設定元素的...
這個章節運行測試的方式稍微不同，由於 babylon.js 套件較為龐大，如果在 dev 模式下運行第一次開啟頁面會等很久，導致測試一直超時。 所以這裡我們改成...
今天大概就是這個系列會寫寫程式的最後一篇文章了，來處理個 sitemap 好了。 Sitemap 是什麼 什麼是 sitemap 呢? 字面解釋就是網站地圖。...
提供更多範例，讓使用者了解此元件用法吧。◝( •ω• )◟ 發射參數 調整發射速度向量，就可以往任意方向發射。 src\components\util-part...
想的到會用到的套件都差不多裝完了，最後來提升一點閱讀體驗，自從某次加班一段時間過勞產生了肘隧道症候群後，除了換直立滑鼠，調整坐姿，買夠高的椅子以外，也讓自己習...
鐵人賽也接近尾聲了，各位看官可以發現一個部落格大體的架構都幾乎完成了，stage 5 只是在補一些小套件來 水 完善一些小功能，今天就來補點 andbox(沙...
開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...
所以我們要怎麼實現彩帶的效果呢？用大量的 div 嗎？ 其實還真的可行，只是畫面可能會卡到爆炸。(›´ω`‹ ) 為了效果與性能兼具，這裡使用 canvas 繪...
由於文章頁面的版面設計，左右邊都有欄目，在引用比較大張的圖片時，縮圖對我這種老人家不夠友善，所以我們添加圖片放大功能，順便優化一點圖片的樣式吧。 安裝 med...
發想 某些網頁為了獎勵使用者特定操作，會在網頁上噴出彩帶效果。 讓我們來設計一個隨時隨地都可以慶祝的拉炮元件吧！(≧∀≦)ﾉ🎉 類似以下影片。( ´ ▽ ` )...
紀錄頁面的閱讀數量，網站的訪客數，應該已經是部落格標配了看著數字的增加，總是會有一咪咪成就感。 由於我們部落格走無後端的輕量化路線，所以計算訪客數的功能就比較...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\text-characters-transition.spec.ts impo...
進入了 stage 5 慢慢的也接近賽季的尾聲啦，做部落格除了分享以外，也想要有交流討論，和大家交交朋友，所以在我們的文章中需要個評論的功能。 評論系統選型：...
現在讓我們用更多範例讓使用者更了解「逐字轉場」元件吧。ヽ(●`∀´●)ﾉ 切分文字 展示如何自定義切分文字。 src\components\text-chara...
既然都做了 classification 那我們就把順便利用他把文章列表也做出來吧，前面我們是歸檔了 tags 就來做一個基於 tags 然後帶簡單分頁功能的...
開始單元測試前，先讓我們設定一下測試範圍，避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔，所以我們在 vite 新增設定即可。 v...
自動化側邊欄目錄之後，接下來想做文章檢索的功能，比如我想看某個特定主題的文章有哪些之類的，所以今天要依照標籤、類別、時間、發文時間、更新時間等 frontma...
經過昨天的 Layout 擴充之後，文章版面越來越成熟了，不禁開始思考一個問題，每次新增文章、調整目錄結構都要手動在 sidebar.ts 裡面調來調去的，體...
鱈魚
Opshell
iThome鐵人賽
看影片追技術