我學到了一個使用uBlock Origin阻擋干擾的技巧 和大家一樣，我在上網時經常容易分心。 干擾真的很煩人。 我使用SelfControl這個不錯的Mac應用程式來封鎖那些我知道會造成分心的網站，像是Reddit和新聞網站。當我面臨無法解決的問題或正在進行重要的工作時，經常會打開新聞網站。 但有時我真的不能封鎖整個網站，比如說，StackOverflow是無法封鎖的。然而，它的一些使用者界面，像是熱門問題，真的很讓我煩惱。 有時這些問題對那些想要尋找最佳分心方式的爬蟲大腦來說真的很有趣，讓你遠離應該做的事情。 我隨機選了一個StackOverflow的頁面，在我閱讀一些JS內容時，被一些有趣的問題打斷，例如： 為什麼中世紀文明會讓新發現的土地保持未開發狀態？ 當一個星球失去大氣層時，它去哪了？ 在這之前，我對這些話題並不在意，但現在我想要知道答案，只是因為看到了這些問題。 我只是想要解決我的問題，而不是讓自己被來自StackExchange網絡的隨機問題分心。 有一個快速解決方法可以解決這個問題。 我使用uBlock Origin，而且我剛剛發現可以用它來封鎖網頁的某些部分，只需點擊一下。 點擊uBlock Origin擴展功能圖標，點擊選取器圖標進入元素選取模式，然後選擇你想永久隱藏的頁面的某個部分。 然後點擊“創建”按鈕： 這個部分就會消失。重新載入頁面，它仍然不見了。 這可以提升一些失去的生產力，直到下一次重新設計或HTML類名更改之前。 這在任何網站上都可以使用，但實際上在一些網站上這並不容易實現。原因是自動產生的CSS類/ID過多。這種方法使用CSS來封鎖頁面的某些部分。我試過在Twitter上進行選擇，結果是這樣的： 我不確定，但可以說這些垃圾是有意為之。它們在每次重建時都會更改，使得使用這個工具自定義頁面成為不可能。 我無法完全封鎖Twitter，因為有時我需要使用它，但我希望可以封鎖“熱門趨勢”、“誰來關注”、“你可能會喜歡”等，這樣我才能在不被標籤吸引的情況下打開Twitter。但很可惜我無法用這種方式做到。

使用URLSearchParams訪問和修改查詢字符串值 HTTP協議允許使用查詢字符串發送對網頁的請求。 像這樣： https://test.com/?name=roger https://test.com/hello?name=roger 這種情況下，我們有一個名為name的單一查詢參數，其值為roger。 您可以有多個參數，像這樣： https://test.com/hello?name=roger&age=20 通常情況下，通過查詢字符串傳遞的參數在服務器端用於生成適當的響應。這是如何使用Node.js訪問查詢參數的方式。 要在瀏覽器中使用JavaScript訪問查詢的值，我們有一個名為URLSearchParams的特殊API，所有現代瀏覽器都支持它。 這是我們如何使用它： const params = new URLSearchParams(window.location.search) 注意：不要將完整URL作為參數傳遞給URLSearchParams()，而只需將URL的查詢字符串部分作為參數傳遞給它，這可以通過window.location.search獲得。 在這種情況下： https://test.com/hello?name=roger window.location.search等於字符串?name=roger。 現在，您擁有了params對象，可以對其進行查詢操作。 您可以檢查是否傳遞了某個參數： params.has('test') 您可以獲取參數的值： params.get('test') 您可以使用for..of迭代所有參數： const params = new URLSearchParams(window.location.search) for (const param of params) { console.log(param) } 一個參數可以有多個值。 在這種情況下，我們多次傳遞相同的參數名，像這樣： https://test.com/hello?name=roger&name=flavio 我們無法檢測到某個參數是否被多次傳遞。如果我們使用params.get('name')，我們只會得到第一個值。 我們可以使用params.getAll('name')來獲取傳遞的所有值的數組。 除了has()，get()和getAll()之外，URLSearchParams API還提供了其他幾個方法，我們可以使用這些方法來循環遍歷參數： forEach()遍歷參數 entries()返回包含參數鍵/值的迭代器 keys()返回包含參數鍵的迭代器 values()返回包含參數值的迭代器 其他用於修改參數的方法，用於在頁面中運行的其他JavaScript中（它們不會更改URL）： append()用於向對象附加新參數 delete()用於刪除現有參數 set()用於設置參數的值 我們還可以使用sort()按鍵值對參數進行排序，並且有toString()方法可以從這些值生成查詢字符串。 我們可以使用append()/set()/delete()來編輯查詢字符串，並使用toString()生成新的查詢字符串。

