給定一個 JavaScript 陣列，下面介紹如何清空這個陣列並將所有元素刪除。 有多種方法可以清空一個 JavaScript 陣列。 最簡單的方法是將陣列的長度設為0： const list = ['a', 'b', 'c'] list.length = 0 另一個方法是直接將一個空陣列分配給原始的變數，這樣會改變原始的陣列參考，所以需要使用 let 而不是 const： let list = ['a', 'b', 'c'] list = []

我有這個需求。我想要創建一個現有網站的完全複製品，並將其放在一個子域名下，作為存檔。 現在這個網站已經使用版本控制，我想要保留 Git 的歷史記錄，但也想要將其部署到一個新的 GitHub 倉庫，這樣我就可以將它們分開部署了，現在兩個網站可以各自有自己的命運。 這個網站是一個 Hugo 網站，所以我只需將網站文件夾複製到另外一個文件夾中即可，這樣在本地完成了。 然後我進入複製後的網站文件夾，在終端中運行以下命令： git remote -v 這將列出現有的 GitHub 倉庫作為「origin」遠端倉庫。 然後我運行： git remote rm origin 這將刪除 origin 遠端倉庫，這樣運行 git remote -v 將不再返回任何結果。 現在，由於我使用 GitHub Desktop，我只需將該文件夾拖放到該應用程序中，然後就能從那裡創建一個新的、不同的 GitHub 倉庫了。

通過刪除舊的 Node 模塊節省空間 我需要將一個充滿舊項目的資料夾轉移到一台新的電腦上，並在壓縮該資料夾後，我發現它的大小為8GB。對於僅包含文本文件的某些程式項目來說，這有點太大了。 這些都是 JavaScript 項目，並且每個項目都包含一個名為 node_modules 的資料夾。 這些資料夾完全是不必要的，因為我始終可以在項目中運行 npm install 重新生成它們，而且大部分我在那個資料夾中的項目都是我永遠不會再使用的舊東西。 所以我決定刪除所有的 node_modules 資料夾，但是他們太多了。所以我進入了父資料夾，我將其稱為 dev，然後在 ZSH 終端中（這是 macOS Catalina 默認的 shell）運行了以下命令： find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 這將我的資料夾大小從8GB減少到了2GB。對於一行命令來說，效果還不錯。 我在這篇博客上找到了這個命令，你可以在那裡找到更多對命令細節的解釋。

每位程式設計師都會犯錯。畢竟，我們都是人類。 可能會忘記加上分號，使用錯誤的變數名稱，或者傳遞錯誤的引數給函式。 在 PHP 中有三種主要的錯誤類型： 警告：這些是較輕微的錯誤，不會停止程式的執行。PHP 會輸出一個訊息，然後繼續執行。 注意事項：與警告類似，注意事項也不會停止程式的執行，而只是輸出一個訊息。 錯誤：錯誤會終止程式的執行，並輸出一個告訴你錯誤原因的訊息。 錯誤訊息在哪裡輸出呢？這取決於你的設定。 在開發模式中，將 PHP 的錯誤直接記錄到網頁中很常見，同時也記錄在錯誤日誌中。你希望能夠盡早看到這些錯誤，以便修正它們。 然而，在正式部署環境中，你不希望在網頁中顯示這些錯誤，但你仍然想要知道它們。因此，你需要將它們記錄到錯誤日誌中。 這些設定都在 PHP 的設定檔中決定。 如果你還不熟悉這些，沒關係，你的伺服器配置中有一個檔案決定了 PHP 的運行方式，它就是 php.ini。 php.ini 的確切位置取決於你的設定。要找出自己的設定，最簡單的方法是將以下程式碼添加到一個 PHP 檔案中，然後在瀏覽器中執行它： <?php phpinfo(); ?> 然後你將在 “Loaded Configuration File” 下方看到檔案位置： 在我的例子中是 /Applications/MAMP/bin/php/php8.1.0/conf/php.ini。 注意：phpinfo() 生成的資訊包含了許多其他有用的資訊，記得查看它們。 使用 MAMP，你可以打開 MAMP 應用程式資料夾，然後打開 bin/php，進入你所使用的 PHP 版本（例如我的是 8.1.0），然後進入 conf。在那裡你會找到 php.ini 檔案： 打開這個檔案，裡面有一長串的設定，並提供了對每個設定的詳細解釋。 我們對 display_errors 非常感興趣： 在正式部署環境中，希望設置它的值為 Off，如上方的文件所說。 這將使得錯誤不會再顯示在網頁上，但你仍然可以在這個案例中的 MAMP 的 logs 資料夾中的 php_error.log 檔案中看到它們： 這個檔案的位置取決於你的配置方式。 你可以使用 error_log() 函式將額外的資訊加入錯誤日誌： error_log('test'); 通常會使用錯誤記錄服務（例如 Monolog）來處理錯誤。

