Posts
All the articles I've posted.
object-fit 在 safari 失效問題
Posted on:2023/11/23 18:17:00最近在專案上圖片使用了 object-fit cover 來設定圖片,讓圖片能夠固定尺寸不會導致跑版,從電腦上去 debug 也沒有問題結果被反應了從 safari 上看卻意外的變形,但了一些支援度 can i use 是支援 object-fit 的,後來發現是因為無法取得高度,所以改使用min-height 解決。
結束滾動事件 - Scrollend
Posted on:2023/11/21 20:17:00最近需要評估一個需求,是要在滾動結束後觸發視覺效果,經過搜尋後發現有 `Scrollend` 這個事件可以使用,在此之前如果有類似需求我可能會使用 setTimeout 來做,使用上也不困難。
使用 MutationObserver 來監聽 DOM 的變化
Posted on:2023/10/29 24:17:00優化網頁互動效果!探討在使用 lenis 滾動 library 時可能遭遇的問題,特別是在處理彈跳視窗內容需要滾動的情況下。文章介紹了使用 MutationObserver API 的方法,這能夠監聽 DOM 的變化,進而達成開啟彈跳視窗時動態處理 lenis 的效果。
JS 陣列排序的新方法 - toSorted()
Posted on:2023/06/08 20:30:00優化 JavaScript 陣列排序!新的 toSorted() 方法讓你不必擔心原始陣列變動,直接獲得排序後的結果。相較於傳統 sort(),這個方法省去額外複製陣列的步驟,讓開發更為便利。例子中展示了如何使用 toSorted(),輕鬆獲得排序後的新陣列,同時保留原始陣列。需注意,目前 Firefox 尚未支援此方法,因此在應用時需謹慎。深入了解可參考 MDN 的相關資料。提升排序效率,體驗更順暢的陣列操作!
Nuxt3 連接 Supabase 執行 Server Service 的操作
Posted on:2023/04/22 22:00:00近期開始研究 Nuxt3,再將專案建立後發現除了歡迎畫面變酷之外,官方也很貼心的提供了一份 [Module 清單](https://nuxt.com/modules),而透過 Nuxt 這次的 Module 功能都能夠更快速的將這些功能整合進專案中,只要敲敲幾個字進去 `nuxt.config.js` 就好了,真的讚。
window 10 點右鍵選單會出現沒有回應,檔案總管 Lag 的解決方法
Posted on:2023/04/20 09:23:00其實這個問題已經存在一陣子,但因為是公司電腦也就不理他,直到今天要按右鍵對某個資料夾做壓縮時,只要按右鍵就是轉圈圈沒有回應,檔案總管自動重啟無限循環,重開機也沒有好轉,才開始上網找尋排除方法。
改用 node-sass 改善 dart-sass 編譯緩慢的問題
Posted on:2023/04/18 17:30:00這幾天遇到使用 gulp-sass 編譯速度極慢的問題,原本的官方範例碼造成編譯時間在一夜之間增加至 2~3 秒。經過 chatgpt 與網路查詢後,發現 Dart Sass 取代了 node-sass,雖然更新至最新版本無效,最後死馬當活馬醫改用 node-sass 後,編譯時間卻神奇地回到 1 秒內。排除了可能的錯誤原因,最終以這個「靈異故事」收尾,繼續使用 node-sass 完成專案。
Prettier - 程式碼格式化工具
Posted on:2023/04/14 08:58:00之前開發專案都比較屬於獨立開發,所以比較沒有注重於統一程式碼風格,可能會因為寫 Code 時間不同,所以有些地方是用單引號,有些地方又用雙引號等等問題,但最近有了轉職的想法,為了避免自己的這種惡習以及面試可能會被問到相關的問題,所以就針對這類的工具做研究,而最後挑選到的是 Prettier,除了可以加入到專案中外,也可以透過 VSCode 的 Extension 來使用。