The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

前端工程研究:如何將鍵盤焦點設定在一個無法 focus 的 DIV 元素上

在我們公司所有的專案都在 Azure DevOps Services 上面管理,從專案管理、原始碼版控、CI/CD、文件管理、測試管理、專案報表等等,都在 Azure DevOps Services 上面,所以我們的團隊成員每天都會花很多時間在 Azure DevOps Services 上面協作。雖然 Azure DevOps Services 也提供了很多鍵盤快速鍵,讓使用者可以更快速的操作,但還是沒辦法滿足我們的需求,所以這個假日我就打算在寫一個 Side Project 擴充更多鍵盤快速鍵。原本以為一個小時內可以完成的,結果卻卡關在一個不起眼的功能上,那就是 DIV 元素無法被 focus 的問題,這會導致你將無法透過鍵盤的「空白鍵」來捲動頁面,我為了提升這個小小的 UX 問題,花了好幾個小時才找到答案,這篇文章就來跟大家分享一下我研究出來的解法。

... 繼續閱讀 ...

如何正確設定 Azure Pipelines 存取 Artifacts 的 npm 套件來源 (Feeds)

我昨天花了兩個小時,終於研究出怎樣才能正確設定 Azure Pipelines 存取 Azure Artifacts 的 npm 套件來源 (Feeds),設定的過程實在讓人心力交瘁,沒想到就這麼簡單的一個授權設定要花這麼久的時間才研究出正確的設定步驟。今天我就來說說如何在 Azure Pipelines 正確地設定存取 Azure Artifacts 上的 npm 套件來源 (Feeds)。

... 繼續閱讀 ...

使用 Git 的部分複製功能 (Partial Clones) 快速下載專案原始碼

由於 Git 分散式的特性,所以每個開發者都可以在自己的電腦上建立一個完整的 Git 儲存庫,這樣就可以在沒有網路的情況下進行開發,而且每個開發者都可以在自己的電腦上建立多個分支,這樣就可以在開發新功能時,不會影響到其他開發者的工作。不過,缺點就是在 git clone 的時候會大量的下載資料,尤其是專案很大的時候,這個問題就會特別明顯了!有沒有辦法可以解決呢?可以的,這篇文章我將分享 Git 的 Partial Clone (部分複製) 功能,讓你更有效率的下載專案原始碼!

... 繼續閱讀 ...

介紹好用工具:使用 Squoosh 與 Squoosh CLI 壓縮圖片

最近一直在弄客戶網站上線前的準備事項,我們在進行前端效能調校時,當然不免俗的要用 Lighthouse (GitHub) 跑一遍,結果發現除了效能殺手 Google Fonts 無解外,另一個主要的效能殺手就是沒有經過優化的圖片,畢竟圖片都是從後台上稿的,如果沒有好好的處理,是有可能會影響到用戶體驗的。今天我就來介紹一套我用很久的 Squoosh.app 網站與 Squoosh CLI 命令列工具。

... 繼續閱讀 ...

使用 git worktree 管理一個本地儲存庫下的多個工作目錄副本

不知道大家是否曾經有過這樣的需求:在一個 Git Repo 下有好幾個分支,但你在某些特殊情況下需要「同時」開啟不同分支的程式碼做開發,所以你並不想要經常的切換分支,因為當你要切換分支時,在執行 git checkout 之前都要先做一次 git stash 把尚未 commit 的變更先儲存起來,在另一個分支開發完成後又要切換回來,並透過 git stash pop 把暫存的變更復原,這樣的動作實在是太麻煩了。這個需求或許並不常見,但如果你遇到的話,那麼這篇文章應該就能幫助到你。

... 繼續閱讀 ...

如何設定 ASP.NET Core 在發行到 IIS 時移除 X-Powered-By 標頭

最近我們公司有一個新的網站即將上線,在做資安檢核的時候發現網站有回應一個 X-Powered-By 標頭,一般來說我們都會透過修改 Web.config 的方式移除這個標頭,但我希望這個動作可以在 CI/CD 的時候自動完成,而不是每次都手動調整 Web.config 設定檔。我之前在 如何透過 dotnet publish 調整 ASP․NET Core 部署到 IIS 的 Web.config 內容 文章中已經介紹了許多 ASP.NET Core 發行到 IIS 的設定技巧,今天我想來做出一點補充,讓我們可以在透過 dotnet publish 發行網站時調整 Web.config 的任意設定內容。

... 繼續閱讀 ...