Archives

開發者的困境在使用現有服務或平台和建立自己的平台之間做出決策 我現在遇到了一個很大的問題。 我正在試用各種平台，看看它們是否適合成為我將來托管課程的地方。 我現在使用的平台是基於靜態網站的，使用自定義集成和無代碼工具（如Airtable）進行接口。付款和課程報名使用Node.js服務進行管理。你可以稱它為JAMstack，serverless，或者任何當下流行的時髦術語。 事實上，我有幾個類似的SAAS平台，供我每門課程使用。我喜歡把事情保持簡單和直接。一開始，我為一門課程制 ...

CSS 錯誤處理CSS 在處理錯誤時非常靈活。當它遇到錯誤時，它不同於 JavaScript，不會整個拆開東西然後全部停止執行腳本。 CSS 試圖盡力遵從你的要求。 如果一行有錯誤，它會跳過該行並繼續往下一行執行，而不報錯。 如果你忘記在一行上加上分號： 12345p { font-size: 20px color: black; border: 1px solid black;} 有錯誤的那一行和下一行 都不會 生效，但第三行的規則將會正確應用在 ...

如何設置PHP在本地機器上安裝PHP有很多種方法。 我發現最方便的安裝方式是使用MAMP。 MAMP是一個可以免費使用的工具，適用於所有操作系統——Mac、Windows和Linux。它提供了您運行PHP所需的所有工具。 PHP是由HTTP服務器運行的，HTTP服務器負責響應由瀏覽器發出的HTTP請求。因此，您使用瀏覽器（如Chrome、Firefox或Safari）訪問URL，HTTP服務器會響應一些HTML內容。 服務器通常是Apache或nginx。 然後，如果您要進行 ...

JavaScript數學庫Math物件包含了很多與數學有關的工具。本教程將介紹所有這些工具。 Math物件包含了很多與數學有關的工具。 它包含了常數和函數。 常數 項目 說明 Math.E 自然對數的底數e（約等於2.71828） Math.LN10 表示底數為10的自然對數 Math.LN2 表示底數為2的自然對數 Math.LOG10E 表示以10為底的對數的底數值 Math.LOG2E 表示以2為底的對數的底數值 Math.PI 圓周率π（ ...

CSS 的 margin 屬性margin（邊距）是一個在CSS中常用的簡單屬性，用於在元素周圍添加空間。 記住： margin 在元素邊框之外添加空間 padding 在元素邊框之內添加空間 具體的 margin 屬性margin 有四個相關屬性，可以一次性改變單個邊的 margin： margin-top margin-right margin-bottom margin-left 使用這些屬性非常簡單，不容易混淆，例如： 12margin-left: 30px; ...

Swift：如何從數組中獲取隨機項目 本教程屬於 Swift 系列 假設您有一個 Swift 數組，像這樣： 1let items = [1, 2, 3] 且您想從中獲取一個隨機數字。 數組數據類型提供了 randomElement() 函數，該函數返回一個 Element? ： 1let item = items.randomElement() tags: [“Swift”, “array”, “random”, “randomElement”]

如何使用window.confirm()如何使用瀏覽器提供的confirm() API來讓使用者確認操作 confirm()允許我們在執行某些操作之前詢問使用者確認。 這個API的歷史可以追溯到網絡的起源，並且被每個瀏覽器支持。 它非常簡單，我認為它在許多不同情況下都可能派上用場，而不需要自定義的UI。 它的工作原理如下：您調用confirm()函數，傳遞一個表示要確認的內容的字符串，該內容將顯示給用戶： 1confirm("確定要刪除該元素嗎？") 在 ...

Python 閉包之前我們已經看過如何在 Python 中建立巢狀函式。 如果從函式中返回一個巢狀函式，那個巢狀函式可以訪問該函式中定義的變數，即使該函式已經不再活動。 以下是一個簡單的計數器範例。 123456789101112131415def counter(): count = 0 def increment(): nonlocal count count = count + 1 return count return incrementincrement = cou ...

