我想使用 Puppeteer 點擊一個「接受全部」的 Cookie 按鈕，我使用了以下程式碼： const [linkcookie] = await page.$x("//a[contains(., '接受全部')]") if (linkcookie) { await linkcookie.click() } 請注意，如果按鈕是一個 button 的 HTML 元素（這取決於 HTML 標記的使用方式），你必須使用以下程式碼： page.$x("//button[contains(., '接受全部')]") 作為替代方式 👍 同時，你也可以參考我的完整 Puppeteer 教學

本篇文章將介紹如何利用 PurgeCSS 和簡單的 PostCSS 設置來修剪 Tailwind CSS（不涉及使用 webpack）。 最近，我決定將我的部落格 CSS 遷移到 Tailwind。 Tailwind 是一個有趣的框架，它不像 Bootstrap 或其他框架提供一組小部件，而是提供「工具程式」。 我發現 Tailwind 與我處理 HTML 的方式非常契合。 之前我在另一篇文章中介紹了如何使用 Vue 和 Tailwind，但如果沒有使用開發工具，正確設置起來可能會有些困難。因此，我決定寫這篇文章，以便日後自己回顧，也希望對其他人有所幫助 🙃 這篇文章將介紹如何在任何專案中使用 Tailwind。 安裝 Tailwind 首先，使用 npm 或 yarn 安裝 Tailwind： npm init -y npm install tailwindcss 建立設定檔 接下來，使用以下指令建立設定檔： npx tailwind init 這會在專案根目錄中建立一個 tailwind.config.js 檔案，其中包含基本的 Tailwind 設定。 設定 PostCSS 現在，需要微調 PostCSS 的配置，以確保 Tailwind 正常運行。在 postcss.config.js 中加入以下內容： module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] } 若尚未存在 postcss....

總結： 使用 for..of 循環 querySelectorAll() 方法在 document 上運行，返回滿足選擇器查詢的 DOM 元素列表。 它返回的是一個元素列表，而不是數組，而是一個 NodeList 對象。 最簡單的遍歷結果的方法是使用 for..of 循環： for (const item of document.querySelectorAll('.buttons')) { //...做一些事情 }

最近我發現你可以將 Supabase 作為你的 PostgreSQL 托管。 Supabase 是一個非常有趣的項目。它不僅僅是一個「數據庫托管」，同時也是一個可以用來進行應用程序開發的平台。它是建立在 PostgreSQL 之上的，並且提供了一個免費的 連接池，可以幫助我們避免在使用 Prisma 時耗盡數據庫連接限制的問題。 他們在免費帳戶中允許最多兩個專案，所以值得一試。 你也可以開展一個新的項目，然後在完成後刪除舊的項目。 Supabase 將自己定位為 Firebase 的替代品，除了數據庫外，還提供了身份驗證、訂閱等功能，你可以稍後再進一步探索。 注意：Supabase 也可以自托管，這樣你的兩個項目限制就會消失，但同時你需要自行管理基礎架構。 設置時，首先在 supabase.com 上使用 GitHub 登錄。 然後創建一個新的項目 然後進入“Settings”→“Database”，滾動到底部，你會找到直接連接到數據庫的連接字符串（點擊 URI） 這就是你需要將其放入 .env 文件中的 DATABASE_URL 變量。 請輸入在創建 Supabase 項目時為該項目設置的密碼。 如果你現在使用 Prisma，你可以運行 npx prisma migrate dev 從 Prisma schema 創建表。 這樣就可以連接到數據庫了，但由於 Supabase 提供了連接池，可以幫助我們免於耗盡對數據庫的連接。為什麼不使用它呢？ 如果你使用 Prisma：在使用 npx prisma migrate dev 時連接池無法正常工作，對於該命令，你必須使用上面所示的直接數據庫連接字符串。所以請記住在需要時更換 DATABASE_URL 的值。 下面是連接池連接字符串： 將它複製到你的 .env 文件中，並在末尾添加 ?pgbouncer=true 如此處所述。

我總是容易忘記如何使用 Flexbox 將文字垂直置中對齊。 你需要一個包含下列 CSS 指令的容器： display: flex; align-items: center; justify-content: center; 在 Tailwind 中，這被翻譯成 flex items-center justify-center 這些類別。 範例： <div class='flex items-center justify-center'> <button>新增</button> </div>

了解 useCallback React hook 的用途，以及如何使用它！ 如果您对 React hooks 还不熟悉，请先阅读我的React hooks 介绍。 我有时会使用一个叫做 useCallback 的 React hook。 import React, { useCallback } from 'react' 当您有一个频繁重新渲染的子组件，并向其传递一个回调时，这个 hook 是很有用的： import React, { useState, useCallback } from 'react' const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0) const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) } return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) } ReactDOM....

了解 useContext React hook 的用途，以及如何使用它！ 如果您對 React hooks 還不熟悉，請先查看我的React hooks 簡介。 在 React 中，我有時會使用一個叫做 useContext 的 hook。 import React, { useContext } from 'react' 這個 hook 與 React Context API 搭配使用。 特別是，這個 hook 允許我們獲取當前的 context 值： const value = useContext(MyContext) 這個值是指最接近的 <MyContext.Provider> 組件。 調用 useContext 還會確保在 context 值發生變化時重新渲染組件。 我建議您閱讀我的Context API 教程以更深入地了解它。

