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 問題,花了好幾個小時才找到答案,這篇文章就來跟大家分享一下我研究出來的解法。

... 繼續閱讀 ...

建立 Node.js 使用 ESM 搭配 TypeScript, ESLint 與 VSCode 的專案範本

我在兩年前曾經寫過一篇如何快速建置一個 Node.js 專案並使用 TypeScript 與 VSCode 進行開發文章,由於現在的 Node.js 大多以 ESM 為主流,TypeScript 也更新到 5.x 版,而且當時的 TSLint 也都被換成 ESLint 為主了,所以這篇文章就來更新一下內容,幫助大家更方便、更快速的建立一個支援 TypeScript, ESLint, VSCodeESM 並搭配 esbuild 的專案範本。

... 繼續閱讀 ...

如何將 Next.js 製作的網站以 Node.js 的方式部署到 Azure Web App

要將 Node.js 網站部署到 Azure Web App (Windows) 其實有點竅門,一般不熟悉 Windows / IIS 的開發人員要想把手邊的 Node.js 部署到 Azure Web App 通常都會卡關卡好久。這篇文章我就來說說我是如何將我最近翻譯的提示工程指南網站部署到 Azure Web App 的,而這是一個用 Next.js 開發的網站!

... 繼續閱讀 ...

如何利用瀏覽器原生的 Clipboard API 讀寫使用者的剪貼簿資料

我們有時候會在一些網站看到「複製到剪貼簿」功能,它不但可以複製我們肉眼看見的文字,還能複製完整的格式讓你可以貼到 Teams 或 Word 之中,有時還能複製完全客製化的內容,其實這背後都是透過瀏覽器內建的 Clipboard API 達成的。今天這篇文章我就來梳理一下 Clipboard API 的一些用法與地雷。

... 繼續閱讀 ...

前端效能調校:使用 Partytown 將笨重的 JavaScript 放到 Web Workers 執行

前端效能調校的技法多如牛毛,但最明顯的效能殺手不外乎是 JavaScript 佔用 Main Thread 而導致頁面無法回應的狀況了。最近研究 Partytown 這個函式庫,他用了一個非常巧妙的技巧,把部分 JS 自動切換到 Web Workers 背景執行。這篇文章我就來分享如何將 Partytown 安裝到任意網站中。

... 繼續閱讀 ...

如何快速建置一個 Node.js 專案並使用 TypeScript 與 VSCode 進行開發

每次要開始寫一個 Node.js 搭配 TypeScript 的專案,都沒有一個能讓自己滿意的專案範本,不然就是網路上經常找到不完整的參考文件。這篇文章我打算建立一個 Node.js 搭配 TypeScript 進行開發的專案範本,完整交代整個建置過程,並用一個簡單的例子說明開發與執行的注意事項。

... 繼續閱讀 ...