在過去幾年中，Promises 可說是 JavaScript 中最好的東西之一。 當我們調用一個返回 Promise 的函數時，我們可以使用 then() 方法來鏈接一個在 Promise 解析 時運行的函數。 以下是使用 Fetch API 的示例： fetch('/data.json') .then(response => { console.log(response.status) }) 如果在 fetch() 調用期間出現錯誤該怎麼辦？可能是因為網絡不可用，或者網絡請求返回了錯誤。 Promise 將會被拒絕。一個 Promise 會像這樣： const thePromise = new Promise((resolve, reject) => { }) 在 Promise 內部，我們會收到兩個參數，也就是兩個函數。在 Promise 主體內，如果一切正常，則會調用 resolve() 函數： const thePromise = new Promise((resolve, reject) => { resolve('OK') // 你可以傳遞任何值 }) 如果出現問題，則會調用 reject() 函數： const thePromise = new Promise((resolve, reject) => { reject('錯誤訊息') // 你可以傳遞任何值 }) 如果出現問題，我們必須處理 Promise 的拒絕。我們可以使用 Promise 的 catch() 方法來處理：...

使用錯誤邊界 (error boundaries) 的最佳實踐來處理 React 中的錯誤 當在組件中發生錯誤時，React 會卸載整個 React 組件樹，渲染出「空白」的頁面。這是 React 處理崩潰的方式。 您不希望錯誤顯示給用戶。React 選擇顯示空白頁面。 然而，這只是默認行為。讓空白頁面出現只比給用戶顯示晦澀的訊息好一點，但您應該找到更好的方式。 如果您處於開發模式，任何錯誤將觸發詳細的堆棧跟踪信息顯示到瀏覽器的開發工具控制台中。但在正式環境中，您不想把錯誤訊息直接印給用戶。 在正式環境中，您應該攔截錯誤，並向用戶顯示某種有用的訊息。 這就是「錯誤邊界」 (error boundaries) 發揮作用的地方。 使用錯誤邊界，您可以分離應用的各個部分並在本地處理錯誤。 錯誤邊界是一個實現了 componentDidCatch() 生命周期事件的 React 組件，並將其他組件封裝在內： class ErrorHandler extends React.Component { constructor(props) { super(props) this.state = { errorOccurred: false } } componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) } render() { return this.state.errorOccurred ? <h1>出現錯誤了！</h1> : this.props.children } } 然後在組件的 JSX 中以以下方式使用它： <ErrorHandler> <SomeOtherComponent /> </ErrorHandler> 當 SomeOtherComponent 或其他子組件中發生錯誤時，以及它們擁有的整個組件子樹中發生的錯誤，ErrorHandler 將攔截並使您能夠優雅地處理錯誤。...