用於觸發 JavaScript 函數的連結當你使用純 JavaScript 創建應用程序時，有時你會需要在用戶點擊連結時觸發一個函數。 你通常可以通過以下兩種方式來實現。 假設你要執行的函數叫做 handleClick()： 123function handleClick() { alert('被點擊了');} 第一種方式是使用以下連結： 1<a href="#" onclick="handleC ...

VS Code 設定 React 開發環境這篇文章將解釋如何設定一個讓 React 開發容易且簡潔的 VS Code 環境，並且擁有程式碼檢查的提示和保存時自動格式化的功能。 ESLint首先，我們將安裝 ESLint。ESLint 是一個非常棒的工具，可以幫助您保持程式碼整潔並符合規範。 使用 ESLint 延伸套件 安裝 ESLint 到 VS Code 的擴充套件商店。 然後，在終端機中執行以下 Yarn 命令（如果尚未安裝 Yarn，請參考我的教學鏈接獲取簡短的指南） ...

如何在JavaScript中判斷值的類型？JavaScript有一些內建的類型，包括數字、字符串、布爾值和對象。 使用typeof運算符，我們可以檢查變量賦值的值的類型。 例如： 1typeof 'test' 注意它不是一個函數，而是一個運算符，所以不需要使用括號。 使用它，我們將得到一個字符串，返回以下值之一： 'number' 'string' 'boolean' 'undefined&# ...

如何使用JavaScript為DOM元素設定樣式透過純粹的JavaScript，我們可以動態地為網頁上的元素應用樣式。 在網頁瀏覽器中，有哪些API可以達成這個目的呢？ 首先，其中最乾淨的方式之一就是為元素新增或移除類別，並使用CSS中的類別樣式。 1const element = document.querySelector('#my-element') 您可以使用元素的classList屬性以及其add()和remove()方法： 12element ...

JavaScript中的物件解構是什麼？什麼是「物件解構」，解構操作的結果是什麼？ 假設你有一個包含一些屬性的物件： 123456const person = { firstName: 'Tom', lastName: 'Cruise', actor: true, age: 57} 你可以提取物件中的一部分屬性，並將它們放入指定的變數中： 1const { firstName, age } ...