了解useMemo React hook的用途，以及如何使用它！ 如果你對React Hooks還不太熟悉，請先看看我的React Hooks介紹。 有時我會使用一個React Hook叫做useMemo。 import React, { useMemo } from 'react' 這個hook用於創建一個儲存的值。 這個hook和useCallback非常相似，不同之處在於useCallback返回一個經過儲存的回調函數，而useMemo返回一個儲存的值，即該函數調用的結果。用例也不同，useCallback用於傳遞給子組件的回調函數。 有時候，你需要計算一個值，可能是通過複雜的計算或者是從數據庫中進行昂貴的查詢或者通過網絡獲取。 使用這個hook，這個操作只會執行一次，然後該值將被存儲在儲存的值中，下次你想要引用它時，你將能夠更快地獲取它。 以下是使用方法： const memoizedValue = useMemo(() => expensiveOperation()) 請確保在useMemo()的第二個參數中添加一個空數組，否則將不會進行任何儲存操作。 如果你需要傳遞參數，你還需要將它們作為數組傳遞： const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2]) 如果其中一個參數在你訪問該值時發生變化，該值將被重新計算而無法使用儲存。

了解useRef React hook的用途，以及如何使用它！ 如果您对React hooks还不熟悉，请先查看我的React hooks简介。 我有时会使用一个React hook，那就是useRef。 import React, { useRef } from 'react' 这个hook使我们可以以命令式的方式访问DOM元素。 这是一个例子，我在控制台打印了包含计数值的span元素的DOM引用的值： import React, { useState, useRef } from 'react' const Counter = () => { const [count, setCount] = useState(0) const counterEl = useRef(null) const increment = () => { setCount(count + 1) console.log(counterEl) } return ( <> Count: <span ref={counterEl}>{count}</span> <button onClick={increment}>+</button> </> ) } ReactDOM.render(<Counter />, document.getElementById('app')) 请注意const counterEl = useRef(null)这一行，以及<span ref={counterEl}>{count}</span>。这是设置链接的地方。...