了解 useReducer React Hook 的用途以及如何使用它！ 自從 React 引入了 hooks 以來，我在幾個專案中都使用過它們，它們真的很強大。 移除所有基於 class 的組件，讓代碼更像是真正的 JavaScript。而且函數組件終於可以管理狀態了。 如果你對 hooks 還不熟悉，請先看看我的React hooks介紹。 我有時會使用到的一個 Hook 是 useReducer。 import React, { useReducer } from 'react' 這個 Hook 用於管理狀態，類似於 useState，但更複雜。 這就是 useState 和 useReducer 的關鍵差異：使用 useReducer 時，通過傳遞消息來改變狀態，而不是直接調用狀態更新函數。 如果你知道 Redux 是如何工作的，這就基本上是一樣的。一個 reducer 是一個純函數，它根據先前的狀態和已分發的動作計算出下一個狀態。 (currentState, action) => newState “純函數” 是什麼意思？純函數接收輸入並返回輸出，而不會改變輸入或其他任何東西。這意味著 reducer 返回一個完全替換先前狀態的全新狀態。 一個 reducer 應該： 永遠不要改變其參數 永遠不要生成副作用（不要有任何改變狀態的 API 調用） 永遠不要調用非純函數，即根據與其輸入之外的因素改變其輸出的函數（例如 Date.now() 或 Math.random()） 雖然沒有強制要求，但你應該遵守這些規則。這樣做的好處是：reducer 更容易進行測試，因為它們沒有副作用。 這允許集中管理狀態，允許組件通過發送消息來修改狀態，還可以在組件中使用和更改較為複雜的狀態。 讓我們通過一個計數器組件來舉個例子。 useReducer 接受一個 reducer 函數和一個初始狀態值作為參數。在這個例子中，我們的狀態是一個整數，起始值為 0：...

了解 useState React hook 的用途以及如何使用它！ 如果您对 React hooks 还不熟悉，请先查看我的React hooks 介绍。 我常用的一个 React hook 是 useState。 import React, { useState } from 'react' 使用 useState() API，您可以创建一个新的状态变量，并且有一种方法来修改它。useState() 接受状态项的初始值，并返回一个包含状态变量和用于修改状态的函数的数组。由于它返回的是一个数组，我们使用 数组解构赋值 来访问每个单独的项，就像这样：const [count, setCount] = useState(0)。 下面是一个实际的示例： import { useState } from 'react' const Counter = () => { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) } ReactDOM.render(<Counter />, document....

VS Code（VSCode）是一個功能強大，越來越受歡迎的編輯器。了解VS Code為什麼受歡迎，以及開發人員的主要功能。 介紹 應該轉用VS Code嗎？為什麼？ 入門 資源管理器 搜尋 原始碼控制 調試器 擴充功能 終端 命令面板 主題 自定義 其他配置選項 最適合編碼的字體 工作區 編輯 IntelliSense 代碼格式化 錯誤和警告 鍵盤快捷鍵 鍵盤映射 代碼段 擴充功能展示 VS Code命令行界面 解決高CPU使用問題 介紹 從一開始，編輯器就是一個奇特的存在。一些人會竭力捍衛他們選擇的編輯器。在Unix世界中，你會遇到諸如“Emacs vs vi”之類的爭論，而我對於為什麼要花這麼多時間討論一個編輯器的優點和缺點感到好奇。 在過去的幾年中，我使用過很多編輯器和集成開發環境（IDE）。我還記得TextMate，TextWrangler，Espresso，BBEdit，XCode，Coda，Brackets，Sublime Text，Atom，vim和PHPStorm。IDE和編輯器之間的區別主要在於功能集和複雜性。 相對於IDE，我更喜歡使用編輯器，因為它更快速且不會妨礙工作。在過去的12個月中，我一直在使用VS Code，這是微軟開源的編輯器，它迅速成為我最喜歡的編輯器。 應該轉用VS Code嗎？為什麼？ 如果你想知道是否應該使用VS Code，讓我說，是的，你應該從你目前使用的其他編輯器中切換到VS Code。 這個編輯器基於微軟幾十年的編輯器經驗而建立。 該編輯器的代碼完全是開源的，並且使用它無需支付費用。 它使用Electron作為基礎，使其能夠跨平台運行在Mac、Windows和Linux上。它使用Node.js構建，並且可以使用JavaScript進行擴展（這對於開發者而言是一個優勝）。 它非常快速，在使用Sublime Text之後，它是我使用過的最快速的編輯器。 它贏得了社區的熱情追捧：有數千個擴展，一些是官方的，一些是由社區製作的，而且它在調查中也名列前茅。 微軟每個月都會發布新版本。頻繁的更新促進創新，微軟正在聆聽用戶的需求，同時保持平台盡可能穩定（在我使用VS Code的一年中，幾乎每天使用它，我從未遇到過任何問題）。 入門 VS Code的主頁是https://code.visualstudio.com/。 訪問該網站下載該編輯器的最新穩定版本。 安裝過程取決於該平台，你應該已經熟悉了。 當你第一次啟動編輯器時，你將看到歡迎畫面： 左側的工具欄上有5個圖標，它們提供： 文件總管 搜索 原始碼控制 調試器 擴充功能 資源管理器 讓我們從資源管理器（播音註）開始探索。 按下側邊欄的“打開文件夾”按鈕，或者在歡迎頁面上點擊“打開文件夾…”鏈接。這兩者都會打開文件選擇器視圖。 選擇一個包含源代碼（甚至只是文本文件）的文件夾，然後打開它。 VS Code將在視圖中顯示該文件夾的內容： 右邊的空視圖顯示了一些快速操作和它們的鍵盤快捷鍵。...