Swift 迴圈控制轉移陳述 本教程屬於 Swift 系列教程 Swift 提供了兩個陳述語句，您可以使用它們來控制迴圈內的流程：continue 和 break continue 用於停止當前的迴圈迭代，並運行下一個迭代。 break 結束迴圈，不執行任何其他迭代。 示例： 1234567let list = ["a", "b", "c"]for item in list { if (item == & ...

在不同的JavaScript庫中進行相同的POST API調用我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。 該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。 在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。 無論如何，導出的代碼片段有幾個，我 ...

使用Node.js和Express创建GraphQL服务器這是一個關於如何使用Node.js和Express創建GraphQL服務器的簡單教程。 首先，創建一個新的Node.js項目，如果您還沒有設置一個的話： 1npm init --y 這個命令會創建我們使用npm所需的package.json文件。 安裝npm包express，graphql和express-graphql： 1npm install express graphql express-graphql 創 ...

將所有 Node 套件的相依性更新至最新版本你想知道如何將存放在 package.json 檔案中的所有 npm 套件的相依性更新至其最新可用版本嗎？ 當你使用 npm install <packageName> 安裝套件時，最新可用版本的套件會被下載並放置在 node_modules 資料夾中，同時也會在目前資料夾中的 package.json 和 package-lock.json 檔案中新增對應的項目。 npm 會計算這些相依性並安裝最新可用的版本。 假設你 ...

JavaScript 中的關鍵字和保留字列表這是 JavaScript 中所有的關鍵字和保留字列表。這些詞彙不能用作變數標識符。 await break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let ne ...

JavaScript 程式碼風格這個 JavaScript 程式碼風格是我在使用 JavaScript 時每天都遵循的一套規範。這是一份不斷更新的文件，我遵循的主要規則。 每種語言都有一套語法規則。 剛開始時，有些人可能會按照不破壞語言規則的方式將代碼添加到文件中，但卻不關心和注意編程風格。 這並不是因為他們不關心風格，而是因為他們還沒有足夠的經驗來認識其重要性。 我真的相信編程是一門藝術。就像繪畫、木工或任何涉及創造力的事情一樣，我們的程序可以做很多事情，但它們應該以一種有 ...

如何使用SWR進行條件加載數據在使用SWR時，您可能會遇到這個問題：只有在擁有一些數據時才想要發送請求。 舉個例子，我曾遇到的一個情況是，在向/api/user端點發送請求獲取用戶數據之前，我需要確定用戶是否已登錄。 具體來說，我有一個session對象，其中包含了一個user對象，它們都需要被定義。 所以，以下是我的解決方法： 12345import fetcher from 'lib/fetcher'...const { data: user ...

如何從 macOS 的視窗截圖中移除陰影我經常為我的部落格文章或課程截取大量截圖。 我通常使用 cmd-shift-4 來截取整個應用程序視窗，然後按下空格鍵。 就像這樣： macOS 預設會添加一個陰影，使其看起來很漂亮。 如果你想要移除陰影，可以在終端中使用以下命令： 1defaults write com.apple.screencapture disable-shadow -bool true ; killall SystemUIServer 以下是移除陰影後的同 ...

如何在 VS Code 中修復 Unknown at rule @tailwindcss (unknownAtRules) 的問題問題：您在專案中引用 Tailwind，但在 VS Code 中卻收到「Unknown at rule @tailwindcss(unknownAtRules)」的警告訊息： 以下是如何解決此問題的步驟。 打開設定檔，搜尋關鍵字「unknown」，第一個結果應該是您要尋找的：CSS > Lint: Unknown At Rules： 將該 ...

MongoDB與SQL數據庫有何不同通常，有兩種主要類型的數據庫：SQL數據庫和NoSQL數據庫。 如果你熟悉MySQL或PostgreSQL等，SQL數據庫允許你使用一種名為SQL的特定語言添加和檢索數據，像這樣： 12SELECT * FROM carsINSERT INTO cars VALUES ('fiesta', 2010) SQL語言相對較老，誕生於1986年，是一種經過考驗的技術。 在NoSQL的範疇下，我們將那些不使用SQL語言進行數據 ...

如何從 Svelte 組件導出函數和變數學習如何從 Svelte 組件導出函數和變數 你知道可以使用以下語法將一個 Svelte 組件導入另一個組件中： 123<script>import Button from './Button.svelte';</script> 如果你想要導出更多東西呢？ 那麼你必須在組件中使用特殊的 script 標籤，並添加 context="module" 屬性進行導出。 以下 ...

用於從子文件夾中提供多個Node.js應用程序的簡單nginx反向代理最近我在DigitalOcean上設置了一個VPS，以在同一域名下運行幾個不同的Node.js腳本。 現在，您無法使兩個不同的Node.js應用程序監聽同一個端口，因此必須使用反向代理。常用的方法是使用Nginx。 我將每個Node應用程序設置為在自己的子文件夾中運行，所以我需要編輯Nginx配置： 1sudo nano /etc/nginx/sites-available/default 配置文件原始內 ...

CSS 變數 (自訂屬性) 探索 CSS 自訂屬性，也被稱為 CSS 變數，這是現代瀏覽器的強大新功能，幫助您編寫更好的 CSS 介紹 使用變數的基礎知識 在任何元素內建立變數 變數的作用範圍 使用 JavaScript 互動 CSS 變數值 處理無效值 瀏覽器支援 CSS 變數區分大小寫 CSS 變數中的數學計算 使用 CSS 變數進行媒體查詢 為 var() 設定備用值 介紹過去幾年，CSS 預處理器非常成功。在新專案中開始使用 Less 或 SASS 是非常常見的事 ...

＃使用NextAuth的Next.js電子郵件身份驗證 在Next.js中管理身份驗證可以有很多不同的方法。 在我的網站上，我選擇使用基於電子郵件的身份驗證和JWT令牌，通過NextAuth.js來實現，下面是我是如何做到的。 首先，你需要一個外部數據庫。你可以使用本地數據庫或者雲端數據庫。我選擇了PostgreSQL，但你可以使用任何你想要的數據庫。 假設你已經建立了一個Next.js網站。 執行npm install next-auth pg安裝NextAuth和Post ...

在任意文件夾運行 Web 伺服器您常常需要在系統中的特定文件夾中運行一個 Web 伺服器。 您沒有足夠時間來配置像 Apache 或 Nginx 這樣的正確的 Web 伺服器，因為這只是為了幾分鐘或測試您的應用。 那麼，該怎麼辦呢？ 根據您喜歡的語言，您可能已經擁有所需的一切。 如果您使用 Node.js，並已經安裝了 npm，請運行以下命令： 1npm install -g http-server 然後在您想要透過伺服器公開的文件夾中運行 http-server。 默認情 ...

如何檢查 JavaScript 陣列是否包含特定值給定一個 JavaScript 陣列，你要如何檢查其中是否包含特定項目？ 使用陣列實例的 includes() 方法。 例如： 123['red', 'green'].includes('red') // true ✅['red', 'green'].includes('yellow') // false ❌ ...

如何使用 PurgeCSS 和 PostCSS 設置 Tailwind本篇文章將介紹如何利用 PurgeCSS 和簡單的 PostCSS 設置來修剪 Tailwind CSS（不涉及使用 webpack）。 最近，我決定將我的部落格 CSS 遷移到 Tailwind。 Tailwind 是一個有趣的框架，它不像 Bootstrap 或其他框架提供一組小部件，而是提供「工具程式」。 我發現 Tailwind 與我處理 HTML 的方式非常契合。 之前我在另一篇文章中介紹了如何使 ...

Python註釋Python是動態型別的語言。我們不需要指定變數、函數參數或函數返回值的型別。 註釋讓我們有了這個選擇。 下面是一個沒有註釋的函數： 12def increment(n): return n + 1 下面是相同函數帶有註釋的版本： 12def increment(n: int) -> int: return n + 1 你也可以對變數進行註釋： 1count: int = 0 Python會忽略這些註釋。一個叫做 mypy 的工具可以獨 ...

isInteger() 方法了解 JavaScript 中 Number 對象的 isInteger() 方法 當傳入的值為整數時，返回 true。否則，當值是布爾型、字符串、對象、數組時，返回 false。 123456789Number.isInteger(1) //trueNumber.isInteger(-237) //trueNumber.isInteger(0) //trueNumber.isInteger(0.2) //falseNumber.isInteger ...

在Netlify上自動觸發部署我有一份定期發布在我的博客上的文章清單。以下是我如何透過IFTTT每天早上自動觸發我的Hugo靜態網站部署在Netlify上的方法。 注意：這個方法不僅適用於Netlify，也適用於其他提供手動部署Webhooks的服務供應商。 我有一份定期發布在我的博客上的文章清單，而我試著提前撰寫幾天的內容，為我無法寫作的時候或是需要休息的時候留出空間。 我認為保持一致性對於保持工作的動力很重要。過去兩個月，我每週一至週六都有發布文章，且我未來也想繼續 ...

使用 macOS Shortcuts 轉換圖像或調整大小長久以來，我一直使用 Automator 腳本將圖像轉換為 JPG 格式。 這是我經常做的事情，因為在某些情況下，PNG 圖像和 JPG 圖像的差異是巨大的，這取決於圖像本身。 有時將圖像轉換為 JPG 可以使文件大小減少 5 倍。對於大圖像來說，這是值得一試的。 （由於透明背景，PNG 更好看，但是在文件大小和美觀之間有一個平衡） macOS Monterey 是最新的 macOS 版本，它附帶了一個未來可能取代 Au ...

JavaScript 運算子的優先順序規則學習 JavaScript 運算子的優先順序規則基礎知識 每個複雜的敘述都會引入優先順序的問題。 以這個為例： 1const a = 1 \* 2 + 5 / 2 % 2 結果為 2.5，但為什麼呢？哪個運算會先執行，哪個需要等待呢？ 某些運算符的優先順序高於其他的。以下是優先順序規則的列表： 運算符 描述 - + ++ -- 一元運算符，遞增和遞減 * / % 乘法/除法 + - 加法/減法 ...

設置您的網站以在iOS上允許全屏在使用iPad Pro期間，我決定將一些網站添加到主屏幕。雖然同樣的操作在iPhone上也有效： 按壓分享按鈕（在底部中間）以顯示選項面板： 選擇“添加到主屏幕”： 現在，您將在主屏幕上看到一個帶有網站圖標的應用程序。 點擊它只會在Safari中打開該網站。 但是，如果將此meta標籤添加到頁面中： 1<meta name="apple-mobile-web-app-capable" content="ye ...

Python操作符重載操作符重載是一種高級技巧，我們可以使用它來使類可比較，並使它們能夠使用Python的操作符。 讓我們來看一個Dog類： 12345class Dog: # Dog類 def __init__(self, name, age): self.name = name self.age = age 讓我們創建2個Dog對象： 12roger = Dog('Roger', 8)syd = Dog(&#x ...

Python，with語句with語句在處理異常時非常有用。 例如，在使用文件時，每次打開文件後都要記得關閉。 with可以使這個過程變得透明。 不用寫下面的代碼了： 12345678filename = '/Users/flavio/test.txt'try: file = open(filename, 'r') content = file.read() print(content)finally: file.close() 你可 ...

在C語言中可以嵌套函數嗎？想知道在C語言中是否可以嵌套函數嗎？ 不可以。 在C語言中無法在其他函數內部定義函數。 例如JavaScript、Swift或Python等語言中，嵌套函數是很常見的用法。 然而C和C++並不支援這種選項。 你的下一個最佳選擇是將需要執行某些工作的函數放在一個獨立的文件中，並只公開客戶端程序需要使用的主要函數，這樣你就可以隱藏不需要公開的所有內容。 tags: [“C”, “nested functions”]

Object seal() 方法了解 JavaScript Object 物件的 seal() 方法 JavaScript 的 Object 物件的 seal() 方法接受一個物件作為參數，並回傳相同的物件。傳入的物件會被改變，並成為一個不接受新屬性的封閉物件。新的屬性無法添加，現有的屬性無法移除，但現有的屬性可以更改。 範例： 12345const dog = {}dog.breed = 'Siberian Husky'Object. ...

如何檢查 JavaScript 物件屬性是否為未定義在 JavaScript 程式中，要檢查物件屬性是否為未定義的正確方法是使用 typeof 運算子。以下是你可以使用它的簡單說明。 在 JavaScript 程式中，要檢查物件屬性是否為未定義的正確方法是使用 typeof 運算子。 typeof 會返回描述運算元類型的字串。它不需要使用括號，只需傳入你想檢查的任何值： 12345678const list = []const count = 2typeof list //& ...

如何使用 Node 獲取圖片的寬度和高度你需要知道圖片在文件系統中的位置。 如果是從互聯網獲取的圖片，你可以將它保存到系統的臨時文件夾。 然後安裝 image-size npm 模塊： 1npm install image-size 你可以像這樣使用它： 123import sizeOf from 'image-size'const { height, width } = sizeOf(fileLocation) tags: [“i ...

Netlify Lambda 函數教程如何使用 Netlify Lambda 函数，为 JAMstack 网站添加动态处理功能 之前我在我的Netlify教程中写到了Netlify。我使用它来托管这个博客，而且效果非常好。 我还使用它来运行其他网站，而且所有的网站都是基于 Hugo 构建的 - 这使得我的堆栈100%基于JAMstack。 JAM 的有趣之处在于它不仅仅局限于静态和”哑”网站 - 你可以实现任何你想要的动态功能。 其中大部分的功能由“lambda 函数”实现。 ...

npm 全局或本地安裝套件套件最適合全局安裝的時機是什麼？為什麼？ 本地套件和全局套件的主要區別如下： 本地套件 安裝在執行 npm install <package-name> 的目錄中，並且放置在該目錄下的 node_modules 文件夾中 全局套件 則放置在系統的一個統一場所（具體位置取決於你的配置），不論你在何處運行 npm install -g <package-name> 在你的代碼中，它們的引用方式是一樣的： 1require(&# ...

在 Next.js 中懶加載模組如何在您的 Next.js 應用程式中實現懶加載模組 能夠視覺化分析捆包很棒，因為我們可以輕鬆優化我們的應用程式。 假設我們需要在我們的部落格文章中加載 Moment 庫。運行： 1npm install moment 以將其包含在專案中。 現在讓我們模擬在/blog和/blog/[id]這兩個不同路由中需要使用Moment的情況。 我們在pages/blog/[id].js中導入它： 12345678910111213import momen ...

使用Express進行文件傳送Express提供了一個方便的方法來以附件的形式傳送文件: Response.download() 一旦使用這個方法來傳送文件的路由被用戶訪問，瀏覽器將提示用戶下載。 Response.download()方法允許您將文件附加到請求中，瀏覽器將把文件保存到磁盤，而不是在頁面上顯示出來。 1app.get('/', (req, res) => res.download('./file.pdf')) 在 ...

＃在C中的雙引號與單引號 如何在C中使用引號 在C中，您可能會在某些情況下使用雙引號，在其他情況下使用單引號。 在某些語言中，這兩者之間沒有區別。但是在C中，它們之間是有區別的，您將根據需要使用其中之一。 何時可以使用單引號，何時可以使用雙引號？ 單引號用於識別單個字符（char值）： 1char letter = 'a'; 雙引號用於創建字符串文字： 1char \*name = "Flavio"; 請注意，您可以創建單字母字符串 ...

如何實現無限視頻串流我進行了一個實驗，這是我對一個副業項目的想法。 我的目標是讓YouTube現場直播我已經錄製好的視頻。 在視頻結束時，串流將重新開始。 如果你在想，我剛剛進行了這個實驗，看到它的工作情況我確定“可行”，但實際上我並沒有使用它。我也不能保證這對你有用，只是記錄下對我有效的方法，以便下次能夠重用這段程式碼。 我想這個方法對Twitch也會有效，但我還沒有試過，只是猜測而已。 我在YouTube上開始了一個直播，並獲得了串流金鑰。 我在一個文件夾中有一個vide ...

Linux commands: lsls命令的快速指南，用於列出文件夾中的文件 在文件夾內部，您可以使用“ls”命令列出文件夾中的所有文件： 1ls 如果您添加文件夾名稱或路徑，它將打印該文件夾的內容： 1ls /bin ls接受許多選項。其中我最喜歡的選項組合是-al。試試看： 1ls -al /bin 與普通的ls相比，這會返回更多信息。 從左到右依次是： 文件的權限（如果系統支持ACL，還會顯示ACL標誌） 指向該文件的鏈接數量 文件所有者 文件所屬組 文件 ...

Phaser: 物理引擎 本篇文章是 Phaser 系列的一部分。點擊這裡查看系列的第一篇文章。 Phaser 提供了三種不同的內建物理引擎: Arcade 物理引擎 Matter.js Impact (相容 Impact.js) Arcade 物理引擎是其中最簡單的一種，現在我們就來介紹它。 在 Phaser.Game 初始化配置物件中，通過添加 physics 屬性來啟用 Arcade 物理引擎: 123456789const config = { // ...