問題：在我的Markdown文件中，我需要對第一個ul進行樣式設置，也無法通過添加類名或ID來使用CSS進行選擇。 所以我研究了如何使用選擇器來選中它。 HTML結構如下： <div id="content"> <ul> ...目錄 </ul> ...其他HTML內容 </div> 下面的代碼將選中div#content的第一個子元素ul並保持其他ul元素不受影響： div#content > ul:first-of-type { ...我的樣式 }

我正在尋找一個完美的地方來托管我正在建設的新應用程序，當時我決定試試DigitalOcean Apps。 DigitalOcean是VPS領域的巨頭之一，您可以閱讀我的教程《如何在DigitalOcean上創建第一個VPS》。 我考慮過Heroku，這是一個很好的選擇。但我也記得DigitalOcean Apps，這是DigitalOcean的新產品，它讓您只需將應用程序推送到GitHub存儲庫中，就可以運行應用程序。 您可以使用此聯盟鏈接獲取$100的DigitalOcean免費信用額度。 DigitalOcean Apps非常吸引人，因為您無需管理服務器，擔心其安全性、更新和維護問題，您只需關心您的應用程序，而讓DigitalOcean團隊擔心其他一切。 與運行自己的服務器相比，您需要支付更多的費用，但您無需花費更多的時間。這取決於您的情況中哪種資源更為稀缺。 但在做出決定之前，您總是可以先試試看。讓我們試試DigitalOcean Apps的工作流程。 前往 https://cloud.digitalocean.com/apps/ 在此頁面上，點擊“啟動您的應用程序”按鈕。 從這裡，您可以從GitHub存儲庫部署應用程序，或者可以啟動演示應用程序。我們將點擊“啟動演示應用程序”按鈕，這將顯示一個大型的選項列表： 我點擊了“Ruby on Rails”（但對於列出的任何其他工具、語言或框架，過程都是相同的）。 現在，我可以為應用程序選擇一個名稱、一個部署位置以及要使用的分支（main是默認值）： 現在是應用程序配置頁面，具體取決於您之前選擇的選項。我們可以選擇應用程序的類型（這裡只有“Web Service”一個選項），可以設置該組件用於監聽HTTP請求的路徑，可以設置環境變量，可以定義構建命令，可以選擇運行的HTTP端口。 如果應用程序需要，還可以添加一個從7美元/月起價的數據庫。 當準備好之後，點擊“下一步”，您可以選擇要托管此應用程序的計劃。DigitalOcean Apps可以免費運行靜態站點，但對於我們選擇的服務器渲染的應用程序，我們的選項從每月5美元的Basic計劃開始，還有每月12美元的Pro計劃： 價格應按小時計費，就像DigitalOcean droplets一樣。您可以快速啟動應用程序來嘗試它，並幾乎不用支付費用。 最終價格列出了10美元，因為它自動選擇了10美元的容器。這是DigitalOcean的通用默選選擇（我不理解），它會顯示一個更貴的選項，這也是對於常規的DigitalOcean droplets。 我建議從最基本的選項開始，根據需要進行擴展。 只需選擇每月5美元的選項即可獲得512MB RAM容器，然後可以點擊“啟動基本應用程序”按鈕： 界面切換到應用程序儀表板： 並且構建過程開始： 過了一會兒，您將收到“部署成功！”的消息： 點擊“Live App”鏈接查看正在運行的應用程序： 儀表板有幾個有用的屏幕，可用於監視CPU和內存使用情況、部署日誌，以及通過控制台訪問應用程序服務器： 您可以調整配置、擴展應用程序等等： 如果您想停止運行應用程序，並停止支付DigitalOcean運行它的費用，只需點擊“Destroy”按鈕。