當你在網上獨立銷售數字產品時，你會遇到一個大問題。 我提到數字產品，因為實體產品另有一套問題。 噢，我的觀點是來自於作為一名歐洲公民，在歐盟支付稅款，尤其是在義大利（但我知道這些原則適用於所有歐盟國家）。 當你銷售數字商品（也就是遠程銷售），超過10,000歐元的門檻時，你就必須根據不同國家的稅法為每個買家收取正確的增值稅。 增值稅金額取決於國家和因素，比如“這是個消費者還是企業”。你無法知道正確的金額並隨時更新最新更改，所以你必須使用第三方供應商的數據，像是 Quaderno 和其他類似的服務。 但之後你需要把這些代收的增值稅歸還給每個國家。 如果你有大量銷售到不同國家，這將成為一個問題。 我已經有很多工作要做了，如何再去處理這個問題呢？ 而且這只是在歐盟的情況。全世界任何一個國家都有自己的稅法。我知道我應該對特定美國州收取多少銷售稅嗎？新西蘭的新稅法又是什麼情況（這只是瞎猜的）。 這真是一場噩夢。 有些人會建議“找一個會計師”。像我沒有一個一樣。 在歐盟，嗯，至少在意大利，這個國家，我知道，沒有會計師根本無法做任何生意，除非你想惹上麻煩。規定太多，支付項目太多，截止日期總是變動，規則每年都在改變（說真的，這太亂了）。 如果沒有會計師，你不得不成為一個（會計師）。 這是我不想做的事情。 而且，會計師不是白幫忙的。他們肩負的額外工作是你要支付的。 所以… 作為一個在互聯網上的創作者，該如何處理增值稅呢？我不處理。 我使用代理商。 代理商是一家公司，為你處理上述所有事務，只需支付一小部分費用。 Paddle、Gumroad、Fastspring 是我知道並過去使用過的三個。他們為你處理一切，按照你的設置，每週或每月向你支付款項。 他們收取的百分比通常是一個非常值得的平衡，節省了你的時間和精力。 如果客戶需要發票，他們會為你開具發票。如果客戶需要退款，你只需按壓一個按鈕即可。 如果國家X改變了稅法，他們會擔心這些問題。你不需要。 如果他們搞砸了，錯誤是他們的責任，不是你的。 你只需關注與那些公司的財務關係，而不需要擔心數百或者希望數千個顧客。 我真的不知道在歐盟，人們怎麼可能使用包括 PayPal 和 Stripe 在內的任何其他支付方式，這個限制使得我無法使用99％的通常由美國製作的應用程式，而這些應用程式對此毫不在意。像 Substack、Podia、Revue 和許多其他應用程式。 我知道 Teachable 是另一家同樣作為代理商的公司。其他所有公司只是將每個客戶的支付款項直接發送給你。 對於一個小型的獨立創作者（不願意為這一切煩心）而言，這並不是一件好事。