學習如何在Vue中根據條件動態應用類別或其他類別。 假設您希望根據isDark屬性的值來將background-dark類別應用於元素上，如果它是true的話，否則添加background-light類別。 在Vue中，您該如何做到這一點？ 使用 :class="[ isDark ? 'background-dark' : 'background-light' ]"。 以下是一個示例： <template> <div :class="[ isDark ? 'background-dark' : 'background-light' ]"> <h1>{{ msg }}</h1> </div> </template> <script> export default { props: { isDark: Boolean } } </script> <!-- 添加“scoped”屬性將CSS限制在此元件內部 --> <style scoped> .background-dark { background-color: #000; } .background-light { background-color: #fff; } </style> （非常感謝Adam Wathan在Tailwind Slack上提出這個建議）

如何使用瀏覽器提供的confirm() API來讓使用者確認操作 confirm()允許我們在執行某些操作之前詢問使用者確認。 這個API的歷史可以追溯到網絡的起源，並且被每個瀏覽器支持。 它非常簡單，我認為它在許多不同情況下都可能派上用場，而不需要自定義的UI。 它的工作原理如下：您調用confirm()函數，傳遞一個表示要確認的內容的字符串，該內容將顯示給用戶： confirm("確定要刪除該元素嗎？") 在Chrome中顯示如下： 在Safari中顯示如下： 在Firefox中顯示如下： 正如您所見，在每個瀏覽器中顯示稍有不同，但是概念是相同的。 您應該調用window.confirm()，但由於window是隱式的，所以也可以僅使用confirm() 瀏覽器會阻止腳本的執行，直到用戶點擊確定或取消按鈕。沒有點擊按鈕，您無法退出。 對confirm()的調用會返回一個布爾值，如果用戶點擊了確定，則返回true；如果用戶點擊了取消，則返回false，因此我們可以將其賦值給一個變量，或在條件語句中使用它： const confirmed = confirm("確定要刪除該元素嗎？") if (confirm("確定要刪除該元素嗎？")) { console.log('已確認') }

優化常見的電子郵件或其他通訊任務 在晚上10點睡覺之前，我回答了收件匣中最重要的電子郵件。 我一口氣睡了8個小時（這是我作為人類所需的最少時間），醒來時發現有67封新郵件。 我正在推出我的JavaScript全棧課程，這是一個有趣的工作。我收到了很多問題的電子郵件，有學生想連接學生計劃，也有報名確認通知。 其中一部分郵件需要與其他內容相同的答案，只是需要一些個性化。例如，每次給予學生或購買力平價折扣，都需要寫很多內容。 所以我設置了一種可以更快速完成這一過程的方式，同時不會失去我想要的個人化。通過更快速地回答那些常見的要求，同時將我花在回答不常見的要求的時間減少，以便更專注地回答。 有很多應用程序可以做到這一點，但我已經安裝了一個，所以我使用了這個。 這是一個名為Dansh的macOS應用程序。它可以幫助開發人員快速找到代碼文檔，即使在免費版本中也非常好用。 您可以下載您使用的所有東西的文檔： 然後，您可以搜索您需要的內容，而不需要一直使用Google： 這個應用程序的一個功能叫做片段。您需要在設置中啟用它： 然後您會在文件菜單中看到New Snippet選項： 這樣就可以進入以下界面： 現在，您可以在窗口的主要部分編寫一些文本，並添加您想要的縮寫。我用反引號開始我的，以確保我不會意外觸發它們，但您可以使用任何您想要的符號： 現在，我可以打開任何應用程序，輸入反引號，然後輸入hello，這樣就會自動變成Hello!。 對於較長的文本，這將非常有用。 您可以添加佔位符。 點擊最右邊的按鈕，選擇“佔位符” 您將看到它被添加到文本中： 現在，當我輸入我的片段縮寫時，我會得到一個彈出窗口，讓我輸入想要的值： 您可以擁有多個佔位符，並且還可以使用其他選項來添加剪貼板的內容、日期，放置光標在所需位置等等…非常方便。 它主要是用於代碼片段，但我發現它對於這個選項也非常有用。 一旦你有很多代碼片段，你就希望設置一個搜索配置文件，這樣你可以只搜索片段，而不必在所有已安裝的文檔集中搜索它們，以便更容易找到它們。 否則，默認情況下搜索將在所有地方進行，並且可能無法快速找到您的片段：

我遇到了這個問題。 我想在一個頁面中嵌入YouTube視頻，但由於需要使用iframe，我無法弄清如何正確地設置其高度和寬度，以在流動佈局中正常工作。 過了一段時間，我找到了解決方案。 使用React和Tailwind的代碼： <iframe className="aspect-video w-full" src={"Youtube嵌入URL"}> </iframe> 不使用React的Tailwind代碼： <iframe class="aspect-video w-full" src="Youtube嵌入URL"> </iframe> 純HTML和CSS： <iframe style="aspect-ratio: 16 / 9; width: 100%" src="YouTube嵌入URL"></iframe> YouTube嵌入URL的格式如下： https://www.youtube.com/embed/VIDEO_ID 因此，如果您有視頻URL，您需要將其更改為相應的格式，例如： videourl.replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/') 一些舊的教程仍然列出使用絕對/相對方式的技巧，例如： <style> .videocontainer { position:relative; padding-bottom:56.25%; } .videocontainer iframe { width:100%; height:100%; position:absolute; } </style> <div class="videocontainer"> <iframe src="YouTube嵌入URL"></iframe> </div> 我更偏愛更簡單的aspect-ratio屬性。

使用地理定位 API 我們可以向瀏覽器請求使用者的位置座標。 瀏覽器提供了一個 navigator.geolocation 對象，通過這個對象我們可以執行所有的地理定位操作。 由於安全性考慮，地理定位 API 只在使用 HTTPS 服務的頁面上可用，並且在所有現代瀏覽器上都可用。 navigator.geolocation 由於 window 是全局對象，我們可以直接訪問 navigator 而無需指定 window.navigator。 瀏覽器提供的 window.navigator 屬性指向一個名為 Navigator 對象 的容器對象，它使我們能夠使用許多 Web 平台 API。 geolocation 對象提供了以下方法： getCurrentPosition() watchPosition() clearWatch() 第一個方法用於獲取當前的位置座標。當我們第一次調用此方法時，瀏覽器會自動要求用戶允許我們訪問此信息。以下是在 Chrome、Firefox 和 Safari 上展示此界面的示例： 此操作只需在每個來源上執行一次。您可以更改您的決定，並撤消權限決策。以下示例演示如何在 Chrome 上進行更改： 一旦授予此權限，我們就可以繼續操作。 獲取使用者的位置 讓我們從以下示例代碼開始： navigator.geolocation.getCurrentPosition(() => {}) 應該會彈出權限窗格，請允許權限。 請注意，我傳遞了一個空的箭頭函數（arrow function），因為該函數需要一個回調函數。 此函數接收一個包含實際位置信息的 Position 對象： navigator.geolocation.getCurrentPosition(position => { console.log(position) }) 此對象具有2個屬性： coords，一個 Coordinates 對象 timestamp，獲取位置時的 UNIX 時間戳 Coordinates 對象具有幾個定義位置的屬性： accuracy，位置測量值的精確度，以米為單位。 altitude，測量的高度值。 altitudeAccuracy，高度測量精確度，以米為單位。 heading，設備行進的方向。以度為單位表示（0 = 北，90 = 東，180 = 南，270 = 西）。 latitude，測量的緯度值。 longitude，測量的經度值。 speed，設備行進的速度，以米/秒為單位。 根據不同的實現和設備，其中一些屬性可能為 null。例如，在我的 MacBook Air 上運行的 Chrome 上，我只獲得了 accuracy、latitude 和 longitude 的值。...

我正在設置一個新的編輯器，並嘗試進行GitHub的推送工作流程。 我提交了我的更改，點擊“Push”按鈕，然後出現一個對話框要求輸入GitHub帳號和密碼。 在GitHub上，我已經設置了雙重認證，因此不能只使用這些憑證直接登錄。 我需要做的是創建一個與應用程序綁定的個人訪問令牌，並具有所需權限。 所以，我進入GitHub設置中，找到開發者設置： 點擊個人訪問令牌： 現在添加一個名稱，以便您記住此令牌的用途，將到期時間設置為“不過期”，並啟用repo範圍。這是您唯一需要的範圍： 保存後，您將能夠看到這個令牌： 現在將此令牌作為對話框窗口中的密碼輸入。 完成！