以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。 有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究：將文件上傳到服務器。 在這篇教程中，我將向您解釋如何使用fetch來實現這樣的功能。 給定一個包含文件輸入字段的表單： <input type="file" id="fileUpload" /> 我們在其上附加一個change事件處理程序： document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 然後我們在handleImageUpload()函數中處理大部分的邏輯： const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) } 在這個例子中，我們向/saveImage端點發送POST請求。 我們初始化一個名為formData的新的FormData對象，並將上傳的文件附加到其中。如果我們有多個文件輸入元素，將會有多個append()調用。 第二個then()中的data變量將包含JSON解析後的返回數據。我假設你的服務器會以JSON格式作為響應返回。 參考 如何在服務器端處理上傳的圖片

了解如何使用getUserMedia()來從用戶端獲取音頻和視頻輸入。 由navigator.mediaDevices暴露的MediaDevices對象提供了getUserMedia()方法。 警告：navigator對象還公開了一個getUserMedia()方法，但已被標記為過時。這個API已經被移動到mediaDevices對象中以保持一致性。 以下是如何使用這個方法。 假設我們有一個按鈕： <button>開始串流</button> 等待用戶點擊此按鈕，然後調用navigator.mediaDevices.getUserMedia()方法。 我們傳遞一個描述我們想要的媒體約束的對象。如果我們需要視頻輸入，我們將調用： navigator.mediaDevices.getUserMedia({ video: true }) 我們也可以對這些約束進行細化： navigator.mediaDevices.getUserMedia({ video: { minAspectRatio: 1.333, minFrameRate: 60, width: 640, height: 480 } }) 您可以通過調用navigator.mediaDevices.getSupportedConstraints()來獲取設備支持的所有約束的列表。 如果我們只需要音頻，我們可以傳遞audio: true： navigator.mediaDevices.getUserMedia({ audio: true }) 如果我們需要音頻和視頻，則傳遞video: true和audio: true： navigator.mediaDevices.getUserMedia({ video: true, audio: true }) 此方法返回一個promise，因此我們將使用async/await來獲取結果到stream變量中： document.querySelector('button').addEventListener('click', async (e) => { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); }); 點擊按鈕會觸發瀏覽器中的一個面板，允許我們獲取使用媒體設備的權限： 在完成後，我們從getUserMedia()獲取的stream對象現在可以用於各種用途。最直接的用法是在頁面中的video元素中顯示視頻流： <button>開始串流</button> <video autoplay>開始串流</video> document.querySelector('button').addEventListener('click', async (e) => { const stream = await navigator....

如何在使用Git跟踪長期的變更歷史時排除幾乎所有涉及到的問題，並發現你在代碼中引入的錯誤。 有時我們會長時間地在項目上工作。我們可能會精心製作出一個完美的1.0版本，然後將其發布給公眾，然後我們開始進行錯誤修復，之後我們會收到功能要求並努力改進應用程序。 在此過程中，您發現了一個回歸錯誤：這是由代碼中的非相關更改引起的意外問題。 某些內容沒有按照預期工作，即使您最近並沒有真的更改過該部分的代碼。 或者您經常接觸某個文件或函數，以至於您無法記住哪個更改可能引起了向您報告的問題。 在任何情況下，首先要做的是確定錯誤所在。 如果您使用的是像Git這樣的版本控制系統，事情就變得容易了。您可以回到過去，找出引入該更改的確切提交。在團隊合作時，這非常重要，因為有其他人可能已經處理過這個問題，如果他們導致了錯誤，您可能不知道該怎麼辦 - 除了請他們去修復它，因為Git可以提供這些信息。 一種方法是手動檢出某個特定的提交。例如，您可以檢查昨天的代碼版本是否正常工作。 我使用 GitHub Desktop，這是由GitHub開發的一個很棒的Git客戶端。它非常適合日常使用，但無法讓我檢出單個提交。其他一些客戶端可以，但您可以使用命令行。 運行以下命令： git checkout <COMMIT_SHA> 其中，<COMMIT_SHA>是您想要回溯的提交，它看起來會像 5a06d3ca5e7adb6e67。 如果您仍然遇到問題，您可以尝试使用前一天的另一個提交進行同樣的操作，依此類推，直到找到一個代碼運行正常的提交。 現在，您需要應用“分而治之”的原則，在您嘗試且未發現問題的最後一次提交和運行正常的提交之間選擇一個提交。 重複這個過程，每次將提交的範圍縮小一半，直到找到引入問題的提交。 這是一個常見且實用的方法，Git引入了bisect命令來自動化這個過程。 從最新的提交開始。使用git checkout 您的分支名，例如 git checkout master（如果您已經檢出了較早的提交）。 然後運行以下命令： git bisect start 目前還沒有發生任何事情。您需要告訴Git一個壞的提交參考，即代碼不運行的提交： git bisect bad HEAD 以及一個好的提交，即代碼運行正常的提交： git bisect good 7f4d976e7540e28c6b0 Git開始執行過程： Bisecting: 3 revisions left to test after this (roughly 2 steps) [d18ebf1c7db9a9b44e8facc5ddb3551e641a64e2] fixes #25 看到了嗎，此處的HEAD到我提到的“good”提交之間有6個提交。Git告訴我還有2個步驟，直到找到問題所在的提交。 接下來，我測試代碼，然後告訴Git結果：git bisect bad（如果失敗）或 git bisect good（如果成功）。 重複此步驟，直到找到問題所在的壞提交，然後運行 git bisect reset 返回到HEAD提交。...

我非常推崇使用系統字體，它們快速、輕量且效果出色，但有時候你也需要一些特別的字體。 你需要一款能讓你的設計看起來很好的字體，也許像Slabo、Lato或Raleway這樣的字體。 Google提供了一個名為Google Fonts的工具，作為其眾多服務的一部分，該工具（截至撰寫本文時）支援992個字型家族： 這個界面有點令人眼花繚亂，作為一個對字體不熟悉的人，我肯定對我應該選擇哪一款字體感到困惑。 通常我會在Google上搜索「最佳Google字體」，並查看我獲得的文章，以獲得字體可能的外觀。在Google Fonts上查看數十種字體不是一個理想的方法，而且一些網站使用顏色來簡化選擇，就像這篇文章一樣： 讓我們來看一下我在我的其中一個網站上使用的字體：Press Start 2P。 這是一款適合復古網站的字體。我在我的Web平台課程首頁上使用了它，我希望給它一個電腦般的外觀。 在字體頁面上，你可以看到每個字符的呈現方式： 向下滾動，你可以看到設計師是誰，還有一個重要的部分：許可證。在這種情況下，該頁面上說明了： 您可以在您的產品和項目中自由使用這些字體，包括打印或數字格式，商業或其他用途。然而，您不能單獨出售字體。 這給了我們很多權限。 我們可以根據我們的需要自由使用這個字體，甚至在商業項目中使用它，但我們不能重新販售它。 在底部還有一個有趣的部分，列出了與這款字體常見配對的字體： 對於字體，我嘗試盡可能保守，因為大多數時候我不知道我在做什麼，觀察他人的做法並複製最合理的選擇是一個好策略。 現在你可以點擊頁面右上方的「下載字體系列」鏈接來下載TTF字體文件，你可以安裝它並在桌面程序中使用它作為字體。 但你不需要這樣做來在網站上使用字體。 你可以點擊「樣式」區域旁邊的「選擇此樣式」來將它添加到已選字體側邊欄： 完成後，你點擊嵌入選項卡，你可以找到要在項目中輸入的代碼：一個用於在HTML中包含字體的link元素，以及應用字體家族到特定元素的CSS規則： 所以在這個例子中，你需要添加以下HTML： <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> 然後添加以下CSS： body { /*在這裡使用你喜歡的選擇器*/ font-family: 'Press Start 2P', cursive; } 我們使用了一個回退字體，以防字體無法加載或花費太多時間加載。 另一種包含字體的方法是使用CSS中的@import指令，這樣你就不需要在HTML中使用link屬性 - 一切都在CSS文件中： @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); 但這種方法有一個限制：速度較慢。如果字體在HTML中連結，瀏覽器會在讀取HTML後立即對字體URL發出請求。 如果字體在CSS中連結，瀏覽器首先必須對CSS進行請求，然後才能對字體URL進行請求。 就在這幾毫秒的時間內，頁面的加載中就可能出現立即加載帶有正確字體的頁面和帶有回退字體的頁面之間的差異，當正確字體可用時再加載正確字體的頁面。

本教程將解釋如何使用Cookies和JWT在GraphQL API上進行身份驗證，並使用Apollo作為驅動。 我們將創建一個私有區域，根據您的用戶登錄顯示不同的信息。 具體而言，以下是步驟： 在客戶端創建一個登錄表單 發送登錄數據到服務器 驗證用戶並返回JWT 將JWT存儲在cookie中 使用JWT進行對GraphQL API的進一步請求 本教程的代碼可在GitHub上找到：https://github.com/flaviocopes/apollo-graphql-client-server-authentication-jwt 讓我們開始。 警告！此教程適用於較舊版本的Apollo。現在Apollo使用@apollo/xxx而不是apollo-xxx，我會在更新之前先做一些研究:) 啟動客戶端應用程序 首先，我們使用create-react-app來創建客戶端部分，執行以下命令以在空文件夾中創建應用程序： npx create-react-app client 然後進入該文件夾，並通過以下命令安裝所需的所有庫： cd client npm install apollo-client apollo-boost apollo-link-http apollo-cache-inmemory react-apollo apollo-link-context @reach/router js-cookie graphql-tag 登錄表單 我們首先創建一個登錄表單。在src文件夾中創建一個名為Form.js的文件，並將以下內容添加到其中： import React, { useState } from 'react' import { navigate } from '@reach/router' const url = 'http://localhost:3000/login' const Form = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const submitForm = event => { event....

我的網站是基於Hugo的，它是一個靜態網站生成器。 雖然有像Forestry等工具可以在其之上使用視覺化的內容管理系統，但我並不是很喜歡它們，而且我組織內容的方式並不適合這些工具。一個簡單的例子就是圖像。它們通常希望您將所有圖像存儲在一個文件夾中，而我則為每篇文章創建一個文件夾，並將文件放在其中。 總之，我在我的Mac上使用VS Code編輯Markdown，然後將更改推送到GitHub。 在iPad上，我使用GitHub的一個很棒的功能，直接在瀏覽器中編輯文件，本質上是在雲端運行的VS Code。 這非常酷，也許有一天我會完全使用這個功能，而不再使用Mac上的VS Code。 下面是它的工作原理。 如果你有一個名為https://github.com/userName/repositoryName的存儲庫，將瀏覽器指向https://github.dev/userName/repositoryName 換句話說，只需將.com改為.dev，你就可以在Safari的VS Code視圖中看到你的存儲庫。 從這裡，你基本上可以像在VS Code中一樣工作，但在瀏覽器中。唯一仍然不完全正常工作的是搜索，它需要在本地存儲中索引文件，但在Safari中效果並不完美。 我還需要注意不要嘗試使用cmd-w來關閉VS Code標籤，因為那樣會關閉Safari標籤。 此外，我在處理圖像時遇到了一個問題，例如如果我在iPad上進行截圖，它們的大小相當大，並且解析度很高（超過1MB？），而我通常將圖像轉換為JPG格式，因為這更高效。但這是我之後可以在Mac上處理的問題。我可以有一種處理圖像的系統在雲端執行，但我到目前為止還沒有需要它。 除此之外，完成更改後，我將它們推送到GitHub。

通過這篇簡短的指南，您可以學習關於JavaScript正則表達式的所有內容，了解最重要的概念並通過示例展示。 正則表達式介紹 困難但有用 正則表達式是什麼樣子 工作原理 錨定 匹配範圍內的項目 多次匹配範圍項目 否定模式 元字符 正則表達式選項 量詞 + * {n} {n,m} 可選項目 分組 捕獲分組 可選分組 引用匹配的分組 命名捕獲分組 不使用分組的匹配和執行 非捕獲分組 標誌 檢查正則表達式 轉義 字符串邊界 使用正則表達式替換 貪婪模式 先行斷言：根據後面的字符串進行匹配 後行斷言：根據前面的字符串進行匹配 正則表達式和Unicode Unicode屬性逃逸 示例 從字符串中提取數字 匹配電子郵件地址 捕獲雙引號之間的文本 獲取HTML標籤內的內容 正則表達式介紹 正則表達式（也稱為regex）是一種以非常高效的方式處理字符串的方法。 通過使用特殊的語法來定義正則表達式，您可以： 在字符串中搜索文本 在字符串中替換子字符串 從字符串中提取信息 幾乎每一種編程語言都實現了正則表達式。每種實現之間有一些小差異，但是基本概念幾乎都是通用的。 正則表達式可以追溯到20世紀50年代，那時它被正式作為字符串處理算法的一種概念搜索模式。 它在grep、sed等UNIX工具中得到了實現，以及在流行的文本編輯器中使用，在Perl編程語言中引入了正則表達式，隨後在許多其他編程語言中引入。 JavaScript與Perl一起是具有內置的正則表達式支持的編程語言之一。 困難但有用 對於初學者來說，正則表達式可能完全看不懂，但很多時候即使對專業開發人員來說也是如此，除非他們願意投入必要的時間去理解它們。 由於寫出易於理解、易於閱讀和易於維護/修改的正則表達式非常困難，所以使用正則表達式是唯一明智的方法來執行某些字符串操作，因此它是一個非常有價值的工具。 本教程旨在以簡單的方式介紹JavaScript正則表達式，並提供閱讀和創建正則表達式所需的所有信息。 經驗法則是，簡單的正則表達式容易閱讀且易於撰寫，而複雜的正則表達式如果你不深入了解基礎知識，很快就會變得混亂不堪。 正則表達式是什麼樣子 在JavaScript中，正則表達式是一個對象，可以用兩種方式定義。 第一種方式是使用構造函數通過實例化一個新的RegExp對象來定義： const re1 = new RegExp('hey') 第二種方式是使用正則字面量形式： const re1 = /hey/ 您知道JavaScript有對象字面量和數組字面量嗎？它還有正則字面量。 在上面的示例中，hey被稱為模式。在字面形式中，它由斜杠分隔，而使用對象構造函數時則不是。 這是兩種形式之間的第一個重要差異，但我們稍後會看到其他差異。...

在本篇文章中，我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器，以便我可以看到有多少人註冊了這個課程（註冊時間為11月15日至11月22日！） 這個計數器是一個完全多餘的東西，是我在拖延時做的，想要避免重要的工作。 我一直在思考不同的方法來實現這個功能，比如使用Scriptable創建一個JavaScript的iOS小工具。 但後來我想，嗯，那就只做一個網頁好了。一個我可以在iPad上保持打開的網頁，我將iPad放在桌子旁邊或其他可以不時看到它的地方。 我可以設置iPad永不進入睡眠狀態，並將網頁設置為每2分鐘自動刷新。 做一個簡單的網頁的好處是我可以在任何地方訪問它。無論是在iPad上、iPhone上還是Mac上。 我創建了一個Node.js程序來獲取我所需的數據。 第一步是編寫一個獲取數據的函數： const getData = async () => { return new Promise((resolve, reject) => { let count = 0 //獲取計數 resolve(count) }) } 我將其設置為async函數，因為我使用了fetch請求，而且很可能你也需要它。 如果你感興趣，我將所有的註冊信息存儲在Airtable紀錄中，所以在getData()內部，我放置了從Airtable獲取計數所需的所有代碼。 然後，我創建了一個非常簡單的Express服務器，該服務器提供了一個HTML頁面，該頁面在頁面的中央顯示了計數。 const express = require('express') const app = express() app.get('/', async (req, res, next) => { const count = await getData() const html = ` <html> <head> <!-- 每2分鐘自動刷新 --> <meta http-equiv="refresh" content="120"> <!-- 在iOS上允許全屏顯示 --> <meta name="apple-mobile-web-app-capable" content="yes"> <link href="https://fonts....