了解如何與捲動互動、處理捲動事件以及節流 在網頁中，捲動以查看頁面下方的內容可能是最常見的事件，比點擊或鍵盤事件更常見。 您可以在window對象上監聽scroll事件，以獲取用戶每次捲動頁面時的信息： window.addEventListener('scroll', event => { // 偵測到 scroll 事件 }) 在事件處理函數內，您可以通過檢查window對象的scrollY屬性來檢查當前的垂直捲動位置，通過scrollX屬性來檢查水平捲動位置。 window.addEventListener('scroll', event => { console.log(window.scrollY) console.log(window.scrollX) }) 請注意，scroll事件不是一次性的事件。 在捲動過程中，它會多次觸發，而不僅僅在捲動的結尾或開始時。因此，在事件處理函數中，如果需要進行任何操作，就有一個問題。 不應直接在事件處理函數中進行任何計算或操作，而應使用“節流”技術。 節流 scroll事件在事件期間內不僅僅觸發一次，而是在整個動作的時間範圍內持續調用其事件處理函數。 這是因為它提供了坐標，以便您可以追蹤發生的事情。 如果在事件處理函數中執行複雜操作，將影響性能，給您的站點用戶帶來困擾。 像Lodash這樣的庫提供了節流的功能，實現它需要100多行代碼，以應對所有可能的使用情景。下面是一個簡單易懂的實現，它使用setTimeout每100毫秒緩存一次捲動事件： let cached = null window.addEventListener('scroll', event => { if (!cached) { setTimeout(() => { //you can access the original event at `cached` cached = null }, 100) } cached = event }) 節流也適用於我們在鼠標事件課程中所看到的mousemove事件。同樣 - 在移動鼠標時該事件會多次觸發。 這裡有一個在Codepen上的例子： 看看這個CodePen的範例：Scrolling Events ，作者是Flavio Copes（@flaviocopes）。 如何獲取元素的捲動位置 在瀏覽器中構建用戶界面時，您可能會有一個可以捲動的元素，需要知道它的水平和垂直捲動位置。...

在使用命令行執行 Git 時，最常用的身份驗證方式是使用 SSH 金鑰。了解如何設置它們。 在使用命令行執行 Git 時，最常用的身份驗證方式是使用 SSH 金鑰。 大多數基於圖形界面的客戶端（如 GitHub Desktop）會幫你處理這個問題，但有時你需要使用命令行，所以設置好 SSH 金鑰非常有用。 此外，有時您需要一個 SSH 金鑰來執行一些有用的操作，例如在遠程服務器上拉取存儲庫。 您的電腦上的金鑰 SSH 金鑰存儲在 ~/.ssh 文件夾中。 您可以在其中擁有多個金鑰，因為 SSH 金鑰用於除了 Git 之外的其他事情。 您可以通過輸入以下命令列出所有 SSH 金鑰： ls -al ~/.ssh 如果您有現有的金鑰，您會注意到它們是成對存在的，一個文件和另一個以 .pub 結尾的名稱相似的文件： .pub 文件包含公鑰，而另一個文件包含私鑰，私鑰絕不應在任何地方共享。 您絕不能共享私鑰。如果您丟失私鑰，您將不得不重新生成新的私鑰/公鑰對，因為沒有私鑰部分身份驗證將無法成功完成。 生成新金鑰 您可以使用命令 ssh-keygen 生成新的 SSH 金鑰，該命令在所有 macOS、Linux 和具有 Linux 子系統或Git for Windows 包的現代 Windows 電腦上都可用。 下面是您使用的命令： ssh-keygen -t rsa -b 4096 -C "[[email protected]](/cdn-cgi/l/email-protection)" 最後一部分，在這個例子中填寫了一個電子郵件地址，這是一個註釋。您可以輸入任何您想要的電子郵件，它不必是您的 GitHub 帳戶，甚至可以是一個隨機字符串。如果存在歧義，了解是誰生成了金鑰可能是有用的。 密鑰生成程序會問您希望將密鑰保存在哪裡。如果這是第一個金鑰，建議使用 id_rsa 作為文件名，但最好選擇一個能讓您記住所生成的服務的名稱，比如 github_rsa。...

Next.js 是一個很好的工具，它能為我們的 React 應用提供許多內建的功能，這些功能在 Web 應用程式中至關重要。 它只為我們的專案文件提供了一點點結構。 所有可見的頁面都放在 /pages 資料夾下。 API 路由則放在 /pages/api 資料夾下。 公開可見的文件放在 /public 資料夾下。 基本上就是這樣。其他的結構都由我們來定義。 我通常會這樣做。 所有頁面需要的 React 元件都放在 /components 資料夾下。 我通常有一個 /components/Common 資料夾，然後根據頁面結構重新創建資料夾： /components/Common /components/Home /components/Profile …以此類推。 然後我有一個 lib 資料夾，其中包含所有被 React 元件或 API 路由使用的工具程式。這可能是資料獲取、庫初始化、Prisma 設置、資料庫存取、SWR 的請求器、easy-peasy store 等等，基本上任何在任何地方都可以重複使用的東西，但卻不是元件。 我也確保可以這樣引入它們： import comp from components/Common/comp import x from lib/x 使用 jsconfig.json 中的以下設定進行設置： { "compilerOptions": { "baseUrl": "." } } 我提到了我常常使用的 Prisma。這將需要它自己的 /prisma 資料夾，用於存放模式和遷移，如果需要的話，還可以有一個 SQLite 數據庫。 如果網站有內容（例如 Markdown），我會新增一個 /content 資料夾。...